Create src/components/SystemHealth.js

src/components/SystemHealth.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { Activity, ShieldCheck, Server } from 'lucide-react';
+
+const SystemHealth = () => {
+  const [status, setStatus] = useState({ loading: true, online: false, data: null });
+
+  useEffect(() => {
+    const checkKernel = async () => {
+      try {
+        const response = await fetch('/api/status');
+        const data = await response.json();
+        setStatus({ loading: false, online: true, data });
+      } catch (error) {
+        setStatus({ loading: false, online: false, data: null });
+      }
+    };
+    checkKernel();
+  }, []);
+
+  return (
+    <div className="p-4 bg-slate-900/80 border border-slate-800 rounded-xl space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] font-black uppercase tracking-widest text-slate-500">Kernel Link</span>
+        {status.online ? (
+          <span className="flex items-center gap-1 text-[9px] font-bold text-emerald-500 uppercase">
+            <ShieldCheck className="w-3 h-3" /> Secure
+          </span>
+        ) : (
+          <span className="text-[9px] font-bold text-red-500 uppercase">Disconnected</span>
+        )}
+      </div>
+
+      <div className="flex items-center gap-4">
+        <div className={`p-2 rounded-lg ${status.online ? 'bg-emerald-500/10' : 'bg-slate-800'}`}>
+          <Server className={`w-4 h-4 ${status.online ? 'text-emerald-500' : 'text-slate-600'}`} />
+        </div>
+        <div>
+          <p className="text-[11px] font-mono text-slate-300">
+            {status.data?.kernel || 'Checking...'}
+          </p>
+          <p className="text-[9px] text-slate-500 uppercase font-bold">
+            {status.data?.vault_encryption || 'Initializing Vault'}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SystemHealth;