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

@@ -91,10 +91,27 @@
         </span></div>
         <div class="overflow-x-auto" style="max-height:35vh; overflow-y:auto">
             <table class="data-table"><thead><tr>
-                <th>Time</th><th>Method</th><th>Host</th><th>Path</th><th>HTTP</th><th>User-Agent</th><th>JA4</th>
+                <th>Time</th><th>Method</th><th>Status</th><th>Host</th><th>Path</th><th>HTTP</th><th>User-Agent</th><th>JA4</th>
             </tr></thead><tbody id="http-body"></tbody></table>
         </div>
     </div>
+
+    <!-- Resource cascade -->
+    <div class="section-card overflow-hidden" id="cascade-section" style="display:none">
+        <div class="section-header"><span class="section-title">Cascade de ressources
+            <span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">?</button><div class="doc-panel">
+                <h4>Analyse de cascade</h4>
+                <p>Détection de navigateurs headless : un vrai navigateur charge une page HTML puis ses sous-ressources (CSS, JS, images) avec un délai croissant. Un bot ne charge souvent que la page principale.</p>
+                <p><strong>Indicateurs :</strong> page_count=1 + max_sub=0 = bot probable. avg_sub_delay très bas = headless rapide.</p>
+                <p class="doc-source">Source : view_resource_cascade_1h</p>
+            </div></span>
+        </span></div>
+        <div class="overflow-x-auto" style="max-height:25vh; overflow-y:auto">
+            <table class="data-table"><thead><tr>
+                <th>Fenêtre</th><th>Host</th><th>Pages</th><th>Sub-resources max</th><th>Délai moyen (ms)</th><th>Écart-type (ms)</th>
+            </tr></thead><tbody id="cascade-body"></tbody></table>
+        </div>
+    </div>
 </div>
 {% endblock %}
 {% block scripts %}
@@ -111,9 +128,10 @@ function initChart(id) {
 
 async function loadIP() {
     try {
-        const [d, radar] = await Promise.all([
+        const [d, radar, cascade] = await Promise.all([
             fetch(`/api/ip/${encodeURIComponent(IP)}`).then(r=>r.json()),
             fetch(`/api/ip/${encodeURIComponent(IP)}/radar`).then(r=>r.json()),
+            fetch(`/api/cascade/${encodeURIComponent(IP)}`).then(r=>r.json()),
         ]);
 
         // KPIs
@@ -209,15 +227,31 @@ async function loadIP() {
         }
 
         // HTTP logs
+        const sc = s => s>=500?'text-red-400':s>=400?'text-orange-400':s>=300?'text-yellow-400':'text-green-400';
         document.getElementById('http-body').innerHTML = (d.http_logs||[]).map(row => `<tr>
             <td class="text-[11px] whitespace-nowrap text-gray-400">${row.time||''}</td>
             <td><span class="font-mono text-xs ${row.method==='POST'?'text-orange-400':'text-gray-300'}">${escapeHtml(row.method||'')}</span></td>
+            <td class="${sc(row.status||0)} font-mono text-[11px]">${row.status||''}</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-[180px] truncate text-gray-400">${escapeHtml(row.header_user_agent||'')}</td>
             <td class="font-mono text-[11px]">${escapeHtml(row.ja4||'')}</td>
-        </tr>`).join('') || '<tr><td colspan="7" class="text-center text-gray-500 py-4">Aucun log</td></tr>';
+        </tr>`).join('') || '<tr><td colspan="8" class="text-center text-gray-500 py-4">Aucun log</td></tr>';
+
+        // Cascade
+        const cascadeRows = cascade.data || [];
+        if (cascadeRows.length) {
+            document.getElementById('cascade-section').style.display = '';
+            document.getElementById('cascade-body').innerHTML = cascadeRows.map(row => `<tr>
+                <td class="text-[11px] whitespace-nowrap text-gray-400">${(row.window_start||'').substring(0,16)}</td>
+                <td class="text-xs">${escapeHtml(row.host||'')}</td>
+                <td class="font-mono text-xs">${row.page_count||0}</td>
+                <td class="font-mono text-xs">${row.max_sub_resources||0}</td>
+                <td class="font-mono text-xs ${(row.avg_sub_delay_ms||0)<50?'text-red-400':'text-gray-300'}">${(row.avg_sub_delay_ms||0).toFixed(0)}</td>
+                <td class="font-mono text-xs">${(row.stddev_sub_delay_ms||0).toFixed(0)}</td>
+            </tr>`).join('');
+        }
 
     } catch(e) { console.error(e); }
 }