wave(218): KPI alerting banner + Archi 3D iframe + 6/6 Playwright PASS

2026-04-21 22:41:52 +02:00
parent f33599517d
commit b1d25f329d
1 changed files with 92 additions and 0 deletions
--- a/weval-technology-platform.html
+++ b/weval-technology-platform.html
@@ -3463,6 +3463,26 @@ if (typeof window.navigateTo === 'function'){
  </script>
 </section>

+<section id="wtp-archi-3d-wave218" data-added-by="opus-wave-218" style="margin:24px 16px;padding:20px;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);border:1px solid #06b6d4;border-radius:12px;font-family:system-ui,sans-serif;box-shadow:0 10px 40px rgba(6,182,212,.15)">
+  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px">
+    <div>
+      <div style="display:flex;align-items:center;gap:10px">
+        <span style="font-size:22px">🌐</span>
+        <h2 style="margin:0;color:#a5f3fc;font-size:18px;font-weight:700">Architecture 3D · Live embedded</h2>
+        <span style="padding:3px 10px;border-radius:12px;background:linear-gradient(135deg,#06b6d4,#10b981);color:#fff;font-size:10px;font-weight:700">WAVE 218</span>
+      </div>
+      <p style="margin:4px 0 0 0;color:#67e8f9;font-size:12px">agents-archi.html · Three.js · particles flow · live state</p>
+    </div>
+    <div style="display:flex;gap:6px">
+      <a href="/agents-archi.html" target="_blank" style="text-decoration:none;padding:5px 12px;border-radius:10px;background:rgba(6,182,212,.12);color:#67e8f9;border:1px solid rgba(6,182,212,.3);font-size:11px">↗ Fullscreen</a>
+      <button onclick="var f=document.getElementById('wtp-archi-3d-frame');if(f){f.src=f.src;}" style="padding:5px 12px;border-radius:10px;background:rgba(6,182,212,.12);color:#67e8f9;border:1px solid rgba(6,182,212,.3);font-size:11px;cursor:pointer">🔄 Reload</button>
+    </div>
+  </div>
+  <div style="position:relative;width:100%;padding-bottom:56.25%;background:#000;border-radius:10px;overflow:hidden;border:1px solid rgba(6,182,212,.2)">
+    <iframe id="wtp-archi-3d-frame" src="/agents-archi.html" loading="lazy" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0" title="Architecture 3D live"></iframe>
+  </div>
+</section>
+
 <section id="wtp-archi-nav-wave216" data-added-by="opus-wave-216" style="margin:24px 16px;padding:24px;background:linear-gradient(135deg,#0c4a6e 0%,#1e1b4b 100%);border:1px solid #22d3ee;border-radius:12px;font-family:system-ui,sans-serif;box-shadow:0 10px 40px rgba(34,211,238,.18)">
  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px">
    <div>
@@ -4148,6 +4168,78 @@ if (typeof window.navigateTo === 'function'){
  </script>
 </section>

+<section id="wtp-kpi-alert-wave218" data-added-by="opus-wave-218" style="margin:18px 16px 0;padding:12px 18px;background:rgba(15,23,42,.6);border:1px solid rgba(34,211,238,.2);border-radius:10px;font-family:system-ui,sans-serif;display:flex;align-items:center;gap:14px;flex-wrap:wrap">
+  <div style="display:flex;align-items:center;gap:8px">
+    <span style="font-size:16px">🚨</span>
+    <span style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.6px;font-weight:600">Alerting Live</span>
+    <span style="padding:3px 9px;border-radius:10px;background:linear-gradient(135deg,#22d3ee,#a855f7);color:#fff;font-size:10px;font-weight:700">WAVE 218</span>
+  </div>
+  <div id="wtp-alert-badges" style="display:flex;gap:6px;flex-wrap:wrap;flex:1"></div>
+  <div id="wtp-alert-status" style="padding:4px 12px;border-radius:12px;background:rgba(71,85,105,.3);color:#cbd5e1;font-size:11px;font-weight:600;border:1px solid rgba(71,85,105,.5)">loading...</div>
+  <script>
+  (function(){
+    function badge(label, count, color, icon){
+      var bgA = color+'22', txt = color;
+      return '<span style="padding:3px 10px;border-radius:10px;background:'+bgA+';color:'+txt+';font-size:11px;font-weight:700;border:1px solid '+color+'55">'+icon+' '+label+': '+count+'</span>';
+    }
+    function refresh(){
+      Promise.all([
+        fetch('/api/v83-business-kpi-dashboard-data.php?cb='+Date.now()).then(function(r){return r.json();}).catch(function(){return null;}),
+        fetch('/api/nonreg-api.php?cb='+Date.now()).then(function(r){return r.json();}).catch(function(){return null;}),
+        fetch('/api/l99-api.php?action=stats&cb='+Date.now()).then(function(r){return r.json();}).catch(function(){return null;})
+      ]).then(function(res){
+        var kpi = res[0], nr = res[1], l99 = res[2];
+        var badges = document.getElementById('wtp-alert-badges');
+        var status = document.getElementById('wtp-alert-status');
+        if (!badges) return;
+        var html = '';
+        var hasFail = false, hasWarn = false;
+        if (kpi && kpi.summary) {
+          var s = kpi.summary;
+          var fail = s.fail || 0;
+          var warn = s.warn || 0;
+          var ok = s.ok || 0;
+          var wn = s.wire_needed || 0;
+          var dc = s.data_completeness_pct || 0;
+          html += badge('KPIs OK', ok, '#10b981', '✓');
+          html += badge('WARN', warn, warn>0?'#fbbf24':'#6b7280', '⚠');
+          html += badge('FAIL', fail, fail>0?'#ef4444':'#10b981', '✗');
+          html += badge('wire_needed', wn, wn>0?'#94a3b8':'#10b981', '🔗');
+          html += badge('Completeness', dc+'%', dc>=90?'#10b981':(dc>=75?'#fbbf24':'#ef4444'), '📊');
+          if (fail > 0) hasFail = true;
+          if (warn > 0 || dc < 90) hasWarn = true;
+        }
+        if (nr) {
+          var nrs = nr.summary || nr;
+          var np = nrs.pass||0, nt = nrs.total||0;
+          var nrok = np === nt && nt > 0;
+          html += badge('NonReg', np+'/'+nt, nrok?'#10b981':'#ef4444', '🧪');
+          if (!nrok) hasFail = true;
+        }
+        if (l99) {
+          var lp = l99.pass||0, lt = l99.total||0;
+          var lpct = lt ? Math.round(lp*100/lt) : 0;
+          html += badge('L99', lp+'/'+lt+' ('+lpct+'%)', lpct>=95?'#10b981':(lpct>=85?'#fbbf24':'#ef4444'), '🎯');
+          if (lpct < 85) hasWarn = true;
+        }
+        badges.innerHTML = html;
+        if (status) {
+          if (hasFail) {
+            status.textContent = '🚨 FAIL'; status.style.background='rgba(239,68,68,.2)'; status.style.color='#fca5a5'; status.style.borderColor='rgba(239,68,68,.4)';
+          } else if (hasWarn) {
+            status.textContent = '⚠️ WARN'; status.style.background='rgba(251,191,36,.2)'; status.style.color='#fde68a'; status.style.borderColor='rgba(251,191,36,.4)';
+          } else {
+            status.textContent = '✅ ALL GREEN'; status.style.background='rgba(16,185,129,.2)'; status.style.color='#6ee7b7'; status.style.borderColor='rgba(16,185,129,.4)';
+          }
+        }
+      });
+    }
+    refresh();
+    setInterval(refresh, 60000);
+  })();
+  </script>
+</section>
+
 <section id="wtp-erp-consolidated-wave208" data-added-by="opus-wave-208" style="margin:32px 16px 20px;padding:28px;background:radial-gradient(circle at 20% 20%,#1e1b4b,#0f172a 60%);border:1px solid #4c1d95;border-radius:14px;font-family:system-ui,sans-serif;box-shadow:0 10px 40px rgba(76,29,149,.25)">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:14px">
    <div>