feat(dashboard): visualisation clusters HDBSCAN

- Page /campaigns dédiée avec 4 vues graphiques :
  · Scatter plot (score vs vélocité, bulles colorées par campagne)
  · Graphe réseau force-directed (IPs liées par JA4 partagé)
  · Grille de cartes campagne (KPIs, ASN, pays, JA4)
  · Panneau détail (radar comportemental, timeline horaire, table membres)
- 4 nouveaux endpoints API :
  · GET /api/campaigns (fix: campaign_id >= 0 au lieu de != '')
  · GET /api/campaigns/graph (nœuds + arêtes)
  · GET /api/campaigns/scatter (score/vélocité par IP)
  · GET /api/campaigns/{cid} (détail + profil + timeline)
- Sidebar: lien Campagnes ajouté dans Surveillance
- Overview: campagnes clickables → lien vers /campaigns

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

services/dashboard/backend/routes/api.py

@@ -821,9 +821,13 @@ async def campaigns() -> dict[str, Any]:
             f"uniqExact(src_ip) AS unique_ips, "
             f"groupUniqArray(10)(ja4) AS ja4_list, "
             f"groupUniqArray(5)(asn_org) AS asn_list, "
-            f"groupUniqArray(5)(country_code) AS countries "
+            f"groupUniqArray(5)(country_code) AS countries, "
+            f"avg(hits) AS avg_hits, "
+            f"avg(hit_velocity) AS avg_velocity, "
+            f"avg(fuzzing_index) AS avg_fuzzing, "
+            f"avg(post_ratio) AS avg_post_ratio "
             f"FROM {_DB}.ml_detected_anomalies "
-            "WHERE campaign_id != '' AND campaign_id != '0' "
+            "WHERE campaign_id >= 0 "
             "AND detected_at >= now() - INTERVAL 7 DAY "
             "GROUP BY campaign_id "
             "ORDER BY members DESC LIMIT 50"
@@ -834,6 +838,139 @@ async def campaigns() -> dict[str, Any]:
         return {"campaigns": []}
 
 
+# ---------------------------------------------------------------------------
+# GET /api/campaigns/graph — Network graph data (shared JA4/ASN links)
+# ---------------------------------------------------------------------------
+@router.get("/campaigns/graph")
+async def campaigns_graph() -> dict[str, Any]:
+    """Données de graphe réseau : nœuds (IPs) et liens (JA4/ASN partagés)."""
+    try:
+        # Nœuds : chaque IP avec ses attributs principaux
+        nodes = query(
+            f"SELECT toString(src_ip) AS id, "
+            f"campaign_id AS group, "
+            f"any(ja4) AS ja4, any(asn_org) AS asn_org, "
+            f"any(country_code) AS country, any(threat_level) AS threat, "
+            f"any(browser_family) AS browser_family, "
+            f"sum(hits) AS total_hits, "
+            f"min(anomaly_score) AS worst_score "
+            f"FROM {_DB}.ml_detected_anomalies "
+            "WHERE campaign_id >= 0 "
+            "AND detected_at >= now() - INTERVAL 7 DAY "
+            "GROUP BY src_ip, campaign_id "
+            "ORDER BY campaign_id, worst_score ASC "
+            "LIMIT 500"
+        )
+        # Liens : IPs partageant le même JA4 dans la même campagne
+        edges = query(
+            f"SELECT "
+            f"toString(a.src_ip) AS source, "
+            f"toString(b.src_ip) AS target, "
+            f"a.ja4 AS shared_ja4 "
+            f"FROM {_DB}.ml_detected_anomalies a "
+            f"INNER JOIN {_DB}.ml_detected_anomalies b "
+            "ON a.ja4 = b.ja4 AND a.campaign_id = b.campaign_id "
+            "AND a.src_ip < b.src_ip "
+            "WHERE a.campaign_id >= 0 "
+            "AND a.detected_at >= now() - INTERVAL 7 DAY "
+            "AND b.detected_at >= now() - INTERVAL 7 DAY "
+            "LIMIT 2000"
+        )
+        return {"nodes": nodes, "edges": edges}
+    except Exception as exc:
+        logger.exception("campaigns graph query failed")
+        return {"nodes": [], "edges": []}
+
+
+# ---------------------------------------------------------------------------
+# GET /api/campaigns/scatter — Scatter plot data (score vs velocity per IP)
+# ---------------------------------------------------------------------------
+@router.get("/campaigns/scatter")
+async def campaigns_scatter() -> dict[str, Any]:
+    """Données scatter plot : score vs vélocité par IP, coloré par campagne."""
+    try:
+        rows = query(
+            f"SELECT toString(src_ip) AS ip, "
+            f"campaign_id, "
+            f"min(anomaly_score) AS score, "
+            f"avg(hit_velocity) AS velocity, "
+            f"sum(hits) AS total_hits, "
+            f"any(ja4) AS ja4, "
+            f"any(asn_org) AS asn_org, "
+            f"any(threat_level) AS threat "
+            f"FROM {_DB}.ml_detected_anomalies "
+            "WHERE campaign_id >= 0 "
+            "AND detected_at >= now() - INTERVAL 7 DAY "
+            "GROUP BY src_ip, campaign_id "
+            "ORDER BY score ASC LIMIT 500"
+        )
+        return {"data": rows}
+    except Exception as exc:
+        logger.exception("campaigns scatter query failed")
+        return {"data": []}
+
+
+# ---------------------------------------------------------------------------
+# GET /api/campaigns/{cid} — Campaign detail (member IPs + features)
+# ---------------------------------------------------------------------------
+@router.get("/campaigns/{cid}")
+async def campaign_detail(cid: int) -> dict[str, Any]:
+    """Détail d'une campagne : IPs membres, features comportementales, timeline."""
+    try:
+        members = query(
+            f"SELECT toString(src_ip) AS src_ip, ja4, host, "
+            f"anomaly_score, raw_anomaly_score, threat_level, "
+            f"hits, hit_velocity, fuzzing_index, post_ratio, "
+            f"port_exhaustion_ratio, orphan_ratio, "
+            f"asn_org, asn_number, country_code, "
+            f"browser_family, bot_name, detected_at, reason "
+            f"FROM {_DB}.ml_detected_anomalies "
+            "WHERE campaign_id = {{cid:Int32}} "
+            "AND detected_at >= now() - INTERVAL 7 DAY "
+            "ORDER BY anomaly_score ASC LIMIT 200",
+            {"cid": cid},
+        )
+        # Profil agrégé de la campagne
+        profile = query(
+            f"SELECT "
+            f"avg(hits) AS avg_hits, avg(hit_velocity) AS avg_velocity, "
+            f"avg(fuzzing_index) AS avg_fuzzing, avg(post_ratio) AS avg_post_ratio, "
+            f"avg(port_exhaustion_ratio) AS avg_port_exhaustion, "
+            f"avg(orphan_ratio) AS avg_orphan, "
+            f"avg(anomaly_score) AS avg_score, max(anomaly_score) AS max_score, "
+            f"uniqExact(src_ip) AS unique_ips, uniqExact(ja4) AS unique_ja4, "
+            f"uniqExact(host) AS unique_hosts, uniqExact(asn_org) AS unique_asns, "
+            f"groupUniqArray(20)(ja4) AS ja4_list, "
+            f"groupUniqArray(10)(asn_org) AS asn_list, "
+            f"groupUniqArray(10)(country_code) AS country_list, "
+            f"groupUniqArray(10)(host) AS host_list, "
+            f"min(detected_at) AS first_seen, max(detected_at) AS last_seen "
+            f"FROM {_DB}.ml_detected_anomalies "
+            "WHERE campaign_id = {{cid:Int32}} "
+            "AND detected_at >= now() - INTERVAL 7 DAY",
+            {"cid": cid},
+        )
+        # Timeline horaire de la campagne
+        timeline = query(
+            f"SELECT toStartOfHour(detected_at) AS hour, "
+            f"count() AS detections, uniqExact(src_ip) AS active_ips "
+            f"FROM {_DB}.ml_detected_anomalies "
+            "WHERE campaign_id = {{cid:Int32}} "
+            "AND detected_at >= now() - INTERVAL 7 DAY "
+            "GROUP BY hour ORDER BY hour",
+            {"cid": cid},
+        )
+        return {
+            "campaign_id": cid,
+            "members": members,
+            "profile": profile[0] if profile else {},
+            "timeline": timeline,
+        }
+    except Exception as exc:
+        logger.exception("campaign detail query failed for %s", cid)
+        return {"campaign_id": cid, "members": [], "profile": {}, "timeline": []}
+
+
 # ---------------------------------------------------------------------------
 # GET /api/brute-force — Form brute-force detection
 # ---------------------------------------------------------------------------

services/dashboard/backend/routes/pages.py

@@ -56,3 +56,8 @@ async def models(request: Request):
 @router.get("/network")
 async def network(request: Request):
     return templates.TemplateResponse("network.html", _ctx(request, "network"))
+
+
+@router.get("/campaigns")
+async def campaigns_page(request: Request):
+    return templates.TemplateResponse("campaigns.html", _ctx(request, "campaigns"))

services/dashboard/backend/templates/base.html

@@ -115,6 +115,10 @@
                 <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                 <span class="nav-text">Scores</span>
             </a>
+            <a href="/campaigns" class="nav-item {% if active_page == 'campaigns' %}active{% endif %}" title="Campagnes de bots (clusters)">
+                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                <span class="nav-text">Campagnes</span>
+            </a>
 
             <div class="nav-group-title">Investigation</div>
             <a href="/traffic" class="nav-item {% if active_page == 'traffic' %}active{% endif %}" title="Logs HTTP bruts">

services/dashboard/backend/templates/campaigns.html

@@ -0,0 +1,721 @@
+{% extends "base.html" %}
+{% block page_title %}Campagnes — Clusters HDBSCAN{% endblock %}
+{% block content %}
+<style>
+    /* ── Force-graph canvas ── */
+    #graph-canvas { width:100%; height:100%; }
+    .graph-tooltip {
+        position:absolute; background:rgba(17,24,39,0.95); border:1px solid #374151;
+        border-radius:8px; padding:8px 12px; font-size:11px; color:#e5e7eb;
+        pointer-events:none; z-index:100; max-width:260px; line-height:1.5;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+    }
+    /* ── Campaign cards ── */
+    .camp-card {
+        background:#111827; border:1px solid #1f2937; border-radius:10px;
+        padding:16px; cursor:pointer; transition:all 0.2s;
+    }
+    .camp-card:hover { border-color:#6366f1; background:#1e1b4b22; }
+    .camp-card.active { border-color:#818cf8; background:#1e1b4b33; box-shadow:0 0 0 1px #818cf8; }
+    .camp-chip {
+        display:inline-flex; align-items:center; gap:4px;
+        padding:2px 8px; border-radius:9999px; font-size:10px; font-weight:500;
+    }
+    /* ── Detail panel ── */
+    .detail-panel { display:none; }
+    .detail-panel.open { display:block; }
+    /* ── Radar chart container ── */
+    .radar-wrap { position:relative; width:100%; max-width:320px; margin:0 auto; }
+    /* ── Scatter bubbles ── */
+    .scatter-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
+    .scatter-legend-item { display:flex; align-items:center; gap:4px; font-size:10px; color:#9ca3af; }
+    .scatter-dot { width:10px; height:10px; border-radius:50%; }
+</style>
+
+<div class="p-4 lg:p-6 space-y-4 max-w-[1920px] mx-auto">
+    <!-- ═══ Header KPIs ═══ -->
+    <div class="flex flex-wrap items-center gap-4 mb-2">
+        <h1 class="text-xl font-bold text-white flex items-center gap-2">
+            <svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+            Campagnes de bots
+        </h1>
+        <div class="ml-auto flex items-center gap-3">
+            <div class="text-center px-3">
+                <div class="text-2xl font-bold text-purple-400" id="kpi-total">—</div>
+                <div class="text-[10px] text-gray-500 uppercase tracking-wider">Campagnes</div>
+            </div>
+            <div class="text-center px-3 border-l border-gray-700">
+                <div class="text-2xl font-bold text-red-400" id="kpi-ips">—</div>
+                <div class="text-[10px] text-gray-500 uppercase tracking-wider">IPs impliquées</div>
+            </div>
+            <div class="text-center px-3 border-l border-gray-700">
+                <div class="text-2xl font-bold text-amber-400" id="kpi-detections">—</div>
+                <div class="text-[10px] text-gray-500 uppercase tracking-wider">Détections</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ═══ Doc banner ═══ -->
+    <div class="bg-gray-900/50 border border-gray-800 rounded-lg px-4 py-3 text-xs text-gray-400 leading-relaxed">
+        <strong class="text-purple-300">Clustering HDBSCAN</strong> — Le bot-detector regroupe les anomalies
+        par similarité comportementale dans l'espace latent de l'autoencoder (16 dimensions).
+        Chaque <strong>campagne</strong> représente un ensemble d'IPs partageant des patterns
+        d'attaque similaires (même JA4, même cadence, mêmes cibles). Les IPs isolées (campaign_id = −1)
+        ne sont pas affichées ici.
+        <br><strong>Action SOC :</strong> Une campagne multi-IP indique une attaque coordonnée
+        (botnet, scraping distribué, credential stuffing). Cliquez sur une campagne pour investiguer.
+    </div>
+
+    <!-- ═══ Top row: Scatter + Network graph ═══ -->
+    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
+        <!-- Scatter plot: Score vs Velocity -->
+        <div class="section-card">
+            <div class="section-header">
+                <span class="section-title">
+                    <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><circle cx="5" cy="8" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="7" cy="18" r="2"/><circle cx="18" cy="16" r="2.5"/></svg>
+                    Carte des clusters
+                    <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+                        <h4>Scatter — Score vs Vélocité</h4>
+                        <p>Chaque bulle = une IP. Position : score d'anomalie (X) vs vitesse de requêtes (Y).
+                        Taille = nombre de hits. Couleur = campagne.</p>
+                        <p><strong>Lecture :</strong> Les clusters visuels correspondent aux campagnes HDBSCAN.
+                        Les IPs éloignées du cluster principal sont les plus suspectes.</p>
+                        <p class="doc-source">Source : ml_detected_anomalies WHERE campaign_id ≥ 0</p>
+                    </div></span>
+                </span>
+            </div>
+            <div class="section-body" style="height:380px">
+                <canvas id="scatter-chart"></canvas>
+                <div class="scatter-legend" id="scatter-legend"></div>
+            </div>
+        </div>
+
+        <!-- Network graph -->
+        <div class="section-card">
+            <div class="section-header">
+                <span class="section-title">
+                    <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
+                    Graphe de liens
+                    <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+                        <h4>Graphe réseau inter-campagnes</h4>
+                        <p>Nœuds = IPs anomales, Arêtes = JA4 partagé au sein d'une campagne.
+                        Couleur du nœud = campagne. Taille = nombre de hits.</p>
+                        <p><strong>Lecture :</strong> Des IPs très connectées au centre du cluster
+                        sont le « cœur » de la campagne. Les nœuds isolés en périphérie sont des IPs
+                        moins caractéristiques.</p>
+                        <p class="doc-source">Source : ml_detected_anomalies JOINs par JA4</p>
+                    </div></span>
+                </span>
+            </div>
+            <div class="section-body relative" style="height:380px" id="graph-container">
+                <canvas id="graph-canvas"></canvas>
+                <div class="graph-tooltip" id="graph-tip" style="display:none"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ═══ Campaign cards grid ═══ -->
+    <div class="section-card">
+        <div class="section-header">
+            <span class="section-title">
+                Campagnes détectées
+                <span class="text-xs text-gray-500 ml-2" id="camp-count"></span>
+            </span>
+        </div>
+        <div class="section-body p-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3" id="camp-grid">
+                <div class="text-center text-gray-500 text-sm py-8 col-span-full">Chargement des campagnes…</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ═══ Campaign detail panel (hidden until click) ═══ -->
+    <div class="detail-panel" id="detail-panel">
+        <div class="section-card border-purple-600/40">
+            <div class="section-header">
+                <span class="section-title">
+                    <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+                    Détail campagne <span class="font-mono text-purple-300" id="detail-cid"></span>
+                </span>
+                <button onclick="closeDetail()" class="text-gray-400 hover:text-white transition-colors text-sm">✕ Fermer</button>
+            </div>
+            <div class="section-body p-0">
+                <!-- Detail KPIs -->
+                <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-0 border-b border-gray-800" id="detail-kpis"></div>
+
+                <!-- Detail content: radar + timeline + members -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-0">
+                    <!-- Radar chart -->
+                    <div class="border-r border-gray-800 p-4">
+                        <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Profil comportemental</h3>
+                        <div class="radar-wrap"><canvas id="radar-chart"></canvas></div>
+                        <p class="text-[10px] text-gray-600 mt-2 text-center">
+                            Radar des features moyennes normalisées de la campagne.
+                            Comparez avec le profil d'un trafic normal pour identifier les écarts.
+                        </p>
+                    </div>
+                    <!-- Timeline -->
+                    <div class="border-r border-gray-800 p-4">
+                        <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Activité temporelle</h3>
+                        <div style="height:220px"><canvas id="timeline-chart"></canvas></div>
+                        <p class="text-[10px] text-gray-600 mt-2 text-center">
+                            Détections et IPs actives par heure. Des pics synchronisés confirment une coordination.
+                        </p>
+                    </div>
+                    <!-- Shared attributes -->
+                    <div class="p-4">
+                        <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Attributs partagés</h3>
+                        <div id="detail-attrs" class="space-y-3 text-xs"></div>
+                    </div>
+                </div>
+
+                <!-- Members table -->
+                <div class="border-t border-gray-800">
+                    <div class="px-4 py-3 flex items-center justify-between border-b border-gray-800/50">
+                        <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+                            IPs membres <span class="text-gray-500" id="member-count"></span>
+                        </h3>
+                    </div>
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-xs">
+                            <thead class="text-[10px] text-gray-500 uppercase bg-gray-900/50">
+                                <tr>
+                                    <th class="px-3 py-2 text-left">IP</th>
+                                    <th class="px-3 py-2 text-left">JA4</th>
+                                    <th class="px-3 py-2 text-left">Host</th>
+                                    <th class="px-3 py-2 text-right">Score</th>
+                                    <th class="px-3 py-2 text-left">Menace</th>
+                                    <th class="px-3 py-2 text-right">Hits</th>
+                                    <th class="px-3 py-2 text-right">Vélocité</th>
+                                    <th class="px-3 py-2 text-left">ASN</th>
+                                    <th class="px-3 py-2 text-left">Pays</th>
+                                    <th class="px-3 py-2 text-left">Date</th>
+                                </tr>
+                            </thead>
+                            <tbody id="members-body" class="divide-y divide-gray-800/50"></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Chart.js (already loaded by base, but ensure) -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
+
+<script>
+/* ════════════════════════════════════════════════════════════════════════════
+ * Utilitaires
+ * ════════════════════════════════════════════════════════════════════════════ */
+const COLORS = [
+    '#818cf8','#f472b6','#34d399','#fbbf24','#60a5fa','#f87171',
+    '#a78bfa','#2dd4bf','#fb923c','#e879f9','#4ade80','#38bdf8',
+    '#facc15','#c084fc','#22d3ee','#fb7185',
+];
+function campColor(cid) { return COLORS[Math.abs(cid) % COLORS.length]; }
+function escapeHtml(s) { const d=document.createElement('div'); d.textContent=s; return d.innerHTML; }
+function fmtIP(ip) { return String(ip||'').replace('::ffff:',''); }
+function fmtScore(s) {
+    const v = parseFloat(s)||0;
+    const cls = v >= 0.7 ? 'text-red-400' : v >= 0.3 ? 'text-amber-400' : 'text-green-400';
+    return `<span class="${cls}">${v.toFixed(4)}</span>`;
+}
+function threatBadge(t) {
+    const m = {CRITICAL:'badge-critical',HIGH:'badge-high',MEDIUM:'badge-medium',
+        KNOWN_BOT:'badge-bot',LEGITIMATE_BROWSER:'badge-browser',NORMAL:'badge-normal',ANUBIS_DENY:'badge-deny'};
+    return `<span class="badge ${m[t]||'badge-normal'}">${escapeHtml(t||'—')}</span>`;
+}
+function fmtCountry(cc) {
+    if (!cc) return '—';
+    const flag = cc.length===2 ? String.fromCodePoint(...[...cc.toUpperCase()].map(c=>0x1F1E6-65+c.charCodeAt(0))) : '';
+    return `${flag} ${cc}`;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * Data loading
+ * ════════════════════════════════════════════════════════════════════════════ */
+let _campaigns = [], _scatterData = [], _graphData = {nodes:[],edges:[]};
+let _scatterChart = null, _radarChart = null, _timelineChart = null;
+
+async function loadAll() {
+    try {
+        const [campResp, scatterResp, graphResp] = await Promise.all([
+            fetch('/api/campaigns').then(r=>r.json()),
+            fetch('/api/campaigns/scatter').then(r=>r.json()),
+            fetch('/api/campaigns/graph').then(r=>r.json()),
+        ]);
+        _campaigns = campResp.campaigns || [];
+        _scatterData = scatterResp.data || [];
+        _graphData = graphResp;
+
+        // KPIs
+        const totalIPs = _campaigns.reduce((s,c) => s + (c.unique_ips||0), 0);
+        const totalDet = _campaigns.reduce((s,c) => s + (c.members||0), 0);
+        document.getElementById('kpi-total').textContent = _campaigns.length;
+        document.getElementById('kpi-ips').textContent = totalIPs.toLocaleString();
+        document.getElementById('kpi-detections').textContent = totalDet.toLocaleString();
+        document.getElementById('camp-count').textContent = `(${_campaigns.length} actives)`;
+
+        renderCampGrid();
+        renderScatter();
+        renderGraph();
+    } catch(e) {
+        console.error('Campaign load error:', e);
+    }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * Campaign cards grid
+ * ════════════════════════════════════════════════════════════════════════════ */
+function renderCampGrid() {
+    const el = document.getElementById('camp-grid');
+    if (!_campaigns.length) {
+        el.innerHTML = '<div class="text-center text-gray-500 text-sm py-8 col-span-full">Aucune campagne active détectée (7 derniers jours)</div>';
+        return;
+    }
+    el.innerHTML = _campaigns.map(c => {
+        const color = campColor(c.campaign_id);
+        const countries = (c.countries||[]).map(fmtCountry).join(' ');
+        const asns = (c.asn_list||[]).map(a => escapeHtml(a)).join(', ') || '—';
+        const ja4s = (c.ja4_list||[]).slice(0,3).map(j => `<span class="font-mono text-[10px] text-gray-400">${escapeHtml(j).substring(0,20)}…</span>`).join(' ');
+        return `<div class="camp-card" data-cid="${c.campaign_id}" onclick="selectCampaign(${c.campaign_id})">
+            <div class="flex items-center gap-2 mb-2">
+                <div class="w-3 h-3 rounded-full shrink-0" style="background:${color}"></div>
+                <span class="font-semibold text-sm text-white">Campagne #${c.campaign_id}</span>
+                <span class="ml-auto camp-chip bg-purple-500/20 text-purple-300">${c.members} dét.</span>
+            </div>
+            <div class="grid grid-cols-2 gap-x-4 gap-y-1 text-[11px] text-gray-400 mb-2">
+                <div>IPs uniques : <span class="text-white">${c.unique_ips}</span></div>
+                <div>Score max : <span class="text-red-400">${(c.max_score||0).toFixed(3)}</span></div>
+                <div>Vélocité moy. : <span class="text-amber-300">${(c.avg_velocity||0).toFixed(1)} r/s</span></div>
+                <div>Fuzzing moy. : <span class="text-amber-300">${(c.avg_fuzzing||0).toFixed(2)}</span></div>
+            </div>
+            <div class="text-[10px] text-gray-500 mb-1">${countries}</div>
+            <div class="text-[10px] text-gray-500 truncate">ASN: ${asns}</div>
+            <div class="mt-1">${ja4s}</div>
+        </div>`;
+    }).join('');
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * Scatter chart (Chart.js)
+ * ════════════════════════════════════════════════════════════════════════════ */
+function renderScatter() {
+    const canvas = document.getElementById('scatter-chart');
+    if (_scatterChart) _scatterChart.destroy();
+
+    // Group data by campaign_id
+    const groups = {};
+    _scatterData.forEach(d => {
+        const cid = d.campaign_id;
+        if (!groups[cid]) groups[cid] = [];
+        groups[cid].push(d);
+    });
+
+    const datasets = Object.entries(groups).map(([cid, points]) => ({
+        label: `Camp. #${cid}`,
+        data: points.map(p => ({
+            x: parseFloat(p.score)||0,
+            y: parseFloat(p.velocity)||0,
+            r: Math.max(3, Math.min(20, Math.sqrt(parseInt(p.total_hits)||1))),
+            _meta: p,
+        })),
+        backgroundColor: campColor(parseInt(cid)) + '88',
+        borderColor: campColor(parseInt(cid)),
+        borderWidth: 1,
+    }));
+
+    _scatterChart = new Chart(canvas, {
+        type: 'bubble',
+        data: { datasets },
+        options: {
+            responsive: true, maintainAspectRatio: false,
+            scales: {
+                x: {
+                    title: { display:true, text:'Score d\'anomalie', color:'#9ca3af', font:{size:11} },
+                    grid: { color:'#1f293766' }, ticks: { color:'#6b7280', font:{size:10} },
+                },
+                y: {
+                    title: { display:true, text:'Vélocité (req/s)', color:'#9ca3af', font:{size:11} },
+                    grid: { color:'#1f293766' }, ticks: { color:'#6b7280', font:{size:10} },
+                },
+            },
+            plugins: {
+                legend: { display:true, position:'bottom', labels:{color:'#9ca3af',boxWidth:10,font:{size:10}} },
+                tooltip: {
+                    callbacks: {
+                        label: ctx => {
+                            const m = ctx.raw._meta;
+                            return [
+                                `IP: ${fmtIP(m.ip)}`,
+                                `Score: ${(parseFloat(m.score)||0).toFixed(4)}`,
+                                `Vélocité: ${(parseFloat(m.velocity)||0).toFixed(1)} r/s`,
+                                `Hits: ${m.total_hits}`,
+                                `ASN: ${m.asn_org||'—'}`,
+                            ];
+                        }
+                    }
+                },
+            },
+            onClick: (e, els) => {
+                if (els.length) {
+                    const m = els[0].element.$context.raw._meta;
+                    window.location.href = `/ip/${encodeURIComponent(fmtIP(m.ip))}`;
+                }
+            },
+        },
+    });
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * Force-directed graph (Canvas 2D, simple spring layout)
+ * ════════════════════════════════════════════════════════════════════════════ */
+function renderGraph() {
+    const container = document.getElementById('graph-container');
+    const canvas = document.getElementById('graph-canvas');
+    const tip = document.getElementById('graph-tip');
+    const ctx = canvas.getContext('2d');
+    const W = container.clientWidth, H = container.clientHeight;
+    canvas.width = W * window.devicePixelRatio;
+    canvas.height = H * window.devicePixelRatio;
+    canvas.style.width = W+'px';
+    canvas.style.height = H+'px';
+    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
+    const nodes = (_graphData.nodes||[]).map((n,i) => ({
+        ...n,
+        x: W/2 + (Math.random()-0.5)*W*0.6,
+        y: H/2 + (Math.random()-0.5)*H*0.6,
+        vx:0, vy:0,
+        radius: Math.max(4, Math.min(16, Math.sqrt(parseInt(n.total_hits)||1)*0.7)),
+        color: campColor(n.group),
+    }));
+    const nodeMap = {};
+    nodes.forEach(n => nodeMap[n.id] = n);
+    const edges = (_graphData.edges||[]).filter(e => nodeMap[e.source] && nodeMap[e.target]);
+
+    if (!nodes.length) {
+        ctx.fillStyle = '#6b7280';
+        ctx.font = '13px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText('Aucun lien inter-IP à afficher', W/2, H/2);
+        return;
+    }
+
+    // Simple force simulation (60 iterations)
+    for (let iter = 0; iter < 80; iter++) {
+        const alpha = 0.3 * (1 - iter/80);
+        // Repulsion
+        for (let i=0; i<nodes.length; i++) {
+            for (let j=i+1; j<nodes.length; j++) {
+                let dx = nodes[j].x - nodes[i].x;
+                let dy = nodes[j].y - nodes[i].y;
+                let d = Math.sqrt(dx*dx+dy*dy) || 1;
+                let f = 800 / (d*d) * alpha;
+                nodes[i].vx -= dx/d*f; nodes[i].vy -= dy/d*f;
+                nodes[j].vx += dx/d*f; nodes[j].vy += dy/d*f;
+            }
+        }
+        // Attraction (edges)
+        edges.forEach(e => {
+            const a = nodeMap[e.source], b = nodeMap[e.target];
+            if (!a || !b) return;
+            let dx = b.x-a.x, dy = b.y-a.y;
+            let d = Math.sqrt(dx*dx+dy*dy) || 1;
+            let f = (d-60)*0.01*alpha;
+            a.vx += dx/d*f; a.vy += dy/d*f;
+            b.vx -= dx/d*f; b.vy -= dy/d*f;
+        });
+        // Center gravity
+        nodes.forEach(n => {
+            n.vx += (W/2-n.x)*0.005*alpha;
+            n.vy += (H/2-n.y)*0.005*alpha;
+            n.x += n.vx; n.y += n.vy;
+            n.vx *= 0.8; n.vy *= 0.8;
+            n.x = Math.max(20, Math.min(W-20, n.x));
+            n.y = Math.max(20, Math.min(H-20, n.y));
+        });
+    }
+
+    // Draw
+    function draw() {
+        ctx.clearRect(0,0,W,H);
+        // Edges
+        ctx.strokeStyle = '#374151';
+        ctx.lineWidth = 0.5;
+        edges.forEach(e => {
+            const a = nodeMap[e.source], b = nodeMap[e.target];
+            if (!a || !b) return;
+            ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke();
+        });
+        // Nodes
+        nodes.forEach(n => {
+            ctx.beginPath();
+            ctx.arc(n.x, n.y, n.radius, 0, Math.PI*2);
+            ctx.fillStyle = n.color + 'cc';
+            ctx.fill();
+            ctx.strokeStyle = n.color;
+            ctx.lineWidth = 1.5;
+            ctx.stroke();
+        });
+    }
+    draw();
+
+    // Hover tooltip
+    canvas.addEventListener('mousemove', e => {
+        const rect = canvas.getBoundingClientRect();
+        const mx = e.clientX - rect.left, my = e.clientY - rect.top;
+        const hit = nodes.find(n => Math.hypot(n.x-mx, n.y-my) <= n.radius+2);
+        if (hit) {
+            tip.style.display = 'block';
+            tip.style.left = (e.clientX - container.getBoundingClientRect().left + 12) + 'px';
+            tip.style.top = (e.clientY - container.getBoundingClientRect().top - 10) + 'px';
+            tip.innerHTML = `
+                <div class="font-mono text-purple-300">${fmtIP(hit.id)}</div>
+                <div>Campagne #${hit.group}</div>
+                <div>JA4: ${escapeHtml((hit.ja4||'').substring(0,25))}</div>
+                <div>ASN: ${escapeHtml(hit.asn_org||'—')}</div>
+                <div>Pays: ${fmtCountry(hit.country)}</div>
+                <div>Hits: ${hit.total_hits}</div>
+            `;
+        } else {
+            tip.style.display = 'none';
+        }
+    });
+    canvas.addEventListener('click', e => {
+        const rect = canvas.getBoundingClientRect();
+        const mx = e.clientX - rect.left, my = e.clientY - rect.top;
+        const hit = nodes.find(n => Math.hypot(n.x-mx, n.y-my) <= n.radius+2);
+        if (hit) window.location.href = `/ip/${encodeURIComponent(fmtIP(hit.id))}`;
+    });
+    canvas.style.cursor = 'default';
+    canvas.addEventListener('mousemove', e => {
+        const rect = canvas.getBoundingClientRect();
+        const mx = e.clientX - rect.left, my = e.clientY - rect.top;
+        canvas.style.cursor = nodes.find(n => Math.hypot(n.x-mx,n.y-my)<=n.radius+2) ? 'pointer' : 'default';
+    });
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * Campaign detail panel
+ * ════════════════════════════════════════════════════════════════════════════ */
+async function selectCampaign(cid) {
+    // Highlight card
+    document.querySelectorAll('.camp-card').forEach(c => c.classList.toggle('active', c.dataset.cid == cid));
+
+    const panel = document.getElementById('detail-panel');
+    panel.classList.add('open');
+    document.getElementById('detail-cid').textContent = `#${cid}`;
+
+    try {
+        const resp = await fetch(`/api/campaigns/${cid}`);
+        const data = await resp.json();
+        const p = data.profile || {};
+        const members = data.members || [];
+        const timeline = data.timeline || [];
+
+        // Detail KPIs
+        document.getElementById('detail-kpis').innerHTML = [
+            ['IPs uniques', p.unique_ips||0, 'text-purple-400'],
+            ['JA4 uniques', p.unique_ja4||0, 'text-cyan-400'],
+            ['Hosts ciblés', p.unique_hosts||0, 'text-amber-400'],
+            ['ASNs', p.unique_asns||0, 'text-blue-400'],
+            ['Score moyen', (p.avg_score||0).toFixed(3), 'text-red-400'],
+            ['Score max', (p.max_score||0).toFixed(3), 'text-red-300'],
+        ].map(([label,val,cls]) => `
+            <div class="px-4 py-3 text-center">
+                <div class="text-lg font-bold ${cls}">${val}</div>
+                <div class="text-[10px] text-gray-500 uppercase">${label}</div>
+            </div>
+        `).join('');
+
+        // Shared attributes
+        const attrsEl = document.getElementById('detail-attrs');
+        const ja4List = (p.ja4_list||[]).slice(0,15);
+        const asnList = (p.asn_list||[]).slice(0,8);
+        const countryList = (p.country_list||[]).slice(0,10);
+        const hostList = (p.host_list||[]).slice(0,8);
+        attrsEl.innerHTML = `
+            <div>
+                <div class="text-[10px] text-gray-500 uppercase mb-1">JA4 signatures (${ja4List.length})</div>
+                <div class="flex flex-wrap gap-1">${ja4List.map(j=>`<span class="font-mono text-[10px] bg-gray-800 px-1.5 py-0.5 rounded text-cyan-300">${escapeHtml(j).substring(0,25)}…</span>`).join('')}</div>
+            </div>
+            <div>
+                <div class="text-[10px] text-gray-500 uppercase mb-1">ASN organisations</div>
+                <div class="flex flex-wrap gap-1">${asnList.map(a=>`<span class="text-[10px] bg-gray-800 px-1.5 py-0.5 rounded text-blue-300">${escapeHtml(a)}</span>`).join('')||'—'}</div>
+            </div>
+            <div>
+                <div class="text-[10px] text-gray-500 uppercase mb-1">Pays</div>
+                <div class="flex flex-wrap gap-1">${countryList.map(c=>`<span class="text-[10px] bg-gray-800 px-1.5 py-0.5 rounded">${fmtCountry(c)}</span>`).join('')||'—'}</div>
+            </div>
+            <div>
+                <div class="text-[10px] text-gray-500 uppercase mb-1">Hosts ciblés</div>
+                <div class="flex flex-wrap gap-1">${hostList.map(h=>`<span class="text-[10px] bg-gray-800 px-1.5 py-0.5 rounded text-amber-300">${escapeHtml(h)}</span>`).join('')||'—'}</div>
+            </div>
+        `;
+
+        // Member count
+        document.getElementById('member-count').textContent = `(${members.length})`;
+
+        // Members table
+        document.getElementById('members-body').innerHTML = members.map(m => `
+            <tr class="hover:bg-gray-800/40 cursor-pointer" onclick="window.location='/ip/${encodeURIComponent(fmtIP(m.src_ip))}'">
+                <td class="px-3 py-2 font-mono text-purple-300">${fmtIP(m.src_ip)}</td>
+                <td class="px-3 py-2 font-mono text-[10px] text-gray-400 max-w-[140px] truncate">${escapeHtml(m.ja4||'')}</td>
+                <td class="px-3 py-2 text-gray-300">${escapeHtml(m.host||'')}</td>
+                <td class="px-3 py-2 text-right">${fmtScore(m.anomaly_score)}</td>
+                <td class="px-3 py-2">${threatBadge(m.threat_level)}</td>
+                <td class="px-3 py-2 text-right text-gray-300">${m.hits||0}</td>
+                <td class="px-3 py-2 text-right text-amber-300">${(parseFloat(m.hit_velocity)||0).toFixed(1)}</td>
+                <td class="px-3 py-2 text-gray-400 max-w-[120px] truncate">${escapeHtml(m.asn_org||'—')}</td>
+                <td class="px-3 py-2">${fmtCountry(m.country_code)}</td>
+                <td class="px-3 py-2 text-gray-500 text-[10px]">${m.detected_at||''}</td>
+            </tr>
+        `).join('') || '<tr><td colspan="10" class="text-center py-6 text-gray-500">Aucun membre</td></tr>';
+
+        // Radar chart
+        renderRadar(p);
+
+        // Timeline chart
+        renderTimeline(timeline, cid);
+
+        // Scroll to detail
+        panel.scrollIntoView({ behavior:'smooth', block:'start' });
+
+    } catch(e) {
+        console.error('Campaign detail error:', e);
+    }
+}
+
+function closeDetail() {
+    document.getElementById('detail-panel').classList.remove('open');
+    document.querySelectorAll('.camp-card').forEach(c => c.classList.remove('active'));
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * Radar chart (behavioral profile)
+ * ════════════════════════════════════════════════════════════════════════════ */
+function renderRadar(profile) {
+    const canvas = document.getElementById('radar-chart');
+    if (_radarChart) _radarChart.destroy();
+
+    const labels = ['Vélocité', 'Fuzzing', 'POST ratio', 'Port exhaust.', 'Orphan ratio', 'Score anomalie'];
+    const raw = [
+        parseFloat(profile.avg_velocity)||0,
+        parseFloat(profile.avg_fuzzing)||0,
+        parseFloat(profile.avg_post_ratio)||0,
+        parseFloat(profile.avg_port_exhaustion)||0,
+        parseFloat(profile.avg_orphan)||0,
+        Math.abs(parseFloat(profile.avg_score)||0),
+    ];
+    // Normalize each to [0,1] with reasonable caps
+    const caps = [50, 1, 1, 1, 1, 1];
+    const normalized = raw.map((v,i) => Math.min(v/caps[i], 1));
+
+    _radarChart = new Chart(canvas, {
+        type: 'radar',
+        data: {
+            labels,
+            datasets: [{
+                label: 'Campagne',
+                data: normalized,
+                backgroundColor: 'rgba(129,140,248,0.2)',
+                borderColor: '#818cf8',
+                borderWidth: 2,
+                pointBackgroundColor: '#818cf8',
+                pointRadius: 3,
+            }],
+        },
+        options: {
+            responsive: true, maintainAspectRatio: true,
+            scales: {
+                r: {
+                    min: 0, max: 1,
+                    ticks: { display:false, stepSize:0.25 },
+                    grid: { color:'#1f293788' },
+                    angleLines: { color:'#1f293788' },
+                    pointLabels: { color:'#9ca3af', font:{size:10} },
+                },
+            },
+            plugins: {
+                legend: { display:false },
+                tooltip: {
+                    callbacks: {
+                        label: ctx => `${labels[ctx.dataIndex]}: ${raw[ctx.dataIndex].toFixed(3)} (norm: ${normalized[ctx.dataIndex].toFixed(2)})`
+                    }
+                },
+            },
+        },
+    });
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * Timeline chart (hourly detections)
+ * ════════════════════════════════════════════════════════════════════════════ */
+function renderTimeline(timeline, cid) {
+    const canvas = document.getElementById('timeline-chart');
+    if (_timelineChart) _timelineChart.destroy();
+
+    if (!timeline.length) {
+        const ctx2 = canvas.getContext('2d');
+        ctx2.clearRect(0,0,canvas.width,canvas.height);
+        ctx2.fillStyle = '#6b7280'; ctx2.font = '12px sans-serif'; ctx2.textAlign = 'center';
+        ctx2.fillText('Pas de données temporelles', canvas.width/2, canvas.height/2);
+        return;
+    }
+
+    const labels = timeline.map(t => {
+        const d = new Date(t.hour);
+        return d.toLocaleDateString('fr-FR',{day:'2-digit',month:'short'}) + ' ' + d.toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit'});
+    });
+    const color = campColor(cid);
+
+    _timelineChart = new Chart(canvas, {
+        type: 'bar',
+        data: {
+            labels,
+            datasets: [
+                {
+                    label: 'Détections',
+                    data: timeline.map(t=>t.detections),
+                    backgroundColor: color + '88',
+                    borderColor: color,
+                    borderWidth: 1,
+                    yAxisID: 'y',
+                },
+                {
+                    label: 'IPs actives',
+                    data: timeline.map(t=>t.active_ips),
+                    type: 'line',
+                    borderColor: '#34d399',
+                    backgroundColor: '#34d39922',
+                    borderWidth: 2,
+                    pointRadius: 2,
+                    fill: true,
+                    yAxisID: 'y1',
+                },
+            ],
+        },
+        options: {
+            responsive: true, maintainAspectRatio: false,
+            scales: {
+                x: { ticks:{color:'#6b7280',font:{size:9},maxRotation:45}, grid:{display:false} },
+                y: { position:'left', title:{display:true,text:'Détections',color:'#9ca3af',font:{size:10}},
+                     ticks:{color:'#6b7280',font:{size:10}}, grid:{color:'#1f293744'} },
+                y1: { position:'right', title:{display:true,text:'IPs',color:'#34d399',font:{size:10}},
+                      ticks:{color:'#34d399',font:{size:10}}, grid:{display:false} },
+            },
+            plugins: {
+                legend: { position:'bottom', labels:{color:'#9ca3af',boxWidth:10,font:{size:10}} },
+            },
+        },
+    });
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * Init
+ * ════════════════════════════════════════════════════════════════════════════ */
+loadAll();
+</script>
+{% endblock %}

services/dashboard/backend/templates/overview.html

@@ -341,7 +341,7 @@ async function loadOverview() {
         const campEl = document.getElementById('campaigns-list');
         const camps = campaigns.campaigns || [];
         if (camps.length) {
-            campEl.innerHTML = camps.map(c => `<div class="px-4 py-2.5 border-b border-gray-800/50 hover:bg-gray-800/40 transition-colors">
+            campEl.innerHTML = camps.map(c => `<div class="px-4 py-2.5 border-b border-gray-800/50 hover:bg-gray-800/40 transition-colors cursor-pointer" onclick="window.location='/campaigns'">
                 <div class="flex items-center gap-2 mb-1">
                     <span class="text-xs font-mono text-purple-400">Camp. #${escapeHtml(String(c.campaign_id).substring(0,8))}</span>
                     <span class="badge badge-high">${c.members} membres</span>