feat(dashboard): add JA4 fingerprint and cluster investigation pages

- /ja4/{fingerprint} page: 8 KPIs, timeline, threat pie, IP scores
  table, ASN/geo charts, HTTP logs, AI features — full JA4 investigation
- /cluster/{cid} page: 8 KPIs, timeline, threat/JA4/ASN/host charts,
  member table with bulk classify — full campaign investigation
- /api/ja4/{fingerprint} and /api/cluster/{cid} API endpoints
- fmtJA4 links now navigate to /ja4/ investigation page
- campaigns.html: 'Ouvrir' button links to /cluster/{cid} full page
- Fix: double-brace {{param}} in non-f-string queries → single {param}
  (was causing HTTP 500 on all parameterized ClickHouse queries)
- 50 routes total, all tests pass, 0 JS console errors

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

services/dashboard/backend/templates/base.html

@@ -291,11 +291,11 @@
         }
         function fmtJA4(ja4) {
             if (!ja4) return '';
-            return `<a href="/detections?ja4=${encodeURIComponent(ja4)}" onclick="event.stopPropagation()" class="text-purple-400 hover:underline cursor-pointer font-mono text-[11px]" title="${escapeHtml(ja4)}">${escapeHtml(ja4.substring(0,22))}…</a>`;
+            return `<a href="/ja4/${encodeURIComponent(ja4)}" onclick="event.stopPropagation()" class="text-purple-400 hover:underline cursor-pointer font-mono text-[11px]" title="${escapeHtml(ja4)}">${escapeHtml(ja4.substring(0,22))}…</a>`;
         }
         function fmtJA4Full(ja4) {
             if (!ja4) return '';
-            return `<a href="/detections?ja4=${encodeURIComponent(ja4)}" onclick="event.stopPropagation()" class="text-purple-400 hover:underline cursor-pointer font-mono text-[11px]">${escapeHtml(ja4)}</a>`;
+            return `<a href="/ja4/${encodeURIComponent(ja4)}" onclick="event.stopPropagation()" class="text-purple-400 hover:underline cursor-pointer font-mono text-[11px]">${escapeHtml(ja4)}</a>`;
         }
         function fmtBotName(name) {
             if (!name) return '';

services/dashboard/backend/templates/campaigns.html

@@ -138,6 +138,7 @@
                     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>
+                <a id="detail-link" href="/cluster/0" class="px-3 py-1 bg-brand-600 text-white rounded text-xs font-medium hover:bg-brand-500 ml-2">Ouvrir ↗</a>
             </div>
             <div class="section-body p-0">
                 <!-- Detail KPIs -->
@@ -507,6 +508,7 @@ async function selectCampaign(cid) {
     const panel = document.getElementById('detail-panel');
     panel.classList.add('open');
     document.getElementById('detail-cid').textContent = `#${cid}`;
+    document.getElementById('detail-link').href = `/cluster/${cid}`;
 
     try {
         const resp = await fetch(`/api/campaigns/${cid}`);

services/dashboard/backend/templates/cluster_detail.html

@@ -0,0 +1,264 @@
+{% extends "base.html" %}
+{% block title %}JA4 SOC — Cluster #{{ cid }}{% endblock %}
+{% block page_title %}
+    Cluster #{{ cid }}
+    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn" aria-label="Aide">ⓘ</button><div class="doc-panel">
+        <h4>Investigation Cluster</h4>
+        <p>Analyse complète d'un cluster détecté par HDBSCAN. Un cluster regroupe des IPs aux comportements similaires (features ML proches), indiquant une campagne coordonnée.</p>
+        <p><strong>Workflow :</strong> Vérifiez la convergence JA4/ASN → analysez les cibles → classifiez le cluster entier.</p>
+        <p class="doc-source">Sources : ml_detected_anomalies WHERE campaign_id=…</p>
+    </div></span>
+{% endblock %}
+{% block header_actions %}
+    <div class="flex gap-2">
+        <a href="/campaigns" class="px-3 py-1 bg-gray-800 text-gray-300 rounded text-xs hover:text-white">← Tous les clusters</a>
+        <select id="cls-select" class="px-2 py-1 bg-gray-900 border border-gray-800 rounded text-xs text-gray-300">
+            <option value="bot">🤖 Bot</option><option value="legitimate">✅ Légitime</option><option value="suspicious">⚠️ Suspect</option>
+        </select>
+        <button id="cls-all-btn" class="px-3 py-1 bg-brand-600 text-white rounded text-xs font-medium hover:bg-brand-500">Classifier tout le cluster</button>
+        <span id="cls-result" class="text-xs self-center"></span>
+    </div>
+{% endblock %}
+{% block content %}
+<div class="space-y-4">
+    <!-- KPIs -->
+    <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-8 gap-3" id="kpi-row"></div>
+
+    <!-- Row 1: Timeline + Threat breakdown -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div class="section-card lg:col-span-2">
+            <div class="section-header">
+                <span class="section-title">
+                    Timeline du cluster
+                    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
+                        <h4>Activité temporelle</h4>
+                        <p>Détections et IPs actives par heure. Les bursts synchronisés confirment la coordination.</p>
+                        <p class="doc-source">Source : ml_detected_anomalies GROUP BY hour</p>
+                    </div></span>
+                </span>
+            </div>
+            <div class="section-body"><div id="timeline-chart" style="height:220px"></div></div>
+        </div>
+        <div class="section-card">
+            <div class="section-header"><span class="section-title">Menaces</span></div>
+            <div class="section-body"><div id="threat-chart" style="height:220px"></div></div>
+        </div>
+    </div>
+
+    <!-- Row 2: JA4 convergence + ASN infrastructure + Host targets -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div class="section-card">
+            <div class="section-header">
+                <span class="section-title">
+                    Convergence JA4
+                    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
+                        <h4>Empreintes TLS du cluster</h4>
+                        <p>Répartition des JA4 dans le cluster. Une seule JA4 dominante = même outil/framework. Diversité JA4 = evasion ou rotation.</p>
+                        <p><strong>Action :</strong> Cliquez sur une JA4 pour l'investiguer.</p>
+                        <p class="doc-source">Source : ml_detected_anomalies GROUP BY ja4</p>
+                    </div></span>
+                </span>
+            </div>
+            <div class="section-body">
+                <div id="ja4-chart" style="height:180px"></div>
+                <div id="ja4-list" class="mt-2 space-y-1"></div>
+            </div>
+        </div>
+        <div class="section-card">
+            <div class="section-header">
+                <span class="section-title">
+                    Infrastructure (ASN)
+                    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
+                        <h4>Systèmes autonomes</h4>
+                        <p>D'où viennent les IPs du cluster. Un seul ASN datacenter = hébergé. ASN ISP variés = botnet distribué.</p>
+                        <p class="doc-source">Source : ml_detected_anomalies GROUP BY asn_org</p>
+                    </div></span>
+                </span>
+            </div>
+            <div class="section-body"><div id="asn-chart" style="height:250px"></div></div>
+        </div>
+        <div class="section-card">
+            <div class="section-header"><span class="section-title">Hosts ciblés</span></div>
+            <div class="section-body"><div id="host-chart" style="height:250px"></div></div>
+        </div>
+    </div>
+
+    <!-- Row 3: Member table -->
+    <div class="section-card">
+        <div class="section-header">
+            <span class="section-title">
+                Membres du cluster
+                <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
+                    <h4>IPs membres</h4>
+                    <p>Toutes les IPs rattachées à ce cluster par HDBSCAN. Triez par score pour prioriser l'investigation.</p>
+                    <p><strong>Action :</strong> Cliquez pour investiguer l'IP. Utilisez « Classifier tout le cluster » pour un traitement en masse.</p>
+                    <p class="doc-source">Source : ml_detected_anomalies WHERE campaign_id=…</p>
+                </div></span>
+            </span>
+            <span class="text-xs text-gray-500" id="member-count"></span>
+        </div>
+        <div class="overflow-x-auto" style="max-height:500px;overflow-y:auto">
+            <table class="data-table" id="member-table"><thead><tr>
+                <th style="width:16px"></th>
+                <th>IP</th><th>Score</th><th>Threat</th><th>JA4</th>
+                <th>Hits</th><th>Velocity</th><th>Fuzz</th>
+                <th>Host</th><th>ASN</th><th>Pays</th><th>Browser</th><th>Bot</th><th>Date</th>
+            </tr></thead><tbody id="member-body"></tbody></table>
+        </div>
+    </div>
+</div>
+{% endblock %}
+{% block scripts %}
+<script>
+const CID = {{ cid }};
+const THREAT_COLORS = {CRITICAL:'#ef4444',HIGH:'#f97316',MEDIUM:'#eab308',NORMAL:'#6b7280',KNOWN_BOT:'#3b82f6',LEGITIMATE_BROWSER:'#22c55e',ANUBIS_DENY:'#dc2626'};
+let clusterIPs = [];
+
+async function loadCluster() {
+    try {
+        const r = await fetch('/api/cluster/' + CID);
+        const d = await r.json();
+        const p = d.profile || {};
+
+        // KPIs
+        document.getElementById('kpi-row').innerHTML = [
+            kpi('IPs', fmtNum(p.unique_ips)),
+            kpi('JA4 uniques', fmtNum(p.unique_ja4)),
+            kpi('Hosts ciblés', fmtNum(p.unique_hosts)),
+            kpi('ASNs', fmtNum(p.unique_asns)),
+            kpi('Score moyen', p.avg_score != null ? parseFloat(p.avg_score).toFixed(4) : '—'),
+            kpi('Hits totaux', fmtNum(p.total_hits)),
+            kpi('Menaces', fmtNum(p.threat_count)),
+            kpi('Bots connus', fmtNum(p.known_bot_count)),
+        ].join('');
+
+        // Store IPs for bulk classify
+        clusterIPs = (p.ip_list || []).map(ip => String(ip).replace('::ffff:',''));
+
+        // Timeline
+        const tl = d.timeline || [];
+        if (tl.length) {
+            const ch = echarts.init(document.getElementById('timeline-chart'));
+            ch.setOption(ecBase({
+                tooltip: ecTooltip({trigger:'axis'}),
+                grid:{left:40,right:20,top:20,bottom:30},
+                xAxis:{type:'category',data:tl.map(r=>(r.hour||'').substring(11,16)),axisLabel:{color:EC_TEXT,fontSize:10}},
+                yAxis:[
+                    {type:'value',name:'Détections',nameTextStyle:{color:EC_TEXT,fontSize:10},axisLabel:{color:EC_TEXT,fontSize:10}},
+                    {type:'value',name:'IPs',nameTextStyle:{color:EC_TEXT,fontSize:10},axisLabel:{color:EC_TEXT,fontSize:10},splitLine:{show:false}}
+                ],
+                series:[
+                    {name:'Détections',type:'bar',data:tl.map(r=>r.detections),itemStyle:{color:'#6366f1'},barWidth:'60%'},
+                    {name:'IPs actives',type:'line',yAxisIndex:1,data:tl.map(r=>r.active_ips),lineStyle:{color:'#f97316'},itemStyle:{color:'#f97316'},smooth:true}
+                ]
+            }));
+        }
+
+        // Threat pie
+        const threats = d.threats || [];
+        if (threats.length) {
+            const ch2 = echarts.init(document.getElementById('threat-chart'));
+            ch2.setOption(ecBase({
+                tooltip:ecTooltip({trigger:'item'}),
+                series:[{type:'pie',radius:['30%','70%'],
+                    label:{color:EC_TEXT,fontSize:10},
+                    data:threats.map(t=>({name:t.threat_level,value:t.cnt,itemStyle:{color:THREAT_COLORS[t.threat_level]||'#6b7280'}}))}]
+            }));
+        }
+
+        // JA4 breakdown
+        const ja4s = d.ja4_breakdown || [];
+        if (ja4s.length) {
+            const ch3 = echarts.init(document.getElementById('ja4-chart'));
+            ch3.setOption(ecBase({
+                tooltip:ecTooltip({trigger:'item'}),
+                series:[{type:'pie',radius:['25%','65%'],
+                    label:{color:EC_TEXT,fontSize:9,formatter:'{b|{b}}\n{c}',rich:{b:{fontSize:8,color:'#9ca3af'}}},
+                    data:ja4s.slice(0,10).map(r=>({name:(r.ja4||'').substring(0,20),value:r.sessions,fullJa4:r.ja4}))}]
+            }));
+            ch3.on('click', params => {
+                if (params.data && params.data.fullJa4) window.location = '/ja4/' + encodeURIComponent(params.data.fullJa4);
+            });
+            // JA4 clickable list
+            document.getElementById('ja4-list').innerHTML = ja4s.slice(0,5).map(r =>
+                `<a href="/ja4/${encodeURIComponent(r.ja4)}" class="block text-xs font-mono text-purple-400 hover:underline truncate" title="${escapeHtml(r.ja4)}">${escapeHtml(r.ja4)} <span class="text-gray-500">(${r.sessions} sess, ${r.unique_ips} IPs)</span></a>`
+            ).join('');
+        }
+
+        // ASN breakdown
+        const asns = d.asn_breakdown || [];
+        if (asns.length) {
+            const ch4 = echarts.init(document.getElementById('asn-chart'));
+            ch4.setOption(ecBase({tooltip:ecTooltip({trigger:'axis'}),
+                grid:{left:10,right:30,top:5,bottom:5,containLabel:true},
+                yAxis:{type:'category',data:asns.map(r=>r.asn_org).reverse(),axisLabel:{color:EC_TEXT,fontSize:9,width:100,overflow:'truncate'},axisLine:{show:false}},
+                xAxis:{type:'value',show:false},
+                series:[{type:'bar',data:asns.map(r=>r.sessions).reverse(),barWidth:'60%',itemStyle:{color:'#f97316'},
+                    label:{show:true,position:'right',color:EC_TEXT,fontSize:10}}]}));
+        }
+
+        // Host breakdown
+        const hosts = d.host_breakdown || [];
+        if (hosts.length) {
+            const ch5 = echarts.init(document.getElementById('host-chart'));
+            ch5.setOption(ecBase({tooltip:ecTooltip({trigger:'axis'}),
+                grid:{left:10,right:30,top:5,bottom:5,containLabel:true},
+                yAxis:{type:'category',data:hosts.map(r=>r.host).reverse(),axisLabel:{color:EC_TEXT,fontSize:9,width:100,overflow:'truncate'},axisLine:{show:false}},
+                xAxis:{type:'value',show:false},
+                series:[{type:'bar',data:hosts.map(r=>r.sessions).reverse(),barWidth:'60%',itemStyle:{color:'#22c55e'},
+                    label:{show:true,position:'right',color:EC_TEXT,fontSize:10}}]}));
+        }
+
+        // Member table
+        const members = d.members || [];
+        document.getElementById('member-count').textContent = members.length + ' membres';
+        document.getElementById('member-body').innerHTML = members.map(row => {
+            const ip = String(row.src_ip||'').replace('::ffff:','');
+            return `<tr onclick="window.location='/ip/${encodeURIComponent(ip)}'">
+                <td><span class="w-2 h-2 rounded-full inline-block" style="background:${THREAT_COLORS[row.threat_level]||'#6b7280'}"></span></td>
+                <td>${fmtIP(row.src_ip)}</td>
+                <td>${fmtScore(row.anomaly_score)}</td>
+                <td>${threatBadge(row.threat_level)}</td>
+                <td><a href="/ja4/${encodeURIComponent(row.ja4||'')}" onclick="event.stopPropagation()" class="text-purple-400 hover:underline font-mono text-[11px]" title="${escapeHtml(row.ja4||'')}">${escapeHtml((row.ja4||'').substring(0,22))}…</a></td>
+                <td class="font-mono text-xs">${row.hits||0}</td>
+                <td class="font-mono text-xs">${parseFloat(row.hit_velocity||0).toFixed(1)}</td>
+                <td class="font-mono text-xs">${parseFloat(row.fuzzing_index||0).toFixed(3)}</td>
+                <td class="text-xs max-w-[100px] truncate">${escapeHtml(row.host||'')}</td>
+                <td class="text-xs max-w-[100px] truncate">${fmtASN(row.asn_org)}</td>
+                <td>${fmtCountry(row.country_code)}</td>
+                <td class="text-xs">${escapeHtml(row.browser_family||'')}</td>
+                <td class="text-xs">${row.bot_name ? fmtBotName(row.bot_name) : ''}</td>
+                <td class="text-[11px] text-gray-400">${(row.detected_at||'').substring(0,16)}</td>
+            </tr>`;
+        }).join('') || '<tr><td colspan="14" class="text-center text-gray-500 py-6">Aucun membre</td></tr>';
+
+    } catch(e) { console.error('Cluster load error:', e); }
+}
+
+function kpi(label, value) {
+    return `<div class="kpi-card"><div class="text-[10px] text-gray-500 uppercase tracking-wider mb-1">${label}</div><div class="text-lg font-bold text-white">${value}</div></div>`;
+}
+
+// Bulk classify all IPs in cluster
+document.getElementById('cls-all-btn').onclick = async () => {
+    if (!clusterIPs.length) return;
+    const type = document.getElementById('cls-select').value;
+    const result = document.getElementById('cls-result');
+    let ok = 0, fail = 0;
+    result.textContent = '⏳ Classification en cours…';
+    for (const ip of clusterIPs) {
+        try {
+            const r = await fetch('/api/classify', {
+                method:'POST', headers:{'Content-Type':'application/json'},
+                body: JSON.stringify({ip, classification: type, comment: `Cluster #${CID} bulk classify`})
+            });
+            if (r.ok) ok++; else fail++;
+        } catch(e) { fail++; }
+    }
+    result.textContent = `✓ ${ok} IP(s) → ${type}` + (fail ? ` (${fail} erreurs)` : '');
+    result.className = 'text-xs self-center ' + (fail ? 'text-orange-400' : 'text-green-400');
+};
+
+loadCluster();
+</script>
+{% endblock %}

services/dashboard/backend/templates/ja4_detail.html

@@ -0,0 +1,253 @@
+{% extends "base.html" %}
+{% block title %}JA4 SOC — JA4 {{ ja4[:24] }}…{% endblock %}
+{% block page_title %}
+    Empreinte JA4
+    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn" aria-label="Aide">ⓘ</button><div class="doc-panel">
+        <h4>Investigation JA4</h4>
+        <p>Analyse complète d'une empreinte JA4 : toutes les IPs l'utilisant, distribution des menaces, timeline, comportement réseau et logs HTTP.</p>
+        <p><strong>Workflow :</strong> Identifiez si l'empreinte est partagée par des bots (même JA4, IPs différentes) ou un navigateur légitime.</p>
+        <p class="doc-source">Sources : ml_all_scores, ml_detected_anomalies, http_logs</p>
+    </div></span>
+{% endblock %}
+{% block header_actions %}
+    <code class="text-xs text-purple-400 font-mono bg-gray-900 px-3 py-1.5 rounded-lg border border-gray-800 select-all max-w-[400px] truncate" title="{{ ja4 }}">{{ ja4 }}</code>
+{% endblock %}
+{% block content %}
+<div class="space-y-4">
+    <!-- KPIs -->
+    <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-8 gap-3" id="kpi-row"></div>
+
+    <!-- Row 1: Timeline + Threats -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div class="section-card lg:col-span-2">
+            <div class="section-header">
+                <span class="section-title">
+                    Timeline activité
+                    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
+                        <h4>Timeline JA4</h4>
+                        <p>Sessions et IPs actives par heure utilisant cette empreinte. Un pic indique une campagne coordonnée.</p>
+                        <p class="doc-source">Source : ml_all_scores GROUP BY hour</p>
+                    </div></span>
+                </span>
+            </div>
+            <div class="section-body"><div id="timeline-chart" style="height:220px"></div></div>
+        </div>
+        <div class="section-card">
+            <div class="section-header">
+                <span class="section-title">
+                    Distribution menaces
+                    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
+                        <h4>Répartition des niveaux de menace</h4>
+                        <p>Proportion des sessions classifiées par niveau. Une JA4 avec 100% HIGH est probablement un outil automatisé.</p>
+                        <p class="doc-source">Source : ml_all_scores WHERE ja4=…</p>
+                    </div></span>
+                </span>
+            </div>
+            <div class="section-body"><div id="threat-chart" style="height:220px"></div></div>
+        </div>
+    </div>
+
+    <!-- Row 2: IPs using this JA4 + ASN/Geo -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div class="section-card lg:col-span-2">
+            <div class="section-header">
+                <span class="section-title">
+                    IPs associées
+                    <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
+                        <h4>IPs utilisant cette empreinte</h4>
+                        <p>Liste des IP sources ayant présenté cette JA4. Cliquez pour investiguer une IP. Un grand nombre d'IPs avec la même JA4 suggère un botnet.</p>
+                        <p class="doc-source">Source : ml_all_scores</p>
+                    </div></span>
+                </span>
+                <span class="text-xs text-gray-500" id="ip-count"></span>
+            </div>
+            <div class="overflow-x-auto" style="max-height:400px;overflow-y:auto">
+                <table class="data-table"><thead><tr>
+                    <th style="width:16px"></th>
+                    <th>IP</th><th>Score</th><th>Threat</th><th>Hits</th>
+                    <th>Host</th><th>ASN</th><th>Pays</th><th>Browser</th><th>Date</th>
+                </tr></thead><tbody id="scores-body"></tbody></table>
+            </div>
+        </div>
+        <div class="space-y-4">
+            <div class="section-card">
+                <div class="section-header"><span class="section-title">Infrastructure (ASN)</span></div>
+                <div class="section-body"><div id="asn-chart" style="height:180px"></div></div>
+            </div>
+            <div class="section-card">
+                <div class="section-header"><span class="section-title">Géographie</span></div>
+                <div class="section-body"><div id="geo-chart" style="height:180px"></div></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Row 3: HTTP Logs -->
+    <div class="section-card">
+        <div class="section-header">
+            <span class="section-title">
+                Logs HTTP récents
+                <span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
+                    <h4>Requêtes HTTP avec cette JA4</h4>
+                    <p>Échantillon du trafic brut (24h). Analysez les paths, User-Agents et méthodes pour confirmer l'automatisation.</p>
+                    <p class="doc-source">Source : http_logs WHERE ja4=…</p>
+                </div></span>
+            </span>
+        </div>
+        <div class="overflow-x-auto" style="max-height:300px;overflow-y:auto">
+            <table class="data-table"><thead><tr>
+                <th>Time</th><th>IP</th><th>Method</th><th>Host</th><th>Path</th><th>HTTP</th><th>User-Agent</th>
+            </tr></thead><tbody id="http-body"></tbody></table>
+        </div>
+    </div>
+
+    <!-- Row 4: AI Features -->
+    <div class="section-card" id="features-section" style="display:none">
+        <div class="section-header"><span class="section-title">Features ML (par IP×Host)</span></div>
+        <div class="overflow-x-auto" style="max-height:300px;overflow-y:auto">
+            <table class="data-table"><thead><tr>
+                <th>IP</th><th>Host</th><th>Hits</th><th>Velocity</th><th>Fuzz</th>
+                <th>Post%</th><th>Browser</th><th>ASN</th><th>Label</th>
+            </tr></thead><tbody id="features-body"></tbody></table>
+        </div>
+    </div>
+</div>
+{% endblock %}
+{% block scripts %}
+<script>
+const JA4 = '{{ ja4 }}';
+const THREAT_COLORS = {CRITICAL:'#ef4444',HIGH:'#f97316',MEDIUM:'#eab308',NORMAL:'#6b7280',KNOWN_BOT:'#3b82f6',LEGITIMATE_BROWSER:'#22c55e',ANUBIS_DENY:'#dc2626'};
+
+async function loadJA4Detail() {
+    try {
+        const r = await fetch('/api/ja4/' + encodeURIComponent(JA4));
+        const d = await r.json();
+        const p = d.profile || {};
+
+        // KPIs
+        document.getElementById('kpi-row').innerHTML = [
+            kpi('Sessions', fmtNum(p.total_sessions)),
+            kpi('IPs uniques', fmtNum(p.unique_ips)),
+            kpi('Hosts ciblés', fmtNum(p.unique_hosts)),
+            kpi('Hits totaux', fmtNum(p.total_hits)),
+            kpi('Score moyen', p.avg_score != null ? parseFloat(p.avg_score).toFixed(4) : '—'),
+            kpi('Score max', p.max_score != null ? parseFloat(p.max_score).toFixed(4) : '—'),
+            kpi('Menaces', fmtNum(p.threat_count)),
+            kpi('Navigateurs', (p.browser_list||[]).join(', ') || '—'),
+        ].join('');
+
+        // Timeline
+        const tl = d.timeline || [];
+        if (tl.length) {
+            const ch = echarts.init(document.getElementById('timeline-chart'));
+            ch.setOption(ecBase({
+                tooltip: ecTooltip({trigger:'axis'}),
+                grid:{left:40,right:20,top:20,bottom:30},
+                xAxis:{type:'category',data:tl.map(r=>(r.hour||'').substring(11,16)),axisLabel:{color:EC_TEXT,fontSize:10}},
+                yAxis:[
+                    {type:'value',name:'Sessions',nameTextStyle:{color:EC_TEXT,fontSize:10},axisLabel:{color:EC_TEXT,fontSize:10}},
+                    {type:'value',name:'IPs',nameTextStyle:{color:EC_TEXT,fontSize:10},axisLabel:{color:EC_TEXT,fontSize:10},splitLine:{show:false}}
+                ],
+                series:[
+                    {name:'Sessions',type:'bar',data:tl.map(r=>r.sessions),itemStyle:{color:'#6366f1'},barWidth:'60%'},
+                    {name:'IPs actives',type:'line',yAxisIndex:1,data:tl.map(r=>r.active_ips),lineStyle:{color:'#f97316'},itemStyle:{color:'#f97316'},smooth:true}
+                ]
+            }));
+        }
+
+        // Threat pie
+        const threats = d.threats || [];
+        if (threats.length) {
+            const ch2 = echarts.init(document.getElementById('threat-chart'));
+            ch2.setOption(ecBase({
+                tooltip:ecTooltip({trigger:'item'}),
+                series:[{type:'pie',radius:['30%','70%'],
+                    label:{color:EC_TEXT,fontSize:10},
+                    data:threats.map(t=>({name:t.threat_level,value:t.cnt,itemStyle:{color:THREAT_COLORS[t.threat_level]||'#6b7280'}}))}]
+            }));
+        }
+
+        // Scores table (all IPs with this JA4)
+        const scores = d.scores || [];
+        document.getElementById('ip-count').textContent = scores.length + ' sessions';
+        document.getElementById('scores-body').innerHTML = scores.map(row => {
+            const ip = String(row.src_ip||'').replace('::ffff:','');
+            return `<tr onclick="window.location='/ip/${encodeURIComponent(ip)}'">
+                <td><span class="w-2 h-2 rounded-full inline-block" style="background:${THREAT_COLORS[row.threat_level]||'#6b7280'}"></span></td>
+                <td>${fmtIP(row.src_ip)}</td>
+                <td>${fmtScore(row.anomaly_score)}</td>
+                <td>${threatBadge(row.threat_level)}</td>
+                <td class="font-mono text-xs">${row.hits||0}</td>
+                <td class="text-xs max-w-[120px] truncate">${escapeHtml(row.host||'')}</td>
+                <td class="text-xs max-w-[120px] truncate">${fmtASN(row.asn_org)}</td>
+                <td>${fmtCountry(row.country_code)}</td>
+                <td class="text-xs">${escapeHtml(row.browser_family||'')}</td>
+                <td class="text-[11px] text-gray-400">${(row.detected_at||'').substring(0,16)}</td>
+            </tr>`;
+        }).join('') || '<tr><td colspan="10" class="text-center text-gray-500 py-6">Aucune session</td></tr>';
+
+        // ASN breakdown
+        const asnMap = {};
+        scores.forEach(r => { if(r.asn_org) asnMap[r.asn_org] = (asnMap[r.asn_org]||0)+1; });
+        const topASN = Object.entries(asnMap).sort((a,b)=>b[1]-a[1]).slice(0,8);
+        if (topASN.length) {
+            const ch3 = echarts.init(document.getElementById('asn-chart'));
+            ch3.setOption(ecBase({tooltip:ecTooltip({trigger:'axis'}),
+                grid:{left:10,right:30,top:5,bottom:5,containLabel:true},
+                yAxis:{type:'category',data:topASN.map(r=>r[0]).reverse(),axisLabel:{color:EC_TEXT,fontSize:9,width:100,overflow:'truncate'},axisLine:{show:false}},
+                xAxis:{type:'value',show:false},
+                series:[{type:'bar',data:topASN.map(r=>r[1]).reverse(),barWidth:'60%',itemStyle:{color:'#f97316'},
+                    label:{show:true,position:'right',color:EC_TEXT,fontSize:10}}]}));
+        }
+
+        // Geo breakdown
+        const geoMap = {};
+        scores.forEach(r => { if(r.country_code) geoMap[r.country_code] = (geoMap[r.country_code]||0)+1; });
+        const topGeo = Object.entries(geoMap).sort((a,b)=>b[1]-a[1]).slice(0,8);
+        if (topGeo.length) {
+            const ch4 = echarts.init(document.getElementById('geo-chart'));
+            ch4.setOption(ecBase({tooltip:ecTooltip({trigger:'item'}),
+                series:[{type:'pie',radius:['25%','65%'],
+                    label:{color:EC_TEXT,fontSize:10},
+                    data:topGeo.map(([k,v])=>({name:k,value:v}))}]}));
+        }
+
+        // HTTP logs
+        document.getElementById('http-body').innerHTML = (d.http_logs||[]).map(row => `<tr>
+            <td class="text-[11px] whitespace-nowrap text-gray-400">${row.time||''}</td>
+            <td>${fmtIP(row.src_ip)}</td>
+            <td class="font-mono text-xs">${escapeHtml(row.method||'')}</td>
+            <td class="text-xs max-w-[100px] truncate">${escapeHtml(row.host||'')}</td>
+            <td class="text-xs max-w-[200px] truncate font-mono" title="${escapeHtml(row.path||'')}">${escapeHtml(row.path||'')}</td>
+            <td class="font-mono text-[11px] text-gray-400">${escapeHtml(row.http_version||'')}</td>
+            <td class="text-xs max-w-[200px] truncate text-gray-400">${escapeHtml(row.header_user_agent||'')}</td>
+        </tr>`).join('') || '<tr><td colspan="7" class="text-center text-gray-500 py-4">Aucun log</td></tr>';
+
+        // AI features
+        const feats = d.ai_features || [];
+        if (feats.length) {
+            document.getElementById('features-section').style.display = '';
+            document.getElementById('features-body').innerHTML = feats.map(row => {
+                const ip = String(row.src_ip||'').replace('::ffff:','');
+                return `<tr onclick="window.location='/ip/${encodeURIComponent(ip)}'">
+                    <td>${fmtIP(row.src_ip)}</td>
+                    <td class="text-xs">${escapeHtml(row.host||'')}</td>
+                    <td class="font-mono text-xs">${row.hits||0}</td>
+                    <td class="font-mono text-xs">${parseFloat(row.hit_velocity||0).toFixed(2)}</td>
+                    <td class="font-mono text-xs">${parseFloat(row.fuzzing_index||0).toFixed(3)}</td>
+                    <td class="font-mono text-xs">${parseFloat(row.post_ratio||0).toFixed(3)}</td>
+                    <td class="text-xs">${escapeHtml(row.browser_family||'')}</td>
+                    <td class="text-xs">${escapeHtml(row.asn_org||'')}</td>
+                    <td class="text-xs">${escapeHtml(row.asn_label||'')}</td>
+                </tr>`;
+            }).join('');
+        }
+    } catch(e) { console.error('JA4 detail load error:', e); }
+}
+
+function kpi(label, value) {
+    return `<div class="kpi-card"><div class="text-[10px] text-gray-500 uppercase tracking-wider mb-1">${label}</div><div class="text-lg font-bold text-white">${value}</div></div>`;
+}
+
+loadJA4Detail();
+</script>
+{% endblock %}