Spaces:
Sleeping
Sleeping
| <html class="dark" lang="en"><head> | |
| <meta charset="utf-8"/> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"/> | |
| <title>Mission Control - Diagnostics & Logs</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&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <script id="tailwind-config"> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| "inverse-primary": "#006a70", | |
| "primary-container": "#00f1fe", | |
| "inverse-on-surface": "#51555d", | |
| "tertiary-dim": "#ecaa00", | |
| "on-surface-variant": "#a8abb4", | |
| "tertiary-container": "#feb700", | |
| "surface-container": "#151a21", | |
| "on-tertiary-fixed": "#392700", | |
| "tertiary": "#ffc965", | |
| "on-tertiary-container": "#533a00", | |
| "on-tertiary": "#5f4200", | |
| "on-primary": "#005f64", | |
| "surface-container-lowest": "#000000", | |
| "secondary-fixed": "#37ee9b", | |
| "secondary-fixed-dim": "#19df8f", | |
| "outline-variant": "#44484f", | |
| "inverse-surface": "#f8f9ff", | |
| "error-container": "#9f0519", | |
| "secondary-dim": "#19df8f", | |
| "on-primary-fixed": "#004145", | |
| "on-primary-fixed-variant": "#006065", | |
| "on-background": "#f1f3fd", | |
| "primary-dim": "#00e2ee", | |
| "on-tertiary-fixed-variant": "#5f4200", | |
| "error": "#ff716c", | |
| "primary-fixed-dim": "#00e2ee", | |
| "on-secondary-container": "#e2ffe9", | |
| "error-dim": "#d7383b", | |
| "tertiary-fixed": "#feb700", | |
| "primary": "#99f7ff", | |
| "surface-bright": "#262c36", | |
| "on-secondary": "#005331", | |
| "on-surface": "#f1f3fd", | |
| "surface": "#0a0e14", | |
| "secondary-container": "#006d42", | |
| "on-secondary-fixed-variant": "#005d38", | |
| "surface-container-high": "#1b2028", | |
| "primary-fixed": "#00f1fe", | |
| "surface-variant": "#20262f", | |
| "surface-tint": "#99f7ff", | |
| "outline": "#72757d", | |
| "on-primary-container": "#00555a", | |
| "surface-container-low": "#0f141a", | |
| "on-error-container": "#ffa8a3", | |
| "secondary": "#37ee9b", | |
| "on-secondary-fixed": "#003d23", | |
| "surface-container-highest": "#20262f", | |
| "on-error": "#490006", | |
| "background": "#0a0e14", | |
| "surface-dim": "#0a0e14", | |
| "tertiary-fixed-dim": "#ecaa00" | |
| }, | |
| 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; | |
| } | |
| ::-webkit-scrollbar { width: 2px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: #00e2ee; } | |
| .glow-primary { box-shadow: 0 0 15px rgba(0, 241, 254, 0.2); } | |
| .terminal-cursor { animation: blink 1s step-end infinite; } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| </style> | |
| </head> | |
| <body class="bg-surface text-on-surface font-body selection:bg-primary-container selection:text-on-primary-fixed"> | |
| <!-- Top Navigation Shell --> | |
| <header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#0a0e14]/80 backdrop-blur-xl border-b border-[#44484f]/20"> | |
| <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.4)] font-headline">MISSION CONTROL</span> | |
| <nav class="hidden md:flex gap-6 font-headline tracking-tight text-sm uppercase"> | |
| <a class="text-[#f1f3fd]/60 hover:text-[#00f2ff] hover:bg-[#20262f]/50 transition-all duration-300 px-2 py-1" href="#">Dashboard</a> | |
| <a class="text-[#f1f3fd]/60 hover:text-[#00f2ff] hover:bg-[#20262f]/50 transition-all duration-300 px-2 py-1" href="#">Agents</a> | |
| <a class="text-[#00f2ff] border-b-2 border-[#00f2ff] pb-1" href="#">Diagnostics</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="flex items-center gap-2 bg-surface-container-highest px-3 py-1 rounded-lg border border-outline-variant/20"> | |
| <span class="material-symbols-outlined text-secondary text-xs" style="font-variation-settings: 'FILL' 1;">fiber_manual_record</span> | |
| <span class="text-[10px] font-label font-bold tracking-widest text-secondary">TELEMETRY: LIVE</span> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="p-2 text-[#f1f3fd]/60 hover:text-[#00f2ff] transition-all"><span class="material-symbols-outlined">notifications</span></button> | |
| <button class="p-2 text-[#f1f3fd]/60 hover:text-[#00f2ff] transition-all"><span class="material-symbols-outlined">settings</span></button> | |
| <button class="p-2 text-[#f1f3fd]/60 hover:text-[#00f2ff] transition-all"><span class="material-symbols-outlined">account_circle</span></button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Side Navigation Shell --> | |
| <aside class="fixed left-0 top-0 h-full flex flex-col pt-20 pb-6 w-64 z-40 bg-[#0f141a] border-r border-[#44484f]/20"> | |
| <div class="px-6 mb-8"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-full bg-primary-container/20 flex items-center justify-center border border-primary/30"> | |
| <span class="material-symbols-outlined text-primary">psychology</span> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-black text-[#f1f3fd] font-headline">NEURAL ARCHITECT</h3> | |
| <p class="text-[10px] font-label text-secondary tracking-widest">SYSTEM: OPTIMAL</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 flex flex-col font-label text-xs tracking-widest uppercase"> | |
| <a class="flex items-center gap-4 px-6 py-4 text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-colors duration-200" href="#"> | |
| <span class="material-symbols-outlined">dashboard</span> Mission Overview | |
| </a> | |
| <a class="flex items-center gap-4 px-6 py-4 text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-colors duration-200" href="#"> | |
| <span class="material-symbols-outlined">admin_panel_settings</span> Manager View | |
| </a> | |
| <a class="flex items-center gap-4 px-6 py-4 text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-colors duration-200" href="#"> | |
| <span class="material-symbols-outlined">smart_toy</span> Agent Monitor | |
| </a> | |
| <a class="flex items-center gap-4 px-6 py-4 text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-colors duration-200" href="#"> | |
| <span class="material-symbols-outlined">history</span> History | |
| </a> | |
| <div class="mt-auto pt-4 border-t border-outline-variant/10"> | |
| <a class="flex items-center gap-4 px-6 py-4 bg-[#00f2ff]/10 text-[#00f2ff] border-r-4 border-[#00f2ff] shadow-[inset_-10px_0_15px_-10px_rgba(0,242,255,0.3)]" href="#"> | |
| <span class="material-symbols-outlined">biotech</span> Diagnostics | |
| </a> | |
| <a class="flex items-center gap-4 px-6 py-4 text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-colors duration-200" href="#"> | |
| <span class="material-symbols-outlined">terminal</span> Logs | |
| </a> | |
| </div> | |
| </nav> | |
| </aside> | |
| <!-- Main Content Canvas --> | |
| <main class="pl-64 pt-16 h-screen flex flex-col bg-surface overflow-hidden"> | |
| <!-- Dashboard Header / Micro-Metrics --> | |
| <div class="grid grid-cols-4 gap-0 border-b border-outline-variant/20 bg-surface-container-low"> | |
| <div class="p-6 border-r border-outline-variant/10"> | |
| <p class="text-[10px] font-label text-on-surface-variant tracking-widest uppercase mb-1">DB Connection</p> | |
| <div class="flex items-end gap-2"> | |
| <span class="text-xl font-headline font-bold text-on-surface">missions.db</span> | |
| <span class="text-xs font-label text-secondary mb-1">CONNECTED</span> | |
| </div> | |
| </div> | |
| <div class="p-6 border-r border-outline-variant/10"> | |
| <p class="text-[10px] font-label text-on-surface-variant tracking-widest uppercase mb-1">API Health</p> | |
| <div class="flex items-end gap-2"> | |
| <span class="text-xl font-headline font-bold text-on-surface">99.98%</span> | |
| <span class="text-xs font-label text-secondary mb-1">STABLE</span> | |
| </div> | |
| </div> | |
| <div class="p-6 border-r border-outline-variant/10"> | |
| <p class="text-[10px] font-label text-on-surface-variant tracking-widest uppercase mb-1">FastAPI Latency</p> | |
| <div class="flex items-end gap-2"> | |
| <span class="text-xl font-headline font-bold text-on-surface">12ms</span> | |
| <span class="text-xs font-label text-primary mb-1">OPTIMAL</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-[10px] font-label text-on-surface-variant tracking-widest uppercase mb-1">Active Agents</p> | |
| <div class="flex items-end gap-2"> | |
| <span class="text-xl font-headline font-bold text-on-surface">14/14</span> | |
| <div class="w-16 h-1.5 bg-surface-container-highest rounded-full mb-2 overflow-hidden"> | |
| <div class="h-full bg-primary-container w-[100%]"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Split Screen View --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left: Event Stream --> | |
| <section class="w-1/3 border-r border-outline-variant/20 flex flex-col bg-surface-container-lowest"> | |
| <div class="p-4 border-b border-outline-variant/10 flex justify-between items-center bg-surface-container-low"> | |
| <h2 class="text-xs font-label font-bold tracking-widest uppercase text-on-surface">System Events</h2> | |
| <span class="text-[10px] font-mono text-primary/60">LIVE_TICK: 450ms</span> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <!-- Event Item --> | |
| <div class="p-4 border-b border-outline-variant/10 hover:bg-surface-container-high transition-colors cursor-pointer group"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-[10px] font-mono text-on-surface-variant">14:02:44.129</span> | |
| <span class="text-[10px] font-label font-bold tracking-tighter text-secondary px-1.5 py-0.5 bg-secondary/10 rounded">INFO</span> | |
| </div> | |
| <p class="text-sm font-medium text-on-surface group-hover:text-primary transition-colors">Agent-04 Handshake Verified</p> | |
| <p class="text-xs text-on-surface-variant mt-1 font-mono">auth_token: [REDACTED]</p> | |
| </div> | |
| <!-- Event Item (Warning) --> | |
| <div class="p-4 border-b border-outline-variant/10 bg-tertiary/5 hover:bg-tertiary/10 transition-colors cursor-pointer group"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-[10px] font-mono text-on-surface-variant">14:01:12.004</span> | |
| <span class="text-[10px] font-label font-bold tracking-tighter text-tertiary px-1.5 py-0.5 bg-tertiary/10 rounded">WARN</span> | |
| </div> | |
| <p class="text-sm font-medium text-tertiary group-hover:underline">High Memory Usage: Node_Sigma</p> | |
| <p class="text-xs text-on-surface-variant mt-1 font-mono">utilization: 88.4%</p> | |
| </div> | |
| <!-- Event Item (Error) --> | |
| <div class="p-4 border-b border-outline-variant/10 bg-error/5 hover:bg-error/10 transition-colors cursor-pointer group"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-[10px] font-mono text-on-surface-variant">13:58:30.992</span> | |
| <span class="text-[10px] font-label font-bold tracking-tighter text-error px-1.5 py-0.5 bg-error/10 rounded">ERROR</span> | |
| </div> | |
| <p class="text-sm font-medium text-error">Database Query Timeout</p> | |
| <p class="text-xs text-on-surface-variant mt-1 font-mono">source: missions.db/active_threads</p> | |
| </div> | |
| <!-- Event Item --> | |
| <div class="p-4 border-b border-outline-variant/10 hover:bg-surface-container-high transition-colors cursor-pointer group"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-[10px] font-mono text-on-surface-variant">13:55:01.440</span> | |
| <span class="text-[10px] font-label font-bold tracking-tighter text-secondary px-1.5 py-0.5 bg-secondary/10 rounded">INFO</span> | |
| </div> | |
| <p class="text-sm font-medium text-on-surface">Neural Weights Sync Complete</p> | |
| <p class="text-xs text-on-surface-variant mt-1 font-mono">delta_hash: 8f92-a1b2</p> | |
| </div> | |
| <!-- Repeated Item for Scrolling --> | |
| <div class="p-4 border-b border-outline-variant/10 hover:bg-surface-container-high transition-colors cursor-pointer group"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-[10px] font-mono text-on-surface-variant">13:52:10.118</span> | |
| <span class="text-[10px] font-label font-bold tracking-tighter text-secondary px-1.5 py-0.5 bg-secondary/10 rounded">INFO</span> | |
| </div> | |
| <p class="text-sm font-medium text-on-surface">System Diagnostic Sweep</p> | |
| <p class="text-xs text-on-surface-variant mt-1 font-mono">result: all_clear</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Right: Raw Terminal Logs --> | |
| <section class="flex-1 flex flex-col bg-surface-container-lowest"> | |
| <div class="p-4 border-b border-outline-variant/10 flex justify-between items-center bg-surface-container-low"> | |
| <div class="flex gap-4"> | |
| <button class="text-xs font-label font-bold tracking-widest uppercase text-primary border-b border-primary">FastAPI_Stdout</button> | |
| <button class="text-xs font-label font-bold tracking-widest uppercase text-on-surface-variant hover:text-on-surface transition-colors">Neural_Engine</button> | |
| <button class="text-xs font-label font-bold tracking-widest uppercase text-on-surface-variant hover:text-on-surface transition-colors">Postgres_Logs</button> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button class="flex items-center gap-1 text-[10px] font-label font-bold tracking-widest text-on-surface-variant hover:text-on-surface"> | |
| <span class="material-symbols-outlined text-sm">download</span> EXPORT | |
| </button> | |
| <button class="flex items-center gap-1 text-[10px] font-label font-bold tracking-widest text-on-surface-variant hover:text-on-surface"> | |
| <span class="material-symbols-outlined text-sm">delete</span> CLEAR | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Terminal Interface --> | |
| <div class="flex-1 p-6 font-mono text-xs overflow-y-auto leading-relaxed bg-black/40"> | |
| <div class="space-y-1"> | |
| <p class="text-on-surface-variant opacity-50">[INFO] [2023-11-24T14:00:00Z] Starting FastAPI application...</p> | |
| <p class="text-on-surface-variant opacity-50">[INFO] [2023-11-24T14:00:01Z] Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)</p> | |
| <p class="text-secondary">[DEBUG] Initializing Database Connection: sqlite:///missions.db</p> | |
| <p class="text-secondary">[DEBUG] Database models loaded: Agent, Mission, LogEntry, DiagnosticReport</p> | |
| <p class="text-primary">[INFO] Loading neural architecture: Version 4.2.0-STABLE</p> | |
| <p class="text-on-surface-variant opacity-80">--- SYSTEM READY ---</p> | |
| <br/> | |
| <p class="text-on-surface">14:01:05 GET /v1/status HTTP/1.1 200 OK (0.4ms)</p> | |
| <p class="text-on-surface">14:01:08 POST /v1/agent/sync HTTP/1.1 201 Created (12.2ms)</p> | |
| <p class="text-tertiary">[WARN] Worker thread 4 blocked for 45ms. Threshold exceeded.</p> | |
| <p class="text-on-surface">14:02:12 GET /v1/telemetry/live HTTP/1.1 200 OK (1.1ms)</p> | |
| <p class="text-on-surface">14:02:15 GET /v1/telemetry/live HTTP/1.1 200 OK (0.9ms)</p> | |
| <p class="text-on-surface">14:02:18 GET /v1/telemetry/live HTTP/1.1 200 OK (0.9ms)</p> | |
| <p class="text-error">[CRITICAL] SQLAlchemy ConnectionError: Timeout waiting for pool</p> | |
| <p class="text-error-dim">Traceback (most recent call last):</p> | |
| <p class="text-error-dim ml-4">File "/app/main.py", line 42, in get_db_status</p> | |
| <p class="text-error-dim ml-4">File "/usr/local/lib/python3.9/site-packages/sqlalchemy/pool/base.py", line 520, in connect</p> | |
| <p class="text-error-dim">TimeoutError: [Errno 110] Connection timed out</p> | |
| <p class="text-secondary">[AUTO-RECOVERY] Re-establishing database pool connection...</p> | |
| <p class="text-secondary">[AUTO-RECOVERY] Pool re-initialized. Active connections: 2</p> | |
| <p class="text-on-surface">14:02:44 GET /v1/health HTTP/1.1 200 OK (2.2ms)</p> | |
| <p class="text-on-surface">14:02:45 GET /v1/telemetry/live HTTP/1.1 200 OK (1.0ms)</p> | |
| <div class="flex items-center gap-1"> | |
| <span class="text-primary-container font-bold">root@mission-control:~$</span> | |
| <span class="text-on-surface">tail -f /var/log/neural_engine.log</span> | |
| <span class="w-2 h-4 bg-primary-container terminal-cursor"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Terminal Bottom Bar --> | |
| <div class="p-4 bg-surface-container-high border-t border-outline-variant/20 flex gap-4"> | |
| <div class="flex-1 bg-surface-container-lowest border-b border-primary/30 px-3 py-2 flex items-center"> | |
| <span class="material-symbols-outlined text-primary text-sm mr-2">chevron_right</span> | |
| <input class="bg-transparent border-none focus:ring-0 text-xs font-mono w-full text-on-surface placeholder:text-on-surface-variant/30 uppercase tracking-widest" placeholder="EXECUTE_COMMAND..." type="text"/> | |
| </div> | |
| <button class="bg-primary-container text-on-primary-fixed px-6 py-2 font-label font-bold text-[10px] tracking-widest uppercase hover:shadow-[0_0_15px_rgba(0,241,254,0.4)] transition-all active:scale-95">Execute</button> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Contextual Details Panel (Hidden Overlay Example) --> | |
| <div class="fixed right-6 bottom-6 w-80 bg-surface-variant/60 backdrop-blur-xl border border-outline-variant/20 p-6 z-50"> | |
| <h3 class="text-xs font-label font-bold tracking-widest uppercase text-primary mb-4">Neural Health Monitor</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-[10px] font-label text-on-surface-variant mb-1 uppercase"> | |
| <span>CPU Entropy</span> | |
| <span>14%</span> | |
| </div> | |
| <div class="h-1 bg-surface-container-highest rounded-full"> | |
| <div class="h-full bg-secondary w-[14%]"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-[10px] font-label text-on-surface-variant mb-1 uppercase"> | |
| <span>Log Velocity</span> | |
| <span>High (2.4k/s)</span> | |
| </div> | |
| <div class="h-1 bg-surface-container-highest rounded-full"> | |
| <div class="h-full bg-primary w-[78%]"></div> | |
| </div> | |
| </div> | |
| <div class="pt-2"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-secondary shadow-[0_0_8px_#37ee9b]"></div> | |
| <span class="text-[10px] font-label text-on-surface tracking-widest uppercase">Encryption Active (AES-256)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body></html> |