feat(dashboard): complete SOC dashboard with full monitoring and workflows

- models.html: Full rewrite — 6 KPIs, scoring volume timeline, anomaly rate
  chart, threat breakdown per model, enhanced model cards with validation gate
- classify.html: SOC workflow — suggested unclassified IPs, quick-classify
  buttons, classification stats pie, pre-fill from URL params
- traffic.html: Clickable rows → ip_detail, column sorting, status column,
  search filter, doc tooltips on all chart sections
- scores.html: Search input, clickable rows → ip_detail, LEGITIMATE_BROWSER
  filter button, doc tooltips on distribution + scatter charts
- ip_detail.html: Resource cascade section (headless browser detection),
  status column in HTTP logs table
- detections.html: Doc tooltips on threat/reason/ASN chart sections
- features.html: Doc tooltips on radar/importance/scatter sections
- api.py: 4 new endpoints — /api/models/timeline, /api/models/threats,
  /api/classify/stats, /api/classify/suggested. Traffic API: status + search.

46 routes total. All tests pass (dashboard + bot-detector 36/36).

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

services/dashboard/backend/templates/features.html

@@ -14,20 +14,41 @@
 
     <!-- Row 1: Radar + Feature Importance -->
     <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 Humain vs Bot (Radar)</h3>
-            <div id="chart-radar" style="height:360px"></div>
+        <div class="section-card">
+            <div class="section-header"><span class="section-title">Profil Humain vs Bot (Radar)
+                <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+                    <h4>Comparaison ISP vs Datacenter</h4>
+                    <p>Profil moyen des sessions ISP (humaines) vs sessions datacenter (bots potentiels). Les axes sont les features ML normalisées.</p>
+                    <p><strong>Interprétation :</strong> Plus la zone rouge dépasse la verte, plus la feature est discriminante. hit_velocity, fuzzing_index et post_ratio sont typiquement les plus discriminants.</p>
+                    <p class="doc-source">Source : view_ai_features_1h GROUP BY asn_label</p>
+                </div></span>
+            </span></div>
+            <div class="section-body"><div id="chart-radar" style="height:360px"></div></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">Importance des features (Variance)</h3>
-            <div id="chart-importance" style="height:360px"></div>
+        <div class="section-card">
+            <div class="section-header"><span class="section-title">Importance des features (Variance)
+                <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+                    <h4>Feature importance</h4>
+                    <p>Variance inter-classe (ISP vs datacenter) de chaque feature. Les features à haute variance discriminent le mieux bots et humains.</p>
+                    <p><strong>Usage :</strong> Les features en tête sont les plus utiles pour le modèle EIF. Celles à variance nulle sont élaguées automatiquement.</p>
+                    <p class="doc-source">Source : view_ai_features_1h</p>
+                </div></span>
+            </span></div>
+            <div class="section-body"><div id="chart-importance" style="height:360px"></div></div>
         </div>
     </div>
 
     <!-- Row 2: Scatter full-width -->
-    <div class="bg-gray-900 rounded-xl p-5 border border-gray-800">
-        <h3 class="text-sm font-medium text-gray-400 mb-3">Scatter — Hit Velocity vs Fuzzing Index</h3>
-        <div id="chart-scatter" style="height:420px"></div>
+    <div class="section-card">
+        <div class="section-header"><span class="section-title">Scatter — Hit Velocity vs Fuzzing Index
+            <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+                <h4>Scatter bidimensionnel</h4>
+                <p>Chaque point = une session IP. X = cadence de requêtes, Y = diversité des paths. Les clusters séparés du groupe principal sont des anomalies.</p>
+                <p><strong>Action :</strong> Cliquez sur un point pour ouvrir la page IP détail.</p>
+                <p class="doc-source">Source : view_ai_features_1h</p>
+            </div></span>
+        </span></div>
+        <div class="section-body"><div id="chart-scatter" style="height:420px"></div></div>
     </div>
 
     <!-- Row 3: Distribution histograms (3-col grid) -->