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/TokenBudget.tsx

@@ -0,0 +1,98 @@
+import type { ReactElement } from "react";
+import { Card, SectionHeader, ProgressBar, type ProgressBarVariant } from "@mosaic/ui";
+
+interface ModelBudget {
+  id: string;
+  label: string;
+  usage: string;
+  value: number;
+  variant: ProgressBarVariant;
+}
+
+const models: ModelBudget[] = [
+  {
+    id: "sonnet",
+    label: "claude-3-5-sonnet",
+    usage: "2.1M / 3M",
+    value: 70,
+    variant: "blue",
+  },
+  {
+    id: "haiku",
+    label: "claude-3-haiku",
+    usage: "890K / 5M",
+    value: 18,
+    variant: "teal",
+  },
+  {
+    id: "gpt4o",
+    label: "gpt-4o",
+    usage: "320K / 1M",
+    value: 32,
+    variant: "purple",
+  },
+  {
+    id: "llama",
+    label: "local/llama-3.3",
+    usage: "unlimited",
+    value: 55,
+    variant: "amber",
+  },
+];
+
+interface ModelRowProps {
+  model: ModelBudget;
+}
+
+function ModelRow({ model }: ModelRowProps): ReactElement {
+  return (
+    <div style={{ marginBottom: 14 }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 5,
+        }}
+      >
+        <span
+          style={{
+            fontSize: "0.8rem",
+            fontWeight: 600,
+            color: "var(--text-2)",
+            fontFamily: "var(--mono)",
+          }}
+        >
+          {model.label}
+        </span>
+        <span
+          style={{
+            fontSize: "0.72rem",
+            color: "var(--muted)",
+            fontFamily: "var(--mono)",
+          }}
+        >
+          {model.usage}
+        </span>
+      </div>
+      <ProgressBar
+        value={model.value}
+        variant={model.variant}
+        label={`${model.label} token usage`}
+      />
+    </div>
+  );
+}
+
+export function TokenBudget(): ReactElement {
+  return (
+    <Card>
+      <SectionHeader title="Token Budget" subtitle="Usage by model" />
+      <div>
+        {models.map((model) => (
+          <ModelRow key={model.id} model={model} />
+        ))}
+      </div>
+    </Card>
+  );
+}