website refactor

apps/website/components/dashboard/DashboardControlBar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+
+interface DashboardControlBarProps {
+  title: string;
+  actions?: React.ReactNode;
+}
+
+/**
+ * DashboardControlBar
+ * 
+ * The top header bar for page-level controls and context.
+ * Uses UI primitives to comply with architectural constraints.
+ */
+export function DashboardControlBar({ title, actions }: DashboardControlBarProps) {
+  return (
+    <Box display="flex" h="full" alignItems="center" justifyContent="between" px={6}>
+      <Heading level={6} weight="bold">
+        {title}
+      </Heading>
+      <Stack direction="row" align="center" gap={4}>
+        {actions}
+      </Stack>
+    </Box>
+  );
+}