@yonathan124/zentry 1.0.0

package/src/components/ZentryDashboard.jsx

@@ -0,0 +1,908 @@
+"use client";
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { PHASES, STACKS, GROUPS } from "../config/constants";
+
+// ─── Constantes & helpers ──────────────────────────────────────────────────
+const LS = {
+  get: (k, d) => { try { const v = localStorage.getItem(k); return v ? JSON.parse(v) : d; } catch { return d; } },
+  set: (k, v) => { try { localStorage.setItem(k, JSON.stringify(v)); } catch {} }
+};
+const SK = "vba-v5", SK_H = "vba-hist";
+const SEVS = ["CRITIQUE","HAUTE","MOYENNE","BASSE","INFO"];
+const SEV = {
+  CRITIQUE: { bg:"#3B0000", border:"#7F1D1D", text:"#FCA5A5", badge:"#EF4444" },
+  HAUTE:    { bg:"#2C1500", border:"#7C2D12", text:"#FDBA74", badge:"#F97316" },
+  MOYENNE:  { bg:"#1C1A00", border:"#713F12", text:"#FDE68A", badge:"#EAB308" },
+  BASSE:    { bg:"#001F10", border:"#14532D", text:"#86EFAC", badge:"#22C55E" },
+  INFO:     { bg:"#001525", border:"#1E3A5F", text:"#93C5FD", badge:"#3B82F6" },
+};
+const GRP_ICONS = { discovery:"🗺", security:"🔐", performance:"⚡", quality:"✅", infra:"🏗", ops:"🔄", closure:"🏁" };
+
+const PROVIDERS = {
+  anthropic: { label:"Claude",  icon:"🟤", ph:"sk-ant-…",  models:["claude-sonnet-4-20250514","claude-opus-4-20250514","claude-3-5-sonnet-20241022"] },
+  openai:    { label:"GPT-4o",  icon:"🟢", ph:"sk-…",      models:["gpt-4o","gpt-4o-mini","o3-mini"] },
+  groq:      { label:"Groq",    icon:"⚡", ph:"gsk_…",     models:["llama-3.3-70b-versatile","mixtral-8x7b-32768","llama-3.1-70b-versatile"] },
+  gemini:    { label:"Gemini",  icon:"🔵", ph:"AIza…",     models:["gemini-2.0-flash","gemini-1.5-pro","gemini-1.5-flash"] },
+};
+
+async function callAI(provider, key, model, systemPrompt, userPrompt) {
+  const sys = systemPrompt || "";
+  if (provider === "anthropic") {
+    const r = await fetch("https://api.anthropic.com/v1/messages", {
+      method:"POST", headers:{"Content-Type":"application/json","x-api-key":key,"anthropic-version":"2023-06-01"},
+      body: JSON.stringify({ model, max_tokens:3000, system: sys, messages:[{role:"user",content:userPrompt}] })
+    });
+    const d = await r.json(); return d.content?.[0]?.text || "";
+  }
+  if (provider === "gemini") {
+    const r = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${key}`, {
+      method:"POST", headers:{"Content-Type":"application/json"},
+      body: JSON.stringify({ systemInstruction:{parts:[{text:sys}]}, contents:[{parts:[{text:userPrompt}]}], generationConfig:{maxOutputTokens:3000} })
+    });
+    const d = await r.json(); return d.candidates?.[0]?.content?.parts?.[0]?.text || "";
+  }
+  // OpenAI / Groq (format compatible)
+  const endpoints = { openai:"https://api.openai.com/v1/chat/completions", groq:"https://api.groq.com/openai/v1/chat/completions" };
+  const r = await fetch(endpoints[provider], {
+    method:"POST", headers:{"Content-Type":"application/json","Authorization":`Bearer ${key}`},
+    body: JSON.stringify({ model, max_tokens:3000, messages:[{role:"system",content:sys},{role:"user",content:userPrompt}] })
+  });
+  const d = await r.json(); return d.choices?.[0]?.message?.content || "";
+}
+
+const STRICT_SYSTEM = `Tu es un auditeur de sécurité senior expert. Règles ABSOLUES :
+1. Ne rapporte QUE des vulnérabilités réelles et avérées dans le code fourni.
+2. Si le code est sécurisé, réponds UNIQUEMENT : [SAFE] - Aucune vulnérabilité détectée.
+3. Zéro faux positif. Zéro hallucination. Zéro suggestion générique sans preuve dans le code.
+4. Pour chaque faille : indique la ligne exacte, le risque concret, le correctif précis.
+5. Format de sortie STRICT : [CRITIQUE/HAUTE/MOYENNE/BASSE] Fichier:ligne — Description — Correctif`;
+
+function detectStack(txt) {
+  if (!txt) return null;
+  if (txt.includes("@supabase") && txt.includes("next")) return "njs-supa";
+  if (txt.includes("prisma") && txt.includes("next")) return "njs-prisma";
+  if (txt.includes("express")) return "node-express";
+  if (txt.includes("django")) return "django";
+  if (txt.includes("fastapi")) return "fastapi";
+  if (txt.includes("expo") || txt.includes("react-native")) return "react-native";
+  if (txt.includes("laravel")) return "laravel";
+  if (txt.includes("nuxt")) return "nuxt";
+  return null;
+}
+
+function buildPrompt(phase, project, fileCode, blocNum, patterns, bizCtx, findings) {
+  const sp = STACKS[project.stackProfile] || STACKS["njs-supa"];
+  const crossF = (phase.deps||[]).flatMap(dep => (findings[dep]||[]).filter(f=>!f.resolved && (f.severity==="CRITIQUE"||f.severity==="HAUTE")).map(f=>`[${f.severity}] ${f.text}`));
+  const customP = patterns.length ? patterns.map(p=>`- [${p.category}] ${p.rule}`).join("\n") : "";
+  return (phase.prompt || "")
+    .replace(/\{\{PROJECT\}\}/g, project.name || "Projet")
+    .replace(/\{\{STACK\}\}/g, sp.label)
+    .replace(/\{\{STACK_SEC\}\}/g, (sp.sec||[]).join("\n"))
+    .replace(/\{\{BLOC_NUM\}\}/g, blocNum || "")
+    .replace(/\{\{FILES\}\}/g, fileCode || "(aucun fichier fourni)")
+    .replace(/\{\{COMPLIANCE\}\}/g, (project.compliance||[]).join(", ") || "N/A")
+    .replace(/\{\{SENSITIVE_DATA\}\}/g, project.sensitiveData || "N/A")
+    .replace(/\{\{USERS\}\}/g, bizCtx?.users || "N/A")
+    .replace(/\{\{PEAK_RPS\}\}/g, bizCtx?.peakRps || "N/A")
+    .replace(/\{\{SLA\}\}/g, bizCtx?.sla || "N/A")
+    .replace(/\{\{GEO\}\}/g, bizCtx?.geo || "N/A")
+    .replace(/\{\{CROSS_FINDINGS\}\}/g, crossF.length ? crossF.join("\n") : "Aucun finding critique dans les phases précédentes.")
+    .replace(/\{\{CUSTOM_PATTERNS\}\}/g, customP || "Aucune règle personnelle.");
+}
+
+async function readLocalFile(dirFiles, path) {
+  try {
+    if (!dirFiles) return null;
+    const file = dirFiles.find(f => f.webkitRelativePath.endsWith(path) || f.webkitRelativePath.includes(path));
+    if (file) return await file.text();
+    return null;
+  } catch { return null; }
+}
+
+function Sparkline({ data, color = "#8B5CF6" }) {
+  const mx = Math.max(...data, 1);
+  const pts = data.map((v, i) => `${i * (48/(data.length-1))},${18 - (v/mx)*16}`).join(" ");
+  return (
+    <svg width="48" height="20" style={{ flexShrink:0 }}>
+      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+}
+
+function RadialProgress({ pct, size = 48, stroke = 4, color = "#8B5CF6" }) {
+  const r = (size - stroke) / 2;
+  const circ = 2 * Math.PI * r;
+  return (
+    <svg width={size} height={size} style={{ transform:"rotate(-90deg)" }}>
+      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="#2D2D3A" strokeWidth={stroke}/>
+      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke}
+        strokeDasharray={`${(pct/100)*circ} ${circ}`} strokeLinecap="round"
+        style={{ transition:"stroke-dasharray .6s ease" }}/>
+    </svg>
+  );
+}
+
+// ─── CSS global injecté une seule fois ────────────────────────────────────
+const GLOBAL_CSS = `
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+.vba-root * { box-sizing:border-box; font-family:'Inter',system-ui,sans-serif; }
+.vba-root { --bg:#0A0A12; --bg2:#111120; --bg3:#1A1A2E; --card:#16162A;
+  --border:#2A2A42; --accent:#8B5CF6; --accent2:#7C3AED; --accentLight:#EDE9FE;
+  --text:#F1F0FF; --muted:#6B6B8A; --muted2:#4A4A6A; --green:#22C55E; --red:#EF4444; --yellow:#EAB308; }
+.vba-btn { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:12px;
+  font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .2s;outline:none; }
+.vba-btn-primary { background:var(--accent);color:#fff; }
+.vba-btn-primary:hover { background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 16px #8B5CF640; }
+.vba-btn-ghost { background:transparent;color:var(--muted);border:1px solid var(--border); }
+.vba-btn-ghost:hover { background:var(--bg3);color:var(--text);border-color:var(--accent); }
+.vba-btn-danger { background:#3B0000;color:#FCA5A5;border:1px solid #7F1D1D; }
+.vba-btn-danger:hover { background:#7F1D1D; }
+.vba-input { width:100%;padding:10px 14px;background:var(--bg3);border:1px solid var(--border);
+  border-radius:10px;color:var(--text);font-size:13px;outline:none;transition:border .2s; }
+.vba-input:focus { border-color:var(--accent);box-shadow:0 0 0 3px #8B5CF620; }
+.vba-input::placeholder { color:var(--muted2); }
+.vba-card { background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px; }
+.vba-tab-btn { display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 12px;
+  background:none;border:none;cursor:pointer;color:var(--muted);transition:color .2s;flex:1; }
+.vba-tab-btn.active { color:var(--accent); }
+.vba-tab-btn span { font-size:18px; }
+.vba-tab-btn small { font-size:10px;font-weight:500; }
+.vba-phase-btn { width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;
+  display:flex;align-items:center;gap:10px;border-radius:10px;text-align:left;transition:background .15s; }
+.vba-phase-btn:hover { background:var(--bg3); }
+.vba-phase-btn.active { background:#1E1040;border:1px solid #4C1D95; }
+.vba-check-item { display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--border);cursor:pointer; }
+.vba-check-item:first-child { border-top:none; }
+.vba-badge { display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700; }
+.vba-anim-in { animation:vba-in .3s ease; }
+@keyframes vba-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
+.vba-scroll::-webkit-scrollbar { width:4px; }
+.vba-scroll::-webkit-scrollbar-track { background:transparent; }
+.vba-scroll::-webkit-scrollbar-thumb { background:var(--border);border-radius:4px; }
+.vba-pulse { animation:vba-pulse 2s infinite; }
+@keyframes vba-pulse { 0%,100%{opacity:1}50%{opacity:.5} }
+.vba-tag { padding:3px 8px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:.04em; }
+select.vba-input option { background:#1A1A2E; }
+.vba-matrix-anim { font-family:monospace; color:#22C55E; animation: matrix-fade 1.2s infinite alternate; }
+@keyframes matrix-fade { from {opacity:0.6; text-shadow:0 0 4px #22C55E;} to {opacity:1; text-shadow:0 0 10px #22C55E;} }
+`;
+
+
+// ─── COMPOSANT PRINCIPAL ──────────────────────────────────────────────────
+export default function Zentry() {
+  const sv = LS.get(SK, {});
+
+  // ── État global ──
+  const [tab, setTab] = useState("audit");
+  const [project, setProject] = useState(() => sv.project ?? { name:"", stackProfile:"njs-supa", ide:"cursor", compliance:[], sensitiveData:"" });
+  const [aiCfg, setAiCfg] = useState(() => sv.aiCfg ?? { provider:"groq", key:"", model:"llama-3.3-70b-versatile", godMode: false });
+  const [bizCtx, setBizCtx] = useState(() => sv.bizCtx ?? { users:"", peakRps:"", sla:"", geo:"" });
+
+  // ── État audit ──
+  const initCh = () => { const o={}; PHASES.forEach(p=>{o[p.id]=p.checks.map(()=>false);}); return o; };
+  const initArr = () => { const o={}; PHASES.forEach(p=>{o[p.id]=[];}); return o; };
+  const initStr = () => { const o={}; PHASES.forEach(p=>{o[p.id]="";}); return o; };
+
+  const [checks,   setChecks]   = useState(() => sv.checks   ?? initCh());
+  const [findings, setFindings] = useState(() => sv.findings ?? initArr());
+  const [fileBlks, setFileBlks] = useState(() => sv.fileBlks ?? initStr());
+  const [blocNums, setBlocNums] = useState(() => sv.blocNums ?? initStr());
+  const [notes,    setNotes]    = useState(() => sv.notes    ?? initStr());
+  const [dates,    setDates]    = useState(() => sv.dates    ?? initStr());
+  const [verdict,  setVerdict]  = useState(() => sv.verdict  ?? null);
+  const [patterns, setPatterns] = useState(() => sv.patterns ?? []);
+  const [history,  setHistory]  = useState(() => LS.get(SK_H, []));
+
+  // ── UI state ──
+  const [activeId, setActiveId] = useState(() => sv.activeId ?? "p0");
+  const [dirFiles, setDirFiles] = useState(null);
+  const [autoRunning, setAutoRunning] = useState(false);
+  const [loadedCode, setLoadedCode] = useState({});
+  const [aiLoading, setAiLoading] = useState({});
+  const [fixState, setFixState] = useState({});
+  const [newF, setNewF] = useState({ sev:"HAUTE", txt:"" });
+  const [newPat, setNewPat] = useState({ category:"SÉCURITÉ", rule:"" });
+  const [analyzeIn, setAnalyzeIn] = useState("");
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [scanning, setScanning] = useState(false);
+  const [scanFiles, setScanFiles] = useState([]);
+  const [scanProgress, setScanProgress] = useState({ done:0, total:0, current:"" });
+  const [scanResults, setScanResults] = useState([]);
+  const [showKey, setShowKey] = useState(false);
+  const [copied, setCopied] = useState(null);
+  const [toast, setToast] = useState(null);
+
+  // ── Persistance ──
+  useEffect(() => { LS.set(SK, {project,aiCfg,bizCtx,checks,findings,fileBlks,blocNums,notes,dates,verdict,patterns,activeId}); },
+    [project,aiCfg,bizCtx,checks,findings,fileBlks,blocNums,notes,dates,verdict,patterns,activeId]);
+
+  // ── Toast helper ──
+  const showToast = (msg, type="info") => { setToast({msg,type}); setTimeout(()=>setToast(null),3000); };
+
+  // ── Calculs ──
+  const pPct = useCallback((id) => {
+    const c = checks[id] || []; const d = c.filter(Boolean).length;
+    return { done:d, total:c.length, pct: c.length ? Math.round(d/c.length*100) : 0 };
+  }, [checks]);
+
+  const pSt = useCallback((id) => {
+    const {done,total} = pPct(id);
+    return done===0?"todo":done===total?"done":"partial";
+  }, [pPct]);
+
+  const totPct = useMemo(() => {
+    let d=0,t=0; PHASES.forEach(p=>{const c=checks[p.id]||[];d+=c.filter(Boolean).length;t+=c.length;});
+    return {done:d,total:t,pct:t?Math.round(d/t*100):0};
+  }, [checks]);
+
+  const allF = useMemo(() => {
+    const a=[]; PHASES.forEach(p=>(findings[p.id]||[]).forEach(f=>a.push({...f,phaseId:p.id,phaseLabel:p.label}))); return a;
+  }, [findings]);
+
+  const sevC = useMemo(() => {
+    const c={CRITIQUE:0,HAUTE:0,MOYENNE:0,BASSE:0,INFO:0};
+    allF.forEach(f=>{ if(c[f.severity]!==undefined) c[f.severity]++; }); return c;
+  }, [allF]);
+
+  const groupPct = useCallback((gid) => {
+    const gp = PHASES.filter(p=>p.group===gid);
+    let d=0,t=0; gp.forEach(p=>{const c=checks[p.id]||[];d+=c.filter(Boolean).length;t+=c.length;});
+    return t?Math.round(d/t*100):0;
+  }, [checks]);
+
+  const phase = PHASES.find(p=>p.id===activeId) || PHASES[0];
+  const phIdx = PHASES.findIndex(p=>p.id===activeId);
+  const prevP = phIdx>0?PHASES[phIdx-1]:null;
+  const nextP = phIdx<PHASES.length-1?PHASES[phIdx+1]:null;
+  const sp = STACKS[project.stackProfile] || STACKS["njs-supa"];
+  const prov = PROVIDERS[aiCfg.provider] || PROVIDERS.groq;
+  const isConfigured = !!project.name && !!aiCfg.key;
+
+  // ── Actions ──
+  const clip = (text, key) => {
+    navigator.clipboard.writeText(text).then(()=>{setCopied(key);setTimeout(()=>setCopied(null),2000);});
+  };
+
+  const toggleCheck = (pid, i) => {
+    setChecks(prev=>{const u=[...(prev[pid]||[])];u[i]=!u[i];return{...prev,[pid]:u};});
+    if(!dates[pid]) setDates(d=>({...d,[pid]:new Date().toISOString()}));
+  };
+
+  const addFinding = (pid) => {
+    if(!newF.txt.trim()) return;
+    setFindings(prev=>({...prev,[pid]:[...(prev[pid]||[]),{id:Date.now(),severity:newF.sev,text:newF.txt.trim(),resolved:false}]}));
+    setNewF(f=>({...f,txt:""}));
+  };
+
+  const saveSnap = () => {
+    const snap = {date:new Date().toISOString(),project:project.name,stack:sp.label,pct:totPct.pct,sev:{...sevC}};
+    setHistory(h=>{const u=[...h,snap].slice(-50);LS.set(SK_H,u);return u;});
+    showToast("📸 Snapshot sauvegardé !", "success");
+  };
+
+  // ── Auto-Audit ──
+  const runAutoAudit = async () => {
+    if (!aiCfg.key) { showToast("⚠️ Configure ta clé API dans Paramètres", "error"); setTab("settings"); return; }
+    if (!dirFiles && !fileBlks[phase.id]) { showToast("⚠️ Fournis des fichiers ou connecte un dossier", "error"); return; }
+    setAutoRunning(true);
+    try {
+      let code = loadedCode[phase.id] || "";
+      if (!code && dirFiles && fileBlks[phase.id]) {
+        const paths = fileBlks[phase.id].split("\n").map(p=>p.trim()).filter(Boolean);
+        const parts = await Promise.all(paths.map(p => readLocalFile(dirFiles, p)));
+        code = paths.map((p,i)=>`// ─── ${p} ───\n${parts[i]||"⚠️ Introuvable"}`).join("\n\n");
+        setLoadedCode(prev=>({...prev,[phase.id]:code}));
+      }
+      const prompt = buildPrompt(phase, project, code, blocNums[phase.id], patterns, bizCtx, findings);
+      const raw = await callAI(aiCfg.provider, aiCfg.key, aiCfg.model, STRICT_SYSTEM, prompt);
+
+      if (raw.trim().startsWith("[SAFE]")) {
+        showToast("✅ " + raw.trim(), "success");
+        setNotes(n=>({...n,[phase.id]:(n[phase.id]?n[phase.id]+"\n\n":"")+`🛡 Auto-Audit ${new Date().toLocaleTimeString()}:\n${raw.trim()}`}));
+      } else {
+        const lines = raw.split("\n"); const newFindings=[]; let id=Date.now();
+        for (const l of lines) {
+          if (l.match(/\[CRITIQUE\]/i)) newFindings.push({id:id++,severity:"CRITIQUE",text:l.replace(/\[CRITIQUE\]\s*/i,"").trim(),resolved:false});
+          else if (l.match(/\[HAUTE\]/i)) newFindings.push({id:id++,severity:"HAUTE",text:l.replace(/\[HAUTE\]\s*/i,"").trim(),resolved:false});
+          else if (l.match(/\[MOYENNE\]/i)) newFindings.push({id:id++,severity:"MOYENNE",text:l.replace(/\[MOYENNE\]\s*/i,"").trim(),resolved:false});
+          else if (l.match(/\[BASSE\]/i)) newFindings.push({id:id++,severity:"BASSE",text:l.replace(/\[BASSE\]\s*/i,"").trim(),resolved:false});
+        }
+        if (newFindings.length) setFindings(prev=>({...prev,[phase.id]:[...(prev[phase.id]||[]),...newFindings]}));
+        setNotes(n=>({...n,[phase.id]:(n[phase.id]?n[phase.id]+"\n\n":"")+`🔍 Auto-Audit ${new Date().toLocaleTimeString()}:\n${raw.trim()}`}));
+        showToast(`🔴 ${newFindings.length} finding(s) détecté(s)`, "warning");
+      }
+    } catch(e) { showToast("❌ Erreur API: " + e.message, "error"); }
+    setAutoRunning(false);
+  };
+
+  // ── Scanner automatique ──
+  const scanDirectory = async () => {
+    if (!dirFiles || dirFiles.length === 0) { showToast("📁 Connecte d'abord un dossier", "error"); return; }
+    if (!aiCfg.key) { showToast("⚠️ Configure ta clé API dans Paramètres", "error"); setTab("settings"); return; }
+    const IGNORE = /node_modules|\.next|dist|\.git|\.lock$|\.json$|\.png$|\.jpg$|\.svg$|\.css$/;
+    const EXTS = /\.(ts|tsx|js|jsx|py|php|rs|go)$/;
+    
+    setScanning(true); setScanResults([]); setScanFiles([]);
+    try {
+      const files = dirFiles.filter(f => EXTS.test(f.name) && !IGNORE.test(f.webkitRelativePath)).map(f => f.webkitRelativePath);
+      setScanFiles(files);
+      const BLOCK_SIZE = 4;
+      const blocks = [];
+      for (let i=0; i<files.length; i+=BLOCK_SIZE) blocks.push(files.slice(i,i+BLOCK_SIZE));
+      const results = [];
+      for (let bi=0; bi<blocks.length; bi++) {
+        const block = blocks[bi];
+        setScanProgress({done:bi,total:blocks.length,current:block.join(", ")});
+        const parts = await Promise.all(block.map(f => readLocalFile(dirFiles, f)));
+        const code = block.map((f,i)=>`// ─── ${f} ───\n${parts[i]||"⚠️ Vide"}`).join("\n\n");
+        const prompt = `Audite ces ${block.length} fichier(s) de sécurité.\nProjet: ${project.name||"ORVIA"} | Stack: ${sp.label}\n\n${code}`;
+        try {
+          const raw = await callAI(aiCfg.provider, aiCfg.key, aiCfg.model, STRICT_SYSTEM, prompt);
+          results.push({ block, raw, safe: raw.trim().startsWith("[SAFE]") });
+        } catch(e) { results.push({ block, raw: `Erreur: ${e.message}`, safe:false, error:true }); }
+        setScanResults([...results]);
+      }
+      setScanProgress({done:blocks.length,total:blocks.length,current:""});
+      showToast(`✅ Scan terminé — ${files.length} fichiers analysés`, "success");
+    } catch(e) { showToast("❌ Erreur scan: "+e.message, "error"); }
+    setScanning(false);
+  };
+
+  // ── Fix IA & Self-Healing ──
+  const applyFix = async (fId, code, filePath) => {
+    setFixState(prev=>({...prev,[fId]:{...prev[fId], applying:true}}));
+    try {
+      const res = await fetch("/api/zentry/fix", {
+        method: "POST", headers: {"Content-Type":"application/json"},
+        body: JSON.stringify({ filePath: filePath || "apps/web/src/app/page.tsx", content: code })
+      });
+      const data = await res.json();
+      if(data.success) {
+        showToast("✅ Code corrigé sur le disque dur !", "success");
+        setFindings(prev=>{
+          const nf = {...prev};
+          Object.keys(nf).forEach(k=>{ nf[k] = nf[k].map(x=>x.id===fId?{...x,resolved:true}:x); });
+          return nf;
+        });
+      } else {
+        showToast("⚠️ Mode Cloud / Échec: " + (data.message||data.error), "error");
+      }
+    } catch(e) { showToast("❌ Erreur d'application", "error"); }
+    setFixState(prev=>({...prev,[fId]:{...prev[fId], applying:false}}));
+  };
+
+  const generateFix = async (pid, f) => {
+    if(!aiCfg.key) { showToast("Configure ta clé API", "error"); return; }
+    setFixState(prev=>({...prev,[f.id]:{loading:true}}));
+    try {
+      const raw = await callAI(aiCfg.provider, aiCfg.key, aiCfg.model, "",
+        `Expert sécurité ${sp.label}. Génère le fichier complet corrigé (JSON sans backticks).\nFinding [${f.severity}]: ${f.text}\nJSON: {"filePath":"apps/web/src/...","code":"// fichier complet corrigé","explanation":"2 phrases","confidence":0.9}`);
+      const parsed = JSON.parse(raw.replace(/```json|```/g,"").trim());
+      setFixState(prev=>({...prev,[f.id]:{loading:false,...parsed}}));
+      
+      if(aiCfg.godMode && parsed.code && parsed.filePath) {
+        await applyFix(f.id, parsed.code, parsed.filePath);
+      }
+    } catch { setFixState(prev=>({...prev,[f.id]:{loading:false,error:true}})); }
+  };
+
+  const buildReport = () => {
+    const lines = [`# RAPPORT D'AUDIT — ${(project.name||"PROJET").toUpperCase()}`,
+      `> ${new Date().toLocaleDateString("fr-FR",{day:"2-digit",month:"long",year:"numeric"})} · Zentry Pro v5.0 · ${sp.label}`,
+      verdict?`> **Verdict : ${verdict==="pass"?"🟢 PRÊT":verdict==="warn"?"🟡 AVEC RÉSERVES":"🔴 NON PRÊT"}**`:"",
+      `> Score global : ${totPct.done}/${totPct.total} (${totPct.pct}%)`, ""];
+    PHASES.forEach(p=>{
+      const {done,total:t}=pPct(p.id); const st=pSt(p.id);
+      lines.push(`## ${st==="done"?"✅":st==="partial"?"🟡":"⬜"} Phase ${p.n} — ${p.label} (${done}/${t})`);
+      p.checks.forEach((c,i)=>lines.push(`${checks[p.id][i]?"✅":"⬜"} ${c}`));
+      const pf=findings[p.id]||[];
+      if(pf.length){lines.push("");pf.forEach(f=>lines.push(`- **[${f.severity}]** ${f.resolved?"~~"+f.text+"~~":f.text}${f.resolved?" ✓":""}`))}
+      lines.push("");
+    });
+    return lines.filter(Boolean).join("\n");
+  };
+
+
+  // ─── RENDER ───────────────────────────────────────────────────────────────
+  return (
+    <div className="vba-root" style={{background:"var(--bg)",minHeight:"100vh",color:"var(--text)",display:"flex",flexDirection:"column",maxWidth:"420px",margin:"0 auto",position:"relative"}}>
+      <style>{GLOBAL_CSS}</style>
+
+      {/* Toast */}
+      {toast && (
+        <div style={{position:"fixed",top:16,left:"50%",transform:"translateX(-50%)",zIndex:9999,padding:"10px 20px",borderRadius:12,background:toast.type==="success"?"#052e16":toast.type==="error"?"#3B0000":"#1e1b4b",border:`1px solid ${toast.type==="success"?"#22C55E":toast.type==="error"?"#EF4444":"#8B5CF6"}`,color:"#fff",fontSize:13,fontWeight:500,whiteSpace:"nowrap",boxShadow:"0 8px 32px #0008"}}>
+          {toast.msg}
+        </div>
+      )}
+
+      {/* Input File Invisible (Fallback File System Access API) */}
+      <input type="file" id="vba-dir-input" webkitdirectory="" directory="" multiple style={{display:"none"}} onChange={e => {
+        const files = Array.from(e.target.files);
+        if(files.length){ setDirFiles(files); showToast(`📁 Dossier connecté (${files.length} fichiers)`, "success"); }
+      }} />
+
+      {/* Header */}
+      <div style={{padding:"16px 16px 0",flexShrink:0}}>
+        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12}}>
+          <div>
+            <div style={{fontSize:20,fontWeight:800,letterSpacing:"-0.04em"}}>Vibe<span style={{color:"var(--accent)"}}>Audit</span> <span style={{fontSize:11,background:"#1E1040",color:"var(--accent)",padding:"2px 8px",borderRadius:99,verticalAlign:"middle",fontWeight:600}}>Pro v5</span></div>
+            <div style={{fontSize:11,color:"var(--muted)",marginTop:2}}>{project.name||"Aucun projet"} · {sp.tag}</div>
+          </div>
+          <div style={{display:"flex",alignItems:"center",gap:8}}>
+            <div style={{position:"relative"}}>
+              <RadialProgress pct={totPct.pct} size={44} stroke={4} color={totPct.pct===100?"var(--green)":"var(--accent)"}/>
+              <div style={{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",fontSize:10,fontWeight:700,color:totPct.pct===100?"var(--green)":"var(--accent)"}}>{totPct.pct}%</div>
+            </div>
+            {!isConfigured && <div className="vba-pulse" style={{width:8,height:8,borderRadius:4,background:"var(--yellow)"}}/>}
+          </div>
+        </div>
+
+        {/* Status bar */}
+        {!isConfigured && (
+          <div onClick={()=>setTab("settings")} style={{padding:"10px 14px",background:"#1C1500",border:"1px solid #713F12",borderRadius:12,marginBottom:12,cursor:"pointer",display:"flex",alignItems:"center",gap:8}}>
+            <span style={{fontSize:16}}>⚙️</span>
+            <div>
+              <div style={{fontSize:12,fontWeight:600,color:"#FDE68A"}}>Configuration requise</div>
+              <div style={{fontSize:11,color:"#A16207"}}>Appuie ici pour configurer {!project.name?"le projet":"ta clé API"}</div>
+            </div>
+            <span style={{marginLeft:"auto",color:"#FDE68A",fontSize:16}}>›</span>
+          </div>
+        )}
+
+        {/* Tab bar */}
+        <div style={{display:"flex",background:"var(--bg3)",borderRadius:14,padding:4,gap:2}}>
+          {[{id:"audit",icon:"🛡",label:"Audit"},{id:"scan",icon:"🔍",label:"Scanner"},{id:"report",icon:"📊",label:"Rapport"},{id:"settings",icon:"⚙️",label:"Config"}].map(t=>(
+            <button key={t.id} className={`vba-tab-btn${tab===t.id?" active":""}`} onClick={()=>setTab(t.id)}
+              style={{borderRadius:10,background:tab===t.id?"var(--card)":"transparent",boxShadow:tab===t.id?"0 2px 8px #0004":"none"}}>
+              <span>{t.icon}</span><small>{t.label}</small>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="vba-scroll" style={{flex:1,overflowY:"auto",padding:16,paddingBottom:24}}>
+
+        {/* ═══ SETTINGS TAB ══════════════════════════════════════════════ */}
+        {tab==="settings" && (
+          <div className="vba-anim-in">
+            <div style={{fontSize:13,fontWeight:700,color:"var(--muted)",textTransform:"uppercase",letterSpacing:".06em",marginBottom:12}}>Projet</div>
+            <div className="vba-card" style={{marginBottom:12}}>
+              <label style={{fontSize:11,color:"var(--muted)",display:"block",marginBottom:6}}>NOM DU PROJET</label>
+              <input className="vba-input" value={project.name} onChange={e=>setProject(p=>({...p,name:e.target.value}))} placeholder="ex: ORVIA, SIKIA…" style={{marginBottom:10}}/>
+              <label style={{fontSize:11,color:"var(--muted)",display:"block",marginBottom:6}}>STACK TECHNIQUE</label>
+              <select className="vba-input" value={project.stackProfile} onChange={e=>setProject(p=>({...p,stackProfile:e.target.value}))} style={{marginBottom:10}}>
+                {Object.entries(STACKS).map(([k,s])=><option key={k} value={k}>{s.label}</option>)}
+              </select>
+              <label style={{fontSize:11,color:"var(--muted)",display:"block",marginBottom:6}}>IDE</label>
+              <select className="vba-input" value={project.ide} onChange={e=>setProject(p=>({...p,ide:e.target.value}))} style={{marginBottom:10}}>
+                {[["cursor","Cursor"],["claude-code","Claude Code"],["windsurf","Windsurf"],["vscode","VS Code"],["generic","Universel"]].map(([k,l])=><option key={k} value={k}>{l}</option>)}
+              </select>
+              <label style={{fontSize:11,color:"var(--muted)",display:"block",marginBottom:6}}>DONNÉES SENSIBLES</label>
+              <input className="vba-input" value={project.sensitiveData} onChange={e=>setProject(p=>({...p,sensitiveData:e.target.value}))} placeholder="audio, PII, paiements…"/>
+            </div>
+
+            <div style={{fontSize:13,fontWeight:700,color:"var(--muted)",textTransform:"uppercase",letterSpacing:".06em",marginBottom:12,marginTop:20}}>Intelligence IA</div>
+            <div className="vba-card" style={{marginBottom:12}}>
+              <label style={{fontSize:11,color:"var(--muted)",display:"block",marginBottom:8}}>FOURNISSEUR</label>
+              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8,marginBottom:12}}>
+                {Object.entries(PROVIDERS).map(([k,p])=>{
+                  const sel=aiCfg.provider===k;
+                  return(
+                    <button key={k} onClick={()=>setAiCfg(a=>({...a,provider:k,model:p.models[0]}))} style={{padding:"10px 12px",background:sel?"#1E1040":"var(--bg3)",border:`1px solid ${sel?"var(--accent)":"var(--border)"}`,borderRadius:12,cursor:"pointer",display:"flex",alignItems:"center",gap:8,color:"var(--text)"}}>
+                      <span style={{fontSize:18}}>{p.icon}</span>
+                      <div style={{textAlign:"left"}}>
+                        <div style={{fontSize:12,fontWeight:sel?700:400,color:sel?"var(--accent)":"var(--text)"}}>{p.label}</div>
+                        <div style={{fontSize:9,color:"var(--muted)"}}>Ultra-strict</div>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+              <label style={{fontSize:11,color:"var(--muted)",display:"block",marginBottom:6}}>MODÈLE</label>
+              <select className="vba-input" value={aiCfg.model} onChange={e=>setAiCfg(a=>({...a,model:e.target.value}))} style={{marginBottom:10}}>
+                {prov.models.map(m=><option key={m} value={m}>{m}</option>)}
+              </select>
+              <label style={{fontSize:11,color:"var(--muted)",display:"block",marginBottom:6}}>CLÉ API {prov.label.toUpperCase()}</label>
+              <div style={{position:"relative"}}>
+                <input className="vba-input" type={showKey?"text":"password"} value={aiCfg.key} onChange={e=>setAiCfg(a=>({...a,key:e.target.value}))} placeholder={prov.ph} style={{paddingRight:40}}/>
+                <button onClick={()=>setShowKey(v=>!v)} style={{position:"absolute",right:12,top:"50%",transform:"translateY(-50%)",background:"none",border:"none",cursor:"pointer",color:"var(--muted)",fontSize:14}}>
+                  {showKey?"🙈":"👁"}
+                </button>
+              </div>
+              <div style={{marginTop:8,fontSize:11,color:"var(--muted)",display:"flex",alignItems:"center",gap:4}}>
+                🔒 Stockée uniquement dans ton navigateur. Jamais transmise à nos serveurs.
+              </div>
+              {aiCfg.key && <div style={{marginTop:8,padding:"6px 10px",background:"#052e16",border:"1px solid #22C55E",borderRadius:8,fontSize:11,color:"#86EFAC"}}>✅ Clé configurée — IA opérationnelle</div>}
+              
+              {/* GAMIFIED GOD MODE TOGGLE */}
+              <label style={{fontSize:11,color:"var(--muted)",display:"block",marginBottom:6,marginTop:20}}>🔥 GOD MODE (AUTO-PILOTE & SELF-HEALING)</label>
+              <div style={{display:"flex",alignItems:"center",gap:12,padding:"14px",background:aiCfg.godMode?"linear-gradient(45deg, #2a0800, #190033)":"var(--bg3)",border:`1px solid ${aiCfg.godMode?"#EF4444":"var(--border)"}`,borderRadius:12,boxShadow:aiCfg.godMode?"0 0 20px #EF444440":"none",transition:"all 0.3s"}}>
+                <div style={{flex:1}}>
+                  <div style={{fontSize:14,fontWeight:800,color:aiCfg.godMode?"#FCA5A5":"var(--text)",letterSpacing:"0.02em"}}>Remédiation Autonome</div>
+                  <div style={{fontSize:11,color:aiCfg.godMode?"#FCA5A588":"var(--muted)",marginTop:4,lineHeight:1.4}}>L'outil modifie tes fichiers locaux et corrige les failles tout seul (requiert l'API locale).</div>
+                </div>
+                <button onClick={()=>setAiCfg(p=>({...p,godMode:!p.godMode}))} style={{padding:"8px 16px",borderRadius:8,background:aiCfg.godMode?"#EF4444":"var(--border)",color:"#fff",border:"none",cursor:"pointer",fontWeight:800,boxShadow:aiCfg.godMode?"0 4px 12px #EF444488":"none",transition:"all 0.2s"}}>{aiCfg.godMode?"ACTIVÉ":"DÉSACTIVÉ"}</button>
+              </div>
+            </div>
+
+            <div style={{fontSize:13,fontWeight:700,color:"var(--muted)",textTransform:"uppercase",letterSpacing:".06em",marginBottom:12,marginTop:20}}>Conformité</div>
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{display:"flex",flexWrap:"wrap",gap:8}}>
+                {["RGPD","PCI-DSS","HIPAA","SOC2","ISO27001"].map(c=>{const sel=project.compliance?.includes(c);return(
+                  <button key={c} onClick={()=>setProject(p=>({...p,compliance:sel?(p.compliance||[]).filter(x=>x!==c):[...(p.compliance||[]),c]}))}
+                    style={{padding:"6px 12px",borderRadius:99,border:`1px solid ${sel?"var(--accent)":"var(--border)"}`,background:sel?"#1E1040":"transparent",color:sel?"var(--accent)":"var(--muted)",fontSize:12,fontWeight:sel?700:400,cursor:"pointer"}}>
+                    {c}
+                  </button>
+                );})}
+              </div>
+            </div>
+
+            <div style={{fontSize:13,fontWeight:700,color:"var(--muted)",textTransform:"uppercase",letterSpacing:".06em",marginBottom:12,marginTop:20}}>Règles personnelles <span style={{fontSize:10,background:"#1E1040",color:"var(--accent)",padding:"2px 8px",borderRadius:99,fontWeight:600}}>{patterns.length}</span></div>
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{display:"flex",gap:8,marginBottom:8}}>
+                <select className="vba-input" value={newPat.category} onChange={e=>setNewPat(p=>({...p,category:e.target.value}))} style={{width:"auto",flexShrink:0}}>
+                  {["SÉCURITÉ","PERFORMANCE","ARCHITECTURE","EDGE CASES","QUALITÉ"].map(c=><option key={c}>{c}</option>)}
+                </select>
+              </div>
+              <div style={{display:"flex",gap:8,marginBottom:12}}>
+                <input className="vba-input" value={newPat.rule} onChange={e=>setNewPat(p=>({...p,rule:e.target.value}))}
+                  onKeyDown={e=>{if(e.key==="Enter"&&newPat.rule.trim()){setPatterns(prev=>[...prev,{id:Date.now(),...newPat}]);setNewPat(p=>({...p,rule:""}));}}}
+                  placeholder="Ex: Chaque appel externe doit avoir un timeout…"/>
+                <button className="vba-btn vba-btn-primary" onClick={()=>{if(!newPat.rule.trim())return;setPatterns(prev=>[...prev,{id:Date.now(),...newPat}]);setNewPat(p=>({...p,rule:""}));}} style={{flexShrink:0}}>+</button>
+              </div>
+              {patterns.map(p=>(
+                <div key={p.id} style={{display:"flex",gap:8,padding:"8px 10px",background:"var(--bg3)",borderRadius:10,marginBottom:6,alignItems:"flex-start"}}>
+                  <span className="vba-badge" style={{background:"#1E1040",color:"var(--accent)",flexShrink:0}}>{p.category}</span>
+                  <span style={{fontSize:12,flex:1,lineHeight:1.5}}>{p.rule}</span>
+                  <button onClick={()=>setPatterns(prev=>prev.filter(x=>x.id!==p.id))} style={{background:"none",border:"none",cursor:"pointer",color:"var(--muted)",fontSize:16,padding:0,flexShrink:0}}>×</button>
+                </div>
+              ))}
+              {!patterns.length && <p style={{margin:0,fontSize:12,color:"var(--muted)",fontStyle:"italic"}}>Aucune règle — les règles de stack sont actives par défaut.</p>}
+            </div>
+
+            <div style={{marginTop:20}}>
+              <button className="vba-btn vba-btn-danger" onClick={()=>{if(!confirm("Tout réinitialiser ?"))return;setChecks(initCh());setFindings(initArr());setFileBlks(initStr());setBlocNums(initStr());setNotes(initStr());setDates(initStr());setVerdict(null);setActiveId("p0");}}>
+                🗑 Réinitialiser l'audit
+              </button>
+            </div>
+          </div>
+        )}
+
+
+        {/* ═══ AUDIT TAB ══════════════════════════════════════════════════ */}
+        {tab==="audit" && (
+          <div className="vba-anim-in">
+            {/* Phase selector */}
+            <div style={{marginBottom:12}}>
+              {GROUPS.map(g=>{
+                const gPhases=PHASES.filter(p=>p.group===g.id);
+                const gpct=groupPct(g.id);
+                return(
+                  <div key={g.id} style={{marginBottom:4}}>
+                    <div style={{display:"flex",alignItems:"center",gap:8,padding:"6px 8px",color:"var(--muted)",fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>
+                      <span>{GRP_ICONS[g.id]}</span><span style={{flex:1}}>{g.label}</span>
+                      <span style={{color:gpct===100?"var(--green)":"var(--muted)"}}>{gpct}%</span>
+                    </div>
+                    {gPhases.map(p=>{
+                      const st=pSt(p.id);
+                      const fCnt=(findings[p.id]||[]).filter(f=>!f.resolved).length;
+                      const sel=activeId===p.id;
+                      return(
+                        <button key={p.id} className={`vba-phase-btn${sel?" active":""}`} onClick={()=>setActiveId(p.id)}>
+                          <span style={{fontSize:16,flexShrink:0}}>{p.icon}</span>
+                          <span style={{fontSize:12,flex:1,color:sel?"var(--accent)":st==="done"?"var(--green)":"var(--text)",fontWeight:sel?600:400,lineHeight:1.3}}>{p.label}</span>
+                          <div style={{display:"flex",gap:4,alignItems:"center",flexShrink:0}}>
+                            {fCnt>0&&<span className="vba-badge" style={{background:SEV.CRITIQUE.badge+"22",color:SEV.CRITIQUE.badge}}>{fCnt}</span>}
+                            <span style={{fontSize:12,color:st==="done"?"var(--green)":st==="partial"?"var(--yellow)":"var(--muted2)"}}>{st==="done"?"✓":st==="partial"?"◐":"○"}</span>
+                          </div>
+                        </button>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Phase detail */}
+            <div className="vba-card" style={{marginBottom:12,borderLeft:`3px solid ${phase.color||"var(--accent)"}`}}>
+              <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:12}}>
+                <span style={{fontSize:24}}>{phase.icon}</span>
+                <div style={{flex:1}}>
+                  <div style={{fontSize:10,fontWeight:700,color:phase.color||"var(--accent)",textTransform:"uppercase",letterSpacing:".06em"}}>Phase {phase.n} · {phase.tag}</div>
+                  <div style={{fontSize:15,fontWeight:700}}>{phase.label}</div>
+                </div>
+                <div style={{textAlign:"right"}}>
+                  <div style={{fontSize:18,fontWeight:800,color:pPct(phase.id).pct===100?"var(--green)":"var(--accent)"}}>{pPct(phase.id).pct}%</div>
+                  <div style={{fontSize:10,color:"var(--muted)"}}>{pPct(phase.id).done}/{pPct(phase.id).total}</div>
+                </div>
+              </div>
+              <div style={{height:3,background:"var(--bg3)",borderRadius:2,overflow:"hidden",marginBottom:12}}>
+                <div style={{height:"100%",width:`${pPct(phase.id).pct}%`,background:pPct(phase.id).pct===100?"var(--green)":"var(--accent)",borderRadius:2,transition:"width .4s"}}/>
+              </div>
+              <div style={{fontSize:12,color:"var(--muted)",lineHeight:1.6,marginBottom:4}}><strong style={{color:"var(--text)"}}>Quoi :</strong> {phase.what}</div>
+              <div style={{fontSize:12,color:"var(--muted)",lineHeight:1.6}}><strong style={{color:"var(--text)"}}>Comment :</strong> {phase.how}</div>
+            </div>
+
+            {/* Fichiers du bloc */}
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{fontSize:11,fontWeight:700,color:"var(--muted)",textTransform:"uppercase",letterSpacing:".06em",marginBottom:8}}>📁 Fichiers à auditer</div>
+              <div style={{display:"flex",gap:8,marginBottom:8}}>
+                <input className="vba-input" value={blocNums[phase.id]||""} onChange={e=>setBlocNums(p=>({...p,[phase.id]:e.target.value}))} placeholder="Bloc n°" style={{width:70,textAlign:"center",fontFamily:"monospace",flexShrink:0}}/>
+                <button className={`vba-btn ${dirFiles?"vba-btn-primary":"vba-btn-ghost"}`} style={{fontSize:12,flexShrink:0}}
+                  onClick={()=>document.getElementById('vba-dir-input').click()}>{dirFiles?"📁 Connecté":"📁 Connecter"}</button>
+              </div>
+              <textarea className="vba-input" value={fileBlks[phase.id]||""} onChange={e=>setFileBlks(p=>({...p,[phase.id]:e.target.value}))}
+                placeholder={"src/app/api/auth/route.ts\nsrc/lib/supabase.ts\nsrc/hooks/useAuth.ts"}
+                rows={3} style={{fontFamily:"monospace",fontSize:11,resize:"vertical"}}/>
+            </div>
+
+            {/* Prompt & Auto-Audit */}
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:10}}>
+                <button className={`vba-btn vba-btn-primary${autoRunning?" vba-pulse":""}`} onClick={runAutoAudit} disabled={autoRunning} style={{flex:1,justifyContent:"center"}}>
+                  {autoRunning?"⏳ Analyse en cours…":"🚀 Auto-Audit IA"}
+                </button>
+                <button className="vba-btn vba-btn-ghost" style={{fontSize:12}} onClick={()=>clip(buildPrompt(phase,project,loadedCode[phase.id]||fileBlks[phase.id],blocNums[phase.id],patterns,bizCtx,findings),phase.id)}>
+                  {copied===phase.id?"✓":"📋"} Copier prompt
+                </button>
+              </div>
+              <div style={{display:"flex",justifyContent:"space-between",fontSize:10,color:"var(--muted)"}}>
+                <span>1. Auto-Audit → IA lit tes fichiers directement</span>
+                <span>ou</span>
+                <span>Copie → colle dans Antigravity</span>
+              </div>
+            </div>
+
+            {/* Checklist */}
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:12}}>
+                <div style={{fontSize:13,fontWeight:600}}>Checklist de validation</div>
+                {pPct(phase.id).done<pPct(phase.id).total&&(
+                  <button className="vba-btn vba-btn-ghost" style={{fontSize:11}} onClick={()=>{setChecks(p=>({...p,[phase.id]:p[phase.id].map(()=>true)}));if(!dates[phase.id])setDates(d=>({...d,[phase.id]:new Date().toISOString()}));}}>Tout ✓</button>
+                )}
+              </div>
+              {phase.checks.map((c,i)=>(
+                <div key={i} className="vba-check-item" onClick={()=>toggleCheck(phase.id,i)}>
+                  <div style={{width:20,height:20,borderRadius:10,border:`2px solid ${checks[phase.id]?.[i]?"var(--green)":"var(--border)"}`,background:checks[phase.id]?.[i]?"var(--green)":"transparent",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,marginTop:1,transition:"all .15s"}}>
+                    {checks[phase.id]?.[i]&&<svg width="9" height="7" viewBox="0 0 9 7" fill="none"><path d="M1 3.5L3.5 6L8 1" stroke="#000" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>}
+                  </div>
+                  <span style={{fontSize:12,color:checks[phase.id]?.[i]?"var(--muted)":"var(--text)",textDecoration:checks[phase.id]?.[i]?"line-through":"none",lineHeight:1.5}}>{c}</span>
+                </div>
+              ))}
+              {pPct(phase.id).pct===100&&(
+                <div style={{marginTop:12,padding:"8px 12px",background:"#052e16",border:"1px solid var(--green)",borderRadius:10,fontSize:12,color:"#86EFAC",fontWeight:500}}>
+                  ✅ Phase complète{nextP&&<> · <button onClick={()=>setActiveId(nextP.id)} style={{background:"none",border:"none",cursor:"pointer",color:"#86EFAC",textDecoration:"underline",fontSize:12}}>Phase suivante →</button></>}
+                </div>
+              )}
+            </div>
+
+            {/* Notes IA */}
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{fontSize:11,fontWeight:700,color:"var(--muted)",textTransform:"uppercase",letterSpacing:".06em",marginBottom:8}}>📝 Notes & Résultats IA</div>
+              <textarea className="vba-input" value={notes[phase.id]||""} onChange={e=>setNotes(n=>({...n,[phase.id]:e.target.value}))}
+                placeholder="Les résultats IA apparaîtront ici automatiquement…" rows={5} style={{fontFamily:"monospace",fontSize:11,resize:"vertical"}}/>
+            </div>
+
+            {/* Findings */}
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{fontSize:13,fontWeight:600,marginBottom:12}}>🔍 Findings <span style={{fontSize:11,color:"var(--muted)"}}>({(findings[phase.id]||[]).length})</span></div>
+              <div style={{display:"flex",gap:8,marginBottom:10}}>
+                <select className="vba-input" value={newF.sev} onChange={e=>setNewF(f=>({...f,sev:e.target.value}))} style={{width:110,flexShrink:0}}>
+                  {SEVS.map(s=><option key={s}>{s}</option>)}
+                </select>
+                <input className="vba-input" value={newF.txt} onChange={e=>setNewF(f=>({...f,txt:e.target.value}))}
+                  onKeyDown={e=>{if(e.key==="Enter")addFinding(phase.id);}}
+                  placeholder="Décrire la vulnérabilité…"/>
+                <button className="vba-btn vba-btn-primary" onClick={()=>addFinding(phase.id)} style={{flexShrink:0}}>+</button>
+              </div>
+              {(findings[phase.id]||[]).map(f=>(
+                <div key={f.id} style={{padding:"10px 12px",background:SEV[f.severity]?.bg||"var(--bg3)",border:`1px solid ${SEV[f.severity]?.border||"var(--border)"}`,borderRadius:10,marginBottom:8}}>
+                  <div style={{display:"flex",alignItems:"flex-start",gap:8,marginBottom:6}}>
+                    <span className="vba-badge" style={{background:SEV[f.severity]?.badge+"33",color:SEV[f.severity]?.badge,flexShrink:0}}>{f.severity}</span>
+                    <span style={{fontSize:12,color:f.resolved?"var(--muted)":"var(--text)",textDecoration:f.resolved?"line-through":"none",flex:1,lineHeight:1.5}}>{f.text}</span>
+                  </div>
+                  <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
+                    <button className="vba-btn vba-btn-ghost" style={{fontSize:10,padding:"3px 8px"}} onClick={()=>setFindings(prev=>({...prev,[phase.id]:(prev[phase.id]||[]).map(x=>x.id===f.id?{...x,resolved:!x.resolved}:x)}))}>
+                      {f.resolved?"↩ Réouvrir":"✓ Résolu"}
+                    </button>
+                    {!fixState[f.id]&&<button className="vba-btn vba-btn-ghost" style={{fontSize:10,padding:"3px 8px",color:"var(--accent)",borderColor:"var(--accent)"}} onClick={()=>generateFix(phase.id,f)}>⚡ Fix IA</button>}
+                    <button className="vba-btn vba-btn-ghost" style={{fontSize:10,padding:"3px 8px",color:"var(--red)"}} onClick={()=>setFindings(prev=>({...prev,[phase.id]:(prev[phase.id]||[]).filter(x=>x.id!==f.id)}))}>🗑</button>
+                  </div>
+                  {fixState[f.id]?.loading&&<div style={{marginTop:8,fontSize:11,color:"var(--muted)"}} className="vba-matrix-anim">⏳ {aiCfg.godMode?"Génération & Application du correctif en cours...":"Génération du correctif..."}</div>}
+                  {fixState[f.id]?.code&&(
+                    <div style={{marginTop:8,padding:"10px",background:"#0D1F0D",border:"1px solid #22C55E",borderRadius:8}}>
+                      <div style={{fontSize:11,color:"#86EFAC",marginBottom:4}}>✅ {fixState[f.id].explanation} (confiance: {Math.round((fixState[f.id].confidence||0.9)*100)}%)</div>
+                      <div style={{fontSize:10,color:"#668",marginBottom:8}}>Fichier ciblé: {fixState[f.id].filePath||"Inconnu"}</div>
+                      <pre style={{margin:0,fontSize:10,color:"#E2E8F0",fontFamily:"monospace",whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:150,overflowY:"auto"}}>{fixState[f.id].code}</pre>
+                      <div style={{display:"flex",gap:8,marginTop:8}}>
+                        <button className="vba-btn vba-btn-ghost" style={{fontSize:10}} onClick={()=>clip(fixState[f.id].code,"fix"+f.id)}>📋 Copier</button>
+                        <button className="vba-btn vba-btn-primary" style={{fontSize:10,background:"var(--green)",color:"#000"}} onClick={()=>applyFix(f.id, fixState[f.id].code, fixState[f.id].filePath)}>
+                          {fixState[f.id].applying?"Écriture...":"💾 Écrire dans le fichier (Self-Heal)"}
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                  {fixState[f.id]?.error&&<div style={{marginTop:8,fontSize:11,color:"var(--red)"}}>❌ Erreur de génération. Réessaie.</div>}
+                </div>
+              ))}
+              {!(findings[phase.id]||[]).length&&<p style={{margin:0,fontSize:12,color:"var(--muted)",fontStyle:"italic",textAlign:"center",padding:"12px 0"}}>Aucun finding — Lance l'Auto-Audit ou ajoute manuellement.</p>}
+            </div>
+
+            {/* Navigation */}
+            <div style={{display:"flex",gap:8}}>
+              {prevP&&<button className="vba-btn vba-btn-ghost" style={{flex:1,justifyContent:"center"}} onClick={()=>setActiveId(prevP.id)}>← {prevP.label.slice(0,20)}</button>}
+              {nextP&&<button className="vba-btn vba-btn-primary" style={{flex:1,justifyContent:"center"}} onClick={()=>setActiveId(nextP.id)}>{nextP.label.slice(0,20)} →</button>}
+            </div>
+          </div>
+        )}
+
+
+        {/* ═══ SCANNER TAB ════════════════════════════════════════════════ */}
+        {tab==="scan" && (
+          <div className="vba-anim-in">
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{fontSize:15,fontWeight:700,marginBottom:4}}>🔍 Scanner Automatique</div>
+              <div style={{fontSize:12,color:"var(--muted)",lineHeight:1.6,marginBottom:12}}>Connecte ton dossier projet. Le scanner va découvrir <strong style={{color:"var(--text)"}}>tous les fichiers</strong> (.ts, .tsx, .js, .jsx, .py…), les grouper en blocs de 4, et appliquer le prompt sécurité strict sur chacun. Couverture garantie à 100%.</div>
+              <div style={{display:"flex",gap:8,marginBottom:12}}>
+                <button className={`vba-btn ${dirFiles?"vba-btn-primary":"vba-btn-ghost"}`} style={{flex:1,justifyContent:"center"}}
+                  onClick={()=>document.getElementById('vba-dir-input').click()}>
+                  {dirFiles?"📁 Dossier connecté ✓":"📁 Connecter un dossier"}
+                </button>
+                <button className={`vba-btn ${scanning?"vba-btn-ghost":"vba-btn-primary"}`} onClick={scanDirectory} disabled={scanning} style={{flex:1,justifyContent:"center",overflow:"hidden",position:"relative"}}>
+                  {scanning?<span className="vba-matrix-anim">▓▒░ ANALYSE EN COURS ░▒▓</span>:"🚀 Lancer le scan"}
+                </button>
+              </div>
+              {scanning && (
+                <div style={{background:"#001100",border:"1px solid #004400",borderRadius:8,padding:12,marginTop:12,textAlign:"center"}}>
+                  <div className="vba-matrix-anim" style={{fontSize:14,fontWeight:700,marginBottom:6}}>{scanProgress.current ? `Décryptage: ${scanProgress.current.split(",").length} fichiers...` : "Initialisation du moteur IA..."}</div>
+                  <div style={{fontSize:11,color:"#22C55E88"}}>Bloc {scanProgress.done} / {scanProgress.total}</div>
+                </div>
+              )}
+              {!isConfigured&&<div style={{padding:"8px 12px",background:"#1C1500",border:"1px solid #713F12",borderRadius:10,fontSize:12,color:"#FDE68A"}}>⚠️ Configure d'abord ta clé API dans l'onglet <strong>Config</strong></div>}
+            </div>
+
+            {/* Progression */}
+            {scanning&&(
+              <div className="vba-card" style={{marginBottom:12}}>
+                <div style={{display:"flex",justifyContent:"space-between",marginBottom:8}}>
+                  <span style={{fontSize:12,fontWeight:600}}>Progression</span>
+                  <span style={{fontSize:12,color:"var(--accent)",fontWeight:700}}>{scanProgress.done}/{scanProgress.total} blocs</span>
+                </div>
+                <div style={{height:6,background:"var(--bg3)",borderRadius:3,overflow:"hidden",marginBottom:8}}>
+                  <div style={{height:"100%",width:`${scanProgress.total?Math.round(scanProgress.done/scanProgress.total*100):0}%`,background:"var(--accent)",borderRadius:3,transition:"width .4s"}}/>
+                </div>
+                {scanProgress.current&&<div style={{fontSize:10,color:"var(--muted)",fontFamily:"monospace",wordBreak:"break-all"}}>→ {scanProgress.current}</div>}
+              </div>
+            )}
+
+            {/* Stats fichiers */}
+            {scanFiles.length>0&&(
+              <div className="vba-card" style={{marginBottom:12}}>
+                <div style={{display:"flex",justifyContent:"space-between",marginBottom:8}}>
+                  <span style={{fontSize:13,fontWeight:600}}>Fichiers découverts</span>
+                  <span className="vba-badge" style={{background:"#1E1040",color:"var(--accent)"}}>{scanFiles.length}</span>
+                </div>
+                <div style={{maxHeight:120,overflowY:"auto"}} className="vba-scroll">
+                  {scanFiles.map((f,i)=>(
+                    <div key={i} style={{fontSize:10,color:"var(--muted)",fontFamily:"monospace",padding:"2px 0",borderTop:i>0?"1px solid var(--border)":"none"}}>{f}</div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Résultats scan */}
+            {scanResults.length>0&&(
+              <div>
+                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
+                  <div style={{fontSize:13,fontWeight:700}}>Résultats</div>
+                  <div style={{display:"flex",gap:6}}>
+                    <span className="vba-badge" style={{background:"#052e16",color:"var(--green)"}}>{scanResults.filter(r=>r.safe).length} safe</span>
+                    <span className="vba-badge" style={{background:"#3B0000",color:"var(--red)"}}>{scanResults.filter(r=>!r.safe&&!r.error).length} failles</span>
+                  </div>
+                </div>
+                {scanResults.map((r,i)=>(
+                  <div key={i} className="vba-card" style={{marginBottom:8,borderLeft:`3px solid ${r.error?"var(--yellow)":r.safe?"var(--green)":"var(--red)"}`}}>
+                    <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:r.safe?0:8}}>
+                      <span style={{fontSize:14}}>{r.error?"⚠️":r.safe?"✅":"🔴"}</span>
+                      <div style={{flex:1}}>
+                        <div style={{fontSize:11,color:"var(--muted)",fontFamily:"monospace"}}>{r.block.join(", ")}</div>
+                      </div>
+                      <button className="vba-btn vba-btn-ghost" style={{fontSize:10,padding:"2px 8px"}} onClick={()=>clip(r.raw,"scan"+i)}>📋</button>
+                    </div>
+                    {!r.safe&&<pre style={{margin:0,fontSize:11,color:"var(--text)",whiteSpace:"pre-wrap",wordBreak:"break-word",lineHeight:1.6,fontFamily:"monospace",maxHeight:200,overflowY:"auto"}} className="vba-scroll">{r.raw}</pre>}
+                  </div>
+                ))}
+                <button className="vba-btn vba-btn-ghost" style={{width:"100%",justifyContent:"center",marginTop:8}} onClick={()=>{const blob=new Blob([JSON.stringify({date:new Date().toISOString(),project:project.name,files:scanFiles.length,results:scanResults},null,2)],{type:"application/json"});const a=Object.assign(document.createElement("a"),{href:URL.createObjectURL(blob),download:`scan-${project.name||"audit"}-${new Date().toISOString().slice(0,10)}.json`});a.click();}}>
+                  ⬇ Exporter le rapport JSON
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* ═══ REPORT TAB ════════════════════════════════════════════════ */}
+        {tab==="report" && (
+          <div className="vba-anim-in">
+            {/* Score global */}
+            <div className="vba-card" style={{marginBottom:12,textAlign:"center",padding:"24px 16px"}}>
+              <div style={{display:"flex",justifyContent:"center",marginBottom:12,position:"relative"}}>
+                <RadialProgress pct={totPct.pct} size={100} stroke={8} color={totPct.pct===100?"var(--green)":totPct.pct>=70?"var(--accent)":"var(--red)"}/>
+                <div style={{position:"absolute",inset:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"}}>
+                  <div style={{fontSize:24,fontWeight:800,color:totPct.pct===100?"var(--green)":"var(--text)"}}>{totPct.pct}%</div>
+                  <div style={{fontSize:10,color:"var(--muted)"}}>Complété</div>
+                </div>
+              </div>
+              <div style={{fontSize:15,fontWeight:700,marginBottom:4}}>{project.name||"Projet"} · {sp.label}</div>
+              <div style={{fontSize:12,color:"var(--muted)",marginBottom:16}}>{totPct.done}/{totPct.total} vérifications · {allF.length} findings total</div>
+              <div style={{display:"flex",gap:8,justifyContent:"center",flexWrap:"wrap",marginBottom:16}}>
+                {["pass","warn","blocked"].map(v=>(
+                  <button key={v} onClick={()=>setVerdict(v)}
+                    style={{padding:"8px 16px",borderRadius:99,border:`2px solid ${verdict===v?(v==="pass"?"var(--green)":v==="warn"?"var(--yellow)":"var(--red)"):"var(--border)"}`,background:verdict===v?(v==="pass"?"#052e16":v==="warn"?"#1C1500":"#3B0000"):"transparent",color:verdict===v?(v==="pass"?"var(--green)":v==="warn"?"var(--yellow)":"var(--red)"):"var(--muted)",fontSize:12,fontWeight:600,cursor:"pointer"}}>
+                    {v==="pass"?"🟢 PRÊT":v==="warn"?"🟡 AVEC RÉSERVES":"🔴 NON PRÊT"}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Sévérités */}
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{fontSize:13,fontWeight:600,marginBottom:10}}>Résumé des findings</div>
+              {SEVS.map(s=>(
+                <div key={s} style={{display:"flex",alignItems:"center",gap:10,padding:"6px 0",borderTop:"1px solid var(--border)"}}>
+                  <span className="vba-badge" style={{background:SEV[s]?.bg,color:SEV[s]?.badge,width:70,justifyContent:"center"}}>{s}</span>
+                  <div style={{flex:1,height:6,background:"var(--bg3)",borderRadius:3,overflow:"hidden"}}>
+                    <div style={{height:"100%",width:`${allF.length?Math.round(sevC[s]/allF.length*100):0}%`,background:SEV[s]?.badge,borderRadius:3,transition:"width .4s"}}/>
+                  </div>
+                  <span style={{fontSize:13,fontWeight:700,color:SEV[s]?.badge,width:24,textAlign:"right"}}>{sevC[s]}</span>
+                </div>
+              ))}
+            </div>
+
+            {/* Phases résumé */}
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{fontSize:13,fontWeight:600,marginBottom:10}}>Avancement par phase</div>
+              {PHASES.map(p=>{const {pct}=pPct(p.id); return(
+                <div key={p.id} style={{display:"flex",alignItems:"center",gap:8,padding:"5px 0",borderTop:"1px solid var(--border)"}}>
+                  <span style={{fontSize:12}}>{p.icon}</span>
+                  <span style={{fontSize:11,flex:1,color:"var(--text)"}}>{p.label}</span>
+                  <div style={{width:50,height:4,background:"var(--bg3)",borderRadius:2,overflow:"hidden"}}>
+                    <div style={{height:"100%",width:`${pct}%`,background:pct===100?"var(--green)":"var(--accent)",borderRadius:2}}/>
+                  </div>
+                  <span style={{fontSize:11,color:pct===100?"var(--green)":"var(--muted)",width:30,textAlign:"right"}}>{pct}%</span>
+                </div>
+              );})}
+            </div>
+
+            {/* Actions export */}
+            <div className="vba-card" style={{marginBottom:12}}>
+              <div style={{fontSize:13,fontWeight:600,marginBottom:10}}>Export & Historique</div>
+              <div style={{display:"flex",flexDirection:"column",gap:8}}>
+                <button className="vba-btn vba-btn-primary" style={{justifyContent:"center"}} onClick={()=>{const blob=new Blob([buildReport()],{type:"text/markdown"});const a=Object.assign(document.createElement("a"),{href:URL.createObjectURL(blob),download:`rapport-${project.name||"audit"}-${new Date().toISOString().slice(0,10)}.md`});a.click();}}>⬇ Télécharger le rapport Markdown</button>
+                <button className="vba-btn vba-btn-ghost" style={{justifyContent:"center"}} onClick={saveSnap}>📸 Sauvegarder un snapshot ({history.length})</button>
+                <button className="vba-btn vba-btn-ghost" style={{justifyContent:"center"}} onClick={()=>clip(buildReport(),"report")}>📋 Copier le rapport</button>
+              </div>
+            </div>
+
+            {/* Historique */}
+            {history.length>0&&(
+              <div className="vba-card">
+                <div style={{fontSize:13,fontWeight:600,marginBottom:10}}>📈 Historique ({history.length})</div>
+                {history.slice(-5).reverse().map((snap,i)=>(
+                  <div key={i} style={{display:"flex",gap:10,padding:"8px 0",borderTop:"1px solid var(--border)",alignItems:"center"}}>
+                    <div style={{flex:1}}>
+                      <div style={{fontSize:12,fontWeight:500}}>{snap.project}</div>
+                      <div style={{fontSize:10,color:"var(--muted)"}}>{new Date(snap.date).toLocaleDateString("fr-FR")} · {snap.stack}</div>
+                    </div>
+                    <div style={{fontSize:18,fontWeight:800,color:snap.pct===100?"var(--green)":snap.pct>=70?"var(--accent)":"var(--red)"}}>{snap.pct}%</div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+      </div>
+    </div>
+  );
+}