@lukoweb/apitogo-plugin-dev-portal-billing 0.1.87 → 0.1.89

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { Button, Head, Heading, Spinner } from "@lukoweb/apitogo/components";
-import { CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon, TrashIcon } from "@lukoweb/apitogo/icons";
+import { Button, Head, Heading, Link, Spinner } from "@lukoweb/apitogo/components";
+import { ArrowRightIcon, CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon, TrashIcon } from "@lukoweb/apitogo/icons";
 import { createContext, useContext, useEffect, useState } from "react";
-import { Link, Navigate, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
+import { Link as Link$1, Navigate, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@lukoweb/apitogo/ui/AlertDialog.js";
 import { cn } from "@lukoweb/apitogo/ui/util.js";
 import manifestCatalog from "virtual:apitogo-local-manifest";
@@ -9,11 +9,12 @@ import zudokuConfig from "virtual:zudoku-config";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-query";
 import { useAuth } from "@lukoweb/apitogo/hooks";
-import { Alert, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
 import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
+import { Alert, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@lukoweb/apitogo/ui/Dialog.js";
 import { Input } from "@lukoweb/apitogo/ui/Input.js";
 import { Secret } from "@lukoweb/apitogo/ui/Secret.js";
+import { AccountLayout } from "@lukoweb/apitogo-module-user-panel";
 import { createPlugin } from "@lukoweb/apitogo/plugins";
 import { Alert as Alert$1, AlertAction, AlertDescription } from "@lukoweb/apitogo/ui/Alert";
 import { Button as Button$2 } from "@lukoweb/apitogo/ui/Button";
@@ -39,7 +40,8 @@ function mapPreviewPlans(plans) {
 		priceCurrency: plan.priceCurrency,
 		billingPeriod: plan.billingPeriod,
 		limitsJson: plan.limitsJson,
-		includedActionKeys: plan.includedActionKeys
+		includedActionKeys: plan.includedActionKeys,
+		features: plan.features
 	}));
 }
 function readModulePlanItems() {
@@ -54,7 +56,8 @@ function parseManifestPlans(configPlans) {
 		priceCurrency: plan.priceCurrency ?? "usd",
 		billingPeriod: plan.billingPeriod ?? "monthly",
 		limitsJson: plan.limitsJson ?? null,
-		includedActionKeys: plan.includedActionKeys ?? []
+		includedActionKeys: plan.includedActionKeys ?? [],
+		features: plan.features
 	}))) };
 	if (manifestCatalog?.plans?.length) return { plans: mapPreviewPlans(manifestCatalog.plans) };
 	const metaPlans = zudokuConfig?.__meta?.previewPlans;
@@ -67,7 +70,8 @@ function parseManifestPlans(configPlans) {
 		priceCurrency: plan.priceCurrency ?? "usd",
 		billingPeriod: plan.billingPeriod ?? "monthly",
 		limitsJson: plan.limitsJson ?? null,
-		includedActionKeys: plan.includedActionKeys ?? []
+		includedActionKeys: plan.includedActionKeys ?? [],
+		features: plan.features
 	}))) };
 	return { plans: [] };
 }
@@ -77,6 +81,7 @@ function formatActionKey(actionKey) {
 	return `${actionKey.slice(0, separatorIndex).toUpperCase()} ${actionKey.slice(separatorIndex + 1)}`;
 }
 function formatPlanPrice(plan) {
+	if (plan.priceAmount < 0) return "Custom";
 	if (plan.priceAmount <= 0) return "Free";
 	const amount = new Intl.NumberFormat(void 0, {
 		style: "currency",
@@ -89,89 +94,127 @@ function formatPlanPrice(plan) {
 	return amount;
 }
 function isPlanFree(plan) {
-	return plan.priceAmount <= 0;
+	return plan.priceAmount === 0;
 }
 function formatBillingPeriod(period) {
 	const normalized = period.toLowerCase();
-	if (normalized === "month" || normalized === "monthly") return "Monthly";
-	if (normalized === "year" || normalized === "annual") return "Annual";
+	if (normalized === "month" || normalized === "monthly") return "per month";
+	if (normalized === "year" || normalized === "annual") return "per year";
+	if (normalized === "custom") return "talk to us";
 	return period;
 }
 function formatRateLimit(rate) {
 	if (!rate || typeof rate !== "object") return null;
 	const { calls, renewalPeriodSeconds } = rate;
 	if (calls == null || renewalPeriodSeconds == null) return null;
+	if (renewalPeriodSeconds === 1) return `${calls} req/sec rate limit`;
 	const window = renewalPeriodSeconds === 60 ? "minute" : `${renewalPeriodSeconds} seconds`;
 	return `${calls} request${calls === 1 ? "" : "s"} per ${window}`;
 }
-function summarizeLimits(limitsJson) {
+function formatQuota(quota) {
+	if (!quota || typeof quota !== "object") return null;
+	const { calls, renewalPeriodDays } = quota;
+	if (calls == null) return null;
+	if (calls < 0) return "Unlimited requests";
+	const formatted = calls.toLocaleString();
+	if (renewalPeriodDays === 30 || renewalPeriodDays === 31) return `${formatted} requests / month`;
+	if (renewalPeriodDays === 1) return `${formatted} requests / day`;
+	if (renewalPeriodDays != null) return `${formatted} requests / ${renewalPeriodDays} days`;
+	return `${formatted} requests`;
+}
+/** Marketing bullets keyed by common sample SKUs when limitsJson is sparse. */
+const SAMPLE_PLAN_FEATURE_EXTRAS = {
+	free: ["All endpoints", "Community support"],
+	developer: ["Webhooks included", "Email support"],
+	team: ["5 team seats", "Priority support"],
+	enterprise: [
+		"Unlimited requests",
+		"Custom rate limits",
+		"SSO & audit logs",
+		"Dedicated SLA"
+	]
+};
+function listPlanFeatureLines(plan) {
+	if (plan.features && plan.features.length > 0) return plan.features;
+	const lines = [];
+	if (plan.limitsJson?.trim()) try {
+		const limits = JSON.parse(plan.limitsJson);
+		const quotaLine = formatQuota(limits.quota);
+		if (quotaLine) lines.push(quotaLine);
+		const rateLine = formatRateLimit(limits.rateLimit);
+		if (rateLine) lines.push(rateLine);
+	} catch {}
+	const extras = SAMPLE_PLAN_FEATURE_EXTRAS[plan.sku.toLowerCase()];
+	if (extras) {
+		for (const extra of extras) if (!lines.includes(extra)) lines.push(extra);
+	}
+	if (plan.includedActionKeys && plan.includedActionKeys.length > 0) for (const actionKey of plan.includedActionKeys) lines.push(formatActionKey(actionKey));
+	if (lines.length === 0 && isPlanFree(plan)) lines.push("API access not included");
+	return lines;
+}
+function isActiveSubscription(status) {
+	return status.toLowerCase() === "active";
+}
+/** Returns monthly call quota from plan limitsJson, or null when unknown/unlimited. */
+function parseMonthlyQuotaCalls(limitsJson) {
 	if (!limitsJson?.trim()) return null;
 	try {
-		const limits = JSON.parse(limitsJson);
-		const rateSummary = formatRateLimit(limits.rateLimit);
-		if (rateSummary) return rateSummary;
-		const entries = Object.entries(limits).filter(([, value]) => value != null && typeof value !== "object");
-		if (entries.length === 0) return null;
-		return entries.slice(0, 3).map(([key, value]) => `${key}: ${String(value)}`).join(" · ");
+		const quota = JSON.parse(limitsJson).quota;
+		if (!quota || typeof quota !== "object") return null;
+		const { calls, renewalPeriodDays } = quota;
+		if (calls == null || calls < 0) return null;
+		if (renewalPeriodDays == null || renewalPeriodDays === 30 || renewalPeriodDays === 31) return calls;
+		return null;
 	} catch {
 		return null;
 	}
 }
-function isActiveSubscription(status) {
-	return status.toLowerCase() === "active";
-}
 
 //#endregion
 //#region src/components/PricingCard.tsx
-const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed = false, onUnsubscribe, isCanceling = false, cancelDisabled = false }) => {
-	const limitsSummary = summarizeLimits(plan.limitsJson);
+const publicCtaLabel = (plan) => {
+	if (plan.priceAmount < 0) return "Contact sales";
+	if (isPlanFree(plan)) return "Start for free";
+	return "Start free trial";
+};
+const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed = false, onUnsubscribe, isCanceling = false, cancelDisabled = false, featured = false }) => {
 	const isActive = isSubscribed || isActiveSubscription(subscriptionStatus ?? "");
+	const features = listPlanFeatureLines(plan);
+	const priceLabel = formatPlanPrice(plan);
+	const isCustom = plan.priceAmount < 0;
+	const displayPrice = isCustom ? "Custom" : isPlanFree(plan) ? "$0" : priceLabel.replace(/\/mo$/, "").replace(/\/yr$/, "") || priceLabel;
 	return /* @__PURE__ */ jsxs("article", {
-		className: cn("flex w-full max-w-sm flex-col rounded-xl border bg-card/60 p-6 shadow-xs", isActive && mode === "account" && "border-primary/40 ring-1 ring-primary/20"),
+		className: cn("flex h-full w-full flex-col rounded-xl border border-border bg-card p-7", featured && "border-primary/50 shadow-[0_10px_28px_rgba(13,148,136,0.28)] ring-1 ring-primary/25", isActive && mode === "account" && "border-primary/40 ring-1 ring-primary/20"),
 		"data-testid": `pricing-card-${plan.sku}`,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start justify-between gap-2",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "text-xl font-semibold",
-					children: plan.displayName
-				}), isActive && mode === "account" ? /* @__PURE__ */ jsx("span", {
-					className: "shrink-0 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary",
-					"data-testid": `subscribed-badge-${plan.sku}`,
-					children: "Subscribed"
-				}) : null]
+				className: "flex items-center justify-between gap-2",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-sm font-bold uppercase tracking-[0.04em]",
+						children: plan.displayName
+					}),
+					featured && !isActive ? /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 rounded-md bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary",
+						children: "Popular"
+					}) : null,
+					isActive && mode === "account" ? /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary",
+						"data-testid": `subscribed-badge-${plan.sku}`,
+						children: "Subscribed"
+					}) : null
+				]
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "mt-2 text-3xl font-bold",
-				children: formatPlanPrice(plan)
+				className: "mt-3.5 text-[2.1rem] font-extrabold tracking-[-0.02em]",
+				children: displayPrice
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-sm text-muted-foreground",
-				children: formatBillingPeriod(plan.billingPeriod)
+				className: "mb-[18px] mt-0.5 text-[0.78125rem] text-muted-foreground",
+				children: isCustom ? "talk to us" : formatBillingPeriod(plan.billingPeriod)
 			}),
-			limitsSummary ? /* @__PURE__ */ jsx("p", {
-				className: "mt-4 text-sm text-muted-foreground",
-				children: limitsSummary
-			}) : null,
-			plan.includedActionKeys && plan.includedActionKeys.length > 0 ? /* @__PURE__ */ jsxs("div", {
-				className: "mt-4",
-				"data-testid": `included-endpoints-${plan.sku}`,
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-xs font-medium uppercase tracking-wide text-muted-foreground",
-					children: "Included endpoints"
-				}), /* @__PURE__ */ jsx("ul", {
-					className: "mt-2 space-y-1 text-sm text-muted-foreground",
-					children: plan.includedActionKeys.map((actionKey) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", {
-						className: "rounded bg-muted px-1.5 py-0.5 text-xs",
-						children: formatActionKey(actionKey)
-					}) }, actionKey))
-				})]
-			}) : isPlanFree(plan) ? /* @__PURE__ */ jsx("p", {
-				className: "mt-4 text-sm text-muted-foreground",
-				children: "API access not included"
-			}) : null,
 			/* @__PURE__ */ jsx("div", {
-				className: "mt-6 space-y-2",
+				className: "space-y-2",
 				children: mode === "account" ? isActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(Button, {
 						variant: "secondary",
@@ -202,10 +245,10 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 						children: "Unsubscribe is available after the portal is published."
 					}) : null
 				] }) : /* @__PURE__ */ jsx(Button, {
-					variant: "default",
+					variant: featured ? "default" : "outline",
 					className: "w-full",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
 						children: isPlanFree(plan) ? "Get started" : "Subscribe"
 					})
@@ -213,20 +256,32 @@ const PricingCard = ({ plan, mode = "public", subscriptionStatus, isSubscribed =
 					variant: "secondary",
 					className: "w-full",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/subscriptions",
 						children: "Manage subscription"
 					})
 				}) : /* @__PURE__ */ jsx(Button, {
-					variant: "default",
+					variant: featured ? "default" : "outline",
 					className: "w-full",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: `/checkout?planSku=${encodeURIComponent(plan.sku)}`,
-						children: isPlanFree(plan) ? "Get started" : "Subscribe"
+						children: publicCtaLabel(plan)
 					})
 				})
-			})
+			}),
+			features.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "mt-5 flex flex-1 flex-col gap-[11px] border-t border-border pt-[18px]",
+				"data-testid": plan.includedActionKeys && plan.includedActionKeys.length > 0 ? `included-endpoints-${plan.sku}` : void 0,
+				children: features.map((feat) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2.5 text-[0.84375rem] text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mt-0.5 shrink-0 text-emerald-600",
+						"aria-hidden": true,
+						children: "✓"
+					}), /* @__PURE__ */ jsx("span", { children: feat })]
+				}, feat))
+			}) : null
 		]
 	});
 };
@@ -308,6 +363,9 @@ function createDemoMeResponse(plans) {
 	return {
 		userId: "00000000-0000-0000-0000-000000000001",
 		displayName: "Demo User",
+		email: "demo@example.com",
+		emailVerified: true,
+		hasNativePassword: true,
 		subscriptions: resolveDemoPlans(plans).map((plan) => ({
 			planSku: plan.sku,
 			status: "Active",
@@ -594,6 +652,394 @@ async function readProblemDetail(response) {
 	}
 }
 
+//#endregion
+//#region src/hooks/useUsage.ts
+function createDemoUsage(range) {
+	const now = /* @__PURE__ */ new Date();
+	const days = range === "24h" ? 1 : range === "7d" ? 7 : range === "90d" ? 90 : range === "mtd" ? Math.max(1, now.getUTCDate()) : 30;
+	const series = [];
+	let total = 0;
+	const today = /* @__PURE__ */ new Date();
+	for (let i = days - 1; i >= 0; i--) {
+		const day = new Date(today);
+		day.setUTCDate(day.getUTCDate() - i);
+		const requestCount = 40 + i * 17 % 80;
+		total += requestCount;
+		series.push({
+			dayUtc: day.toISOString().slice(0, 10),
+			requestCount,
+			errorCount: Math.floor(requestCount * .02),
+			avgLatencyMs: 40 + i % 20
+		});
+	}
+	return {
+		range,
+		fromDayUtc: series[0]?.dayUtc ?? today.toISOString().slice(0, 10),
+		toDayUtc: series.at(-1)?.dayUtc ?? today.toISOString().slice(0, 10),
+		requestCount: total,
+		avgLatencyMs: 48,
+		errorRate: .018,
+		series,
+		byEndpoint: [
+			{
+				path: "GET /pets",
+				count: Math.floor(total * .45)
+			},
+			{
+				path: "POST /pets",
+				count: Math.floor(total * .25)
+			},
+			{
+				path: "GET /pets/{id}",
+				count: Math.floor(total * .2)
+			},
+			{
+				path: "DELETE /pets/{id}",
+				count: Math.floor(total * .1)
+			}
+		],
+		byStatus: [
+			{
+				label: "2xx",
+				count: Math.floor(total * .96)
+			},
+			{
+				label: "4xx",
+				count: Math.floor(total * .03)
+			},
+			{
+				label: "5xx",
+				count: Math.floor(total * .01)
+			}
+		]
+	};
+}
+function createDemoRecent() {
+	const now = Date.now();
+	return { items: [
+		{
+			occurredAtUtc: (/* @__PURE__ */ new Date(now - 6e4)).toISOString(),
+			method: "GET",
+			path: "/pets",
+			statusCode: 200,
+			latencyMs: 42
+		},
+		{
+			occurredAtUtc: (/* @__PURE__ */ new Date(now - 12e4)).toISOString(),
+			method: "POST",
+			path: "/pets",
+			statusCode: 201,
+			latencyMs: 88
+		},
+		{
+			occurredAtUtc: (/* @__PURE__ */ new Date(now - 18e4)).toISOString(),
+			method: "GET",
+			path: "/pets/1",
+			statusCode: 404,
+			latencyMs: 31
+		}
+	] };
+}
+function useUsage(range = "30d") {
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const liveQuery = useQuery({
+		queryKey: [
+			"dev-portal-usage",
+			apiBaseUrl,
+			range
+		],
+		enabled: auth.isAuthenticated && !isPreview && !isDemoSession && Boolean(apiBaseUrl),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/usage?range=${encodeURIComponent(range)}`, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error("Failed to load usage.");
+			return await response.json();
+		}
+	});
+	if (isDemoSession && auth.isAuthenticated) return {
+		...liveQuery,
+		data: createDemoUsage(range),
+		error: null,
+		isError: false,
+		isFetching: false,
+		isLoading: false,
+		isPending: false,
+		isSuccess: true,
+		status: "success"
+	};
+	return liveQuery;
+}
+function useUsageRecent(limit = 20) {
+	const auth = useAuth();
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	const isPreview = useDevPortalPreviewMode();
+	const isDemoSession = useIsDemoSession();
+	const liveQuery = useQuery({
+		queryKey: [
+			"dev-portal-usage-recent",
+			apiBaseUrl,
+			limit
+		],
+		enabled: auth.isAuthenticated && !isPreview && !isDemoSession && Boolean(apiBaseUrl),
+		queryFn: async () => {
+			const response = await fetch(`${apiBaseUrl}/api/v1/usage/recent?limit=${limit}`, {
+				method: "GET",
+				headers: { Accept: "application/json" },
+				credentials: "include"
+			});
+			if (!response.ok) throw new Error("Failed to load recent requests.");
+			return await response.json();
+		}
+	});
+	if (isDemoSession && auth.isAuthenticated) return {
+		...liveQuery,
+		data: createDemoRecent(),
+		error: null,
+		isError: false,
+		isFetching: false,
+		isLoading: false,
+		isPending: false,
+		isSuccess: true,
+		status: "success"
+	};
+	return liveQuery;
+}
+
+//#endregion
+//#region src/paths.ts
+const PRICING_PATH = "/pricing";
+const CHECKOUT_PATH = "/checkout";
+const SUBSCRIPTIONS_PATH = "/account/subscriptions";
+const CREDENTIALS_PATH = "/account/credentials";
+const USAGE_PATH = "/account/usage";
+const LOGIN_NAV_PATH = "/signin";
+
+//#endregion
+//#region src/pages/OverviewDashboardPage.tsx
+function StatCard({ label, value, sub, subClassName }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-xl border border-border bg-card p-5",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "text-xs font-medium uppercase tracking-[0.05em] text-muted-foreground",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "mt-1.5 text-[1.7rem] font-bold tracking-[-0.02em] text-foreground",
+				children: value
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `mt-1 text-xs ${subClassName ?? "text-muted-foreground"}`,
+				children: sub
+			})
+		]
+	});
+}
+function formatNumber$1(value) {
+	return new Intl.NumberFormat().format(value);
+}
+const OverviewDashboardPage = () => {
+	const auth = useAuth();
+	const { data: apiKeys, isLoading: keysLoading } = useApiKeys();
+	const { data: me, isLoading: subsLoading } = useMySubscriptions();
+	const { data: catalog } = usePlans();
+	const { data: usage } = useUsage("30d");
+	const { data: recent } = useUsageRecent(8);
+	const activeKeyCount = apiKeys?.plans.reduce((total, plan) => total + plan.keys.length, 0) ?? 0;
+	const activeSubscription = (me?.subscriptions ?? []).find((sub) => isActiveSubscription(sub.status));
+	const planSku = activeSubscription?.planSku;
+	const planName = catalog?.plans.find((plan) => plan.sku === planSku)?.displayName ?? planSku ?? "—";
+	const renewLabel = activeSubscription?.currentPeriodEnd ? `Renews ${new Date(activeSubscription.currentPeriodEnd).toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric"
+	})}` : "No active subscription";
+	const statsLoading = auth.isAuthenticated && (keysLoading || subsLoading) && !apiKeys && !me;
+	const chartSeries = (usage?.series ?? []).slice(-14);
+	const maxBar = Math.max(1, ...chartSeries.map((point) => point.requestCount));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "px-8 py-7",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Overview" }) }),
+			/* @__PURE__ */ jsx("h1", {
+				className: "mb-6 text-[1.6rem] font-bold tracking-[-0.01em] text-foreground",
+				children: "Overview"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4",
+				children: [
+					/* @__PURE__ */ jsx(StatCard, {
+						label: "Requests (30d)",
+						value: usage ? formatNumber$1(usage.requestCount) : statsLoading ? "…" : "—",
+						sub: usage ? `${formatNumber$1(usage.series.reduce((sum, p) => sum + p.errorCount, 0))} errors` : "No usage data yet"
+					}),
+					/* @__PURE__ */ jsx(StatCard, {
+						label: "Active keys",
+						value: statsLoading ? "…" : String(activeKeyCount),
+						sub: activeKeyCount === 1 ? "1 key on your account" : `${activeKeyCount} keys on your account`
+					}),
+					/* @__PURE__ */ jsx(StatCard, {
+						label: "Plan",
+						value: statsLoading ? "…" : planName,
+						sub: renewLabel
+					}),
+					/* @__PURE__ */ jsx(StatCard, {
+						label: "Error rate",
+						value: usage ? `${(usage.errorRate * 100).toFixed(usage.errorRate >= .1 ? 1 : 2)}%` : "—",
+						sub: usage?.avgLatencyMs != null ? `${usage.avgLatencyMs} ms avg latency` : "No telemetry yet"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-5 grid grid-cols-1 gap-5 lg:grid-cols-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "rounded-xl border border-border bg-card p-6",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "mb-4 flex items-center justify-between gap-3",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "text-lg font-semibold text-foreground",
+							children: "Requests, last 14 days"
+						}), /* @__PURE__ */ jsx(Link, {
+							to: USAGE_PATH,
+							className: "text-sm font-semibold text-primary hover:underline",
+							children: "View usage"
+						})]
+					}), chartSeries.some((p) => p.requestCount > 0) ? /* @__PURE__ */ jsx("div", {
+						className: "flex h-[150px] items-end gap-1.5",
+						children: chartSeries.map((point) => /* @__PURE__ */ jsx("div", {
+							title: `${point.dayUtc}: ${point.requestCount}`,
+							className: "min-w-0 flex-1 rounded-t-sm bg-primary",
+							style: { height: `${Math.max(4, point.requestCount / maxBar * 100)}%` }
+						}, point.dayUtc))
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "flex min-h-[150px] items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 px-4 text-center text-sm text-muted-foreground",
+						children: "No request traffic in the last 14 days."
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "rounded-xl border border-border bg-card p-6",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-4 text-lg font-semibold text-foreground",
+						children: "Quick links"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-3",
+						children: [
+							/* @__PURE__ */ jsx(Button$1, {
+								asChild: true,
+								variant: "outline",
+								className: "justify-between",
+								children: /* @__PURE__ */ jsxs(Link, {
+									to: CREDENTIALS_PATH,
+									children: ["Manage API keys", /* @__PURE__ */ jsx(ArrowRightIcon, { size: 16 })]
+								})
+							}),
+							/* @__PURE__ */ jsx(Button$1, {
+								asChild: true,
+								variant: "outline",
+								className: "justify-between",
+								children: /* @__PURE__ */ jsxs(Link, {
+									to: USAGE_PATH,
+									children: ["Usage analytics", /* @__PURE__ */ jsx(ArrowRightIcon, { size: 16 })]
+								})
+							}),
+							/* @__PURE__ */ jsx(Button$1, {
+								asChild: true,
+								variant: "outline",
+								className: "justify-between",
+								children: /* @__PURE__ */ jsxs(Link, {
+									to: SUBSCRIPTIONS_PATH,
+									children: ["Billing & subscriptions", /* @__PURE__ */ jsx(ArrowRightIcon, { size: 16 })]
+								})
+							}),
+							/* @__PURE__ */ jsx(Button$1, {
+								asChild: true,
+								variant: "outline",
+								className: "justify-between",
+								children: /* @__PURE__ */ jsxs(Link, {
+									to: "/introduction",
+									children: ["Documentation", /* @__PURE__ */ jsx(ArrowRightIcon, { size: 16 })]
+								})
+							})
+						]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "rounded-xl border border-border bg-card p-6",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "mb-4 text-lg font-semibold text-foreground",
+					children: "Recent requests"
+				}), recent && recent.items.length > 0 ? /* @__PURE__ */ jsx("div", {
+					className: "overflow-x-auto",
+					children: /* @__PURE__ */ jsxs("table", {
+						className: "w-full text-left text-sm",
+						children: [/* @__PURE__ */ jsx("thead", {
+							className: "text-xs uppercase tracking-wide text-muted-foreground",
+							children: /* @__PURE__ */ jsxs("tr", { children: [
+								/* @__PURE__ */ jsx("th", {
+									className: "pb-2 font-medium",
+									children: "Time"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "pb-2 font-medium",
+									children: "Method"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "pb-2 font-medium",
+									children: "Path"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "pb-2 font-medium",
+									children: "Status"
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "pb-2 font-medium",
+									children: "Latency"
+								})
+							] })
+						}), /* @__PURE__ */ jsx("tbody", { children: recent.items.map((item) => /* @__PURE__ */ jsxs("tr", {
+							className: "border-t border-border",
+							children: [
+								/* @__PURE__ */ jsx("td", {
+									className: "py-2 text-muted-foreground",
+									children: new Date(item.occurredAtUtc).toLocaleString()
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "py-2 font-mono",
+									children: item.method
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "py-2 font-mono",
+									children: item.path
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "py-2",
+									children: item.statusCode
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: "py-2 text-muted-foreground",
+									children: item.latencyMs != null ? `${item.latencyMs} ms` : "—"
+								})
+							]
+						}, `${item.occurredAtUtc}-${item.method}-${item.path}`)) })]
+					})
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: "No recent requests yet."
+				})]
+			}),
+			!auth.isAuthenticated && auth.isAuthEnabled ? /* @__PURE__ */ jsx("p", {
+				className: "mt-6 text-sm text-muted-foreground",
+				children: "Sign in to see personalized account metrics."
+			}) : null
+		]
+	});
+};
+
 //#endregion
 //#region src/components/ApiKeysPanel.tsx
 /**
@@ -818,14 +1264,6 @@ const RedirectPage = ({ icon: Icon, title, description, url, children }) => {
 	});
 };
 
-//#endregion
-//#region src/paths.ts
-const PRICING_PATH = "/pricing";
-const CHECKOUT_PATH = "/checkout";
-const SUBSCRIPTIONS_PATH = "/account/subscriptions";
-const CREDENTIALS_PATH = "/account/credentials";
-const LOGIN_NAV_PATH = "/signin";
-
 //#endregion
 //#region src/pages/CheckoutPage.tsx
 const ACCOUNT_PLANS_PATH = "/account/plans";
@@ -873,7 +1311,7 @@ const CheckoutPage = () => {
 		children: [
 			"Missing plan SKU.",
 			" ",
-			/* @__PURE__ */ jsx(Link, {
+			/* @__PURE__ */ jsx(Link$1, {
 				to: plansPath,
 				className: "text-primary underline",
 				children: "Back to plans"
@@ -894,7 +1332,7 @@ const CheckoutPage = () => {
 			/* @__PURE__ */ jsx(Button$2, {
 				asChild: true,
 				variant: "outline",
-				children: /* @__PURE__ */ jsx(Link, {
+				children: /* @__PURE__ */ jsx(Link$1, {
 					to: "/account/subscriptions",
 					children: "View demo subscriptions"
 				})
@@ -915,7 +1353,7 @@ const CheckoutPage = () => {
 			/* @__PURE__ */ jsx(Button$2, {
 				asChild: true,
 				variant: "outline",
-				children: /* @__PURE__ */ jsx(Link, {
+				children: /* @__PURE__ */ jsx(Link$1, {
 					to: plansPath,
 					children: "Back to plans"
 				})
@@ -937,7 +1375,7 @@ const CheckoutPage = () => {
 				variant: "outline",
 				size: "xs",
 				asChild: true,
-				children: /* @__PURE__ */ jsx(Link, {
+				children: /* @__PURE__ */ jsx(Link$1, {
 					to: plansPath,
 					children: "Back to plans"
 				})
@@ -1033,7 +1471,7 @@ const CredentialsPage = () => {
 				}), /* @__PURE__ */ jsx(Button$2, {
 					className: "mt-4",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/plans",
 						children: "View plans"
 					})
@@ -1051,7 +1489,7 @@ const CredentialsPage = () => {
 				}), /* @__PURE__ */ jsx(Button$2, {
 					className: "mt-4",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/plans",
 						children: "View plans"
 					})
@@ -1067,7 +1505,7 @@ const CredentialsPage = () => {
 					}), /* @__PURE__ */ jsx(Button$2, {
 						className: "mt-4",
 						asChild: true,
-						children: /* @__PURE__ */ jsx(Link, {
+						children: /* @__PURE__ */ jsx(Link$1, {
 							to: "/account/plans",
 							children: "View plans"
 						})
@@ -1101,14 +1539,14 @@ const CredentialsPage = () => {
 				children: [/* @__PURE__ */ jsx(Button$2, {
 					variant: "outline",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/subscriptions",
 						children: "My subscriptions"
 					})
 				}), /* @__PURE__ */ jsx(Button$2, {
 					variant: "outline",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/api",
 						children: "API reference"
 					})
@@ -1127,6 +1565,69 @@ function isPreviewPricingEnabled() {
 
 //#endregion
 //#region src/pages/PricingPage.tsx
+const DEFAULT_COMPARE_ROWS = [
+	{
+		label: "Monthly requests",
+		values: [
+			"1,000",
+			"50,000",
+			"500,000",
+			"Unlimited"
+		]
+	},
+	{
+		label: "Rate limit",
+		values: [
+			"10/sec",
+			"50/sec",
+			"200/sec",
+			"Custom"
+		]
+	},
+	{
+		label: "Team seats",
+		values: [
+			"1",
+			"1",
+			"5",
+			"Unlimited"
+		]
+	},
+	{
+		label: "Webhooks",
+		values: [
+			"—",
+			"Included",
+			"Included",
+			"Included"
+		]
+	},
+	{
+		label: "SSO",
+		values: [
+			"—",
+			"—",
+			"—",
+			"Included"
+		]
+	},
+	{
+		label: "Support",
+		values: [
+			"Community",
+			"Email",
+			"Priority",
+			"Dedicated SLA"
+		]
+	}
+];
+const DEFAULT_FAQS = [{
+	question: "What happens if I exceed my quota?",
+	answer: "Requests over your monthly quota return a 429 response so you can test rate-limit handling instead of being cut off unexpectedly."
+}, {
+	question: "Can I change plans later?",
+	answer: "Yes, upgrade or downgrade any time from your billing page. Changes apply on your next billing cycle."
+}];
 const PricingPage = () => {
 	const { pricing, previewPlans } = useDevPortalBillingConfig();
 	const auth = useAuth();
@@ -1146,66 +1647,160 @@ const PricingPage = () => {
 		replace: true
 	});
 	const activeSkus = new Set((me?.subscriptions ?? []).filter((sub) => isActiveSubscription(sub.status)).map((sub) => sub.planSku));
-	const title = pricing?.title ?? "Pricing";
-	const subtitle = pricing?.subtitle ?? "Compare plans and subscribe when you are ready to integrate.";
+	const title = pricing?.title ?? "Pay for what you call";
+	const subtitle = pricing?.subtitle ?? "Every plan includes the full endpoint catalog. Higher tiers raise your request quota, rate limit, and support level.";
+	const plans = catalog?.plans ?? [];
+	const featuredSku = plans.find((p) => p.sku === "developer")?.sku ?? plans.find((p) => p.priceAmount > 0 && p.priceAmount < 50)?.sku ?? plans.find((p) => p.priceAmount > 0)?.sku;
+	const compareRows = pricing?.compareRows && pricing.compareRows.length > 0 ? pricing.compareRows : DEFAULT_COMPARE_ROWS;
+	const faqs = pricing?.faqs && pricing.faqs.length > 0 ? pricing.faqs : DEFAULT_FAQS;
+	const compareHeaders = plans.length > 0 ? plans.map((p) => p.displayName) : [
+		"Free",
+		"Developer",
+		"Team",
+		"Enterprise"
+	];
 	return /* @__PURE__ */ jsxs("div", {
-		className: "w-full px-4 pt-(--padding-content-top) pb-(--padding-content-bottom)",
+		className: "w-full",
 		children: [
 			/* @__PURE__ */ jsxs(Head, { children: [/* @__PURE__ */ jsx("title", { children: title }), /* @__PURE__ */ jsx("meta", {
 				name: "description",
 				content: subtitle
 			})] }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mb-12 space-y-4 text-center",
-				children: [/* @__PURE__ */ jsx(Heading, {
-					level: 1,
-					"data-testid": "title",
-					children: title
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground",
-					"data-testid": "subtitle",
-					children: subtitle
-				})]
-			}),
-			isLoading ? /* @__PURE__ */ jsx("p", {
-				className: "text-center text-muted-foreground",
-				children: "Loading plans…"
-			}) : null,
-			isError ? /* @__PURE__ */ jsx("p", {
-				className: "text-center text-destructive",
-				children: "Unable to load plans."
-			}) : null,
-			catalog && catalog.plans.length > 0 ? /* @__PURE__ */ jsx("div", {
-				className: "grid grid-cols-1 justify-center gap-6 sm:grid-cols-[repeat(auto-fit,minmax(280px,max-content))]",
-				children: catalog.plans.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
-					plan,
-					mode: "public",
-					isSubscribed: activeSkus.has(plan.sku)
-				}, plan.sku))
-			}) : !isLoading && !isError ? /* @__PURE__ */ jsxs("div", {
-				className: "mx-auto max-w-lg rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground",
+			/* @__PURE__ */ jsxs("section", {
+				className: "px-6 pb-4 pt-[clamp(3rem,6vw,4.5rem)] text-center",
 				children: [
-					"No plans are configured yet. Add plans in",
-					" ",
-					/* @__PURE__ */ jsx("code", {
-						className: "rounded bg-muted px-1.5 py-0.5",
-						children: "apitogo.config.json"
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-bold uppercase tracking-[0.08em] text-primary",
+						children: "Pricing"
 					}),
-					" ",
-					"and set",
-					" ",
-					/* @__PURE__ */ jsx("code", {
-						className: "rounded bg-muted px-1.5 py-0.5",
-						children: "modules.userPanel.plans.enabled"
+					/* @__PURE__ */ jsx(Heading, {
+						level: 1,
+						className: "mt-3 text-[clamp(2rem,3.5vw,3rem)] font-extrabold tracking-[-0.02em]",
+						"data-testid": "title",
+						children: title
 					}),
-					" ",
-					"to true."
+					/* @__PURE__ */ jsx("p", {
+						className: "mx-auto mt-3.5 max-w-[34rem] text-lg leading-relaxed text-muted-foreground",
+						"data-testid": "subtitle",
+						children: subtitle
+					})
 				]
-			}) : null
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				className: "px-6 pb-16 pt-8",
+				children: [
+					isLoading ? /* @__PURE__ */ jsx("p", {
+						className: "text-center text-muted-foreground",
+						children: "Loading plans…"
+					}) : null,
+					isError ? /* @__PURE__ */ jsx("p", {
+						className: "text-center text-destructive",
+						children: "Unable to load plans."
+					}) : null,
+					plans.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "mx-auto grid max-w-[1200px] grid-cols-1 items-stretch gap-5 sm:grid-cols-2 lg:grid-cols-4",
+						children: plans.map((plan) => /* @__PURE__ */ jsx(PricingCard, {
+							plan,
+							mode: "public",
+							isSubscribed: activeSkus.has(plan.sku),
+							featured: plan.sku === featuredSku
+						}, plan.sku))
+					}) : !isLoading && !isError ? /* @__PURE__ */ jsxs("div", {
+						className: "mx-auto max-w-lg rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground",
+						children: [
+							"No plans are configured yet. Add plans in",
+							" ",
+							/* @__PURE__ */ jsx("code", {
+								className: "rounded bg-muted px-1.5 py-0.5",
+								children: "apitogo.config.json"
+							}),
+							" ",
+							"and set",
+							" ",
+							/* @__PURE__ */ jsx("code", {
+								className: "rounded bg-muted px-1.5 py-0.5",
+								children: "modules.userPanel.plans.enabled"
+							}),
+							" ",
+							"to true."
+						]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("section", {
+				className: "border-t border-border bg-muted/40 px-6 py-16",
+				"data-testid": "pricing-compare",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto max-w-[1200px]",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-6 text-[clamp(1.5rem,2.5vw,2.25rem)] font-extrabold tracking-[-0.02em]",
+						children: "Compare plans"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "overflow-x-auto rounded-xl border border-border bg-card",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "min-w-[720px]",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "grid gap-0 border-b border-border px-5 py-3.5 text-[0.78125rem] font-bold uppercase tracking-[0.04em] text-muted-foreground",
+								style: { gridTemplateColumns: `minmax(10rem,1.4fr) repeat(${compareHeaders.length}, minmax(6rem,1fr))` },
+								children: [/* @__PURE__ */ jsx("div", { children: "Feature" }), compareHeaders.map((header) => /* @__PURE__ */ jsx("div", { children: header }, header))]
+							}), compareRows.map((row) => /* @__PURE__ */ jsxs("div", {
+								className: "grid gap-0 border-b border-border px-5 py-3.5 text-[0.84375rem] text-muted-foreground last:border-b-0",
+								style: { gridTemplateColumns: `minmax(10rem,1.4fr) repeat(${compareHeaders.length}, minmax(6rem,1fr))` },
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "font-medium text-foreground",
+									children: row.label
+								}), compareHeaders.map((_, index) => /* @__PURE__ */ jsx("div", { children: row.values[index] ?? "—" }, `${row.label}-${index}`))]
+							}, row.label))]
+						})
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("section", {
+				className: "px-6 py-16",
+				"data-testid": "pricing-faq",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto max-w-4xl",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-8 text-center text-[clamp(1.5rem,2.5vw,2.25rem)] font-extrabold tracking-[-0.02em]",
+						children: "Frequently asked questions"
+					}), /* @__PURE__ */ jsx("div", { children: faqs.map((faq) => /* @__PURE__ */ jsxs("div", {
+						className: "border-b border-border py-5 last:border-b-0",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-[0.9375rem] font-bold",
+							children: faq.question
+						}), /* @__PURE__ */ jsx("p", {
+							className: "mt-2 text-sm leading-relaxed text-muted-foreground",
+							children: faq.answer
+						})]
+					}, faq.question)) })]
+				})
+			})
 		]
 	});
 };
 
+//#endregion
+//#region src/hooks/useBillingPortal.ts
+function useBillingPortal() {
+	const apiBaseUrl = useDevPortalApiBaseUrl();
+	return useMutation({ mutationFn: async (returnUrl) => {
+		if (!apiBaseUrl) throw new Error("Dev portal API is not configured.");
+		const response = await fetch(`${apiBaseUrl}/api/v1/subscriptions/billing-portal`, {
+			method: "POST",
+			headers: {
+				Accept: "application/json",
+				"Content-Type": "application/json"
+			},
+			credentials: "include",
+			body: JSON.stringify({ returnUrl: returnUrl ?? `${window.location.origin}/account/subscriptions` })
+		});
+		if (!response.ok) throw new Error("Unable to open billing portal.");
+		const body = await response.json();
+		if (!body.url) throw new Error("Billing portal URL was not returned.");
+		window.location.assign(body.url);
+	} });
+}
+
 //#endregion
 //#region src/pages/SubscriptionsPage.tsx
 const SubscriptionsPage = () => {
@@ -1214,28 +1809,33 @@ const SubscriptionsPage = () => {
 	const checkoutSuccess = searchParams.get("checkout") === "success";
 	const { data: me, isLoading } = useMySubscriptions();
 	const { data: catalog } = usePlans();
+	const billingPortal = useBillingPortal();
+	const { data: usage } = useUsage("mtd");
 	const planBySku = new Map((catalog?.plans ?? []).map((plan) => [plan.sku, plan]));
 	const subscriptions = me?.subscriptions ?? [];
+	const activeSubscription = subscriptions.find((sub) => isActiveSubscription(sub.status));
+	const activePlan = activeSubscription ? planBySku.get(activeSubscription.planSku) : void 0;
+	const monthlyQuota = activePlan ? parseMonthlyQuotaCalls(activePlan.limitsJson) : null;
+	const usedRequests = usage?.requestCount ?? 0;
+	const quotaPct = monthlyQuota && monthlyQuota > 0 ? Math.min(100, Math.round(usedRequests / monthlyQuota * 100)) : null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mx-auto max-w-screen-lg px-4 pb-16 pt-(--padding-content-top) lg:px-8",
+		className: "px-8 py-7",
 		children: [
-			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "My subscriptions" }) }),
-			/* @__PURE__ */ jsxs("div", {
-				className: "mb-8 space-y-2",
-				children: [/* @__PURE__ */ jsx("h1", {
-					className: "text-3xl font-semibold tracking-tight",
-					children: "My subscriptions"
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground",
-					children: "Review your active plans and manage billing."
-				})]
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Billing" }) }),
+			/* @__PURE__ */ jsx("h1", {
+				className: "mb-2 text-[1.6rem] font-bold tracking-[-0.01em]",
+				children: "Billing"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mb-8 text-muted-foreground",
+				children: "Manage your plan, payment method, and invoices."
 			}),
 			checkoutSuccess ? /* @__PURE__ */ jsxs("div", {
 				className: "mb-6 rounded-xl border border-green-500/30 bg-green-500/10 p-4 text-sm",
 				children: [
 					"Your subscription is active.",
 					" ",
-					/* @__PURE__ */ jsx(Link, {
+					/* @__PURE__ */ jsx(Link$1, {
 						to: CREDENTIALS_PATH,
 						className: "font-medium underline",
 						children: "View your API credentials"
@@ -1245,32 +1845,80 @@ const SubscriptionsPage = () => {
 			}) : null,
 			isLoading ? /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground",
-				children: "Loading subscriptions…"
+				children: "Loading billing details…"
+			}) : null,
+			!isLoading && activePlan && activeSubscription ? /* @__PURE__ */ jsxs("div", {
+				className: "mb-8 rounded-xl border border-border bg-card p-6",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-medium uppercase tracking-[0.05em] text-muted-foreground",
+						children: "Current plan"
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "mt-2 text-2xl font-bold",
+						children: activePlan.displayName
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: "mt-1 text-sm text-muted-foreground",
+						children: [
+							formatPlanPrice(activePlan),
+							" ·",
+							" ",
+							formatBillingPeriod(activePlan.billingPeriod)
+						]
+					}),
+					activeSubscription.currentPeriodEnd ? /* @__PURE__ */ jsxs("p", {
+						className: "mt-3 text-sm text-muted-foreground",
+						children: [
+							"Renews",
+							" ",
+							new Date(activeSubscription.currentPeriodEnd).toLocaleDateString()
+						]
+					}) : null,
+					quotaPct != null && monthlyQuota != null ? /* @__PURE__ */ jsxs("div", {
+						className: "mt-5",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "mb-1.5 flex justify-between text-xs text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", { children: "Monthly requests" }), /* @__PURE__ */ jsxs("span", { children: [
+								usedRequests.toLocaleString(),
+								" /",
+								" ",
+								monthlyQuota.toLocaleString()
+							] })]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "h-2 rounded-full bg-muted",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-full rounded-full bg-primary transition-[width]",
+								style: { width: `${quotaPct}%` }
+							})
+						})]
+					}) : null
+				]
 			}) : null,
 			!isLoading && subscriptions.length === 0 ? /* @__PURE__ */ jsxs("div", {
-				className: "rounded-xl border border-dashed p-8 text-center",
+				className: "mb-8 rounded-xl border border-dashed p-8 text-center",
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-muted-foreground",
 					children: "You do not have an active subscription yet."
-				}), /* @__PURE__ */ jsx(Button$2, {
+				}), /* @__PURE__ */ jsx(Button$1, {
 					className: "mt-4",
 					asChild: true,
-					children: /* @__PURE__ */ jsx(Link, {
+					children: /* @__PURE__ */ jsx(Link$1, {
 						to: "/account/plans",
 						children: "View plans"
 					})
 				})]
 			}) : null,
-			subscriptions.length > 0 ? /* @__PURE__ */ jsx("div", {
-				className: "space-y-4",
+			!isLoading && subscriptions.length > 1 ? /* @__PURE__ */ jsx("div", {
+				className: "mb-8 space-y-4",
 				children: subscriptions.map((subscription) => {
 					const plan = planBySku.get(subscription.planSku);
-					return /* @__PURE__ */ jsxs("article", {
-						className: "rounded-xl border bg-card/60 p-6",
-						children: [/* @__PURE__ */ jsxs("div", {
+					return /* @__PURE__ */ jsx("article", {
+						className: "rounded-xl border bg-card p-5",
+						children: /* @__PURE__ */ jsxs("div", {
 							className: "flex flex-wrap items-start justify-between gap-4",
-							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
-								className: "text-lg font-medium",
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+								className: "font-semibold",
 								children: plan?.displayName ?? subscription.planSku
 							}), plan ? /* @__PURE__ */ jsxs("p", {
 								className: "mt-1 text-sm text-muted-foreground",
@@ -1281,48 +1929,238 @@ const SubscriptionsPage = () => {
 									formatBillingPeriod(plan.billingPeriod)
 								]
 							}) : null] }), /* @__PURE__ */ jsx("span", {
-								className: isActiveSubscription(subscription.status) ? "rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary" : "rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground",
+								className: "rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground",
 								children: subscription.status
 							})]
-						}), subscription.currentPeriodEnd ? /* @__PURE__ */ jsxs("p", {
-							className: "mt-3 text-sm text-muted-foreground",
-							children: [
-								"Current period ends",
-								" ",
-								new Date(subscription.currentPeriodEnd).toLocaleDateString()
-							]
-						}) : null]
+						})
 					}, `${subscription.planSku}-${subscription.status}`);
 				})
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
-				className: "mt-8 flex flex-wrap gap-3",
+				className: "flex flex-wrap gap-3",
 				children: [
-					/* @__PURE__ */ jsx(Button$2, {
+					/* @__PURE__ */ jsx(Button$1, {
 						variant: "outline",
 						asChild: true,
-						children: /* @__PURE__ */ jsx(Link, {
+						children: /* @__PURE__ */ jsx(Link$1, {
 							to: "/account/plans",
 							children: "Change plan"
 						})
 					}),
-					/* @__PURE__ */ jsx(Button$2, {
-						variant: "outline",
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Link, {
-							to: "/account/plans",
-							children: "Billing settings"
-						})
-					}),
-					auth.isAuthenticated ? /* @__PURE__ */ jsx(Button$2, {
+					auth.isAuthenticated ? /* @__PURE__ */ jsx(Button$1, {
+						variant: "default",
+						disabled: billingPortal.isPending,
+						onClick: () => {
+							billingPortal.mutate();
+						},
+						children: billingPortal.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : "Manage payment & invoices"
+					}) : null,
+					auth.isAuthenticated ? /* @__PURE__ */ jsx(Button$1, {
 						variant: "secondary",
 						asChild: true,
-						children: /* @__PURE__ */ jsx(Link, {
+						children: /* @__PURE__ */ jsx(Link$1, {
 							to: CREDENTIALS_PATH,
 							children: "API credentials"
 						})
 					}) : null
 				]
+			}),
+			billingPortal.isError ? /* @__PURE__ */ jsx("p", {
+				className: "mt-4 text-sm text-destructive",
+				children: billingPortal.error instanceof Error ? billingPortal.error.message : "Unable to open billing portal."
+			}) : null
+		]
+	});
+};
+
+//#endregion
+//#region src/pages/UsagePage.tsx
+const RANGES = [
+	{
+		value: "24h",
+		label: "24h"
+	},
+	{
+		value: "7d",
+		label: "7d"
+	},
+	{
+		value: "30d",
+		label: "30d"
+	},
+	{
+		value: "90d",
+		label: "90d"
+	}
+];
+function formatNumber(value) {
+	return new Intl.NumberFormat().format(value);
+}
+function formatPct(rate) {
+	return `${(rate * 100).toFixed(rate >= .1 ? 1 : 2)}%`;
+}
+const UsagePage = () => {
+	const auth = useAuth();
+	const [range, setRange] = useState("30d");
+	const { data, isLoading, isError } = useUsage(range);
+	const maxBar = Math.max(1, ...data?.series.map((point) => point.requestCount) ?? [1]);
+	const endpointTotal = data?.byEndpoint.reduce((sum, item) => sum + item.count, 0) ?? 0;
+	if (!auth.isAuthenticated) return /* @__PURE__ */ jsxs("div", {
+		className: "px-8 py-7",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Usage" }) }),
+			/* @__PURE__ */ jsx("h1", {
+				className: "mb-2 text-[1.6rem] font-bold tracking-[-0.01em]",
+				children: "Usage"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "Sign in to view your API usage."
+			}),
+			auth.isAuthEnabled ? /* @__PURE__ */ jsx(Button$1, {
+				asChild: true,
+				className: "mt-4",
+				children: /* @__PURE__ */ jsx(Link$1, {
+					to: "/signin",
+					children: "Sign in"
+				})
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "px-8 py-7",
+		children: [
+			/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: "Usage" }) }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-6 flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-[1.6rem] font-bold tracking-[-0.01em]",
+					children: "Usage"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex gap-1 rounded-lg border border-border bg-card p-1",
+					children: RANGES.map((item) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setRange(item.value),
+						className: `rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ${range === item.value ? "bg-primary/14 text-primary" : "text-muted-foreground hover:text-foreground"}`,
+						children: item.label
+					}, item.value))
+				})]
+			}),
+			isLoading ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Loading usage…"
+			}) : null,
+			isError ? /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-destructive",
+				children: "Unable to load usage data."
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-5 grid grid-cols-1 gap-4 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "rounded-xl border border-border bg-card p-4",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs uppercase tracking-[0.05em] text-muted-foreground",
+							children: "Requests"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "mt-1.5 text-2xl font-bold",
+							children: data ? formatNumber(data.requestCount) : "—"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "rounded-xl border border-border bg-card p-4",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs uppercase tracking-[0.05em] text-muted-foreground",
+							children: "Avg latency"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "mt-1.5 text-2xl font-bold",
+							children: data?.avgLatencyMs != null ? `${data.avgLatencyMs} ms` : "—"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "rounded-xl border border-border bg-card p-4",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-xs uppercase tracking-[0.05em] text-muted-foreground",
+							children: "Error rate"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "mt-1.5 text-2xl font-bold",
+							children: data ? formatPct(data.errorRate) : "—"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-5 rounded-xl border border-border bg-card p-6",
+				children: [/* @__PURE__ */ jsxs("h2", {
+					className: "mb-4 text-lg font-semibold",
+					children: [
+						"Requests over time (",
+						range,
+						")"
+					]
+				}), data && data.series.some((p) => p.requestCount > 0) ? /* @__PURE__ */ jsx("div", {
+					className: "flex h-40 items-end gap-1.5",
+					children: data.series.map((point) => /* @__PURE__ */ jsx("div", {
+						title: `${point.dayUtc}: ${point.requestCount}`,
+						className: "min-w-0 flex-1 rounded-t-sm bg-primary",
+						style: { height: `${Math.max(4, point.requestCount / maxBar * 100)}%` }
+					}, point.dayUtc))
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: "No request data for this range yet."
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-1 gap-5 lg:grid-cols-[1.2fr_1fr]",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "rounded-xl border border-border bg-card p-6",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-4 text-lg font-semibold",
+						children: "By endpoint"
+					}), data && data.byEndpoint.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "space-y-3.5",
+						children: data.byEndpoint.map((item) => {
+							const pct = endpointTotal > 0 ? Math.round(item.count / endpointTotal * 100) : 0;
+							return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+								className: "mb-1 flex justify-between text-[13px]",
+								children: [/* @__PURE__ */ jsx("code", {
+									className: "font-mono text-foreground",
+									children: item.path
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "text-muted-foreground",
+									children: [pct, "%"]
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								className: "h-1.5 rounded-full bg-muted",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "h-full rounded-full bg-primary",
+									style: { width: `${pct}%` }
+								})
+							})] }, item.path);
+						})
+					}) : /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: "No endpoint data."
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "rounded-xl border border-border bg-card p-6",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "mb-4 text-lg font-semibold",
+						children: "Status codes"
+					}), data && data.byStatus.length > 0 ? /* @__PURE__ */ jsx("div", { children: data.byStatus.map((item) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between border-b border-border py-2.5 last:border-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium",
+							children: item.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm font-bold",
+							children: formatNumber(item.count)
+						})]
+					}, item.label)) }) : /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: "No status data."
+					})]
+				})]
 			})
 		]
 	});
@@ -1445,21 +2283,36 @@ const devPortalBillingPlugin = createPlugin((options = {}) => ({
 			{
 				path: SUBSCRIPTIONS_PATH,
 				handle: { layout: "default" },
-				element: /* @__PURE__ */ jsx(SubscriptionsPage, {})
+				element: /* @__PURE__ */ jsx(AccountLayout, {
+					includeBillingNav: true,
+					children: /* @__PURE__ */ jsx(SubscriptionsPage, {})
+				})
 			},
 			{
 				path: CREDENTIALS_PATH,
 				handle: { layout: "default" },
-				element: /* @__PURE__ */ jsx(CredentialsPage, {})
+				element: /* @__PURE__ */ jsx(AccountLayout, {
+					includeBillingNav: true,
+					children: /* @__PURE__ */ jsx(CredentialsPage, {})
+				})
+			},
+			{
+				path: USAGE_PATH,
+				handle: { layout: "default" },
+				element: /* @__PURE__ */ jsx(AccountLayout, {
+					includeBillingNav: true,
+					children: /* @__PURE__ */ jsx(UsagePage, {})
+				})
 			}
 		]
 	}],
 	getProtectedRoutes: () => [
 		CHECKOUT_PATH,
 		SUBSCRIPTIONS_PATH,
-		CREDENTIALS_PATH
+		CREDENTIALS_PATH,
+		USAGE_PATH
 	]
 }));
 
 //#endregion
-export { API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CREDENTIALS_PATH, PRICING_PATH, SUBSCRIPTIONS_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };
+export { API_KEY_CAP_REACHED, AccountPlansPage, ApiKeysPanel, CHECKOUT_PATH, CREDENTIALS_PATH, OverviewDashboardPage, PRICING_PATH, SUBSCRIPTIONS_PATH, USAGE_PATH, devPortalBillingPlugin, useApiKeys, useCreateApiKey, useRevokeApiKey };