Initial commit: PodcastYes — AI podcast platform

app/(app)/api-keys/actions.ts

@@ -0,0 +1,46 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { getServerSession } from "@/lib/auth/guards";
+import { prisma } from "@/lib/db";
+import { subjectHasFeature } from "@/lib/billing/subscription";
+import { generateRawKey, hashKey, keyPreview } from "@/lib/apikeys";
+
+export async function createApiKeyAction(
+  name: string
+): Promise<{ ok: boolean; error?: string; key?: string }> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+
+  const allowed = await subjectHasFeature(
+    session.user.id,
+    "api_access",
+    session.session.activeOrganizationId
+  );
+  if (!allowed) return { ok: false, error: "API access requires the Pro plan or higher." };
+
+  const trimmed = name.trim() || "Untitled key";
+  const raw = generateRawKey();
+  await prisma.apiKey.create({
+    data: {
+      userId: session.user.id,
+      name: trimmed,
+      hashedKey: hashKey(raw),
+      prefix: keyPreview(raw),
+    },
+  });
+
+  revalidatePath("/api-keys");
+  // Return the raw key once — it is never stored in plaintext.
+  return { ok: true, key: raw };
+}
+
+export async function revokeApiKeyAction(id: string): Promise<{ ok: boolean; error?: string }> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+  const key = await prisma.apiKey.findUnique({ where: { id }, select: { userId: true } });
+  if (!key || key.userId !== session.user.id) return { ok: false, error: "Not allowed." };
+  await prisma.apiKey.update({ where: { id }, data: { revokedAt: new Date() } });
+  revalidatePath("/api-keys");
+  return { ok: true };
+}

app/(app)/api-keys/page.tsx

@@ -0,0 +1,46 @@
+import type { Metadata } from "next";
+import { requireAuth } from "@/lib/auth/guards";
+import { subjectHasFeature } from "@/lib/billing/subscription";
+import { prisma } from "@/lib/db";
+import { PageHeader } from "@/components/app/page-header";
+import { UpgradeGate } from "@/components/app/upgrade-gate";
+import { ApiKeysClient } from "@/components/app/api-keys-client";
+
+export const metadata: Metadata = { title: "API keys" };
+
+export default async function ApiKeysPage() {
+  const session = await requireAuth();
+  const allowed = await subjectHasFeature(
+    session.user.id,
+    "api_access",
+    session.session.activeOrganizationId
+  );
+
+  return (
+    <>
+      <PageHeader title="API keys" description="Programmatic access to the PodcastYes API." />
+      {!allowed ? (
+        <UpgradeGate
+          title="API access is a Pro feature"
+          description="Upgrade to Pro to create API keys and generate episodes programmatically."
+          requiredPlan="Pro"
+        />
+      ) : (
+        <ApiKeysClient
+          keys={(
+            await prisma.apiKey.findMany({
+              where: { userId: session.user.id, revokedAt: null },
+              orderBy: { createdAt: "desc" },
+            })
+          ).map((k) => ({
+            id: k.id,
+            name: k.name,
+            prefix: k.prefix,
+            lastUsedAt: k.lastUsedAt?.toISOString() ?? null,
+            createdAt: k.createdAt.toISOString(),
+          }))}
+        />
+      )}
+    </>
+  );
+}

app/(app)/billing/actions.ts

@@ -0,0 +1,115 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { getServerSession } from "@/lib/auth/guards";
+import { prisma } from "@/lib/db";
+import {
+  stripe,
+  createStripeCheckout,
+  createStripePortal,
+  isStripeConfigured,
+} from "@/lib/billing/stripe";
+import {
+  createPaypalSubscription,
+  cancelPaypalSubscription,
+  isPaypalConfigured,
+} from "@/lib/billing/paypal";
+import { paypalPlanId, type BillingInterval } from "@/lib/billing/catalog";
+import { getActiveSubscription } from "@/lib/billing/subscription";
+import type { PlanKey } from "@/lib/billing/plans";
+
+type ActionResult = { ok: true; url?: string } | { ok: false; error: string };
+
+function errMsg(e: unknown): string {
+  return e instanceof Error ? e.message : "Something went wrong";
+}
+
+export async function startStripeCheckoutAction(
+  plan: PlanKey,
+  interval: BillingInterval
+): Promise<ActionResult> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "Please sign in." };
+  if (!isStripeConfigured()) return { ok: false, error: "Card payments aren't configured yet." };
+
+  const user = await prisma.user.findUnique({
+    where: { id: session.user.id },
+    select: { id: true, email: true, name: true, stripeCustomerId: true },
+  });
+  if (!user) return { ok: false, error: "Account not found." };
+
+  try {
+    const url = await createStripeCheckout({
+      user,
+      plan,
+      interval,
+      subjectId: user.id,
+      subjectType: "user",
+    });
+    return { ok: true, url };
+  } catch (e) {
+    return { ok: false, error: errMsg(e) };
+  }
+}
+
+export async function startPaypalCheckoutAction(plan: PlanKey): Promise<ActionResult> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "Please sign in." };
+  if (!isPaypalConfigured()) return { ok: false, error: "PayPal isn't configured yet." };
+
+  const planId = paypalPlanId(plan);
+  if (!planId) return { ok: false, error: "PayPal plan isn't configured for this tier." };
+
+  try {
+    const { approveUrl } = await createPaypalSubscription({
+      planId,
+      custom: { subjectId: session.user.id, subjectType: "user", plan },
+    });
+    return { ok: true, url: approveUrl };
+  } catch (e) {
+    return { ok: false, error: errMsg(e) };
+  }
+}
+
+export async function openStripePortalAction(): Promise<ActionResult> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "Please sign in." };
+  const user = await prisma.user.findUnique({
+    where: { id: session.user.id },
+    select: { stripeCustomerId: true },
+  });
+  if (!user?.stripeCustomerId) return { ok: false, error: "No billing account yet." };
+  try {
+    const url = await createStripePortal(user.stripeCustomerId);
+    return { ok: true, url };
+  } catch (e) {
+    return { ok: false, error: errMsg(e) };
+  }
+}
+
+export async function cancelSubscriptionAction(): Promise<ActionResult> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "Please sign in." };
+  const sub = await getActiveSubscription(session.user.id);
+  if (!sub) return { ok: false, error: "No active subscription." };
+
+  try {
+    if (sub.provider === "paypal" && sub.paypalSubscriptionId) {
+      await cancelPaypalSubscription(sub.paypalSubscriptionId);
+      await prisma.subscription.update({
+        where: { id: sub.id },
+        data: { status: "canceled", cancelAtPeriodEnd: true },
+      });
+    } else if (sub.provider === "stripe" && sub.stripeSubscriptionId) {
+      await stripe().subscriptions.update(sub.stripeSubscriptionId, { cancel_at_period_end: true });
+      await prisma.subscription.update({
+        where: { id: sub.id },
+        data: { cancelAtPeriodEnd: true },
+      });
+    }
+    revalidatePath("/billing");
+    return { ok: true };
+  } catch (e) {
+    return { ok: false, error: errMsg(e) };
+  }
+}

app/(app)/billing/page.tsx

@@ -0,0 +1,56 @@
+import type { Metadata } from "next";
+import { requireAuth } from "@/lib/auth/guards";
+import { getEffectivePlan, getActiveSubscription } from "@/lib/billing/subscription";
+import { isStripeConfigured } from "@/lib/billing/stripe";
+import { isPaypalConfigured } from "@/lib/billing/paypal";
+import { PageHeader } from "@/components/app/page-header";
+import { BillingClient } from "@/components/app/billing-client";
+
+export const metadata: Metadata = { title: "Billing" };
+
+export default async function BillingPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ status?: string }>;
+}) {
+  const session = await requireAuth();
+  const { status } = await searchParams;
+  const { key: currentPlan } = await getEffectivePlan(
+    session.user.id,
+    session.session.activeOrganizationId
+  );
+  const sub = await getActiveSubscription(session.user.id);
+
+  return (
+    <>
+      <PageHeader title="Billing" description="Manage your plan and payment method." />
+
+      {status === "success" && (
+        <div className="mb-6 rounded-2xl border border-success/30 bg-success/10 px-4 py-3 text-sm font-medium text-success">
+          Payment received — your plan will update momentarily once the provider confirms.
+        </div>
+      )}
+      {status === "cancel" && (
+        <div className="mb-6 rounded-2xl border border-warning/30 bg-warning/10 px-4 py-3 text-sm font-medium text-warning">
+          Checkout canceled. No changes were made.
+        </div>
+      )}
+
+      <BillingClient
+        currentPlan={currentPlan}
+        subscription={
+          sub
+            ? {
+                provider: sub.provider,
+                status: sub.status,
+                cancelAtPeriodEnd: sub.cancelAtPeriodEnd,
+                periodEnd: sub.periodEnd ? sub.periodEnd.toISOString() : null,
+              }
+            : null
+        }
+        stripeConfigured={isStripeConfigured()}
+        paypalConfigured={isPaypalConfigured()}
+      />
+    </>
+  );
+}

app/(app)/dashboard/page.tsx

@@ -0,0 +1,131 @@
+import Link from "next/link";
+import { Mic2, Plus, Sparkles, ArrowRight } from "lucide-react";
+import { requireAuth } from "@/lib/auth/guards";
+import { getEffectivePlan } from "@/lib/billing/subscription";
+import { prisma } from "@/lib/db";
+import { PageHeader } from "@/components/app/page-header";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { EpisodeStatusBadge } from "@/components/app/episode-status-badge";
+
+export default async function DashboardPage() {
+  const session = await requireAuth();
+  const { plan, key } = await getEffectivePlan(
+    session.user.id,
+    session.session.activeOrganizationId
+  );
+
+  const [episodeCount, recent] = await Promise.all([
+    prisma.episode.count({ where: { userId: session.user.id } }),
+    prisma.episode.findMany({
+      where: { userId: session.user.id },
+      orderBy: { createdAt: "desc" },
+      take: 5,
+      select: { id: true, title: true, status: true, format: true, createdAt: true },
+    }),
+  ]);
+
+  const firstName = session.user.name.split(" ")[0];
+
+  return (
+    <>
+      <PageHeader
+        title={`Welcome back, ${firstName}`}
+        description="Spin up a fully produced episode in a couple of minutes."
+        action={
+          <Button asChild>
+            <Link href="/episodes/new">
+              <Plus className="h-4 w-4" /> New episode
+            </Link>
+          </Button>
+        }
+      />
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Episodes created</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="font-display text-4xl font-extrabold tracking-tight">{episodeCount}</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Current plan</CardTitle>
+          </CardHeader>
+          <CardContent className="flex items-center justify-between">
+            <p className="font-display text-4xl font-extrabold capitalize tracking-tight">{plan.name}</p>
+            {key === "free" && (
+              <Button asChild size="sm" variant="outline">
+                <Link href="/billing">Upgrade</Link>
+              </Button>
+            )}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Usage this month</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Button asChild size="sm" variant="outline">
+              <Link href="/usage">
+                View usage <ArrowRight className="h-4 w-4" />
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card className="mt-6">
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>Recent episodes</CardTitle>
+          <Button asChild variant="ghost" size="sm">
+            <Link href="/episodes">View all</Link>
+          </Button>
+        </CardHeader>
+        <CardContent>
+          {recent.length === 0 ? (
+            <div className="flex flex-col items-center gap-3 py-12 text-center">
+              <span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand/10 text-brand">
+                <Mic2 className="h-6 w-6" />
+              </span>
+              <div>
+                <p className="font-medium">No episodes yet</p>
+                <p className="text-sm text-muted-foreground">
+                  Create your first AI-produced episode to get started.
+                </p>
+              </div>
+              <Button asChild>
+                <Link href="/episodes/new">
+                  <Sparkles className="h-4 w-4" /> Create your first episode
+                </Link>
+              </Button>
+            </div>
+          ) : (
+            <ul className="divide-y">
+              {recent.map((ep) => (
+                <li key={ep.id}>
+                  <Link
+                    href={`/episodes/${ep.id}`}
+                    className="flex items-center justify-between gap-3 py-3 hover:opacity-80"
+                  >
+                    <div className="min-w-0">
+                      <p className="truncate font-medium">{ep.title}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {ep.format.replace("_", "-").toLowerCase()} ·{" "}
+                        {ep.createdAt.toLocaleDateString()}
+                      </p>
+                    </div>
+                    <EpisodeStatusBadge status={ep.status} />
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </CardContent>
+      </Card>
+    </>
+  );
+}

app/(app)/episodes/[id]/page.tsx

@@ -0,0 +1,103 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { Mic2, Repeat } from "lucide-react";
+import { requireAuth } from "@/lib/auth/guards";
+import { prisma } from "@/lib/db";
+import { PageHeader } from "@/components/app/page-header";
+import { GenerationProgress } from "@/components/app/generation-progress";
+import { ScriptEditor } from "@/components/app/script-editor";
+import { AudioPlayer } from "@/components/app/audio-player";
+import { EpisodeActions } from "@/components/app/episode-actions";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import type { StructuredScript } from "@/lib/ai/types";
+
+export default async function EpisodePage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const session = await requireAuth();
+
+  const episode = await prisma.episode.findUnique({
+    where: { id },
+    include: { script: true, audioAsset: true, coverArt: true, speakers: true },
+  });
+  if (!episode) notFound();
+  if (episode.userId !== session.user.id && session.user.role !== "admin") notFound();
+
+  const inProgress = !["READY", "FAILED"].includes(episode.status);
+  const speakerNames: Record<string, string> = {};
+  for (const s of episode.speakers) speakerNames[s.speakerKey] = s.displayName;
+
+  return (
+    <>
+      <PageHeader
+        title={episode.title}
+        description={`${episode.format.replace("_", "-").toLowerCase()} · ${episode.language.toUpperCase()} · ${episode.targetLengthMin} min`}
+        action={!inProgress ? <EpisodeActions episodeId={episode.id} /> : undefined}
+      />
+
+      {episode.status === "FAILED" || inProgress ? (
+        <GenerationProgress
+          episodeId={episode.id}
+          initialStatus={episode.status}
+          initialStage={episode.stage}
+          initialError={episode.errorMessage}
+        />
+      ) : (
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="space-y-6 lg:col-span-1">
+            <Card className="overflow-hidden">
+              <div className="aspect-square bg-muted">
+                {episode.coverArt ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={`/api/assets/${episode.coverArt.storageKey}`}
+                    alt={episode.title}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center text-muted-foreground">
+                    <Mic2 className="h-10 w-10" />
+                  </div>
+                )}
+              </div>
+            </Card>
+
+            {episode.audioAsset && (
+              <Card>
+                <CardContent className="pt-6">
+                  <AudioPlayer
+                    storageKey={episode.audioAsset.storageKey}
+                    durationSec={episode.audioAsset.durationSec}
+                  />
+                </CardContent>
+              </Card>
+            )}
+
+            <Button asChild variant="outline" className="w-full">
+              <Link href={`/episodes/${episode.id}/repurpose`}>
+                <Repeat className="h-4 w-4" /> Repurpose content
+              </Link>
+            </Button>
+          </div>
+
+          <div className="lg:col-span-2">
+            {episode.script ? (
+              <ScriptEditor
+                key={episode.script.version}
+                episodeId={episode.id}
+                script={episode.script.content as unknown as StructuredScript}
+                speakerNames={speakerNames}
+              />
+            ) : (
+              <Card>
+                <CardContent className="py-12 text-center text-muted-foreground">
+                  No script available.
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

app/(app)/episodes/[id]/repurpose/page.tsx

@@ -0,0 +1,50 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { requireAuth } from "@/lib/auth/guards";
+import { prisma } from "@/lib/db";
+import { PageHeader } from "@/components/app/page-header";
+import { RepurposeClient } from "@/components/app/repurpose-client";
+import { Button } from "@/components/ui/button";
+
+type Format = "blog" | "social_thread" | "newsletter";
+type Content = { title: string; body: string } | null;
+
+export default async function RepurposePage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const session = await requireAuth();
+
+  const episode = await prisma.episode.findUnique({
+    where: { id },
+    select: {
+      userId: true,
+      title: true,
+      script: { select: { id: true } },
+      repurposed: { orderBy: { createdAt: "desc" } },
+    },
+  });
+  if (!episode) notFound();
+  if (episode.userId !== session.user.id && session.user.role !== "admin") notFound();
+
+  // Latest content per format.
+  const initial: Record<Format, Content> = { blog: null, social_thread: null, newsletter: null };
+  for (const r of episode.repurposed) {
+    const key = r.type as Format;
+    if (key in initial && !initial[key]) initial[key] = r.content as unknown as Content;
+  }
+
+  return (
+    <>
+      <Button asChild variant="ghost" size="sm" className="mb-2">
+        <Link href={`/episodes/${id}`}>
+          <ArrowLeft className="h-4 w-4" /> Back to episode
+        </Link>
+      </Button>
+      <PageHeader
+        title="Repurpose content"
+        description={`Turn "${episode.title}" into a blog post, social thread, or newsletter.`}
+      />
+      <RepurposeClient episodeId={id} initial={initial} />
+    </>
+  );
+}

app/(app)/episodes/actions.ts

@@ -0,0 +1,329 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+import { getServerSession } from "@/lib/auth/guards";
+import { prisma } from "@/lib/db";
+import { getEffectivePlan } from "@/lib/billing/subscription";
+import { enforceLimit, LimitExceededError } from "@/lib/usage/limits";
+import { enqueueEpisodeGeneration } from "@/lib/queue/pgboss";
+import { rateLimit, LIMITS } from "@/lib/ratelimit";
+import type { GenerationType } from "@/lib/queue/jobs";
+import type { Prisma } from "@prisma/client";
+
+const speakerSchema = z.object({
+  speakerKey: z.string().min(1).max(40),
+  displayName: z.string().min(1).max(60),
+  elevenVoiceId: z.string().min(1).max(60),
+});
+
+const createSchema = z.object({
+  title: z.string().max(120).optional(),
+  topic: z.string().min(10, "Describe your topic in a bit more detail").max(2000),
+  tone: z.string().min(1),
+  format: z.enum(["SOLO", "INTERVIEW", "MULTI_HOST"]),
+  language: z.string().min(2).max(5),
+  targetLengthMin: z.number().int().min(1).max(180),
+  audience: z.string().max(200).optional(),
+  speakers: z.array(speakerSchema).min(1).max(6),
+});
+
+export type CreateEpisodeInput = z.infer<typeof createSchema>;
+export type CreateEpisodeResult =
+  | { ok: true; episodeId: string }
+  | { ok: false; error: string; limited?: boolean };
+
+export async function createEpisodeAction(input: CreateEpisodeInput): Promise<CreateEpisodeResult> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+
+  const rl = await rateLimit("generation", session.user.id, LIMITS.generation);
+  if (!rl.ok) {
+    return { ok: false, error: `Too many requests. Try again in ${rl.retryAfterSec}s.` };
+  }
+
+  const parsed = createSchema.safeParse(input);
+  if (!parsed.success) {
+    return { ok: false, error: parsed.error.issues[0]?.message ?? "Invalid input." };
+  }
+  const data = parsed.data;
+  const activeOrgId = session.session.activeOrganizationId;
+
+  const { plan } = await getEffectivePlan(session.user.id, activeOrgId);
+  if (data.targetLengthMin > plan.limits.maxEpisodeMinutes) {
+    return {
+      ok: false,
+      error: `The ${plan.name} plan supports episodes up to ${plan.limits.maxEpisodeMinutes} minutes.`,
+      limited: true,
+    };
+  }
+
+  try {
+    await enforceLimit(session.user.id, "script", activeOrgId);
+    await enforceLimit(session.user.id, "audio", activeOrgId);
+  } catch (err) {
+    if (err instanceof LimitExceededError) {
+      return {
+        ok: false,
+        error: `You've reached your monthly ${err.check.metric} limit on the ${err.check.plan} plan. Upgrade to keep creating.`,
+        limited: true,
+      };
+    }
+    throw err;
+  }
+
+  const episode = await prisma.episode.create({
+    data: {
+      userId: session.user.id,
+      organizationId: activeOrgId ?? undefined,
+      title: data.title?.trim() || deriveTitle(data.topic),
+      topic: data.topic,
+      tone: data.tone,
+      format: data.format,
+      language: data.language,
+      targetLengthMin: data.targetLengthMin,
+      audience: data.audience,
+      status: "QUEUED",
+      stage: "Queued for generation",
+      speakers: {
+        create: data.speakers.map((s) => ({
+          speakerKey: s.speakerKey,
+          displayName: s.displayName,
+          elevenVoiceId: s.elevenVoiceId,
+        })),
+      },
+      jobs: { create: { type: "full", status: "queued" } },
+    },
+  });
+
+  await enqueueEpisodeGeneration(
+    { episodeId: episode.id, type: "full" },
+    { priority: plan.features.includes("priority_generation") ? 10 : 0 }
+  );
+
+  revalidatePath("/episodes");
+  revalidatePath("/dashboard");
+  return { ok: true, episodeId: episode.id };
+}
+
+export async function regenerateAction(
+  episodeId: string,
+  type: GenerationType
+): Promise<{ ok: boolean; error?: string }> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+
+  const episode = await prisma.episode.findUnique({
+    where: { id: episodeId },
+    select: { userId: true, organizationId: true },
+  });
+  if (!episode) return { ok: false, error: "Episode not found." };
+  if (episode.userId !== session.user.id && session.user.role !== "admin") {
+    return { ok: false, error: "Not allowed." };
+  }
+
+  // Gate the metrics this regeneration will consume.
+  const metrics: ("script" | "audio" | "art")[] =
+    type === "art" ? ["art"] : type === "audio" ? ["audio"] : ["script", "audio"];
+  try {
+    for (const m of metrics) await enforceLimit(session.user.id, m, session.session.activeOrganizationId);
+  } catch (err) {
+    if (err instanceof LimitExceededError) {
+      return { ok: false, error: `Monthly ${err.check.metric} limit reached on the ${err.check.plan} plan.` };
+    }
+    throw err;
+  }
+
+  await prisma.episode.update({
+    where: { id: episodeId },
+    data: { status: "QUEUED", stage: "Queued for regeneration", errorMessage: null },
+  });
+  await prisma.generationJob.create({ data: { episodeId, type, status: "queued" } });
+  await enqueueEpisodeGeneration({ episodeId, type });
+
+  revalidatePath(`/episodes/${episodeId}`);
+  return { ok: true };
+}
+
+const scriptContentSchema = z.object({
+  title: z.string().min(1),
+  sections: z
+    .array(
+      z.object({
+        id: z.string().min(1),
+        title: z.string().min(1),
+        turns: z.array(z.object({ speakerKey: z.string(), text: z.string() })).min(1),
+      })
+    )
+    .min(1),
+});
+
+export async function updateScriptAction(
+  episodeId: string,
+  content: unknown
+): Promise<{ ok: boolean; error?: string }> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+
+  const episode = await prisma.episode.findUnique({
+    where: { id: episodeId },
+    select: { userId: true },
+  });
+  if (!episode || episode.userId !== session.user.id) return { ok: false, error: "Not allowed." };
+
+  const parsed = scriptContentSchema.safeParse(content);
+  if (!parsed.success) return { ok: false, error: "Invalid script format." };
+
+  await prisma.script.update({
+    where: { episodeId },
+    data: { content: parsed.data as unknown as Prisma.InputJsonValue, version: { increment: 1 } },
+  });
+  revalidatePath(`/episodes/${episodeId}`);
+  return { ok: true };
+}
+
+export async function regenerateSectionAction(
+  episodeId: string,
+  sectionId: string
+): Promise<{ ok: boolean; error?: string; section?: { id: string; title: string; turns: { speakerKey: string; text: string }[] } }> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+
+  const episode = await prisma.episode.findUnique({
+    where: { id: episodeId },
+    include: { speakers: true, script: true },
+  });
+  if (!episode || (episode.userId !== session.user.id && session.user.role !== "admin")) {
+    return { ok: false, error: "Not allowed." };
+  }
+  if (!episode.script) return { ok: false, error: "No script to edit yet." };
+
+  try {
+    await enforceLimit(session.user.id, "script", session.session.activeOrganizationId);
+  } catch (err) {
+    if (err instanceof LimitExceededError) {
+      return { ok: false, error: `Monthly script limit reached on the ${err.check.plan} plan.` };
+    }
+    throw err;
+  }
+
+  // Imported lazily so the AI SDK never reaches client bundles importing this file.
+  const { scriptProvider } = await import("@/lib/ai/providers");
+  const { recordCost, scriptCostUsd } = await import("@/lib/ai/cost");
+  const { incrementUsage } = await import("@/lib/usage/meter");
+
+  const config = {
+    title: episode.title,
+    topic: episode.topic,
+    tone: episode.tone,
+    format: episode.format,
+    language: episode.language,
+    targetLengthMin: episode.targetLengthMin,
+    audience: episode.audience ?? undefined,
+    speakers: episode.speakers.map((s) => ({ speakerKey: s.speakerKey, displayName: s.displayName })),
+  };
+  const current = episode.script.content as unknown as {
+    title: string;
+    sections: { id: string; title: string; turns: { speakerKey: string; text: string }[] }[];
+  };
+
+  const { section, usage } = await scriptProvider().regenerateSection(config, current, sectionId);
+  const updated = {
+    ...current,
+    sections: current.sections.map((s) => (s.id === sectionId ? section : s)),
+  };
+
+  await prisma.script.update({
+    where: { episodeId },
+    data: { content: updated as unknown as Prisma.InputJsonValue, version: { increment: 1 } },
+  });
+
+  const ownerId = episode.organizationId ?? episode.userId;
+  const ownerType = episode.organizationId ? "organization" : "user";
+  await incrementUsage(ownerId, ownerType, "script");
+  await recordCost({
+    provider: "openai",
+    operation: "script",
+    units: usage.inputTokens + usage.outputTokens,
+    costUsd: scriptCostUsd(usage),
+    episodeId,
+    userId: episode.userId,
+  });
+
+  revalidatePath(`/episodes/${episodeId}`);
+  return { ok: true, section };
+}
+
+export async function repurposeAction(
+  episodeId: string,
+  format: "blog" | "social_thread" | "newsletter"
+): Promise<{ ok: boolean; error?: string; content?: { title: string; body: string } }> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+
+  const episode = await prisma.episode.findUnique({
+    where: { id: episodeId },
+    include: { script: true },
+  });
+  if (!episode || (episode.userId !== session.user.id && session.user.role !== "admin")) {
+    return { ok: false, error: "Not allowed." };
+  }
+  if (!episode.script) return { ok: false, error: "Generate the episode first." };
+
+  try {
+    await enforceLimit(session.user.id, "repurpose", session.session.activeOrganizationId);
+  } catch (err) {
+    if (err instanceof LimitExceededError) {
+      return { ok: false, error: `Monthly repurpose limit reached on the ${err.check.plan} plan.` };
+    }
+    throw err;
+  }
+
+  const { repurposeScript } = await import("@/lib/ai/pipeline/repurpose");
+  const { recordCost, scriptCostUsd } = await import("@/lib/ai/cost");
+  const { incrementUsage } = await import("@/lib/usage/meter");
+
+  const { content, usage } = await repurposeScript(
+    episode.script.content as unknown as Parameters<typeof repurposeScript>[0],
+    format
+  );
+
+  await prisma.repurposedContent.create({
+    data: { episodeId, type: format, content: content as unknown as Prisma.InputJsonValue },
+  });
+
+  const ownerId = episode.organizationId ?? episode.userId;
+  const ownerType = episode.organizationId ? "organization" : "user";
+  await incrementUsage(ownerId, ownerType, "repurpose");
+  await recordCost({
+    provider: "openai",
+    operation: "repurpose",
+    units: usage.inputTokens + usage.outputTokens,
+    costUsd: scriptCostUsd(usage),
+    episodeId,
+    userId: episode.userId,
+  });
+
+  revalidatePath(`/episodes/${episodeId}/repurpose`);
+  return { ok: true, content };
+}
+
+export async function deleteEpisodeAction(episodeId: string): Promise<{ ok: boolean; error?: string }> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+  const episode = await prisma.episode.findUnique({
+    where: { id: episodeId },
+    select: { userId: true },
+  });
+  if (!episode || (episode.userId !== session.user.id && session.user.role !== "admin")) {
+    return { ok: false, error: "Not allowed." };
+  }
+  await prisma.episode.delete({ where: { id: episodeId } });
+  revalidatePath("/episodes");
+  return { ok: true };
+}
+
+function deriveTitle(topic: string): string {
+  const trimmed = topic.trim().replace(/\s+/g, " ");
+  return trimmed.length <= 60 ? trimmed : trimmed.slice(0, 57) + "…";
+}

app/(app)/episodes/new/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { requireAuth } from "@/lib/auth/guards";
+import { getEffectivePlan } from "@/lib/billing/subscription";
+import { PageHeader } from "@/components/app/page-header";
+import { EpisodeWizard } from "@/components/app/episode-wizard";
+
+export const metadata: Metadata = { title: "Create an episode" };
+
+export default async function NewEpisodePage() {
+  const session = await requireAuth();
+  const { plan } = await getEffectivePlan(session.user.id, session.session.activeOrganizationId);
+  return (
+    <>
+      <PageHeader
+        title="Create an episode"
+        description="Configure your episode and let the AI write, record, and design it."
+      />
+      <EpisodeWizard maxMinutes={plan.limits.maxEpisodeMinutes} />
+    </>
+  );
+}

app/(app)/episodes/page.tsx

@@ -0,0 +1,69 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Mic2, Plus } from "lucide-react";
+import { requireAuth } from "@/lib/auth/guards";
+import { prisma } from "@/lib/db";
+import { PageHeader } from "@/components/app/page-header";
+import { EpisodeCard } from "@/components/app/episode-card";
+import { Button } from "@/components/ui/button";
+
+export const metadata: Metadata = { title: "Episodes" };
+
+export default async function EpisodesPage() {
+  const session = await requireAuth();
+  const episodes = await prisma.episode.findMany({
+    where: { userId: session.user.id },
+    orderBy: { createdAt: "desc" },
+    include: { coverArt: { select: { storageKey: true } } },
+  });
+
+  return (
+    <>
+      <PageHeader
+        title="Episodes"
+        description="Your AI-produced podcast library."
+        action={
+          <Button asChild>
+            <Link href="/episodes/new">
+              <Plus className="h-4 w-4" /> New episode
+            </Link>
+          </Button>
+        }
+      />
+
+      {episodes.length === 0 ? (
+        <div className="flex flex-col items-center gap-3 rounded-2xl border border-dashed border-border py-16 text-center">
+          <span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand/10 text-brand">
+            <Mic2 className="h-6 w-6" />
+          </span>
+          <div>
+            <p className="font-medium">No episodes yet</p>
+            <p className="text-sm text-muted-foreground">Create your first AI-produced episode.</p>
+          </div>
+          <Button asChild>
+            <Link href="/episodes/new">
+              <Plus className="h-4 w-4" /> New episode
+            </Link>
+          </Button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+          {episodes.map((ep) => (
+            <EpisodeCard
+              key={ep.id}
+              episode={{
+                id: ep.id,
+                title: ep.title,
+                status: ep.status,
+                format: ep.format,
+                language: ep.language,
+                createdAt: ep.createdAt,
+                coverArtKey: ep.coverArt?.storageKey,
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}

app/(app)/layout.tsx

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { Mic, Plus } from "lucide-react";
+import { requireAuth } from "@/lib/auth/guards";
+import { getEffectivePlan } from "@/lib/billing/subscription";
+import { SidebarNav } from "@/components/app/sidebar-nav";
+import { UserMenu } from "@/components/app/user-menu";
+import { Button } from "@/components/ui/button";
+
+// Authed, DB-backed dashboard — never statically prerender.
+export const dynamic = "force-dynamic";
+
+export default async function AppLayout({ children }: { children: React.ReactNode }) {
+  const session = await requireAuth();
+  const { key: plan } = await getEffectivePlan(
+    session.user.id,
+    session.session.activeOrganizationId
+  );
+  const isAdmin = session.user.role === "admin";
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-border bg-background/85 px-4 backdrop-blur-md md:px-6">
+        <Link href="/dashboard" className="flex items-center gap-2.5 font-display font-bold tracking-tight">
+          <span className="flex h-9 w-9 items-center justify-center rounded-2xl bg-brand text-brand-foreground">
+            <Mic className="h-5 w-5" />
+          </span>
+          <span className="hidden sm:inline">PodcastYes</span>
+        </Link>
+        <div className="flex items-center gap-3">
+          <Button asChild size="sm">
+            <Link href="/episodes/new">
+              <Plus className="h-4 w-4" /> New episode
+            </Link>
+          </Button>
+          <UserMenu
+            name={session.user.name}
+            email={session.user.email}
+            image={session.user.image}
+            isAdmin={isAdmin}
+          />
+        </div>
+      </header>
+
+      <div className="flex flex-1">
+        <aside className="hidden w-64 shrink-0 border-r border-border bg-background md:block">
+          <div className="sticky top-16">
+            <SidebarNav plan={plan} />
+          </div>
+        </aside>
+        <main className="flex-1 bg-secondary/50">
+          <div className="container max-w-6xl py-8 md:py-10">{children}</div>
+        </main>
+      </div>
+    </div>
+  );
+}

app/(app)/series/[id]/page.tsx

@@ -0,0 +1,56 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { requireAuth } from "@/lib/auth/guards";
+import { prisma } from "@/lib/db";
+import { PageHeader } from "@/components/app/page-header";
+import { SeriesDetailClient } from "@/components/app/series-detail-client";
+import { EpisodeStatusBadge } from "@/components/app/episode-status-badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+export default async function SeriesDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const session = await requireAuth();
+
+  const series = await prisma.series.findUnique({
+    where: { id },
+    include: { episodes: { orderBy: { createdAt: "desc" } } },
+  });
+  if (!series) notFound();
+  if (series.userId !== session.user.id && session.user.role !== "admin") notFound();
+
+  const planned = (series.plan as unknown as { title: string; topic: string; summary: string }[]) ?? [];
+
+  return (
+    <>
+      <Button asChild variant="ghost" size="sm" className="mb-2">
+        <Link href="/series">
+          <ArrowLeft className="h-4 w-4" /> Back to series
+        </Link>
+      </Button>
+      <PageHeader title={series.title} description={series.description ?? undefined} />
+
+      <h2 className="mb-3 text-sm font-semibold text-muted-foreground">Planned episodes</h2>
+      <SeriesDetailClient seriesId={series.id} episodes={planned} />
+
+      {series.episodes.length > 0 && (
+        <div className="mt-8">
+          <h2 className="mb-3 text-sm font-semibold text-muted-foreground">Generated</h2>
+          <div className="space-y-2">
+            {series.episodes.map((ep) => (
+              <Link key={ep.id} href={`/episodes/${ep.id}`}>
+                <Card className="transition-shadow hover:shadow-md">
+                  <CardContent className="flex items-center justify-between py-3">
+                    <span className="truncate font-medium">{ep.title}</span>
+                    <EpisodeStatusBadge status={ep.status} />
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

app/(app)/series/actions.ts

@@ -0,0 +1,101 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+import type { Prisma } from "@prisma/client";
+import { getServerSession } from "@/lib/auth/guards";
+import { prisma } from "@/lib/db";
+import { subjectHasFeature } from "@/lib/billing/subscription";
+import { enforceLimit, LimitExceededError } from "@/lib/usage/limits";
+import { enqueueEpisodeGeneration } from "@/lib/queue/pgboss";
+import { FORMAT_SPEAKERS } from "@/lib/episodes/options";
+import { DEFAULT_VOICE_IDS, VOICE_CATALOG } from "@/lib/ai/voices";
+
+const createSchema = z.object({
+  theme: z.string().min(5).max(500),
+  count: z.number().int().min(2).max(12),
+  tone: z.string().min(1),
+  audience: z.string().max(200).optional(),
+  language: z.string().min(2).max(5),
+});
+
+export async function createSeriesAction(
+  input: z.infer<typeof createSchema>
+): Promise<{ ok: boolean; error?: string; seriesId?: string }> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+  if (!(await subjectHasFeature(session.user.id, "series_generator", session.session.activeOrganizationId))) {
+    return { ok: false, error: "The series generator requires the Pro plan." };
+  }
+  const parsed = createSchema.safeParse(input);
+  if (!parsed.success) return { ok: false, error: parsed.error.issues[0]?.message ?? "Invalid input." };
+
+  const { planSeason } = await import("@/lib/ai/series");
+  const { plan } = await planSeason(parsed.data);
+
+  const series = await prisma.series.create({
+    data: {
+      userId: session.user.id,
+      organizationId: session.session.activeOrganizationId ?? undefined,
+      title: plan.title,
+      description: plan.description,
+      plannedCount: plan.episodes.length,
+      plan: plan.episodes as unknown as Prisma.InputJsonValue,
+    },
+  });
+  revalidatePath("/series");
+  return { ok: true, seriesId: series.id };
+}
+
+export async function generateFromSeriesAction(
+  seriesId: string,
+  index: number
+): Promise<{ ok: boolean; error?: string; episodeId?: string }> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+
+  const series = await prisma.series.findUnique({ where: { id: seriesId } });
+  if (!series || series.userId !== session.user.id) return { ok: false, error: "Not allowed." };
+
+  const episodes = (series.plan as unknown as { title: string; topic: string; summary: string }[]) ?? [];
+  const item = episodes[index];
+  if (!item) return { ok: false, error: "Episode not found in plan." };
+
+  try {
+    await enforceLimit(session.user.id, "script", session.session.activeOrganizationId);
+    await enforceLimit(session.user.id, "audio", session.session.activeOrganizationId);
+  } catch (err) {
+    if (err instanceof LimitExceededError) {
+      return { ok: false, error: `Monthly ${err.check.metric} limit reached.` };
+    }
+    throw err;
+  }
+
+  const speakers = FORMAT_SPEAKERS.SOLO.map((s, i) => ({
+    speakerKey: s.speakerKey,
+    displayName: s.defaultName,
+    elevenVoiceId: DEFAULT_VOICE_IDS[s.speakerKey] ?? VOICE_CATALOG[i % VOICE_CATALOG.length].id,
+  }));
+
+  const episode = await prisma.episode.create({
+    data: {
+      userId: session.user.id,
+      organizationId: series.organizationId ?? undefined,
+      seriesId: series.id,
+      title: item.title,
+      topic: item.topic,
+      tone: "Conversational",
+      format: "SOLO",
+      language: "en",
+      targetLengthMin: 10,
+      status: "QUEUED",
+      stage: "Queued for generation",
+      speakers: { create: speakers },
+      jobs: { create: { type: "full", status: "queued" } },
+    },
+  });
+  await enqueueEpisodeGeneration({ episodeId: episode.id, type: "full" });
+
+  revalidatePath(`/series/${seriesId}`);
+  return { ok: true, episodeId: episode.id };
+}

app/(app)/series/page.tsx

@@ -0,0 +1,76 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ListMusic } from "lucide-react";
+import { requireAuth } from "@/lib/auth/guards";
+import { subjectHasFeature } from "@/lib/billing/subscription";
+import { prisma } from "@/lib/db";
+import { PageHeader } from "@/components/app/page-header";
+import { UpgradeGate } from "@/components/app/upgrade-gate";
+import { SeriesCreateForm } from "@/components/app/series-create-form";
+import { Card, CardContent } from "@/components/ui/card";
+
+export const metadata: Metadata = { title: "Series" };
+
+export default async function SeriesPage() {
+  const session = await requireAuth();
+  const allowed = await subjectHasFeature(
+    session.user.id,
+    "series_generator",
+    session.session.activeOrganizationId
+  );
+
+  if (!allowed) {
+    return (
+      <>
+        <PageHeader title="Series generator" description="Plan a whole season at once." />
+        <UpgradeGate
+          title="Series generator is a Pro feature"
+          description="Upgrade to Pro to plan entire seasons and batch-generate episodes."
+          requiredPlan="Pro"
+        />
+      </>
+    );
+  }
+
+  const series = await prisma.series.findMany({
+    where: { userId: session.user.id },
+    orderBy: { createdAt: "desc" },
+    include: { _count: { select: { episodes: true } } },
+  });
+
+  return (
+    <>
+      <PageHeader
+        title="Series generator"
+        description="Plan a cohesive season, then generate each episode."
+      />
+
+      <SeriesCreateForm />
+
+      {series.length > 0 && (
+        <div className="mt-8 space-y-3">
+          <h2 className="text-sm font-semibold text-muted-foreground">Your seasons</h2>
+          <div className="grid gap-3 sm:grid-cols-2">
+            {series.map((s) => (
+              <Link key={s.id} href={`/series/${s.id}`}>
+                <Card className="transition-shadow hover:shadow-md">
+                  <CardContent className="flex items-center gap-3 py-4">
+                    <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-brand/10 text-brand">
+                      <ListMusic className="h-5 w-5" />
+                    </span>
+                    <div className="min-w-0">
+                      <p className="truncate font-medium">{s.title}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {s.plannedCount} planned · {s._count.episodes} generated
+                      </p>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

app/(app)/settings/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import { requireAuth } from "@/lib/auth/guards";
+import { PageHeader } from "@/components/app/page-header";
+import { SettingsClient } from "@/components/app/settings-client";
+
+export const metadata: Metadata = { title: "Settings" };
+
+export default async function SettingsPage() {
+  const session = await requireAuth();
+  return (
+    <>
+      <PageHeader title="Settings" description="Manage your account." />
+      <SettingsClient name={session.user.name} email={session.user.email} />
+    </>
+  );
+}

app/(app)/team/actions.ts

@@ -0,0 +1,51 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+import { getServerSession } from "@/lib/auth/guards";
+import { prisma } from "@/lib/db";
+
+const brandingSchema = z.object({
+  brandName: z.string().max(60).optional(),
+  primaryColor: z
+    .string()
+    .regex(/^#([0-9a-fA-F]{6})$/, "Use a hex colour like #7c3aed")
+    .optional()
+    .or(z.literal("")),
+  logoUrl: z.string().url().optional().or(z.literal("")),
+  removePoweredBy: z.boolean().optional(),
+});
+
+export async function saveBrandingAction(
+  organizationId: string,
+  data: z.infer<typeof brandingSchema>
+): Promise<{ ok: boolean; error?: string }> {
+  const session = await getServerSession();
+  if (!session) return { ok: false, error: "You must be signed in." };
+
+  const member = await prisma.member.findFirst({
+    where: { organizationId, userId: session.user.id },
+    select: { role: true },
+  });
+  if (!member || !["owner", "admin"].includes(member.role)) {
+    return { ok: false, error: "Only workspace owners can edit branding." };
+  }
+
+  const parsed = brandingSchema.safeParse(data);
+  if (!parsed.success) return { ok: false, error: parsed.error.issues[0]?.message ?? "Invalid input." };
+
+  const payload = {
+    brandName: parsed.data.brandName || null,
+    primaryColor: parsed.data.primaryColor || null,
+    logoUrl: parsed.data.logoUrl || null,
+    removePoweredBy: parsed.data.removePoweredBy ?? false,
+  };
+
+  await prisma.orgBranding.upsert({
+    where: { organizationId },
+    create: { organizationId, ...payload },
+    update: payload,
+  });
+  revalidatePath("/team");
+  return { ok: true };
+}

app/(app)/team/page.tsx

@@ -0,0 +1,68 @@
+import type { Metadata } from "next";
+import { requireAuth } from "@/lib/auth/guards";
+import { getEffectivePlan, subjectHasFeature } from "@/lib/billing/subscription";
+import { prisma } from "@/lib/db";
+import { PageHeader } from "@/components/app/page-header";
+import { UpgradeGate } from "@/components/app/upgrade-gate";
+import { TeamClient } from "@/components/app/team-client";
+
+export const metadata: Metadata = { title: "Team" };
+
+export default async function TeamPage() {
+  const session = await requireAuth();
+  const allowed = await subjectHasFeature(
+    session.user.id,
+    "team_workspace",
+    session.session.activeOrganizationId
+  );
+
+  if (!allowed) {
+    return (
+      <>
+        <PageHeader title="Team workspace" description="Collaborate with your team." />
+        <UpgradeGate
+          title="Team workspaces are an Agency feature"
+          description="Upgrade to Agency for a 5-seat workspace, white-label mode, and custom branding."
+          requiredPlan="Agency"
+        />
+      </>
+    );
+  }
+
+  const { plan } = await getEffectivePlan(session.user.id, session.session.activeOrganizationId);
+  const membership = await prisma.member.findFirst({
+    where: { userId: session.user.id },
+    include: {
+      organization: {
+        include: {
+          branding: true,
+          members: { include: { user: { select: { name: true, email: true } } } },
+        },
+      },
+    },
+  });
+  const org = membership?.organization ?? null;
+  const members =
+    org?.members.map((m) => ({ id: m.id, name: m.user.name, email: m.user.email, role: m.role })) ?? [];
+
+  return (
+    <>
+      <PageHeader title="Team workspace" description="Members, seats, and white-label branding." />
+      <TeamClient
+        org={org ? { id: org.id, name: org.name } : null}
+        members={members}
+        branding={
+          org?.branding
+            ? {
+                brandName: org.branding.brandName,
+                primaryColor: org.branding.primaryColor,
+                logoUrl: org.branding.logoUrl,
+                removePoweredBy: org.branding.removePoweredBy,
+              }
+            : null
+        }
+        seats={plan.limits.seats}
+      />
+    </>
+  );
+}

app/(app)/usage/page.tsx

@@ -0,0 +1,97 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { FileText, AudioLines, ImageIcon, Repeat, Infinity as InfinityIcon } from "lucide-react";
+import { requireAuth } from "@/lib/auth/guards";
+import { getEffectivePlan } from "@/lib/billing/subscription";
+import { getUsageSummary } from "@/lib/usage/meter";
+import { PageHeader } from "@/components/app/page-header";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { UNLIMITED, type UsageMetric } from "@/lib/billing/plans";
+
+export const metadata: Metadata = { title: "Usage" };
+
+const METRICS: { key: UsageMetric; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
+  { key: "script", label: "Scripts", icon: FileText },
+  { key: "audio", label: "Audio generations", icon: AudioLines },
+  { key: "art", label: "Cover art", icon: ImageIcon },
+  { key: "repurpose", label: "Repurposed content", icon: Repeat },
+];
+
+function nextResetLabel(): string {
+  const now = new Date();
+  const next = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 1));
+  return next.toLocaleDateString(undefined, { month: "long", day: "numeric" });
+}
+
+export default async function UsagePage() {
+  const session = await requireAuth();
+  const { plan, key, subjectId } = await getEffectivePlan(
+    session.user.id,
+    session.session.activeOrganizationId
+  );
+  const usage = await getUsageSummary(subjectId);
+
+  return (
+    <>
+      <PageHeader
+        title="Usage & limits"
+        description={`Resets on ${nextResetLabel()}.`}
+        action={
+          key !== "agency" ? (
+            <Button asChild>
+              <Link href="/billing">Upgrade plan</Link>
+            </Button>
+          ) : undefined
+        }
+      />
+
+      <div className="mb-6 flex items-center gap-2">
+        <span className="text-sm text-muted-foreground">Current plan</span>
+        <Badge className="capitalize">{plan.name}</Badge>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {METRICS.map((m) => {
+          const used = usage[m.key];
+          const limit = plan.limits[m.key];
+          const unlimited = limit === UNLIMITED;
+          const pct = unlimited ? 0 : Math.min(100, Math.round((used / Math.max(1, limit)) * 100));
+          const atLimit = !unlimited && used >= limit;
+          return (
+            <Card key={m.key}>
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                  <m.icon className="h-4 w-4" /> {m.label}
+                </CardTitle>
+                {atLimit && <Badge variant="warning">Limit reached</Badge>}
+              </CardHeader>
+              <CardContent className="space-y-2">
+                <div className="flex items-baseline justify-between">
+                  <span className="font-display text-3xl font-extrabold tracking-tight">{used}</span>
+                  <span className="flex items-center gap-1 text-sm text-muted-foreground">
+                    {unlimited ? (
+                      <>
+                        <InfinityIcon className="h-4 w-4" /> Unlimited
+                      </>
+                    ) : (
+                      <>of {limit}</>
+                    )}
+                  </span>
+                </div>
+                {!unlimited && (
+                  <Progress
+                    value={pct}
+                    indicatorClassName={atLimit ? "bg-warning" : undefined}
+                  />
+                )}
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </>
+  );
+}