feat(dashboard): SOC workflow overhaul — sidebar nav, doc tooltips, full-width layout

- base.html: collapsible sidebar navigation, doc tooltip system, JS helpers
  (fmtNum, fmtPct, fmtDuration, ecGrid, buildTable, docHTML)
- overview.html: SOC command center with stacked timeline, live alerts,
  campaigns panel, browser donut, 6 KPIs
- detections.html: threat color dots, raw score column, click-to-navigate rows
- network.html: JA4 rotation, brute-force, persistent threats tables, 6 KPIs
- ip_detail.html: ASN/country KPIs, AE/XGB/campaign columns, enriched features
- scores/traffic/features/models/classify: page_title blocks + doc tooltips
- api.py: 9 new endpoints (campaigns, brute-force, ja4-rotation, recurrence,
  cascade, alerts, timeline-detail, ua-rotation)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

services/dashboard/backend/templates/detections.html

@@ -1,61 +1,73 @@
 {% extends "base.html" %}
 {% block title %}JA4 SOC — Détections{% endblock %}
+{% block page_title %}
+    Détections d'anomalies
+    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+        <h4>Table des détections</h4>
+        <p>Toutes les sessions classées comme anomaliques par l'ensemble ML triple-voix (EIF + Autoencoder + XGBoost). Inclut les bots connus identifiés par dictionnaire.</p>
+        <p><strong>Workflow :</strong> Filtrez par threat level → triez par score → cliquez sur une IP pour l'investiguer → classifiez via le bouton rapide.</p>
+        <p class="doc-source">Source : ml_detected_anomalies (30 derniers jours)</p>
+    </div></span>
+{% endblock %}
 {% block content %}
-<div class="space-y-4">
-    <!-- Summary charts row -->
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        <div class="bg-gray-900 rounded-xl p-4 border border-gray-800">
-            <h3 class="text-xs font-medium text-gray-500 mb-2">Détections par threat level</h3>
-            <div id="det-threat-chart" style="height:160px"></div>
+<div class="space-y-3">
+    <!-- Summary charts -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
+        <div class="section-card">
+            <div class="section-header"><span class="section-title">Par threat level</span></div>
+            <div class="p-3"><div id="det-threat-chart" style="height:140px"></div></div>
         </div>
-        <div class="bg-gray-900 rounded-xl p-4 border border-gray-800">
-            <h3 class="text-xs font-medium text-gray-500 mb-2">Top 5 raisons de détection</h3>
-            <div id="det-reason-chart" style="height:160px"></div>
+        <div class="section-card">
+            <div class="section-header"><span class="section-title">Top raisons</span></div>
+            <div class="p-3"><div id="det-reason-chart" style="height:140px"></div></div>
         </div>
-        <div class="bg-gray-900 rounded-xl p-4 border border-gray-800">
-            <h3 class="text-xs font-medium text-gray-500 mb-2">Top 5 ASN détectés</h3>
-            <div id="det-asn-chart" style="height:160px"></div>
+        <div class="section-card">
+            <div class="section-header"><span class="section-title">Top ASN détectés</span></div>
+            <div class="p-3"><div id="det-asn-chart" style="height:140px"></div></div>
         </div>
     </div>
+    <!-- Filters -->
     <div class="flex items-center gap-3 flex-wrap">
-        <h2 class="text-lg font-semibold text-white">Anomalies détectées</h2>
         <div class="flex gap-1.5" id="threat-filters">
             <button class="filter-btn active" data-filter="">Tous</button>
             <button class="filter-btn" data-filter="CRITICAL">Critical</button>
             <button class="filter-btn" data-filter="HIGH">High</button>
             <button class="filter-btn" data-filter="MEDIUM">Medium</button>
             <button class="filter-btn" data-filter="KNOWN_BOT">Known Bot</button>
-            <button class="filter-btn" data-filter="ANUBIS_DENY">Anubis Deny</button>
+            <button class="filter-btn" data-filter="ANUBIS_DENY">Anubis</button>
         </div>
         <div class="flex-1"></div>
-        <input type="text" id="search-input" placeholder="Rechercher IP, host..."
-               class="px-3 py-1.5 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-300 w-64 focus:border-brand-500 focus:outline-none">
+        <input type="text" id="search-input" placeholder="Rechercher IP, host…"
+               class="px-3 py-1.5 bg-gray-900 border border-gray-800 rounded-lg text-sm text-gray-300 w-64 focus:border-brand-500 focus:outline-none">
     </div>
     <div id="active-filters" class="flex gap-2 flex-wrap"></div>
-    <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
-        <div class="overflow-x-auto max-h-[70vh] overflow-y-auto">
-            <table class="data-table">
+    <!-- Table -->
+    <div class="section-card overflow-hidden">
+        <div class="overflow-x-auto" style="max-height:calc(100vh - 340px); overflow-y:auto">
+            <table class="data-table" id="det-table">
                 <thead><tr>
+                    <th style="width:16px"></th>
                     <th class="cursor-pointer" data-sort="detected_at">Date ↕</th>
                     <th>IP</th>
                     <th class="cursor-pointer" data-sort="anomaly_score">Score ↕</th>
+                    <th>Raw</th>
                     <th>Threat</th>
                     <th>JA4</th>
                     <th>Host</th>
-                    <th>Hits</th>
+                    <th class="cursor-pointer" data-sort="hits">Hits ↕</th>
                     <th>ASN</th>
                     <th>Pays</th>
-                    <th>Récurrence</th>
-                    <th>Raison</th>
+                    <th>Bot</th>
+                    <th>Réc.</th>
                 </tr></thead>
                 <tbody id="detections-body"></tbody>
             </table>
         </div>
-        <div class="flex items-center justify-between px-4 py-3 border-t border-gray-800">
+        <div class="flex items-center justify-between px-4 py-2.5 border-t border-gray-800">
             <span class="text-xs text-gray-500" id="det-info">—</span>
             <div class="flex gap-2">
-                <button id="prev-btn" class="px-3 py-1 bg-gray-800 rounded text-sm text-gray-400 hover:text-white disabled:opacity-30">&larr; Précédent</button>
-                <button id="next-btn" class="px-3 py-1 bg-gray-800 rounded text-sm text-gray-400 hover:text-white disabled:opacity-30">Suivant &rarr;</button>
+                <button id="prev-btn" class="px-3 py-1 bg-gray-800 rounded text-xs text-gray-400 hover:text-white disabled:opacity-30">&larr; Précédent</button>
+                <button id="next-btn" class="px-3 py-1 bg-gray-800 rounded text-xs text-gray-400 hover:text-white disabled:opacity-30">Suivant &rarr;</button>
             </div>
         </div>
     </div>
@@ -63,13 +75,12 @@
 {% endblock %}
 {% block scripts %}
 <script>
+const THREAT_COLORS = {CRITICAL:'#ef4444',HIGH:'#f97316',MEDIUM:'#eab308',NORMAL:'#6b7280',KNOWN_BOT:'#3b82f6',ANUBIS_DENY:'#dc2626'};
 let dPage=1, dSort='detected_at', dOrder='DESC', dThreat='', dSearch='';
 const urlParams = new URLSearchParams(window.location.search);
-let dASN=urlParams.get('asn_org')||'',
-    dCountry=urlParams.get('country_code')||'',
-    dJA4=urlParams.get('ja4')||'',
-    dBotName=urlParams.get('bot_name')||'';
-if(urlParams.get('threat_level')) dThreat=urlParams.get('threat_level');
+let dASN=urlParams.get('asn_org')||'', dCountry=urlParams.get('country_code')||'',
+    dJA4=urlParams.get('ja4')||'', dBotName=urlParams.get('bot_name')||'';
+if(urlParams.get('threat_level')) { dThreat=urlParams.get('threat_level'); document.querySelectorAll('[data-filter]').forEach(b=>{b.classList.remove('active');if(b.dataset.filter===dThreat)b.classList.add('active');}); }
 if(urlParams.get('search')) dSearch=urlParams.get('search');
 
 function renderActiveFilters() {
@@ -81,10 +92,10 @@ function renderActiveFilters() {
     if(dBotName) filters.push({label:'Bot: '+dBotName, clear:()=>{dBotName='';renderActiveFilters();loadDetections();}});
     el.innerHTML = filters.map((f,i) =>
         `<span class="inline-flex items-center gap-1 px-2 py-1 bg-brand-500/20 text-brand-400 rounded-lg text-xs">
-            ${f.label} <button onclick="window._clearFilter${i}()" class="hover:text-white">✕</button>
-        </span>`).join('');
-    filters.forEach((f,i) => { window['_clearFilter'+i] = f.clear; });
+            ${escapeHtml(f.label)} <button onclick="window._cf${i}()" class="hover:text-white">✕</button></span>`).join('');
+    filters.forEach((f,i) => { window['_cf'+i] = f.clear; });
 }
+
 async function loadDetections() {
     const params = new URLSearchParams({page:dPage,per_page:50,sort:dSort,order:dOrder});
     if(dThreat) params.set('threat_level',dThreat);
@@ -97,25 +108,31 @@ async function loadDetections() {
         const r = await fetch('/api/detections?'+params);
         const d = await r.json();
         const tbody = document.getElementById('detections-body');
-        tbody.innerHTML = (d.data||[]).map(row => `<tr>
-            <td class="text-xs whitespace-nowrap">${row.detected_at||''}</td>
-            <td class="whitespace-nowrap">${fmtIP(row.src_ip)}</td>
-            <td>${fmtScore(row.anomaly_score)}</td>
-            <td>${fmtThreatLink(row.threat_level)}</td>
-            <td class="text-xs font-mono max-w-[120px] truncate">${fmtJA4(row.ja4)}</td>
-            <td class="text-xs max-w-[150px] truncate" title="${row.host||''}">${row.host||''}</td>
-            <td>${row.hits||0}</td>
-            <td class="text-xs max-w-[150px] truncate">${fmtASN(row.asn_org)}</td>
-            <td>${fmtCountry(row.country_code)}</td>
-            <td>${row.recurrence||0}</td>
-            <td class="text-xs max-w-[200px] truncate" title="${row.reason||''}">${row.reason||''}</td>
-        </tr>`).join('') || '<tr><td colspan="11" class="text-center text-gray-500 py-8">Aucune détection</td></tr>';
+        tbody.innerHTML = (d.data||[]).map((row, idx) => {
+            const ip = String(row.src_ip||'').replace('::ffff:','');
+            return `<tr onclick="window.location='/ip/${encodeURIComponent(ip)}'" class="group">
+                <td class="text-center"><span class="w-2 h-2 rounded-full inline-block" style="background:${THREAT_COLORS[row.threat_level]||'#6b7280'}"></span></td>
+                <td class="text-[11px] whitespace-nowrap text-gray-400">${(row.detected_at||'').substring(0,16)}</td>
+                <td class="whitespace-nowrap">${fmtIP(row.src_ip)}</td>
+                <td>${fmtScore(row.anomaly_score)}</td>
+                <td class="font-mono text-[11px] text-gray-400">${parseFloat(row.raw_anomaly_score||0).toFixed(4)}</td>
+                <td>${threatBadge(row.threat_level)}</td>
+                <td>${fmtJA4(row.ja4)}</td>
+                <td class="text-xs max-w-[120px] truncate" title="${escapeHtml(row.host||'')}">${escapeHtml(row.host||'')}</td>
+                <td class="font-mono text-xs">${row.hits||0}</td>
+                <td class="text-xs max-w-[120px] truncate">${fmtASN(row.asn_org)}</td>
+                <td>${fmtCountry(row.country_code)}</td>
+                <td class="text-xs">${row.bot_name ? fmtBotName(row.bot_name) : ''}</td>
+                <td class="text-xs text-center">${row.recurrence||0}</td>
+            </tr>`;
+        }).join('') || '<tr><td colspan="13" class="text-center text-gray-500 py-8">Aucune détection</td></tr>';
         const total = d.total||0;
-        document.getElementById('det-info').textContent = `${total} résultats — page ${dPage}/${Math.max(1,Math.ceil(total/50))}`;
+        document.getElementById('det-info').textContent = `${total.toLocaleString()} résultats — page ${dPage}/${Math.max(1,Math.ceil(total/50))}`;
         document.getElementById('prev-btn').disabled = dPage <= 1;
         document.getElementById('next-btn').disabled = dPage * 50 >= total;
     } catch(e) { console.error(e); }
 }
+
 document.getElementById('prev-btn').onclick = () => { if(dPage>1){dPage--;loadDetections();} };
 document.getElementById('next-btn').onclick = () => { dPage++;loadDetections(); };
 document.querySelectorAll('[data-sort]').forEach(th => th.onclick = () => {
@@ -135,27 +152,21 @@ document.getElementById('search-input').oninput = (e) => {
 };
 loadDetections();
 renderActiveFilters();
-// Summary mini-charts (loaded once)
+
 async function loadDetSummary() {
     try {
         const r = await fetch('/api/detections?per_page=500');
         const d = await r.json();
         const rows = d.data || [];
-        // Threat distribution
-        const threatCounts = {};
-        const reasonCounts = {};
-        const asnCounts = {};
+        const threatCounts={}, reasonCounts={}, asnCounts={};
         rows.forEach(row => {
             threatCounts[row.threat_level] = (threatCounts[row.threat_level]||0)+1;
             if (row.reason) { const short = row.reason.substring(0,40); reasonCounts[short] = (reasonCounts[short]||0)+1; }
             if (row.asn_org) asnCounts[row.asn_org] = (asnCounts[row.asn_org]||0)+1;
         });
-        const THREAT_COLORS = {CRITICAL:'#ef4444',HIGH:'#f97316',MEDIUM:'#eab308',NORMAL:'#6b7280',KNOWN_BOT:'#3b82f6',ANUBIS_DENY:'#dc2626'};
-        // Threat pie
         const ch1 = echarts.init(document.getElementById('det-threat-chart'));
-        ch1.setOption(ecBase({tooltip:ecTooltip({trigger:'item'}),series:[{type:'pie',radius:['30%','65%'],label:{color:EC_TEXT,fontSize:10},
+        ch1.setOption(ecBase({tooltip:ecTooltip({trigger:'item'}),series:[{type:'pie',radius:['35%','70%'],label:{color:EC_TEXT,fontSize:10},
             data:Object.entries(threatCounts).map(([k,v])=>({name:k,value:v,itemStyle:{color:THREAT_COLORS[k]||'#6b7280'}}))}]}));
-        // Reason bar
         const topReasons = Object.entries(reasonCounts).sort((a,b)=>b[1]-a[1]).slice(0,5);
         if (topReasons.length) {
             const ch2 = echarts.init(document.getElementById('det-reason-chart'));
@@ -164,7 +175,6 @@ async function loadDetSummary() {
                 xAxis:{type:'value',show:false},
                 series:[{type:'bar',data:topReasons.map(r=>r[1]).reverse(),barWidth:'60%',itemStyle:{color:'#6366f1'},label:{show:true,position:'right',color:EC_TEXT,fontSize:10}}]}));
         }
-        // ASN bar
         const topASN = Object.entries(asnCounts).sort((a,b)=>b[1]-a[1]).slice(0,5);
         if (topASN.length) {
             const ch3 = echarts.init(document.getElementById('det-asn-chart'));