Hybrid BESS Command & Control

\n \n \n

\n \n \n\n \n

\n \n

\n State of Charge\n —%\n

\n State of Health\n —%\n

\n Power\n — kW\n

\n Temp\n —°C\n

\n Cycles\n —\n

\n\n

\n \n

\n State of Charge\n —%\n

\n State of Health\n —%\n

\n Power\n — kW\n

\n Temp\n —°C\n

\n Cycles\n —\n

\n\n

\n \n

\n State of Charge\n —%\n

\n State of Health\n —%\n

\n Power\n — kW\n

\n Temp\n —°C\n

\n Cycles\n —\n

\n\n \n

\n \n

\n\n \n

System Explorer

\n\n \n

System Output Analysis

\n \n \n \n

\n \n

\n\n \n

EMS Event Log

\n\n \n

\n \n \n \n

\n LFP SoC (%)\n

\n \n

\n NMC SoC (%)\n

\n \n

\n LTO SoC (%)\n

\n \n

\n\n \n \n \n \n \n\n \n \n

\n\n \n\n`;\n\nconst CSS_CONTENT = `/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n DESIGN TOKENS\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n:root {\n /* Colors - Dark Theme */\n --color-bg-primary: #0a0a0f;\n --color-bg-secondary: #12121a;\n --color-bg-tertiary: #1a1a24;\n --color-bg-elevated: #22222e;\n \n --color-border: rgba(255, 255, 255, 0.08);\n --color-border-focus: rgba(255, 255, 255, 0.2);\n \n --color-text-primary: #f0f0f5;\n --color-text-secondary: #8888a0;\n --color-text-muted: #5a5a70;\n \n /* Accent Colors */\n --color-accent-primary: #6366f1;\n --color-accent-green: #22c55e;\n --color-accent-yellow: #eab308;\n --color-accent-red: #ef4444;\n --color-accent-blue: #3b82f6;\n --color-accent-purple: #a855f7;\n --color-accent-cyan: #06b6d4;\n \n /* Asset-specific colors */\n --color-lfp: #22c55e;\n --color-nmc: #a855f7;\n --color-lto: #f97316;\n --color-solar: #eab308;\n --color-grid: #3b82f6;\n \n /* Temperature scale */\n --color-temp-cool: #06b6d4;\n --color-temp-normal: #22c55e;\n --color-temp-warm: #eab308;\n --color-temp-hot: #ef4444;\n \n /* Shadows */\n --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);\n --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);\n --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);\n --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);\n \n /* Spacing */\n --space-1: 0.25rem;\n --space-2: 0.5rem;\n --space-3: 0.75rem;\n --space-4: 1rem;\n --space-5: 1.25rem;\n --space-6: 1.5rem;\n --space-8: 2rem;\n \n /* Border Radius */\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --radius-xl: 16px;\n --radius-full: 9999px;\n \n /* Typography */\n --font-sans: 'Inter', system-ui, -apple-system, sans-serif;\n --font-mono: 'JetBrains Mono', 'Fira Code', monospace;\n \n --text-xs: 0.75rem;\n --text-sm: 0.875rem;\n --text-base: 1rem;\n --text-lg: 1.125rem;\n --text-xl: 1.25rem;\n \n /* Transitions */\n --transition-fast: 150ms ease;\n --transition-base: 250ms ease;\n --transition-slow: 350ms ease;\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n RESET & BASE\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n*, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: 16px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\nhtml, body {\n height: 100%;\n width: 100%;\n}\n\nbody {\n font-family: var(--font-sans);\n background: var(--color-bg-primary);\n color: var(--color-text-primary);\n line-height: 1.5;\n overflow: hidden;\n position: fixed;\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n APP LAYOUT\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.app {\n display: flex;\n flex-direction: column;\n height: 100dvh;\n padding: var(--space-4);\n gap: var(--space-4);\n position: relative;\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n HEADER\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-bottom: var(--space-4);\n border-bottom: 1px solid var(--color-border);\n flex-shrink: 0;\n}\n\n.header__brand {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n.header__logo {\n width: 36px;\n height: 36px;\n color: var(--color-accent-primary);\n}\n\n.header__title {\n font-size: var(--text-lg);\n font-weight: 700;\n letter-spacing: -0.02em;\n}\n\n.header__title--accent {\n color: var(--color-accent-primary);\n}\n\n.status-indicator {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n background: var(--color-bg-secondary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-full);\n}\n\n.status-indicator__dot {\n width: 8px;\n height: 8px;\n border-radius: var(--radius-full);\n background: var(--color-accent-yellow);\n transition: all var(--transition-base);\n}\n\n.status-indicator--nominal .status-indicator__dot {\n background: var(--color-accent-green);\n box-shadow: 0 0 8px var(--color-accent-green);\n}\n\n.status-indicator--anomaly .status-indicator__dot {\n background: var(--color-accent-yellow);\n box-shadow: 0 0 8px var(--color-accent-yellow);\n animation: pulse 1.5s ease-in-out infinite;\n}\n\n.status-indicator--offline .status-indicator__dot {\n background: var(--color-accent-red);\n box-shadow: 0 0 8px var(--color-accent-red);\n animation: pulse 1s ease-in-out infinite;\n}\n\n.status-indicator__text {\n font-size: var(--text-xs);\n font-weight: 600;\n font-family: var(--font-mono);\n letter-spacing: 0.05em;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n VIEWS\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.views {\n flex: 1;\n display: flex;\n transition: transform var(--transition-slow);\n min-height: 0;\n}\n\n.view {\n width: 100%;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow: hidden;\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n CARDS\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.card {\n background: var(--color-bg-secondary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-lg);\n padding: var(--space-5);\n display: flex;\n flex-direction: column;\n box-shadow: var(--shadow-md);\n}\n\n.card--full {\n flex: 1;\n}\n\n.card--scrollable {\n flex: 1;\n overflow: hidden;\n}\n\n.card--scrollable .card__content,\n.card--scrollable .log {\n flex: 1;\n overflow-y: auto;\n}\n\n.card__title {\n font-size: var(--text-sm);\n font-weight: 600;\n color: var(--color-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: var(--space-4);\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n ASSET CARDS (Telemetry)\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.asset-grid {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n overflow-y: auto;\n padding-right: var(--space-2);\n}\n\n.asset-card {\n background: var(--color-bg-secondary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-lg);\n padding: var(--space-5);\n transition: border-color var(--transition-fast);\n}\n\n.asset-card:hover {\n border-color: var(--color-border-focus);\n}\n\n.asset-card__header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--space-4);\n}\n\n.asset-card__title {\n font-size: var(--text-base);\n font-weight: 600;\n}\n\n.asset-card__badge {\n font-size: var(--text-xs);\n font-weight: 600;\n padding: var(--space-1) var(--space-2);\n border-radius: var(--radius-sm);\n letter-spacing: 0.05em;\n}\n\n.asset-card__badge--lfp {\n background: rgba(34, 197, 94, 0.15);\n color: var(--color-lfp);\n}\n\n.asset-card__badge--nmc {\n background: rgba(168, 85, 247, 0.15);\n color: var(--color-nmc);\n}\n\n.asset-card__badge--lto {\n background: rgba(249, 115, 22, 0.15);\n color: var(--color-lto);\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n METRICS\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.metric {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--space-2);\n}\n\n.metric__label {\n font-size: var(--text-sm);\n color: var(--color-text-secondary);\n}\n\n.metric__value {\n font-family: var(--font-mono);\n font-size: var(--text-sm);\n font-weight: 500;\n}\n\n.metric-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-3);\n margin-top: var(--space-4);\n padding-top: var(--space-4);\n border-top: 1px solid var(--color-border);\n}\n\n.metric--compact {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-1);\n margin-bottom: 0;\n}\n\n.metric--compact .metric__label {\n font-size: var(--text-xs);\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n PROGRESS BARS\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.progress {\n height: 6px;\n background: var(--color-bg-tertiary);\n border-radius: var(--radius-full);\n overflow: hidden;\n margin-bottom: var(--space-3);\n}\n\n.progress__bar {\n height: 100%;\n width: 0%;\n border-radius: var(--radius-full);\n transition: width var(--transition-base);\n}\n\n.progress[data-type=\"soc\"] .progress__bar {\n background: linear-gradient(90deg, var(--color-accent-green), var(--color-accent-cyan));\n}\n\n.progress[data-type=\"soh\"] .progress__bar {\n background: linear-gradient(90deg, var(--color-accent-purple), var(--color-accent-blue));\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n GROUPS\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.groups-container {\n margin-top: var(--space-4);\n padding-top: var(--space-4);\n border-top: 1px solid var(--color-border);\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n}\n\n.group-item {\n padding: var(--space-3);\n background: var(--color-bg-tertiary);\n border-radius: var(--radius-md);\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n\n.group-item:hover {\n background: var(--color-bg-elevated);\n}\n\n.group-item__title {\n font-size: var(--text-sm);\n font-weight: 500;\n margin-bottom: var(--space-2);\n color: var(--color-text-secondary);\n}\n\n.group-item__metrics {\n display: flex;\n justify-content: space-between;\n font-size: var(--text-xs);\n color: var(--color-text-muted);\n}\n\n.group-item__metrics strong {\n color: var(--color-text-primary);\n font-family: var(--font-mono);\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n POWER FLOW DIAGRAM\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.power-flow-diagram {\n width: 100%;\n height: 100%;\n}\n\n.node {\n fill: var(--color-bg-tertiary);\n stroke: var(--color-border);\n stroke-width: 1.5;\n transition: all var(--transition-fast);\n}\n\n.node[data-type=\"grid\"] { stroke: var(--color-grid); }\n.node[data-type=\"solar\"] { stroke: var(--color-solar); }\n.node[data-type=\"lfp\"] { stroke: var(--color-lfp); }\n.node[data-type=\"nmc\"] { stroke: var(--color-nmc); }\n.node[data-type=\"lto\"] { stroke: var(--color-lto); }\n\n.node--bus {\n stroke: var(--color-text-secondary);\n}\n\n.node__label {\n fill: var(--color-text-primary);\n font-family: var(--font-sans);\n font-weight: 600;\n font-size: 14px;\n text-anchor: middle;\n}\n\n.node__value {\n fill: var(--color-text-secondary);\n font-family: var(--font-mono);\n font-size: 12px;\n text-anchor: middle;\n}\n\n.flow-path {\n fill: none;\n stroke: var(--color-border);\n stroke-width: 2.5;\n stroke-linecap: round;\n transition: stroke var(--transition-base);\n}\n\n.flow-path--active {\n stroke-dasharray: 8 8;\n}\n\n.flow-path--forward {\n animation: flow-forward 1s linear infinite;\n}\n\n.flow-path--reverse {\n animation: flow-reverse 1s linear infinite;\n}\n\n.flow-path--charging {\n stroke: var(--color-accent-yellow);\n}\n\n.flow-path--discharging {\n stroke: var(--color-accent-green);\n}\n\n.flow-path--disconnected {\n stroke: var(--color-accent-red) !important;\n stroke-dasharray: 6 4 !important;\n animation: none !important;\n}\n\n@keyframes flow-forward {\n from { stroke-dashoffset: 0; }\n to { stroke-dashoffset: -16; }\n}\n\n@keyframes flow-reverse {\n from { stroke-dashoffset: 0; }\n to { stroke-dashoffset: 16; }\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n EXPLORER VIEW\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.deployment {\n margin-bottom: var(--space-6);\n}\n\n.deployment__title {\n font-size: var(--text-sm);\n font-weight: 600;\n color: var(--color-text-secondary);\n padding-bottom: var(--space-3);\n border-bottom: 1px solid var(--color-border);\n margin-bottom: var(--space-4);\n}\n\n.modules-grid {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n}\n\n.module {\n background: var(--color-bg-tertiary);\n border: 1px solid var(--color-border);\n padding: var(--space-2);\n border-radius: var(--radius-md);\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n\n.module:hover {\n border-color: var(--color-border-focus);\n transform: translateY(-2px);\n}\n\n.cells-grid {\n display: grid;\n grid-template-columns: repeat(8, 1fr);\n gap: 3px;\n}\n\n.cell {\n width: 10px;\n height: 10px;\n border-radius: 2px;\n background: var(--color-temp-normal);\n transition: transform var(--transition-fast);\n cursor: pointer;\n}\n\n.cell:hover {\n transform: scale(1.5);\n z-index: 10;\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n TOOLTIP\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.tooltip {\n position: fixed;\n background: var(--color-bg-primary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-md);\n padding: var(--space-3);\n font-size: var(--text-xs);\n z-index: 1000;\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--transition-fast);\n min-width: 160px;\n box-shadow: var(--shadow-lg);\n backdrop-filter: blur(8px);\n}\n\n.tooltip--visible {\n opacity: 1;\n}\n\n.tooltip h4 {\n font-size: var(--text-sm);\n margin-bottom: var(--space-2);\n color: var(--color-text-primary);\n}\n\n.tooltip p {\n margin-bottom: var(--space-1);\n color: var(--color-text-secondary);\n}\n\n.tooltip strong {\n color: var(--color-text-primary);\n font-family: var(--font-mono);\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n CHARTS\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.chart-container {\n flex: 1;\n min-height: 0;\n margin-top: var(--space-4);\n}\n\n.chart {\n width: 100%;\n height: 100%;\n}\n\n.chart__axis {\n stroke: var(--color-text-muted);\n stroke-width: 1;\n}\n\n.chart__label {\n fill: var(--color-text-muted);\n font-size: 10px;\n font-family: var(--font-mono);\n}\n\n.chart__path {\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n LOG\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.log {\n font-size: var(--text-sm);\n font-family: var(--font-mono);\n line-height: 1.6;\n padding-right: var(--space-2);\n}\n\n.log p {\n padding: var(--space-1) 0;\n border-bottom: 1px solid var(--color-border);\n}\n\n.log .timestamp {\n color: var(--color-text-muted);\n}\n\n.log .INFO { color: var(--color-text-secondary); }\n.log .WARN { color: var(--color-accent-yellow); }\n.log .ACTION { color: var(--color-accent-green); }\n.log .ALERT { color: var(--color-accent-red); animation: blink 1s step-end infinite; }\n.log .log-ai { color: var(--color-accent-purple); font-style: italic; }\n\n@keyframes blink {\n 50% { opacity: 0.3; }\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n SPARKLINES\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.sparklines {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n.sparkline {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n.sparkline__label {\n font-size: var(--text-xs);\n color: var(--color-text-secondary);\n font-weight: 500;\n}\n\n.sparkline__container {\n height: 50px;\n background: var(--color-bg-tertiary);\n border-radius: var(--radius-md);\n padding: var(--space-2);\n}\n\n.sparkline__svg {\n width: 100%;\n height: 100%;\n}\n\n.sparkline__path {\n fill: none;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.sparkline__path--lfp { stroke: var(--color-lfp); }\n.sparkline__path--nmc { stroke: var(--color-nmc); }\n.sparkline__path--lto { stroke: var(--color-lto); }\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n BUTTONS\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.btn {\n font-family: var(--font-sans);\n font-weight: 500;\n border: 1px solid var(--color-border);\n border-radius: var(--radius-md);\n background: var(--color-bg-tertiary);\n color: var(--color-text-secondary);\n cursor: pointer;\n transition: all var(--transition-fast);\n white-space: nowrap;\n}\n\n.btn:hover {\n background: var(--color-bg-elevated);\n border-color: var(--color-border-focus);\n color: var(--color-text-primary);\n}\n\n.btn:focus-visible {\n outline: 2px solid var(--color-accent-primary);\n outline-offset: 2px;\n}\n\n.btn--sm {\n padding: var(--space-2) var(--space-3);\n font-size: var(--text-xs);\n}\n\n.btn--active {\n background: var(--color-accent-primary);\n border-color: var(--color-accent-primary);\n color: white;\n}\n\n.btn--control {\n padding: var(--space-3) var(--space-4);\n font-size: var(--text-sm);\n}\n\n.btn--danger {\n border-color: rgba(239, 68, 68, 0.3);\n}\n\n.btn--danger:hover {\n background: rgba(239, 68, 68, 0.15);\n border-color: var(--color-accent-red);\n color: var(--color-accent-red);\n}\n\n.btn--danger.btn--active {\n background: var(--color-accent-red);\n border-color: var(--color-accent-red);\n color: white;\n}\n\n.button-group {\n display: flex;\n gap: var(--space-2);\n flex-wrap: wrap;\n}\n\n.button-group--timeline {\n margin-bottom: var(--space-4);\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n NAVIGATION\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.nav {\n display: flex;\n justify-content: center;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n flex-shrink: 0;\n}\n\n.nav__dot {\n width: 8px;\n height: 8px;\n padding: 0;\n border: none;\n border-radius: var(--radius-full);\n background: var(--color-border);\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n\n.nav__dot:hover {\n background: var(--color-text-muted);\n transform: scale(1.2);\n}\n\n.nav__dot--active {\n background: var(--color-accent-primary);\n transform: scale(1.3);\n}\n\n.nav__arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--color-bg-secondary);\n border: 1px solid var(--color-border);\n border-radius: var(--radius-full);\n color: var(--color-text-primary);\n font-size: var(--text-xl);\n cursor: pointer;\n transition: all var(--transition-fast);\n z-index: 10;\n backdrop-filter: blur(8px);\n}\n\n.nav__arrow:hover {\n background: var(--color-accent-primary);\n border-color: var(--color-accent-primary);\n}\n\n.nav__arrow--left { left: var(--space-2); }\n.nav__arrow--right { right: var(--space-2); }\n.nav__arrow--hidden { opacity: 0; pointer-events: none; }\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n CONTROLS\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.controls {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--space-3);\n padding-top: var(--space-4);\n border-top: 1px solid var(--color-border);\n flex-shrink: 0;\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n SCROLLBAR\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n::-webkit-scrollbar-track {\n background: transparent;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--color-border);\n border-radius: var(--radius-full);\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--color-text-muted);\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n DESKTOP LAYOUT\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n@media (min-width: 1200px) {\n body {\n position: static;\n }\n\n .app {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: auto 1fr 1fr auto auto;\n padding: var(--space-6);\n gap: var(--space-5);\n height: 100vh;\n }\n\n .header {\n grid-column: 1 / -1;\n }\n\n .header__logo {\n width: 44px;\n height: 44px;\n }\n\n .header__title {\n font-size: var(--text-xl);\n }\n\n .views,\n .view {\n display: contents;\n }\n\n /* Grid placement for views */\n .view--telemetry {\n grid-column: 1 / -1;\n grid-row: 2 / 3;\n }\n\n .asset-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-5);\n overflow: visible;\n }\n\n .view--flow {\n grid-column: 1 / 3;\n grid-row: 3 / 4;\n }\n\n .view--log {\n grid-column: 3 / 5;\n grid-row: 3 / 4;\n }\n\n .view--history {\n grid-column: 1 / 3;\n grid-row: 4 / 5;\n }\n\n .view--explorer {\n grid-column: 3 / 5;\n grid-row: 4 / 5;\n }\n\n .view--output {\n grid-column: 1 / -1;\n grid-row: 5 / 6;\n }\n\n .controls {\n grid-column: 1 / -1;\n grid-row: 6 / 7;\n display: flex;\n justify-content: center;\n gap: var(--space-4);\n }\n\n .controls .btn {\n min-width: 140px;\n }\n\n /* Hide mobile navigation on desktop */\n .nav,\n .nav__arrow {\n display: none !important;\n }\n}\n\n/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n UTILITIES\n ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n`;\n\nconst JS_CONTENT = `/**\n * BESS Command & Control Dashboard\n * Modern TypeScript-style JavaScript with class-based architecture\n * @version 2.0.0\n */\n\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n// CONFIGURATION\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nconst CONFIG = Object.freeze({\n CELLS_PER_MODULE: 16,\n HISTORY_MAX_ENTRIES: 1800,\n OUTPUT_HISTORY_MAX: 200,\n RENDER_INTERVAL_MS: 250,\n HISTORY_LOG_INTERVAL_MS: 500,\n NOMINAL_FREQUENCY: 60.0,\n FREQUENCY_TOLERANCE: 0.1,\n});\n\nconst ASSET_DEFINITIONS = Object.freeze({\n lfp: {\n id: 'lfp',\n name: 'LFP Battery',\n role: 'Workhorse',\n groups: [\n { packSizeMWh: 2.5, numPacks: 10 },\n { packSizeMWh: 5.0, numPacks: 5 },\n ],\n },\n nmc: {\n id: 'nmc',\n name: 'NMC Battery',\n role: 'Energy Reserve',\n groups: [{ packSizeMWh: 4.0, numPacks: 8 }],\n },\n lto: {\n id: 'lto',\n name: 'LTO Battery',\n role: 'Sprinter',\n groups: [\n { packSizeMWh: 0.5, numPacks: 8 },\n { packSizeMWh: 1.0, numPacks: 4 },\n ],\n },\n});\n\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n// UTILITIES\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nconst clamp = (value, min, max) => Math.max(min, Math.min(max, value));\nconst randomInRange = (min, max) => Math.random() * (max - min) + min;\nconst formatNumber = (num, decimals = 1) => num.toFixed(decimals);\n\nconst $ = (selector, context = document) => context.querySelector(selector);\nconst $$ = (selector, context = document) => [...context.querySelectorAll(selector)];\n\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n// SIMULATION ENGINE\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nclass SimulationEngine {\n constructor() {\n this.state = this.createInitialState();\n }\n\n createInitialState() {\n return {\n time: new Date(),\n scenario: 'normal',\n grid: {\n frequency: CONFIG.NOMINAL_FREQUENCY,\n connected: true,\n power: 0,\n },\n solar: { power: 0 },\n pcs: { power: 0 },\n assets: this.initializeAssets(),\n optimization: {\n mode: 'normal',\n targetMW: 15.0,\n },\n history: {\n timeRangeSeconds: 3600,\n lfp: [],\n nmc: [],\n lto: [],\n output: [],\n },\n };\n }\n\n initializeAssets() {\n const assets = {};\n\n for (const [id, definition] of Object.entries(ASSET_DEFINITIONS)) {\n assets[id] = {\n ...definition,\n groups: definition.groups.map((groupDef, groupIndex) => ({\n ...groupDef,\n packs: this.createPacks(id, groupIndex, groupDef),\n })),\n };\n }\n\n return assets;\n }\n\n createPacks(assetId, groupIndex, groupDef) {\n return Array.from({ length: groupDef.numPacks }, (_, packIndex) => {\n const pack = {\n id: \\`\\${assetId}_g\\${groupIndex}_p\\${packIndex}\\`,\n soc: randomInRange(60, 75),\n soh: randomInRange(99, 100),\n temp: randomInRange(22.5, 27.5),\n cycles: Math.floor(randomInRange(50, 150)),\n power: 0,\n cells: [],\n };\n\n pack.cells = Array.from({ length: CONFIG.CELLS_PER_MODULE }, (_, cellIndex) => ({\n id: \\`\\${pack.id}_c\\${cellIndex}\\`,\n voltage: randomInRange(3.15, 3.25),\n temp: pack.temp + randomInRange(-1, 1),\n soh: randomInRange(99, 100),\n }));\n\n return pack;\n });\n }\n\n getGroupAggregates(group) {\n const { packs, packSizeMWh } = group;\n if (!packs.length) {\n return { avgSoc: 0, avgTemp: 0, totalPower: 0, totalCapacityMWh: 0 };\n }\n\n const count = packs.length;\n return {\n avgSoc: packs.reduce((sum, p) => sum + p.soc, 0) / count,\n avgTemp: packs.reduce((sum, p) => sum + p.temp, 0) / count,\n totalPower: packs.reduce((sum, p) => sum + p.power, 0),\n totalCapacityMWh: count * packSizeMWh,\n };\n }\n\n getAssetAggregates(asset) {\n const allPacks = asset.groups.flatMap((g) => g.packs);\n const packCount = allPacks.length;\n\n if (!packCount) {\n return {\n totalPower: 0,\n avgSoc: 0,\n avgSoh: 0,\n avgTemp: 0,\n avgCycles: 0,\n totalCapacityMWh: 0,\n maxPowerMW: 0,\n };\n }\n\n let totalPower = 0;\n let totalCapacityMWh = 0;\n let weightedSocSum = 0;\n\n for (const group of asset.groups) {\n const aggs = this.getGroupAggregates(group);\n totalPower += aggs.totalPower;\n totalCapacityMWh += aggs.totalCapacityMWh;\n weightedSocSum += aggs.avgSoc * aggs.totalCapacityMWh;\n }\n\n return {\n totalPower,\n totalCapacityMWh,\n maxPowerMW: totalCapacityMWh / 4,\n avgSoc: totalCapacityMWh > 0 ? weightedSocSum / totalCapacityMWh : 0,\n avgSoh: allPacks.reduce((s, p) => s + p.soh, 0) / packCount,\n avgTemp: allPacks.reduce((s, p) => s + p.temp, 0) / packCount,\n avgCycles: allPacks.reduce((s, p) => s + p.cycles, 0) / packCount,\n };\n }\n\n assignPowerToAsset(assetId, totalPower) {\n const asset = this.state.assets[assetId];\n const allPacks = asset.groups.flatMap((g) => g.packs);\n\n if (allPacks.length > 0) {\n const powerPerPack = totalPower / allPacks.length;\n allPacks.forEach((pack) => (pack.power = powerPerPack));\n }\n }\n\n applyDispatchPlan(plan) {\n if (!plan) return;\n\n this.assignPowerToAsset('lfp', plan.lfp ?? 0);\n this.assignPowerToAsset('nmc', plan.nmc ?? 0);\n this.assignPowerToAsset('lto', plan.lto ?? 0);\n }\n\n runEMS(aiDispatchPlan) {\n // Reset all power commands\n Object.values(this.state.assets).forEach((asset) =>\n asset.groups.forEach((group) =>\n group.packs.forEach((pack) => (pack.power = 0))\n )\n );\n\n const { scenario, optimization } = this.state;\n\n if (scenario === 'normal') {\n this.state.solar.power = 10.0 + Math.sin(Date.now() / 8000) * 5;\n this.assignPowerToAsset('lfp', optimization.targetMW - this.state.solar.power);\n } else {\n this.applyDispatchPlan(aiDispatchPlan);\n\n if (scenario === 'solar-peak') {\n this.state.solar.power = 40.0;\n } else if (scenario === 'grid-failure') {\n this.state.solar.power = 10.0;\n }\n }\n\n const totalAssetPower = Object.values(this.state.assets)\n .flatMap((a) => a.groups.flatMap((g) => g.packs))\n .reduce((sum, p) => sum + p.power, 0);\n\n this.state.pcs.power = totalAssetPower;\n this.state.grid.power = this.state.grid.connected\n ? this.state.pcs.power - this.state.solar.power\n : 0;\n }\n\n updatePhysics(deltaTime) {\n for (const asset of Object.values(this.state.assets)) {\n for (const group of asset.groups) {\n for (const pack of group.packs) {\n const energyChangeMWh = (pack.power * deltaTime) / 3600;\n const socChange = (energyChangeMWh / group.packSizeMWh) * 100;\n pack.soc = clamp(pack.soc - socChange, 0, 100);\n\n const heatGeneration = Math.abs(pack.power) * 0.05;\n const cooling = 0.005;\n pack.temp = clamp(pack.temp + heatGeneration - cooling, 20, 45);\n\n for (const cell of pack.cells) {\n cell.temp += (pack.temp - cell.temp) * 0.1 + randomInRange(-0.05, 0.05);\n cell.voltage += Math.abs(pack.power) * -0.001 + (3.25 - cell.voltage) * 0.001;\n }\n }\n }\n }\n\n this.updateGridFrequency();\n }\n\n updateGridFrequency() {\n const { scenario, assets } = this.state;\n\n if (scenario === 'freq-drop') {\n const ltoPower = this.getAssetAggregates(assets.lto).totalPower;\n const lfpPower = this.getAssetAggregates(assets.lfp).totalPower;\n\n let freq = 59.8 + Math.sin(Date.now() / 500) * 0.1;\n\n if (ltoPower > 0 || lfpPower > 0) {\n freq = Math.min(60.0, freq + 0.01 * (ltoPower + lfpPower / 2));\n }\n\n this.state.grid.frequency = freq;\n } else {\n this.state.grid.frequency = CONFIG.NOMINAL_FREQUENCY + randomInRange(-0.01, 0.01);\n }\n }\n\n getAIContext() {\n const { scenario, grid, assets } = this.state;\n\n const context = {\n event: scenario,\n grid: {\n connected: grid.connected,\n frequency: parseFloat(formatNumber(grid.frequency, 2)),\n },\n assets: {},\n };\n\n for (const assetId of ['lfp', 'nmc', 'lto']) {\n const aggs = this.getAssetAggregates(assets[assetId]);\n context.assets[assetId] = {\n role: assets[assetId].role,\n soc: parseFloat(formatNumber(aggs.avgSoc)),\n soh: parseFloat(formatNumber(aggs.avgSoh)),\n maxPowerMW: parseFloat(formatNumber(aggs.maxPowerMW)),\n };\n }\n\n return context;\n }\n}\n\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n// UI CONTROLLER\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nclass UIController {\n constructor() {\n this.elements = this.cacheElements();\n this.navigation = {\n currentIndex: 0,\n isDragging: false,\n startX: 0,\n currentX: 0,\n viewWidth: 0,\n };\n }\n\n cacheElements() {\n return {\n app: $('#app'),\n views: $('#views-container'),\n logContainer: $('#log-content'),\n tooltip: $('#telemetry-tooltip'),\n explorerContent: $('#explorer-content'),\n outputChart: $('#output-chart-svg'),\n outputContainer: $('#output-chart-container'),\n statusIndicator: $('#status-indicator'),\n statusText: $('#system-status'),\n navDots: $$('.nav__dot'),\n navArrowLeft: $('#nav-arrow-left'),\n navArrowRight: $('#nav-arrow-right'),\n };\n }\n\n log(level, message) {\n const timestamp = new Date().toLocaleTimeString('en-US', { hour12: false });\n const entry = document.createElement('p');\n entry.className = level;\n entry.innerHTML = \\`[\\${timestamp}] [\\${level.toUpperCase()}] \\${message}\\`;\n this.elements.logContainer.appendChild(entry);\n this.elements.logContainer.scrollTop = this.elements.logContainer.scrollHeight;\n }\n\n updateTelemetry(assets, getGroupAggregates, getAssetAggregates) {\n for (const [id, asset] of Object.entries(assets)) {\n const card = $(\\`#\\${id}-telemetry\\`);\n if (!card) continue;\n\n const aggs = getAssetAggregates(asset);\n\n card.querySelector('.asset-card__title').textContent = asset.name;\n card.querySelector('[data-value=\"soc\"]').textContent = \\`\\${formatNumber(aggs.avgSoc)}%\\`;\n card.querySelector('[data-progress=\"soc\"]').style.width = \\`\\${aggs.avgSoc}%\\`;\n card.querySelector('[data-value=\"soh\"]').textContent = \\`\\${formatNumber(aggs.avgSoh)}%\\`;\n card.querySelector('[data-progress=\"soh\"]').style.width = \\`\\${aggs.avgSoh}%\\`;\n card.querySelector('[data-value=\"power\"]').textContent = \\`\\${formatNumber(aggs.totalPower * 1000, 0)} kW\\`;\n card.querySelector('[data-value=\"temp\"]').textContent = \\`\\${formatNumber(aggs.avgTemp)}°C\\`;\n card.querySelector('[data-value=\"cycles\"]').textContent = Math.round(aggs.avgCycles);\n\n const socText = $(\\`#\\${id}-soc-text\\`);\n if (socText) socText.textContent = \\`\\${formatNumber(aggs.avgSoc, 0)}%\\`;\n\n this.renderGroupDetails(card, asset, getGroupAggregates);\n }\n }\n\n renderGroupDetails(card, asset, getGroupAggregates) {\n const container = card.querySelector('.groups-container');\n if (!container) return;\n\n const html = asset.groups.map((group, index) => {\n const aggs = getGroupAggregates(group);\n const label = String.fromCharCode(65 + index);\n\n return \\`\n

\n Deployment \\${label} (\\${group.packs.length}×\\${formatNumber(group.packSizeMWh)}MWh)\n

\n SoC: \\${formatNumber(aggs.avgSoc)}%\n Power: \\${formatNumber(aggs.totalPower * 1000, 0)}kW\n Temp: \\${formatNumber(aggs.avgTemp)}°C\n

\n \\`;\n }).join('');\n\n container.innerHTML = html;\n }\n\n updatePowerFlow(state, getAssetAggregates) {\n const { grid, solar, pcs, assets } = state;\n\n $('#grid-freq-text').textContent = \\`\\${formatNumber(grid.frequency, 2)} Hz\\`;\n $('#solar-power-text').textContent = \\`\\${formatNumber(solar.power)} MW\\`;\n $('#pcs-power-text').textContent = \\`\\${formatNumber(pcs.power)} MW\\`;\n\n const lfpPower = getAssetAggregates(assets.lfp).totalPower;\n const nmcPower = getAssetAggregates(assets.nmc).totalPower;\n const ltoPower = getAssetAggregates(assets.lto).totalPower;\n\n this.updateFlowPath('path-grid-pcs', grid.power, false);\n this.updateFlowPath('path-solar-bus', solar.power, false);\n this.updateFlowPath('path-pcs-bus', -pcs.power, false);\n this.updateFlowPath('path-bus-lfp', lfpPower, true);\n this.updateFlowPath('path-bus-nmc', nmcPower, true);\n this.updateFlowPath('path-bus-lto', ltoPower, true);\n\n const gridPath = $('#path-grid-pcs');\n gridPath.classList.toggle('flow-path--disconnected', !grid.connected);\n }\n\n updateFlowPath(pathId, power, reverseOnPositive = false) {\n const path = $(\\`#\\${pathId}\\`);\n if (!path) return;\n\n path.classList.remove(\n 'flow-path--active',\n 'flow-path--forward',\n 'flow-path--reverse',\n 'flow-path--charging',\n 'flow-path--discharging'\n );\n\n const threshold = 0.01;\n if (Math.abs(power) < threshold) {\n path.style.stroke = '';\n path.style.strokeDasharray = '';\n return;\n }\n\n path.classList.add('flow-path--active');\n path.style.strokeDasharray = '8 8';\n\n const isPositive = power > 0;\n const isForward = isPositive !== reverseOnPositive;\n\n path.classList.add(isForward ? 'flow-path--forward' : 'flow-path--reverse');\n path.classList.add(power > 0 ? 'flow-path--discharging' : 'flow-path--charging');\n }\n\n updateSystemStatus(grid) {\n const indicator = this.elements.statusIndicator;\n indicator.classList.remove('status-indicator--nominal', 'status-indicator--anomaly', 'status-indicator--offline');\n\n if (!grid.connected) {\n this.elements.statusText.textContent = 'ISLANDED';\n indicator.classList.add('status-indicator--offline');\n } else if (Math.abs(grid.frequency - CONFIG.NOMINAL_FREQUENCY) > CONFIG.FREQUENCY_TOLERANCE) {\n this.elements.statusText.textContent = 'GRID ANOMALY';\n indicator.classList.add('status-indicator--anomaly');\n } else {\n this.elements.statusText.textContent = 'NOMINAL';\n indicator.classList.add('status-indicator--nominal');\n }\n }\n\n renderExplorer(assets) {\n const html = Object.values(assets).map((asset) => \\`\n

\\${asset.name}

\n \\${asset.groups.map((group, gi) =>\n group.packs.map((pack, pi) => \\`\n

\n \\${pack.cells.map((cell, ci) => {\n const color = this.getTempColor(cell.temp);\n return \\`

\\`;\n }).join('')}\n

\n \\`).join('')\n ).join('')}\n

\n \\`).join('');\n\n this.elements.explorerContent.innerHTML = html;\n }\n\n getTempColor(temp) {\n if (temp < 22) return 'var(--color-temp-cool)';\n if (temp > 35) return 'var(--color-temp-hot)';\n if (temp > 28) return 'var(--color-temp-warm)';\n return 'var(--color-temp-normal)';\n }\n\n renderOutputChart(history) {\n const svg = this.elements.outputChart;\n const container = this.elements.outputContainer;\n const data = history.output;\n\n if (!data || data.length < 2) {\n svg.innerHTML = '';\n return;\n }\n\n const width = container.clientWidth;\n const height = container.clientHeight;\n if (!width || !height) return;\n\n svg.setAttribute('viewBox', \\`0 0 \\${width} \\${height}\\`);\n\n const padding = { top: 10, right: 10, bottom: 25, left: 40 };\n const values = data.map((d) => d.output);\n const max = Math.max(25, ...values);\n const range = max;\n\n const scaleX = (i) => padding.left + (i / (data.length - 1)) * (width - padding.left - padding.right);\n const scaleY = (v) => height - padding.bottom - (v / range) * (height - padding.top - padding.bottom);\n\n let paths = '';\n let segment = { d: '', status: null };\n\n data.forEach((point, i) => {\n const x = scaleX(i).toFixed(2);\n const y = scaleY(point.output).toFixed(2);\n\n if (point.status !== segment.status) {\n if (segment.d) {\n paths += \\`\\`;\n }\n segment = { d: \\`\\${x},\\${y}\\`, status: point.status };\n } else {\n segment.d += \\` L \\${x},\\${y}\\`;\n }\n });\n\n if (segment.d) {\n paths += \\`\\`;\n }\n\n const yAxis = \\`\\`;\n const xAxis = \\`\\`;\n\n const yLabels = [0, 1, 2, 3, 4].map((i) => {\n const val = (range / 4) * i;\n return \\`\\${val.toFixed(0)}\\`;\n }).join('');\n\n svg.innerHTML = yAxis + xAxis + yLabels + paths;\n }\n\n getChartColor(status) {\n const colors = {\n triage: 'var(--color-accent-yellow)',\n optimize: 'var(--color-accent-green)',\n normal: 'var(--color-accent-blue)',\n };\n return colors[status] || colors.normal;\n }\n\n renderSparkline(svgId, data, key) {\n const svg = $(\\`#\\${svgId}\\`);\n if (!svg) return;\n\n const path = svg.querySelector('path');\n if (!path || !data || data.length < 2) {\n if (path) path.setAttribute('d', '');\n return;\n }\n\n const width = svg.clientWidth;\n const height = svg.clientHeight;\n if (!width || !height) return;\n\n svg.setAttribute('viewBox', \\`0 0 \\${width} \\${height}\\`);\n\n const values = data.map((d) => d[key]);\n const min = Math.min(...values);\n const max = Math.max(...values);\n const range = max - min || 1;\n\n const points = data.map((d, i) => {\n const x = (i / (data.length - 1)) * width;\n const y = height - ((d[key] - min) / range) * (height - 4) - 2;\n return \\`\\${x.toFixed(2)},\\${y.toFixed(2)}\\`;\n }).join(' L ');\n\n path.setAttribute('d', \\`M \\${points}\\`);\n }\n\n updateHistoryView(history, timeRange, assets) {\n const cutoff = Date.now() - timeRange * 1000;\n\n for (const assetId of Object.keys(assets)) {\n const filtered = history[assetId].filter((d) => d.time > cutoff);\n this.renderSparkline(\\`\\${assetId}-soc-chart\\`, filtered, 'soc');\n }\n }\n\n showTooltip(event, assets, getGroupAggregates) {\n const target = event.target.closest('[data-asset-id]');\n if (!target) return;\n\n const { assetId, groupIndex, packIndex, cellIndex } = target.dataset;\n if (!assetId) return;\n\n const asset = assets[assetId];\n let html = '';\n\n try {\n if (cellIndex !== undefined) {\n const cell = asset.groups[groupIndex].packs[packIndex].cells[cellIndex];\n html = \\`\n

Cell \\${parseInt(cellIndex) + 1}

Temperature: \\${formatNumber(cell.temp)}°C

Voltage: \\${formatNumber(cell.voltage, 2)}V

Health: \\${formatNumber(cell.soh)}%

\n \\`;\n } else if (packIndex !== undefined) {\n const pack = asset.groups[groupIndex].packs[packIndex];\n html = \\`\n

Module \\${parseInt(packIndex) + 1}

SoC: \\${formatNumber(pack.soc)}%

Power: \\${formatNumber(pack.power * 1000, 0)} kW

Temperature: \\${formatNumber(pack.temp)}°C

\n \\`;\n } else if (groupIndex !== undefined) {\n const group = asset.groups[groupIndex];\n const aggs = getGroupAggregates(group);\n html = \\`\n

Deployment \\${String.fromCharCode(65 + parseInt(groupIndex))}

Avg. SoC: \\${formatNumber(aggs.avgSoc)}%

Total Power: \\${formatNumber(aggs.totalPower * 1000, 0)} kW

Avg. Temperature: \\${formatNumber(aggs.avgTemp)}°C

\n \\`;\n }\n } catch (err) {\n console.error('[Tooltip Error]', err);\n return;\n }\n\n if (html) {\n const tooltip = this.elements.tooltip;\n tooltip.innerHTML = html;\n tooltip.style.left = \\`\\${event.clientX + 15}px\\`;\n tooltip.style.top = \\`\\${event.clientY + 15}px\\`;\n tooltip.classList.add('tooltip--visible');\n }\n }\n\n hideTooltip() {\n this.elements.tooltip.classList.remove('tooltip--visible');\n }\n\n initNavigation() {\n const { views, navDots, navArrowLeft, navArrowRight } = this.elements;\n\n views.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: true });\n views.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: true });\n views.addEventListener('touchend', this.handleTouchEnd.bind(this));\n\n navArrowLeft.addEventListener('click', () => this.navigate(-1));\n navArrowRight.addEventListener('click', () => this.navigate(1));\n\n navDots.forEach((dot) => {\n dot.addEventListener('click', (e) => {\n this.navigation.currentIndex = parseInt(e.target.dataset.index);\n this.updateNavPosition();\n });\n });\n\n window.addEventListener('resize', this.handleResize.bind(this));\n this.handleResize();\n }\n\n handleTouchStart(e) {\n if (window.innerWidth >= 1200) return;\n\n this.navigation.isDragging = true;\n this.navigation.startX = e.touches[0].clientX;\n this.elements.views.style.transition = 'none';\n }\n\n handleTouchMove(e) {\n if (!this.navigation.isDragging || window.innerWidth >= 1200) return;\n\n this.navigation.currentX = e.touches[0].clientX;\n const diff = this.navigation.currentX - this.navigation.startX;\n const offset = this.navigation.currentIndex * -this.navigation.viewWidth + diff;\n this.elements.views.style.transform = \\`translateX(\\${offset}px)\\`;\n }\n\n handleTouchEnd() {\n if (!this.navigation.isDragging || window.innerWidth >= 1200) return;\n\n this.navigation.isDragging = false;\n this.elements.views.style.transition = 'transform var(--transition-slow)';\n\n const diff = this.navigation.currentX - this.navigation.startX;\n const threshold = 50;\n\n if (diff < -threshold && this.navigation.currentIndex < this.elements.navDots.length - 1) {\n this.navigation.currentIndex++;\n } else if (diff > threshold && this.navigation.currentIndex > 0) {\n this.navigation.currentIndex--;\n }\n\n this.updateNavPosition();\n }\n\n navigate(direction) {\n const maxIndex = this.elements.navDots.length - 1;\n this.navigation.currentIndex = clamp(this.navigation.currentIndex + direction, 0, maxIndex);\n this.updateNavPosition();\n }\n\n updateNavPosition() {\n const { currentIndex, viewWidth } = this.navigation;\n this.elements.views.style.transform = \\`translateX(\\${currentIndex * -viewWidth}px)\\`;\n\n this.elements.navDots.forEach((dot, i) => {\n dot.classList.toggle('nav__dot--active', i === currentIndex);\n });\n\n this.elements.navArrowLeft.classList.toggle('nav__arrow--hidden', currentIndex === 0);\n this.elements.navArrowRight.classList.toggle(\n 'nav__arrow--hidden',\n currentIndex === this.elements.navDots.length - 1\n );\n }\n\n handleResize() {\n if (window.innerWidth >= 1200) {\n this.elements.app.style.height = '100vh';\n this.elements.views.style.transform = 'none';\n } else {\n this.elements.app.style.height = \\`\\${window.innerHeight}px\\`;\n this.navigation.viewWidth = this.elements.views.clientWidth;\n this.elements.views.style.transition = 'none';\n this.updateNavPosition();\n requestAnimationFrame(() => {\n this.elements.views.style.transition = 'transform var(--transition-slow)';\n });\n }\n }\n\n bindControls(onScenarioChange) {\n let activeButton = $('#btn-normal');\n\n $$('.btn--control').forEach((btn) => {\n btn.addEventListener('click', (e) => {\n const scenario = e.target.id.replace('btn-', '');\n\n if (activeButton) activeButton.classList.remove('btn--active');\n activeButton = e.target;\n activeButton.classList.add('btn--active');\n\n onScenarioChange(scenario);\n });\n });\n }\n\n bindTimelineButtons(onRangeChange) {\n $$('.button-group--timeline .btn').forEach((btn) => {\n btn.addEventListener('click', (e) => {\n $$('.button-group--timeline .btn').forEach((b) => b.classList.remove('btn--active'));\n e.target.classList.add('btn--active');\n onRangeChange(parseInt(e.target.dataset.range));\n });\n });\n }\n\n bindOutputButtons(onModeChange) {\n $$('#output-view .btn').forEach((btn) => {\n btn.addEventListener('click', (e) => {\n $$('#output-view .btn').forEach((b) => b.classList.remove('btn--active'));\n e.target.classList.add('btn--active');\n onModeChange(e.target.dataset.mode);\n });\n });\n }\n\n initTooltips(assets, getGroupAggregates) {\n const handleTooltip = (e) => this.showTooltip(e, assets, getGroupAggregates);\n\n this.elements.explorerContent.addEventListener('mouseover', handleTooltip);\n this.elements.explorerContent.addEventListener('mouseout', () => this.hideTooltip());\n\n $('#telemetry-view').addEventListener('mouseover', (e) => {\n if (e.target.closest('.group-item')) handleTooltip(e);\n });\n $('#telemetry-view').addEventListener('mouseout', (e) => {\n if (e.target.closest('.group-item')) this.hideTooltip();\n });\n }\n}\n\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n// APPLICATION CONTROLLER\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nclass Application {\n constructor() {\n this.simulation = new SimulationEngine();\n this.ui = new UIController();\n this.aiDispatchPlan = null;\n this.lastRenderTime = 0;\n this.lastHistoryTime = 0;\n this.apiBaseUrl = this.resolveApiBaseUrl();\n }\n\n resolveApiBaseUrl() {\n const base = document.baseURI || window.location.origin + window.location.pathname;\n return base.endsWith('/') ? base : base + '/';\n }\n\n async initialize() {\n this.ui.initNavigation();\n this.ui.bindControls((scenario) => this.setScenario(scenario));\n this.ui.bindTimelineButtons((range) => {\n this.simulation.state.history.timeRangeSeconds = range;\n this.updateHistoryView();\n });\n this.ui.bindOutputButtons((mode) => {\n this.simulation.state.optimization.mode = mode;\n this.ui.log('ACTION', \\`Output mode changed to: \\${mode.toUpperCase()}\\`);\n });\n\n this.ui.renderExplorer(this.simulation.state.assets);\n this.ui.initTooltips(\n this.simulation.state.assets,\n (group) => this.simulation.getGroupAggregates(group)\n );\n\n this.ui.log('INFO', 'H-BESS Command & Control initialized');\n this.ui.log('INFO', 'Swipe or use navigation to switch views (6 total)');\n this.setScenario('normal');\n\n this.loop(performance.now());\n }\n\n loop(timestamp) {\n const now = new Date();\n const deltaTime = (now - this.simulation.state.time) / 1000;\n this.simulation.state.time = now;\n\n this.simulation.runEMS(this.aiDispatchPlan);\n this.simulation.updatePhysics(deltaTime);\n this.recordHistory(now.getTime());\n\n if (timestamp - this.lastRenderTime > CONFIG.RENDER_INTERVAL_MS) {\n this.lastRenderTime = timestamp;\n this.render();\n }\n\n requestAnimationFrame((t) => this.loop(t));\n }\n\n recordHistory(timestamp) {\n if (timestamp - this.lastHistoryTime < CONFIG.HISTORY_LOG_INTERVAL_MS) return;\n this.lastHistoryTime = timestamp;\n\n const { history, assets, grid, solar, pcs, optimization } = this.simulation.state;\n\n for (const assetId of Object.keys(assets)) {\n const aggs = this.simulation.getAssetAggregates(assets[assetId]);\n history[assetId].push({ time: timestamp, soc: aggs.avgSoc, power: aggs.totalPower });\n\n if (history[assetId].length > CONFIG.HISTORY_MAX_ENTRIES) {\n history[assetId].shift();\n }\n }\n\n const lfpPower = this.simulation.getAssetAggregates(assets.lfp).totalPower;\n const nmcPower = this.simulation.getAssetAggregates(assets.nmc).totalPower;\n const currentOutput = grid.connected\n ? solar.power + pcs.power\n : solar.power + lfpPower + nmcPower;\n\n history.output.push({\n time: timestamp,\n output: currentOutput,\n status: optimization.mode,\n });\n\n if (history.output.length > CONFIG.OUTPUT_HISTORY_MAX) {\n history.output.shift();\n }\n }\n\n render() {\n const { state } = this.simulation;\n\n this.ui.updateTelemetry(\n state.assets,\n (group) => this.simulation.getGroupAggregates(group),\n (asset) => this.simulation.getAssetAggregates(asset)\n );\n\n this.ui.updatePowerFlow(state, (asset) => this.simulation.getAssetAggregates(asset));\n this.ui.updateSystemStatus(state.grid);\n this.ui.updateHistoryView(state.history, state.history.timeRangeSeconds, state.assets);\n this.ui.renderOutputChart(state.history);\n this.ui.renderExplorer(state.assets);\n }\n\n updateHistoryView() {\n const { history, assets } = this.simulation.state;\n this.ui.updateHistoryView(history, history.timeRangeSeconds, assets);\n }\n\n async requestAIDispatch() {\n this.ui.log('INFO', 'Critical event detected. Consulting AI Coordinator...');\n\n const context = this.simulation.getAIContext();\n\n try {\n const response = await fetch(\\`\\${this.apiBaseUrl}api/dispatch\\`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(context),\n });\n\n if (!response.ok) {\n throw new Error(\\`AI Coordinator responded with status \\${response.status}\\`);\n }\n\n const data = await response.json();\n\n this.ui.log('log-ai', \\`AI ANALYSIS: \\${data.reason}\\`);\n this.aiDispatchPlan = data.dispatchPlan;\n\n const { lfp, nmc, lto } = this.aiDispatchPlan;\n this.ui.log(\n 'ACTION',\n \\`Executing dispatch: LFP=\\${formatNumber(lfp)}MW, NMC=\\${formatNumber(nmc)}MW, LTO=\\${formatNumber(lto)}MW\\`\n );\n } catch (error) {\n this.ui.log('WARN', \\`AI Dispatch failed: \\${error.message}. Engaging fallback.\\`);\n this.aiDispatchPlan = { lfp: 0, nmc: 0, lto: 0 };\n }\n }\n\n async setScenario(scenario) {\n if (this.simulation.state.scenario === scenario && scenario !== 'normal') return;\n\n this.ui.log('INFO', \\`━━━ Scenario: \\${scenario.toUpperCase().replace('-', ' ')} ━━━\\`);\n\n this.simulation.state.scenario = scenario;\n this.aiDispatchPlan = null;\n this.simulation.state.grid.connected = scenario !== 'grid-failure';\n\n if (scenario === 'normal') return;\n\n if (scenario === 'freq-drop') {\n this.ui.log('WARN', 'Grid frequency anomaly detected');\n }\n\n if (scenario === 'grid-failure') {\n this.ui.log('ALERT', 'GRID CONNECTION LOST');\n }\n\n await this.requestAIDispatch();\n }\n}\n\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n// ENTRY POINT\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const app = new Application();\n app.initialize();\n});\n`;\n\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n// UTILITIES\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nconst createResponse = (\n body: unknown,\n status: number = HTTP_STATUS.OK,\n contentType: string = CONTENT_TYPES.JSON\n): Response =>\n new Response(\n typeof body === \"string\" ? body : JSON.stringify(body),\n {\n status,\n headers: { \"Content-Type\": contentType },\n }\n );\n\nconst createErrorResponse = (\n message: string,\n status: number = HTTP_STATUS.INTERNAL_ERROR\n): Response =>\n createResponse({ error: message }, status);\n\nconst extractJsonFromText = (text: string): object | null => {\n const jsonMatch = text.match(/{[\\s\\S]*}/);\n if (!jsonMatch) return null;\n\n try {\n return JSON.parse(jsonMatch[0]);\n } catch {\n console.error(\"[JSON Parse Error]\", text);\n return null;\n }\n};\n\nconst isValidDispatchResponse = (data: unknown): data is AIDispatchResponse =>\n typeof data === \"object\" &&\n data !== null &&\n \"dispatchPlan\" in data &&\n \"reason\" in data;\n\nconst isValidRequestBody = (body: unknown): body is DispatchRequestBody =>\n typeof body === \"object\" &&\n body !== null &&\n \"event\" in body &&\n \"assets\" in body;\n\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n// API HANDLERS\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nconst handleDispatchRequest: RouteHandler = async (req) => {\n try {\n const body = await req.json();\n\n if (!isValidRequestBody(body)) {\n return createErrorResponse(\n \"Invalid request: Missing 'event' or 'assets' data\",\n HTTP_STATUS.BAD_REQUEST\n );\n }\n\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: AI_CONFIG.model,\n temperature: AI_CONFIG.temperature,\n response_format: AI_CONFIG.responseFormat,\n messages: [\n { role: \"system\", content: DISPATCH_SYSTEM_PROMPT },\n {\n role: \"user\",\n content: `Analyze and create dispatch plan.\\n\\nContext:\\n${JSON.stringify(body, null, 2)}`,\n },\n ],\n });\n\n const rawContent = completion.choices[0]?.message?.content;\n\n if (!rawContent) {\n throw new Error(\"AI Coordinator returned an empty response\");\n }\n\n const parsedResponse = extractJsonFromText(rawContent);\n\n if (!isValidDispatchResponse(parsedResponse)) {\n console.error(\"[Invalid AI Response Structure]\", rawContent);\n throw new Error(\"AI Coordinator returned malformed data structure\");\n }\n\n return createResponse(parsedResponse);\n } catch (error) {\n const message = error instanceof Error ? error.message : \"Unknown error occurred\";\n console.error(\"[Dispatch Error]\", error);\n return createErrorResponse(message);\n }\n};\n\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n// ROUTER\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nconst createStaticHandler =\n (content: string, contentType: string): RouteHandler =>\n async () =>\n createResponse(content, HTTP_STATUS.OK, contentType);\n\nconst routes: Route[] = [\n {\n method: \"POST\",\n path: \"/api/dispatch\",\n handler: handleDispatchRequest,\n },\n {\n method: \"GET\",\n path: \"/app.js\",\n handler: createStaticHandler(JS_CONTENT, CONTENT_TYPES.JS),\n },\n {\n method: \"GET\",\n path: \"/dashboard.css\",\n handler: createStaticHandler(CSS_CONTENT, CONTENT_TYPES.CSS),\n },\n];\n\nconst matchRoute = (method: string, path: string): Route | undefined =>\n routes.find((r) => r.method === method && r.path === path);\n\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n// MAIN HANDLER\n// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n const { method } = req;\n const { pathname } = url;\n\n // Match defined routes\n const route = matchRoute(method, pathname);\n if (route) {\n return route.handler(req);\n }\n\n // Serve HTML at root\n if (pathname === \"/\" && method === \"GET\") {\n const baseUrl = `https://${url.hostname}/`;\n const html = HTML_CONTENT.replace(\"{{APP_BASE_URL}}\", baseUrl);\n return createResponse(html, HTTP_STATUS.OK, CONTENT_TYPES.HTML);\n }\n\n return createResponse(\"Not Found\", HTTP_STATUS.NOT_FOUND, \"text/plain\");\n}","deleted","label",[99],"permalink","https://www.val.town/x/volt/untitled-6903/code/main.ts","extension","actionData","errors"]