diff --git a/package.json b/package.json
index 5931345c..d746a39b 100644
--- a/package.json
+++ b/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"
+    }
   }
 }
diff --git a/patches/autumn-js@1.2.9.patch b/patches/autumn-js@1.2.9.patch
new file mode 100644
index 00000000..9dcb01bd
--- /dev/null
+++ b/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}`);
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 00000000..c1aabe54
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+patchedDependencies:
+  autumn-js@1.2.9: patches/autumn-js@1.2.9.patch
diff --git a/src/app/billing/layout.tsx b/src/app/billing/layout.tsx
new file mode 100644
index 00000000..dc429b89
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/billing/page.tsx b/src/app/billing/page.tsx
new file mode 100644
index 00000000..d46b24b6
--- /dev/null
+++ b/src/app/billing/page.tsx
@@ -0,0 +1,555 @@
+"use client";
+
+import { useCustomer, useListPlans } from "autumn-js/react";
+import { useState } from "react";
+import { Loader2, CreditCard, Sparkles, Zap } from "lucide-react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+
+type PremiumBalance = {
+  balance?: number;
+  limit?: number;
+  unlimited?: boolean;
+  remaining?: number;
+  granted?: number;
+};
+
+type CustomerSubscription = {
+  status?: string;
+  productId?: string;
+  planId?: string;
+  plan?: {
+    name?: string;
+  };
+};
+
+type Customer = {
+  features?: {
+    premium_message?: PremiumBalance;
+  };
+  balances?: {
+    premium_message?: PremiumBalance;
+  };
+  subscriptions?: CustomerSubscription[];
+};
+
+type PlanPrice = {
+  amount?: number;
+  interval?: string;
+  recurring?: {
+    interval?: string;
+  };
+};
+
+type Plan = {
+  id: string;
+  name?: string;
+  description?: string;
+  price?: PlanPrice | number | null;
+  prices?: PlanPrice[];
+  customerEligibility?: {
+    attachAction?: "activate" | "upgrade" | "downgrade" | "purchase" | "none";
+    status?: "active" | "scheduled" | string;
+    trialAvailable?: boolean;
+  };
+};
+
+type UseCustomerApi = ReturnType<typeof useCustomer>;
+
+function getAutumnCustomer(api: UseCustomerApi): Customer | null {
+  const customerApi = api as unknown as {
+    customer?: Customer | null;
+    data?: Customer | null;
+  };
+  return customerApi.customer ?? customerApi.data ?? null;
+}
+
+function getPremiumBalance(customer?: Customer | null) {
+  const premiumBalance =
+    customer?.features?.premium_message ?? customer?.balances?.premium_message;
+
+  if (!premiumBalance) return null;
+
+  return {
+    balance: premiumBalance.balance ?? premiumBalance.remaining ?? 0,
+    limit: premiumBalance.limit ?? premiumBalance.granted ?? 0,
+    unlimited: premiumBalance.unlimited ?? false,
+  };
+}
+
+async function attachPlan(api: UseCustomerApi, planId: string) {
+  const customerApi = api as unknown as {
+    attach?: (params: Record<string, unknown>) => Promise<unknown>;
+  };
+
+  if (!customerApi.attach) {
+    throw new Error("Attach is not available");
+  }
+
+  try {
+    return await customerApi.attach({ productId: planId });
+  } catch (error) {
+    return await customerApi.attach({ planId });
+  }
+}
+
+async function cancelPlan(api: UseCustomerApi, planId: string) {
+  const customerApi = api as unknown as {
+    cancel?: (params: Record<string, unknown>) => Promise<unknown>;
+    updateSubscription?: (params: Record<string, unknown>) => Promise<unknown>;
+  };
+
+  if (customerApi.cancel) {
+    return customerApi.cancel({ productId: planId });
+  }
+
+  if (customerApi.updateSubscription) {
+    return customerApi.updateSubscription({
+      planId,
+      cancelAction: "cancel_end_of_cycle",
+    });
+  }
+
+  throw new Error("Cancellation is not available");
+}
+
+async function openBillingPortal(api: UseCustomerApi, returnUrl: string) {
+  const customerApi = api as unknown as {
+    openBillingPortal?: (params: Record<string, unknown>) => Promise<unknown>;
+    openCustomerPortal?: (params: Record<string, unknown>) => Promise<unknown>;
+  };
+
+  if (customerApi.openBillingPortal) {
+    return customerApi.openBillingPortal({ returnUrl });
+  }
+
+  if (customerApi.openCustomerPortal) {
+    return customerApi.openCustomerPortal({ returnUrl });
+  }
+
+  throw new Error("Billing portal is not available");
+}
+
+function BillingSectionSkeleton() {
+  return (
+    <div className="space-y-4 rounded-2xl border bg-card p-6 shadow-sm">
+      <Skeleton className="h-7 w-40" />
+      <Skeleton className="h-4 w-60" />
+      <Skeleton className="h-10 w-36" />
+      <Skeleton className="h-2 w-full" />
+      <Skeleton className="h-4 w-48" />
+    </div>
+  );
+}
+
+function getPlanLabel(plan: Plan) {
+  const eligibility = plan.customerEligibility;
+
+  if (eligibility?.attachAction === "none") {
+    return eligibility.status === "scheduled" ? "Scheduled" : "Current Plan";
+  }
+
+  switch (eligibility?.attachAction) {
+    case "upgrade":
+      return "Upgrade";
+    case "downgrade":
+      return "Downgrade";
+    case "purchase":
+      return "Purchase";
+    case "activate":
+      return "Subscribe";
+    default:
+      return plan.price ? "Choose Plan" : "Get Started";
+  }
+}
+
+function getPlanPrice(plan: Plan) {
+  const priceCandidate =
+    Array.isArray(plan.prices) && plan.prices.length > 0
+      ? plan.prices[0]
+      : plan.price;
+
+  if (priceCandidate == null) {
+    return { amount: null as number | null, interval: "month" };
+  }
+
+  if (typeof priceCandidate === "number") {
+    return { amount: priceCandidate, interval: "month" };
+  }
+
+  return {
+    amount:
+      typeof priceCandidate.amount === "number" ? priceCandidate.amount : null,
+    interval:
+      priceCandidate.interval || priceCandidate.recurring?.interval || "month",
+  };
+}
+
+function formatPlanPrice(plan: Plan) {
+  const { amount, interval } = getPlanPrice(plan);
+
+  if (amount == null || amount <= 0) {
+    return "Free";
+  }
+
+  const normalizedAmount = amount / 100;
+  return `$${normalizedAmount.toFixed(normalizedAmount % 1 === 0 ? 0 : 2)}/${interval === "year" ? "yr" : "mo"}`;
+}
+
+function UsageSection() {
+  const customerApi = useCustomer();
+  const customer = getAutumnCustomer(customerApi);
+  const isLoading = customerApi.isLoading;
+
+  if (isLoading) {
+    return <BillingSectionSkeleton />;
+  }
+
+  const premiumBalance = getPremiumBalance(customer);
+  const remaining = premiumBalance?.balance ?? 0;
+  const limit = premiumBalance?.limit ?? 0;
+  const used = limit > 0 ? Math.max(0, limit - remaining) : 0;
+  const progress = limit > 0 ? (used / limit) * 100 : 0;
+  const activeSubscription = customer?.subscriptions?.find(
+    (subscription) => subscription.status === "active",
+  );
+  const currentPlan =
+    activeSubscription?.plan?.name ||
+    activeSubscription?.productId ||
+    activeSubscription?.planId ||
+    (premiumBalance?.unlimited ? "Pro" : "Free");
+
+  return (
+    <section className="space-y-4 rounded-2xl border bg-card p-6 shadow-sm">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="space-y-1">
+          <h2 className="text-xl font-semibold">Your Plan</h2>
+          <p className="text-sm text-muted-foreground">
+            Track your premium AI usage and current subscription status.
+          </p>
+        </div>
+        <Badge variant={premiumBalance?.unlimited ? "default" : "secondary"}>
+          {currentPlan}
+        </Badge>
+      </div>
+
+      {premiumBalance ? (
+        premiumBalance.unlimited ? (
+          <div className="rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4">
+            <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+              <Sparkles className="h-4 w-4 text-emerald-500" />
+              Unlimited premium messages
+            </div>
+            <p className="mt-2 text-sm text-muted-foreground">
+              You have unlimited access to premium chat models on your current
+              plan.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3 rounded-xl border bg-muted/20 p-4">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div>
+                <p className="text-sm font-medium">Premium messages</p>
+                <p className="text-sm text-muted-foreground">
+                  {remaining} remaining out of {limit} this month
+                </p>
+              </div>
+              <div className="text-sm font-medium text-foreground">
+                {limit > 0
+                  ? `${Math.round((remaining / limit) * 100)}% left`
+                  : "0% left"}
+              </div>
+            </div>
+            <Progress value={progress} />
+            <p className="text-xs text-muted-foreground">
+              Only premium models consume credits. Basic models remain
+              unlimited.
+            </p>
+          </div>
+        )
+      ) : (
+        <div className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground">
+          Usage data will appear here once your billing profile is loaded.
+        </div>
+      )}
+    </section>
+  );
+}
+
+function PricingTable() {
+  const {
+    data: plans,
+    isLoading,
+    error,
+  } = useListPlans() as {
+    data?: Plan[];
+    isLoading?: boolean;
+    error?: Error | null;
+  };
+  const customerApi = useCustomer();
+  const [submittingPlanId, setSubmittingPlanId] = useState<string | null>(null);
+
+  const handleAttach = async (planId: string) => {
+    setSubmittingPlanId(planId);
+    try {
+      await attachPlan(customerApi, planId);
+    } catch (error) {
+      console.error("Failed to attach plan", error);
+      toast.error("Unable to start checkout", {
+        description: "Please try again in a moment.",
+      });
+    } finally {
+      setSubmittingPlanId(null);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <section className="space-y-4">
+        <div className="space-y-1 text-center">
+          <h2 className="text-xl font-semibold">Plans</h2>
+          <p className="text-sm text-muted-foreground">
+            Choose the plan that matches your usage.
+          </p>
+        </div>
+        <div className="grid gap-4 md:grid-cols-2">
+          <BillingSectionSkeleton />
+          <BillingSectionSkeleton />
+        </div>
+      </section>
+    );
+  }
+
+  if (error) {
+    return (
+      <section className="rounded-2xl border bg-card p-6 text-center shadow-sm">
+        <h2 className="text-xl font-semibold">Plans</h2>
+        <p className="mt-2 text-sm text-muted-foreground">
+          We couldn&apos;t load pricing right now. Please refresh and try again.
+        </p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="space-y-6">
+      <div className="space-y-1 text-center">
+        <h2 className="text-xl font-semibold">Plans</h2>
+        <p className="text-sm text-muted-foreground">
+          Upgrade for unlimited premium messages, or stay on the free tier.
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        {plans?.map((plan) => {
+          const disabled = plan.customerEligibility?.attachAction === "none";
+          const isCurrent = plan.customerEligibility?.status === "active";
+          const isProcessing = submittingPlanId === plan.id;
+
+          return (
+            <article
+              key={plan.id}
+              className="flex h-full flex-col rounded-2xl border bg-card p-6 shadow-sm"
+            >
+              <div className="space-y-2">
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <h3 className="text-xl font-semibold">
+                      {plan.name || plan.id}
+                    </h3>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {plan.description ||
+                        (plan.id === "pro"
+                          ? "Unlimited premium messages and unrestricted access to all models."
+                          : "100 premium AI messages per month with unlimited basic models.")}
+                    </p>
+                  </div>
+                  {isCurrent ? <Badge>Active</Badge> : null}
+                </div>
+                <div className="text-3xl font-bold tracking-tight">
+                  {formatPlanPrice(plan)}
+                </div>
+                {plan.customerEligibility?.trialAvailable ? (
+                  <p className="text-xs font-medium text-emerald-500">
+                    Trial available
+                  </p>
+                ) : null}
+              </div>
+
+              <div className="mt-6 space-y-3 text-sm text-muted-foreground">
+                {plan.id === "pro" ? (
+                  <>
+                    <div className="flex items-center gap-2">
+                      <Zap className="h-4 w-4 text-amber-500" />
+                      Unlimited premium messages
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Sparkles className="h-4 w-4 text-primary" />
+                      Unlimited access to all chat models
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="flex items-center gap-2">
+                      <Zap className="h-4 w-4 text-amber-500" />
+                      100 premium AI messages each month
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Sparkles className="h-4 w-4 text-primary" />
+                      Unlimited basic models
+                    </div>
+                  </>
+                )}
+              </div>
+
+              <div className="mt-6">
+                <Button
+                  className="w-full"
+                  disabled={disabled || isProcessing}
+                  onClick={() => handleAttach(plan.id)}
+                >
+                  {isProcessing ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Loading...
+                    </>
+                  ) : (
+                    getPlanLabel(plan)
+                  )}
+                </Button>
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+function SubscriptionManagement() {
+  const customerApi = useCustomer();
+  const customer = getAutumnCustomer(customerApi);
+  const [isCancelling, setIsCancelling] = useState(false);
+  const [isPortalLoading, setIsPortalLoading] = useState(false);
+
+  const premiumBalance = getPremiumBalance(customer);
+  const subscriptions = customer?.subscriptions || [];
+  const hasActivePaidPlan =
+    premiumBalance?.unlimited ||
+    subscriptions.some(
+      (subscription) =>
+        subscription.status === "active" &&
+        (subscription.productId === "pro" || subscription.planId === "pro"),
+    );
+
+  const handleCancel = async () => {
+    setIsCancelling(true);
+    try {
+      await cancelPlan(customerApi, "pro");
+      toast.success("Plan cancellation requested", {
+        description:
+          "Your Pro plan will remain active until the current billing period ends.",
+      });
+    } catch (error) {
+      console.error("Failed to cancel plan", error);
+      toast.error("Unable to cancel plan", {
+        description: "Please try again from the billing portal.",
+      });
+    } finally {
+      setIsCancelling(false);
+    }
+  };
+
+  const handleOpenPortal = async () => {
+    setIsPortalLoading(true);
+    try {
+      await openBillingPortal(customerApi, window.location.href);
+    } catch (error) {
+      console.error("Failed to open billing portal", error);
+      toast.error("Unable to open billing portal", {
+        description: "Please try again in a moment.",
+      });
+    } finally {
+      setIsPortalLoading(false);
+    }
+  };
+
+  return (
+    <section className="rounded-2xl border bg-card p-6 shadow-sm">
+      <div className="space-y-1">
+        <h2 className="text-xl font-semibold">Subscription Management</h2>
+        <p className="text-sm text-muted-foreground">
+          Manage your subscription, payment method, and billing history.
+        </p>
+      </div>
+
+      <Separator className="my-6" />
+
+      {hasActivePaidPlan ? (
+        <div className="flex flex-col gap-3 sm:flex-row">
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isCancelling}
+          >
+            {isCancelling ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Cancelling...
+              </>
+            ) : (
+              "Cancel Plan"
+            )}
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={handleOpenPortal}
+            disabled={isPortalLoading}
+          >
+            {isPortalLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Opening portal...
+              </>
+            ) : (
+              <>
+                <CreditCard className="mr-2 h-4 w-4" />
+                Manage Payment Method
+              </>
+            )}
+          </Button>
+        </div>
+      ) : (
+        <div className="rounded-xl border border-dashed p-4 text-sm text-muted-foreground">
+          You&apos;re currently on the free plan. Upgrade to Pro to manage
+          billing in Stripe.
+        </div>
+      )}
+    </section>
+  );
+}
+
+export default function BillingPage() {
+  return (
+    <main className="mx-auto flex min-h-screen w-full max-w-4xl flex-col gap-12 px-4 py-12 md:px-6">
+      <section className="space-y-3 text-center">
+        <h1 className="text-3xl font-bold tracking-tight">
+          Plans &amp; Billing
+        </h1>
+        <p className="text-sm text-muted-foreground sm:text-base">
+          Manage your subscription, track premium message usage, and update
+          billing details.
+        </p>
+      </section>
+
+      <UsageSection />
+      <PricingTable />
+      <SubscriptionManagement />
+    </main>
+  );
+}
diff --git a/src/components/assistant-ui/thread.tsx b/src/components/assistant-ui/thread.tsx
index d78e2b97..d84f828e 100644
--- a/src/components/assistant-ui/thread.tsx
+++ b/src/components/assistant-ui/thread.tsx
@@ -21,6 +21,7 @@ import {
   Brain,
   Play,
   Search,
+  Zap,
 } from "lucide-react";
 import { FaWandMagicSparkles } from "react-icons/fa6";
 import { LuBook } from "react-icons/lu";
@@ -83,10 +84,7 @@ import { ReplyContextDisplay } from "@/components/chat/ReplyContextDisplay";
 import { MessageContextBadges } from "@/components/chat/MessageContextBadges";
 import { MentionMenu } from "@/components/chat/MentionMenu";
 import { useWorkspaceStore } from "@/lib/stores/workspace-store";
-import {
-  useUIStore,
-  selectReplySelections,
-} from "@/lib/stores/ui-store";
+import { useUIStore, selectReplySelections } from "@/lib/stores/ui-store";
 import { useSelectedCardIds } from "@/hooks/ui/use-selected-card-ids";
 import { useShallow } from "zustand/react/shallow";
 import { useWorkspaceState } from "@/hooks/workspace/use-workspace-state";
@@ -95,6 +93,7 @@ import { useFeatureFlagEnabled } from "posthog-js/react";
 import { toast } from "sonner";
 import { filterItems } from "@/lib/workspace-state/search";
 import { useSession } from "@/lib/auth-client";
+import { isPremiumChatModel } from "@/lib/ai/models";
 import { focusComposerInput } from "@/lib/utils/composer-utils";
 import { buildWorkspaceItemDefinitionsFromAssets } from "@/lib/uploads/uploaded-asset";
 import { uploadSelectedFiles } from "@/lib/uploads/upload-selection";
@@ -110,6 +109,7 @@ import {
   type PromptBuilderAction,
 } from "@/components/assistant-ui/PromptBuilderDialog";
 import { ModelPicker } from "@/components/assistant-ui/ModelPicker";
+import { useCustomer } from "autumn-js/react";
 import { ThinkExLogo } from "@/components/ui/thinkex-logo";
 
 interface ThreadProps {
@@ -121,39 +121,37 @@ export const Thread: FC<ThreadProps> = ({ items = [] }) => {
 
   return (
     <ThreadPrimitive.Root
-        className="aui-root aui-thread-root @container flex h-full flex-col bg-sidebar"
-        style={{
-          ["--thread-max-width" as string]: "50rem",
-        }}
+      className="aui-root aui-thread-root @container flex h-full flex-col bg-sidebar"
+      style={{
+        ["--thread-max-width" as string]: "50rem",
+      }}
+    >
+      <ThreadPrimitive.Viewport
+        ref={viewportRef}
+        turnAnchor="top"
+        autoScroll={false}
+        className="aui-thread-viewport relative flex min-h-0 flex-1 flex-col overflow-x-auto overflow-y-scroll px-4"
       >
-        <ThreadPrimitive.Viewport
-          ref={viewportRef}
-          turnAnchor="top"
-          autoScroll={false}
-          className="aui-thread-viewport relative flex min-h-0 flex-1 flex-col overflow-x-auto overflow-y-scroll px-4"
-        >
-          <AuiIf condition={({ thread }) => thread.isLoading}>
-            <ThreadLoadingSkeleton />
-          </AuiIf>
-          <AuiIf
-            condition={({ thread }) => thread.isEmpty && !thread.isLoading}
-          >
-            <ThreadWelcome items={items} />
-          </AuiIf>
+        <AuiIf condition={({ thread }) => thread.isLoading}>
+          <ThreadLoadingSkeleton />
+        </AuiIf>
+        <AuiIf condition={({ thread }) => thread.isEmpty && !thread.isLoading}>
+          <ThreadWelcome items={items} />
+        </AuiIf>
 
-          <ThreadPrimitive.Messages
-            components={{
-              UserMessage,
-              EditComposer,
-              AssistantMessage,
-            }}
-          />
-        </ThreadPrimitive.Viewport>
+        <ThreadPrimitive.Messages
+          components={{
+            UserMessage,
+            EditComposer,
+            AssistantMessage,
+          }}
+        />
+      </ThreadPrimitive.Viewport>
 
-        <div className="aui-thread-composer-wrapper mx-auto flex w-full max-w-[var(--thread-max-width)] flex-shrink-0 flex-col gap-4 overflow-visible rounded-t-3xl bg-sidebar px-4 pb-3 md:pb-4">
-          <ComposerHoverWrapper items={items} />
-        </div>
-      </ThreadPrimitive.Root>
+      <div className="aui-thread-composer-wrapper mx-auto flex w-full max-w-[var(--thread-max-width)] flex-shrink-0 flex-col gap-4 overflow-visible rounded-t-3xl bg-sidebar px-4 pb-3 md:pb-4">
+        <ComposerHoverWrapper items={items} />
+      </div>
+    </ThreadPrimitive.Root>
   );
 };
 
@@ -883,8 +881,7 @@ const Composer: FC<ComposerProps> = ({ items }) => {
         // Combine all context: selected cards, reply texts, and user message
         // Use placeholder when empty so AI SDK accepts (backend injects reply context into message)
         let modifiedText =
-          currentText.trim() ||
-          (hasReplyContext ? "Empty message" : "");
+          currentText.trim() || (hasReplyContext ? "Empty message" : "");
 
         // Attach per-request context as metadata via runConfig
         // This flows through as body.metadata.custom on the server
@@ -956,13 +953,38 @@ interface ComposerActionProps {
 
 const ComposerAction: FC<ComposerActionProps> = ({ items }) => {
   const { data: session } = useSession();
+  const { customer } = useCustomer() as {
+    customer?: {
+      features?: {
+        premium_message?: {
+          balance?: number;
+          limit?: number;
+          unlimited?: boolean;
+          remaining?: number;
+          granted?: number;
+        };
+      };
+      balances?: {
+        premium_message?: {
+          balance?: number;
+          limit?: number;
+          unlimited?: boolean;
+          remaining?: number;
+          granted?: number;
+        };
+      };
+    } | null;
+  };
   useAui();
   const hasUploading = useAttachmentUploadStore((s) => s.uploadingIds.size > 0);
   const isAnonymous = session?.user?.isAnonymous ?? false;
   const { selectedCardIds } = useSelectedCardIds();
   const toggleCardSelection = useUIStore((state) => state.toggleCardSelection);
+  const selectedModelId = useUIStore((state) => state.selectedModelId);
+  const setSelectedModelId = useUIStore((state) => state.setSelectedModelId);
 
   const [isWarningPopoverOpen, setIsWarningPopoverOpen] = useState(false);
+  const [isLowCreditsPopoverOpen, setIsLowCreditsPopoverOpen] = useState(false);
   const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const [isFeedbackDialogOpen, setIsFeedbackDialogOpen] = useState(false);
 
@@ -985,6 +1007,19 @@ const ComposerAction: FC<ComposerActionProps> = ({ items }) => {
     return filterItems(items, "");
   }, [items]);
 
+  const premiumBalance =
+    customer?.features?.premium_message ?? customer?.balances?.premium_message;
+  const remainingPremiumMessages =
+    premiumBalance?.balance ?? premiumBalance?.remaining ?? 0;
+  const premiumLimit = premiumBalance?.limit ?? premiumBalance?.granted ?? 0;
+  const hasLowPremiumCredits =
+    !isAnonymous &&
+    !!premiumBalance &&
+    !premiumBalance.unlimited &&
+    premiumLimit > 0 &&
+    remainingPremiumMessages / premiumLimit < 0.2;
+  const isPremiumModelSelected = isPremiumChatModel(selectedModelId);
+
   return (
     <div className="aui-composer-action-wrapper relative mb-2 flex items-center justify-between">
       {/* Attachment buttons on the left */}
@@ -1091,6 +1126,89 @@ const ComposerAction: FC<ComposerActionProps> = ({ items }) => {
             </PopoverContent>
           </Popover>
         )}
+        {hasLowPremiumCredits && (
+          <Popover
+            open={isLowCreditsPopoverOpen}
+            onOpenChange={(open) => {
+              setIsLowCreditsPopoverOpen(open);
+              if (!open) {
+                focusComposerInput();
+              }
+            }}
+          >
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                onMouseEnter={() => {
+                  if (hoverTimeoutRef.current) {
+                    clearTimeout(hoverTimeoutRef.current);
+                  }
+                  setIsLowCreditsPopoverOpen(true);
+                }}
+                onMouseLeave={() => {
+                  hoverTimeoutRef.current = setTimeout(() => {
+                    setIsLowCreditsPopoverOpen(false);
+                  }, 100);
+                }}
+                className="ml-1 flex items-center gap-1 rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-1 text-xs text-amber-600 transition-colors hover:bg-amber-500/15 dark:text-amber-400"
+                aria-label={`${remainingPremiumMessages} premium messages left this month`}
+              >
+                <Zap className="h-3.5 w-3.5" />
+                <span>{remainingPremiumMessages} left</span>
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              side="top"
+              align="start"
+              sideOffset={8}
+              onMouseEnter={() => {
+                if (hoverTimeoutRef.current) {
+                  clearTimeout(hoverTimeoutRef.current);
+                }
+                setIsLowCreditsPopoverOpen(true);
+              }}
+              onMouseLeave={() => {
+                hoverTimeoutRef.current = setTimeout(() => {
+                  setIsLowCreditsPopoverOpen(false);
+                }, 100);
+              }}
+              className="w-72 p-3"
+            >
+              <div className="space-y-3">
+                <p className="text-sm text-foreground">
+                  You have {remainingPremiumMessages} premium messages left this
+                  month.
+                  {isPremiumModelSelected
+                    ? " Your current model uses premium credits."
+                    : " Premium credits are only used by premium models."}
+                </p>
+                <div className="flex items-center gap-2">
+                  <Link href="/billing" className="flex-1">
+                    <Button
+                      size="sm"
+                      className="h-7 w-full text-xs"
+                      onClick={() => setIsLowCreditsPopoverOpen(false)}
+                    >
+                      Upgrade
+                    </Button>
+                  </Link>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-7 text-xs"
+                    onClick={() => {
+                      setSelectedModelId("gemini-3-flash-preview");
+                      setIsLowCreditsPopoverOpen(false);
+                      focusComposerInput();
+                    }}
+                  >
+                    Use free model
+                  </Button>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
       </div>
       {/* Right side: speech/send/cancel button */}
       <div className="flex items-center gap-2">
diff --git a/src/components/auth/AccountModal.tsx b/src/components/auth/AccountModal.tsx
index 7cbb4f63..78ee45a6 100644
--- a/src/components/auth/AccountModal.tsx
+++ b/src/components/auth/AccountModal.tsx
@@ -1,19 +1,7 @@
 "use client";
 
+import Link from "next/link";
 import { useState } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { authClient, useSession } from "@/lib/auth-client";
-import { toast } from "sonner";
-import { Loader2 } from "lucide-react";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -24,6 +12,19 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient, useSession } from "@/lib/auth-client";
+import { CreditCard, Loader2 } from "lucide-react";
+import { toast } from "sonner";
 
 interface AccountModalProps {
   open: boolean;
@@ -43,6 +44,7 @@ export function AccountModal({ open, onOpenChange }: AccountModalProps) {
         </DialogHeader>
         <div className="mt-4 space-y-6">
           <ProfileForm user={session.user} />
+          <BillingSection />
           <DangerZone />
         </div>
       </DialogContent>
@@ -71,13 +73,13 @@ function ProfileForm({ user }: { user: any }) {
 
   return (
     <form onSubmit={handleUpdateProfile} className="space-y-4">
-      <div className="flex items-center gap-4 mb-6">
+      <div className="mb-6 flex items-center gap-4">
         <Avatar className="h-16 w-16">
           <AvatarImage src={user.image} />
           <AvatarFallback>{user.name?.charAt(0) || "U"}</AvatarFallback>
         </Avatar>
         <div className="flex flex-col gap-1">
-          <span className="font-medium text-lg">{user.name}</span>
+          <span className="text-lg font-medium">{user.name}</span>
           <span className="text-sm text-muted-foreground">{user.email}</span>
         </div>
       </div>
@@ -102,6 +104,23 @@ function ProfileForm({ user }: { user: any }) {
   );
 }
 
+function BillingSection() {
+  return (
+    <div className="border-t pt-6">
+      <h3 className="mb-2 text-lg font-medium">Billing</h3>
+      <p className="mb-4 text-sm text-muted-foreground">
+        Manage your subscription, view usage, and update payment methods.
+      </p>
+      <Link href="/billing">
+        <Button variant="outline" className="gap-2">
+          <CreditCard className="h-4 w-4" />
+          Manage Billing
+        </Button>
+      </Link>
+    </div>
+  );
+}
+
 function DangerZone() {
   const [showDeleteAlert, setShowDeleteAlert] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -127,14 +146,14 @@ function DangerZone() {
   return (
     <>
       <div className="border-t pt-6">
-        <h3 className="text-lg font-medium text-destructive mb-2">Danger Zone</h3>
-        <p className="text-sm text-muted-foreground mb-4">
-          Permanently delete your account and all of your content. This action cannot be undone.
+        <h3 className="mb-2 text-lg font-medium text-destructive">
+          Danger Zone
+        </h3>
+        <p className="mb-4 text-sm text-muted-foreground">
+          Permanently delete your account and all of your content. This action
+          cannot be undone.
         </p>
-        <Button
-          variant="destructive"
-          onClick={() => setShowDeleteAlert(true)}
-        >
+        <Button variant="destructive" onClick={() => setShowDeleteAlert(true)}>
           Delete Account
         </Button>
       </div>
@@ -144,8 +163,8 @@ function DangerZone() {
           <AlertDialogHeader>
             <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
             <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete your account
-              and remove your data from our servers.
+              This action cannot be undone. This will permanently delete your
+              account and remove your data from our servers.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
@@ -155,7 +174,7 @@ function DangerZone() {
                 e.preventDefault();
                 handleDeleteAccount();
               }}
-              className="bg-red-500 hover:bg-red-600 focus:ring-red-500 text-white"
+              className="bg-red-500 text-white hover:bg-red-600 focus:ring-red-500"
               disabled={isDeleting}
             >
               {isDeleting ? "Deleting..." : "Delete Account"}
diff --git a/src/components/billing/UpgradeDialog.tsx b/src/components/billing/UpgradeDialog.tsx
index 2c2126b6..98ca8972 100644
--- a/src/components/billing/UpgradeDialog.tsx
+++ b/src/components/billing/UpgradeDialog.tsx
@@ -1,44 +1,3 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
-interface UpgradeDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function UpgradeDialog({ open, onOpenChange }: UpgradeDialogProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-sm">
-        <DialogHeader>
-          <DialogTitle>You're out of premium messages</DialogTitle>
-          <DialogDescription>
-            You've used all your premium AI messages for this month. You can
-            still use Gemini Flash, Claude Haiku, and GPT-5 for free — they're
-            unlimited.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="mt-4 flex flex-col gap-2">
-          <Button
-            onClick={() => {
-              window.location.href = "/billing";
-            }}
-          >
-            Upgrade to Pro
-          </Button>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Continue with other models
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+export { UpgradeModal as UpgradeDialog } from "@/components/billing/UpgradeModal";
diff --git a/src/components/billing/UpgradeModal.tsx b/src/components/billing/UpgradeModal.tsx
new file mode 100644
index 00000000..753ff983
--- /dev/null
+++ b/src/components/billing/UpgradeModal.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { useState } from "react";
+import { useCustomer } from "autumn-js/react";
+import { Zap } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface UpgradeModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function UpgradeModal({ open, onOpenChange }: UpgradeModalProps) {
+  const customerApi = useCustomer();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleUpgrade = async () => {
+    setIsLoading(true);
+    try {
+      const autumnApi = customerApi as unknown as {
+        attach?: (params: Record<string, unknown>) => Promise<unknown>;
+      };
+
+      if (!autumnApi.attach) {
+        throw new Error("Attach is not available");
+      }
+
+      try {
+        await autumnApi.attach({ productId: "pro" });
+      } catch {
+        await autumnApi.attach({ planId: "pro" });
+      }
+    } catch {
+      toast.error("Unable to start checkout. Redirecting to billing page.");
+      window.location.href = "/billing";
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <Zap className="h-5 w-5 text-amber-500" />
+            <DialogTitle>Premium messages used up</DialogTitle>
+          </div>
+          <DialogDescription>
+            You&apos;ve used all your premium AI messages for this month. You
+            can still use basic models like Gemini Flash, Claude Haiku, and
+            GPT-5 for free.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="mt-4 space-y-3">
+          <Button
+            onClick={handleUpgrade}
+            className="w-full"
+            disabled={isLoading}
+          >
+            {isLoading ? "Loading..." : "Upgrade to Pro — Unlimited Messages"}
+          </Button>
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={() => onOpenChange(false)}
+          >
+            Continue with basic models
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/home/UserProfileDropdown.tsx b/src/components/home/UserProfileDropdown.tsx
index 6775879e..bae4ee8b 100644
--- a/src/components/home/UserProfileDropdown.tsx
+++ b/src/components/home/UserProfileDropdown.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useCustomer } from "autumn-js/react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -29,6 +30,50 @@ interface UserProfileDropdownProps {
   initialAuth?: InitialAuth;
 }
 
+type PremiumBalance = {
+  balance?: number;
+  limit?: number;
+  unlimited?: boolean;
+  remaining?: number;
+  granted?: number;
+};
+
+function CreditsBadge() {
+  const { customer } = useCustomer() as {
+    customer?: {
+      features?: {
+        premium_message?: PremiumBalance;
+      };
+      balances?: {
+        premium_message?: PremiumBalance;
+      };
+    } | null;
+  };
+
+  const premiumBalance =
+    customer?.features?.premium_message ?? customer?.balances?.premium_message;
+
+  if (!premiumBalance || premiumBalance.unlimited) return null;
+
+  const remaining = premiumBalance.balance ?? premiumBalance.remaining ?? 0;
+  const limit = premiumBalance.limit ?? premiumBalance.granted ?? 0;
+  const pct = limit > 0 ? (remaining / limit) * 100 : 0;
+  const dotColor =
+    pct > 20 ? "bg-green-500" : pct > 0 ? "bg-amber-500" : "bg-red-500";
+
+  return (
+    <>
+      <div className="px-2 py-1.5">
+        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <div className={`h-2 w-2 rounded-full ${dotColor}`} />
+          <span>{remaining} premium messages left</span>
+        </div>
+      </div>
+      <DropdownMenuSeparator />
+    </>
+  );
+}
+
 export function UserProfileDropdown({ initialAuth }: UserProfileDropdownProps) {
   const { data: session } = useSession();
   const router = useRouter();
@@ -84,7 +129,7 @@ export function UserProfileDropdown({ initialAuth }: UserProfileDropdownProps) {
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <button
-            className="p-1 rounded-md hover:bg-white/10 transition-colors cursor-pointer"
+            className="cursor-pointer rounded-md p-1 transition-colors hover:bg-white/10"
             aria-label={`Open menu for ${userName}`}
             aria-haspopup="menu"
           >
@@ -97,6 +142,7 @@ export function UserProfileDropdown({ initialAuth }: UserProfileDropdownProps) {
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" sideOffset={8}>
+          <CreditsBadge />
           <DropdownMenuItem
             onClick={() => setShowAccountModal(true)}
             className="cursor-pointer"
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 00000000..260f30c8
--- /dev/null
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface ProgressProps extends ComponentProps<"div"> {
+  value?: number;
+  indicatorClassName?: string;
+}
+
+export function Progress({
+  className,
+  value = 0,
+  indicatorClassName,
+  ...props
+}: ProgressProps) {
+  const normalizedValue = Number.isFinite(value)
+    ? Math.min(100, Math.max(0, value))
+    : 0;
+
+  return (
+    <div
+      data-slot="progress"
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-muted",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        data-slot="progress-indicator"
+        className={cn(
+          "h-full w-full flex-1 bg-primary transition-all",
+          indicatorClassName,
+        )}
+        style={{ transform: `translateX(-${100 - normalizedValue}%)` }}
+      />
+    </div>
+  );
+}