+
+ )}
+
+ {activeTab === 'knowledge' && (
+
+
+
+
+ Active Threats
+{threats.filter((t) => !t.mitigated).length}
+
+
+ Mitigated
+{threats.filter((t) => t.mitigated).length}
+
+
+ Avg Threat Score
+
+ {(threats.reduce((a, b) => a + b.threat_score, 0) / (threats.length || 1)).toFixed(2)}
+
+
+ {threats.slice(0, 10).map((threat) => (
+
+
+
+ ))}
+
+ {threat.event_type}
+ {new Date(threat.timestamp).toLocaleTimeString()}
+
+
+
+ {threat.source_ip} → {threat.dest_ip}
+
+ Score: {(threat.threat_score * 100).toFixed(0)}%
+
+ {threat.mitigated && MITIGATED
}
+
+
+ );
+};
+
+export default BlackhorseKGraphDashboard;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..6a9baff
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import BlackhorseKGraphDashboard from './BlackhorseKGraph';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+ {
+ cy.on('tap', 'node', (evt: any) => {
+ console.log('[ʞGRAPH] Node selected:', evt.target.data());
+ });
+ }}
+ />
+
+
+
+ )}
+
+ {activeTab === 'modality' && (
+
+
+ Nodes Extracted
+{knowledgeNodes.length}
+
+
+ Avg Confidence
+
+ {(knowledgeNodes.reduce((a, b) => a + b.confidence, 0) / (knowledgeNodes.length || 1) * 100).toFixed(1)}%
+
+
+
+ Extraction Models
+ {['Haiku', 'Sonnet', 'Opus'].map((model) => ( +
+ {model}
+
+
+
+ ))}
+ n.extracted_by === model).length / (knowledgeNodes.length || 1)) * 100}%`,
+ background: model === 'Opus' ? '#ef4444' : model === 'Sonnet' ? '#f59e0b' : '#22c55e'
+ }}
+ />
+
+
+
+ )}
+
+ {activeTab === 'sovereignty' && (
+
+
+
+
+
+ Active Model: {modality.current_model}
+
+
+
+
+
+
+
+ Tokens In
+{modality.tokens_in.toLocaleString()}
+
+
+ Tokens Out
+{modality.tokens_out.toLocaleString()}
+
+
+ Session Cost
+${modality.cost_this_session.toFixed(4)}
+
+
+ Latency
+{modality.latency_ms}ms
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {sovereignty.status}
+Last Verified: {new Date(sovereignty.last_check).toLocaleString()}
+
+
+ Entanglement Hash
+{sovereignty.entanglement_hash}
+
+
+ Active Protocols
+
+
+
+ GLASS_BREAK
+
+ {sovereignty.glass_break_armed ? 'ARMED' : 'DISARMED'}
+
+
+
+ SEISMIC_LOCK
+ ACTIVE
+
+
+ YENNEFER_QUEUE
+ PROCESSING
+
+
+ SPHOTONIX_MESH
+ BROADCASTING
+
+