npm - genoma-evolution - Versions diffs - 1.0.0 - Mend

genoma-evolution 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (445) hide show

package/.claude/worktrees/phase-2-mcp/stitch/datasets/code.html ADDED Viewed

@@ -0,0 +1,479 @@
+<!DOCTYPE html>
+<html class="light" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Hermes - Datasets</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&amp;family=JetBrains+Mono:wght@400;500&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": {
+                        "error-container": "#ffdad6",
+                        "on-primary": "#ffffff",
+                        "secondary-fixed-dim": "#ffb59b",
+                        "secondary-container": "#fe753f",
+                        "on-background": "#1a1c1e",
+                        "tertiary-fixed-dim": "#c8c6c5",
+                        "secondary-fixed": "#ffdbcf",
+                        "primary-container": "#002444",
+                        "surface-container-lowest": "#ffffff",
+                        "inverse-on-surface": "#f1f0f3",
+                        "background": "#faf9fc",
+                        "inverse-surface": "#2f3033",
+                        "surface-container-highest": "#e3e2e5",
+                        "error": "#ba1a1a",
+                        "surface-container-high": "#e9e8eb",
+                        "on-tertiary-fixed": "#1b1c1b",
+                        "on-error-container": "#93000a",
+                        "on-tertiary": "#ffffff",
+                        "surface-dim": "#dad9dd",
+                        "secondary": "#a93800",
+                        "primary-fixed": "#d2e4ff",
+                        "surface": "#faf9fc",
+                        "on-secondary-container": "#631d00",
+                        "on-primary-fixed-variant": "#2c486a",
+                        "surface-container-low": "#f4f3f6",
+                        "on-secondary-fixed": "#380d00",
+                        "tertiary": "#0d0d0d",
+                        "primary-fixed-dim": "#acc9f1",
+                        "on-secondary-fixed-variant": "#812900",
+                        "inverse-primary": "#acc9f1",
+                        "surface-container": "#eeedf1",
+                        "tertiary-container": "#232323",
+                        "surface-tint": "#446083",
+                        "on-secondary": "#ffffff",
+                        "surface-bright": "#faf9fc",
+                        "on-tertiary-container": "#8b8a89",
+                        "tertiary-fixed": "#e4e2e1",
+                        "outline": "#73777f",
+                        "on-error": "#ffffff",
+                        "on-surface-variant": "#43474e",
+                        "outline-variant": "#c3c6cf",
+                        "primary": "#000e20",
+                        "on-surface": "#1a1c1e",
+                        "on-primary-container": "#708cb2",
+                        "on-tertiary-fixed-variant": "#474746",
+                        "surface-variant": "#e3e2e5",
+                        "on-primary-fixed": "#001c37"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "component-gap": "8px",
+                        "gutter": "16px",
+                        "unit": "8px",
+                        "container-padding": "24px",
+                        "max-width": "1440px",
+                        "stack-tight": "4px"
+                    },
+                    "fontFamily": {
+                        "headline-md": ["Inter"],
+                        "body-lg": ["Inter"],
+                        "mono-label": ["JetBrains Mono"],
+                        "label-caps": ["Inter"],
+                        "headline-lg": ["Inter"],
+                        "body-sm": ["Inter"],
+                        "body-md": ["Inter"],
+                        "mono-data": ["JetBrains Mono"],
+                        "headline-sm": ["Inter"]
+                    },
+                    "fontSize": {
+                        "headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
+                        "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
+                        "mono-label": ["13px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "500" }],
+                        "label-caps": ["11px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700" }],
+                        "headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
+                        "body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
+                        "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "mono-data": ["12px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }]
+                    }
+                }
+            }
+        }
+    </script>
+<style>
+        .shimmer {
+            background: linear-gradient(90deg, #eeedf1 25%, #faf9fc 50%, #eeedf1 75%);
+            background-size: 200% 100%;
+            animation: shimmer 1.5s infinite;
+        }
+        @keyframes shimmer {
+            0% { background-position: -200% 0; }
+            100% { background-position: 200% 0; }
+        }
+        .pulse-dot {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
+            70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(76, 175, 80, 0); }
+            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
+        }
+        .pulse-dot-sync {
+            animation: pulse-sync 2s infinite;
+        }
+        @keyframes pulse-sync {
+            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }
+            70% { transform: scale(1); box-shadow: 0 0 0 4px rgba(33, 150, 243, 0); }
+            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
+        }
+    </style>
+</head>
+<body class="bg-background text-on-background antialiased flex flex-col md:flex-row min-h-screen overflow-x-hidden">
+<!-- SideNavBar (Desktop) -->
+<nav class="hidden md:flex flex-col h-screen py-container-padding gap-component-gap bg-surface-container-low border-r border-outline-variant/30 docked left-0 w-64 flex-shrink-0 z-40 fixed">
+<div class="px-container-padding pb-6 flex items-center gap-3">
+<div class="w-8 h-8 rounded-DEFAULT bg-primary flex items-center justify-center text-on-primary font-headline-sm text-headline-sm font-bold">H</div>
+<div>
+<h1 class="font-headline-sm text-headline-sm font-black text-primary tracking-tighter">Hermes Control</h1>
+<p class="font-mono-label text-mono-label text-on-surface-variant">v4.2.0-Alpha</p>
+</div>
+</div>
+<div class="px-gutter mb-4">
+<button class="w-full bg-primary text-on-primary font-label-caps text-label-caps py-2 rounded-DEFAULT flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
+<span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">add</span>
+                New Experiment
+            </button>
+</div>
+<ul class="flex flex-col flex-1 px-2 gap-1 overflow-y-auto">
+<li>
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant hover:text-primary hover:bg-surface-container transition-all" href="#">
+<span class="material-symbols-outlined text-[20px]" data-icon="dashboard">dashboard</span>
+<span class="font-label-caps text-label-caps tracking-widest">Overview</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant hover:text-primary hover:bg-surface-container transition-all" href="#">
+<span class="material-symbols-outlined text-[20px]" data-icon="extension">extension</span>
+<span class="font-label-caps text-label-caps tracking-widest">Skill Hub</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant hover:text-primary hover:bg-surface-container transition-all" href="#">
+<span class="material-symbols-outlined text-[20px]" data-icon="auto_awesome">auto_awesome</span>
+<span class="font-label-caps text-label-caps tracking-widest">Evolution</span>
+</a>
+</li>
+<li>
+<!-- ACTIVE STATE -->
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-primary border-r-4 border-secondary bg-surface-container-highest scale-98 duration-150 transition-all" href="#">
+<span class="material-symbols-outlined text-[20px]" data-icon="database" style="font-variation-settings: 'FILL' 1;">database</span>
+<span class="font-label-caps text-label-caps tracking-widest">Datasets</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant hover:text-primary hover:bg-surface-container transition-all" href="#">
+<span class="material-symbols-outlined text-[20px]" data-icon="monitoring">monitoring</span>
+<span class="font-label-caps text-label-caps tracking-widest">Metrics</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant hover:text-primary hover:bg-surface-container transition-all" href="#">
+<span class="material-symbols-outlined text-[20px]" data-icon="terminal">terminal</span>
+<span class="font-label-caps text-label-caps tracking-widest">Live Logs</span>
+</a>
+</li>
+<li>
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant hover:text-primary hover:bg-surface-container transition-all" href="#">
+<span class="material-symbols-outlined text-[20px]" data-icon="inventory_2">inventory_2</span>
+<span class="font-label-caps text-label-caps tracking-widest">Curator</span>
+</a>
+</li>
+<li class="mt-auto">
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant hover:text-primary hover:bg-surface-container transition-all" href="#">
+<span class="material-symbols-outlined text-[20px]" data-icon="settings">settings</span>
+<span class="font-label-caps text-label-caps tracking-widest">Settings</span>
+</a>
+</li>
+</ul>
+</nav>
+<!-- Main Content Area -->
+<main class="flex-1 flex flex-col md:ml-64 w-full">
+<!-- TopAppBar -->
+<header class="flex justify-between items-center w-full px-gutter h-16 z-50 bg-surface border-b border-outline-variant/30 sticky top-0">
+<div class="flex items-center gap-4">
+<!-- Mobile Menu Button (hidden on desktop) -->
+<button class="md:hidden text-primary">
+<span class="material-symbols-outlined">menu</span>
+</button>
+<div class="md:hidden font-headline-sm text-headline-sm font-bold tracking-tighter text-primary">Hermes</div>
+</div>
+<!-- Search (center/left leaning) -->
+<div class="hidden md:flex flex-1 max-w-md mx-4">
+<div class="relative w-full">
+<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]">search</span>
+<input class="w-full bg-surface-container-low border border-outline-variant/50 rounded-DEFAULT pl-10 pr-4 py-1.5 font-body-sm text-body-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-on-surface placeholder:text-outline" placeholder="Search datasets..." type="text"/>
+</div>
+</div>
+<div class="flex items-center gap-4">
+<div class="flex items-center gap-1">
+<button class="p-2 rounded-full text-on-surface-variant hover:bg-surface-container-high transition-colors">
+<span class="material-symbols-outlined text-[20px]" data-icon="sync">sync</span>
+</button>
+<button class="p-2 rounded-full text-on-surface-variant hover:bg-surface-container-high transition-colors relative">
+<span class="absolute top-2 right-2 w-2 h-2 bg-secondary rounded-full"></span>
+<span class="material-symbols-outlined text-[20px]" data-icon="notifications">notifications</span>
+</button>
+</div>
+<div class="hidden md:flex items-center gap-2">
+<span class="font-label-caps text-label-caps text-outline">Syncing</span>
+<span class="w-2 h-2 rounded-full bg-[#2196F3] pulse-dot-sync"></span>
+</div>
+<img alt="User Profile Avatar" class="w-8 h-8 rounded-full border border-outline-variant/30 cursor-pointer hover:opacity-80 transition-opacity" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDE_3B6tA29uYsrSVKK3USAzJSxuev2-qti40MXF2Sh9FUbYWIUPK02pWchPbYOVqDYyBI1PjusVed__irPTWpsj7Sh6YrhDVWEry9-VUOaPo2Y8OPfabMozSPYZZ8NXkfW_hhm8tYNQa--cWKEcg2ADZ2D_293gYVSisNEMu155FlsV2sEQKM_lLF4WCKzo8FPLaRvKUrch-XPlFXWWstvPxE1SsoYZVCQ40CdzNCL0JH2LNbaxWTIvjsEvxHMBBxWC1kR6GJZFiOO"/>
+</div>
+</header>
+<!-- Dashboard Canvas -->
+<div class="p-container-padding flex-1 flex flex-col gap-6 max-w-[1440px] mx-auto w-full">
+<!-- Page Header & Global Actions -->
+<div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
+<div>
+<h2 class="font-headline-lg text-headline-lg text-on-surface">Datasets</h2>
+<p class="font-body-md text-body-md text-on-surface-variant mt-1">Manage training and validation data streams.</p>
+</div>
+<div class="flex gap-2">
+<button class="px-4 py-2 bg-surface text-primary border border-outline-variant/50 rounded-DEFAULT font-mono-label text-mono-label hover:bg-surface-container-low transition-colors flex items-center gap-2">
+<span class="material-symbols-outlined text-[16px]">filter_list</span> Filter
+                    </button>
+<button class="px-4 py-2 bg-primary text-on-primary rounded-DEFAULT font-mono-label text-mono-label hover:opacity-90 transition-opacity flex items-center gap-2">
+<span class="material-symbols-outlined text-[16px]">cloud_upload</span> Connect Source
+                    </button>
+</div>
+</div>
+<!-- Bento Grid Layout for Main Content -->
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
+<!-- Main Datasets List (Spans 8 cols on large screens) -->
+<div class="lg:col-span-8 flex flex-col gap-unit">
+<div class="flex justify-between items-center px-2 py-1">
+<span class="font-label-caps text-label-caps text-on-surface-variant">ACTIVE STREAMS (4)</span>
+<a class="font-label-caps text-label-caps text-primary hover:underline" href="#">VIEW ALL</a>
+</div>
+<!-- Card 1: Healthy Dataset -->
+<div class="bg-surface border border-outline-variant/20 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:shadow-sm transition-shadow">
+<div class="flex items-start gap-4 w-full sm:w-auto">
+<div class="w-10 h-10 rounded-DEFAULT bg-surface-container-highest flex items-center justify-center flex-shrink-0 text-on-surface-variant">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">dataset</span>
+</div>
+<div>
+<div class="flex items-center gap-2">
+<h3 class="font-headline-sm text-headline-sm text-on-surface leading-tight">Customer_Telemetry_Prod</h3>
+<span class="px-2 py-0.5 rounded-full bg-green-100 text-green-800 font-label-caps text-[9px] border border-green-200">HEALTHY</span>
+</div>
+<div class="flex items-center gap-4 mt-1 font-mono-data text-mono-data text-outline">
+<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">cloud</span> S3</span>
+<span>•</span>
+<span>4.2M rows</span>
+<span>•</span>
+<span>Sync: 10m ago</span>
+</div>
+</div>
+</div>
+<div class="flex items-center gap-6 w-full sm:w-auto justify-between sm:justify-end border-t sm:border-t-0 border-outline-variant/20 pt-3 sm:pt-0 mt-2 sm:mt-0">
+<div class="text-right">
+<div class="font-mono-label text-mono-label text-on-surface">98%</div>
+<div class="font-body-sm text-body-sm text-outline">Quality</div>
+</div>
+<div class="flex gap-2">
+<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-surface-container rounded-DEFAULT transition-colors" title="Validate">
+<span class="material-symbols-outlined text-[18px]">verified</span>
+</button>
+<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-surface-container rounded-DEFAULT transition-colors" title="Export">
+<span class="material-symbols-outlined text-[18px]">download</span>
+</button>
+<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-surface-container rounded-DEFAULT transition-colors" title="More">
+<span class="material-symbols-outlined text-[18px]">more_vert</span>
+</button>
+</div>
+</div>
+</div>
+<!-- Card 2: Syncing Dataset -->
+<div class="bg-surface border border-outline-variant/20 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:shadow-sm transition-shadow relative overflow-hidden">
+<!-- Progress bar hint -->
+<div class="absolute bottom-0 left-0 h-1 bg-surface-container-highest w-full">
+<div class="h-full bg-[#2196F3] w-1/3 transition-all duration-1000"></div>
+</div>
+<div class="flex items-start gap-4 w-full sm:w-auto">
+<div class="w-10 h-10 rounded-DEFAULT bg-primary-fixed-dim/20 flex items-center justify-center flex-shrink-0 text-primary">
+<span class="material-symbols-outlined animate-spin" style="font-variation-settings: 'FILL' 1;">sync</span>
+</div>
+<div>
+<div class="flex items-center gap-2">
+<h3 class="font-headline-sm text-headline-sm text-on-surface leading-tight">Financial_Tx_History</h3>
+<span class="px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 font-label-caps text-[9px] border border-blue-200 flex items-center gap-1">
+<span class="w-1.5 h-1.5 rounded-full bg-blue-600 pulse-dot-sync"></span> SYNCING
+                                    </span>
+</div>
+<div class="flex items-center gap-4 mt-1 font-mono-data text-mono-data text-outline">
+<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">api</span> REST API</span>
+<span>•</span>
+<span>1.1M rows</span>
+<span>•</span>
+<span>ETA: 2m</span>
+</div>
+</div>
+</div>
+<div class="flex items-center gap-6 w-full sm:w-auto justify-between sm:justify-end border-t sm:border-t-0 border-outline-variant/20 pt-3 sm:pt-0 mt-2 sm:mt-0">
+<div class="text-right opacity-50">
+<div class="font-mono-label text-mono-label text-on-surface">--</div>
+<div class="font-body-sm text-body-sm text-outline">Quality</div>
+</div>
+<div class="flex gap-2">
+<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-surface-container rounded-DEFAULT transition-colors opacity-50 cursor-not-allowed">
+<span class="material-symbols-outlined text-[18px]">verified</span>
+</button>
+<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-surface-container rounded-DEFAULT transition-colors opacity-50 cursor-not-allowed">
+<span class="material-symbols-outlined text-[18px]">download</span>
+</button>
+<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-surface-container rounded-DEFAULT transition-colors">
+<span class="material-symbols-outlined text-[18px]">more_vert</span>
+</button>
+</div>
+</div>
+</div>
+<!-- Card 3: Warning/Stale Dataset -->
+<div class="bg-surface border-l-4 border-l-orange-400 border border-outline-variant/20 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:shadow-sm transition-shadow">
+<div class="flex items-start gap-4 w-full sm:w-auto">
+<div class="w-10 h-10 rounded-DEFAULT bg-orange-50 flex items-center justify-center flex-shrink-0 text-orange-600">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">warning</span>
+</div>
+<div>
+<div class="flex items-center gap-2">
+<h3 class="font-headline-sm text-headline-sm text-on-surface leading-tight">User_Demographics_Q3</h3>
+<span class="px-2 py-0.5 rounded-full bg-orange-100 text-orange-800 font-label-caps text-[9px] border border-orange-200">STALE</span>
+</div>
+<div class="flex items-center gap-4 mt-1 font-mono-data text-mono-data text-outline">
+<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">table</span> BigQuery</span>
+<span>•</span>
+<span>845K rows</span>
+<span>•</span>
+<span class="text-orange-600 font-medium">Sync: 14d ago</span>
+</div>
+</div>
+</div>
+<div class="flex items-center gap-6 w-full sm:w-auto justify-between sm:justify-end border-t sm:border-t-0 border-outline-variant/20 pt-3 sm:pt-0 mt-2 sm:mt-0">
+<div class="text-right">
+<div class="font-mono-label text-mono-label text-on-surface">92%</div>
+<div class="font-body-sm text-body-sm text-outline">Quality</div>
+</div>
+<div class="flex gap-2">
+<button class="p-1.5 text-primary hover:bg-primary-fixed-dim/20 rounded-DEFAULT transition-colors" title="Force Refresh">
+<span class="material-symbols-outlined text-[18px]">refresh</span>
+</button>
+<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-surface-container rounded-DEFAULT transition-colors" title="Export">
+<span class="material-symbols-outlined text-[18px]">download</span>
+</button>
+<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-surface-container rounded-DEFAULT transition-colors" title="More">
+<span class="material-symbols-outlined text-[18px]">more_vert</span>
+</button>
+</div>
+</div>
+</div>
+<!-- Card 4: Error/Poor Quality Dataset -->
+<div class="bg-surface border-l-4 border-l-secondary border border-outline-variant/20 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 hover:shadow-sm transition-shadow">
+<div class="flex items-start gap-4 w-full sm:w-auto">
+<div class="w-10 h-10 rounded-DEFAULT bg-error-container/50 flex items-center justify-center flex-shrink-0 text-secondary">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">error</span>
+</div>
+<div>
+<div class="flex items-center gap-2">
+<h3 class="font-headline-sm text-headline-sm text-on-surface leading-tight">Legacy_CRM_Dump</h3>
+<span class="px-2 py-0.5 rounded-full bg-red-100 text-red-800 font-label-caps text-[9px] border border-red-200">POOR QUALITY</span>
+</div>
+<div class="flex items-center gap-4 mt-1 font-mono-data text-mono-data text-outline">
+<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">description</span> CSV</span>
+<span>•</span>
+<span>2.4M rows</span>
+<span>•</span>
+<span>Sync: 2h ago</span>
+</div>
+</div>
+</div>
+<div class="flex items-center gap-6 w-full sm:w-auto justify-between sm:justify-end border-t sm:border-t-0 border-outline-variant/20 pt-3 sm:pt-0 mt-2 sm:mt-0">
+<div class="text-right">
+<div class="font-mono-label text-mono-label text-secondary font-bold flex items-center gap-1">
+<span class="material-symbols-outlined text-[14px]">arrow_downward</span> 43%
+                                </div>
+<div class="font-body-sm text-body-sm text-outline">Quality</div>
+</div>
+<div class="flex gap-2">
+<button class="px-3 py-1 bg-secondary text-on-primary rounded-DEFAULT font-mono-label text-[11px] hover:opacity-90 transition-opacity">
+                                    REVIEW
+                                </button>
+<button class="p-1.5 text-on-surface-variant hover:text-primary hover:bg-surface-container rounded-DEFAULT transition-colors" title="More">
+<span class="material-symbols-outlined text-[18px]">more_vert</span>
+</button>
+</div>
+</div>
+</div>
+</div>
+<!-- Side Panel (Spans 4 cols on large screens) -->
+<div class="lg:col-span-4 flex flex-col gap-6">
+<!-- Global Stats -->
+<div class="bg-surface border border-outline-variant/20 rounded-lg p-5">
+<h4 class="font-label-caps text-label-caps text-on-surface-variant mb-4">SYSTEM HEALTH</h4>
+<div class="grid grid-cols-2 gap-4">
+<div>
+<div class="font-body-sm text-outline mb-1">Total Volume</div>
+<div class="font-mono-data text-[20px] text-on-surface">18.4TB</div>
+</div>
+<div>
+<div class="font-body-sm text-outline mb-1">Avg Quality</div>
+<div class="font-mono-data text-[20px] text-on-surface">89.2%</div>
+</div>
+</div>
+</div>
+<!-- Placeholder: Data Distribution Skeletons -->
+<div class="bg-surface border border-outline-variant/20 rounded-lg p-5 flex flex-col h-full">
+<h4 class="font-label-caps text-label-caps text-on-surface-variant mb-4 flex justify-between items-center">
+                            DISTRIBUTION ANALYSIS
+                            <span class="material-symbols-outlined text-[14px] text-outline">info</span>
+</h4>
+<div class="flex-1 flex flex-col gap-4">
+<!-- Skeleton Chart 1 -->
+<div>
+<div class="flex justify-between items-end mb-2">
+<div class="h-3 w-24 bg-surface-container-highest rounded shimmer"></div>
+<div class="h-2 w-12 bg-surface-container-highest rounded shimmer"></div>
+</div>
+<div class="h-32 w-full bg-surface-container-lowest border border-outline-variant/20 rounded flex items-end p-2 gap-2">
+<div class="w-1/6 h-[40%] bg-surface-container-highest rounded-t shimmer"></div>
+<div class="w-1/6 h-[70%] bg-surface-container-highest rounded-t shimmer"></div>
+<div class="w-1/6 h-[90%] bg-surface-container-highest rounded-t shimmer"></div>
+<div class="w-1/6 h-[60%] bg-surface-container-highest rounded-t shimmer"></div>
+<div class="w-1/6 h-[30%] bg-surface-container-highest rounded-t shimmer"></div>
+<div class="w-1/6 h-[50%] bg-surface-container-highest rounded-t shimmer"></div>
+</div>
+</div>
+<!-- Skeleton Chart 2 -->
+<div class="mt-4">
+<div class="flex justify-between items-end mb-2">
+<div class="h-3 w-32 bg-surface-container-highest rounded shimmer"></div>
+</div>
+<div class="space-y-2">
+<div class="h-2 w-full bg-surface-container-highest rounded shimmer"></div>
+<div class="h-2 w-5/6 bg-surface-container-highest rounded shimmer"></div>
+<div class="h-2 w-4/6 bg-surface-container-highest rounded shimmer"></div>
+</div>
+</div>
+</div>
+<div class="mt-4 pt-4 border-t border-outline-variant/20 text-center">
+<span class="font-body-sm text-outline flex items-center justify-center gap-1">
+<span class="material-symbols-outlined text-[14px] animate-spin">hourglass_empty</span> Analyzing recent ingestion...
+                            </span>
+</div>
+</div>
+</div>
+</div>
+</div>
+</main>
+</body></html>

package/.claude/worktrees/phase-2-mcp/stitch/datasets/screen.png ADDED Viewed

Binary file