feat: usage quota visualization in AI settings

No user-facing view of AI-call/recipe/storage usage existed — only an
admin-only per-user panel. Adds the same numbers, with progress bars
against the user's actual tier limits (read fresh from the DB, not
the cached session), to Settings > AI.

v0.40.0

apps/web/components/settings/usage-quota-section.tsx

@@ -0,0 +1,35 @@
+import { Progress } from "@/components/ui/progress";
+
+type UsageMetric = {
+  label: string;
+  used: number;
+  limit: number | null;
+  unit?: string;
+  unlimitedLabel: string;
+};
+
+function UsageBar({ label, used, limit, unit, unlimitedLabel }: UsageMetric) {
+  const pct = limit === null ? 0 : Math.min(100, (used / Math.max(limit, 1)) * 100);
+  return (
+    <div className="space-y-1.5">
+      <div className="flex justify-between text-sm">
+        <span className="text-muted-foreground">{label}</span>
+        <span className="font-medium tabular-nums">
+          {used}
+          {unit} / {limit === null ? unlimitedLabel : `${limit}${unit ?? ""}`}
+        </span>
+      </div>
+      {limit !== null && <Progress value={pct} />}
+    </div>
+  );
+}
+
+export function UsageQuotaSection({ metrics }: { metrics: UsageMetric[] }) {
+  return (
+    <div className="space-y-4">
+      {metrics.map((m) => (
+        <UsageBar key={m.label} {...m} />
+      ))}
+    </div>
+  );
+}