Add billing page, usage display, and upgrade prompt

package.json

@@ -186,5 +186,10 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.2",
     "vitest": "^4.1.2"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "autumn-js@1.2.9": "patches/autumn-js@1.2.9.patch"
+    }
   }
 }

patches/autumn-js@1.2.9.patch

@@ -0,0 +1,13 @@
+diff --git a/dist/better-auth/chunk-LRULDM7S.mjs b/dist/better-auth/chunk-LRULDM7S.mjs
+index 31334ee65452ccbf47388e1d4cd79ce7d1f908ce..4e24d0ed9013cd9968df667738d47aba98afd2e2 100644
+--- a/dist/better-auth/chunk-LRULDM7S.mjs
++++ b/dist/better-auth/chunk-LRULDM7S.mjs
+@@ -6,7 +6,7 @@ import {
+ } from "./chunk-GJAMWZNZ.mjs";
+
+ // src/better-auth/utils/createAutumnEndpoint.ts
+-import { createAuthEndpoint } from "better-auth/plugins";
++import { createAuthEndpoint } from "better-auth/api";
+ var getRouteConfig = (routeName) => {
+   const route = routeConfigs.find((r) => r.route === routeName);
+   if (!route) throw new Error(`Route not found: ${routeName}`);

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+patchedDependencies:
+  autumn-js@1.2.9: patches/autumn-js@1.2.9.patch

src/app/billing/layout.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { AnonymousSessionHandler } from "@/components/layout/SessionHandler";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useSession } from "@/lib/auth-client";
+
+function BillingAccessGate({ children }: { children: React.ReactNode }) {
+  const { data: session, isPending } = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isPending && (!session || session.user?.isAnonymous)) {
+      router.replace("/auth/sign-up?redirect_url=%2Fbilling");
+    }
+  }, [isPending, router, session]);
+
+  if (isPending || !session || session.user?.isAnonymous) {
+    return (
+      <main className="mx-auto flex min-h-screen w-full max-w-4xl flex-col gap-8 px-4 py-12 md:px-6">
+        <div className="space-y-3 text-center">
+          <Skeleton className="mx-auto h-10 w-56" />
+          <Skeleton className="mx-auto h-4 w-72" />
+        </div>
+        <div className="space-y-4 rounded-2xl border bg-card p-6">
+          <Skeleton className="h-7 w-32" />
+          <Skeleton className="h-4 w-56" />
+          <Skeleton className="h-2 w-full" />
+        </div>
+        <div className="grid gap-4 md:grid-cols-2">
+          <Skeleton className="h-64 rounded-2xl" />
+          <Skeleton className="h-64 rounded-2xl" />
+        </div>
+      </main>
+    );
+  }
+
+  return <>{children}</>;
+}
+
+export default function BillingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AnonymousSessionHandler>
+      <BillingAccessGate>{children}</BillingAccessGate>
+    </AnonymousSessionHandler>
+  );
+}