Spaces:

vfven
/

mission-control-v2

Sleeping

File size: 25,768 Bytes

6d19be8

<!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 | History</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: {
              "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;
        }
        body { font-family: 'Manrope', sans-serif; }
        .font-headline { font-family: 'Space Grotesk', sans-serif; }
        ::-webkit-scrollbar { width: 2px; }
        ::-webkit-scrollbar-thumb { background: #00e2ee; }
        ::-webkit-scrollbar-track { background: transparent; }
    </style>
</head>
<body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container">
<!-- TopAppBar -->
<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>
<div class="hidden md:flex items-center space-x-6 font-['Space_Grotesk'] tracking-tight text-sm uppercase">
<a class="text-[#f1f3fd]/60 hover:text-[#00f2ff] hover:bg-[#20262f]/50 transition-all duration-300 px-3 py-1" href="#">Mission Overview</a>
<a class="text-[#f1f3fd]/60 hover:text-[#00f2ff] hover:bg-[#20262f]/50 transition-all duration-300 px-3 py-1" href="#">Manager View</a>
<a class="text-[#f1f3fd]/60 hover:text-[#00f2ff] hover:bg-[#20262f]/50 transition-all duration-300 px-3 py-1" href="#">Agent Monitor</a>
<a class="text-[#00f2ff] border-b-2 border-[#00f2ff] pb-1" href="#">History</a>
</div>
</div>
<div class="flex items-center gap-4">
<div class="hidden lg:flex flex-col items-end mr-4">
<span class="text-[10px] font-headline tracking-[0.2em] text-secondary">TELEMETRY: LIVE</span>
<span class="text-[10px] font-headline tracking-[0.2em] text-primary">SYSTEM: OPTIMAL</span>
</div>
<button class="p-2 text-[#f1f3fd]/60 hover:text-[#00f2ff] transition-colors"><span class="material-symbols-outlined">notifications</span></button>
<button class="p-2 text-[#f1f3fd]/60 hover:text-[#00f2ff] transition-colors"><span class="material-symbols-outlined">settings</span></button>
<div class="h-8 w-8 rounded-full bg-surface-container-highest border border-outline-variant flex items-center justify-center overflow-hidden">
<img alt="User Avatar" class="w-full h-full object-cover" data-alt="abstract geometric avatar with cyan and deep navy patterns on a dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBIqTeiaNTYO1BAURtboW5VlMrZ_aUKVIywTNzvhteGNFllFXZKjxNhYaDenE_FQOF_BeVcddlLey6lIm3ssM0lEFE6c7mdZIIt82_nANugvX-Rucrz1zE8H5AmxVrXHktyZXDuLurFSQixi-wrVpi5WUhPq0VwQZBt-ByfYas_vWJAYp1DzPSKIi04ea-krkXJIm3o-BzvxMvC87NlZN9YfUx3544pg1iEVGBOa8Y8qUyxcShYA6aBZH2NYXolci2fBdFCzg7QQHY"/>
</div>
</div>
</header>
<!-- SideNavBar -->
<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 hidden lg:flex">
<div class="px-6 mb-8">
<div class="flex items-center gap-3 p-3 bg-surface-container-highest rounded">
<div class="h-10 w-10 bg-primary/10 flex items-center justify-center rounded border border-primary/20">
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">smart_toy</span>
</div>
<div>
<h3 class="text-sm font-black text-[#f1f3fd] font-headline tracking-wider uppercase">NEURAL ARCHITECT</h3>
<p class="text-[10px] text-secondary font-headline">SYSTEM: OPTIMAL</p>
</div>
</div>
</div>
<nav class="flex-1 space-y-1 px-3">
<a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-all duration-200" href="#">
<span class="material-symbols-outlined">dashboard</span> Mission Overview
            </a>
<a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-all duration-200" href="#">
<span class="material-symbols-outlined">admin_panel_settings</span> Manager View
            </a>
<a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-all duration-200" href="#">
<span class="material-symbols-outlined">smart_toy</span> Agent Monitor
            </a>
<a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase 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">history</span> History
            </a>
</nav>
<div class="mt-auto px-3 pt-6 border-t border-outline-variant/10">
<a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-all duration-200" href="#">
<span class="material-symbols-outlined">biotech</span> Diagnostics
            </a>
<a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-all duration-200" href="#">
<span class="material-symbols-outlined">terminal</span> Logs
            </a>
</div>
</aside>
<!-- Main Content -->
<main class="lg:ml-64 pt-24 px-6 pb-12 min-h-screen">
<div class="max-w-7xl mx-auto">
<!-- Header Section -->
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
<div>
<h1 class="text-4xl font-headline font-bold tracking-tighter text-on-surface mb-2">ARCHIVE REPOSITORY</h1>
<p class="text-on-surface-variant font-body">Review and audit all historical neural agent deployments and mission outcomes.</p>
</div>
<div class="flex items-center gap-4">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm">search</span>
<input class="bg-surface-container-lowest border-0 border-b border-primary/30 focus:ring-0 focus:border-primary text-xs font-headline tracking-widest px-10 py-2 w-64 transition-all" placeholder="FILTER BY TASK ID OR AGENT..." type="text"/>
</div>
<button class="bg-primary-container text-on-primary-fixed px-4 py-2 text-xs font-headline font-bold tracking-widest uppercase hover:shadow-[0_0_15px_rgba(0,241,254,0.4)] transition-all">
                        EXPORT ALL
                    </button>
</div>
</div>
<!-- Bento Stats Grid (Top row) -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div class="bg-surface-container-low p-6 border-l-2 border-primary">
<p class="text-[10px] font-headline tracking-widest text-primary mb-1 uppercase">Total Missions</p>
<h3 class="text-3xl font-headline font-bold">1,284</h3>
</div>
<div class="bg-surface-container-low p-6 border-l-2 border-secondary">
<p class="text-[10px] font-headline tracking-widest text-secondary mb-1 uppercase">Success Rate</p>
<h3 class="text-3xl font-headline font-bold">98.2%</h3>
</div>
<div class="bg-surface-container-low p-6 border-l-2 border-tertiary">
<p class="text-[10px] font-headline tracking-widest text-tertiary mb-1 uppercase">Avg. Latency</p>
<h3 class="text-3xl font-headline font-bold">42ms</h3>
</div>
<div class="bg-surface-container-low p-6 border-l-2 border-outline-variant">
<p class="text-[10px] font-headline tracking-widest text-on-surface-variant mb-1 uppercase">Resources Opt.</p>
<h3 class="text-3xl font-headline font-bold">89%</h3>
</div>
</div>
<!-- Mission History Table Container -->
<div class="bg-surface-container-low overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead class="bg-surface-container-high border-b border-outline-variant/30">
<tr>
<th class="px-6 py-4 text-[10px] font-headline tracking-[0.2em] text-on-surface-variant uppercase">Mission ID &amp; Task</th>
<th class="px-6 py-4 text-[10px] font-headline tracking-[0.2em] text-on-surface-variant uppercase">Timestamp</th>
<th class="px-6 py-4 text-[10px] font-headline tracking-[0.2em] text-on-surface-variant uppercase">Status</th>
<th class="px-6 py-4 text-[10px] font-headline tracking-[0.2em] text-on-surface-variant uppercase">Agents Involved</th>
<th class="px-6 py-4 text-[10px] font-headline tracking-[0.2em] text-on-surface-variant uppercase text-right">Reports</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/10">
<!-- Entry 1 -->
<tr class="hover:bg-surface-container-highest/50 transition-colors group">
<td class="px-6 py-5">
<div class="flex flex-col">
<span class="text-xs font-headline font-bold text-primary group-hover:text-primary-fixed transition-colors">MC-9082-ALPHA</span>
<span class="text-sm font-body text-on-surface">Neural Pathfinding Optimization</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex flex-col">
<span class="text-xs font-headline text-on-surface">2024.05.12</span>
<span class="text-[10px] font-headline text-on-surface-variant">14:22:05 UTC</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded-full bg-secondary shadow-[0_0_8px_rgba(55,238,155,0.6)]"></div>
<span class="text-[10px] font-headline font-bold text-secondary tracking-widest uppercase">Completed</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex -space-x-2">
<div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden" title="Agent Zero">
<img alt="Agent Zero" data-alt="minimal robot avatar with cyan highlights on dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBiI2zdEIkShkmzsfOnJ_IA2IjX3HAJ_ST_x8HbqYdzHAWIQp9CjjP0Y_A9u8hNUCVDZsMf9eVCl0wdXYEhPzQJXNrvfAM_4GabfbROhpu4UUEDAoY0db2KGjDcZtexZ8nsXzaKPWRZyLv5DZAUX3IFJJkVTzYSs4Pw0YIRTlrG3XX5wmujVQDA08kagx-2iyC_2xaahh1l1bz7RI4aFs6NWnCNGnKXHAn4O_4B2zS52ukABRreZre7koZaLHNnbdgbttG9mKY-WCw"/>
</div>
<div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden" title="Agent Prime">
<img alt="Agent Prime" data-alt="minimal robot avatar with emerald highlights on dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCANU7wQtaGkU16EXgxqaYbIJggrtAH-HRLyOxc7cY9VDK9JjE8k4UFzf-ELApDtR3R6cJWoOybCkAuh-uSc9v1Gs5gbHcOroRuChKaUpqp8EKOXESUnwjt4OuuaU6Ig-4f4E53RaVqBFePVfJYy5FxCs2Gg1ZdxR1jmGrFj1XJr8W0M2eFDLq-O0o0ploXGlRTXjpvH4IK1nWuj3uSa7RGiPyeyN7lknZ7bG8_x-LjMdXcXnOZb0K75Ko85vkImEatRWOhvyMm0KQ"/>
</div>
</div>
</td>
<td class="px-6 py-5 text-right">
<div class="flex justify-end gap-2">
<button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest hover:bg-primary-container hover:text-on-primary-fixed transition-all group/btn">
<span class="material-symbols-outlined text-sm">description</span>
<span class="text-[10px] font-headline font-bold tracking-tighter uppercase">DOCX</span>
</button>
<button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest hover:bg-secondary-fixed hover:text-on-secondary-fixed transition-all group/btn">
<span class="material-symbols-outlined text-sm">table_chart</span>
<span class="text-[10px] font-headline font-bold tracking-tighter uppercase">XLSX</span>
</button>
</div>
</td>
</tr>
<!-- Entry 2 -->
<tr class="hover:bg-surface-container-highest/50 transition-colors group">
<td class="px-6 py-5">
<div class="flex flex-col">
<span class="text-xs font-headline font-bold text-primary">MC-9079-BETA</span>
<span class="text-sm font-body text-on-surface">Sub-orbital Logistics Routing</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex flex-col">
<span class="text-xs font-headline text-on-surface">2024.05.11</span>
<span class="text-[10px] font-headline text-on-surface-variant">09:15:44 UTC</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded-full bg-error shadow-[0_0_8px_rgba(255,113,108,0.6)]"></div>
<span class="text-[10px] font-headline font-bold text-error tracking-widest uppercase">Aborted</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex -space-x-2">
<div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden" title="Agent Flux">
<img alt="Agent Flux" data-alt="minimalist tech avatar with amber and orange highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3pVQulYz-vMaNTom35cdlPadDFg3hc47-lbTOzWBRDSZEeQowSxfSgnPQPlXFFtFRSc4Ou8l_J5_uP0pvdMUFsjOiM7LJp1s5Y4JzCzkiu-eNe7VrDv3Ryl--2ywhVzKkPs-fX_BTC1hrnd2HPN6hMrJM5OhhC1hnTOznvz3ehskEoZuzX1Kv4Iz_JkqPfDDmiJJXOhgWvSCXaq7YXB7Z0cSQZR5iG0FT-xntZoG0v82_FW0MSA69X5L8iuRSJXup0228goDd4BQ"/>
</div>
</div>
</td>
<td class="px-6 py-5 text-right">
<div class="flex justify-end gap-2 opacity-50 cursor-not-allowed">
<button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest pointer-events-none">
<span class="material-symbols-outlined text-sm">description</span>
<span class="text-[10px] font-headline font-bold tracking-tighter uppercase">N/A</span>
</button>
</div>
</td>
</tr>
<!-- Entry 3 -->
<tr class="hover:bg-surface-container-highest/50 transition-colors group">
<td class="px-6 py-5">
<div class="flex flex-col">
<span class="text-xs font-headline font-bold text-primary">MC-8812-GAMMA</span>
<span class="text-sm font-body text-on-surface">Quantum Core Balancing</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex flex-col">
<span class="text-xs font-headline text-on-surface">2024.05.10</span>
<span class="text-[10px] font-headline text-on-surface-variant">22:01:12 UTC</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded-full bg-secondary shadow-[0_0_8px_rgba(55,238,155,0.6)]"></div>
<span class="text-[10px] font-headline font-bold text-secondary tracking-widest uppercase">Completed</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex -space-x-2">
<div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden">
<img alt="Agent Core" data-alt="sleek modern robot avatar with purple and blue details" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDv1XnXslKc1sAUeXUXW_jzThcvygrKSUuSPqVal5hqnCS3pVrl-6q_1gAg94T9bu9fZLe3UQHFBknPRyTfCb-viJS1AgyqhchlxK8YwyHrUIt9zG99LvXPjnY693CscydUxNnapqX9UBFGqZ2XNju44K_qVhMA-zbPX2WPPC2rtSn1DWIBF62Tw8StFb4NDmFFNYHSc9nrsyfj8yH8xTA2mMr2zcb69BS1Wsk4dRTXng_KcEtSLY1hYte_InMrkb9WZBvmuYThYdI"/>
</div>
<div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden">
<img alt="Agent Shift" data-alt="advanced droid icon with gold and white mechanical parts" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCW03hah4e33SqKRcmZDnOIqS0bbpLWYbwmJbOctSwTA6S751B-5DA0KWWOk3JUcL0Rv6SzZdC5iCPOdUHO4D6JypkWFEaNtSxjv3nECfcIZKlSmSOTSSjCWvA-dVIXLhXQ69ZUkHSasdfx2Kh9baR3AAGHnet_OLtfC25AMI5RKCAeXZrUOuiylvYqgQQ6XrKXdHnc29AQDPg7b6m8-ipQNGxW4CX6XFeHLBS-JNK6kTyj9toYCXZ9AVt3FYnyDsYD-svatpvhSsw"/>
</div>
<div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden">
<img alt="Agent Node" data-alt="stylized machine head avatar in deep teal and neon green" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCDtFcU-b2HIVNM0HloZkhb2OD5aN7x38qbYlvYkPePO_CneBRfc5cSaHCFrrXgmStCMWN4z1oGS-sbskkFI1s2XhT3WM2p4xh5AEnuJMT2cftYvUN8shK1oiiJWms5AfJwCjsBQlqg_kakRmKFGksQMK9e3mDShV1jJtD4F-EXxaQ3kPBhZQTkQf7C1sTXIrKnoEz-ngU7p56JEEkAxcw2O8M0ciio92Hs_Uxw9xhNtxAYwAGbD3FLm8zWdAwoasVXjQvuXbfRNZ8"/>
</div>
</div>
</td>
<td class="px-6 py-5 text-right">
<div class="flex justify-end gap-2">
<button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest hover:bg-primary-container hover:text-on-primary-fixed transition-all group/btn">
<span class="material-symbols-outlined text-sm">description</span>
<span class="text-[10px] font-headline font-bold tracking-tighter uppercase">DOCX</span>
</button>
<button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest hover:bg-secondary-fixed hover:text-on-secondary-fixed transition-all group/btn">
<span class="material-symbols-outlined text-sm">table_chart</span>
<span class="text-[10px] font-headline font-bold tracking-tighter uppercase">XLSX</span>
</button>
</div>
</td>
</tr>
<!-- Entry 4 -->
<tr class="hover:bg-surface-container-highest/50 transition-colors group">
<td class="px-6 py-5">
<div class="flex flex-col">
<span class="text-xs font-headline font-bold text-primary">MC-8774-DELTA</span>
<span class="text-sm font-body text-on-surface">Data Lake Synthesis</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex flex-col">
<span class="text-xs font-headline text-on-surface">2024.05.09</span>
<span class="text-[10px] font-headline text-on-surface-variant">11:45:00 UTC</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex items-center gap-2">
<div class="h-2 w-2 rounded-full bg-tertiary shadow-[0_0_8px_rgba(255,201,101,0.6)]"></div>
<span class="text-[10px] font-headline font-bold text-tertiary tracking-widest uppercase">Warning</span>
</div>
</td>
<td class="px-6 py-5">
<div class="flex -space-x-2">
<div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden">
<img alt="Agent Synth" data-alt="vibrant robotic avatar with orange sensors and dark grey frame" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAV_6rej_vtAWaIsmZcXcLDxKSewSyEHc3geV8M5JfOkfJXM6lK0daXQTqYNJFewmDhN5WKkg96-fIQSD_RICbl9u3_hS_mMt6IQ54uNnB08i7plF7Btuja-XXGVYNaAHkKKGpa9Jz10KzVpXU3vpby47eaNCQJ5duj9fupc1t_jCdjhBjYdPt-8Vxc5PtEfYfDjxwql6FHDZsSnxw-6W6E8lcM3GWX6kcttlOWDxbDlioB2C99E0DRuND9S8SrXlL_X5DPYQNA1xI"/>
</div>
</div>
</td>
<td class="px-6 py-5 text-right">
<div class="flex justify-end gap-2">
<button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest hover:bg-primary-container hover:text-on-primary-fixed transition-all group/btn">
<span class="material-symbols-outlined text-sm">description</span>
<span class="text-[10px] font-headline font-bold tracking-tighter uppercase">DOCX</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination/Footer -->
<div class="px-6 py-4 flex items-center justify-between border-t border-outline-variant/20 bg-surface-container-low">
<span class="text-[10px] font-headline text-on-surface-variant tracking-widest uppercase">Showing 1-15 of 1,284 missions</span>
<div class="flex gap-2">
<button class="p-1 hover:text-primary transition-colors"><span class="material-symbols-outlined">chevron_left</span></button>
<div class="flex items-center gap-1">
<button class="h-6 w-6 bg-primary-container text-on-primary-fixed text-[10px] font-bold font-headline flex items-center justify-center">1</button>
<button class="h-6 w-6 hover:bg-surface-container-highest text-[10px] font-bold font-headline flex items-center justify-center">2</button>
<button class="h-6 w-6 hover:bg-surface-container-highest text-[10px] font-bold font-headline flex items-center justify-center">3</button>
<span class="text-[10px] px-1">...</span>
<button class="h-6 w-6 hover:bg-surface-container-highest text-[10px] font-bold font-headline flex items-center justify-center">86</button>
</div>
<button class="p-1 hover:text-primary transition-colors"><span class="material-symbols-outlined">chevron_right</span></button>
</div>
</div>
</div>
<!-- Contextual Insights Section -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-surface-container-high/50 p-6 rounded-lg border border-outline-variant/10">
<h4 class="text-xs font-headline font-bold tracking-[0.2em] text-primary uppercase mb-4">Anomalous Activity Logs</h4>
<div class="space-y-3">
<div class="flex gap-4 p-3 bg-surface-container-highest/30">
<span class="material-symbols-outlined text-error text-lg">warning</span>
<div class="flex flex-col">
<span class="text-[10px] font-headline text-error font-bold tracking-widest uppercase">2024.05.11 09:16:12</span>
<p class="text-xs text-on-surface-variant">Critical memory leak detected in MC-9079-BETA deployment during sub-orbital burn sequence.</p>
</div>
</div>
<div class="flex gap-4 p-3 bg-surface-container-highest/30">
<span class="material-symbols-outlined text-tertiary text-lg">info</span>
<div class="flex flex-col">
<span class="text-[10px] font-headline text-tertiary font-bold tracking-widest uppercase">2024.05.09 11:46:00</span>
<p class="text-xs text-on-surface-variant">Unexpected latency spike (450ms) during Data Lake Synthesis. Protocol shifted to fail-safe.</p>
</div>
</div>
</div>
</div>
<div class="bg-surface-container-high/50 p-6 rounded-lg border border-outline-variant/10">
<h4 class="text-xs font-headline font-bold tracking-[0.2em] text-secondary uppercase mb-4">Resource Allocation Efficiency</h4>
<div class="space-y-4">
<div class="space-y-1">
<div class="flex justify-between text-[10px] font-headline uppercase">
<span class="text-on-surface-variant">Compute Load</span>
<span class="text-secondary">42%</span>
</div>
<div class="h-1 w-full bg-surface-container-highest">
<div class="h-full bg-secondary shadow-[0_0_10px_rgba(55,238,155,0.4)]" style="width: 42%"></div>
</div>
</div>
<div class="space-y-1">
<div class="flex justify-between text-[10px] font-headline uppercase">
<span class="text-on-surface-variant">Neural Synapse Usage</span>
<span class="text-primary">78%</span>
</div>
<div class="h-1 w-full bg-surface-container-highest">
<div class="h-full bg-primary shadow-[0_0_10px_rgba(153,247,255,0.4)]" style="width: 78%"></div>
</div>
</div>
<div class="space-y-1">
<div class="flex justify-between text-[10px] font-headline uppercase">
<span class="text-on-surface-variant">Archive Compression</span>
<span class="text-tertiary">91%</span>
</div>
<div class="h-1 w-full bg-surface-container-highest">
<div class="h-full bg-tertiary shadow-[0_0_10px_rgba(255,201,101,0.4)]" style="width: 91%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Decorative Glow Element -->
<div class="fixed bottom-0 right-0 w-[500px] h-[500px] bg-primary/5 blur-[120px] -z-10 pointer-events-none"></div>
<div class="fixed top-0 left-0 w-[300px] h-[300px] bg-secondary/5 blur-[100px] -z-10 pointer-events-none"></div>
</body></html>