feat(ui): sharpen dashboard console visual system

src/lib/ui/components/TelemetryGrid.tsx

@@ -1,3 +1,4 @@
+import { useId } from "react";
 import type { UiTelemetryCard } from "../types";
 import { TelemetryCard } from "./TelemetryCard";
 
@@ -6,11 +7,23 @@ export interface TelemetryGridProps {
 }
 
 export function TelemetryGrid({ cards }: TelemetryGridProps) {
+  const headingId = useId();
+  const metricCount = `${cards.length} ${cards.length === 1 ? "Metric" : "Metrics"}`;
+
   return (
-    <section className="telemetry-grid" aria-label="Telemetry">
-      {cards.map((card) => (
-        <TelemetryCard key={card.id} card={card} />
-      ))}
+    <section className="telemetry-section" aria-labelledby={headingId}>
+      <header className="telemetry-section__header">
+        <div>
+          <p>Signal Matrix</p>
+          <h2 id={headingId}>Telemetry</h2>
+        </div>
+        <span>{metricCount}</span>
+      </header>
+      <div className="telemetry-grid">
+        {cards.map((card, index) => (
+          <TelemetryCard key={card.id} card={card} index={index + 1} />
+        ))}
+      </div>
     </section>
   );
 }