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/traffic.html

@@ -2,6 +2,21 @@
 {% block title %}JA4 SOC — Trafic HTTP{% endblock %}
 {% block content %}
 <div class="space-y-4">
+    <!-- Traffic summary charts -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="bg-gray-900 rounded-xl p-4 border border-gray-800">
+            <h3 class="text-xs font-medium text-gray-500 mb-2">Méthodes HTTP</h3>
+            <div id="method-chart" style="height:160px"></div>
+        </div>
+        <div class="bg-gray-900 rounded-xl p-4 border border-gray-800">
+            <h3 class="text-xs font-medium text-gray-500 mb-2">Top 5 User-Agents</h3>
+            <div id="ua-chart" style="height:160px"></div>
+        </div>
+        <div class="bg-gray-900 rounded-xl p-4 border border-gray-800">
+            <h3 class="text-xs font-medium text-gray-500 mb-2">Top 5 Paths</h3>
+            <div id="path-chart" style="height:160px"></div>
+        </div>
+    </div>
     <div class="flex items-center gap-3 flex-wrap">
         <h2 class="text-lg font-semibold text-white">Logs HTTP (24h)</h2>
         <select id="method-filter" class="px-2 py-1 bg-gray-800 border border-gray-700 rounded text-sm text-gray-300">
@@ -50,8 +65,8 @@ async function loadTraffic() {
             <td class="text-xs max-w-[250px] truncate font-mono" title="${row.path||''}">${row.path||''}</td>
             <td class="font-mono text-xs">${row.http_version||''}</td>
             <td class="text-xs max-w-[200px] truncate" title="${row.header_user_agent||''}">${row.header_user_agent||''}</td>
-            <td class="text-xs font-mono max-w-[100px] truncate">${row.ja4||''}</td>
-            <td>${row.src_country_code||''}</td>
+            <td class="text-xs font-mono max-w-[100px] truncate">${fmtJA4(row.ja4)}</td>
+            <td>${fmtCountry(row.src_country_code)}</td>
         </tr>`).join('') || '<tr><td colspan="9" class="text-center text-gray-500 py-8">Aucun log</td></tr>';
         const total=d.total||0;
         document.getElementById('traffic-info').textContent=`${total} logs — page ${tPage}/${Math.max(1,Math.ceil(total/100))}`;
@@ -66,5 +81,47 @@ document.getElementById('next-btn').onclick=()=>{tPage++;loadTraffic();};
     el.addEventListener(el.tagName==='SELECT'?'change':'input',()=>{tPage=1;loadTraffic();});
 });
 loadTraffic();
+
+// Traffic summary charts
+async function loadTrafficSummary() {
+    try {
+        const r = await fetch('/api/traffic?per_page=500'); const d = await r.json();
+        const rows = d.data||[];
+        const METHOD_COLORS = {GET:'#22c55e',POST:'#3b82f6',PUT:'#eab308',DELETE:'#ef4444',HEAD:'#8b5cf6',OPTIONS:'#6b7280'};
+        // Method distribution
+        const methods = {};
+        const uas = {};
+        const paths = {};
+        rows.forEach(row => {
+            methods[row.method] = (methods[row.method]||0)+1;
+            const ua = (row.header_user_agent||'').substring(0,30) || '(empty)';
+            uas[ua] = (uas[ua]||0)+1;
+            const p = (row.path||'/').split('?')[0];
+            paths[p] = (paths[p]||0)+1;
+        });
+        const ch1 = echarts.init(document.getElementById('method-chart'));
+        ch1.setOption(ecBase({tooltip:ecTooltip({trigger:'item'}),series:[{type:'pie',radius:['30%','65%'],label:{color:EC_TEXT,fontSize:10,formatter:'{b}\n{d}%'},
+            data:Object.entries(methods).map(([k,v])=>({name:k,value:v,itemStyle:{color:METHOD_COLORS[k]||'#6b7280'}}))}]}));
+        // Top UAs
+        const topUA = Object.entries(uas).sort((a,b)=>b[1]-a[1]).slice(0,5);
+        if (topUA.length) {
+            const ch2 = echarts.init(document.getElementById('ua-chart'));
+            ch2.setOption(ecBase({tooltip:ecTooltip({trigger:'axis'}),grid:{left:10,right:40,top:5,bottom:5,containLabel:true},
+                yAxis:{type:'category',data:topUA.map(r=>r[0]).reverse(),axisLabel:{color:EC_TEXT,fontSize:9,width:120,overflow:'truncate'},axisLine:{show:false}},
+                xAxis:{type:'value',show:false},
+                series:[{type:'bar',data:topUA.map(r=>r[1]).reverse(),barWidth:'60%',itemStyle:{color:'#3b82f6'},label:{show:true,position:'right',color:EC_TEXT,fontSize:10}}]}));
+        }
+        // Top paths
+        const topPath = Object.entries(paths).sort((a,b)=>b[1]-a[1]).slice(0,5);
+        if (topPath.length) {
+            const ch3 = echarts.init(document.getElementById('path-chart'));
+            ch3.setOption(ecBase({tooltip:ecTooltip({trigger:'axis'}),grid:{left:10,right:40,top:5,bottom:5,containLabel:true},
+                yAxis:{type:'category',data:topPath.map(r=>r[0]).reverse(),axisLabel:{color:EC_TEXT,fontSize:9,width:120,overflow:'truncate'},axisLine:{show:false}},
+                xAxis:{type:'value',show:false},
+                series:[{type:'bar',data:topPath.map(r=>r[1]).reverse(),barWidth:'60%',itemStyle:{color:'#14b8a6'},label:{show:true,position:'right',color:EC_TEXT,fontSize:10}}]}));
+        }
+    } catch(e) { console.error(e); }
+}
+loadTrafficSummary();
 </script>
 {% endblock %}