feat(dashboard): add live observability overview

src/lib/ui/components/TelemetryCard.svelte

@@ -2,6 +2,7 @@
   import { formatMetricValue } from "../format";
   import type { UiTelemetryCard } from "../types";
   import IconGlyph from "./IconGlyph.svelte";
+  import LineChart from "./LineChart.svelte";
 
   let { card }: { card: UiTelemetryCard } = $props();
 
@@ -23,9 +24,7 @@
     </div>
   {/if}
   {#if card.sparkline?.length}
-    <svg class="telemetry-card__sparkline" viewBox="0 0 100 24" aria-hidden="true">
-      <polyline points={sparklinePoints(card.sparkline)} />
-    </svg>
+    <LineChart values={card.sparkline} severity={card.severity} label={`${card.label} trend`} />
   {/if}
   {#if card.detail || card.description}
     <p>{card.detail || card.description}</p>
@@ -35,12 +34,12 @@
 <style>
   .telemetry-card {
     display: grid;
-    min-height: 7.15rem;
+    min-height: 5.15rem;
     border: var(--ui-border);
     background: linear-gradient(180deg, rgba(13, 15, 14, 0.82), rgba(2, 3, 2, 0.92));
-    padding: var(--ui-space-3);
+    padding: 0.45rem 0.55rem 0.42rem;
     color: var(--ui-color-text);
-    gap: var(--ui-space-2);
+    gap: 0.25rem;
   }
 
   .telemetry-card[data-severity="warning"] {
@@ -69,7 +68,11 @@
     display: flex;
     min-width: 0;
     align-items: center;
-    gap: var(--ui-space-2);
+    gap: 0.35rem;
+  }
+
+  header :global(.icon-glyph) {
+    display: none;
   }
 
   h3,
@@ -80,29 +83,34 @@
   h3 {
     overflow-wrap: anywhere;
     color: inherit;
-    font-size: 0.78rem;
+    font-size: 0.62rem;
     font-weight: 800;
     letter-spacing: 0;
+    line-height: 1.02;
     text-transform: uppercase;
   }
 
   strong {
     font-family: var(--ui-font-display);
-    font-size: clamp(2rem, 4vw, 3rem);
+    font-size: clamp(1.75rem, 2.75vw, 2.4rem);
     font-weight: 800;
     letter-spacing: 0;
-    line-height: 0.82;
+    line-height: 0.76;
+    white-space: nowrap;
   }
 
   p {
+    overflow: hidden;
     color: var(--ui-color-muted);
-    font-size: 0.67rem;
-    line-height: 1.2;
+    font-size: 0.53rem;
+    line-height: 1.05;
+    text-overflow: ellipsis;
     text-transform: uppercase;
+    white-space: nowrap;
   }
 
   .telemetry-card__bar {
-    height: 0.35rem;
+    height: 0.25rem;
     border: var(--ui-border);
     background: #030403;
   }
@@ -114,19 +122,6 @@
     background: currentColor;
   }
 
-  .telemetry-card__sparkline {
-    width: 100%;
-    height: 1.5rem;
-    color: var(--ui-color-accent);
-  }
-
-  .telemetry-card__sparkline polyline {
-    fill: none;
-    stroke: currentColor;
-    stroke-linecap: square;
-    stroke-linejoin: miter;
-    stroke-width: 2;
-  }
 </style>
 
 <script lang="ts" module>
@@ -142,17 +137,4 @@
     const progress = Number(card.value.value);
     return Number.isFinite(progress) ? clampPercent(progress) : null;
   }
-
-  function sparklinePoints(values: number[]): string {
-    const max = Math.max(...values, 1);
-    const step = values.length > 1 ? 100 / (values.length - 1) : 100;
-
-    return values
-      .map((value, index) => {
-        const x = index * step;
-        const y = 24 - (Math.max(0, value) / max) * 22;
-        return `${x.toFixed(2)},${y.toFixed(2)}`;
-      })
-      .join(" ");
-  }
 </script>