@wopr-network/platform-ui-core 1.27.8 → 1.27.9

package/src/__tests__/validate-elevenlabs-key.test.ts

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { trpcVanillaProxy } from "./setup.js";
 
 const mockTestProviderKey = vi.fn();
 const mockSaveProviderKey = vi.fn();
@@ -30,7 +31,7 @@ vi.mock("@/lib/fetch-utils", () => ({
 }));
 
 vi.mock("@/lib/trpc", () => ({
-  trpcVanilla: {},
+  trpcVanilla: trpcVanillaProxy,
 }));
 
 import { validateElevenLabsKey } from "@/lib/api";

package/src/__tests__/verify-page.test.tsx

@@ -22,12 +22,8 @@ vi.mock("better-auth/react", () => ({
 
 vi.mock("framer-motion", () => ({
   motion: {
-    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
-      <div {...props}>{children}</div>
-    ),
-    p: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
-      <p {...props}>{children}</p>
-    ),
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => <div {...props}>{children}</div>,
+    p: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => <p {...props}>{children}</p>,
   },
 }));
 
@@ -51,10 +47,7 @@ describe("VerifyPage", () => {
     expect(screen.getByText("Email verified")).toBeInTheDocument();
     expect(screen.getByText(/verified successfully/)).toBeInTheDocument();
     expect(screen.getByText(/\$5 signup credit/)).toBeInTheDocument();
-    expect(screen.getByRole("link", { name: /Continue to setup/ })).toHaveAttribute(
-      "href",
-      "/onboarding",
-    );
+    expect(screen.getByRole("link", { name: /Continue to setup/ })).toHaveAttribute("href", "/onboarding");
   });
 
   it("redirects to dashboard after countdown on success", async () => {
@@ -71,9 +64,7 @@ describe("VerifyPage", () => {
   });
 
   it("renders token-expired error with resend button when email param present", async () => {
-    mockSearchParams = new URLSearchParams(
-      "status=error&reason=token-expired&email=test@example.com",
-    );
+    mockSearchParams = new URLSearchParams("status=error&reason=token-expired&email=test@example.com");
 
     const { default: VerifyPage } = await import("@/app/auth/verify/page");
     render(<VerifyPage />);

package/src/__tests__/verify-redirect.test.tsx

@@ -15,12 +15,8 @@ vi.mock("@/components/auth/resend-verification-button", () => ({
 }));
 vi.mock("framer-motion", () => ({
   motion: {
-    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
-      <div {...props}>{children}</div>
-    ),
-    p: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => (
-      <p {...props}>{children}</p>
-    ),
+    div: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => <div {...props}>{children}</div>,
+    p: ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) => <p {...props}>{children}</p>,
   },
 }));
 

package/src/app/(auth)/error.tsx

@@ -8,13 +8,7 @@ import { logger } from "@/lib/logger";
 
 const log = logger("error-boundary:auth");
 
-export default function AuthError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+export default function AuthError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   const [showDetails, setShowDetails] = useState(false);
   const isDev = process.env.NODE_ENV === "development";
 

package/src/app/(auth)/forgot-password/page.tsx

@@ -6,14 +6,7 @@ import { type FormEvent, useState } from "react";
 import { AuthError } from "@/components/auth/auth-error";
 import { AuthShell } from "@/components/auth/auth-shell";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { authClient } from "@/lib/auth-client";
@@ -69,15 +62,11 @@ export default function ForgotPasswordPage() {
           </CardHeader>
           <CardContent>
             <p className="text-sm text-muted-foreground">
-              Click the link in the email to reset your password. If you don&apos;t see it, check
-              your spam folder.
+              Click the link in the email to reset your password. If you don&apos;t see it, check your spam folder.
             </p>
           </CardContent>
           <CardFooter className="justify-center">
-            <Link
-              href="/login"
-              className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
-            >
+            <Link href="/login" className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal">
               Back to sign in
             </Link>
           </CardFooter>
@@ -124,10 +113,7 @@ export default function ForgotPasswordPage() {
           </form>
         </CardContent>
         <CardFooter className="justify-center">
-          <Link
-            href="/login"
-            className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
-          >
+          <Link href="/login" className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal">
             Back to sign in
           </Link>
         </CardFooter>

package/src/app/(auth)/login/page.tsx

@@ -9,14 +9,7 @@ import { AuthShell } from "@/components/auth/auth-shell";
 import { ResendVerificationButton } from "@/components/auth/resend-verification-button";
 import { OAuthButtons } from "@/components/oauth-buttons";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { signIn } from "@/lib/auth-client";
@@ -28,9 +21,7 @@ function LoginForm() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
-  const [errorType, setErrorType] = useState<
-    "credentials" | "unverified" | "suspended" | "generic" | null
-  >(null);
+  const [errorType, setErrorType] = useState<"credentials" | "unverified" | "suspended" | "generic" | null>(null);
   const [loading, setLoading] = useState(false);
 
   const searchParams = useSearchParams();
@@ -80,9 +71,7 @@ function LoginForm() {
     <AuthShell>
       <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
         <CardHeader>
-          <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">
-            Sign in
-          </CardTitle>
+          <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">Sign in</CardTitle>
           <CardDescription>Access your {productName()} terminal</CardDescription>
         </CardHeader>
         <CardContent>
@@ -108,10 +97,7 @@ function LoginForm() {
             <div className="flex flex-col gap-2">
               <div className="flex items-center justify-between">
                 <Label htmlFor="password">Password</Label>
-                <Link
-                  href="/forgot-password"
-                  className="text-xs text-terminal-dim hover:text-terminal"
-                >
+                <Link href="/forgot-password" className="text-xs text-terminal-dim hover:text-terminal">
                   Forgot password?
                 </Link>
               </div>
@@ -165,10 +151,7 @@ function LoginForm() {
         <CardFooter className="justify-center">
           <p className="text-sm text-muted-foreground">
             Don&apos;t have an account?{" "}
-            <Link
-              href="/signup"
-              className="text-terminal-dim underline underline-offset-4 hover:text-terminal"
-            >
+            <Link href="/signup" className="text-terminal-dim underline underline-offset-4 hover:text-terminal">
               Sign up
             </Link>
           </p>

package/src/app/(auth)/reset-password/page.tsx

@@ -6,14 +6,7 @@ import { type FormEvent, Suspense, useState } from "react";
 import { AuthError } from "@/components/auth/auth-error";
 import { AuthShell } from "@/components/auth/auth-shell";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { authClient } from "@/lib/auth-client";
@@ -148,10 +141,7 @@ function ResetPasswordForm() {
           </form>
         </CardContent>
         <CardFooter className="justify-center">
-          <Link
-            href="/login"
-            className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
-          >
+          <Link href="/login" className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal">
             Back to sign in
           </Link>
         </CardFooter>

package/src/app/(auth)/signup/page.tsx

@@ -10,14 +10,7 @@ import { AuthShell } from "@/components/auth/auth-shell";
 import { ResendVerificationButton } from "@/components/auth/resend-verification-button";
 import { OAuthButtons } from "@/components/oauth-buttons";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -37,13 +30,7 @@ function getPasswordStrength(password: string): { score: number; label: string }
   return { score, label: labels[Math.min(score, labels.length) - 1] ?? "" };
 }
 
-const strengthColors = [
-  "bg-red-500",
-  "bg-red-500",
-  "bg-amber-500",
-  "bg-terminal",
-  "bg-terminal-dim",
-];
+const strengthColors = ["bg-red-500", "bg-red-500", "bg-amber-500", "bg-terminal", "bg-terminal-dim"];
 
 const strengthLabelColors = [
   "text-destructive",
@@ -141,10 +128,7 @@ function SignupForm() {
             <ResendVerificationButton email={email} />
           </CardContent>
           <CardFooter className="justify-center">
-            <Link
-              href="/login"
-              className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal"
-            >
+            <Link href="/login" className="text-sm text-terminal-dim underline underline-offset-4 hover:text-terminal">
               Back to sign in
             </Link>
           </CardFooter>
@@ -157,9 +141,7 @@ function SignupForm() {
     <AuthShell>
       <Card className="crt-scanlines border-terminal/20 bg-black/80 shadow-[0_0_30px_rgba(0,255,65,0.08)]">
         <CardHeader>
-          <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">
-            Create account
-          </CardTitle>
+          <CardTitle className="text-sm font-medium uppercase tracking-widest text-terminal">Create account</CardTitle>
           <CardDescription>Register for {productName()} access</CardDescription>
         </CardHeader>
         <CardContent>
@@ -210,18 +192,14 @@ function SignupForm() {
                       <div
                         key={seg.key}
                         className={`h-1 flex-1 rounded-full ${
-                          seg.index < strength.score
-                            ? strengthColors[strength.score - 1]
-                            : "bg-terminal/20"
+                          seg.index < strength.score ? strengthColors[strength.score - 1] : "bg-terminal/20"
                         }`}
                       />
                     ))}
                   </div>
                   <span
                     className={`text-xs ${
-                      strength.score > 0
-                        ? strengthLabelColors[strength.score - 1]
-                        : "text-muted-foreground"
+                      strength.score > 0 ? strengthLabelColors[strength.score - 1] : "text-muted-foreground"
                     }`}
                   >
                     {strength.label}
@@ -249,22 +227,13 @@ function SignupForm() {
                 onCheckedChange={(checked) => setAgreedToTerms(checked === true)}
                 className="mt-0.5 data-[state=checked]:border-terminal data-[state=checked]:bg-terminal"
               />
-              <Label
-                htmlFor="agree-terms"
-                className="text-muted-foreground font-normal cursor-pointer"
-              >
+              <Label htmlFor="agree-terms" className="text-muted-foreground font-normal cursor-pointer">
                 I agree to the{" "}
-                <Link
-                  href="/terms"
-                  className="text-terminal-dim underline underline-offset-4 hover:text-terminal"
-                >
+                <Link href="/terms" className="text-terminal-dim underline underline-offset-4 hover:text-terminal">
                   Terms of Service
                 </Link>{" "}
                 and{" "}
-                <Link
-                  href="/privacy"
-                  className="text-terminal-dim underline underline-offset-4 hover:text-terminal"
-                >
+                <Link href="/privacy" className="text-terminal-dim underline underline-offset-4 hover:text-terminal">
                   Privacy Policy
                 </Link>
               </Label>
@@ -286,10 +255,7 @@ function SignupForm() {
         <CardFooter className="justify-center">
           <p className="text-sm text-muted-foreground">
             Already have an account?{" "}
-            <Link
-              href="/login"
-              className="text-terminal-dim underline underline-offset-4 hover:text-terminal"
-            >
+            <Link href="/login" className="text-terminal-dim underline underline-offset-4 hover:text-terminal">
               Sign in
             </Link>
           </p>

package/src/app/(auth)/verify/page.tsx

@@ -0,0 +1,47 @@
+import { CheckCircle2, XCircle } from "lucide-react";
+import Link from "next/link";
+
+export default async function VerifyPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ status?: string; reason?: string }>;
+}) {
+  const { status, reason } = await searchParams;
+  const success = status === "success";
+
+  return (
+    <div className="flex flex-col items-center gap-4 text-center">
+      {success ? (
+        <>
+          <CheckCircle2 className="size-12 text-terminal" />
+          <h1 className="text-2xl font-bold tracking-tight">Email verified</h1>
+          <p className="text-sm text-muted-foreground">
+            Your account is active and you&apos;ve been granted $5.00 in free credits.
+          </p>
+          <Link
+            href="/login"
+            className="mt-2 inline-flex items-center justify-center rounded-md bg-terminal px-6 py-2 text-sm font-medium text-terminal-foreground hover:bg-terminal/90 transition-colors"
+          >
+            Sign in
+          </Link>
+        </>
+      ) : (
+        <>
+          <XCircle className="size-12 text-destructive" />
+          <h1 className="text-2xl font-bold tracking-tight">Verification failed</h1>
+          <p className="text-sm text-muted-foreground">
+            {reason === "missing_token"
+              ? "No verification token provided."
+              : "This link is invalid or has expired. Please request a new one."}
+          </p>
+          <Link
+            href="/login"
+            className="mt-2 inline-flex items-center justify-center rounded-md bg-terminal px-6 py-2 text-sm font-medium text-terminal-foreground hover:bg-terminal/90 transition-colors"
+          >
+            Back to login
+          </Link>
+        </>
+      )}
+    </div>
+  );
+}

package/src/app/(dashboard)/billing/credits/page.tsx

@@ -1,37 +1,27 @@
 "use client";
 
-import { Clock } from "lucide-react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
-import { AutoTopupCard } from "@/components/billing/auto-topup-card";
-import { BuyCreditsPanel } from "@/components/billing/buy-credits-panel";
-import { CouponInput } from "@/components/billing/coupon-input";
 import { CreditBalance } from "@/components/billing/credit-balance";
-import { CryptoCheckout } from "@/components/billing/crypto-checkout";
 import { DividendBanner } from "@/components/billing/dividend-banner";
 import { DividendEligibility } from "@/components/billing/dividend-eligibility";
 import { DividendPoolStats } from "@/components/billing/dividend-pool-stats";
 import { FirstDividendDialog } from "@/components/billing/first-dividend-dialog";
 import { LowBalanceBanner } from "@/components/billing/low-balance-banner";
-import { OrgBillingPage } from "@/components/billing/org-billing-page";
 import { TransactionHistory } from "@/components/billing/transaction-history";
+import { UnifiedCheckout } from "@/components/billing/unified-checkout";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import type { CreditBalance as CreditBalanceData, DividendWalletStats } from "@/lib/api";
+import { useCreditBalance } from "@/hooks/use-credit-balance";
+import type { DividendWalletStats } from "@/lib/api";
 import { getDividendStats } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
 import { getBrandConfig } from "@/lib/brand-config";
 import { getOrganization } from "@/lib/org-api";
-import { trpc } from "@/lib/trpc";
 
 function CreditsContent() {
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
-  const router = useRouter();
-  const cryptoPending = searchParams.get("crypto") === "pending";
   const { data: session } = useSession();
 
-  const [orgContext, setOrgContext] = useState<{
+  const [_orgContext, setOrgContext] = useState<{
     orgId: string;
     orgName: string;
     isAdmin: boolean;
@@ -56,40 +46,20 @@ function CreditsContent() {
       .finally(() => setOrgChecked(true));
   }, [session?.user?.email, session?.user?.id]);
 
-  const [showCryptoPending, setShowCryptoPending] = useState(cryptoPending);
   const showDividends = getBrandConfig().dividendsEnabled;
   const [dividendStats, setDividendStats] = useState<DividendWalletStats | null>(null);
   const [todayDividendCents, setTodayDividendCents] = useState(0);
 
-  useEffect(() => {
-    if (cryptoPending) {
-      setShowCryptoPending(true);
-      router.replace(pathname);
-    }
-  }, [cryptoPending, pathname, router]);
-
   const {
-    data: rawBalance,
+    balance: balanceNum,
+    dailyBurn,
+    runway,
     isLoading: loading,
     error: balanceError,
     refetch,
-  } = trpc.billing.creditsBalance.useQuery({});
-
-  const balance: CreditBalanceData | null = rawBalance
-    ? {
-        balance:
-          ((rawBalance as { balance_credits?: number; balance_cents?: number }).balance_credits ??
-            (rawBalance as { balance_cents?: number }).balance_cents ??
-            0) / 100,
-        dailyBurn:
-          ((rawBalance as { daily_burn_credits?: number; daily_burn_cents?: number })
-            .daily_burn_credits ??
-            (rawBalance as { daily_burn_cents?: number }).daily_burn_cents ??
-            0) / 100,
-        runway: (rawBalance as { runway_days?: number | null }).runway_days ?? null,
-      }
-    : null;
+  } = useCreditBalance();
 
+  const balance = balanceNum != null ? { balance: balanceNum, dailyBurn: dailyBurn ?? 0, runway } : null;
   const error = balanceError ? "Failed to load credit balance." : null;
 
   useEffect(() => {
@@ -115,15 +85,8 @@ function CreditsContent() {
     );
   }
 
-  if (orgContext) {
-    return (
-      <OrgBillingPage
-        orgId={orgContext.orgId}
-        orgName={orgContext.orgName}
-        isAdmin={orgContext.isAdmin}
-      />
-    );
-  }
+  // Org billing view disabled — single-user mode for now.
+  // When org features are re-enabled, restore: OrgBillingPage render here.
 
   if (loading) {
     return (
@@ -169,18 +132,7 @@ function CreditsContent() {
 
       <LowBalanceBanner balance={balance.balance} runway={balance.runway} />
 
-      {showDividends && dividendStats && (
-        <DividendBanner todayAmountCents={todayDividendCents} stats={dividendStats} />
-      )}
-
-      {showCryptoPending && (
-        <div className="rounded-md border border-amber-500/25 bg-amber-500/5 p-4">
-          <p className="flex items-center gap-2 text-sm font-medium">
-            <Clock className="h-4 w-4 text-amber-500" />
-            Crypto payment pending — credits will appear once confirmed on-chain.
-          </p>
-        </div>
-      )}
+      {showDividends && dividendStats && <DividendBanner todayAmountCents={todayDividendCents} stats={dividendStats} />}
 
       <CreditBalance data={balance} />
 
@@ -199,15 +151,10 @@ function CreditsContent() {
         />
       )}
 
-      <BuyCreditsPanel />
-      <CouponInput />
-      <CryptoCheckout />
-      <AutoTopupCard />
+      <UnifiedCheckout />
       <TransactionHistory />
 
-      {showDividends && dividendStats && (
-        <FirstDividendDialog todayAmountCents={todayDividendCents} />
-      )}
+      {showDividends && dividendStats && <FirstDividendDialog todayAmountCents={todayDividendCents} />}
     </div>
   );
 }

package/src/app/(dashboard)/billing/error.tsx

@@ -8,13 +8,7 @@ import { logger } from "@/lib/logger";
 
 const log = logger("error-boundary:billing");
 
-export default function BillingError({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+export default function BillingError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   const [showDetails, setShowDetails] = useState(false);
   const isDev = process.env.NODE_ENV === "development";
 
@@ -32,9 +26,7 @@ export default function BillingError({
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
-          <p className="text-muted-foreground">
-            Something went wrong loading billing. This may be a temporary issue.
-          </p>
+          <p className="text-muted-foreground">Something went wrong loading billing. This may be a temporary issue.</p>
           {isDev && (
             <Button
               type="button"

package/src/app/(dashboard)/billing/layout.tsx

@@ -1,73 +1,23 @@
-"use client";
-
 import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useEffect, useState } from "react";
-import type { InferenceMode } from "@/lib/api";
-import { getInferenceMode } from "@/lib/api";
-import { cn } from "@/lib/utils";
-
-const billingNav = [
-  { label: "Your Plan", href: "/billing/plans", hostedOnly: false },
-  { label: "Credits", href: "/billing/credits", hostedOnly: false },
-  { label: "Usage", href: "/billing/usage", hostedOnly: false },
-  { label: "Hosted Usage", href: "/billing/usage/hosted", hostedOnly: true },
-  { label: "Payment", href: "/billing/payment", hostedOnly: false },
-  { label: "Refer & Earn", href: "/billing/referrals", hostedOnly: false },
-];
 
 export default function BillingLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const pathname = usePathname();
-  const [mode, setMode] = useState<InferenceMode | null>(null);
-
-  useEffect(() => {
-    getInferenceMode()
-      .then(setMode)
-      .catch(() => setMode("hosted"));
-  }, []);
-
   return (
-    <div className="flex h-full">
-      <nav className="w-48 shrink-0 border-r p-4">
-        <h2 className="mb-4 text-sm font-semibold text-muted-foreground">Billing</h2>
-        <ul className="space-y-1">
-          {billingNav.map((item) => {
-            if (item.hostedOnly && mode === "byok") return null;
-            return (
-              <li key={item.href} className={cn(item.hostedOnly && mode === null && "hidden")}>
-                <Link
-                  href={item.href}
-                  className={cn(
-                    "block rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
-                    pathname === item.href
-                      ? "bg-accent text-accent-foreground"
-                      : "text-muted-foreground",
-                  )}
-                >
-                  {item.label}
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
-      </nav>
-      <div className="flex-1 overflow-auto p-6">
-        {children}
-        <footer className="mt-8 border-t pt-4 text-xs text-muted-foreground">
-          <div className="flex gap-4">
-            <Link href="/terms" className="underline underline-offset-4 hover:text-foreground">
-              Terms of Service
-            </Link>
-            <Link href="/privacy" className="underline underline-offset-4 hover:text-foreground">
-              Privacy Policy
-            </Link>
-          </div>
-        </footer>
-      </div>
+    <div className="flex-1 overflow-auto p-6">
+      {children}
+      <footer className="mt-8 border-t pt-4 text-xs text-muted-foreground">
+        <div className="flex gap-4">
+          <Link href="/terms" className="underline underline-offset-4 hover:text-foreground">
+            Terms of Service
+          </Link>
+          <Link href="/privacy" className="underline underline-offset-4 hover:text-foreground">
+            Privacy Policy
+          </Link>
+        </div>
+      </footer>
     </div>
   );
 }