This commit is contained in:
2026-04-05 00:43:23 +05:30
commit 8be37d3e92
425 changed files with 101853 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
import React from 'react';
export default function EventDetails() {
return (
<div className="fixed right-6 bottom-32 w-80 z-40 animate-fade-in-right delay-200" style={{ right: '24px', bottom: '128px' }}>
<div className="glass neon-border rounded-xl shadow-2xl flex flex-col bg-black/80 backdrop-blur-2xl border-white/10 overflow-hidden card-interactive">
<div className="p-4 flex justify-between items-center border-b border-white/5 bg-white/5 relative">
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#a88cfb]/50 to-transparent"></div>
<h3 className="text-[10px] uppercase font-mono-data tracking-widest text-violet-400">Selected Event Details</h3>
<button className="text-zinc-500 hover:text-white transition-colors cursor-pointer material-symbols-outlined text-sm">close</button>
</div>
<div className="p-4 space-y-4">
<div className="bg-black/40 rounded-lg p-3 border border-white/5 shadow-inner">
<p className="text-[8px] font-mono-data text-zinc-500 uppercase mb-1">Raw Signature</p>
<p className="text-[10px] font-mono-data break-all text-[#a88cfb] opacity-90">SHA256: 8a7f11c2a10be...b9921e2a10bf</p>
</div>
<div className="bg-black/40 rounded-lg p-3 border border-white/5 shadow-inner flex justify-between items-center">
<p className="text-[8px] font-mono-data text-zinc-500 uppercase">Geolocation</p>
<div className="text-right">
<span className="text-[10px] font-mono-data text-white block">Moscow, RU</span>
<span className="text-[9px] font-mono-data font-bold italic text-[#00daf3]">PROXIED</span>
</div>
</div>
</div>
<div className="p-3 border-t border-white/5 bg-white/[0.02] flex gap-2">
<button className="flex-1 bg-violet-500/20 text-violet-400 hover:bg-violet-500 hover:text-white border border-violet-500/50 py-2.5 rounded-lg text-[10px] font-bold tracking-[0.2em] transition-all uppercase btn-interactive shadow-[0_0_10px_rgba(167,139,250,0.1)] focus:ring-2 focus:ring-violet-500/50">
Trace Route
</button>
<button className="px-3 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white border border-white/10 rounded-lg transition-all flex items-center justify-center btn-interactive">
<span className="material-symbols-outlined text-[14px]">share</span>
</button>
</div>
</div>
</div>
);
}

View File

@@ -0,0 +1,32 @@
import React from 'react';
export default function LogAnalytics() {
const metrics = [
{ title: "Ingestion Rate", icon: "trending_up", iconColor: "#A78BFA", value: "1.2", unit: "GB/s" },
{ title: "Active Agents", icon: "groups", iconColor: "#00daf3", value: "242" },
{ title: "Threat Level", icon: "warning", iconColor: "#ef4444", value: "CRITICAL", sub: "3 ONGOING BREACHES" },
{ title: "Memory Usage", icon: "memory", iconColor: "#E9D9FF", value: "84", unit: "%" },
];
return (
<div className="grid grid-cols-4 gap-4 animate-fade-in-scale">
{metrics.map((m, idx) => (
<div key={idx} className="bg-[#0C0814]/80 border border-[#A78BFA]/10 rounded-2xl p-5 flex flex-col justify-between h-28 card-interactive relative overflow-hidden group hover:border-[#A78BFA]/30 hover:bg-[#110D1A] transition-colors shadow-lg">
<div className="flex justify-between items-center relative z-10 w-full">
<span className="text-[10px] text-[#8B7BB1] tracking-[0.15em] uppercase font-bold">{m.title}</span>
<span className="material-symbols-outlined text-[20px]" style={{ color: m.iconColor }}>{m.icon}</span>
</div>
<div className="relative z-10 flex flex-col items-start justify-end flex-1 mt-2">
<div className="flex items-baseline gap-1.5">
<span className="text-[28px] font-black text-white tracking-tight" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
{m.value}
</span>
{m.unit && <span className="text-[12px] font-bold tracking-wide" style={{ color: m.iconColor }}>{m.unit}</span>}
</div>
{m.sub && <span className="text-[8.5px] font-mono-data text-[#8B7BB1]/80 uppercase tracking-[0.1em] mt-0.5">{m.sub}</span>}
</div>
</div>
))}
</div>
);
}

View File

@@ -0,0 +1,135 @@
const logs = [
{
timestamp: "2024-05-20 14:22:01.442",
level: "ERROR",
agentId: "AX-982_CORE",
payload: { text: "Unauthorized handshake from peer", ip: "[192.168.1.104].", json: '{"action": "TERMINATE_SESSION"}' },
icon: "dangerous",
statusClass: "status-strip-error",
levelClass: "bg-red-500/10 text-[#ee7d77] border-[#ee7d77]/20 shadow-[0_0_5px_rgba(238,125,119,0.2)]"
},
{
timestamp: "2024-05-20 14:21:58.112",
level: "INFO",
agentId: "SYS_MONITOR",
payload: { text: "Key rotation complete. Nodes synced.", ip: "", json: '{"latency": "12ms", "status": "nominal"}' },
icon: "info",
statusClass: "status-strip-info",
levelClass: "bg-purple-500/10 text-[#a88cfb] border-[#a88cfb]/20"
},
{
timestamp: "2024-05-20 14:21:45.890",
level: "SUCCESS",
agentId: "SCAN_AGENT_04",
payload: { text: "Quantum hash verification PASSED.", ip: "", json: '{"sector": "7B", "integrity": 1.0}' },
icon: "check_circle",
statusClass: "status-strip-success",
levelClass: "bg-cyan-500/10 text-[#00daf3] border-[#00daf3]/20"
},
{
timestamp: "2024-05-20 14:21:12.001",
level: "WARN",
agentId: "THERMAL_REG",
payload: { text: "Blade rack 4 temp high.", ip: "", json: '{"temp": "72°C", "limit": "70°C"}' },
icon: "report_problem",
statusClass: "status-strip-warning",
levelClass: "bg-amber-500/10 text-[#ffb300] border-[#ffb300]/20"
},
{
timestamp: "2024-05-20 14:20:55.223",
level: "INFO",
agentId: "USER_AUTH",
payload: { text: "Admin login sequence initiated.", ip: "", json: '{"terminal": "ST-09", "auth": "biometric"}' },
icon: "verified_user",
statusClass: "status-strip-info",
levelClass: "bg-purple-500/10 text-[#a88cfb] border-[#a88cfb]/20"
}
];
export default function LogTable() {
return (
<div className="glass rounded-xl border neon-border flex flex-col min-h-0 flex-1 overflow-hidden animate-fade-in-up delay-100">
{/* Table Header / Controls */}
<div className="p-4 border-b border-white/5 flex justify-between items-center bg-black/40 backdrop-blur-md z-10 w-full shrink-0">
<div className="flex gap-2">
<button className="h-8 px-3 rounded-md bg-white/5 border border-white/10 text-xs font-mono-data text-zinc-400 hover:text-violet-400 hover:bg-violet-500/20 transition-all flex items-center gap-2 btn-interactive shadow-sm">
<span className="material-symbols-outlined text-sm">filter_alt</span>
Filter
</button>
<button className="h-8 px-3 rounded-md bg-white/5 border border-white/10 text-xs font-mono-data text-zinc-400 hover:text-violet-400 hover:bg-violet-500/20 transition-all flex items-center gap-2 btn-interactive shadow-sm">
<span className="material-symbols-outlined text-sm">sort</span>
Sort
</button>
</div>
<div className="flex gap-4 items-center">
<div className="relative">
<span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 text-sm">search</span>
<input type="text" placeholder="Search logs..." className="h-8 pl-9 pr-4 rounded-md bg-black/50 border border-white/10 text-xs font-mono-data text-zinc-300 placeholder-zinc-600 focus:outline-none focus:border-violet-500/50 focus:ring-1 focus:ring-violet-500/50 w-64 transition-all" />
</div>
<button className="h-8 px-4 rounded-md bg-violet-500/20 text-violet-400 hover:bg-violet-500 hover:text-white border border-violet-500/50 text-xs font-bold tracking-widest uppercase transition-all flex items-center gap-2 btn-interactive shadow-[0_0_10px_rgba(167,139,250,0.1)] hover:shadow-[0_0_15px_rgba(167,139,250,0.4)]">
<span className="material-symbols-outlined text-sm">download</span>
Export PDF
</button>
</div>
</div>
{/* Log Table Body */}
<div className="flex-1 h-0 overflow-y-auto custom-scrollbar relative z-10">
<table className="w-full text-left border-collapse">
<thead className="sticky top-0 bg-black/80 backdrop-blur-md z-20 border-b border-white/5">
<tr>
<th className="px-6 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-48" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Timestamp</th>
<th className="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-24" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Level</th>
<th className="px-4 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-32" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Agent ID</th>
<th className="px-6 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Message Payload</th>
<th className="px-6 py-3 text-[10px] font-bold text-zinc-500 uppercase tracking-widest w-20 text-right" style={{ fontFamily: "'Inter Tight', sans-serif" }}>Status</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
{logs.map((log, idx) => (
<tr key={idx} className={`hover:bg-[#a88cfb]/10 transition-all duration-200 group ${log.statusClass}`}>
<td className="px-6 py-3 font-mono-data text-[11px] syntax-timestamp whitespace-nowrap">{log.timestamp}</td>
<td className="px-4 py-3 whitespace-nowrap">
<span className={`text-[9px] font-mono-data px-2 py-0.5 rounded border font-bold ${log.levelClass}`}>
{log.level}
</span>
</td>
<td className="px-4 py-3 font-mono-data text-[11px] syntax-agent whitespace-nowrap">{log.agentId}</td>
<td className="px-6 py-3 font-mono-data text-[11px] truncate max-w-[300px]">
<span className="syntax-string mr-2 opacity-90">{log.payload.text}</span>
{log.payload.ip && <span className="syntax-ip mr-2" style={{ color: "#00daf3" }}>{log.payload.ip}</span>}
<span className="syntax-key opacity-60 text-xs">{log.payload.json}</span>
</td>
<td className="px-6 py-3 text-right whitespace-nowrap">
<span className={`material-symbols-outlined text-[16px] drop-shadow-lg ${log.level === 'ERROR' ? 'text-[#ee7d77]' : log.level === 'SUCCESS' ? 'text-[#00daf3]' : log.level === 'WARN' ? 'text-[#ffb300]' : 'text-[#a88cfb]'}`}>
{log.icon}
</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
{/* Footer Log Stats */}
<div className="px-6 py-3 border-t border-white/5 flex items-center justify-between text-[10px] font-mono-data text-zinc-500 relative z-10 bg-black/60 backdrop-blur-xl">
<div className="flex items-center gap-4">
<span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full animate-pulse shadow-[0_0_8px_#a88cfb]" style={{ backgroundColor: "#a88cfb" }}></span> LIVE RECAPITULATION</span>
<span>|</span>
<span>Showing {logs.length} events of 44,901</span>
</div>
<div className="flex items-center gap-4">
<span>PAGE 1 OF 3,741</span>
<div className="flex gap-1">
<button className="w-6 h-6 flex items-center justify-center rounded border border-white/10 hover:bg-[#a88cfb]/10 hover:text-[#a88cfb] transition-colors">
<span className="material-symbols-outlined text-sm">chevron_left</span>
</button>
<button className="w-6 h-6 flex items-center justify-center rounded border border-white/10 hover:bg-[#a88cfb]/10 hover:text-[#a88cfb] transition-colors">
<span className="material-symbols-outlined text-sm">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
);
}

View File

@@ -0,0 +1,28 @@
export default function MasterTerminal() {
return (
<section className="h-48 shrink-0 glass-panel rounded-xl neon-border-violet crt-overlay flex flex-col overflow-hidden neon-glow-violet">
<div className="flex items-center justify-between px-4 py-1.5 border-b relative z-10" style={{ backgroundColor: "rgba(168, 140, 251, 0.05)", borderColor: "rgba(168, 140, 251, 0.2)" }}>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-xs" style={{ color: "#a88cfb" }}>terminal</span>
<span className="text-[9px] font-bold uppercase tracking-widest" style={{ color: "#a88cfb", fontFamily: "'Inter Tight', sans-serif" }}>Master Terminal Output</span>
</div>
<div className="flex gap-1.5">
<div className="w-2 h-2 rounded-full bg-zinc-700"></div>
<div className="w-2 h-2 rounded-full bg-zinc-700"></div>
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: "rgba(168, 140, 251, 0.4)" }}></div>
</div>
</div>
<div className="flex-1 p-4 font-mono-data text-[10px] overflow-y-auto custom-scrollbar relative z-10 space-y-1.5 leading-relaxed">
<p className="text-zinc-500">[0.000000] Initializing ThirdEye Sovereign Kernel v4.2.0-stable...</p>
<p className="text-zinc-500">[0.012441] Probing for regional satellite clusters... 12 found.</p>
<p className="opacity-80" style={{ color: "#a88cfb" }}>[1.442091] Authentication layer engaged. Handshaking with local nodes.</p>
<p className="opacity-80" style={{ color: "#00daf3" }}>[2.112440] Network topology re-aligned. Current threat vector: STABLE.</p>
<div className="flex items-center text-white mt-2">
<span className="mr-2" style={{ color: "#a88cfb" }}>op_7742@thirdeye:~$</span>
<span className="opacity-70">tail -f /var/log/kernel_events.log --grep "CRITICAL"</span>
<span className="terminal-cursor"></span>
</div>
</div>
</section>
);
}

View File

@@ -0,0 +1,20 @@
export default function SystemTickerLogs() {
return (
<footer className="h-8 border-t flex items-center overflow-hidden" style={{ backgroundColor: "#0C0C0E", borderColor: "rgba(167, 139, 250, 0.1)" }}>
<div className="flex items-center whitespace-nowrap animate-log-ticker gap-12 w-full pl-[100%]">
<div className="flex items-center gap-2 text-[10px] font-mono-data" style={{ color: "rgba(168, 140, 251, 0.7)" }}>
<span className="font-bold uppercase">[SYSTEM]</span> Kernel optimization complete. (v4.2.0-stable)
</div>
<div className="flex items-center gap-2 text-[10px] font-mono-data text-zinc-500">
<span className="font-bold uppercase" style={{ color: "rgba(0, 218, 243, 0.7)" }}>[NET]</span> Sub-layer latency dropped below 5ms for all local clusters.
</div>
<div className="flex items-center gap-2 text-[10px] font-mono-data text-zinc-500">
<span className="font-bold uppercase" style={{ color: "rgba(238, 125, 119, 0.7)" }}>[SEC]</span> Brute force attempt blocked from 45.1.22.88. Target: Archive_Vault.
</div>
<div className="flex items-center gap-2 text-[10px] font-mono-data" style={{ color: "rgba(168, 140, 251, 0.7)" }}>
<span className="font-bold uppercase">[AI]</span> Neural agent AX-982 is retraining on high-entropy log clusters.
</div>
</div>
</footer>
);
}

View File

@@ -0,0 +1,90 @@
/* System Logs specific CSS */
.glass-panel {
background: linear-gradient(180deg, rgba(28, 20, 45, 0.5) 0%, rgba(18, 14, 28, 0.8) 100%);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(167, 139, 250, 0.12);
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.glass-panel::before {
content: '';
position: absolute;
left: 0;
top: 0%;
height: 100%;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(167, 139, 250, 0.5), transparent);
opacity: 0;
transition: opacity 0.4s ease;
}
.glass-panel:hover {
transform: translateY(-2px);
border-color: rgba(167, 139, 250, 0.3);
box-shadow: 0 10px 40px rgba(167, 139, 250, 0.15);
}
.glass-panel:hover::before {
opacity: 1;
}
.neon-glow-violet {
box-shadow: 0 0 20px rgba(167, 139, 250, 0.15);
}
.neon-border-violet {
border-color: rgba(167, 139, 250, 0.3);
}
.status-strip-error { border-left: 4px solid #ee7d77; }
.status-strip-warning { border-left: 4px solid #ffb300; } /* changed yellow to standard warning */
.status-strip-success { border-left: 4px solid #00daf3; } /* mapping success to primary cyan */
.status-strip-info { border-left: 4px solid #a88cfb; }
.crt-overlay {
position: relative;
}
.crt-overlay::after {
content: " ";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
@keyframes terminal-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.terminal-cursor {
display: inline-block;
width: 8px;
height: 14px;
background-color: #a88cfb;
animation: terminal-blink 1s step-end infinite;
vertical-align: middle;
margin-left: 4px;
}
.syntax-timestamp { color: #8b5cf6; }
.syntax-agent { color: #c7b4ff; font-weight: 600; }
.syntax-key { color: #a88cfb; }
.syntax-string { color: #e7e4ec; opacity: 0.9; }
.syntax-ip { color: #00daf3; font-style: italic; }
@keyframes log-ticker {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.animate-log-ticker {
display: inline-block;
animation: log-ticker 35s linear infinite;
}

View File

@@ -0,0 +1,42 @@
import "./logs.css";
import Sidebar from "../components/Sidebar";
import TopBar from "../components/TopBar";
import LogAnalytics from "./LogAnalytics";
import LogTable from "./LogTable";
import MasterTerminal from "./MasterTerminal";
import SystemTickerLogs from "./SystemTickerLogs";
export const metadata = {
title: "ThirdEye | System Logs",
description: "Advanced System Logs — ThirdEye Sovereign Protocol",
};
export default function LogsPage() {
return (
<div className="flex h-screen overflow-hidden bg-[#09090B] text-white">
<Sidebar />
<main className="flex-1 ml-[240px] flex flex-col h-screen overflow-hidden bg-[#09090B] relative">
<TopBar />
{/* Log Content */}
<div className="flex-1 p-8 overflow-hidden flex flex-col gap-6">
{/* Analytics Top Bar */}
<LogAnalytics />
{/* Main Log Viewer & Console */}
<div className="flex-1 flex flex-col gap-4 overflow-hidden">
{/* Table Section */}
<LogTable />
{/* Interactive Console */}
<MasterTerminal />
</div>
</div>
{/* System Ticker */}
<SystemTickerLogs />
</main>
</div>
);
}