@cogito.ai/cli 0.4.2 → 0.4.4

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/pricing/page.tsx

@@ -0,0 +1,120 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardFooter,
+} from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { useSubscriptionPlans, useUserSubscription } from '@/features/subscription/hooks'
+import { createBrowserClient } from '@supabase/ssr'
+
+export default function PricingPage() {
+  const t = useTranslations('pricing')
+  const router = useRouter()
+  const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly')
+
+  const { data: plans, isLoading: plansLoading } = useSubscriptionPlans()
+  const [user, setUser] = useState<{ id: string } | null>(null)
+
+  // Fetch current user
+  useState(() => {
+    const supabase = createBrowserClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    )
+    supabase.auth.getUser().then(({ data }) => {
+      if (data.user) {
+        setUser({ id: data.user.id })
+      }
+    })
+  })
+
+  const { data: currentSubscription } = useUserSubscription(user?.id || '')
+
+  const handleSelectPlan = (planCode: string) => {
+    router.push(`/payment/checkout?plan=${planCode}&cycle=${billingCycle}`)
+  }
+
+  if (plansLoading) {
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-10">
+        <div className="flex justify-center py-20">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto max-w-6xl px-4 py-10">
+      <div className="text-center mb-10">
+        <h1 className="text-3xl font-bold mb-4">{t('title')}</h1>
+        <p className="text-muted-foreground">{t('description')}</p>
+      </div>
+
+      <Tabs
+        value={billingCycle}
+        onValueChange={(v) => setBillingCycle(v as 'monthly' | 'yearly')}
+        className="w-full max-w-md mx-auto mb-10"
+      >
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="monthly">{t('monthly')}</TabsTrigger>
+          <TabsTrigger value="yearly">{t('yearly')}</TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {plans?.map((plan) => {
+          const price = billingCycle === 'monthly' ? plan.price_monthly : plan.price_yearly
+          const isCurrentPlan = currentSubscription?.plan_id === plan.id
+
+          return (
+            <Card
+              key={plan.id}
+              className={isCurrentPlan ? 'border-primary ring-1 ring-primary' : ''}
+            >
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>{plan.plan_name}</CardTitle>
+                  {isCurrentPlan && <Badge>{t('currentPlan')}</Badge>}
+                  {plan.is_featured && <Badge variant="secondary">{t('popular')}</Badge>}
+                </div>
+                <CardDescription>{plan.description}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="text-3xl font-bold">
+                  {price === 0 ? t('free') : `¥${(price / 100).toFixed(2)}`}
+                  {price > 0 && (
+                    <span className="text-sm font-normal text-muted-foreground ml-1">
+                      /{billingCycle === 'monthly' ? t('perMonth') : t('perYear')}
+                    </span>
+                  )}
+                </div>
+              </CardContent>
+              <CardFooter>
+                {isCurrentPlan ? (
+                  <Button variant="outline" className="w-full" disabled>
+                    {t('currentPlan')}
+                  </Button>
+                ) : (
+                  <Button className="w-full" onClick={() => handleSelectPlan(plan.plan_code)}>
+                    {price === 0 ? t('getStarted') : t('upgrade')}
+                  </Button>
+                )}
+              </CardFooter>
+            </Card>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/settings/layout.tsx

@@ -1,9 +1,52 @@
+'use client'
+
 import { ReactNode } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { User, CreditCard } from 'lucide-react'
+import { cn } from '@/lib/utils'
 
 export default function SettingsLayout({ children }: { children: ReactNode }) {
+  const t = useTranslations('settings')
+  const pathname = usePathname()
+
+  const navItems = [
+    { href: '/settings/profile', label: t('profileTitle'), icon: User },
+    { href: '/settings/subscription', label: t('subscriptionTitle'), icon: CreditCard },
+  ]
+
   return (
-    <div className="container mx-auto max-w-4xl px-4 py-10">
-      {children}
+    <div className="container mx-auto max-w-6xl px-4 py-10">
+      <div className="flex flex-col gap-8 md:flex-row">
+        {/* Sidebar Navigation */}
+        <aside className="w-full md:w-64 flex-shrink-0">
+          <nav className="space-y-1">
+            {navItems.map((item) => {
+              const isActive = pathname === item.href || pathname.startsWith(item.href + '/')
+              const Icon = item.icon
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={cn(
+                    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+                  )}
+                >
+                  <Icon className="h-4 w-4" />
+                  {item.label}
+                </Link>
+              )
+            })}
+          </nav>
+        </aside>
+
+        {/* Content */}
+        <main className="flex-1 min-w-0">{children}</main>
+      </div>
     </div>
   )
 }

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/settings/profile/page.tsx

@@ -7,11 +7,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 
-export default async function ProfilePage({
-  params,
-}: {
-  params: Promise<{ locale: string }>
-}) {
+export default async function ProfilePage({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
   const user = await getCurrentUser()
 
@@ -49,9 +45,7 @@ export default async function ProfilePage({
               <p className="text-sm text-muted-foreground">{email}</p>
             </div>
           </div>
-          <p className="text-sm text-muted-foreground">
-            Avatar upload feature coming soon.
-          </p>
+          <p className="text-sm text-muted-foreground">Avatar upload feature coming soon.</p>
         </CardContent>
       </Card>
 

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/settings/subscription/page.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Progress } from '@/components/ui/progress'
+import { useUserSubscription, useUserPayments } from '@/features/subscription/hooks'
+import { createBrowserClient } from '@supabase/ssr'
+import type { Payment } from '@/features/subscription/types'
+
+export default function SubscriptionPage() {
+  const t = useTranslations('subscription')
+  const router = useRouter()
+  const [userId, setUserId] = useState<string | null>(null)
+
+  useEffect(() => {
+    const supabase = createBrowserClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    )
+    supabase.auth.getUser().then(({ data }) => {
+      if (data.user) {
+        setUserId(data.user.id)
+      }
+    })
+  }, [])
+
+  const { data: subscription } = useUserSubscription(userId || '')
+  const { data: payments } = useUserPayments(userId || '')
+
+  const handleCancel = async () => {
+    if (!userId) return
+    const supabase = createBrowserClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    )
+    await supabase
+      .from('user_subscriptions')
+      .update({ cancel_at_period_end: true })
+      .eq('user_id', userId)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">{t('title')}</h1>
+        <p className="text-muted-foreground">{t('description')}</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('currentPlan')}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {subscription ? (
+            <>
+              <div className="flex items-center justify-between">
+                <span className="font-medium">{t('status')}</span>
+                <Badge variant={subscription.status === 'active' ? 'default' : 'secondary'}>
+                  {t(subscription.status)}
+                </Badge>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="font-medium">{t('billingCycle')}</span>
+                <span>{t(subscription.billing_cycle)}</span>
+              </div>
+              {subscription.current_period_end && (
+                <div className="flex items-center justify-between">
+                  <span className="font-medium">{t('expiresOn')}</span>
+                  <span>{new Date(subscription.current_period_end).toLocaleDateString()}</span>
+                </div>
+              )}
+              {!subscription.cancel_at_period_end && (
+                <Button variant="outline" onClick={handleCancel}>
+                  {t('cancelRenewal')}
+                </Button>
+              )}
+              {subscription.cancel_at_period_end && (
+                <p className="text-sm text-muted-foreground">{t('cancelledAtPeriodEnd')}</p>
+              )}
+            </>
+          ) : (
+            <div className="text-center py-6">
+              <p className="text-muted-foreground mb-4">{t('noActiveSubscription')}</p>
+              <Button onClick={() => router.push('/pricing')}>{t('upgradeNow')}</Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('paymentHistory')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {payments && payments.length > 0 ? (
+            <div className="space-y-3">
+              {payments.map((payment: Payment) => (
+                <div
+                  key={payment.id}
+                  className="flex items-center justify-between border-b py-3 last:border-0"
+                >
+                  <div>
+                    <p className="font-medium">{payment.order_no}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {new Date(payment.created_at).toLocaleDateString()}
+                    </p>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-medium">¥{(payment.amount / 100).toFixed(2)}</p>
+                    <Badge variant={payment.status === 'paid' ? 'default' : 'secondary'}>
+                      {t(payment.status)}
+                    </Badge>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-muted-foreground text-center py-6">{t('noPayments')}</p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/about/page.tsx

@@ -1,10 +1,6 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 
-export default async function AboutPage({
-  params,
-}: {
-  params: Promise<{ locale: string }>
-}) {
+export default async function AboutPage({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
 
   return (
@@ -16,7 +12,8 @@ export default async function AboutPage({
         </CardHeader>
         <CardContent>
           <p className="text-muted-foreground">
-            This page is a placeholder. Replace it with your actual about information before shipping.
+            This page is a placeholder. Replace it with your actual about information before
+            shipping.
           </p>
         </CardContent>
       </Card>

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/globals.css

@@ -1,12 +1,24 @@
 @import "../../styles/tw-animate.css";
 @import "../../styles/shadcn-tailwind.css";
 @import "tailwindcss";
+@import "../../styles/tokens.css";
 
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-    --font-heading: var(--font-sans);
+    --font-heading: var(--font-geist, var(--font-sans));
     --font-sans: var(--font-sans);
+
+    /* Semantic tokens registered as Tailwind utilities */
+    --color-surface: var(--color-surface);
+    --color-surface-elevated: var(--color-surface-elevated);
+    --color-muted-custom: var(--color-muted);
+    --color-muted-foreground-custom: var(--color-muted-foreground);
+    --color-border-custom: var(--color-border);
+    --color-primary-custom: var(--color-primary);
+    --color-primary-foreground-custom: var(--color-primary-foreground);
+
+    /* shadcn/ui tokens */
     --color-sidebar-ring: var(--sidebar-ring);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -119,11 +131,11 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
-    }
+  }
   body {
     @apply bg-background text-foreground;
-    }
+  }
   html {
     @apply font-sans;
-    }
-}
+  }
+}

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/help/page.tsx

@@ -1,10 +1,6 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 
-export default async function HelpPage({
-  params,
-}: {
-  params: Promise<{ locale: string }>
-}) {
+export default async function HelpPage({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
 
   return (

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/layout.tsx

@@ -1,15 +1,17 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { Geist } from 'next/font/google'
 import { NextIntlClientProvider } from 'next-intl'
 import { getMessages } from 'next-intl/server'
 import { notFound } from 'next/navigation'
 import { Toaster } from '@/components/ui/sonner'
+import { ThemeProvider } from 'next-themes'
 import { isLocale } from '@/i18n/config'
 import './globals.css'
 
-const inter = Inter({
+const geist = Geist({
   subsets: ['latin'],
-  variable: '--font-sans',
+  variable: '--font-geist',
+  fallback: ['system-ui', 'sans-serif'],
 })
 
 export const metadata: Metadata = {
@@ -33,11 +35,11 @@ export default async function LocaleLayout({
   const messages = await getMessages()
 
   return (
-    <html lang={locale} suppressHydrationWarning>
-      <body className={`${inter.variable} min-h-screen bg-background font-sans antialiased`}>
-        <NextIntlClientProvider messages={messages}>
-          {children}
-        </NextIntlClientProvider>
+    <html lang={locale} suppressHydrationWarning className={geist.variable}>
+      <body className={`${geist.variable} min-h-screen bg-background font-sans antialiased`}>
+        <ThemeProvider>
+          <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
+        </ThemeProvider>
         <Toaster />
       </body>
     </html>

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/page.tsx

@@ -1,12 +1,28 @@
 import { useTranslations } from 'next-intl'
+import { Header } from '@/components/landing/header'
+import { Hero } from '@/components/landing/hero'
+import { Features } from '@/components/landing/features'
+import { HowItWorks } from '@/components/landing/how-it-works'
+import { PricingTeaser } from '@/components/landing/pricing-teaser'
+import { Footer } from '@/components/landing/footer'
 
-export default function HomePage() {
-  const t = useTranslations('home')
+export default function HomePage({ params }: { params: Promise<{ locale: string }> }) {
+  return <HomePageContent params={params} />
+}
+
+async function HomePageContent({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-24">
-      <h1 className="text-4xl font-bold">{t('title')}</h1>
-      <p className="mt-4 text-gray-600">{t('description')}</p>
-    </main>
+    <div className="flex min-h-screen flex-col">
+      <Header locale={locale} />
+      <main className="flex-1">
+        <Hero locale={locale} />
+        <Features />
+        <HowItWorks />
+        <PricingTeaser />
+      </main>
+      <Footer locale={locale} />
+    </div>
   )
 }

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/privacy/page.tsx

@@ -1,10 +1,6 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 
-export default async function PrivacyPage({
-  params,
-}: {
-  params: Promise<{ locale: string }>
-}) {
+export default async function PrivacyPage({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
 
   return (
@@ -16,7 +12,8 @@ export default async function PrivacyPage({
         </CardHeader>
         <CardContent>
           <p className="text-muted-foreground">
-            This template page is a placeholder. Replace it with your actual privacy policy before shipping.
+            This template page is a placeholder. Replace it with your actual privacy policy before
+            shipping.
           </p>
         </CardContent>
       </Card>

package/dist/templates/web-nextjs/apps/web/src/app/[locale]/terms/page.tsx

@@ -1,10 +1,6 @@
 import Link from 'next/link'
 
-export default async function TermsPage({
-  params,
-}: {
-  params: Promise<{ locale: string }>
-}) {
+export default async function TermsPage({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
 
   return (

package/dist/templates/web-nextjs/apps/web/src/app/api/payments/alipay/create/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createAlipayPagePay, createAlipayWapPay } from '@/features/subscription/alipay/server'
+import { getPaymentById } from '@/features/subscription/payment-service'
+
+export async function POST(req: NextRequest) {
+  try {
+    const { paymentId } = (await req.json()) as { paymentId: number }
+
+    const payment = await getPaymentById(paymentId)
+    if (!payment) {
+      return NextResponse.json({ error: 'Payment not found' }, { status: 404 })
+    }
+
+    const userAgent = req.headers.get('user-agent') || ''
+    const isMobile = /Mobile|Android|iPhone/i.test(userAgent)
+
+    const notifyUrl = `${process.env.NEXT_PUBLIC_APP_URL}/api/payments/alipay/notify`
+    const returnUrl = `${process.env.NEXT_PUBLIC_APP_URL}/payment/${payment.id}`
+
+    if (isMobile) {
+      const result = await createAlipayWapPay({
+        outTradeNo: payment.order_no,
+        totalAmount: String(payment.amount / 100),
+        subject: 'Subscription',
+        returnUrl,
+        notifyUrl,
+      })
+      return NextResponse.json({ redirectUrl: result.redirectUrl })
+    } else {
+      const result = await createAlipayPagePay({
+        outTradeNo: payment.order_no,
+        totalAmount: String(payment.amount / 100),
+        subject: 'Subscription',
+        returnUrl,
+        notifyUrl,
+      })
+      return NextResponse.json({ formHtml: result.formHtml })
+    }
+  } catch (error) {
+    console.error('Alipay create error:', error)
+    return NextResponse.json({ error: 'Failed to create Alipay payment' }, { status: 500 })
+  }
+}

package/dist/templates/web-nextjs/apps/web/src/app/api/payments/alipay/notify/route.ts

@@ -0,0 +1,105 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { verifyAlipayNotify } from '@/features/subscription/alipay/server'
+import { createAdminClient } from '@/lib/supabase/admin'
+import { getPaymentByOrderNo } from '@/features/subscription/payment-service'
+
+export async function POST(req: NextRequest) {
+  try {
+    const formData = await req.formData()
+    const data: Record<string, unknown> = {}
+    formData.forEach((value, key) => {
+      data[key] = value
+    })
+
+    const isValid = await verifyAlipayNotify(data)
+    if (!isValid) {
+      return new NextResponse('fail', { status: 400 })
+    }
+
+    const outTradeNo = data.out_trade_no as string
+    const tradeStatus = data.trade_status as string
+    const tradeNo = data.trade_no as string
+    const totalAmount = data.total_amount as string
+    const appId = data.app_id as string
+    const sellerId = data.seller_id as string
+
+    // Validate critical business fields against the local order
+    const payment = await getPaymentByOrderNo(outTradeNo)
+    if (!payment) {
+      console.warn(`Alipay notify: payment not found for order ${outTradeNo}`)
+      return new NextResponse('success', { status: 200 })
+    }
+
+    // Verify app_id matches our configured app
+    if (appId !== process.env.ALIPAY_APP_ID) {
+      console.warn(
+        `Alipay notify: app_id mismatch. received=${appId}, expected=${process.env.ALIPAY_APP_ID}`,
+      )
+      return new NextResponse('fail', { status: 400 })
+    }
+
+    // Verify amount matches the local order (convert to cents for comparison)
+    const notifyAmountCents = Math.round(parseFloat(totalAmount) * 100)
+    if (notifyAmountCents !== payment.amount) {
+      console.warn(
+        `Alipay notify: amount mismatch. order=${outTradeNo}, expected=${payment.amount}, received=${notifyAmountCents}`,
+      )
+      return new NextResponse('fail', { status: 400 })
+    }
+
+    // Verify seller_id if configured
+    if (process.env.ALIPAY_SELLER_ID && sellerId !== process.env.ALIPAY_SELLER_ID) {
+      console.warn(`Alipay notify: seller_id mismatch. received=${sellerId}`)
+      return new NextResponse('fail', { status: 400 })
+    }
+
+    if (tradeStatus !== 'TRADE_SUCCESS') {
+      return new NextResponse('success', { status: 200 })
+    }
+
+    // Idempotency: already paid
+    if (payment.status === 'paid') {
+      return new NextResponse('success', { status: 200 })
+    }
+
+    const supabase = createAdminClient()
+
+    // Update payment with provider_trade_no unique constraint check
+    const { error: updateError } = await supabase
+      .from('payments')
+      .update({
+        status: 'paid',
+        provider_trade_no: tradeNo,
+        paid_at: new Date().toISOString(),
+        provider_response: data as Record<string, unknown>,
+      })
+      .eq('order_no', outTradeNo)
+      .eq('status', 'pending')
+
+    if (updateError) {
+      console.error('Alipay notify: failed to update payment', updateError)
+      return new NextResponse('fail', { status: 500 })
+    }
+
+    // Update subscription
+    if (payment.subscription_id) {
+      const now = new Date()
+      const nextMonth = new Date(now)
+      nextMonth.setMonth(nextMonth.getMonth() + 1)
+
+      await supabase
+        .from('user_subscriptions')
+        .update({
+          status: 'active',
+          current_period_start: now.toISOString(),
+          current_period_end: nextMonth.toISOString(),
+        })
+        .eq('id', payment.subscription_id)
+    }
+
+    return new NextResponse('success', { status: 200 })
+  } catch (error) {
+    console.error('Alipay notify error:', error)
+    return new NextResponse('fail', { status: 500 })
+  }
+}