feat(billing): implement robust in-app subscription cancellation & fix CI/CD socket port typo

memento-note/app/(main)/settings/billing/page.tsx

@@ -2,6 +2,8 @@ import { Suspense } from 'react';
 import { Loader2 } from 'lucide-react';
 import { BillingPlans } from '@/components/settings/billing-plans';
 
+export const dynamic = 'force-dynamic';
+
 export const metadata = {
   title: 'Billing',
 };

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

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { auth } from '@/auth';
+import { cancelSubscription } from '@/lib/billing/cancel-subscription';
+
+export const dynamic = 'force-dynamic';
+
+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 result = await cancelSubscription(userId);
+    if (!result.success) {
+      const isNotFound = result.error === 'No active subscription found';
+      return NextResponse.json(
+        { error: result.error },
+        { status: isNotFound ? 404 : 400 }
+      );
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('[billing/cancel] Route handler crash:', error);
+    return NextResponse.json({ error: 'Failed to cancel subscription' }, { status: 500 });
+  }
+}

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

@@ -31,21 +31,41 @@ export async function POST(req: NextRequest) {
     const subscription = await prisma.subscription.findUnique({ where: { userId } });
     let customerId = subscription?.stripeCustomerId ?? undefined;
 
+    if (customerId && customerId.startsWith('cus_mock')) {
+      customerId = undefined;
+    }
+
     if (!customerId) {
       const customer = await stripe.customers.create({
         email: userEmail,
         metadata: { userId },
       });
       customerId = customer.id;
+      
+      // Update DB to save the real Stripe customer ID
+      await prisma.subscription.upsert({
+        where: { userId },
+        update: { stripeCustomerId: customerId },
+        create: {
+          userId,
+          stripeCustomerId: customerId,
+          tier: 'BASIC',
+          status: 'ACTIVE',
+          currentPeriodStart: new Date(),
+          currentPeriodEnd: new Date(Date.now() + 30 * 24 * 3600 * 1000), // temp basic dates
+        }
+      });
     }
 
-    const origin = req.headers.get('origin') ?? process.env.NEXTAUTH_URL ?? 'http://localhost:3000';
+    const host = req.headers.get('x-forwarded-host') ?? req.headers.get('host') ?? 'localhost:3000';
+    const proto = req.headers.get('x-forwarded-proto') ?? 'http';
+    const origin = `${proto}://${host}`;
 
     const sessionParams = {
       customer: customerId,
       mode: 'subscription' as const,
       line_items: [{ price: priceId, quantity: 1 }],
-      ui_mode: 'embedded',
+      ui_mode: 'embedded_page',
       return_url: `${origin}/settings/billing?session_id={CHECKOUT_SESSION_ID}`,
       metadata: { userId, tier },
       subscription_data: { metadata: { userId, tier } },

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

@@ -3,6 +3,8 @@ import { auth } from '@/auth';
 import { stripe } from '@/lib/stripe';
 import { prisma } from '@/lib/prisma';
 
+export const dynamic = 'force-dynamic';
+
 export async function GET(req: NextRequest) {
   const session = await auth();
   if (!session?.user?.id) {

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

@@ -11,13 +11,21 @@ export async function POST(req: NextRequest) {
 
   const userId = session.user.id;
 
+  let action = 'portal';
+  try {
+    const body = await req.json();
+    if (body?.action) action = body.action;
+  } catch (_) {}
+
   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 host = req.headers.get('x-forwarded-host') ?? req.headers.get('host') ?? 'localhost:3000';
+    const proto = req.headers.get('x-forwarded-proto') ?? 'http';
+    const origin = `${proto}://${host}`;
 
     const portalSession = await stripe.billingPortal.sessions.create({
       customer: subscription.stripeCustomerId,

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

@@ -1,20 +1,79 @@
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { auth } from '@/auth';
 import { getUserInfo, getEffectiveTier } from '@/lib/entitlements';
+import { stripe } from '@/lib/stripe';
+import type Stripe from 'stripe';
+import { priceIdToTier } from '@/lib/billing/stripe-prices';
 
-export async function GET() {
+export const dynamic = 'force-dynamic';
+
+export async function GET(req: NextRequest) {
   const session = await auth();
   if (!session?.user?.id) {
     return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
   }
 
   const userId = session.user.id;
+  const { prisma } = await import('@/lib/prisma');
+  
+  const sessionId = req.nextUrl.searchParams.get('session_id');
+
+  if (sessionId && sessionId.startsWith('cs_')) {
+    try {
+      const checkoutSession = await stripe.checkout.sessions.retrieve(sessionId);
+      if (checkoutSession.subscription && checkoutSession.status === 'complete') {
+        const subId = typeof checkoutSession.subscription === 'string' 
+          ? checkoutSession.subscription 
+          : (checkoutSession.subscription as any).id;
+          
+        const sub = await stripe.subscriptions.retrieve(subId);
+        const priceId = sub.items.data[0].price.id;
+        const tier = priceIdToTier(priceId) || (checkoutSession.metadata?.tier as any) || 'PRO';
+
+        const currentPeriodStartTimestamp = 
+          sub.current_period_start ?? 
+          sub.items?.data?.[0]?.current_period_start ?? 
+          sub.start_date ?? 
+          Math.floor(Date.now() / 1000);
+
+        const currentPeriodEndTimestamp = 
+          sub.current_period_end ?? 
+          sub.items?.data?.[0]?.current_period_end ?? 
+          (currentPeriodStartTimestamp + 30 * 24 * 3600);
+        
+        await prisma.subscription.upsert({
+          where: { userId },
+          update: {
+            tier,
+            status: 'ACTIVE',
+            stripeCustomerId: checkoutSession.customer as string,
+            stripeSubscriptionId: sub.id,
+            stripePriceId: priceId,
+            currentPeriodStart: new Date(currentPeriodStartTimestamp * 1000),
+            currentPeriodEnd: new Date(currentPeriodEndTimestamp * 1000),
+            canceledAt: sub.canceled_at ? new Date(sub.canceled_at * 1000) : null,
+            cancelAtPeriodEnd: sub.cancel_at_period_end,
+          },
+          create: {
+            userId,
+            tier,
+            status: 'ACTIVE',
+            stripeCustomerId: checkoutSession.customer as string,
+            stripeSubscriptionId: sub.id,
+            stripePriceId: priceId,
+            currentPeriodStart: new Date(currentPeriodStartTimestamp * 1000),
+            currentPeriodEnd: new Date(currentPeriodEndTimestamp * 1000),
+          },
+        });
+      }
+    } catch (err) {
+      console.error('[billing/status] Failed to sync Stripe session:', err);
+    }
+  }
 
   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({

memento-note/app/api/usage/current/route.ts

@@ -2,6 +2,8 @@ import { NextResponse } from 'next/server';
 import { auth } from '@/auth';
 import { getUserQuotas, getEffectiveTier } from '@/lib/entitlements';
 
+export const dynamic = 'force-dynamic';
+
 export async function GET() {
   const session = await auth();
 

memento-note/app/globals.css

@@ -1210,295 +1210,6 @@ html.font-system * {
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }
 
-/* --- Inline Database Block (US-NEXTGEN-EDITOR) --- */
-.database-block-wrapper {
-  margin: 0.75rem 0;
-}
-
-.database-block__inner {
-  border: 1px solid #e8e6e3;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.6);
-  padding: 1rem 1.1rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-}
-
-.dark .database-block__inner {
-  border-color: rgba(255, 255, 255, 0.08);
-  background: rgba(24, 24, 27, 0.5);
-}
-
-.database-block__header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 0.35rem;
-}
-
-.database-block__title {
-  display: block;
-  font-size: 0.9rem;
-  font-weight: 700;
-  color: var(--color-ink, #1a1a1a);
-}
-
-.database-block__id {
-  display: block;
-  font-size: 0.65rem;
-  font-family: ui-monospace, monospace;
-  opacity: 0.45;
-  margin-top: 0.1rem;
-}
-
-.database-block__hint {
-  font-size: 0.72rem;
-  opacity: 0.55;
-  margin: 0 0 0.85rem;
-}
-
-.database-block__view-toggle {
-  display: inline-flex;
-  padding: 2px;
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.04);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.dark .database-block__view-toggle {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-.database-block__view-toggle button {
-  border: none;
-  background: transparent;
-  font-size: 0.68rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: 0.35rem 0.65rem;
-  border-radius: 6px;
-  cursor: pointer;
-  opacity: 0.65;
-  color: inherit;
-}
-
-.database-block__view-toggle button.is-active {
-  background: white;
-  opacity: 1;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-}
-
-.dark .database-block__view-toggle button.is-active {
-  background: rgba(255, 255, 255, 0.12);
-}
-
-.database-block__table-wrap {
-  overflow-x: auto;
-  border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.dark .database-block__table-wrap {
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-.database-block__table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.8rem;
-}
-
-.database-block__table th {
-  text-align: left;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.65rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  opacity: 0.55;
-  background: rgba(0, 0, 0, 0.02);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-.database-block__table td {
-  padding: 0.55rem 0.75rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
-  vertical-align: top;
-}
-
-.database-block__works-cell {
-  max-width: 220px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  opacity: 0.85;
-}
-
-.database-block__rollup {
-  text-align: right;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-}
-
-.database-block__delete-btn {
-  border: none;
-  background: transparent;
-  font-size: 0.65rem;
-  opacity: 0.45;
-  cursor: pointer;
-  color: #ef4444;
-}
-
-.database-block__delete-btn:hover {
-  opacity: 1;
-}
-
-.database-block__inline-form,
-.database-block__book-form {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top: 1px dashed rgba(0, 0, 0, 0.08);
-}
-
-.database-block__book-form {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.database-block__form-label,
-.database-block__form-heading {
-  font-size: 0.68rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  opacity: 0.55;
-  width: 100%;
-}
-
-.database-block__input {
-  font-size: 0.8rem;
-  padding: 0.45rem 0.65rem;
-  border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background: white;
-  color: inherit;
-}
-
-.dark .database-block__input {
-  background: rgba(0, 0, 0, 0.25);
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-.database-block__primary-btn,
-.database-block__submit {
-  border: none;
-  border-radius: 8px;
-  background: #3b82f6;
-  color: white;
-  font-size: 0.75rem;
-  font-weight: 600;
-  padding: 0.45rem 0.85rem;
-  cursor: pointer;
-}
-
-.database-block__primary-btn:hover,
-.database-block__submit:hover {
-  background: #2563eb;
-}
-
-.database-block__card {
-  position: relative;
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background: white;
-}
-
-.dark .database-block__card {
-  background: rgba(0, 0, 0, 0.2);
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-.database-block__card-delete {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  z-index: 2;
-  border: none;
-  border-radius: 6px;
-  padding: 4px;
-  background: rgba(0, 0, 0, 0.45);
-  color: white;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.database-block__card:hover .database-block__card-delete {
-  opacity: 1;
-}
-
-.database-block__card-cover {
-  aspect-ratio: 4 / 3;
-  overflow: hidden;
-  background: #f4f4f5;
-}
-
-.database-block__card-cover img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.database-block__card-body {
-  padding: 0.55rem 0.65rem 0.65rem;
-}
-
-.database-block__card-title {
-  font-size: 0.78rem;
-  font-weight: 700;
-  line-height: 1.3;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.database-block__tag {
-  font-size: 0.62rem;
-  font-weight: 600;
-  padding: 0.15rem 0.4rem;
-  border-radius: 4px;
-}
-
-.database-block__tag--author {
-  background: rgba(59, 130, 246, 0.12);
-  color: #2563eb;
-}
-
-.database-block__tag--genre {
-  background: rgba(0, 0, 0, 0.06);
-  opacity: 0.75;
-}
-
-.database-block__card-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 140px;
-  border-radius: 10px;
-  border: 2px dashed rgba(0, 0, 0, 0.08);
-  opacity: 0.5;
-  text-align: center;
-  padding: 1rem;
-}
 
 /* --- Drop Indicator Line --- */
 .notion-drop-indicator {
@@ -1622,23 +1333,24 @@ html.font-system * {
 }
 
 /* --- Lists --- */
-.notion-editor-wrapper .ProseMirror ul {
+/* TipTap wraps list content in <p> (block). inside markers force bullet on its own line. */
+.notion-editor-wrapper .ProseMirror ul:not([data-type="taskList"]) {
   list-style-type: disc;
-  list-style-position: inside;
-  padding-inline-start: 0;
+  list-style-position: outside;
+  padding-inline-start: 1.5rem;
   margin: 0.25em 0;
 }
 
 .notion-editor-wrapper .ProseMirror ol {
   list-style-type: decimal;
-  list-style-position: inside;
-  padding-inline-start: 0;
+  list-style-position: outside;
+  padding-inline-start: 1.5rem;
   margin: 0.25em 0;
 }
 
 .notion-editor-wrapper .ProseMirror li>p {
-  margin: 0.1em 0;
-  padding-inline-start: 0.25rem;
+  margin: 0;
+  padding-inline-start: 0;
 }
 
 .notion-editor-wrapper .ProseMirror li>ul,