Spaces:

vfven
/

mission-control-v2

Running

File size: 18,671 Bytes

26d3b03

<!DOCTYPE html>

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>MISSION_CONTROL | NEURAL ARCHITECT</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Manrope:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              "on-tertiary-container": "#533a00",
              "secondary-container": "#006d42",
              "primary": "#99f7ff",
              "surface-container-high": "#1b2028",
              "tertiary-fixed": "#feb700",
              "on-secondary": "#005331",
              "secondary-fixed": "#37ee9b",
              "on-error-container": "#ffa8a3",
              "on-tertiary-fixed": "#392700",
              "background": "#0a0e14",
              "on-surface": "#f1f3fd",
              "surface-bright": "#262c36",
              "secondary-dim": "#19df8f",
              "on-secondary-container": "#e2ffe9",
              "surface-container-lowest": "#000000",
              "on-primary-container": "#00555a",
              "on-error": "#490006",
              "error-container": "#9f0519",
              "error-dim": "#d7383b",
              "on-tertiary-fixed-variant": "#5f4200",
              "on-secondary-fixed": "#003d23",
              "tertiary": "#ffc965",
              "tertiary-container": "#feb700",
              "inverse-surface": "#f8f9ff",
              "on-primary-fixed-variant": "#006065",
              "on-primary": "#005f64",
              "surface-tint": "#99f7ff",
              "surface-container-highest": "#20262f",
              "outline-variant": "#44484f",
              "on-surface-variant": "#a8abb4",
              "on-secondary-fixed-variant": "#005d38",
              "secondary": "#37ee9b",
              "surface": "#0a0e14",
              "on-primary-fixed": "#004145",
              "inverse-on-surface": "#51555d",
              "outline": "#72757d",
              "surface-container-low": "#0f141a",
              "surface-dim": "#0a0e14",
              "tertiary-fixed-dim": "#ecaa00",
              "secondary-fixed-dim": "#19df8f",
              "on-tertiary": "#5f4200",
              "inverse-primary": "#006a70",
              "primary-fixed-dim": "#00e2ee",
              "tertiary-dim": "#ecaa00",
              "primary-fixed": "#00f1fe",
              "primary-dim": "#00e2ee",
              "primary-container": "#00f1fe",
              "error": "#ff716c",
              "surface-container": "#151a21",
              "surface-variant": "#20262f",
              "on-background": "#f1f3fd"
            },
            fontFamily: {
              "headline": ["Space Grotesk"],
              "body": ["Manrope"],
              "label": ["Space Grotesk"]
            },
            borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
          },
        },
      }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 2px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #00e2ee;
        }
        body {
            background-color: #0a0e14;
            color: #f1f3fd;
            font-family: 'Manrope', sans-serif;
        }
        .terminal-text {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }
    </style>
</head>
<body class="antialiased overflow-hidden">
<!-- TopAppBar -->
<header class="fixed top-0 w-full z-50 bg-[#0a0e14]/60 backdrop-blur-xl border-b border-[#44484f]/20 shadow-[0_4px_20px_rgba(10,14,20,0.8)] flex justify-between items-center px-6 h-16 w-full">
<div class="flex items-center gap-8">
<span class="text-2xl font-bold tracking-tighter text-[#00f2ff] drop-shadow-[0_0_8px_rgba(0,242,255,0.5)] font-['Space_Grotesk']">MISSION_CONTROL</span>
<nav class="hidden md:flex gap-6 font-['Space_Grotesk'] tracking-wider uppercase text-sm">
<a class="text-[#00f2ff] border-b-2 border-[#00f2ff] pb-1 transition-colors" href="#">SYSTEM: OPTIMAL</a>
<a class="text-[#f1f3fd]/60 hover:text-[#f1f3fd] transition-colors" href="#">TELEMETRY: LIVE</a>
</nav>
</div>
<div class="flex items-center gap-4">
<button class="flex items-center gap-2 px-4 py-1.5 border border-outline-variant/30 text-primary hover:bg-[#20262f] transition-all duration-300 active:scale-95">
<span class="material-symbols-outlined text-sm">bolt</span>
<span class="font-label text-xs tracking-widest uppercase">Task: Strategic Oversight</span>
</button>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[#00f2ff] p-2 hover:bg-[#20262f] transition-all rounded-full cursor-pointer" data-icon="settings">settings</span>
<span class="material-symbols-outlined text-[#00f2ff] p-2 hover:bg-[#20262f] transition-all rounded-full cursor-pointer" data-icon="notifications_active" style="font-variation-settings: 'FILL' 1;">notifications_active</span>
<span class="material-symbols-outlined text-[#00f2ff] p-2 hover:bg-[#20262f] transition-all rounded-full cursor-pointer" data-icon="account_circle">account_circle</span>
</div>
</div>
</header>
<!-- SideNavBar -->
<aside class="fixed left-0 h-full w-64 z-40 bg-[#0f141a] border-r border-[#44484f]/20 shadow-[4px_0_24px_rgba(0,0,0,0.5)] flex flex-col h-screen pt-20 pb-6">
<div class="px-6 mb-8">
<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 rounded-full bg-surface-container-highest border border-primary/20 flex items-center justify-center overflow-hidden">
<img alt="AI Core" data-alt="minimalist digital illustration of a glowing blue cybernetic brain core against a dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUNw-q9MgsEvWW1sc0yczTttLDOhsny62BhvkOFDB5iazndoFG5At0eehMVHXk65XLFdUSHzHimK51eEBC0OnX36VkKfcY2vuRFLcOKSLU-5KbZsPW55C7cQmp-AnBbLE3lXzRzC0OKxBpls0Hdg_pItV_rMks1eyZZt-12SuyF-SOwc9MWVCn4zKyDGEj3SFYBnnSFygdgQ4ga7knJ0ZOL5sZt4kXJXXnBb49NPKYBurdJ6w8fYojxBEWUviNBWUpcFCsA6kXaU0"/>
</div>
<div>
<h2 class="text-lg font-black text-[#f1f3fd] font-['Space_Grotesk'] leading-none">NEURAL ARCHITECT</h2>
<span class="text-[10px] text-primary/60 font-mono tracking-tighter">v4.0.2-STABLE</span>
</div>
</div>
</div>
<nav class="flex-1 px-3 space-y-1 font-['Space_Grotesk'] font-medium text-sm">
<div class="flex items-center gap-3 px-3 py-3 text-[#f1f3fd]/50 hover:bg-[#20262f]/40 hover:text-[#f1f3fd] transition-all duration-200 cursor-pointer group">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span>Mission Overview</span>
</div>
<div class="flex items-center gap-3 px-3 py-3 text-[#f1f3fd]/50 hover:bg-[#20262f]/40 hover:text-[#f1f3fd] transition-all duration-200 cursor-pointer">
<span class="material-symbols-outlined" data-icon="supervised_user_circle">supervised_user_circle</span>
<span>Manager View</span>
</div>
<div class="flex items-center gap-3 px-3 py-3 text-[#f1f3fd]/50 hover:bg-[#20262f]/40 hover:text-[#f1f3fd] transition-all duration-200 cursor-pointer">
<span class="material-symbols-outlined" data-icon="smart_toy">smart_toy</span>
<span>Agent Monitor</span>
</div>
<div class="flex items-center gap-3 px-3 py-3 bg-[#20262f] text-[#00f2ff] border-l-4 border-[#00f2ff] shadow-[0_0_15px_rgba(0,242,255,0.2)] transition-all duration-200 cursor-pointer">
<span class="material-symbols-outlined" data-icon="history" style="font-variation-settings: 'FILL' 1;">history</span>
<span>History</span>
</div>
<div class="pt-8 px-3">
<span class="text-[10px] uppercase tracking-[0.2em] text-outline/60 font-bold px-3">Log Sources</span>
<div class="mt-4 space-y-2">
<label class="flex items-center gap-3 px-3 py-2 text-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer">
<input checked="" class="w-3 h-3 bg-transparent border-outline/40 rounded-sm checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0" type="checkbox"/>
<span class="font-mono">FastAPI_Stdout</span>
</label>
<label class="flex items-center gap-3 px-3 py-2 text-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer">
<input checked="" class="w-3 h-3 bg-transparent border-outline/40 rounded-sm checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0" type="checkbox"/>
<span class="font-mono">Neural_Engine</span>
</label>
<label class="flex items-center gap-3 px-3 py-2 text-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer">
<input class="w-3 h-3 bg-transparent border-outline/40 rounded-sm checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0" type="checkbox"/>
<span class="font-mono">Postgres_Logs</span>
</label>
<label class="flex items-center gap-3 px-3 py-2 text-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer">
<input class="w-3 h-3 bg-transparent border-outline/40 rounded-sm checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0" type="checkbox"/>
<span class="font-mono">Gateway_Proxy</span>
</label>
</div>
</div>
</nav>
<div class="px-4 mt-auto space-y-2">
<button class="w-full py-3 bg-[#00f1fe] text-[#004145] font-black text-xs tracking-widest hover:brightness-110 active:scale-[0.98] transition-all shadow-[0_0_20px_rgba(0,242,255,0.3)]">
                INITIATE PROTOCOL
            </button>
<div class="flex justify-between px-2 pt-4 border-t border-outline-variant/10">
<span class="material-symbols-outlined text-[#f1f3fd]/30 hover:text-primary cursor-pointer text-xl" data-icon="analytics">analytics</span>
<span class="material-symbols-outlined text-[#f1f3fd]/30 hover:text-primary cursor-pointer text-xl" data-icon="terminal">terminal</span>
</div>
</div>
</aside>
<!-- Main Content Canvas -->
<main class="ml-64 pt-16 h-screen flex flex-col bg-background">
<!-- Terminal Header Controls -->
<div class="px-8 py-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-surface-container-low/30">
<div>
<h1 class="font-headline text-2xl font-bold tracking-tight text-on-surface">System Logs</h1>
<p class="font-body text-sm text-on-surface-variant">Real-time telemetry and event stream from integrated modules.</p>
</div>
<div class="flex items-center w-full md:w-auto gap-4">
<div class="relative flex-1 md:w-80">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-primary/50 text-lg" data-icon="search">search</span>
<input class="w-full bg-surface-container-lowest border-0 border-b border-primary/30 py-2 pl-10 pr-4 text-xs font-mono text-primary placeholder:text-primary/20 focus:ring-0 focus:border-primary transition-all" placeholder="FILTER LOGS [eg. 'status:500' or 'agent:delta']" type="text"/>
</div>
<div class="flex gap-2">
<button class="p-2 border border-outline-variant/20 hover:bg-surface-variant transition-colors">
<span class="material-symbols-outlined text-on-surface-variant text-lg" data-icon="download">download</span>
</button>
<button class="p-2 border border-outline-variant/20 hover:bg-surface-variant transition-colors">
<span class="material-symbols-outlined text-on-surface-variant text-lg" data-icon="pause_circle">pause_circle</span>
</button>
</div>
</div>
</div>
<!-- The Terminal Console -->
<div class="flex-1 px-8 pb-8 overflow-hidden">
<div class="h-full bg-surface-container-lowest border border-outline-variant/10 shadow-2xl flex flex-col relative">
<!-- Terminal Chrome -->
<div class="h-8 bg-surface-container-high flex items-center px-4 justify-between border-b border-outline-variant/10">
<div class="flex gap-1.5">
<div class="w-2.5 h-2.5 rounded-full bg-error/40"></div>
<div class="w-2.5 h-2.5 rounded-full bg-tertiary/40"></div>
<div class="w-2.5 h-2.5 rounded-full bg-secondary/40"></div>
</div>
<div class="text-[10px] font-mono text-outline-variant uppercase tracking-widest">root@mission-control:~ /var/logs/neural_architect</div>
<div class="w-12"></div>
</div>
<!-- Log Stream -->
<div class="flex-1 overflow-y-auto custom-scrollbar p-6 terminal-text text-[13px] leading-relaxed selection:bg-primary/30 selection:text-primary">
<!-- INFO Log Entry -->
<div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors">
<span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:01.442Z</span>
<span class="text-secondary font-bold w-12 shrink-0">INFO</span>
<span class="text-on-surface/60 w-32 shrink-0">[Neural_Engine]</span>
<span class="text-on-surface">Initialization of synapse weights completed. Accuracy: 99.4%</span>
</div>
<!-- SUCCESS Log Entry -->
<div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors">
<span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:05.129Z</span>
<span class="text-secondary font-bold w-12 shrink-0">INFO</span>
<span class="text-on-surface/60 w-32 shrink-0">[FastAPI_Stdout]</span>
<span class="text-on-surface">Server startup complete. Listening on <span class="text-primary underline cursor-pointer">0.0.0.0:8000</span></span>
</div>
<!-- WARN Log Entry -->
<div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors">
<span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:12.881Z</span>
<span class="text-tertiary font-bold w-12 shrink-0">WARN</span>
<span class="text-on-surface/60 w-32 shrink-0">[Neural_Engine]</span>
<span class="text-tertiary-dim">Memory threshold at 82%. Automated pruning scheduled in 300ms.</span>
</div>
<!-- ERROR Log Entry -->
<div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors">
<span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:15.002Z</span>
<span class="text-error font-bold w-12 shrink-0">ERROR</span>
<span class="text-on-surface/60 w-32 shrink-0">[Postgres_Logs]</span>
<span class="text-error-dim">FATAL: unexpected EOF on client connection with an open transaction</span>
</div>
<!-- Long Output Entry -->
<div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors">
<span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:18.991Z</span>
<span class="text-secondary font-bold w-12 shrink-0">INFO</span>
<span class="text-on-surface/60 w-32 shrink-0">[Neural_Engine]</span>
<div class="text-on-surface">
                            Dispatching Agent "Delta-Nine" to subprocess cluster 7.
                            <div class="mt-2 p-3 bg-white/5 border-l border-primary/20 rounded-r text-xs text-primary/80">
                                { "agent_id": "D9-X90", "priority": "CRITICAL", "task": "DATA_RECON", "buffer": "0x4F2A" }
                            </div>
</div>
</div>
<!-- Repeated Info -->
<div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors">
<span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:20.102Z</span>
<span class="text-secondary font-bold w-12 shrink-0">INFO</span>
<span class="text-on-surface/60 w-32 shrink-0">[FastAPI_Stdout]</span>
<span class="text-on-surface">GET /api/v1/telemetry/live -&gt; 200 OK (4ms)</span>
</div>
<div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors">
<span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:20.455Z</span>
<span class="text-secondary font-bold w-12 shrink-0">INFO</span>
<span class="text-on-surface/60 w-32 shrink-0">[FastAPI_Stdout]</span>
<span class="text-on-surface">GET /api/v1/status/health -&gt; 200 OK (2ms)</span>
</div>
<!-- Cursor Blink Simulation -->
<div class="flex gap-4 py-1 mt-4">
<span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:25.882Z</span>
<span class="text-primary font-bold w-12 shrink-0 animate-pulse">_</span>
<span class="text-primary/40 italic">Waiting for event stream...</span>
</div>
</div>
<!-- Live Ticker Footer -->
<div class="h-10 bg-surface-container flex items-center px-6 gap-8 border-t border-outline-variant/10">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-secondary shadow-[0_0_8px_#37ee9b] blur-[1px]"></div>
<span class="text-[10px] uppercase font-headline tracking-widest text-secondary font-bold">Live Stream Connected</span>
</div>
<div class="flex items-center gap-2">
<span class="text-[10px] uppercase font-headline tracking-widest text-outline">Cluster Latency</span>
<span class="text-[10px] font-mono text-primary">12.4ms</span>
</div>
<div class="ml-auto flex items-center gap-4">
<span class="text-[10px] uppercase font-headline tracking-widest text-outline">Buffer Usage</span>
<div class="w-24 h-1.5 bg-surface-container-high rounded-full overflow-hidden">
<div class="h-full bg-primary shadow-[0_0_10px_rgba(0,241,254,0.5)]" style="width: 34%"></div>
</div>
<span class="text-[10px] font-mono text-primary">34%</span>
</div>
</div>
</div>
</div>
</main>
<!-- Floating System Status Indicator (Intentional Asymmetry) -->
<div class="fixed bottom-6 right-8 z-50 flex flex-col items-end gap-2">
<div class="bg-surface-container-highest/80 backdrop-blur-md p-4 border border-outline-variant/20 shadow-[0_4px_24px_rgba(0,0,0,0.4)]">
<div class="flex items-center gap-4">
<div class="text-right">
<div class="text-[10px] uppercase tracking-widest text-outline font-bold">Core Load</div>
<div class="text-xl font-headline font-black text-on-surface leading-none">14.8%</div>
</div>
<div class="w-[1px] h-8 bg-outline-variant/30"></div>
<div class="text-right">
<div class="text-[10px] uppercase tracking-widest text-outline font-bold">Net Ingress</div>
<div class="text-xl font-headline font-black text-secondary leading-none">8.2 GB/s</div>
</div>
</div>
<div class="mt-3 h-[2px] w-full bg-outline-variant/10 relative overflow-hidden">
<div class="absolute inset-0 bg-primary/40 -translate-x-full animate-[shimmer_2s_infinite]"></div>
</div>
</div>
<div class="bg-primary-container px-3 py-1 text-[10px] font-black text-on-primary-container tracking-tighter uppercase font-headline">
            Neural Sync: Active
        </div>
</div>
<style>
        @keyframes shimmer {
            100% { transform: translateX(100%); }
        }
    </style>
</body></html>