From ccfd4e0121a5c3e2573d31f0d12db6a680aa1c54 Mon Sep 17 00:00:00 2001
From: Opus <opus@weval.ai>
Date: Fri, 24 Apr 2026 21:45:51 +0200
Subject: [PATCH] fix(w334): RESTORE web-ia-health.html w333 - ecrase par WEVIA
 file_write

---
 web-ia-health.html | 763 ++++++++++++++++++++++++++-------------------
 1 file changed, 446 insertions(+), 317 deletions(-)
diff --git a/web-ia-health.html b/web-ia-health.html
index 7eeb58510..449bef479 100644
--- a/web-ia-health.html
+++ b/web-ia-health.html
@@ -1,339 +1,468 @@
-mkdir -p /var/www/html
-cat > /var/www/html/web-ia-health.html << 'EOF'
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>WEVIA IA Health - Diagnostic Vidéo Intelligent</title>
-  <style>
-    :root {
-      --bg-primary: #0d0d0f;
-      --bg-secondary: #1a1a1f;
-      --text-primary: #e0e0ff;
-      --accent-blue: #2b65ec;
-      --accent-glow: #3a4bff33;
-      --border: #2d2d40;
-    }
-    body {
-      margin: 0;
-      font-family: 'Segoe UI', sans-serif;
-      background-color: var(--bg-primary);
-      color: var(--text-primary);
-      display: flex;
-      min-height: 100vh;
-    }
-    .sidebar {
-      width: 280px;
-      background: var(--bg-secondary);
-      border-right: 1px solid var(--border);
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-    .logo {
-      font-size: 22px;
-      font-weight: 700;
-      color: #ffffff;
-      margin-bottom: 24px;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .logo span { color: var(--accent-blue); }
-    .nav-item {
-      padding: 12px 16px;
-      border-radius: 8px;
-      cursor: pointer;
-      transition: all 0.2s;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      font-weight: 500;
-    }
-    .nav-item:hover { background: var(--accent-glow); }
-    .nav-item.active { background: var(--accent-blue); color: white; }
-    .nav-item i {
-      font-size: 18px;
-      width: 24px;
-      text-align: center;
-    }
-    .main-content {
-      flex: 1;
-      padding: 30px;
-      overflow-y: auto;
-    }
-    .header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 30px;
-    }
-    .page-title { font-size: 28px; font-weight: 600; }
-    .user-info { display: flex; align-items: center; gap: 10px; }
-    .card {
-      background: var(--bg-secondary);
-      border-radius: 12px;
-      padding: 24px;
-      margin-bottom: 20px;
-      border: 1px solid var(--border);
-      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    }
-    .card-title { font-size: 18px; margin: 0 0 16px; color: var(--accent-blue); }
-    .video-container {
-      position: relative;
-      width: 100%;
-      aspect-ratio: 16 / 9;
-      background: #000;
-      border-radius: 10px;
-      overflow: hidden;
-      margin-bottom: 16px;
-    }
-    #video-canvas {
-      position: absolute;
-      top: 0; left: 0; width: 100%; height: 100%;
-    }
-    .controls {
-      display: flex;
-      gap: 12px;
-      margin-top: 16px;
-    }
-    button {
-      padding: 10px 18px;
-      border: none;
-      border-radius: 6px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-    .btn-primary {
-      background: var(--accent-blue);
-      color: white;
-    }
-    .btn-primary:hover {
-      background: #1e50d0;
-      transform: translateY(-1px);
-    }
-    .btn-outline {
-      background: transparent;
-      border: 1px solid var(--border);
-      color: var(--text-primary);
-    }
-    .diagnostics {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-      gap: 16px;
-      margin-top: 20px;
-    }
-    .diagnostic-item {
-      background: rgba(43, 101, 236, 0.1);
-      border: 1px solid var(--accent-glow);
-      border-radius: 8px;
-      padding: 14px;
-    }
-    .diagnostic-label { font-size: 14px; opacity: 0.8; }
-    .diagnostic-value { font-size: 18px; font-weight: 600; margin-top: 4px; }
-    .screenshot-preview {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-      gap: 10px;
-      margin-top: 16px;
-    }
-    .screenshot-item {
-      aspect-ratio: 1;
-      border-radius: 6px;
-      overflow: hidden;
-      border: 2px solid transparent;
-      transition: all 0.2s;
-    }
-    .screenshot-item img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-    .screenshot-item.active {
-      border-color: var(--accent-blue);
-    }
-    .screenshot-item:hover {
-      transform: scale(1.05);
-    }
-    @media (max-width: 900px) {
-      .sidebar { width: 70px; }
-      .logo span { display: none; }
-      .nav-item span { display: none; }
-      .nav-item { justify-content: center; }
-      .main-content { padding: 20px; }
-    }
-  </style>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>WEVIA Web IA Health — Command Center</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
+<style>
+:root{--bg:#0a0e1a;--bg2:#11162a;--bg3:#1a1f36;--fg:#e2e8f0;--dim:#94a3b8;--dim2:#64748b;
+  --teal:#00e5a0;--yellow:#f4c430;--red:#ef4444;--orange:#f59e0b;--purple:#a28fff;--cyan:#22d3ee;
+  --bd:rgba(255,255,255,0.08);--bd2:rgba(255,255,255,0.04);
+  --mf:"JetBrains Mono","SF Mono",monospace;--serif:"Playfair Display",Georgia,serif}
+*{box-sizing:border-box;margin:0;padding:0}
+body{background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;min-height:100vh;padding:16px;line-height:1.5;font-size:14px}
+body::before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:radial-gradient(circle at 20% 10%,rgba(0,229,160,0.06),transparent 50%),radial-gradient(circle at 80% 90%,rgba(162,143,255,0.05),transparent 50%)}
+.hdr{max-width:1500px;margin:0 auto 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
+.title{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-0.5px}
+.title .accent{color:var(--teal)}
+.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
+.badge{padding:4px 10px;border-radius:999px;background:var(--bg2);border:1px solid var(--bd);font-family:var(--mf);font-size:10px;letter-spacing:0.4px}
+.badge.ok{color:var(--teal);border-color:rgba(0,229,160,0.3)}
+.badge.warn{color:var(--orange);border-color:rgba(245,158,11,0.3)}
+.badge.err{color:var(--red);border-color:rgba(239,68,68,0.3)}
+.grid{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
+.card{background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:18px;position:relative;overflow:hidden}
+.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--purple));opacity:0.4}
+.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}
+@media(max-width:1024px){.col-8,.col-6,.col-4,.col-3{grid-column:span 12}}
+.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
+.card-title{font-family:var(--serif);font-size:18px;font-weight:600}
+.card-sub{font-family:var(--mf);font-size:9px;color:var(--dim2);letter-spacing:0.5px;text-transform:uppercase;margin-top:3px}
+.big-stat{font-family:var(--serif);font-size:36px;font-weight:700;line-height:1;margin:4px 0}
+.big-stat.ok{color:var(--teal)}.big-stat.warn{color:var(--orange)}.big-stat.err{color:var(--red)}
+.kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--bd2);font-family:var(--mf);font-size:11px}
+.kv:last-child{border-bottom:none}.kv .k{color:var(--dim)}.kv .v{color:var(--fg);font-weight:600}
+.rec{padding:9px 12px;border-radius:8px;background:var(--bg3);border-left:3px solid var(--teal);margin-top:8px;font-size:12px;line-height:1.5}
+.rec.high{border-left-color:var(--red);background:rgba(239,68,68,0.08)}
+.rec.med{border-left-color:var(--orange);background:rgba(245,158,11,0.06)}
+.rec.low{border-left-color:var(--teal);background:rgba(0,229,160,0.06)}
+.rec .lbl{font-family:var(--mf);font-size:8px;text-transform:uppercase;color:var(--dim);letter-spacing:1px;margin-bottom:3px}
+.provider-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
+.provider-tile{background:var(--bg3);border:1px solid var(--bd2);border-radius:8px;padding:8px;text-align:center;cursor:pointer;transition:.2s}
+.provider-tile:hover{border-color:var(--teal)}
+.provider-tile .icon{font-size:16px}.provider-tile .name{font-family:var(--mf);font-size:9px;color:var(--dim);text-transform:uppercase;margin-top:3px}
+.provider-tile.running{border-color:rgba(0,229,160,0.3);background:rgba(0,229,160,0.05)}
+.provider-tile.running .name{color:var(--teal)}
+.btn{padding:7px 12px;border-radius:8px;background:var(--bg3);border:1px solid var(--bd);color:var(--fg);cursor:pointer;font-family:var(--mf);font-size:10px;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;gap:5px;letter-spacing:0.3px;white-space:nowrap}
+.btn:hover{background:var(--teal);color:var(--bg);border-color:var(--teal)}
+.btn.primary{background:var(--teal);color:var(--bg);font-weight:700}.btn.primary:hover{background:var(--yellow)}
+.btn.danger{border-color:rgba(239,68,68,0.4);color:var(--red)}.btn.danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
+.btn.warn{border-color:rgba(245,158,11,0.4);color:var(--orange)}.btn.warn:hover{background:var(--orange);color:#000;border-color:var(--orange)}
+.btn:disabled{opacity:0.5;cursor:wait}
+.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
+.chart-wrap{position:relative;height:180px;margin-top:10px}
+.mini-chart{height:80px}
+.gauge{width:120px;height:120px;margin:0 auto;position:relative}
+.gauge svg{transform:rotate(-90deg)}
+.gauge .track{stroke:var(--bg3);stroke-width:10;fill:none}
+.gauge .fill{stroke-width:10;fill:none;stroke-linecap:round;transition:stroke-dashoffset .6s}
+.gauge-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-family:var(--mf)}
+.gauge-label .num{font-size:22px;font-weight:700}
+.gauge-label .unit{font-size:9px;color:var(--dim);text-transform:uppercase;margin-top:2px}
+.feed{max-height:280px;overflow-y:auto;margin-top:10px}
+.feed-item{padding:8px 10px;border-radius:6px;background:var(--bg3);margin-bottom:5px;font-family:var(--mf);font-size:10px;display:flex;gap:8px;align-items:center}
+.feed-item .st{width:60px;font-weight:700;text-align:center;padding:2px 4px;border-radius:3px}
+.feed-item .st.done{color:var(--teal);background:rgba(0,229,160,0.1)}
+.feed-item .st.failed{color:var(--red);background:rgba(239,68,68,0.1)}
+.feed-item .st.failed_timeout{color:var(--red);background:rgba(239,68,68,0.1)}
+.feed-item .st.dispatched{color:var(--orange);background:rgba(245,158,11,0.1)}
+.feed-item .st.pending{color:var(--yellow);background:rgba(244,196,48,0.1)}
+.feed-item .lbl{color:var(--dim);min-width:70px}
+.feed-item .cmd{color:var(--fg);opacity:0.7;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.feed-item .age{color:var(--dim2);min-width:50px;text-align:right}
+.ask-widget{background:var(--bg3);border-radius:10px;padding:12px;margin-top:10px}
+.ask-row{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
+.ask-row select,.ask-row input{flex:1;min-width:120px;padding:8px 10px;border-radius:6px;background:var(--bg2);border:1px solid var(--bd);color:var(--fg);font-family:var(--mf);font-size:11px}
+.ask-row textarea{width:100%;padding:8px 10px;border-radius:6px;background:var(--bg2);border:1px solid var(--bd);color:var(--fg);font-family:var(--mf);font-size:11px;resize:vertical;min-height:60px}
+.ask-out{margin-top:8px;padding:10px;background:var(--bg);border-radius:6px;font-family:var(--mf);font-size:10px;color:var(--dim);max-height:200px;overflow-y:auto;white-space:pre-wrap;line-height:1.5;display:none}
+.ask-out.show{display:block}
+.checklist{margin-top:12px;padding:12px;background:var(--bg3);border-radius:10px;border:1px dashed var(--bd)}
+.checklist .title{font-family:var(--mf);font-size:10px;text-transform:uppercase;color:var(--yellow);letter-spacing:0.7px;margin-bottom:8px}
+.checklist ul{list-style:none;font-size:11px;line-height:1.8}
+.checklist li::before{content:"▸ ";color:var(--teal)}
+.status-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;box-shadow:0 0 0 0 currentColor;animation:pulse 2s infinite}
+@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
+.footer{max-width:1500px;margin:24px auto 0;padding:14px 0;text-align:center;font-family:var(--mf);font-size:9px;color:var(--dim2);border-top:1px solid var(--bd)}
+.toast{position:fixed;bottom:20px;right:20px;padding:12px 18px;border-radius:10px;background:var(--bg2);border:1px solid var(--teal);color:var(--teal);font-family:var(--mf);font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:100;transition:transform .3s;transform:translateY(200%)}
+.toast.show{transform:translateY(0)}
+.toast.err{border-color:var(--red);color:var(--red)}
+.loading{opacity:0.4;filter:blur(1px);pointer-events:none}
+.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
+.metric-box{background:var(--bg3);padding:10px;border-radius:8px;text-align:center}
+.metric-box .v{font-family:var(--mf);font-size:18px;font-weight:700;color:var(--teal)}
+.metric-box .v.warn{color:var(--orange)}.metric-box .v.err{color:var(--red)}
+.metric-box .l{font-family:var(--mf);font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:0.4px;margin-top:2px}
+</style>
 </head>
 <body>
-  <div class="sidebar">
-    <div class="logo">
-      <i data-feather="cpu"></i>
-      <span>WEVIA<span>IA</span></span>
-    </div>
-    <div class="nav-item active">
-      <i data-feather="video"></i>
-      <span>Diagnostic Vidéo</span>
-    </div>
-    <div class="nav-item">
-      <i data-feather="file-text"></i>
-      <span>Rapports</span>
-    </div>
-    <div class="nav-item">
-      <i data-feather="settings"></i>
-      <span>Paramètres</span>
-    </div>
-    <div class="nav-item">
-      <i data-feather="bar-chart-2"></i>
-      <span>Analytiques</span>
+
+<header class="hdr">
+  <div>
+    <div class="title"><span class="accent">WEVIA</span> · Command Center</div>
+    <div class="meta">
+      <span class="badge" id="b-blade">Blade: —</span>
+      <span class="badge" id="b-cdp">CDP: —</span>
+      <span class="badge" id="b-tasks">Tasks: —</span>
+      <span class="badge ok" id="b-intents">Intents: —</span>
+      <span class="badge" id="b-load">Load: —</span>
     </div>
   </div>
-
-  <div class="main-content">
-    <div class="header">
-      <h1 class="page-title">Analyse Vidéo en Temps Réel</h1>
-      <div class="user-info">
-        <i data-feather="user"></i>
-        <span>Dr. Martin - WEVIA Master</span>
-      </div>
-    </div>
-
-    <div class="card">
-      <h2 class="card-title">Flux Vidéo en Direct</h2>
-      <div class="video-container">
-        <canvas id="video-canvas"></canvas>
-      </div>
-      <div class="controls">
-        <button class="btn-primary" id="start-btn">
-          <i data-feather="play"></i> Démarrer Analyse
-        </button>
-        <button class="btn-outline" id="screenshot-btn">
-          <i data-feather="camera"></i> Capturer Image
-        </button>
-        <button class="btn-outline" id="stop-btn">
-          <i data-feather="square"></i> Arrêter
-        </button>
-      </div>
-
-      <div class="diagnostics">
-        <div class="diagnostic-item">
-          <div class="diagnostic-label">Fréquence Cardiaque</div>
-          <div class="diagnostic-value">78 bpm</div>
-        </div>
-        <div class="diagnostic-item">
-          <div class="diagnostic-label">Saturation O₂</div>
-          <div class="diagnostic-value">97%</div>
-        </div>
-        <div class="diagnostic-item">
-          <div class="diagnostic-label">Température</div>
-          <div class="diagnostic-value">36.8°C</div>
-        </div>
-        <div class="diagnostic-item">
-          <div class="diagnostic-label">Stress Level</div>
-          <div class="diagnostic-value">Bas</div>
-        </div>
-      </div>
-    </div>
-
-    <div class="card">
-      <h2 class="card-title">Captures d'Écran</h2>
-      <p>Aperçu des frames analysées par IA</p>
-      <div class="screenshot-preview" id="screenshot-container">
-        <!-- Screenshots will be inserted here -->
-      </div>
-    </div>
+  <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
+    <span style="font-family:var(--mf);font-size:9px;color:var(--dim2)">auto-refresh 30s</span>
+    <button class="btn" onclick="load()">↻ Refresh</button>
+    <a class="btn" href="/vnc-picker.html">VNC</a>
+    <a class="btn" href="/wevia-master.html">WEVIA Chat</a>
   </div>
+</header>
 
-  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-  <script>
-    // Initialize Feather Icons
-    feather.replace();
+<div class="grid" id="grid">
+  <div class="card col-12" style="text-align:center;padding:40px;color:var(--dim)">Chargement...</div>
+</div>
 
-    // Mock video stream simulation
-    const canvas = document.getElementById('video-canvas');
-    const ctx = canvas.getContext('2d');
-    const startBtn = document.getElementById('start-btn');
-    const stopBtn = document.getElementById('stop-btn');
-    const screenshotBtn = document.getElementById('screenshot-btn');
-    const screenshotContainer = document.getElementById('screenshot-container');
+<div class="footer">
+  <div>WEVIA AUTONOMY v1.9 · phase 54 · doctrines 183-192 · <span id="f-ts">—</span></div>
+  <div style="margin-top:4px">Zero manuel · Auto-fallback · Auto-recovery 2min · Auto-harden 5min · 221 NL + 2367 opus4</div>
+</div>
 
-    let isStreaming = false;
-    let animationId;
+<div class="toast" id="toast"></div>
 
-    // Resize canvas to fit container
-    function resizeCanvas() {
-      const container = canvas.parentElement;
-      canvas.width = container.offsetWidth;
-      canvas.height = container.offsetHeight;
+<script>
+const GRID = document.getElementById("grid");
+let chartTimeline, chartCoverage;
+
+function toast(msg, err){
+  const t = document.getElementById("toast");
+  t.textContent = msg;
+  t.className = "toast show" + (err?" err":"");
+  setTimeout(()=>t.className="toast",4000);
+}
+
+async function load(){
+  GRID.classList.add("loading");
+  try{
+    const r = await fetch("/api/web-ia-health.php?_="+Date.now(),{cache:"no-store"});
+    const d = await r.json();
+    render(d);
+  }catch(e){
+    GRID.innerHTML = `<div class="card col-12"><div style="color:var(--red)">Erreur chargement: ${e.message}</div></div>`;
+  }
+  GRID.classList.remove("loading");
+}
+
+async function sendIntent(msg){
+  toast("Envoi: " + msg);
+  try{
+    const r = await fetch("/api/wevia-chat-v2-direct.php",{
+      method:"POST",headers:{"Content-Type":"application/json"},
+      body:JSON.stringify({message:msg,session_id:"dashboard-"+Date.now()})
+    });
+    const d = await r.json();
+    const out = d.content || d.response || d.answer || "(empty)";
+    toast("✓ " + (d.tool||d.intent||"OK") + " · " + Math.round(d.elapsed_ms||0) + "ms");
+    const modal = document.getElementById("askOut");
+    if (modal) {
+      modal.textContent = "=== " + msg + " ===\n\n" + out;
+      modal.classList.add("show");
     }
-    window.addEventListener('resize', resizeCanvas);
-    resizeCanvas();
+    setTimeout(load, 2000);
+  }catch(e){ toast("❌ "+e.message, true); }
+}
 
-    // Simple mock visualization
-    function drawMockFrame() {
-      const time = Date.now() / 1000;
-      ctx.fillStyle = '#000';
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
+function render(d){
+  const b = d.sections.blade || {};
+  const t = d.sections.tasks || {};
+  const cdp = d.sections.cdp_local || {};
+  const ints = d.sections.intents || {};
+  const recs = d.sections.recommendations || [];
+  const timeline = d.sections.tasks_timeline_24h || [];
+  const recent_tasks = d.sections.tasks_recent || [];
+  const recent_jobs = d.sections.jobs_recent || [];
+  const m = d.sections.s204 || {};
 
-      // Simulated face detection box
-      ctx.strokeStyle = '#2b65ec';
-      ctx.lineWidth = 3;
-      const size = 200 + Math.sin(time) * 20;
-      const x = (canvas.width - size) / 2;
-      const y = (canvas.height - size) / 2;
-      ctx.strokeRect(x, y, size, size);
+  // Header badges
+  document.getElementById("b-blade").className = "badge " + (b.online?"ok":(b.heartbeat_age_s<600?"warn":"err"));
+  const bColorVar = b.color==='teal'?'var(--teal)':b.color==='orange'?'var(--orange)':'var(--red)';
+  document.getElementById("b-blade").innerHTML = `<span class="status-pulse" style="color:${bColorVar}"></span>Blade: ${b.status_label||'?'}`;
+  const cdp_ok = cdp.summary?cdp.summary.running:0;
+  const cdp_tot = cdp.summary?cdp.summary.total:8;
+  document.getElementById("b-cdp").className = "badge " + (cdp_ok>0?"ok":"warn");
+  document.getElementById("b-cdp").innerHTML = `CDP: ${cdp_ok}/${cdp_tot}`;
+  document.getElementById("b-tasks").innerHTML = `Tasks: ${t.done||0} done · ${t.stale||0} stale`;
+  document.getElementById("b-intents").innerHTML = `${ints.total||0} intents`;
+  const load5 = m.load?m.load["5m"]:0;
+  document.getElementById("b-load").className = "badge " + (load5<20?"ok":load5<50?"warn":"err");
+  document.getElementById("b-load").innerHTML = `Load: ${load5}`;
+  document.getElementById("f-ts").textContent = d.ts || "";
 
-      // Biometric indicators
-      ctx.fillStyle = 'rgba(43, 101, 236, 0.3)';
-      ctx.font = '20px sans-serif';
-      ctx.fillText('Analyse Biométrique Active', 30, 50);
+  let html = "";
 
-      animationId = requestAnimationFrame(drawMockFrame);
+  // === S204 METRICS STRIP ===
+  const disk_pct = m.disk?m.disk.pct:0;
+  const mem_pct = m.mem?m.mem.used_pct:0;
+  html += `
+  <div class="card col-12">
+    <div class="card-head">
+      <div><div class="card-title">📊 S204 Metrics (live)</div><div class="card-sub">Infrastructure serveur</div></div>
+      <div class="actions">
+        <button class="btn warn" onclick="sendIntent('disk_top')">Audit Disk</button>
+        <button class="btn warn" onclick="sendIntent('disaster_clean all')">Disaster Clean</button>
+        <button class="btn danger" onclick="sendIntent('deep_clean')">Deep Clean</button>
+      </div>
+    </div>
+    <div class="metric-row">
+      <div class="metric-box"><div class="v ${load5<20?'':load5<50?'warn':'err'}">${load5}</div><div class="l">Load 5min</div></div>
+      <div class="metric-box"><div class="v ${disk_pct<80?'':disk_pct<90?'warn':'err'}">${disk_pct}%</div><div class="l">Disk used</div></div>
+      <div class="metric-box"><div class="v ${mem_pct<70?'':mem_pct<85?'warn':'err'}">${mem_pct}%</div><div class="l">Mem used</div></div>
+      <div class="metric-box"><div class="v">${m.chromes||0}</div><div class="l">Chromes</div></div>
+    </div>
+  </div>`;
+
+  // === BLADE HERO ===
+  const hb_min = Math.floor((b.heartbeat_age_s||0)/60);
+  const hb_sec = (b.heartbeat_age_s||0) % 60;
+  const hb_txt = b.heartbeat_age_s<60 ? `${b.heartbeat_age_s}s` : (b.heartbeat_age_s<3600 ? `${hb_min}m ${hb_sec}s` : `${Math.floor(hb_min/60)}h ${hb_min%60}m`);
+  html += `
+  <div class="card col-8">
+    <div class="card-head">
+      <div><div class="card-title">🖥️ Agent Blade (PC Yacine)</div><div class="card-sub">Razer · Chrome cookies persistants · ZERO manuel</div></div>
+      <span class="badge ${b.online?'ok':(b.heartbeat_age_s<600?'warn':'err')}">${b.status_label||'?'}</span>
+    </div>
+    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px">
+      <div>
+        <div class="card-sub">Heartbeat</div>
+        <div class="big-stat ${b.online?'ok':(b.heartbeat_age_s<600?'warn':'err')}">${b.heartbeat_age_s>=0?hb_txt:'—'}</div>
+        <div class="card-sub" style="margin-top:4px">ago</div>
+      </div>
+      <div>
+        <div class="kv"><span class="k">IP</span><span class="v">${b.ip||'—'}</span></div>
+        <div class="kv"><span class="k">Agent</span><span class="v">v${b.agent_version||'—'}</span></div>
+        <div class="kv"><span class="k">Done</span><span class="v" style="color:var(--teal)">${t.done||0}</span></div>
+        <div class="kv"><span class="k">Running</span><span class="v" style="color:var(--orange)">${t.dispatched||0}</span></div>
+        <div class="kv"><span class="k">Stale</span><span class="v" style="color:var(--red)">${t.stale||0}</span></div>
+      </div>
+      <div>
+        <div class="rec ${b.online?'low':'high'}" style="margin-top:0">
+          <div class="lbl">RECO AUTO</div>${b.recommendation||'—'}
+        </div>
+        <div class="actions">
+          <button class="btn primary" onclick="sendIntent('blade_harden')">⚡ Harden</button>
+          <button class="btn" onclick="sendIntent('blade_tasks_recover')">↻ Recover</button>
+          <button class="btn" onclick="sendIntent('blade_health')">📊 Health</button>
+        </div>
+      </div>
+    </div>
+    <div class="checklist">
+      <div class="title">Check-list PC Yacine · zéro manuel éternel</div>
+      <ul>
+        <li>Agent Blade v2.0 · Windows Task Scheduler au démarrage</li>
+        <li>Chrome ouvert foreground · sinon SendKeys échoue</li>
+        <li>Mode performance · pas économie d'énergie</li>
+        <li>Veille écran OK · pas veille hibernation</li>
+        <li>Auto-harden cron S204 toutes les 5min max 1x/24h</li>
+      </ul>
+    </div>
+  </div>`;
+
+  // === TIMELINE CHART ===
+  html += `
+  <div class="card col-4">
+    <div class="card-head">
+      <div><div class="card-title">📈 Tasks 24h</div><div class="card-sub">Timeline activité Blade</div></div>
+    </div>
+    <div class="chart-wrap"><canvas id="chartTimeline"></canvas></div>
+  </div>`;
+
+  // === CDP LOCAL WITH PROVIDERS ===
+  const provs = cdp.providers || [];
+  const coverage_pct = cdp.summary?cdp.summary.coverage_pct:0;
+  html += `
+  <div class="card col-6">
+    <div class="card-head">
+      <div><div class="card-title">🌐 CDP Local S204 (Fallback)</div><div class="card-sub">8 profiles Chrome · ports 9222-9229</div></div>
+      <span class="badge ${cdp_ok>0?'ok':'warn'}">${cdp_ok}/${cdp_tot}</span>
+    </div>
+    <div style="display:flex;gap:16px;align-items:center">
+      <div class="gauge">
+        <svg width="120" height="120" viewBox="0 0 120 120">
+          <circle class="track" cx="60" cy="60" r="50"/>
+          <circle class="fill" cx="60" cy="60" r="50" stroke="${coverage_pct>50?'var(--teal)':coverage_pct>0?'var(--orange)':'var(--red)'}" stroke-dasharray="${2*Math.PI*50}" stroke-dashoffset="${2*Math.PI*50*(1-coverage_pct/100)}"/>
+        </svg>
+        <div class="gauge-label"><div class="num">${coverage_pct}%</div><div class="unit">coverage</div></div>
+      </div>
+      <div style="flex:1">
+        <div class="provider-grid">`;
+  provs.forEach(p=>{
+    const running = p.status==='running';
+    html += `<div class="provider-tile ${running?'running':''}" onclick="sendIntent('ask_${p.slug==='openai'?'chatgpt':p.slug==='anthropic'?'claude':p.slug==='google'?'gemini':p.slug}_web bonjour')" title="Test ${p.name}">
+      <div class="icon">${running?'✅':'❌'}</div><div class="name">${p.slug}</div>
+    </div>`;
+  });
+  if (provs.length===0){
+    html += `<div style="grid-column:1/-1;text-align:center;color:var(--dim);padding:12px;font-size:11px">CDP API down · lancez launch_chromes_all</div>`;
+  }
+  html += `</div></div></div>
+    <div class="actions">
+      <button class="btn primary" onclick="sendIntent('launch_chromes_all')">🚀 Launch 8 Chromes</button>
+      <button class="btn" onclick="sendIntent('chromes_status')">Status</button>
+      <a class="btn" href="/vnc-picker.html">VNC Picker</a>
+    </div>
+  </div>`;
+
+  // === QUICK ASK WIDGET ===
+  html += `
+  <div class="card col-6">
+    <div class="card-head">
+      <div><div class="card-title">💬 Quick Ask Any IA</div><div class="card-sub">Envoyer prompt direct via WEVIA</div></div>
+    </div>
+    <div class="ask-widget">
+      <div class="ask-row">
+        <select id="askProvider">
+          <optgroup label="Via BLADE (PC Yacine, zero login)">
+            <option value="ask_blade_claude">Claude (Blade)</option>
+            <option value="ask_blade_chatgpt">ChatGPT (Blade)</option>
+            <option value="ask_blade_gemini">Gemini (Blade)</option>
+            <option value="ask_blade_deepseek">DeepSeek (Blade)</option>
+            <option value="ask_blade_mistral">Mistral (Blade)</option>
+            <option value="ask_blade_poe">Poe (Blade)</option>
+            <option value="ask_blade_perplexity">Perplexity (Blade)</option>
+          </optgroup>
+          <optgroup label="Via CDP Local S204 (fallback)">
+            <option value="ask_claude_web">Claude (CDP local)</option>
+            <option value="ask_chatgpt_web">ChatGPT (CDP local)</option>
+            <option value="ask_gemini_web">Gemini (CDP local)</option>
+            <option value="ask_deepseek_web">DeepSeek (CDP local)</option>
+            <option value="ask_mistral_web">Mistral (CDP local)</option>
+          </optgroup>
+        </select>
+      </div>
+      <div class="ask-row">
+        <textarea id="askPrompt" placeholder="Votre prompt..."></textarea>
+      </div>
+      <div class="actions">
+        <button class="btn primary" onclick="doAsk()">⚡ Send</button>
+        <button class="btn" onclick="document.getElementById('askOut').classList.remove('show')">Clear</button>
+      </div>
+      <div class="ask-out" id="askOut"></div>
+    </div>
+  </div>`;
+
+  // === RECENT TASKS FEED ===
+  html += `
+  <div class="card col-6">
+    <div class="card-head">
+      <div><div class="card-title">📋 Recent Tasks (10)</div><div class="card-sub">Historique Blade</div></div>
+    </div>
+    <div class="feed">`;
+  recent_tasks.forEach(t=>{
+    const age = t.age_s<60?`${t.age_s}s`:t.age_s<3600?`${Math.floor(t.age_s/60)}m`:`${Math.floor(t.age_s/3600)}h`;
+    html += `<div class="feed-item">
+      <span class="st ${t.status}">${t.status}</span>
+      <span class="lbl">${t.label}</span>
+      <span class="cmd">${(t.cmd||'').replace(/</g,'&lt;')}</span>
+      <span class="age">${age}</span>
+    </div>`;
+  });
+  if (recent_tasks.length===0) html+=`<div style="color:var(--dim);font-size:11px;padding:10px">Aucune task récente</div>`;
+  html += `</div></div>`;
+
+  // === RECENT ASYNC JOBS ===
+  html += `
+  <div class="card col-6">
+    <div class="card-head">
+      <div><div class="card-title">⚙️ Async Jobs</div><div class="card-sub">Derniers résultats /tmp/wevia-job-*</div></div>
+      <button class="btn" onclick="sendIntent('job_list')">Refresh</button>
+    </div>
+    <div class="feed">`;
+  recent_jobs.forEach(j=>{
+    const age = j.age_s<60?`${j.age_s}s`:j.age_s<3600?`${Math.floor(j.age_s/60)}m`:`${Math.floor(j.age_s/3600)}h`;
+    html += `<div class="feed-item" style="flex-direction:column;align-items:stretch">
+      <div style="display:flex;justify-content:space-between">
+        <span style="color:var(--teal)">${j.id.substring(0,30)}...</span>
+        <span class="age">${age}</span>
+      </div>
+      <div style="color:var(--dim);font-size:9px;margin-top:4px;white-space:pre-wrap;max-height:60px;overflow:hidden">${(j.preview||'').replace(/</g,'&lt;').substring(0,200)}</div>
+    </div>`;
+  });
+  if (recent_jobs.length===0) html+=`<div style="color:var(--dim);font-size:11px;padding:10px">Aucun job récent</div>`;
+  html += `</div></div>`;
+
+  // === CAPABILITIES + RECOMMENDATIONS ===
+  html += `
+  <div class="card col-6">
+    <div class="card-head">
+      <div><div class="card-title">🧠 Capabilités WEVIA</div><div class="card-sub">NL + opus4-wired</div></div>
+      <span class="badge ok">${ints.total||0} total</span>
+    </div>
+    <div class="kv"><span class="k">NL Priority</span><span class="v">${ints.nl_priority||0}</span></div>
+    <div class="kv"><span class="k">Opus4 wired</span><span class="v">${ints.opus4_wired||0}</span></div>
+    <div class="card-sub" style="margin-top:12px">Actions rapides</div>
+    <div class="actions">
+      <button class="btn" onclick="sendIntent('web_ia_health')">web_ia_health</button>
+      <button class="btn" onclick="sendIntent('blade_status')">blade_status</button>
+      <button class="btn" onclick="sendIntent('chromes_status')">chromes_status</button>
+      <button class="btn" onclick="sendIntent('job_list')">job_list</button>
+      <button class="btn" onclick="sendIntent('infra_sante')">infra</button>
+      <button class="btn" onclick="sendIntent('disk_top')">disk_top</button>
+    </div>
+  </div>`;
+
+  html += `
+  <div class="card col-6">
+    <div class="card-head">
+      <div><div class="card-title">💡 Recommandations Auto</div><div class="card-sub">Analyses WEVIA contextuelles</div></div>
+    </div>`;
+  if (recs.length>0){
+    recs.forEach(r=>{
+      html += `<div class="rec ${r.priority||'low'}">
+        <div class="lbl">${(r.priority||'info').toUpperCase()}</div>${r.text}
+      </div>`;
+    });
+  } else {
+    html += `<div style="color:var(--teal);padding:16px;text-align:center">✅ Tout optimal · aucune action requise</div>`;
+  }
+  html += `</div>`;
+
+  GRID.innerHTML = html;
+
+  // Render timeline chart
+  setTimeout(()=>{
+    const ctx = document.getElementById("chartTimeline");
+    if (ctx && window.Chart) {
+      if (chartTimeline) chartTimeline.destroy();
+      chartTimeline = new Chart(ctx, {
+        type: 'bar',
+        data: {
+          labels: timeline.map((_,i)=>(24-i-1)+'h'),
+          datasets: [
+            {label:'Done',data:timeline.map(b=>b.done),backgroundColor:'rgba(0,229,160,0.7)',stack:'x'},
+            {label:'Failed',data:timeline.map(b=>b.failed),backgroundColor:'rgba(239,68,68,0.7)',stack:'x'},
+            {label:'Pending',data:timeline.map(b=>b.pending),backgroundColor:'rgba(245,158,11,0.7)',stack:'x'}
+          ]
+        },
+        options: {
+          responsive:true,maintainAspectRatio:false,
+          plugins:{legend:{labels:{color:'#94a3b8',font:{size:9}}}},
+          scales:{
+            x:{stacked:true,ticks:{color:'#64748b',font:{size:8}},grid:{color:'rgba(255,255,255,0.04)'}},
+            y:{stacked:true,ticks:{color:'#64748b',font:{size:9}},grid:{color:'rgba(255,255,255,0.04)'}}
+          }
+        }
+      });
     }
+  },100);
+}
 
-    startBtn.addEventListener('click', () => {
-      if (!isStreaming) {
-        isStreaming = true;
-        drawMockFrame();
-        startBtn.innerHTML = '<i data-feather="pause"></i> En Cours';
-        feather.replace();
-      }
-    });
+function doAsk(){
+  const prov = document.getElementById("askProvider").value;
+  const prompt = document.getElementById("askPrompt").value.trim();
+  if (!prompt) { toast("Prompt vide", true); return; }
+  sendIntent(prov + " " + prompt);
+}
 
-    stopBtn.addEventListener('click', () => {
-      if (isStreaming) {
-        isStreaming = false;
-        cancelAnimationFrame(animationId);
-        ctx.fillStyle = '#111';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = '#888';
-        ctx.font = '20px sans-serif';
-        ctx.fillText('Analyse Arrêtée', canvas.width/2 - 80, canvas.height/2);
-        startBtn.innerHTML = '<i data-feather="play"></i> Démarrer Analyse';
-        feather.replace();
-      }
-    });
+load();
+setInterval(load, 30000);
+</script>
 
-    screenshotBtn.addEventListener('click', () => {
-      if (!isStreaming) return;
-
-      const imgData = canvas.toDataURL('image/png');
-      const item = document.createElement('div');
-      item.className = 'screenshot-item active';
-      item.innerHTML = `<img src="${imgData}" alt="Capture" />`;
-      screenshotContainer.prepend(item);
-
-      // Keep only last 6 screenshots
-      if (screenshotContainer.children.length > 6) {
-        screenshotContainer.removeChild(screenshotContainer.lastChild);
-      }
-    });
-
-    // WEVIA Test Flag
-    console.log('%cWEVIA_TEST_MODE_ACTIVE', 'color: #2b65ec; font-weight: bold; font-size: 16px;');
-    console.log('Agents: 669 | Départements: 17 | LLMs: 12');
-  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
