Hybrid BESS C&C Dashboard

\n \n\n

Avg. SoC--%

Avg. SoH--%

Total Power-- kW

Avg. Temp--°C

Avg. Cycles--

Avg. SoC--%

Avg. SoH--%

Total Power-- kW

Avg. Temp--°C

Avg. Cycles--

Avg. SoC--%

Avg. SoH--%

Total Power-- kW

Avg. Temp--°C

Avg. Cycles--

\n\n

\n \n

\n\n

System Explorer

\n\n

System Output Analysis

\n \n \n \n

\n \n

\n\n

EMS Event Log

\n\n

\n \n \n \n

LFP SoC (%)

NMC SoC (%)

LTO SoC (%)

‹

›

\n\n

\n \n \n \n \n

\n\n\n`;\n\n// --- --- --- --- --- --- --- --- --- --- --- ---\n// ASSET: dashboard.css\n// --- --- --- --- --- --- --- --- --- --- --- ---\nconst CSS_CONTENT = `:root {\n --bg-primary: #1F1F1F;\n --bg-secondary: #1F1F1F;\n --border-color: #59948C;\n --text-primary: #D9D9D9;\n --text-secondary: #C0C0C0;\n --shadow-color: rgba(0, 0, 0, 0.5);\n --accent-blue: #71B2AA;\n --accent-green: #71B2AA;\n --accent-yellow: #C0C0C0;\n --accent-red: #D9D9D9;\n --accent-purple: #71B2AA;\n --temp-cool: #59948C;\n --temp-norm: #71B2AA;\n --temp-warm: #C0C0C0;\n --temp-hot: #D9D9D9;\n}\n\n*,\n*::before,\n*::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}\n\nhtml, body {\n height: 100%;\n width: 100%;\n}\n\nbody {\n background-color: var(--bg-primary);\n color: var(--text-primary);\n font-family: 'Inter', sans-serif;\n overflow: hidden;\n position: fixed;\n}\n\n.main-container {\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding: 1rem;\n gap: 1rem;\n height: 100%; /* Fallback for browsers not supporting dvh */\n height: 100dvh;\n}\n\n.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-bottom: 0.75rem;\n border-bottom: 1px solid var(--border-color);\n flex-shrink: 0;\n}\n\n.header-logo {\n height: 40px; /* Reduced size for mobile-first */\n width: auto;\n display: block;\n}\n\n.header-status {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1rem;\n}\n\n.status-light {\n width: 0.75rem;\n height: 0.75rem;\n border-radius: 50%;\n background-color: var(--accent-yellow);\n transition: background-color 0.3s ease;\n}\n\n.status-light.nominal {\n background-color: var(--accent-green);\n box-shadow: 0 0 8px var(--accent-green);\n}\n\n.status-light.anomaly {\n background-color: var(--accent-yellow);\n box-shadow: 0 0 8px var(--accent-yellow);\n animation: pulse 1.5s infinite;\n}\n\n.status-light.offline {\n background-color: var(--accent-red);\n box-shadow: 0 0 8px var(--accent-red);\n animation: pulse 1.5s infinite;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n}\n\n.view-container {\n flex-grow: 1;\n display: flex;\n transition: transform 0.35s ease-out;\n min-height: 0; /* Critical for flex + overflow */\n}\n\n.view {\n width: 100%;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n min-height: 0;\n overflow: hidden; /* Prevent inner content from breaking layout */\n}\n\n.card {\n background: var(--bg-secondary);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 1.25rem;\n box-shadow: 0 4px 12px var(--shadow-color);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.card-title {\n font-size: 0.9rem;\n font-weight: 500;\n margin-bottom: 1rem;\n color: var(--text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.telemetry-view {\n overflow-y: auto;\n gap: 1.5rem;\n}\n\n.metric {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.75rem;\n font-size: 1rem;\n}\n\n.metric-label {\n color: var(--text-secondary);\n}\n\n.metric-value {\n font-weight: 500;\n font-family: 'Roboto Mono', monospace;\n}\n\n.progress-bar {\n width: 100%;\n height: 8px;\n background: #333;\n border-radius: 4px;\n overflow: hidden;\n margin-top: 0.25rem;\n}\n\n.progress-bar-inner {\n height: 100%;\n width: 0%;\n transition: width 0.5s ease;\n border-radius: 4px;\n}\n\n.soc .progress-bar-inner { background: var(--accent-green); }\n.soh .progress-bar-inner { background: var(--accent-purple); }\n\n.groups-container {\n border-top: 1px solid var(--border-color);\n margin-top: 1rem;\n padding-top: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.group-details {\n padding: 0.75rem;\n background: #181818;\n border-radius: 8px;\n cursor: pointer;\n}\n\n.group-title {\n font-size: 0.9rem;\n color: var(--text-secondary);\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\n.group-metrics {\n display: flex;\n justify-content: space-between;\n font-size: 0.85rem;\n}\n\n.group-metrics strong {\n color: var(--text-primary);\n font-family: 'Roboto Mono', monospace;\n}\n\n.power-flow {\n flex-grow: 1;\n}\n\n#power-flow-svg {\n width: 100%;\n height: 100%;\n}\n\n.node-rect {\n stroke-width: 1.5;\n fill: #2a2a2a;\n rx: 8;\n}\n\n.node-text {\n fill: var(--text-primary);\n font-family: 'Inter', sans-serif;\n font-weight: 700;\n font-size: 15px;\n text-anchor: middle;\n}\n\n.node-subtext {\n fill: var(--text-secondary);\n font-family: 'Roboto Mono', monospace;\n font-size: 13px;\n text-anchor: middle;\n}\n\n.flow-path {\n stroke-width: 3;\n fill: none;\n stroke: var(--border-color);\n transition: stroke 0.5s ease;\n}\n\n.flow-path.active {\n animation-duration: 1.5s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n.flow-path.flow-forward { animation-name: dash-forward; }\n.flow-path.flow-reverse { animation-name: dash-reverse; }\n\n.grid-link.disconnected {\n stroke: var(--accent-red) !important;\n stroke-dasharray: 8 4 !important;\n animation: none !important;\n}\n\n@keyframes dash-forward {\n from { stroke-dashoffset: 0; }\n to { stroke-dashoffset: -20; }\n}\n@keyframes dash-reverse {\n from { stroke-dashoffset: 0; }\n to { stroke-dashoffset: 20; }\n}\n\n#explorer-view .card-content {\n overflow: auto;\n flex-grow: 1;\n}\n\n.deployment { margin-bottom: 1.5rem; }\n\n.deployment-title {\n font-size: 1rem;\n font-weight: 500;\n color: var(--text-secondary);\n padding-bottom: 0.5rem;\n border-bottom: 1px solid var(--border-color);\n margin-bottom: 1rem;\n}\n\n.modules-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n}\n\n.module {\n background: #2a2a2a;\n border: 1px solid var(--border-color);\n padding: 0.5rem;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.cells-grid {\n display: grid;\n grid-template-columns: repeat(8, 1fr);\n gap: 4px;\n}\n\n.cell {\n width: 12px;\n height: 12px;\n border-radius: 3px;\n background-color: var(--temp-norm);\n transition: transform 0.1s ease;\n cursor: pointer;\n}\n\n.cell:hover {\n transform: scale(1.4);\n z-index: 2;\n}\n\n#telemetry-tooltip {\n position: fixed;\n background: rgba(10, 10, 10, 0.9);\n backdrop-filter: blur(5px);\n border: 1px solid var(--border-color);\n border-radius: 8px;\n padding: 0.75rem;\n font-size: 0.8rem;\n z-index: 100;\n transition: opacity 0.2s;\n opacity: 0;\n pointer-events: none;\n min-width: 180px;\n transform: translate(15px, 15px); /* Offset from cursor */\n}\n\n#telemetry-tooltip.visible { opacity: 1; }\n#telemetry-tooltip h4 { margin-bottom: 0.5rem; font-size: 0.9rem; }\n#telemetry-tooltip p { margin-bottom: 0.25rem; }\n#telemetry-tooltip strong { color: var(--text-primary); font-family: 'Roboto Mono'; }\n\n.output-controls {\n display: flex;\n gap: 0.5rem;\n margin-bottom: 1rem;\n flex-wrap: wrap;\n}\n\n.output-btn {\n background: #2a2a2a;\n border: 1px solid var(--border-color);\n color: var(--text-secondary);\n padding: 0.35rem 0.85rem;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n font-family: 'Inter', sans-serif;\n user-select: none;\n}\n\n.output-btn.active,\n.output-btn:hover {\n background: var(--accent-purple);\n color: white;\n border-color: var(--accent-purple);\n}\n\n#output-chart-container {\n flex-grow: 1;\n min-height: 0;\n}\n\n#output-chart-svg {\n width: 100%;\n height: 100%;\n}\n\n.chart-axis { stroke: var(--text-secondary); stroke-width: 1; }\n.chart-label { fill: var(--text-secondary); font-size: 10px; }\n.chart-path { stroke-width: 2; fill: none; }\n\n.triage-log,\n.history-view {\n flex-grow: 1;\n overflow-y: auto;\n}\n\n#log-content {\n height: 100%;\n overflow-y: auto;\n font-size: 0.85rem;\n padding-right: 0.5rem;\n scroll-behavior: smooth;\n}\n\n#log-content p { line-height: 1.5; }\n#log-content .INFO { color: var(--text-secondary); }\n#log-content .WARN { color: var(--accent-yellow); }\n#log-content .log-ai { color: var(--accent-purple); font-style: italic; }\n#log-content .ACTION { color: var(--accent-green); }\n#log-content .ALERT { color: var(--accent-red); animation: blink 1.5s step-end infinite; }\n\n@keyframes blink {\n 50% { color: transparent; }\n}\n\n.timeline-controls {\n display: flex;\n gap: 0.5rem;\n margin-bottom: 1.5rem;\n}\n\n.timeline-btn {\n background: #2a2a2a;\n border: 1px solid var(--border-color);\n color: var(--text-secondary);\n padding: 0.35rem 0.85rem;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n user-select: none;\n}\n\n.timeline-btn.active,\n.timeline-btn:hover {\n background: var(--accent-blue);\n color: var(--bg-primary);\n border-color: var(--accent-blue);\n font-weight: 700;\n}\n\n.history-asset {\n margin-bottom: 0.5rem;\n}\n.sparkline-title {\n font-size: 0.8rem;\n color: var(--text-secondary);\n margin-bottom: 0.25rem;\n}\n.sparkline-container {\n width: 100%;\n height: 60px;\n background: #181818;\n border-radius: 4px;\n padding: 4px;\n}\n.sparkline-path { stroke-width: 2; fill: none; }\n\n.view-nav {\n display: flex;\n justify-content: center;\n gap: 0.75rem;\n padding: 0.5rem;\n flex-shrink: 0;\n}\n\n.nav-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--border-color);\n transition: all 0.3s;\n cursor: pointer;\n}\n\n.nav-dot.active {\n background: var(--text-primary);\n transform: scale(1.2);\n}\n\n.controls {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.75rem;\n padding-top: 0.75rem;\n border-top: 1px solid var(--border-color);\n flex-shrink: 0;\n}\n\n.control-btn {\n background: #2a2a2a;\n border: 1px solid var(--border-color);\n color: var(--text-secondary);\n padding: 0.85rem;\n border-radius: 8px;\n cursor: pointer;\n font-family: 'Inter', sans-serif;\n font-weight: 500;\n transition: all 0.2s ease;\n text-align: center;\n font-size: 0.9rem;\n user-select: none;\n}\n\n.control-btn:hover {\n border-color: var(--accent-blue);\n color: var(--text-primary);\n background: #333;\n}\n\n.control-btn.active {\n background: var(--accent-blue);\n color: white;\n border-color: var(--accent-blue);\n font-weight: 700;\n}\n\n.nav-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 36px;\n height: 36px;\n background: rgba(30, 30, 30, 0.7);\n color: var(--text-primary);\n font-size: 1.5rem;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 10;\n user-select: none;\n transition: all 0.2s ease;\n backdrop-filter: blur(2px);\n}\n\n.nav-arrow:hover { background: rgba(113, 178, 170, 0.5); }\n.nav-arrow.left { left: 10px; }\n.nav-arrow.right { right: 10px; }\n.nav-arrow.hidden { opacity: 0; pointer-events: none; }\n\n/* --- Desktop Layout --- */\n@media (min-width: 1200px) {\n body {\n position: static; /* Allow scrolling if content overflows */\n }\n .main-container {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: auto 1fr 1fr auto;\n padding: 1.5rem;\n gap: 1.5rem;\n height: 100vh;\n }\n .header {\n grid-column: 1 / -1;\n }\n .header-logo {\n height: 80px;\n }\n \n .view-container,\n .view {\n display: contents; /* Promotes .view children to the grid */\n }\n\n /* Assign views to the grid */\n .telemetry-view {\n grid-column: 1 / -1;\n grid-row: 2 / 3;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1.5rem;\n overflow: hidden;\n }\n .power-flow-view {\n grid-column: 1 / 3;\n grid-row: 3 / 4;\n }\n .triage-log-view {\n grid-column: 3 / 5;\n grid-row: 3 / 4;\n }\n .history-view-container {\n grid-column: 1 / 3;\n grid-row: 4 / 5;\n }\n .explorer-view-container {\n grid-column: 3 / 5;\n grid-row: 4 / 5;\n }\n .output-view-container {\n grid-column: 1 / -1;\n grid-row: 5 / 6;\n }\n .controls {\n grid-column: 1 / -1;\n grid-row: 6 / 7;\n display: flex;\n justify-content: space-around;\n padding-top: 1.5rem;\n gap: 1.5rem;\n }\n\n /* Hide mobile navigation */\n .view-nav,\n .nav-arrow {\n display: none !important;\n }\n}\n`;\n\n// --- --- --- --- --- --- --- --- --- --- --- ---\n// ASSET: app.js\n// --- --- --- --- --- --- --- --- --- --- --- ---\nconst JS_CONTENT = `/**\n * BESS C&C Dashboard Application\n * Refactored into modular, class-based architecture.\n */\n\n/**\n * Manages all simulation logic and state.\n */\nclass BESS_Simulation {\n constructor() {\n this.CELLS_PER_MODULE = 16;\n this.state = {\n time: new Date(),\n scenario: 'normal',\n grid: {\n frequency: 60.0,\n connected: true,\n power: 0,\n },\n solar: { power: 0 },\n pcs: { power: 0 },\n assets: this.initializeModularAssets(),\n outputOptimization: {\n status: 'normal',\n targetMW: 15.0,\n },\n history: {\n timeRangeSeconds: 3600,\n lfp: [],\n nmc: [],\n lto: [],\n output: [],\n },\n };\n }\n\n initializeModularAssets() {\n const assets = {\n lfp: { id: 'lfp', name: 'LFP (Workhorse)', groups: [{ packs: [], packSizeMWh: 2.5, numPacks: 10 }, { packs: [], packSizeMWh: 5.0, numPacks: 5 }] },\n nmc: { id: 'nmc', name: 'NMC (Energy Reserve)', groups: [{ packs: [], packSizeMWh: 4.0, numPacks: 8 }] },\n lto: { id: 'lto', name: 'LTO (Sprinter)', groups: [{ packs: [], packSizeMWh: 0.5, numPacks: 8 }, { packs: [], packSizeMWh: 1.0, numPacks: 4 }] },\n };\n for (const [assetId, asset] of Object.entries(assets)) {\n asset.groups.forEach((group, groupIndex) => {\n for (let i = 0; i < group.numPacks; i++) {\n const pack = {\n id: \\`\\${assetId}_g\\${groupIndex}_p\\${i}\\`,\n soc: 60 + Math.random() * 15,\n soh: 99 + Math.random(),\n temp: 25 + (Math.random() - 0.5) * 5,\n cycles: 50 + Math.floor(Math.random() * 100),\n power: 0,\n cells: [],\n };\n for (let j = 0; j < this.CELLS_PER_MODULE; j++) {\n pack.cells.push({\n id: \\`\\${pack.id}_c\\${j}\\`,\n voltage: 3.2 + (Math.random() - 0.5) * 0.1,\n temp: pack.temp + (Math.random() - 0.5) * 2,\n soh: 99.5 + (Math.random() - 0.5) * 1,\n });\n }\n group.packs.push(pack);\n }\n });\n }\n return assets;\n }\n\n getGroupAggregates(group) {\n const packCount = group.packs.length;\n if (packCount === 0) return { avgSoc: 0, avgTemp: 0, totalPower: 0, totalCapacityMWh: 0 };\n return {\n avgSoc: group.packs.reduce((s, p) => s + p.soc, 0) / packCount,\n avgTemp: group.packs.reduce((s, p) => s + p.temp, 0) / packCount,\n totalPower: group.packs.reduce((s, p) => s + p.power, 0),\n totalCapacityMWh: packCount * group.packSizeMWh,\n };\n }\n\n getAssetAggregates(asset) {\n const allPacks = asset.groups.flatMap(g => g.packs);\n const packCount = allPacks.length;\n if (packCount === 0) return { totalPower: 0, avgSoc: 0, avgSoh: 0, avgTemp: 0, avgCycles: 0, totalCapacityMWh: 0, maxPowerMW: 0 };\n\n let totalPower = 0, totalCapacityMWh = 0, weightedSocSum = 0;\n asset.groups.forEach(group => {\n const aggs = this.getGroupAggregates(group);\n totalPower += aggs.totalPower;\n totalCapacityMWh += aggs.totalCapacityMWh;\n weightedSocSum += aggs.avgSoc * aggs.totalCapacityMWh;\n });\n\n const avgSoc = totalCapacityMWh > 0 ? weightedSocSum / totalCapacityMWh : 0;\n const avgSoh = allPacks.reduce((s, p) => s + p.soh, 0) / packCount;\n const avgTemp = allPacks.reduce((s, p) => s + p.temp, 0) / packCount;\n const avgCycles = allPacks.reduce((s, p) => s + p.cycles, 0) / packCount;\n\n return {\n totalPower,\n avgSoc,\n avgSoh,\n avgTemp,\n avgCycles,\n totalCapacityMWh,\n maxPowerMW: totalCapacityMWh / 4, // 4-hour duration\n };\n }\n\n assignPowerToAsset(assetId, totalPower) {\n const asset = this.state.assets[assetId];\n const allPacks = asset.groups.flatMap(g => g.packs);\n if (allPacks.length > 0) {\n const powerPerPack = totalPower / allPacks.length;\n allPacks.forEach(p => p.power = powerPerPack);\n }\n }\n\n applyAIDispatchPlan(aiDispatchPlan) {\n if (!aiDispatchPlan) return;\n this.assignPowerToAsset('lfp', aiDispatchPlan.lfp);\n this.assignPowerToAsset('nmc', aiDispatchPlan.nmc);\n this.assignPowerToAsset('lto', aiDispatchPlan.lto);\n }\n\n runEMS(aiDispatchPlan) {\n // Clear previous commands\n Object.values(this.state.assets).forEach(a => a.groups.forEach(g => g.packs.forEach(p => p.power = 0)));\n\n if (this.state.scenario === 'normal') {\n this.state.solar.power = 10.0 + Math.sin(Date.now() / 8000) * 5;\n this.assignPowerToAsset('lfp', this.state.outputOptimization.targetMW - this.state.solar.power);\n } else {\n // For critical scenarios, the AI plan is applied.\n this.applyAIDispatchPlan(aiDispatchPlan);\n\n // Simulation updates for specific scenarios\n if (this.state.scenario === 'solar-peak') {\n this.state.solar.power = 40.0;\n } else if (this.state.scenario === 'grid-failure') {\n this.state.solar.power = 10.0;\n }\n }\n\n // Final system state calculation based on asset actions\n this.state.pcs.power = Object.values(this.state.assets).flatMap(a => a.groups.flatMap(g => g.packs)).reduce((s, p) => s + p.power, 0);\n if (this.state.grid.connected) {\n this.state.grid.power = this.state.pcs.power - this.state.solar.power;\n } else {\n this.state.grid.power = 0; // Islanded, no power to grid\n }\n }\n\n updateSimulation(deltaTime) {\n for (const asset of Object.values(this.state.assets)) {\n asset.groups.forEach(group => {\n group.packs.forEach(pack => {\n const energyChangeMWh = (pack.power * deltaTime) / 3600;\n pack.soc -= (energyChangeMWh / group.packSizeMWh) * 100;\n pack.soc = Math.max(0, Math.min(100, pack.soc));\n pack.temp += Math.abs(pack.power) * 0.05 - 0.005; // Simple thermal model\n pack.temp = Math.max(20, Math.min(45, pack.temp));\n pack.cells.forEach(cell => {\n cell.temp += (pack.temp - cell.temp) * 0.1 + (Math.random() - 0.5) * 0.1;\n cell.voltage += (Math.abs(pack.power) * -0.001) + (3.25 - cell.voltage) * 0.001;\n });\n });\n });\n }\n\n if (this.state.scenario === 'freq-drop') {\n const ltoPower = this.getAssetAggregates(this.state.assets.lto).totalPower;\n const lfpPower = this.getAssetAggregates(this.state.assets.lfp).totalPower;\n this.state.grid.frequency = 59.8 + Math.sin(Date.now() / 500) * 0.1;\n if (ltoPower > 0 || lfpPower > 0) {\n // Asset intervention stabilizes frequency\n this.state.grid.frequency = Math.min(60.0, this.state.grid.frequency + 0.01 * (ltoPower + lfpPower / 2));\n }\n } else {\n // Normal slight fluctuation\n this.state.grid.frequency = 60.0 + (Math.random() - 0.5) * 0.02;\n }\n }\n\n getAIContext() {\n const context = {\n event: this.state.scenario,\n grid: {\n connected: this.state.grid.connected,\n frequency: parseFloat(this.state.grid.frequency.toFixed(2)),\n },\n assets: {},\n };\n for (const assetId of ['lfp', 'nmc', 'lto']) {\n const aggs = this.getAssetAggregates(this.state.assets[assetId]);\n context.assets[assetId] = {\n role: this.state.assets[assetId].name.split('(')[1].replace(')', '').trim(),\n soc: parseFloat(aggs.avgSoc.toFixed(1)),\n soh: parseFloat(aggs.avgSoh.toFixed(1)),\n maxPowerMW: parseFloat(aggs.maxPowerMW.toFixed(1)),\n };\n }\n return context;\n }\n}\n\n/**\n * Manages all DOM manipulation and UI state.\n */\nclass Dashboard_UI {\n constructor() {\n this.dom = {\n logContainer: document.getElementById('log-content'),\n tooltip: document.getElementById('telemetry-tooltip'),\n mainContainer: document.getElementById('main-container'),\n viewContainer: document.getElementById('view-container'),\n navDots: document.querySelectorAll('#view-nav .nav-dot'),\n navArrowLeft: document.getElementById('nav-arrow-left'),\n navArrowRight: document.getElementById('nav-arrow-right'),\n explorerContent: document.getElementById('explorer-content'),\n outputChartSvg: document.getElementById('output-chart-svg'),\n outputChartContainer: document.getElementById('output-chart-container'),\n statusLight: document.getElementById('status-light'),\n systemStatus: document.getElementById('system-status'),\n };\n this.mobileNav = {\n currentIndex: 0,\n isDragging: false,\n startPos: 0,\n currentPos: 0,\n viewWidth: 0,\n };\n }\n \n log(level, message) {\n const ts = new Date().toLocaleTimeString('en-US', { hour12: false });\n const p = document.createElement('p');\n p.className = level;\n p.innerHTML = \\`[\\${ts}] [\\${level.toUpperCase()}] \\${message}\\`;\n this.dom.logContainer.appendChild(p);\n this.dom.logContainer.scrollTop = this.dom.logContainer.scrollHeight;\n }\n \n updateTelemetry(assets, getGroupAggregates, getAssetAggregates) {\n for (const [id, asset] of Object.entries(assets)) {\n const el = document.getElementById(\\`\\${id}-telemetry\\`);\n const aggs = getAssetAggregates(asset);\n el.querySelector('.card-title').textContent = asset.name;\n el.querySelector('[data-value=\"soc\"]').textContent = \\`\\${aggs.avgSoc.toFixed(1)}%\\`;\n el.querySelector('[data-progress=\"soc\"]').style.width = \\`\\${aggs.avgSoc}%\\`;\n el.querySelector('[data-value=\"soh\"]').textContent = \\`\\${aggs.avgSoh.toFixed(1)}%\\`;\n el.querySelector('[data-progress=\"soh\"]').style.width = \\`\\${aggs.avgSoh}%\\`;\n el.querySelector('[data-value=\"power\"]').textContent = \\`\\${(aggs.totalPower * 1000).toFixed(0)} kW\\`;\n el.querySelector('[data-value=\"temp\"]').textContent = \\`\\${aggs.avgTemp.toFixed(1)}°C\\`;\n el.querySelector('[data-value=\"cycles\"]').textContent = Math.round(aggs.avgCycles);\n document.getElementById(\\`\\${id}-soc-text\\`).textContent = \\`\\${aggs.avgSoc.toFixed(0)}%\\`;\n\n let groupsHtml = '';\n asset.groups.forEach((group, i) => {\n const groupAggs = getGroupAggregates(group);\n groupsHtml += \\`\n

Deployment \\${String.fromCharCode(65 + i)} (\\${group.packs.length}x\\${group.packSizeMWh.toFixed(1)}MWh)

\n SoC: \\${groupAggs.avgSoc.toFixed(1)}%\n Power: \\${(groupAggs.totalPower * 1000).toFixed(0)}kW\n Temp: \\${groupAggs.avgTemp.toFixed(1)}°C\n

\\`;\n });\n el.querySelector('.groups-container').innerHTML = groupsHtml;\n }\n }\n\n updateFlowAnimation(pathId, power, reverseOnPositive = false) {\n const path = document.getElementById(pathId);\n if (!path) return;\n path.classList.remove('active', 'flow-forward', 'flow-reverse');\n if (Math.abs(power) < 0.01) {\n path.style.stroke = 'var(--border-color)';\n path.style.strokeDasharray = 'none';\n } else {\n path.classList.add('active');\n path.style.strokeDasharray = '10, 10';\n path.style.stroke = power > 0 ? 'var(--accent-green)' : 'var(--accent-yellow)';\n const isPositive = power > 0;\n const isForward = isPositive !== reverseOnPositive;\n path.classList.add(isForward ? 'flow-forward' : 'flow-reverse');\n }\n }\n\n updatePowerFlow(grid, solar, pcs, assets, getAssetAggregates) {\n document.getElementById('grid-freq-text').textContent = \\`\\${grid.frequency.toFixed(2)} Hz\\`;\n document.getElementById('solar-power-text').textContent = \\`\\${solar.power.toFixed(1)} MW\\`;\n document.getElementById('pcs-power-text').textContent = \\`\\${pcs.power.toFixed(1)} 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.updateFlowAnimation('path-grid-pcs', grid.power, false);\n this.updateFlowAnimation('path-solar-bus', solar.power, false);\n this.updateFlowAnimation('path-pcs-bus', -pcs.power, false);\n this.updateFlowAnimation('path-bus-lfp', lfpPower, true);\n this.updateFlowAnimation('path-bus-nmc', nmcPower, true);\n this.updateFlowAnimation('path-bus-lto', ltoPower, true);\n \n document.getElementById('path-grid-pcs').classList.toggle('disconnected', !grid.connected);\n }\n \n renderExplorerView(assets) {\n let html = '';\n for (const asset of Object.values(assets)) {\n html += \\`

\\${asset.name}

\\`;\n asset.groups.forEach((group, groupIndex) => {\n group.packs.forEach((pack, packIndex) => {\n html += \\`

\\`;\n pack.cells.forEach((cell, cellIndex) => {\n let tempColor = 'var(--temp-norm)';\n if (cell.temp < 22) tempColor = 'var(--temp-cool)';\n else if (cell.temp > 28) tempColor = 'var(--temp-warm)';\n if (cell.temp > 35) tempColor = 'var(--temp-hot)';\n html += \\`

\\`;\n });\n html += \\`

\\`;\n });\n });\n html += \\`

\\`;\n }\n this.dom.explorerContent.innerHTML = html;\n }\n \n renderOutputChart(history) {\n const svg = this.dom.outputChartSvg;\n const container = this.dom.outputChartContainer;\n const data = history.output;\n \n if (!data || data.length < 2) { svg.innerHTML = ''; return; }\n \n const width = container.clientWidth;\n const height = container.clientHeight;\n if (width === 0 || height === 0) return;\n \n svg.setAttribute('viewBox', \\`0 0 \\${width} \\${height}\\`);\n const padding = { top: 10, right: 10, bottom: 20, left: 30 };\n const values = data.map(d => d.output);\n const min = 0;\n const max = Math.max(25, ...values);\n const range = max - min;\n \n const x = (v, w) => padding.left + (v / (data.length - 1)) * (w - padding.left - padding.right);\n const y = (v, h) => h - padding.bottom - ((v - min) / range) * (h - padding.top - padding.bottom);\n \n let paths = '';\n let currentPath = { d: '', status: null };\n data.forEach((d, i) => {\n if (d.status !== currentPath.status) {\n if (currentPath.d) {\n paths += \\`\\`;\n }\n currentPath = { d: \\`\\${x(i, width).toFixed(2)},\\${y(d.output, height).toFixed(2)}\\`, status: d.status };\n } else {\n currentPath.d += \\` L \\${x(i, width).toFixed(2)},\\${y(d.output, height).toFixed(2)}\\`;\n }\n });\n paths += \\`\\`;\n \n const yAxis = \\`\\`;\n const xAxis = \\`\\`;\n \n let yLabels = '';\n for (let i = 0; i <= 4; i++) {\n const val = min + (range / 4) * i;\n yLabels += \\`\\${val.toFixed(0)} MW\\`;\n }\n svg.innerHTML = yAxis + xAxis + yLabels + paths;\n }\n \n getLineColor(status) {\n switch (status) {\n case 'triage': return 'var(--accent-yellow)';\n case 'optimize': return 'var(--accent-green)';\n default: return 'var(--accent-blue)';\n }\n }\n \n updateSystemStatus(grid) {\n this.dom.statusLight.className = 'status-light';\n if (!grid.connected) {\n this.dom.systemStatus.textContent = 'ISLANDED';\n this.dom.statusLight.classList.add('offline');\n } else if (grid.frequency < 59.9 || grid.frequency > 60.1) {\n this.dom.systemStatus.textContent = 'GRID ANOMALY';\n this.dom.statusLight.classList.add('anomaly');\n } else {\n this.dom.systemStatus.textContent = 'NOMINAL';\n this.dom.statusLight.classList.add('nominal');\n }\n }\n \n renderSparkline(svgId, data, dataKey) {\n const svg = document.getElementById(svgId);\n if (!svg) return;\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 === 0 || height === 0) return;\n \n svg.setAttribute('viewBox', \\`0 0 \\${width} \\${height}\\`);\n const values = data.map(d => d[dataKey]);\n const min = Math.min(...values);\n const max = Math.max(...values);\n const range = max - min === 0 ? 1 : max - min;\n \n const points = data.map((d, i) => {\n const x = (i / (data.length - 1)) * width;\n const y = height - ((d[dataKey] - min) / range) * (height - 4) - 2; // 2px padding\n return \\`\\${x.toFixed(2)},\\${y.toFixed(2)}\\`;\n }).join(' L ');\n \n path.setAttribute('d', \\`M \\${points}\\`);\n }\n\n updateHistoryView(history, timeRangeSeconds, assets) {\n const now = Date.now();\n const timeLimit = now - timeRangeSeconds * 1000;\n for (const assetId of Object.keys(assets)) {\n const historyData = history[assetId].filter(d => d.time > timeLimit);\n this.renderSparkline(\\`\\${assetId}-soc-chart\\`, historyData, 'soc');\n }\n }\n\n showTooltip(e, assets, getGroupAggregates) {\n const target = e.target.closest('[data-asset-id]');\n if (!target) return;\n\n const { assetId, groupIndex, packIndex, cellIndex } = target.dataset;\n if (!assetId) return;\n\n let html = '', data;\n const asset = assets[assetId];\n\n try {\n if (cellIndex) {\n data = asset.groups[groupIndex].packs[packIndex].cells[cellIndex];\n html = \\`

Cell \\${data.id.split('_').pop()}

Temp: \\${data.temp.toFixed(1)}°C

Voltage: \\${data.voltage.toFixed(2)}V

SoH: \\${data.soh.toFixed(1)}%

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

Module \\${data.id.split('_').pop()}

SoC: \\${data.soc.toFixed(1)}%

Power: \\${(data.power * 1000).toFixed(0)}kW

Temp: \\${data.temp.toFixed(1)}°C

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

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

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

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

Avg. Temp: \\${aggs.avgTemp.toFixed(1)}°C

\\`;\n }\n } catch (err) {\n console.error(\"Tooltip data error:\", err);\n return;\n }\n\n if (html) {\n this.dom.tooltip.innerHTML = html;\n this.dom.tooltip.style.left = \\`\\${e.clientX}px\\`;\n this.dom.tooltip.style.top = \\`\\${e.clientY}px\\`;\n this.dom.tooltip.classList.add('visible');\n }\n }\n\n hideTooltip() {\n this.dom.tooltip.classList.remove('visible');\n }\n \n initExplorerTooltip(assets, getGroupAggregates) {\n this.dom.explorerContent.addEventListener('mouseover', (e) => this.showTooltip(e, assets, getGroupAggregates));\n this.dom.explorerContent.addEventListener('mouseout', () => this.hideTooltip());\n \n // Also add to telemetry group details\n document.getElementById('telemetry-view').addEventListener('mouseover', (e) => {\n if (e.target.closest('.group-details')) {\n this.showTooltip(e, assets, getGroupAggregates);\n }\n });\n document.getElementById('telemetry-view').addEventListener('mouseout', (e) => {\n if (e.target.closest('.group-details')) {\n this.hideTooltip();\n }\n });\n }\n\n setAppHeight() {\n if (window.innerWidth >= 1200) {\n this.dom.mainContainer.style.height = '100vh';\n this.dom.viewContainer.style.transform = 'none'; // Reset transform on desktop\n } else {\n this.dom.mainContainer.style.height = \\`\\${window.innerHeight}px\\`;\n this.mobileNav.viewWidth = this.dom.viewContainer.clientWidth;\n this.dom.viewContainer.style.transition = 'none';\n this.setPositionByIndex();\n setTimeout(() => {\n this.dom.viewContainer.style.transition = 'transform 0.3s ease-out';\n }, 50);\n }\n }\n\n updateArrowVisibility() {\n if (window.innerWidth >= 1200) return;\n this.dom.navArrowLeft.classList.toggle('hidden', this.mobileNav.currentIndex === 0);\n this.dom.navArrowRight.classList.toggle('hidden', this.mobileNav.currentIndex === this.dom.navDots.length - 1);\n }\n\n setPositionByIndex() {\n const finalTranslate = this.mobileNav.currentIndex * -this.mobileNav.viewWidth;\n this.dom.viewContainer.style.transform = \\`translateX(\\${finalTranslate}px)\\`;\n this.dom.navDots.forEach((dot, i) => dot.classList.toggle('active', i === this.mobileNav.currentIndex));\n this.updateArrowVisibility();\n }\n \n initNav() {\n // --- Touch Events ---\n this.dom.viewContainer.addEventListener('touchstart', (e) => {\n if (window.innerWidth >= 1200) return;\n this.mobileNav.isDragging = true;\n this.mobileNav.startPos = e.touches[0].clientX;\n this.dom.viewContainer.style.transition = 'none';\n }, { passive: true });\n\n this.dom.viewContainer.addEventListener('touchmove', (e) => {\n if (!this.mobileNav.isDragging || window.innerWidth >= 1200) return;\n this.mobileNav.currentPos = e.touches[0].clientX;\n const diff = this.mobileNav.currentPos - this.mobileNav.startPos;\n this.dom.viewContainer.style.transform = \\`translateX(\\${this.mobileNav.currentIndex * -this.mobileNav.viewWidth + diff}px)\\`;\n }, { passive: true });\n\n this.dom.viewContainer.addEventListener('touchend', () => {\n if (!this.mobileNav.isDragging || window.innerWidth >= 1200) return;\n this.mobileNav.isDragging = false;\n this.dom.viewContainer.style.transition = 'transform 0.3s ease-out';\n const diff = this.mobileNav.currentPos - this.mobileNav.startPos;\n if (diff < -50 && this.mobileNav.currentIndex < this.dom.navDots.length - 1) {\n this.mobileNav.currentIndex++;\n } else if (diff > 50 && this.mobileNav.currentIndex > 0) {\n this.mobileNav.currentIndex--;\n }\n this.setPositionByIndex();\n });\n\n // --- Arrow and Dot Clicks ---\n this.dom.navArrowLeft.addEventListener('click', () => {\n if (this.mobileNav.currentIndex > 0) {\n this.mobileNav.currentIndex--;\n this.setPositionByIndex();\n }\n });\n this.dom.navArrowRight.addEventListener('click', () => {\n if (this.mobileNav.currentIndex < this.dom.navDots.length - 1) {\n this.mobileNav.currentIndex++;\n this.setPositionByIndex();\n }\n });\n this.dom.navDots.forEach(dot => {\n dot.addEventListener('click', (e) => {\n this.mobileNav.currentIndex = parseInt(e.target.dataset.index, 10);\n this.setPositionByIndex();\n }) \n });\n\n window.addEventListener('resize', () => this.setAppHeight());\n this.setAppHeight();\n }\n \n bindControlButtons(setScenarioCallback) {\n let activeScenarioButton = document.getElementById('btn-normal');\n \n document.querySelectorAll('.control-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n const scenario = e.target.id.replace('btn-', '');\n \n if (activeScenarioButton) activeScenarioButton.classList.remove('active');\n activeScenarioButton = e.target;\n activeScenarioButton.classList.add('active');\n \n setScenarioCallback(scenario);\n });\n });\n }\n\n bindTimelineButtons(callback) {\n document.querySelectorAll('.timeline-btn').forEach(btn => {\n btn.addEventListener('click', e => {\n document.querySelector('.timeline-btn.active').classList.remove('active');\n e.target.classList.add('active');\n callback(parseInt(e.target.dataset.range, 10));\n });\n });\n }\n \n bindOutputButtons(callback) {\n document.querySelectorAll('.output-btn').forEach(btn => {\n btn.addEventListener('click', e => {\n document.querySelector('.output-btn.active').classList.remove('active');\n e.target.classList.add('active');\n callback(e.target.dataset.mode);\n });\n });\n }\n}\n\n/**\n * Main application controller.\n * Initializes and coordinates the Simulation and UI.\n */\nclass AppController {\n constructor() {\n this.sim = new BESS_Simulation();\n this.ui = new Dashboard_UI();\n this.aiDispatchPlan = null;\n this.lastRenderTime = 0;\n this.lastHistoryLogTime = 0;\n \n // Get the base URL from the tag\n this.API_BASE_URL = document.baseURI || window.location.origin + window.location.pathname;\n if (!this.API_BASE_URL.endsWith('/')) {\n this.API_BASE_URL += '/';\n }\n }\n \n init() {\n // Bind UI controls to app methods\n this.ui.initNav();\n this.ui.bindControlButtons((scenario) => this.setScenario(scenario));\n this.ui.bindTimelineButtons((range) => {\n this.sim.state.history.timeRangeSeconds = range;\n this.ui.updateHistoryView(this.sim.state.history, this.sim.state.history.timeRangeSeconds, this.sim.state.assets);\n });\n this.ui.bindOutputButtons((mode) => {\n this.sim.state.outputOptimization.status = mode;\n this.ui.log('action', \\`Output mode set to: \\${mode.toUpperCase()}\\`);\n });\n \n // Render initial static view\n this.ui.renderExplorerView(this.sim.state.assets);\n this.ui.initExplorerTooltip(\n this.sim.state.assets, \n (group) => this.sim.getGroupAggregates(group)\n );\n \n // Start simulation\n this.ui.log('info', 'H-BESS C&C Initialized.');\n this.ui.log('info', 'On mobile, swipe or use arrows to navigate views (6 total).');\n this.setScenario('normal');\n \n // Start the game loop\n this.gameLoop(0); // Pass timestamp\n }\n \n updateHistoryLog(now) {\n if (now - this.lastHistoryLogTime < 500) return; // Log every 500ms\n this.lastHistoryLogTime = now;\n \n const history = this.sim.state.history;\n \n for (const assetId of Object.keys(this.sim.state.assets)) {\n const asset = this.sim.state.assets[assetId];\n const aggs = this.sim.getAssetAggregates(asset);\n history[assetId].push({ time: now, soc: aggs.avgSoc, power: aggs.totalPower });\n if (history[assetId].length > 1800) { // Keep ~15 mins of 500ms data\n history[assetId].shift();\n }\n }\n \n const { grid, pcs, solar, assets } = this.sim.state;\n const currentOutput = grid.connected \n ? solar.power + pcs.power \n : solar.power + this.sim.getAssetAggregates(assets.lfp).totalPower + this.sim.getAssetAggregates(assets.nmc).totalPower;\n \n history.output.push({ time: now, output: currentOutput, status: this.sim.state.outputOptimization.status });\n if (history.output.length > 200) {\n history.output.shift();\n }\n }\n\n gameLoop(timestamp) {\n const now = new Date();\n const deltaTime = (now - this.sim.state.time) / 1000;\n this.sim.state.time = now;\n \n // Run simulation logic\n this.sim.runEMS(this.aiDispatchPlan);\n this.sim.updateSimulation(deltaTime);\n this.updateHistoryLog(now.getTime());\n \n // Throttle rendering to ~4 FPS (every 250ms)\n if (now - this.lastRenderTime > 250) {\n this.lastRenderTime = now;\n \n const state = this.sim.state;\n this.ui.updateTelemetry(\n state.assets, \n (group) => this.sim.getGroupAggregates(group),\n (asset) => this.sim.getAssetAggregates(asset)\n );\n this.ui.updatePowerFlow(\n state.grid, state.solar, state.pcs, state.assets,\n (asset) => this.sim.getAssetAggregates(asset)\n );\n this.ui.updateSystemStatus(state.grid);\n this.ui.updateHistoryView(state.history, state.history.timeRangeSeconds, state.assets);\n this.ui.renderOutputChart(state.history);\n \n // Re-render explorer view less frequently (e.g., every 2s) if performance is an issue\n // For now, we render it with telemetry.\n this.ui.renderExplorerView(state.assets);\n }\n \n requestAnimationFrame((t) => this.gameLoop(t));\n }\n \n async requestAIDispatchPlan() {\n this.ui.log('info', 'Critical event detected. Consulting AI Coordinator...');\n const context = this.sim.getAIContext();\n \n try {\n // Use the API_BASE_URL to construct the full API path\n const res = await fetch(\\`\\${this.API_BASE_URL}api/dispatch\\`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(context),\n });\n if (!res.ok) throw new Error(\\`AI Coordinator responded with status \\${res.status}\\`);\n \n const aiResponse = await res.json();\n this.ui.log('log-ai', \\`AI ANALYSIS: \\${aiResponse.reason}\\`);\n this.aiDispatchPlan = aiResponse.dispatchPlan;\n this.ui.log('ACTION', \\`Executing AI dispatch: LFP=\\${this.aiDispatchPlan.lfp.toFixed(1)}MW, NMC=\\${this.aiDispatchPlan.nmc.toFixed(1)}MW, LTO=\\${this.aiDispatchPlan.lto.toFixed(1)}MW\\`);\n\n } catch (err) {\n this.ui.log('warn', \\`AI Dispatch Failed: \\${err.message}. Engaging fallback protocol.\\`);\n this.aiDispatchPlan = { lfp: 0, nmc: 0, lto: 0 }; // Safe fallback\n }\n }\n\n async setScenario(scenario) {\n if (this.sim.state.scenario === scenario && scenario !== 'normal') return;\n \n this.ui.log('info', \\`--- Scenario Activated: \\${scenario.toUpperCase().replace('-', ' ')} ---\\`);\n this.sim.state.scenario = scenario;\n \n // Reset state for new scenarios\n this.aiDispatchPlan = null;\n this.sim.state.grid.connected = (scenario !== 'grid-failure');\n\n if (scenario === 'normal') {\n return; // No AI needed for normal ops\n }\n\n if (scenario === 'freq-drop') this.ui.log('warn', 'Grid frequency anomaly detected.');\n if (scenario === 'grid-failure') {\n this.ui.log('alert', 'GRID CONNECTION LOST!');\n }\n \n // Request an AI decision for any non-normal scenario\n await this.requestAIDispatchPlan();\n }\n}\n\n// --- Application Entry Point ---\ndocument.addEventListener('DOMContentLoaded', () => {\n const app = new AppController();\n app.init();\n});\n`;","deleted","label",[98],"permalink","https://www.val.town/x/realtime/bms/code/main.ts","extension","actionData","errors"]