Hybrid BESS C&C Dashboard

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_115":-5,"_20":116,"_22":117,"_118":119,"_120":121,"_25":122,"_24":-5,"_123":-5,"_124":-5,"_125":53,"_126":127,"_128":44,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","realtime","name","bms","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":44,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":14,"_18":55},"id","4071e0d8-ac73-11f0-a1ab-0224a6c84d84","main.ts","fileId","a2ff6cd4-9e09-11f0-959a-0224a6c84d84","parentId","branchId","a2fd3900-9e09-11f0-959a-0224a6c84d84","branchVersion",40,"latest",true,"createdAt",["D",1760827145069],39,"fileType","http","content","// @ts-ignore\nimport { OpenAI } from \"https://esm.town/v/std/openai?v=4\";\n\n// --- AI BEHAVIORAL GUIDELINES ---\nconst GENERATION_STYLE_GUIDE =\n \"As the autonomous EMS Coordinator, you must adopt the persona of a senior power systems engineer. Your analysis must be articulated with technical precision and professional clarity. Adhere strictly to the provided decision-making logic and operational constraints. Avoid ambiguity and informal language. The objective is to produce a dispatch plan that is immediately actionable, auditable, and exhibits intelligent, rule-based reasoning for managing a critical infrastructure asset.\";\n\nconst DISPATCH_PROMPT = `\nYou are an autonomous Energy Management System (EMS) coordinator for a hybrid Battery Energy Storage System (BESS).\nYou will receive a JSON object detailing a critical event and the current state of the three battery assets.\n\nThe assets have distinct roles:\n- LFP (Workhorse): High cycle life, for primary load and daily energy shifting.\n- NMC (Energy Reserve): High energy density, preserved for long-duration emergencies.\n- LTO (Sprinter): High power density, for instantaneous grid stabilization and frequency response.\n\nYour task is to create an optimal power dispatch plan. You must decide how much power (in Megawatts) each asset should discharge (positive number) or charge (negative number).\n\nYour decision MUST adhere to these criteria in strict order of importance:\n\n1. **Event Response Protocol:** The dispatch must directly counteract the event.\n * 'grid-failure': Prioritize supplying a critical load (e..g, 15 MW) using LFP first, then NMC if needed. LTO should be idle. Solar provides available power.\n * 'freq-drop': LTO must discharge immediately and proportionally to the frequency deviation. LFP provides secondary, slower support if the drop is severe.\n * 'solar-peak': Absorb maximum solar power by charging assets, prioritizing LTO, then LFP. Do not use NMC for daily solar absorption.\n2. **Role Preservation:** Dispatch must align with each asset's designated role. Do not use the NMC reserve for frequency support. Do not use the LTO sprinter for sustained, multi-hour discharge.\n3. **State of Charge (SoC) Constraints:** Do not command a discharge if an asset's SoC is below 15%. Do not command a charge if an asset's SoC is above 98%.\n4. **Power Limits:** The commanded dispatch for any asset must NOT exceed its 'maxPowerMW' capability.\n\nYou MUST respond ONLY with a single, minified JSON object with these exact keys:\n- \"dispatchPlan\": An object with keys \"lfp\", \"nmc\", \"lto\", where values are the power in MW (e.g., {\"lfp\": 12.5, \"nmc\": 0, \"lto\": -5.0}).\n- \"reason\": A concise, professional explanation for the dispatch plan, citing the specific criteria and asset states that influenced the decision.\n${GENERATION_STYLE_GUIDE}\n`;\n\n/**\n * Extracts a JSON object from a string that may contain conversational text.\n */\nfunction extractJson(text: string): object | null {\n const match = text.match(/{[\\s\\S]*}/);\n if (!match) return null;\n try {\n return JSON.parse(match[0]);\n } catch (e) {\n console.error(\"Failed to parse extracted JSON:\", e, text);\n return null;\n }\n}\n\n/**\n * Handles the AI dispatch logic.\n */\nasync function handleApiDispatch(req: Request): Promise {\n try {\n const openai = new OpenAI();\n const body = await req.json();\n\n if (!body || !body.event || !body.assets) {\n throw new Error(\"Invalid context: Missing event or asset data.\");\n }\n\n const userMessage = `Analyze and create dispatch plan. Context: ${\n JSON.stringify(body)\n }`;\n\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\", // Using a powerful model for complex logic\n messages: [\n { role: \"system\", content: DISPATCH_PROMPT },\n { role: \"user\", content: userMessage },\n ],\n temperature: 0.1, // Low temperature for deterministic, rule-based decisions\n response_format: { type: \"json_object\" },\n });\n\n const rawContent = completion.choices[0].message.content;\n if (!rawContent) {\n throw new Error(\"AI Coordinator returned an empty response.\");\n }\n\n const structuredResponse = extractJson(rawContent);\n\n if (\n !structuredResponse || !(\"dispatchPlan\" in structuredResponse) ||\n !(\"reason\" in structuredResponse)\n ) {\n console.error(\"Invalid JSON structure from AI:\", rawContent);\n throw new Error(\"AI Coordinator returned malformed data structure.\");\n }\n\n return new Response(JSON.stringify(structuredResponse), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"AI Dispatch Error:\", error);\n return new Response(\n JSON.stringify({\n error: error.message || \"An unknown error occurred.\",\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n}\n\n/**\n * Main Val Function (Router)\n * This function now acts as a web server, routing requests\n * to the correct handler (API, HTML, CSS, or JS).\n */\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n // 1. API Endpoint for AI Dispatch\n if (req.method === \"POST\" && url.pathname === \"/api/dispatch\") {\n return handleApiDispatch(req);\n }\n\n // 2. Serve JavaScript\n if (url.pathname === \"/app.js\") {\n return new Response(JS_CONTENT, {\n headers: { \"Content-Type\": \"application/javascript; charset=utf-8\" },\n });\n }\n\n // 3. Serve CSS\n if (url.pathname === \"/dashboard.css\") {\n return new Response(CSS_CONTENT, {\n headers: { \"Content-Type\": \"text/css; charset=utf-8\" },\n });\n }\n\n // 4. Serve HTML (Default)\n if (url.pathname === \"/\") {\n // We pass the val's URL to the HTML to ensure the JS knows where to find its assets\n const sourceUrl = `https://${url.hostname}${url.pathname}`;\n const html = HTML_CONTENT.replace(\"{{APP_BASE_URL}}\", sourceUrl);\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n }\n\n // 5. Not Found\n return new Response(\"Not Found\", { status: 404 });\n}\n\n// --- --- --- --- --- --- --- --- --- --- --- ---\n// ASSET: index.html\n// --- --- --- --- --- --- --- --- --- --- --- ---\nconst HTML_CONTENT = `\n\n\n \n \n Hybrid BESS C&C Dashboard\n \n \n \n \n \n \n \n\n\n

\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",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":14,"_58":59,"_18":60},["D",1760827145069],"children",[],[35],"a2fccfec-9e09-11f0-959a-0224a6c84d84",["D",1759242467481],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","0199195d-a0b5-724d-9d5d-dbafc8ffb0d1","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","0199195d-a0b5-724d-9d5d-ded08af9068c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_114":110},"org",{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},"branch",{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMySEFWaDMxNUQzTGRXZmdqRGRxZVhBT0pqcyJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":149,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":44,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":150,"_95":151,"_97":152,"_99":53},[146],"files",[146],"counts",{"_135":77,"_136":137,"_138":139,"_31":140,"_141":142},[133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":14,"_18":134},[35],"pulls","branches",1,"forks",2,{"_143":77,"_145":77},"connections",{"_143":77,"_144":77},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":14,"_58":147,"_18":148},[],[35],["D",1759242467481],{"_11":12,"_114":110},{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"ctx",{"_93":-5,"_130":186,"_187":188,"_189":190,"_191":53,"_192":53,"_193":53,"_194":44,"_195":-5,"_196":-7,"_197":-7,"_198":77,"_199":53,"_200":53,"_201":-5,"_202":53,"_203":53,"_204":53,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":16,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]