website refactor

apps/website/components/dashboard/TelemetryPanel.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Surface } from '@/ui/Surface';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+
+interface TelemetryPanelProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+/**
+ * TelemetryPanel
+ * 
+ * A dense, instrument-grade panel for displaying data and controls.
+ * Uses UI primitives to comply with architectural constraints.
+ */
+export function TelemetryPanel({ title, children }: TelemetryPanelProps) {
+  return (
+    <Surface variant="dark" border rounded="sm" padding={4} shadow="sm">
+      <Heading level={6} mb={4} color="var(--color-text-low)">
+        {title}
+      </Heading>
+      <Box fontSize="sm">
+        {children}
+      </Box>
+    </Surface>
+  );
+}