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/system_metrics/code.html ADDED Viewed

@@ -0,0 +1,527 @@
+<!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 Control - Metrics</title>
+<!-- Google Fonts -->
+<link href="https://fonts.googleapis.com" rel="preconnect"/>
+<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet"/>
+<!-- Material Symbols -->
+<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"/>
+<style>
+        .material-symbols-outlined {
+            font-family: 'Material Symbols Outlined';
+            font-weight: normal;
+            font-style: normal;
+            font-size: 20px; /* Default sizing, adjusted by utility classes if needed */
+            line-height: 1;
+            letter-spacing: normal;
+            text-transform: none;
+            display: inline-block;
+            white-space: nowrap;
+            word-wrap: normal;
+            direction: ltr;
+            -webkit-font-feature-settings: 'liga';
+            -webkit-font-smoothing: antialiased;
+        }
+        /* Shimmer effect for skeleton loaders or generic live data simulation */
+        @keyframes shimmer {
+            0% { background-position: -1000px 0; }
+            100% { background-position: 1000px 0; }
+        }
+        .animate-shimmer {
+            background: linear-gradient(to right, #f4f3f6 4%, #e9e8eb 25%, #f4f3f6 36%);
+            background-size: 1000px 100%;
+            animation: shimmer 2s infinite linear;
+        }
+        /* Subtle grid background for chart areas */
+        .bg-chart-grid {
+            background-image: linear-gradient(to right, rgba(195, 198, 207, 0.1) 1px, transparent 1px),
+                              linear-gradient(to bottom, rgba(195, 198, 207, 0.1) 1px, transparent 1px);
+            background-size: 24px 24px;
+        }
+    </style>
+<!-- Tailwind CSS -->
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<!-- Tailwind Configuration -->
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "on-background": "#1a1c1e",
+                        "surface-tint": "#446083",
+                        "on-tertiary-container": "#8b8a89",
+                        "surface-container": "#eeedf1",
+                        "inverse-surface": "#2f3033",
+                        "tertiary-container": "#232323",
+                        "on-surface": "#1a1c1e",
+                        "on-primary-fixed-variant": "#2c486a",
+                        "outline": "#73777f",
+                        "surface-container-high": "#e9e8eb",
+                        "surface-bright": "#faf9fc",
+                        "on-tertiary-fixed-variant": "#474746",
+                        "on-secondary-fixed": "#380d00",
+                        "tertiary": "#0d0d0d",
+                        "surface": "#faf9fc",
+                        "outline-variant": "#c3c6cf",
+                        "on-primary-fixed": "#001c37",
+                        "surface-container-highest": "#e3e2e5",
+                        "primary-fixed-dim": "#acc9f1",
+                        "primary-fixed": "#d2e4ff",
+                        "on-secondary": "#ffffff",
+                        "on-primary": "#ffffff",
+                        "surface-container-lowest": "#ffffff",
+                        "surface-dim": "#dad9dd",
+                        "primary-container": "#002444",
+                        "error-container": "#ffdad6",
+                        "secondary-fixed-dim": "#ffb59b",
+                        "secondary-fixed": "#ffdbcf",
+                        "on-surface-variant": "#43474e",
+                        "inverse-on-surface": "#f1f0f3",
+                        "secondary-container": "#fe753f",
+                        "on-tertiary": "#ffffff",
+                        "primary": "#000e20",
+                        "on-secondary-container": "#631d00",
+                        "on-error": "#ffffff",
+                        "secondary": "#a93800",
+                        "error": "#ba1a1a",
+                        "surface-variant": "#e3e2e5",
+                        "on-primary-container": "#708cb2",
+                        "tertiary-fixed-dim": "#c8c6c5",
+                        "tertiary-fixed": "#e4e2e1",
+                        "on-tertiary-fixed": "#1b1c1b",
+                        "surface-container-low": "#f4f3f6",
+                        "on-secondary-fixed-variant": "#812900",
+                        "on-error-container": "#93000a",
+                        "background": "#faf9fc",
+                        "inverse-primary": "#acc9f1"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.125rem",
+                        "lg": "0.25rem",
+                        "xl": "0.5rem",
+                        "full": "0.75rem"
+                    },
+                    "spacing": {
+                        "unit": "8px",
+                        "stack-tight": "4px",
+                        "container-padding": "24px",
+                        "max-width": "1440px",
+                        "gutter": "16px",
+                        "component-gap": "8px"
+                    },
+                    "fontFamily": {
+                        "body-sm": ["Inter"],
+                        "body-md": ["Inter"],
+                        "body-lg": ["Inter"],
+                        "mono-data": ["JetBrains Mono"],
+                        "headline-sm": ["Inter"],
+                        "label-caps": ["Inter"],
+                        "headline-lg": ["Inter"],
+                        "mono-label": ["JetBrains Mono"],
+                        "headline-md": ["Inter"]
+                    },
+                    "fontSize": {
+                        "body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
+                        "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
+                        "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }],
+                        "mono-data": ["12px", { "lineHeight": "18px", "fontWeight": "400" }],
+                        "headline-sm": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
+                        "label-caps": ["11px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700" }],
+                        "headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600" }],
+                        "mono-label": ["13px", { "lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "500" }],
+                        "headline-md": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600" }]
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-background text-on-background flex h-screen w-full overflow-hidden antialiased selection:bg-primary-container selection:text-on-primary">
+<!-- SideNavBar (Shared Component) -->
+<aside class="hidden md:flex flex-col h-full py-container-padding gap-component-gap bg-surface-container-low dark:bg-primary-container docked left-0 w-64 h-screen border-r border-outline-variant/30 dark:border-outline/20 z-40 shrink-0">
+<!-- Header -->
+<div class="px-container-padding mb-gutter flex items-center gap-unit">
+<div aria-label="Hermes System Logo" class="w-8 h-8 rounded-DEFAULT bg-primary flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-on-primary" style="font-variation-settings: 'FILL' 1; font-size: 16px;">hexagon</span>
+</div>
+<div class="flex flex-col">
+<span class="font-headline-sm text-headline-sm font-black text-primary dark:text-primary-fixed-dim tracking-tighter leading-none">Hermes Control</span>
+<span class="font-mono-data text-mono-data text-on-surface-variant opacity-70">v4.2.0-Alpha</span>
+</div>
+</div>
+<!-- Navigation Links -->
+<nav class="flex-1 flex flex-col gap-1 px-unit overflow-y-auto">
+<!-- Inactive -->
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant dark:text-on-tertiary-fixed-variant hover:text-primary dark:hover:text-primary-fixed hover:bg-surface-container dark:hover:bg-tertiary-container transition-all" href="#">
+<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
+<span class="font-label-caps text-label-caps tracking-widest uppercase">Overview</span>
+</a>
+<!-- Inactive -->
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant dark:text-on-tertiary-fixed-variant hover:text-primary dark:hover:text-primary-fixed hover:bg-surface-container dark:hover:bg-tertiary-container transition-all" href="#">
+<span class="material-symbols-outlined" data-icon="extension">extension</span>
+<span class="font-label-caps text-label-caps tracking-widest uppercase">Skill Hub</span>
+</a>
+<!-- Inactive -->
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant dark:text-on-tertiary-fixed-variant hover:text-primary dark:hover:text-primary-fixed hover:bg-surface-container dark:hover:bg-tertiary-container transition-all" href="#">
+<span class="material-symbols-outlined" data-icon="auto_awesome">auto_awesome</span>
+<span class="font-label-caps text-label-caps tracking-widest uppercase">Evolution</span>
+</a>
+<!-- Inactive -->
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant dark:text-on-tertiary-fixed-variant hover:text-primary dark:hover:text-primary-fixed hover:bg-surface-container dark:hover:bg-tertiary-container transition-all" href="#">
+<span class="material-symbols-outlined" data-icon="database">database</span>
+<span class="font-label-caps text-label-caps tracking-widest uppercase">Datasets</span>
+</a>
+<!-- ACTIVE TAB: Metrics -->
+<a class="flex items-center gap-3 px-3 py-2 text-primary dark:text-on-primary border-r-4 border-secondary dark:border-secondary-fixed bg-surface-container-highest dark:bg-primary-fixed-dim/10 Active: scale-98 duration-150" href="#">
+<span class="material-symbols-outlined" data-icon="monitoring" style="font-variation-settings: 'FILL' 1;">monitoring</span>
+<span class="font-label-caps text-label-caps tracking-widest uppercase font-bold">Metrics</span>
+</a>
+<!-- Inactive -->
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant dark:text-on-tertiary-fixed-variant hover:text-primary dark:hover:text-primary-fixed hover:bg-surface-container dark:hover:bg-tertiary-container transition-all" href="#">
+<span class="material-symbols-outlined" data-icon="terminal">terminal</span>
+<span class="font-label-caps text-label-caps tracking-widest uppercase">Live Logs</span>
+</a>
+<!-- Inactive -->
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant dark:text-on-tertiary-fixed-variant hover:text-primary dark:hover:text-primary-fixed hover:bg-surface-container dark:hover:bg-tertiary-container transition-all" href="#">
+<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
+<span class="font-label-caps text-label-caps tracking-widest uppercase">Curator</span>
+</a>
+<!-- Inactive -->
+<a class="flex items-center gap-3 px-3 py-2 rounded-DEFAULT text-on-surface-variant dark:text-on-tertiary-fixed-variant hover:text-primary dark:hover:text-primary-fixed hover:bg-surface-container dark:hover:bg-tertiary-container transition-all" href="#">
+<span class="material-symbols-outlined" data-icon="settings">settings</span>
+<span class="font-label-caps text-label-caps tracking-widest uppercase">Settings</span>
+</a>
+</nav>
+<!-- CTA -->
+<div class="px-gutter mt-auto pt-gutter">
+<button class="w-full flex items-center justify-center gap-2 bg-primary-container text-on-primary rounded-DEFAULT py-2 px-4 font-mono-label text-mono-label hover:opacity-90 transition-opacity">
+<span class="material-symbols-outlined" style="font-size: 16px;">add</span>
+                New Experiment
+            </button>
+</div>
+</aside>
+<!-- Main Viewport Area -->
+<div class="flex flex-col flex-1 h-full min-w-0">
+<!-- TopAppBar (Shared Component) -->
+<header class="bg-surface dark:bg-on-background border-b border-outline-variant/30 dark:border-outline/20 docked full-width top-0 flex justify-between items-center w-full px-gutter h-16 z-50 shrink-0">
+<!-- Left: Search (Responsive logic: icon on mobile, input on desktop) -->
+<div class="flex items-center flex-1 max-w-md">
+<div class="relative w-full hidden md:block">
+<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" style="font-size: 18px;">search</span>
+<input class="w-full bg-surface-container-low border border-outline-variant/50 rounded-DEFAULT pl-9 pr-3 py-1.5 font-body-sm text-body-sm text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-shadow placeholder:text-on-surface-variant/60" placeholder="Search systems, metrics, or logs..." type="text"/>
+</div>
+<!-- Mobile brand fallback -->
+<span class="md:hidden font-headline-sm text-headline-sm font-bold tracking-tighter text-primary dark:text-primary-fixed">Hermes</span>
+</div>
+<!-- Right: Actions & Profile -->
+<div class="flex items-center gap-gutter shrink-0">
+<!-- Trailing Primary Action -->
+<div class="hidden sm:flex items-center gap-2 text-primary dark:text-primary-fixed font-mono-data text-mono-data bg-surface-container px-2 py-1 rounded-DEFAULT border border-outline-variant/20">
+<div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
+                    Syncing
+                </div>
+<!-- Trailing Icon Actions -->
+<div class="flex items-center gap-1">
+<button class="p-2 text-on-surface-variant dark:text-on-tertiary-container hover:bg-surface-container-high dark:hover:bg-tertiary-container transition-colors rounded-DEFAULT Active: opacity-80 scale-95 transition-all">
+<span class="material-symbols-outlined" data-icon="sync">sync</span>
+</button>
+<button class="p-2 text-on-surface-variant dark:text-on-tertiary-container hover:bg-surface-container-high dark:hover:bg-tertiary-container transition-colors rounded-DEFAULT relative Active: opacity-80 scale-95 transition-all">
+<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
+<!-- Notification dot -->
+<span class="absolute top-2 right-2 w-2 h-2 bg-secondary rounded-full border border-surface"></span>
+</button>
+</div>
+<!-- Profile -->
+<div class="w-8 h-8 rounded-DEFAULT bg-surface-variant border border-outline-variant/50 overflow-hidden shrink-0 cursor-pointer">
+<!-- Placeholder using styling since no external image allowed -->
+<div class="w-full h-full bg-gradient-to-br from-primary-container to-surface-tint flex items-center justify-center text-on-primary font-mono-label text-mono-label">
+                        OP
+                    </div>
+</div>
+</div>
+</header>
+<!-- Main Canvas (Scrollable Data Area) -->
+<main class="flex-1 overflow-y-auto bg-background p-4 md:p-container-padding">
+<div class="max-w-max-width mx-auto flex flex-col gap-6">
+<!-- Page Header & Controls -->
+<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 border-b border-outline-variant/20 pb-4">
+<div>
+<h1 class="font-headline-md text-headline-md text-primary-container tracking-tight">System Performance Metrics</h1>
+<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Aggregated telemetry for core processing modules. Data refreshed every 15s.</p>
+</div>
+<!-- Timeframe Selector -->
+<div class="flex items-center gap-2 bg-surface-container-low border border-outline-variant/30 rounded-DEFAULT p-1">
+<button class="px-3 py-1 font-mono-label text-mono-label text-on-surface-variant hover:text-primary transition-colors">1H</button>
+<button class="px-3 py-1 font-mono-label text-mono-label text-on-surface-variant hover:text-primary transition-colors">24H</button>
+<button class="px-3 py-1 font-mono-label text-mono-label bg-surface border border-outline-variant/50 shadow-sm rounded-DEFAULT text-primary">7D</button>
+<button class="px-3 py-1 font-mono-label text-mono-label text-on-surface-variant hover:text-primary transition-colors">30D</button>
+</div>
+</div>
+<!-- LEVEL 1: Dense Stat Cards Grid (Bento style top row) -->
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+<!-- Stat Card 1: Success Rate -->
+<div class="bg-surface border border-outline-variant/30 rounded-lg p-4 flex flex-col justify-between">
+<div class="flex justify-between items-start mb-2">
+<span class="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Success Rate</span>
+<span class="material-symbols-outlined text-outline" style="font-size: 16px;">check_circle</span>
+</div>
+<div class="flex items-baseline gap-2">
+<span class="font-headline-lg text-headline-lg text-primary-container font-mono">99.98%</span>
+</div>
+<div class="flex items-center gap-1 mt-2">
+<span class="material-symbols-outlined text-emerald-600" style="font-size: 14px;">arrow_upward</span>
+<span class="font-mono-data text-mono-data text-emerald-600">+0.02%</span>
+<span class="font-body-sm text-body-sm text-outline ml-1">vs last 7d</span>
+</div>
+</div>
+<!-- Stat Card 2: Avg Latency -->
+<div class="bg-surface border border-outline-variant/30 rounded-lg p-4 flex flex-col justify-between">
+<div class="flex justify-between items-start mb-2">
+<span class="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Avg P95 Latency</span>
+<span class="material-symbols-outlined text-outline" style="font-size: 16px;">speed</span>
+</div>
+<div class="flex items-baseline gap-2">
+<span class="font-headline-lg text-headline-lg text-primary-container font-mono">142<span class="text-headline-sm text-on-surface-variant ml-1">ms</span></span>
+</div>
+<div class="flex items-center gap-1 mt-2">
+<span class="material-symbols-outlined text-emerald-600" style="font-size: 14px;">arrow_downward</span>
+<span class="font-mono-data text-mono-data text-emerald-600">-12ms</span>
+<span class="font-body-sm text-body-sm text-outline ml-1">vs last 7d</span>
+</div>
+</div>
+<!-- Stat Card 3: Regression Rate (Alert State) -->
+<div class="bg-surface border border-secondary/40 shadow-[0_0_0_1px_rgba(169,56,0,0.1)_inset] rounded-lg p-4 flex flex-col justify-between relative overflow-hidden">
+<!-- Alert accent strip -->
+<div class="absolute left-0 top-0 bottom-0 w-1 bg-secondary"></div>
+<div class="flex justify-between items-start mb-2 pl-2">
+<span class="font-label-caps text-label-caps text-secondary uppercase tracking-wider">Regression Rate</span>
+<span class="material-symbols-outlined text-secondary" style="font-size: 16px;">warning</span>
+</div>
+<div class="flex items-baseline gap-2 pl-2">
+<span class="font-headline-lg text-headline-lg text-secondary font-mono">1.24%</span>
+</div>
+<div class="flex items-center gap-1 mt-2 pl-2">
+<span class="material-symbols-outlined text-secondary" style="font-size: 14px;">arrow_upward</span>
+<span class="font-mono-data text-mono-data text-secondary">+0.4%</span>
+<span class="font-body-sm text-body-sm text-outline ml-1">Requires review</span>
+</div>
+</div>
+<!-- Stat Card 4: Improvement Velocity -->
+<div class="bg-surface border border-outline-variant/30 rounded-lg p-4 flex flex-col justify-between">
+<div class="flex justify-between items-start mb-2">
+<span class="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Velocity Score</span>
+<span class="material-symbols-outlined text-outline" style="font-size: 16px;">trending_up</span>
+</div>
+<div class="flex items-baseline gap-2">
+<span class="font-headline-lg text-headline-lg text-primary-container font-mono">84.5</span>
+</div>
+<!-- Mini sparkline representation -->
+<div class="w-full h-8 mt-2 flex items-end gap-[2px]">
+<div class="flex-1 bg-primary-container/20 h-[30%] rounded-t-sm"></div>
+<div class="flex-1 bg-primary-container/30 h-[45%] rounded-t-sm"></div>
+<div class="flex-1 bg-primary-container/40 h-[40%] rounded-t-sm"></div>
+<div class="flex-1 bg-primary-container/50 h-[60%] rounded-t-sm"></div>
+<div class="flex-1 bg-primary-container/60 h-[55%] rounded-t-sm"></div>
+<div class="flex-1 bg-primary-container/80 h-[80%] rounded-t-sm"></div>
+<div class="flex-1 bg-primary-container h-[100%] rounded-t-sm"></div>
+</div>
+</div>
+</div>
+<!-- LEVEL 2: High-Density Charts Area -->
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+<!-- Main Line Chart: Success Rate w/ Confidence Intervals -->
+<div class="lg:col-span-2 bg-surface border border-outline-variant/30 rounded-lg flex flex-col min-h-[320px]">
+<div class="p-4 border-b border-outline-variant/20 flex justify-between items-center">
+<h3 class="font-mono-label text-mono-label text-primary-container">Execution Success Rate (7D Trend)</h3>
+<button class="text-on-surface-variant hover:text-primary transition-colors">
+<span class="material-symbols-outlined" style="font-size: 18px;">more_horiz</span>
+</button>
+</div>
+<div class="flex-1 p-4 bg-chart-grid relative overflow-hidden flex flex-col justify-end">
+<!-- Y-Axis Labels -->
+<div class="absolute left-4 top-4 bottom-8 flex flex-col justify-between font-mono-data text-[10px] text-outline z-10">
+<span>100%</span>
+<span>99%</span>
+<span>98%</span>
+<span>97%</span>
+</div>
+<!-- Simulated Line Chart with Confidence Interval Band -->
+<!-- Band (Confidence Interval) -->
+<div class="absolute inset-x-12 bottom-8 top-12 opacity-10">
+<svg class="w-full h-full" preserveaspectratio="none" viewbox="0 0 100 100">
+<path d="M0,40 Q25,35 50,50 T100,20 L100,70 Q75,80 50,60 T0,80 Z" fill="#002444"></path>
+</svg>
+</div>
+<!-- Main Line -->
+<div class="absolute inset-x-12 bottom-8 top-12">
+<svg class="w-full h-full" preserveaspectratio="none" viewbox="0 0 100 100">
+<path d="M0,60 Q25,50 50,55 T100,45" fill="none" stroke="#002444" stroke-linecap="round" stroke-width="2" vector-effect="non-scaling-stroke"></path>
+<!-- Data Points -->
+<circle cx="0" cy="60" fill="#ffffff" r="3" stroke="#002444" stroke-width="1.5" vector-effect="non-scaling-stroke"></circle>
+<circle cx="25" cy="53" fill="#ffffff" r="3" stroke="#002444" stroke-width="1.5" vector-effect="non-scaling-stroke"></circle>
+<circle cx="50" cy="55" fill="#ffffff" r="3" stroke="#002444" stroke-width="1.5" vector-effect="non-scaling-stroke"></circle>
+<circle cx="75" cy="48" fill="#ffffff" r="3" stroke="#002444" stroke-width="1.5" vector-effect="non-scaling-stroke"></circle>
+<circle cx="100" cy="45" fill="#002444" r="4" stroke="#ffffff" stroke-width="1.5" vector-effect="non-scaling-stroke"></circle>
+</svg>
+</div>
+<!-- X-Axis Labels -->
+<div class="w-full flex justify-between px-8 mt-2 font-mono-data text-[10px] text-outline border-t border-outline-variant/30 pt-2">
+<span>Mon</span>
+<span>Tue</span>
+<span>Wed</span>
+<span>Thu</span>
+<span>Fri</span>
+<span>Sat</span>
+<span>Today</span>
+</div>
+</div>
+</div>
+<!-- Side Chart: Latency Heatmap -->
+<div class="bg-surface border border-outline-variant/30 rounded-lg flex flex-col min-h-[320px]">
+<div class="p-4 border-b border-outline-variant/20 flex justify-between items-center">
+<h3 class="font-mono-label text-mono-label text-primary-container">Latency Distribution</h3>
+<span class="material-symbols-outlined text-outline" style="font-size: 16px;">info</span>
+</div>
+<div class="flex-1 p-4 flex flex-col gap-1">
+<!-- Simulated Heatmap Rows -->
+<div class="flex items-center gap-2 text-[10px] font-mono-data text-outline">
+<span class="w-8 text-right">&gt;500ms</span>
+<div class="flex-1 flex gap-[2px] h-4">
+<div class="flex-1 bg-secondary opacity-10"></div>
+<div class="flex-1 bg-secondary opacity-20"></div>
+<div class="flex-1 bg-secondary opacity-40"></div>
+<div class="flex-1 bg-secondary opacity-10"></div>
+<div class="flex-1 bg-secondary opacity-0"></div>
+</div>
+</div>
+<div class="flex items-center gap-2 text-[10px] font-mono-data text-outline">
+<span class="w-8 text-right">300ms</span>
+<div class="flex-1 flex gap-[2px] h-4">
+<div class="flex-1 bg-secondary opacity-20"></div>
+<div class="flex-1 bg-secondary opacity-50"></div>
+<div class="flex-1 bg-secondary opacity-80"></div>
+<div class="flex-1 bg-secondary opacity-30"></div>
+<div class="flex-1 bg-secondary opacity-10"></div>
+</div>
+</div>
+<div class="flex items-center gap-2 text-[10px] font-mono-data text-outline">
+<span class="w-8 text-right">200ms</span>
+<div class="flex-1 flex gap-[2px] h-4">
+<div class="flex-1 bg-primary-container opacity-30"></div>
+<div class="flex-1 bg-primary-container opacity-60"></div>
+<div class="flex-1 bg-secondary opacity-40"></div>
+<div class="flex-1 bg-primary-container opacity-50"></div>
+<div class="flex-1 bg-primary-container opacity-20"></div>
+</div>
+</div>
+<div class="flex items-center gap-2 text-[10px] font-mono-data text-outline">
+<span class="w-8 text-right">100ms</span>
+<div class="flex-1 flex gap-[2px] h-4">
+<div class="flex-1 bg-primary-container opacity-80"></div>
+<div class="flex-1 bg-primary-container opacity-100"></div>
+<div class="flex-1 bg-primary-container opacity-70"></div>
+<div class="flex-1 bg-primary-container opacity-90"></div>
+<div class="flex-1 bg-primary-container opacity-60"></div>
+</div>
+</div>
+<div class="flex items-center gap-2 text-[10px] font-mono-data text-outline">
+<span class="w-8 text-right">&lt;50ms</span>
+<div class="flex-1 flex gap-[2px] h-4">
+<div class="flex-1 bg-primary-container opacity-20"></div>
+<div class="flex-1 bg-primary-container opacity-40"></div>
+<div class="flex-1 bg-primary-container opacity-30"></div>
+<div class="flex-1 bg-primary-container opacity-20"></div>
+<div class="flex-1 bg-primary-container opacity-50"></div>
+</div>
+</div>
+<!-- Legend -->
+<div class="mt-auto pt-4 flex justify-between items-center text-[10px] font-mono-data text-outline">
+<span>Low Volume</span>
+<div class="w-24 h-1.5 bg-gradient-to-r from-primary-container/10 via-primary-container/50 to-secondary/80 rounded-full"></div>
+<span>High Volume</span>
+</div>
+</div>
+</div>
+</div>
+<!-- LEVEL 3: Data Table (Module Breakdown) -->
+<div class="bg-surface border border-outline-variant/30 rounded-lg overflow-hidden flex flex-col">
+<div class="p-3 border-b border-outline-variant/20 bg-surface-container-low flex justify-between items-center">
+<h3 class="font-label-caps text-label-caps text-on-surface-variant uppercase">Module Performance Breakdown</h3>
+<button class="font-mono-label text-[10px] text-primary hover:underline">Export CSV</button>
+</div>
+<div class="overflow-x-auto">
+<table class="w-full text-left border-collapse whitespace-nowrap">
+<thead>
+<tr class="bg-surface-container-lowest border-b border-outline-variant/30 font-label-caps text-label-caps text-on-surface-variant">
+<th class="py-2 px-4 font-normal">Module ID</th>
+<th class="py-2 px-4 font-normal">Status</th>
+<th class="py-2 px-4 font-normal text-right">Throughput (req/s)</th>
+<th class="py-2 px-4 font-normal text-right">Error Rate</th>
+<th class="py-2 px-4 font-normal text-right">P99 Latency</th>
+</tr>
+</thead>
+<tbody class="font-mono-data text-mono-data text-on-surface divide-y divide-outline-variant/20">
+<tr class="hover:bg-surface-container-low transition-colors group">
+<td class="py-2.5 px-4 font-medium text-primary-container">auth_service_v2</td>
+<td class="py-2.5 px-4">
+<div class="flex items-center gap-1.5">
+<div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
+<span>Healthy</span>
+</div>
+</td>
+<td class="py-2.5 px-4 text-right">4,205</td>
+<td class="py-2.5 px-4 text-right">0.01%</td>
+<td class="py-2.5 px-4 text-right">42ms</td>
+</tr>
+<tr class="hover:bg-surface-container-low transition-colors group bg-error-container/10">
+<td class="py-2.5 px-4 font-medium text-primary-container">data_pipeline_ingest</td>
+<td class="py-2.5 px-4">
+<div class="flex items-center gap-1.5">
+<div class="w-1.5 h-1.5 bg-secondary"></div>
+<span class="text-secondary">Degraded</span>
+</div>
+</td>
+<td class="py-2.5 px-4 text-right">12,850</td>
+<td class="py-2.5 px-4 text-right text-secondary font-bold">1.45%</td>
+<td class="py-2.5 px-4 text-right">385ms</td>
+</tr>
+<tr class="hover:bg-surface-container-low transition-colors group">
+<td class="py-2.5 px-4 font-medium text-primary-container">ml_inference_engine</td>
+<td class="py-2.5 px-4">
+<div class="flex items-center gap-1.5">
+<div class="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
+<span>Healthy</span>
+</div>
+</td>
+<td class="py-2.5 px-4 text-right">842</td>
+<td class="py-2.5 px-4 text-right">0.05%</td>
+<td class="py-2.5 px-4 text-right">180ms</td>
+</tr>
+<tr class="hover:bg-surface-container-low transition-colors group">
+<td class="py-2.5 px-4 font-medium text-primary-container">cache_layer_redis</td>
+<td class="py-2.5 px-4">
+<div class="flex items-center gap-1.5">
+<div class="w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-b-[7px] border-b-yellow-500"></div>
+<span>Warning</span>
+</div>
+</td>
+<td class="py-2.5 px-4 text-right">45,110</td>
+<td class="py-2.5 px-4 text-right">0.00%</td>
+<td class="py-2.5 px-4 text-right text-yellow-600">8ms</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+</div>
+</main>
+</div>
+</body></html>

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

Binary file