feat(web): Phase 3 — Dashboard Page (#450) (#453)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/dashboard/DashboardMetrics.tsx

@@ -0,0 +1,45 @@
+import type { ReactElement } from "react";
+import { MetricsStrip, type MetricCell } from "@mosaic/ui";
+
+const cells: MetricCell[] = [
+  {
+    label: "Active Agents",
+    value: "47",
+    color: "var(--ms-blue-400)",
+    trend: { direction: "up", text: "↑ +3 from yesterday" },
+  },
+  {
+    label: "Tasks Completed",
+    value: "1,284",
+    color: "var(--ms-teal-400)",
+    trend: { direction: "up", text: "↑ +128 today" },
+  },
+  {
+    label: "Avg Response Time",
+    value: "2.4s",
+    color: "var(--ms-purple-400)",
+    trend: { direction: "down", text: "↓ -0.3s improved" },
+  },
+  {
+    label: "Token Usage",
+    value: "3.2M",
+    color: "var(--ms-amber-400)",
+    trend: { direction: "neutral", text: "78% of budget" },
+  },
+  {
+    label: "Error Rate",
+    value: "0.4%",
+    color: "var(--ms-red-400)",
+    trend: { direction: "down", text: "↓ -0.1% improved" },
+  },
+  {
+    label: "Active Projects",
+    value: "8",
+    color: "var(--ms-cyan-500)",
+    trend: { direction: "neutral", text: "2 deploying" },
+  },
+];
+
+export function DashboardMetrics(): ReactElement {
+  return <MetricsStrip cells={cells} />;
+}