feat(dashboard): add clickable drill-down to all data elements

Add navigation helpers (fmtASN, fmtCountry, fmtJA4, fmtBotName,
fmtThreatLink, fmtLabel) to base.html for SOC analyst drill-down.

Update all templates:
- overview.html: clickable table cells + ECharts click handlers for
  ASN, country, JA4, bot, and threat charts
- detections.html: URL param pre-filters, active filter bar with
  clear buttons, clickable ASN/country/JA4/threat in table
- scores.html: URL param pre-filters, clickable threat/JA4/country
- traffic.html: clickable JA4 and country columns
- ip_detail.html: clickable threat/JA4 in detections, clickable
  asn_org/country_code/asn_label in AI features grid
- network.html: click handlers on ASN treemap and country sunburst,
  fmtJA4Full/fmtLabel/fmtBotName/fmtASN in tables
- features.html: scatter plot click navigates to /ip/{ip}

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

services/dashboard/backend/templates/ip_detail.html

@@ -7,19 +7,27 @@
         <h2 class="text-lg font-semibold text-white">Investigation IP : <span class="text-brand-500">{{ ip }}</span></h2>
     </div>
     <!-- KPI Row -->
-    <div class="grid grid-cols-2 md:grid-cols-5 gap-4" id="ip-kpis">
+    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
         <div class="kpi-card"><div class="text-xs text-gray-500 mb-1">Détections</div><div class="text-xl font-bold text-red-400" id="ip-det-count">—</div></div>
         <div class="kpi-card"><div class="text-xs text-gray-500 mb-1">Pire score</div><div class="text-xl font-bold" id="ip-worst-score">—</div></div>
         <div class="kpi-card"><div class="text-xs text-gray-500 mb-1">Récurrence</div><div class="text-xl font-bold text-yellow-400" id="ip-recurrence">—</div></div>
         <div class="kpi-card"><div class="text-xs text-gray-500 mb-1">Requêtes HTTP</div><div class="text-xl font-bold text-gray-200" id="ip-http-count">—</div></div>
         <div class="kpi-card"><div class="text-xs text-gray-500 mb-1">Scores ML</div><div class="text-xl font-bold text-brand-500" id="ip-score-count">—</div></div>
     </div>
-    <!-- Score timeline -->
-    <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
-        <h3 class="text-sm font-medium text-gray-400 mb-3">Scores ML dans le temps</h3>
-        <canvas id="score-chart" height="150"></canvas>
+
+    <!-- Charts Row: Radar + Score timeline -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
+            <h3 class="text-sm font-medium text-gray-400 mb-3">Profil comportemental (vs baseline)</h3>
+            <div id="radar-chart" style="height:320px"></div>
+        </div>
+        <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
+            <h3 class="text-sm font-medium text-gray-400 mb-3">Scores ML dans le temps</h3>
+            <div id="score-chart" style="height:320px"></div>
+        </div>
     </div>
-    <!-- Detections -->
+
+    <!-- Detections table -->
     <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
         <h3 class="text-sm font-medium text-gray-400 px-5 py-3 border-b border-gray-800">Détections</h3>
         <div class="overflow-x-auto max-h-[40vh] overflow-y-auto">
@@ -28,11 +36,13 @@
             </tr></thead><tbody id="det-body"></tbody></table>
         </div>
     </div>
-    <!-- AI Features -->
+
+    <!-- AI Features grid -->
     <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden" id="features-section" style="display:none">
         <h3 class="text-sm font-medium text-gray-400 px-5 py-3 border-b border-gray-800">Features AI</h3>
-        <div class="p-5 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm" id="features-grid"></div>
+        <div class="p-5 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 text-sm" id="features-grid"></div>
     </div>
+
     <!-- HTTP Logs -->
     <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
         <h3 class="text-sm font-medium text-gray-400 px-5 py-3 border-b border-gray-800">Dernières requêtes HTTP (100 max)</h3>
@@ -42,6 +52,7 @@
             </tr></thead><tbody id="http-body"></tbody></table>
         </div>
     </div>
+
     <!-- Classify -->
     <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
         <h3 class="text-sm font-medium text-gray-400 mb-3">Classifier cette IP</h3>
@@ -59,40 +70,93 @@
 {% block scripts %}
 <script>
 const IP = "{{ ip }}";
-let scoreChart;
+let charts = {};
+function initChart(id) {
+    const el = document.getElementById(id);
+    if (!el) return null;
+    if (charts[id]) charts[id].dispose();
+    charts[id] = echarts.init(el);
+    return charts[id];
+}
+
 async function loadIP() {
     try {
-        const r = await fetch(`/api/ip/${encodeURIComponent(IP)}`); const d = await r.json();
+        const [d, radar] = await Promise.all([
+            fetch(`/api/ip/${encodeURIComponent(IP)}`).then(r=>r.json()),
+            fetch(`/api/ip/${encodeURIComponent(IP)}/radar`).then(r=>r.json()),
+        ]);
+
+        // KPIs
         document.getElementById('ip-det-count').textContent = d.detections?.length ?? 0;
         document.getElementById('ip-http-count').textContent = d.http_logs?.length ?? 0;
         document.getElementById('ip-score-count').textContent = d.scores?.length ?? 0;
         if (d.recurrence?.length) {
-            const rec = d.recurrence[0];
-            document.getElementById('ip-recurrence').textContent = rec.recurrence || 0;
-            document.getElementById('ip-worst-score').innerHTML = fmtScore(rec.worst_score);
+            document.getElementById('ip-recurrence').textContent = d.recurrence[0].recurrence || 0;
+            document.getElementById('ip-worst-score').innerHTML = fmtScore(d.recurrence[0].worst_score);
         }
+
+        // Radar chart
+        if (radar.features?.length && Object.keys(radar.ip_values).length) {
+            const labels = radar.features.map(f => f.replace('_',' '));
+            const ipVals = radar.features.map(f => radar.ip_values[f] ?? 0);
+            const humanVals = radar.features.map(f => radar.human_baseline[f] ?? 0);
+            const botVals = radar.features.map(f => radar.bot_baseline[f] ?? 0);
+            // Normalize to 0-1
+            const maxVals = radar.features.map((f,i) => Math.max(ipVals[i], humanVals[i], botVals[i], 0.001));
+            const norm = (arr) => arr.map((v,i) => +(v/maxVals[i]).toFixed(3));
+
+            const ch = initChart('radar-chart');
+            ch.setOption(ecBase({
+                tooltip: ecTooltip({}),
+                legend: {data:['Cette IP','Humain moyen','Bot moyen'], bottom:0, textStyle:{color:EC_TEXT,fontSize:11}},
+                radar: {
+                    indicator: labels.map((l,i) => ({name:l, max:1})),
+                    shape:'polygon',
+                    splitArea:{areaStyle:{color:['rgba(99,102,241,0.02)','rgba(99,102,241,0.04)']}},
+                    splitLine:{lineStyle:{color:EC_GRID}},
+                    axisLine:{lineStyle:{color:EC_GRID}},
+                    axisName:{color:EC_TEXT,fontSize:10},
+                },
+                series: [{
+                    type:'radar',
+                    data: [
+                        {value:norm(ipVals), name:'Cette IP', lineStyle:{color:'#f97316',width:2}, areaStyle:{color:'rgba(249,115,22,0.15)'}, itemStyle:{color:'#f97316'}},
+                        {value:norm(humanVals), name:'Humain moyen', lineStyle:{color:'#22c55e',width:1,type:'dashed'}, areaStyle:{color:'rgba(34,197,94,0.05)'}, itemStyle:{color:'#22c55e'}},
+                        {value:norm(botVals), name:'Bot moyen', lineStyle:{color:'#ef4444',width:1,type:'dashed'}, areaStyle:{color:'rgba(239,68,68,0.05)'}, itemStyle:{color:'#ef4444'}},
+                    ]
+                }]
+            }));
+        }
+
+        // Score timeline
+        if (d.scores?.length) {
+            const scores = [...d.scores].reverse();
+            const ch = initChart('score-chart');
+            ch.setOption(ecBase({
+                tooltip: ecTooltip({trigger:'axis'}),
+                grid: {left:50,right:20,top:20,bottom:30},
+                xAxis: {type:'category', data:scores.map(s=>(s.detected_at||'').substring(11,16)), axisLine:{lineStyle:{color:EC_GRID}}, axisLabel:{color:EC_TEXT}},
+                yAxis: {type:'value', min:0, max:1, splitLine:{lineStyle:{color:EC_GRID,type:'dashed'}}, axisLabel:{color:EC_TEXT}},
+                series: [{
+                    type:'line', data:scores.map(s=>s.anomaly_score), smooth:true,
+                    areaStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'rgba(99,102,241,0.3)'},{offset:1,color:'rgba(99,102,241,0.02)'}])},
+                    lineStyle:{color:'#6366f1',width:2}, itemStyle:{color:'#6366f1'}, symbol:'circle', symbolSize:4,
+                }]
+            }));
+        }
+
         // Detections table
         document.getElementById('det-body').innerHTML = (d.detections||[]).map(row => `<tr>
             <td class="text-xs whitespace-nowrap">${row.detected_at||''}</td>
             <td>${fmtScore(row.anomaly_score)}</td>
             <td>${fmtScore(row.raw_anomaly_score)}</td>
-            <td>${threatBadge(row.threat_level)}</td>
-            <td class="text-xs font-mono max-w-[100px] truncate">${row.ja4||''}</td>
+            <td>${fmtThreatLink(row.threat_level)}</td>
+            <td class="text-xs font-mono max-w-[100px] truncate">${fmtJA4(row.ja4)}</td>
             <td class="text-xs max-w-[120px] truncate">${row.host||''}</td>
             <td>${row.hits||0}</td>
             <td class="text-xs max-w-[200px] truncate">${row.reason||''}</td>
         </tr>`).join('') || '<tr><td colspan="8" class="text-center text-gray-500 py-4">Aucune détection</td></tr>';
-        // Score chart
-        if (d.scores?.length) {
-            const labels = d.scores.map(s => (s.detected_at||'').substring(11,16));
-            const data = d.scores.map(s => s.anomaly_score);
-            if (scoreChart) scoreChart.destroy();
-            scoreChart = new Chart(document.getElementById('score-chart'), {
-                type:'line', data:{labels:labels.reverse(), datasets:[{label:'Score',data:data.reverse(),
-                borderColor:'#6366f1',backgroundColor:'rgba(99,102,241,0.1)',fill:true,tension:0.3,pointRadius:2}]},
-                options:{responsive:true,plugins:{legend:{display:false}},scales:{y:{min:0,max:1,ticks:{color:'#9ca3af'}},x:{ticks:{color:'#9ca3af',maxTicksLimit:12}}}}
-            });
-        }
+
         // AI Features
         if (d.ai_features?.length) {
             const f = d.ai_features[0];
@@ -100,10 +164,18 @@ async function loadIP() {
             const skip = new Set(['src_ip','window_start','ja4','host','bot_name','src_ip_str']);
             grid.innerHTML = Object.entries(f).filter(([k])=>!skip.has(k)).map(([k,v]) => {
                 let val = typeof v === 'number' ? v.toFixed(4) : v;
-                return `<div class="bg-gray-800 rounded-lg p-2"><div class="text-[10px] text-gray-500 truncate">${k}</div><div class="text-sm text-gray-200 font-mono">${val}</div></div>`;
+                let color = 'text-gray-200';
+                if (typeof v === 'number' && v > 0.7) color = 'text-red-400';
+                else if (typeof v === 'number' && v > 0.4) color = 'text-orange-400';
+                let display = `<span class="text-sm ${color} font-mono">${val}</span>`;
+                if (k === 'asn_org' && v) display = `<span class="text-sm">${fmtASN(v)}</span>`;
+                else if (k === 'country_code' && v) display = `<span class="text-sm">${fmtCountry(v)}</span>`;
+                else if (k === 'asn_label' && v) display = `<span class="text-sm">${fmtLabel(v)}</span>`;
+                return `<div class="bg-gray-800 rounded-lg p-2"><div class="text-[10px] text-gray-500 truncate">${k}</div>${display}</div>`;
             }).join('');
             document.getElementById('features-section').style.display = '';
         }
+
         // HTTP logs
         document.getElementById('http-body').innerHTML = (d.http_logs||[]).map(row => `<tr>
             <td class="text-xs whitespace-nowrap">${row.time||''}</td>
@@ -114,8 +186,11 @@ async function loadIP() {
             <td class="text-xs max-w-[200px] truncate">${row.header_user_agent||''}</td>
             <td class="text-xs font-mono">${row.ja4||''}</td>
         </tr>`).join('') || '<tr><td colspan="7" class="text-center text-gray-500 py-4">Aucun log</td></tr>';
+
     } catch(e) { console.error(e); }
 }
+
+// Classify button
 document.getElementById('cls-btn').onclick = async () => {
     try {
         const r = await fetch('/api/classify', {method:'POST', headers:{'Content-Type':'application/json'},
@@ -126,6 +201,8 @@ document.getElementById('cls-btn').onclick = async () => {
             : `<span class="text-red-400">✗ Erreur : ${d.detail||'unknown'}</span>`;
     } catch(e) { document.getElementById('cls-result').innerHTML = `<span class="text-red-400">✗ ${e}</span>`; }
 };
+
 loadIP();
+window.addEventListener('resize', () => Object.values(charts).forEach(c => c?.resize()));
 </script>
 {% endblock %}