iobroker.eos-admin 7.9.95 → 7.9.96

package/adminWww/css/eos-ems-overview.css

@@ -0,0 +1,62 @@
+/* nexowatt-ems-overview-v1 – current runtime and future React build */
+.eos-ems-overview-card {
+    --eos-ems-status-color: #48b9ff;
+    box-sizing: border-box;
+    flex: 1 1 720px;
+    min-width: min(100%, 420px);
+    max-width: 1180px;
+    min-height: 390px;
+    margin: 10px;
+    padding: 22px;
+    border: 1px solid color-mix(in srgb, var(--eos-ems-status-color) 38%, rgba(255,255,255,.08));
+    border-radius: 20px;
+    background: linear-gradient(145deg, rgba(4,24,35,.97), rgba(3,16,29,.98));
+    color: #ecf8ff;
+    box-shadow: 0 18px 55px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.025);
+    overflow: hidden;
+}
+#eos-ems-overview-runtime { width: calc(100% - 32px); max-width: none; margin: 0 16px 20px; }
+.eos-ems-overview-card * { box-sizing: border-box; }
+.eos-ems-overview-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
+.eos-ems-overview-header h2 { margin:5px 0 6px; font-size:clamp(1.2rem,2vw,1.65rem); color:#f5fbff; }
+.eos-ems-overview-header p { margin:0; max-width:760px; color:#9eb2c2; line-height:1.45; }
+.eos-ems-overview-eyebrow { color:#49e39e; font-size:.72rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
+.eos-ems-overview-state { min-width:126px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:3px 8px; padding:9px 12px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(255,255,255,.035); }
+.eos-ems-overview-state-dot { width:9px; height:9px; border-radius:50%; background:var(--eos-ems-status-color); box-shadow:0 0 15px var(--eos-ems-status-color); }
+.eos-ems-overview-state strong { color:var(--eos-ems-status-color); }
+.eos-ems-overview-state small { grid-column:2; color:#8095a6; }
+.eos-ems-overview-metrics { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:10px; margin-top:19px; }
+.eos-ems-overview-metric { min-width:0; padding:12px; border:1px solid rgba(255,255,255,.075); border-radius:14px; background:rgba(255,255,255,.025); }
+.eos-ems-overview-metric span,.eos-ems-overview-metric small { display:block; color:#879cad; font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.eos-ems-overview-metric strong { display:block; margin:4px 0 2px; color:#f4fbff; font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.eos-ems-overview-budget { height:7px; margin:12px 0 10px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
+.eos-ems-overview-budget span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#01bc69,var(--eos-ems-status-color)); box-shadow:0 0 15px color-mix(in srgb,var(--eos-ems-status-color) 50%,transparent); transition:width .25s ease; }
+.eos-ems-overview-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
+.eos-ems-overview-tags span { padding:5px 9px; border:1px solid rgba(72,185,255,.18); border-radius:999px; background:rgba(72,185,255,.07); color:#b9deef; font-size:.72rem; font-weight:750; }
+.eos-ems-overview-tags span.is-warning { border-color:rgba(255,189,89,.3); background:rgba(255,189,89,.09); color:#ffd484; }
+.eos-ems-overview-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
+.eos-ems-overview-panel { min-width:0; padding:14px; border:1px solid rgba(255,255,255,.065); border-radius:16px; background:rgba(0,0,0,.12); }
+.eos-ems-overview-panel h3 { margin:0 0 10px; color:#dfeef6; font-size:.9rem; }
+.eos-ems-overview-decision,.eos-ems-overview-event { position:relative; display:grid; gap:2px; margin-top:7px; padding:8px 9px 8px 12px; border-radius:10px; background:rgba(255,255,255,.025); overflow:hidden; }
+.eos-ems-overview-decision::before,.eos-ems-overview-event::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background:#48b9ff; }
+.eos-ems-overview-decision--warning::before,.eos-ems-overview-event--warning::before { background:#ffbd59; }
+.eos-ems-overview-decision--error::before,.eos-ems-overview-event--error::before { background:#ff5f72; }
+.eos-ems-overview-decision strong,.eos-ems-overview-event strong { color:#e7f4fa; font-size:.78rem; }
+.eos-ems-overview-decision span,.eos-ems-overview-event span { color:#91a5b5; font-size:.72rem; line-height:1.35; }
+.eos-ems-overview-decision small { color:#6fcba1; font-size:.68rem; }
+.eos-ems-overview-event { grid-template-columns:64px 1fr; align-items:start; }
+.eos-ems-overview-event time { color:#6f8799; font-size:.68rem; font-variant-numeric:tabular-nums; }
+.eos-ems-overview-event div { display:grid; gap:2px; min-width:0; }
+.eos-ems-overview-empty { color:#718797; font-size:.76rem; }
+.eos-ems-overview-footer { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:#60798a; font-size:.67rem; }
+.eos-ems-overview-footer a { color:#5ee0c2; font-weight:800; text-decoration:none; }
+.eos-ems-overview-footer a:hover,.eos-ems-overview-footer a:focus-visible { color:#9af2dd; text-decoration:underline; }
+@media (max-width: 1100px) { .eos-ems-overview-card { flex-basis:100%; max-width:none; } }
+@media (max-width: 760px) {
+    #eos-ems-overview-runtime,.eos-ems-overview-card { min-width:0; width:calc(100% - 16px); margin:8px; padding:16px; }
+    .eos-ems-overview-header { display:grid; }
+    .eos-ems-overview-state { width:max-content; }
+    .eos-ems-overview-metrics { grid-template-columns:1fr 1fr; }
+    .eos-ems-overview-columns { grid-template-columns:1fr; }
+    .eos-ems-overview-footer { display:grid; }
+}

package/adminWww/css/nexowatt-native-shell.css

@@ -75,8 +75,8 @@ html.eos-login main.MuiPaper-root::before {
     left: 50%;
     top: 50%;
     box-sizing: border-box;
-    width: min(390px, calc(100vw - 24px));
-    height: min(480px, calc(100vh - 24px));
+    width: min(520px, calc(100vw - 24px)) !important;
+    height: min(640px, calc(100dvh - 24px)) !important;
     transform: translate(-50%, -50%);
     border: 1px solid rgba(0, 229, 138, .34);
     border-radius: 26px;
@@ -90,13 +90,13 @@ html.eos-login main.MuiPaper-root > .MuiPaper-root:has(#password) {
     position: relative;
     z-index: 1;
     box-sizing: border-box !important;
-    width: min(334px, calc(100vw - 56px)) !important;
-    height: min(424px, calc(100vh - 56px)) !important;
-    min-height: 0 !important;
-    max-width: none !important;
+    width: min(460px, calc(100vw - 56px)) !important;
+    height: auto !important;
+    min-height: 540px !important;
+    max-width: 460px !important;
     max-height: none !important;
-    padding: 28px !important;
-    overflow: auto !important;
+    padding: 34px 36px 32px !important;
+    overflow: visible !important;
     border-radius: 24px !important;
     color: var(--nx-text) !important;
     background: linear-gradient(180deg, rgba(14, 36, 56, .97), rgba(4, 15, 27, .96)) !important;
@@ -886,12 +886,12 @@ html.eos-login .eos-login-card-modern {
     /* Compact product login: the form remains the proven inner card while the
        decorative rear frame keeps a fixed, restrained footprint. */
     box-sizing: border-box !important;
-    width: min(334px, calc(100vw - 56px)) !important;
-    height: min(424px, calc(100vh - 56px)) !important;
-    min-height: 0 !important;
-    max-width: none !important;
+    width: min(460px, calc(100vw - 56px)) !important;
+    height: auto !important;
+    min-height: 540px !important;
+    max-width: 460px !important;
     max-height: none !important;
-    overflow: auto !important;
+    overflow: visible !important;
 }
 .eos-login-role-selector {
     display: none !important;
@@ -1291,3 +1291,101 @@ html.eos-route-intro #app-paper [class*="card"] {
     .eos-account-management-entry { margin: 9px; padding: 19px; border-radius: 18px; }
     .eos-assist-header-root .eos-assist-panel { right: 8px !important; width: calc(100vw - 16px); }
 }
+
+
+/* NexoWatt EOS 7.9.96 – spacious login card without inner scrollbars. */
+html.eos-login,
+html.eos-login body {
+    min-height: 100%;
+    margin: 0 !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+}
+html.eos-login #root {
+    min-height: 100dvh;
+    box-sizing: border-box;
+    padding: 24px 12px;
+}
+html.eos-login main.MuiPaper-root {
+    box-sizing: border-box !important;
+    min-height: calc(100dvh - 48px) !important;
+    padding: 28px 0 !important;
+    overflow: visible !important;
+}
+html.eos-login main.MuiPaper-root::before {
+    width: min(520px, calc(100vw - 24px)) !important;
+    height: min(640px, calc(100dvh - 24px)) !important;
+    min-height: 590px !important;
+}
+html.eos-login main.MuiPaper-root > .eos-login-card-modern,
+html.eos-login main.MuiPaper-root > .MuiPaper-root:has(#username),
+html.eos-login main.MuiPaper-root > .MuiPaper-root:has(#password),
+html.eos-login [data-nw-login-card="true"] {
+    box-sizing: border-box !important;
+    width: min(460px, calc(100vw - 56px)) !important;
+    min-width: 0 !important;
+    min-height: 540px !important;
+    height: auto !important;
+    max-width: 460px !important;
+    max-height: none !important;
+    padding: 34px 36px 32px !important;
+    overflow: visible !important;
+}
+html.eos-login main.MuiPaper-root > .eos-login-card-modern *,
+html.eos-login main.MuiPaper-root > .MuiPaper-root:has(#username) *,
+html.eos-login main.MuiPaper-root > .MuiPaper-root:has(#password) * {
+    box-sizing: border-box;
+    max-width: 100%;
+}
+html.eos-login .MuiAlert-root,
+html.eos-login [role="alert"],
+html.eos-login .eos-login-first-status,
+html.eos-login .eos-login-first-hint {
+    position: static !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    max-height: none !important;
+    overflow: visible !important;
+    white-space: normal !important;
+    overflow-wrap: anywhere !important;
+    word-break: normal !important;
+    flex-shrink: 0 !important;
+}
+html.eos-login input,
+html.eos-login button,
+html.eos-login form {
+    max-width: 100% !important;
+}
+@media (max-width: 560px) {
+    html.eos-login #root { padding: 10px 8px; }
+    html.eos-login main.MuiPaper-root { min-height: calc(100dvh - 20px) !important; padding: 14px 0 !important; }
+    html.eos-login main.MuiPaper-root::before {
+        width: calc(100vw - 16px) !important;
+        min-height: 0 !important;
+        height: calc(100% - 4px) !important;
+        border-radius: 20px !important;
+    }
+    html.eos-login main.MuiPaper-root > .eos-login-card-modern,
+    html.eos-login main.MuiPaper-root > .MuiPaper-root:has(#username),
+    html.eos-login main.MuiPaper-root > .MuiPaper-root:has(#password),
+    html.eos-login [data-nw-login-card="true"] {
+        width: calc(100vw - 38px) !important;
+        max-width: none !important;
+        min-height: 0 !important;
+        padding: 26px 22px !important;
+    }
+}
+@media (max-height: 690px) {
+    html.eos-login main.MuiPaper-root::before { min-height: 0 !important; height: calc(100% - 12px) !important; }
+    html.eos-login main.MuiPaper-root > .eos-login-card-modern,
+    html.eos-login main.MuiPaper-root > .MuiPaper-root:has(#username),
+    html.eos-login main.MuiPaper-root > .MuiPaper-root:has(#password),
+    html.eos-login [data-nw-login-card="true"] { min-height: 0 !important; }
+}
+
+
+/* 7.9.96: native Intro owns the overview for every EOS role. */
+#eos-role-safe-overview,
+.eos-role-safe-overview { display: none !important; }
+html.eos-safe-overview-active #app-paper > :not(.MuiSnackbar-root):not([role="presentation"]) { pointer-events: auto !important; }
+.eos-intro-admin-edit-hidden { display: none !important; }

package/adminWww/index.html

@@ -8,7 +8,7 @@
         <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
         <meta http-equiv="Pragma" content="no-cache" />
         <meta http-equiv="Expires" content="0" />
-          <script src="./js/eos-manual-write-policy.js?v=91"></script>
+          <script src="./js/eos-manual-write-policy.js?v=96"></script>
           <script type="module" src="./assets/hostInit-v84.js?v=84"></script>
         
         <meta charset="utf-8" />
@@ -36,7 +36,8 @@
             rel="stylesheet"
             href="css/leaflet.css"
         />
-        <link rel="stylesheet" href="./css/nexowatt-native-shell.css?v=91" />
+        <link rel="stylesheet" href="./css/nexowatt-native-shell.css?v=96" />
+        <link rel="stylesheet" href="./css/eos-ems-overview.css?v=96" />
         <link
             rel="manifest"
             href="manifest.json"
@@ -158,20 +159,21 @@
         </script>
       <link rel="modulepreload" crossorigin href="./assets/preload-helper-BDBacUwf.js">
       <link rel="modulepreload" crossorigin href="./assets/iobroker_admin__mf_v__runtimeInit__mf_v__-g2X2zhAf.js">
-            <script defer src="./js/eos-role-bootstrap.js?v=91" data-eos-entry="./assets/index-CQZugZ1z-v84.js?v=84"></script>
-            <script defer src="./js/eos-policy-client.js?v=91"></script>
-            <script defer src="./js/eos-branding-sanitizer.js?v=91"></script>
-            <script defer src="./js/nexowatt-native-shell.js?v=91"></script>
-            <script defer src="./js/eos-native-security.js?v=91"></script>
-            <script defer src="./js/eos-basic-settings.js?v=91"></script>
-            <script defer src="./js/eos-role-ui.js?v=91"></script>
-            <script defer src="./js/eos-account-management.js?v=91"></script>
-            <script defer src="./js/eos-assistant.js?v=91"></script>
+            <script defer src="./js/eos-role-bootstrap.js?v=96" data-eos-entry="./assets/index-CQZugZ1z-v84.js?v=84"></script>
+            <script defer src="./js/eos-policy-client.js?v=96"></script>
+            <script defer src="./js/eos-branding-sanitizer.js?v=96"></script>
+            <script defer src="./js/nexowatt-native-shell.js?v=96"></script>
+            <script defer src="./js/eos-native-security.js?v=96"></script>
+            <script defer src="./js/eos-basic-settings.js?v=96"></script>
+            <script defer src="./js/eos-role-ui.js?v=96"></script>
+            <script defer src="./js/eos-ems-overview.js?v=96"></script>
+            <script defer src="./js/eos-account-management.js?v=96"></script>
+            <script defer src="./js/eos-assistant.js?v=96"></script>
     </head>
     <body>
         <noscript>Für NexoWatt EOS muss JavaScript aktiviert sein.</noscript>
         <div id="root"></div>
-<script defer src="static/js/nexowatt-stable-login.js?v=95"></script>
-<script defer src="static/js/nexowatt-stable-v95.js?v=95"></script>
+<script defer src="static/js/nexowatt-stable-login.js?v=96"></script>
+<script defer src="static/js/nexowatt-stable-v96.js?v=96"></script>
 </body>
 </html>

package/adminWww/js/eos-assistant.js

@@ -1,6 +1,6 @@
 (() => {
     'use strict';
-    // NexoWatt EOS stable 7.9.95: EOS Assist remains disabled until the
+    // NexoWatt EOS stable 7.9.96: EOS Assist remains disabled until the
     // read-only system assistant is rebuilt and accepted separately.
     window.NEXOWATT_EOS_ASSIST_DISABLED = true;
     document.documentElement.classList.add('eos-assist-disabled');

package/adminWww/js/eos-ems-overview.js

@@ -0,0 +1,140 @@
+(() => {
+    'use strict';
+    const VERSION = 'v96-nexowatt-ems-overview-runtime';
+    const CONTRACT = 'nexowatt-ems-overview-v1';
+    const ROOT_ID = 'eos-ems-overview-runtime';
+    const POLL_MS = 5000;
+    const STALE_MS = 20000;
+    const COLORS = { ok: '#01bc69', info: '#48b9ff', warning: '#ffbd59', error: '#ff5f72' };
+    let timer = 0;
+    let inFlight = false;
+    let destroyed = false;
+
+    const esc = value => String(value ?? '').replace(/[&<>"']/g, character => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[character]));
+    const text = (value, fallback = '') => String(value ?? fallback).replace(/\s+/g, ' ').trim() || fallback;
+    const num = (value, fallback = 0) => Number.isFinite(Number(value)) ? Number(value) : fallback;
+    const parse = (value, fallback) => {
+        if (value && typeof value === 'object') return value;
+        try { return JSON.parse(String(value ?? '')); } catch (_) { return fallback; }
+    };
+    const severity = value => {
+        const normalized = String(value || '').toLowerCase();
+        if (normalized === 'error') return 'error';
+        if (normalized === 'warning' || normalized === 'warn') return 'warning';
+        if (normalized === 'ok') return 'ok';
+        return 'info';
+    };
+    const currentTab = () => String(location.hash || '').match(/tab-[a-z0-9_-]+/i)?.[0]?.toLowerCase() || 'tab-intro';
+    const currentRole = () => String(window.NEXOWATT_EOS_ACCESS_ROLE || 'admin').toLowerCase();
+    const technical = () => ['admin', 'service', 'installer', 'installateur'].includes(currentRole());
+    const formatPower = value => {
+        const watts = num(value); const absolute = Math.abs(watts); const sign = watts < 0 ? '−' : '';
+        return absolute >= 1000 ? `${sign}${(absolute / 1000).toLocaleString('de-DE', { minimumFractionDigits: 1, maximumFractionDigits: 2 })} kW` : `${sign}${Math.round(absolute).toLocaleString('de-DE')} W`;
+    };
+    const formatAge = timestamp => {
+        const value = num(timestamp); if (!value) return 'noch kein Regeltick';
+        const seconds = Math.max(0, Math.round((Date.now() - value) / 1000));
+        if (seconds < 2) return 'gerade eben';
+        if (seconds < 60) return `vor ${seconds} s`;
+        return `vor ${Math.round(seconds / 60)} min`;
+    };
+    const formatClock = timestamp => {
+        const value = num(timestamp); if (!value) return '—';
+        try { return new Date(value).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); } catch (_) { return '—'; }
+    };
+    const getSocket = () => window.NEXOWATT_EOS_ADMIN_SOCKET || window.NEXOWATT_EOS_SOCKET || null;
+    const stateVal = (states, id) => states?.[id]?.val;
+
+    const normalizeInstances = (states, aliveStates) => {
+        const prefixes = new Set();
+        Object.keys(states || {}).forEach(id => { const match = id.match(/^(nexowatt-ui\.\d+)\.info\.adminOverview\./); if (match) prefixes.add(match[1]); });
+        return Array.from(prefixes).map(instance => {
+            const summaryId = `${instance}.info.adminOverview.summaryJson`;
+            const summary = parse(stateVal(states, summaryId), {});
+            const events = parse(stateVal(states, `${instance}.info.adminOverview.eventsJson`), []);
+            const updatedAt = Math.max(num(summary.updatedAt), num(summary.generatedAt), num(stateVal(states, `${instance}.info.adminOverview.updatedAt`)), num(states?.[summaryId]?.ts));
+            const rawAlive = stateVal(aliveStates, `system.adapter.${instance}.alive`);
+            const alive = rawAlive == null ? null : (rawAlive === true || rawAlive === 1 || ['true', '1', 'online', 'active'].includes(String(rawAlive).toLowerCase()));
+            return { instance, alive, summary: { ...summary, status: severity(summary.status || stateVal(states, `${instance}.info.adminOverview.status`)), headline: text(summary.headline || stateVal(states, `${instance}.info.adminOverview.headline`), 'EMS-Diagnose wird aufgebaut'), reason: text(summary.reason || stateVal(states, `${instance}.info.adminOverview.reason`), ''), binding: text(summary.binding || stateVal(states, `${instance}.info.adminOverview.binding`), 'none') }, events: Array.isArray(events) ? events : [], updatedAt };
+        }).sort((a, b) => Number(b.alive === true) - Number(a.alive === true) || b.updatedAt - a.updatedAt || a.instance.localeCompare(b.instance));
+    };
+
+    const ensureRoot = () => {
+        const reactCard = document.querySelector(`[data-nexowatt-contract="${CONTRACT}"]:not(#${ROOT_ID})`);
+        if (reactCard) { document.getElementById(ROOT_ID)?.remove(); return null; }
+        const paper = document.getElementById('app-paper');
+        if (!paper || currentTab() !== 'tab-intro') return null;
+        let root = document.getElementById(ROOT_ID);
+        if (!root) {
+            root = document.createElement('section');
+            root.id = ROOT_ID;
+            root.className = 'eos-ems-overview-card';
+            root.dataset.nexowattContract = CONTRACT;
+        }
+        const hero = document.getElementById('eos-native-overview-hero');
+        if (hero?.parentElement === paper) paper.insertBefore(root, hero.nextSibling); else paper.insertBefore(root, paper.firstChild || null);
+        return root;
+    };
+
+    const unavailable = message => {
+        const root = ensureRoot(); if (!root) return;
+        root.style.setProperty('--eos-ems-status-color', COLORS.info);
+        root.innerHTML = `<header class="eos-ems-overview-header"><div><span class="eos-ems-overview-eyebrow">NexoWatt EMS</span><h2>Live-Diagnose</h2><p>${esc(message)}</p></div><div class="eos-ems-overview-state"><span class="eos-ems-overview-state-dot"></span><strong>Nicht verfügbar</strong><small>read-only</small></div></header><footer class="eos-ems-overview-footer"><span>Die Kachel liest ausschließlich info.adminOverview.*.</span><span>Keine EMS-Regelung wurde verändert.</span></footer>`;
+    };
+
+    const fallbackDecisions = summary => {
+        const result = []; const charging = summary.charging || {}; const storage = summary.storage || {};
+        if (charging.available) result.push({ severity: num(charging.faultCount) > 0 ? 'error' : num(charging.waitingCount) > 0 ? 'info' : 'ok', title: `${num(charging.activeCount)} lädt · ${num(charging.waitingCount)} wartet · ${num(charging.faultCount)} gestört`, reason: text(charging.limiterText || charging.status, 'Lademanagement aktiv'), details: `Ist ${formatPower(charging.actualW)} · Soll ${formatPower(charging.targetW)}` });
+        if (storage.available) result.push({ severity: storage.writeOk === false ? 'error' : 'ok', title: `Speicher ${text(storage.topology, 'aktiv')}${storage.socPct != null ? ` · SoC ${Math.round(num(storage.socPct))} %` : ''}`, reason: text(storage.reason, 'Speicherregelung aktiv'), details: `Ist ${formatPower(storage.actualW)} · Soll ${formatPower(storage.targetW)}` });
+        return result;
+    };
+
+    const render = data => {
+        const root = ensureRoot(); if (!root) return;
+        const summary = data.summary || {}; const budget = summary.budget || {}; const charging = summary.charging || {}; const storage = summary.storage || {}; const ems = summary.ems || {}; const para14a = summary.para14a || {}; const tariff = summary.tariff || {}; const forecast = summary.forecast || {}; const peak = summary.peakShaving || {};
+        const stale = data.alive === false || !data.updatedAt || Date.now() - data.updatedAt > STALE_MS;
+        const status = stale ? 'error' : severity(summary.status); const statusColor = COLORS[status]; root.style.setProperty('--eos-ems-status-color', statusColor);
+        const totalBudget = Math.max(0, num(budget.totalW)); const remaining = Math.max(0, num(budget.remainingW)); const percent = totalBudget > 0 ? Math.max(0, Math.min(100, remaining / totalBudget * 100)) : 0;
+        const isTechnical = technical(); const decisions = (Array.isArray(summary.currentDecisions) ? summary.currentDecisions : fallbackDecisions(summary)).slice(0, isTechnical ? 5 : 2); const events = isTechnical ? data.events.slice(0, 6) : [];
+        const tags = [];
+        if (text(summary.binding, 'none') !== 'none') tags.push({ label: `Bindend: ${text(budget.bindingText || summary.binding)}`, warning: true });
+        if (para14a.communicationFallbackActive) tags.push({ label: `§14a-Fallback ${formatPower(para14a.fallbackCapW)}`, warning: true }); else if (para14a.binding) tags.push({ label: '§14a begrenzt', warning: true });
+        if (peak.active) tags.push({ label: `Peak-Shaving: ${text(peak.status, 'aktiv')}`, warning: true });
+        if (tariff.available) tags.push({ label: `Tarif: ${text(tariff.state, 'aktiv')}${tariff.priceEurPerKwh != null ? ` · ${num(tariff.priceEurPerKwh).toFixed(3)} €/kWh` : ''}` });
+        if (forecast.available) tags.push({ label: `Prognose: ${text(forecast.source, 'aktiv')}${forecast.fresh === false ? ' · veraltet' : ''}`, warning: forecast.fresh === false });
+        if (ems.safetyActive || ems.safetyEmergencyStop || ems.safetyValid === false) tags.push({ label: 'EOS Safety aktiv', warning: true });
+        const detailsPort = Math.max(1, num(summary.details?.port, 8188)); const detailsPath = text(summary.details?.path, '/ems-apps.html?tab=status'); const detailsUrl = `${location.protocol}//${location.hostname}:${detailsPort}${detailsPath.startsWith('/') ? detailsPath : `/${detailsPath}`}`;
+        const metrics = `<div class="eos-ems-overview-metric"><span>EMS-Budget</span><strong>${totalBudget > 0 ? esc(formatPower(totalBudget)) : 'nicht begrenzt'}</strong><small>Rest ${esc(formatPower(remaining))}</small></div><div class="eos-ems-overview-metric"><span>Lademanagement</span><strong>${esc(formatPower(charging.actualW))} / ${esc(formatPower(charging.targetW))}</strong><small>${num(charging.activeCount)} lädt · ${num(charging.waitingCount)} wartet</small></div>${storage.available ? `<div class="eos-ems-overview-metric"><span>Speicher ${esc(text(storage.topology))}</span><strong>${esc(formatPower(storage.actualW))} / ${esc(formatPower(storage.targetW))}</strong><small>${storage.socPct != null ? `SoC ${Math.round(num(storage.socPct))} %` : esc(text(storage.reason, 'aktiv'))}</small></div>` : `<div class="eos-ems-overview-metric"><span>PV-Budget</span><strong>${esc(formatPower(budget.pvBudgetW))}</strong><small>PV-Rest ${esc(formatPower(budget.remainingPvW))}</small></div>`}<div class="eos-ems-overview-metric"><span>Letzter Regeltick</span><strong>${esc(formatAge(ems.lastTickTs || data.updatedAt))}</strong><small>${isTechnical ? `Zyklus ${num(ems.cycleMs)} ms` : esc(text(ems.decision, 'EMS aktiv'))}</small></div>`;
+        const decisionsHtml = decisions.length ? decisions.map(item => `<div class="eos-ems-overview-decision eos-ems-overview-decision--${severity(item.severity)}"><strong>${esc(text(item.title, 'EMS-Entscheidung'))}</strong><span>${esc(text(item.reason, 'Keine zusätzliche Begrenzung'))}</span>${isTechnical && item.details ? `<small>${esc(item.details)}</small>` : ''}</div>`).join('') : '<div class="eos-ems-overview-empty">Keine aktiven Regelentscheidungen. EOS arbeitet mit den aktuellen Messwerten.</div>';
+        const eventsHtml = isTechnical ? (events.length ? events.map(item => `<div class="eos-ems-overview-event eos-ems-overview-event--${severity(item.severity)}"><time>${esc(formatClock(item.ts))}</time><div><strong>${esc(text(item.title, 'EMS'))}</strong><span>${esc(text(item.message || item.reason, 'Zustand aktualisiert'))}</span></div></div>`).join('') : '<div class="eos-ems-overview-empty">Noch keine Zustandsänderung im begrenzten Ereignispuffer.</div>') : `<div class="eos-ems-overview-decision eos-ems-overview-decision--info"><strong>${esc(text(summary.headline, 'EMS aktiv'))}</strong><span>${esc(text(summary.reason, 'EOS optimiert die Anlage innerhalb aller Sicherheitsgrenzen.'))}</span></div>`;
+        root.innerHTML = `<header class="eos-ems-overview-header"><div><span class="eos-ems-overview-eyebrow">NexoWatt EMS · Live-Diagnose</span><h2>${esc(stale ? 'EMS-Diagnose ist nicht aktuell' : text(summary.headline, 'EMS arbeitet normal'))}</h2><p>${esc(stale ? 'Adapter oder Diagnosewerte sind älter als 20 Sekunden. Die Werte werden als veraltet markiert.' : text(summary.reason, 'EMS arbeitet innerhalb aller aktiven Grenzen.'))}</p></div><div class="eos-ems-overview-state"><span class="eos-ems-overview-state-dot"></span><strong>${stale ? 'Offline / veraltet' : ({ok:'Normal',info:'Information',warning:'Begrenzt',error:'Störung'}[status])}</strong><small>${esc(data.instance)} · ${esc(formatAge(data.updatedAt))}</small></div></header><div class="eos-ems-overview-metrics">${metrics}</div>${totalBudget > 0 ? `<div class="eos-ems-overview-budget" title="${percent.toFixed(1)} % Restbudget"><span style="width:${percent}%"></span></div>` : ''}${tags.length ? `<div class="eos-ems-overview-tags">${tags.map(tag => `<span class="${tag.warning ? 'is-warning' : ''}">${esc(tag.label)}</span>`).join('')}</div>` : ''}<div class="eos-ems-overview-columns"><div class="eos-ems-overview-panel"><h3>Aktuelle Regelentscheidungen</h3>${decisionsHtml}</div><div class="eos-ems-overview-panel"><h3>${isTechnical ? 'Letzte EMS-Ereignisse' : 'Systemerklärung'}</h3>${eventsHtml}</div></div><footer class="eos-ems-overview-footer"><span>Diagnose ist rein lesend. Keine Kachel besitzt Schreibhoheit.</span><a href="${esc(detailsUrl)}" target="_blank" rel="noreferrer">Vollständige EMS-Diagnose öffnen ↗</a></footer>`;
+    };
+
+    const load = async () => {
+        if (destroyed || inFlight || document.visibilityState === 'hidden' || currentTab() !== 'tab-intro') return;
+        const socket = getSocket();
+        if (!socket?.getForeignStates) { unavailable('Die Admin-Verbindung wird noch aufgebaut.'); return; }
+        inFlight = true;
+        try {
+            const [states, alive] = await Promise.all([socket.getForeignStates('nexowatt-ui.*.info.adminOverview.*'), socket.getForeignStates('system.adapter.nexowatt-ui.*.alive')]);
+            const instances = normalizeInstances(states || {}, alive || {});
+            if (instances.length) render(instances[0]); else unavailable('NexoWatt UI ist nicht installiert, offline oder der Diagnosevertrag info.adminOverview.* fehlt.');
+        } catch (error) { unavailable(`EMS-Diagnose konnte nicht gelesen werden: ${text(error?.message || error, 'unbekannter Fehler')}`); }
+        finally { inFlight = false; }
+    };
+
+    const apply = () => {
+        document.getElementById('eos-role-safe-overview')?.remove();
+        document.documentElement.classList.remove('eos-safe-overview-active');
+        if (currentTab() !== 'tab-intro') { document.getElementById(ROOT_ID)?.remove(); return; }
+        ensureRoot(); void load();
+    };
+    const start = () => {
+        apply();
+        timer = window.setInterval(apply, POLL_MS);
+        window.addEventListener('hashchange', apply);
+        document.addEventListener('visibilitychange', apply);
+    };
+    document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', start, { once: true }) : start();
+    window.NEXOWATT_EOS_EMS_OVERVIEW = Object.freeze({ version: VERSION, contract: CONTRACT, refresh: apply, destroy() { destroyed = true; if (timer) clearInterval(timer); document.getElementById(ROOT_ID)?.remove(); } });
+})();

package/adminWww/js/eos-role-bootstrap.js

@@ -1,7 +1,7 @@
 (() => {
     'use strict';
 
-    const VERSION = 'v91-final-first-login-submit-guard';
+    const VERSION = 'v96-first-login-password-native-overview';
     const script = document.currentScript || document.querySelector('script[src*="eos-role-bootstrap.js"]');
     const entry = script?.dataset?.eosEntry || '';
     let launched = false;
@@ -172,7 +172,7 @@
         overlay.querySelector('.eos-first-login-submit').textContent = t.submit;
         overlay.querySelector('.eos-first-login-logout').textContent = t.logout;
         const form = overlay.querySelector('form');
-        form.elements.username.value = claim.userName || 'guest';
+        form.elements.username.value = userName;
         const password = form.elements.password;
         const repeat = form.elements.passwordRepeat;
         const show = form.elements.show;
@@ -500,7 +500,7 @@
             const { username, password, card, submit } = loginElements();
             if (!username || !password || !card) return;
             card.classList.add('eos-login-card-modern');
-            // v91 compact normal-login first activation: do not add role buttons or a second panel.
+            // v96 compact normal-login first activation: do not add role buttons or a second panel.
             // The account is entered in the existing Loginname field; a blank password is accepted only
             // after the backend confirms that this exact managed account is eligible.
             card.querySelectorAll('.eos-login-role-selector').forEach(element => element.remove());
@@ -631,7 +631,7 @@
 
     const contextUrl = new URL('nexowatt/security/context', base).href;
     const controller = new AbortController();
-    const timeout = window.setTimeout(() => controller.abort(), 3500);
+    const timeout = window.setTimeout(() => controller.abort(), 8000);
 
     window.NEXOWATT_EOS_BOOTSTRAP_READY = fetch(contextUrl, {
         credentials: 'same-origin', cache: 'no-store', headers: { Accept: 'application/json' }, signal: controller.signal,

package/adminWww/js/eos-role-ui.js

@@ -1,7 +1,7 @@
 (() => {
     'use strict';
 
-    const VERSION = 'v91-final-clickable-overview-live-reserve-filter';
+    const VERSION = 'v96-native-overview-ems-live-reserve-filter';
     window.NEXOWATT_EOS_ROLE_UI_VERSION = VERSION;
 
     const state = {
@@ -251,47 +251,43 @@
             if (/permissionerror|cannot get data/i.test(node.textContent || '')) node.classList.add('eos-role-hidden');
         });
     };
-    const ensureSafeOverview = () => safe(() => {
-        if (isLoginView() || state.role === 'admin' || state.role === 'unknown' || currentRoute() !== 'tab-intro') {
-            removeSafeOverview();
-            return;
+    const updateNativeOverviewRole = () => {
+        if (isLoginView() || currentRoute() !== 'tab-intro') return;
+        const config = state.role === 'admin'
+            ? { label: 'Admin / Service', text: 'Systemstatus, Module, Dienste und Anlagenzugänge in einer modernen Serviceübersicht.' }
+            : state.role === 'installer'
+                ? { label: 'Installateur', text: 'Inbetriebnahme, Fehlersuche, Geräte- und EMS-Diagnose – mit deinen freigegebenen Installateurrechten.' }
+                : { label: 'Endkunde', text: 'Energie, Laden, Gebäude und die aktuellen EMS-Entscheidungen auf einen Blick.' };
+        const hero = document.getElementById('eos-native-overview-hero');
+        const description = hero?.querySelector('p');
+        const role = hero?.querySelector('.eos-overview-role');
+        if (description) description.textContent = config.text;
+        if (role) {
+            role.innerHTML = '<span class="eos-overview-status-dot"></span>';
+            role.append(document.createTextNode(config.label));
+            role.setAttribute('data-nexowatt-overview-role', state.role);
         }
+    };
+    const hideIntroEditControls = () => {
         const paper = appPaper();
         if (!paper) return;
-        document.documentElement.classList.add('eos-safe-overview-active');
-        suppressPermissionErrors();
-        let overview = document.getElementById('eos-role-safe-overview');
-        if (!overview) {
-            overview = document.createElement('section');
-            overview.id = 'eos-role-safe-overview';
-            overview.className = 'eos-role-safe-overview';
-            paper.appendChild(overview);
-        }
-        const installer = state.role === 'installer';
-        const actions = actionDefinitions(state.role).filter(([, , tab]) => tab === 'basic-settings' || isRouteAllowed(state.role, tab));
-        overview.innerHTML = `
-            <header class="eos-overview-hero eos-role-overview-hero">
-                <div><span class="eos-overview-eyebrow">NexoWatt EOS</span><h1>Übersicht</h1><p>${installer ? 'Inbetriebnahme, Fehlersuche und Anlagenkonfiguration – passend zu deinen Installateurrechten.' : 'Deine freigegebenen Energie-, Smart-Home- und Sicherungsfunktionen.'}</p></div>
-                <div class="eos-overview-role"><span class="eos-overview-status-dot"></span>${installer ? 'Installateur' : 'Gast / Endkunde'}</div>
-            </header>
-            <div class="eos-overview-grid">${actions.map(([label, description, tab, icon]) => `
-                <a class="eos-overview-action" data-eos-role-tab="${tab}" href="${tab === 'basic-settings' ? '#tab-intro' : `#${tab}`}">
-                    <span class="eos-overview-action-icon" aria-hidden="true">${iconFor(icon)}</span>
-                    <span><strong>${label}</strong><small>${description}</small></span><i aria-hidden="true">›</i>
-                </a>`).join('')}</div>`;
-        overview.querySelectorAll('a[data-eos-role-tab]').forEach(link => {
-            link.addEventListener('click', event => {
-                event.preventDefault();
-                event.stopPropagation();
-                const targetTab = link.getAttribute('data-eos-role-tab') || '';
-                if (targetTab) navigateToTab(targetTab, link.textContent || '');
-            });
-            link.addEventListener('keydown', event => {
-                if (event.key !== 'Enter' && event.key !== ' ') return;
-                event.preventDefault();
-                navigateToTab(link.getAttribute('data-eos-role-tab') || '', link.textContent || '');
-            });
+        const admin = state.role === 'admin';
+        paper.querySelectorAll(':scope > .MuiFab-root,:scope > button.MuiFab-root').forEach(button => {
+            button.classList.toggle('eos-intro-admin-edit-hidden', !admin);
+            if (!admin) button.setAttribute('aria-hidden', 'true'); else button.removeAttribute('aria-hidden');
         });
+    };
+    const ensureSafeOverview = () => safe(() => {
+        // 7.9.96: never cover the real Admin Intro with a second tile surface.
+        // Installer and end-user use the native card component; security remains
+        // enforced by route/instance filters and backend permissions.
+        removeSafeOverview();
+        if (isLoginView() || state.role === 'unknown' || currentRoute() !== 'tab-intro') return;
+        suppressPermissionErrors();
+        updateNativeOverviewRole();
+        hideIntroEditControls();
+        window.NEXOWATT_NATIVE_SHELL?.refresh?.();
+        window.NEXOWATT_EOS_EMS_OVERVIEW?.refresh?.();
     });
 
     const hideOfficialReserveSurfaces = () => safe(() => {

package/adminWww/js/nexowatt-native-shell.js

@@ -1,7 +1,7 @@
 (() => {
     'use strict';
 
-    const VERSION = 'v91-nexowatt-native-shell-modern-overview';
+    const VERSION = 'v96-nexowatt-native-shell-native-overview';
     const previous = window.NEXOWATT_NATIVE_SHELL;
     if (previous?.version === VERSION) return;
     previous?.destroy?.();
@@ -148,21 +148,26 @@
 
     const ensureModernOverview = () => {
         const paper = document.getElementById('app-paper');
-        const role = window.NEXOWATT_EOS_ACCESS_ROLE || 'unknown';
-        if (!paper || isLogin() || currentTab() !== 'tab-intro' || role !== 'admin') {
+        const role = String(window.NEXOWATT_EOS_ACCESS_ROLE || 'unknown').toLowerCase();
+        if (!paper || isLogin() || currentTab() !== 'tab-intro' || role === 'unknown') {
             document.getElementById('eos-native-overview-hero')?.remove();
             return;
         }
+        const config = role === 'admin'
+            ? { label: 'Admin / Service', text: 'Systemstatus, Module, Dienste und Anlagenzugänge in einer modernen Serviceübersicht.' }
+            : role === 'installer' || role === 'installateur'
+                ? { label: 'Installateur', text: 'Inbetriebnahme, Fehlersuche, Geräte- und EMS-Diagnose – mit deinen freigegebenen Installateurrechten.' }
+                : { label: 'Endkunde', text: 'Energie, Laden, Gebäude und die aktuellen EMS-Entscheidungen auf einen Blick.' };
         let hero = document.getElementById('eos-native-overview-hero');
         if (!hero) {
             hero = document.createElement('section');
             hero.id = 'eos-native-overview-hero';
             hero.className = 'eos-overview-hero eos-native-overview-hero';
-            hero.innerHTML = `
-                <div><span class="eos-overview-eyebrow">NexoWatt EOS</span><h1>Übersicht</h1><p>Systemstatus, Module, Dienste und Anlagenzugänge in einer modernen Serviceübersicht.</p></div>
-                <div class="eos-overview-role"><span class="eos-overview-status-dot"></span>Admin / Service</div>`;
             paper.insertBefore(hero, paper.firstChild || null);
         }
+        hero.innerHTML = `
+            <div><span class="eos-overview-eyebrow">NexoWatt EOS</span><h1>Übersicht</h1><p>${config.text}</p></div>
+            <div class="eos-overview-role" data-nexowatt-overview-role="${role}"><span class="eos-overview-status-dot"></span>${config.label}</div>`;
     };
 
     const apply = () => {