feat: design system overhaul — sidebar, AI chats, settings, brainstorm, color cleanup

- Sidebar: dynamic brand-accent colors, brainstorm section restyled
- AI chat general: popup panel with expand/collapse, hides when contextual AI open
- AI chat contextual: tabs reordered (Actions first), X close button, height fix
- Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.)
- Global color cleanup: emerald/orange hardcoded → brand-accent dynamic
- Brainstorm page: orange → brand-accent throughout
- PageEntry animation component added to key pages
- Floating AI button: bg-brand-accent instead of hardcoded black
- i18n: all 15 locales updated with new AI/billing keys
- Billing: freemium quota tracking, BYOK, stripe subscription scaffolding
- Admin: integrated into new design
- AGENTS.md + CLAUDE.md project rules added

memento-note/app/api/billing/create-checkout/route.ts

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { auth } from '@/auth';
+import { stripe } from '@/lib/stripe';
+import { resolvePriceId } from '@/lib/billing/stripe-prices';
+import { prisma } from '@/lib/prisma';
+import { z } from 'zod';
+
+const bodySchema = z.object({
+  tier: z.enum(['PRO', 'BUSINESS']),
+  interval: z.enum(['month', 'year']),
+});
+
+export async function POST(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id || !session.user.email) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const parsed = bodySchema.safeParse(await req.json());
+  if (!parsed.success) {
+    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
+  }
+
+  const { tier, interval } = parsed.data;
+  const userId = session.user.id;
+  const userEmail = session.user.email;
+
+  try {
+    const priceId = resolvePriceId(tier, interval);
+
+    const subscription = await prisma.subscription.findUnique({ where: { userId } });
+    let customerId = subscription?.stripeCustomerId ?? undefined;
+
+    if (!customerId) {
+      const customer = await stripe.customers.create({
+        email: userEmail,
+        metadata: { userId },
+      });
+      customerId = customer.id;
+    }
+
+    const origin = req.headers.get('origin') ?? process.env.NEXTAUTH_URL ?? 'http://localhost:3000';
+
+    const sessionParams = {
+      customer: customerId,
+      mode: 'subscription' as const,
+      line_items: [{ price: priceId, quantity: 1 }],
+      ui_mode: 'embedded',
+      return_url: `${origin}/settings/billing?session_id={CHECKOUT_SESSION_ID}`,
+      metadata: { userId, tier },
+      subscription_data: { metadata: { userId, tier } },
+      customer_update: { address: 'auto' },
+    };
+    const checkoutSession = await stripe.checkout.sessions.create(sessionParams as any);
+
+    if (checkoutSession.client_secret) {
+      return NextResponse.json({
+        clientSecret: checkoutSession.client_secret,
+        sessionId: checkoutSession.id,
+      });
+    }
+
+    return NextResponse.json({ url: checkoutSession.url });
+  } catch (error) {
+    console.error('[billing/create-checkout]', error);
+    return NextResponse.json({ error: 'Failed to create checkout session' }, { status: 500 });
+  }
+}

memento-note/app/api/billing/portal/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { auth } from '@/auth';
+import { stripe } from '@/lib/stripe';
+import { prisma } from '@/lib/prisma';
+
+export async function POST(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const userId = session.user.id;
+
+  try {
+    const subscription = await prisma.subscription.findUnique({ where: { userId } });
+    if (!subscription?.stripeCustomerId) {
+      return NextResponse.json({ error: 'No active subscription found' }, { status: 404 });
+    }
+
+    const origin = req.headers.get('origin') ?? process.env.NEXTAUTH_URL ?? 'http://localhost:3000';
+
+    const portalSession = await stripe.billingPortal.sessions.create({
+      customer: subscription.stripeCustomerId,
+      return_url: `${origin}/settings/billing`,
+    });
+
+    return NextResponse.json({ url: portalSession.url });
+  } catch (error) {
+    console.error('[billing/portal]', error);
+    return NextResponse.json({ error: 'Failed to create portal session' }, { status: 500 });
+  }
+}

memento-note/app/api/billing/status/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse } from 'next/server';
+import { auth } from '@/auth';
+import { getUserInfo, getEffectiveTier } from '@/lib/entitlements';
+
+export async function GET() {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const userId = session.user.id;
+
+  try {
+    const { tier, status, currentPeriodEnd } = await getUserInfo(userId);
+    const effectiveTier = await getEffectiveTier(userId);
+
+    const { prisma } = await import('@/lib/prisma');
+    const subscription = await prisma.subscription.findUnique({ where: { userId } });
+
+    return NextResponse.json({
+      tier,
+      effectiveTier,
+      status,
+      currentPeriodEnd: currentPeriodEnd ?? null,
+      cancelAtPeriodEnd: subscription?.cancelAtPeriodEnd ?? false,
+      hasStripeSubscription: !!subscription?.stripeSubscriptionId,
+    });
+  } catch (error) {
+    console.error('[billing/status]', error);
+    return NextResponse.json({ error: 'Failed to fetch billing status' }, { status: 500 });
+  }
+}

memento-note/app/api/billing/webhook/route.ts

@@ -0,0 +1,98 @@
+import { headers } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+import { stripe } from '@/lib/stripe';
+import {
+  syncSubscriptionFromStripe,
+  handleSubscriptionDeleted,
+  resolveUserIdFromStripeEvent,
+} from '@/lib/billing/sync-subscription-from-stripe';
+import { prisma } from '@/lib/prisma';
+import type Stripe from 'stripe';
+
+export const runtime = 'nodejs';
+
+export async function POST(req: NextRequest) {
+  const body = await req.text();
+  const headersList = await headers();
+  const sig = headersList.get('stripe-signature');
+
+  if (!sig) {
+    return NextResponse.json({ error: 'Missing stripe-signature header' }, { status: 400 });
+  }
+
+  if (!process.env.STRIPE_WEBHOOK_SECRET) {
+    console.error('[billing/webhook] STRIPE_WEBHOOK_SECRET not configured');
+    return NextResponse.json({ error: 'Webhook not configured' }, { status: 500 });
+  }
+
+  let event: Stripe.Event;
+  try {
+    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET);
+  } catch (err) {
+    console.error('[billing/webhook] Signature verification failed:', err);
+    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
+  }
+
+  try {
+    switch (event.type) {
+      case 'checkout.session.completed': {
+        const session = event.data.object as Stripe.Checkout.Session;
+        if (session.mode === 'subscription' && session.subscription) {
+          const subscriptionId = typeof session.subscription === 'string'
+            ? session.subscription
+            : session.subscription.id;
+          const subscription = await stripe.subscriptions.retrieve(subscriptionId);
+          const userId = (session.metadata?.userId as string | undefined)
+            ?? (subscription.metadata?.userId as string | undefined);
+          if (userId) {
+            await syncSubscriptionFromStripe(subscription, userId);
+          } else {
+            console.warn('[billing/webhook] checkout.session.completed: no userId in metadata', session.id);
+          }
+        }
+        break;
+      }
+
+      case 'customer.subscription.created':
+      case 'customer.subscription.updated': {
+        const subscription = event.data.object as Stripe.Subscription;
+        const userId = await resolveUserIdFromStripeEvent(subscription);
+        if (userId) {
+          await syncSubscriptionFromStripe(subscription, userId);
+        } else {
+          console.warn('[billing/webhook] subscription event: no userId found', subscription.id);
+        }
+        break;
+      }
+
+      case 'customer.subscription.deleted': {
+        const subscription = event.data.object as Stripe.Subscription;
+        await handleSubscriptionDeleted(subscription);
+        break;
+      }
+
+      case 'invoice.payment_failed': {
+        const invoice = event.data.object as Stripe.Invoice & { subscription?: string | { id: string } };
+        if (invoice.subscription) {
+          const subscriptionId = typeof invoice.subscription === 'string'
+            ? invoice.subscription
+            : invoice.subscription.id;
+          const subscription = await stripe.subscriptions.retrieve(subscriptionId);
+          const userId = await resolveUserIdFromStripeEvent(subscription);
+          if (userId) {
+            await syncSubscriptionFromStripe(subscription, userId);
+          }
+        }
+        break;
+      }
+
+      default:
+        break;
+    }
+
+    return NextResponse.json({ received: true });
+  } catch (error) {
+    console.error('[billing/webhook] Handler error:', error);
+    return NextResponse.json({ error: 'Webhook handler failed' }, { status: 500 });
+  }
+}