@cogito.ai/cli 0.3.4 → 0.4.0

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

@@ -6,18 +6,17 @@ import { useParams } from 'next/navigation'
 import { useTranslations } from 'next-intl'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { GalleryVerticalEnd } from 'lucide-react'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from '@/components/ui/field'
 import { signUp } from '@/features/auth'
 import { signUpSchema, type SignUpInput } from '@/lib/validations/auth'
 import type { ActionResult } from '@/core/types/auth'
@@ -29,7 +28,7 @@ export default function SignupPage() {
   const locale = routeParams.locale ?? 'en'
   const [verifyEmail, setVerifyEmail] = useState<string | null>(null)
 
-  const form = useForm<SignUpInput>({
+  const { register, formState: { errors } } = useForm<SignUpInput>({
     resolver: zodResolver(signUpSchema),
     defaultValues: { email: '', password: '', confirmPassword: '' },
   })
@@ -40,111 +39,130 @@ export default function SignupPage() {
   )
 
   useEffect(() => {
-    if (state?.error) {
-      toast.error(state.error)
-    }
-    if (state?.data?.success) {
-      setVerifyEmail(state.data.email)
-    }
+    if (state?.error) toast.error(state.error)
+    if (state?.data?.success) setVerifyEmail(state.data.email)
   }, [state])
 
   if (verifyEmail) {
     return (
-      <div className="flex min-h-screen items-center justify-center px-4 py-12">
-        <div className="w-full max-w-sm space-y-4 text-center">
-          <h1 className="text-2xl font-bold">{t('verifyEmailTitle')}</h1>
-          <p className="text-muted-foreground">
-            {t('verifyEmailMessage', { email: verifyEmail })}
-          </p>
-          <Link href={`/${locale}/login`} className="text-sm underline underline-offset-4">
-            {t('signInLink')}
+      <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+        <div className="flex w-full max-w-sm flex-col gap-6">
+          <Link href={`/${locale}`} className="flex items-center gap-2 self-center font-medium">
+            <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <GalleryVerticalEnd className="size-4" />
+            </div>
+            AgentDock
           </Link>
+          <Card>
+            <CardHeader className="text-center">
+              <CardTitle className="text-xl">{t('verifyEmailTitle')}</CardTitle>
+              <CardDescription>
+                {t('verifyEmailMessage', { email: verifyEmail })}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="text-center">
+                <Link href={`/${locale}/login`} className="underline underline-offset-4 text-sm">
+                  {t('signInLink')}
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
         </div>
       </div>
     )
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center px-4 py-12">
-      <div className="w-full max-w-sm space-y-6">
-        <div className="space-y-2 text-center">
-          <h1 className="text-3xl font-bold">{t('signupTitle')}</h1>
-          <p className="text-muted-foreground">{t('signupSubtitle')}</p>
-        </div>
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        <Link href={`/${locale}`} className="flex items-center gap-2 self-center font-medium">
+          <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
+            <GalleryVerticalEnd className="size-4" />
+          </div>
+          AgentDock
+        </Link>
 
-        <Form {...form}>
-          <form action={formAction} className="space-y-4">
-            <input type="hidden" name="locale" value={locale} />
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('emailLabel')}</FormLabel>
-                  <FormControl>
+        <div className="flex flex-col gap-6">
+          <Card>
+            <CardHeader className="text-center">
+              <CardTitle className="text-xl">{t('signupTitle')}</CardTitle>
+              <CardDescription>{t('signupSubtitle')}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form action={formAction}>
+                <input type="hidden" name="locale" value={locale} />
+                <FieldGroup>
+                  <Field>
+                    <FieldLabel htmlFor="email">{t('emailLabel')}</FieldLabel>
                     <Input
+                      id="email"
                       type="email"
                       placeholder={t('emailPlaceholder')}
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormDescription>{t('emailHelperText')}</FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="password"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('passwordLabel')}</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="password"
-                      placeholder={t('passwordPlaceholder')}
-                      {...field}
+                      autoComplete="email"
+                      {...register('email')}
                     />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="confirmPassword"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('confirmPasswordLabel')}</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="password"
-                      placeholder={t('confirmPasswordPlaceholder')}
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <Button type="submit" className="w-full" disabled={isPending}>
-              {isPending ? '...' : t('signUpButton')}
-            </Button>
-          </form>
-        </Form>
-
-        <p className="text-center text-sm text-muted-foreground">
-          {t('hasAccountText')}{' '}
-          <Link
-            href={`/${locale}/login`}
-            className="underline underline-offset-4 hover:text-primary"
-          >
-            {t('signInLink')}
-          </Link>
-        </p>
+                    {errors.email && (
+                      <FieldDescription className="text-destructive">
+                        {errors.email.message}
+                      </FieldDescription>
+                    )}
+                    <FieldDescription>{t('emailHelperText')}</FieldDescription>
+                  </Field>
+                  <Field className="grid grid-cols-2 gap-4">
+                    <Field>
+                      <FieldLabel htmlFor="password">{t('passwordLabel')}</FieldLabel>
+                      <Input
+                        id="password"
+                        type="password"
+                        placeholder={t('passwordPlaceholder')}
+                        autoComplete="new-password"
+                        {...register('password')}
+                      />
+                      {errors.password && (
+                        <FieldDescription className="text-destructive">
+                          {errors.password.message}
+                        </FieldDescription>
+                      )}
+                    </Field>
+                    <Field>
+                      <FieldLabel htmlFor="confirmPassword">{t('confirmPasswordLabel')}</FieldLabel>
+                      <Input
+                        id="confirmPassword"
+                        type="password"
+                        placeholder={t('confirmPasswordPlaceholder')}
+                        autoComplete="new-password"
+                        {...register('confirmPassword')}
+                      />
+                      {errors.confirmPassword && (
+                        <FieldDescription className="text-destructive">
+                          {errors.confirmPassword.message}
+                        </FieldDescription>
+                      )}
+                    </Field>
+                  </Field>
+                  <Field>
+                    <Button type="submit" className="w-full" disabled={isPending}>
+                      {isPending ? '\u2026' : t('signUpButton')}
+                    </Button>
+                    <FieldDescription className="text-center">
+                      {t('hasAccountText')}{' '}
+                      <Link href={`/${locale}/login`} className="underline underline-offset-4">
+                        {t('signInLink')}
+                      </Link>
+                    </FieldDescription>
+                  </Field>
+                </FieldGroup>
+              </form>
+            </CardContent>
+          </Card>
+          <FieldDescription className="px-6 text-center">
+            {t('termsText')}{' '}
+            <Link href={`/${locale}/terms`} className="underline underline-offset-4">{t('termsLink')}</Link>
+            {' '}{t('andText')}{' '}
+            <Link href={`/${locale}/privacy`} className="underline underline-offset-4">{t('privacyLink')}</Link>.
+          </FieldDescription>
+        </div>
       </div>
     </div>
   )

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

@@ -1,7 +1,12 @@
-import { getTranslations } from 'next-intl/server'
-import { getServerClient } from '@/infra/db/client'
-import { signOut } from '@/features/auth'
-import { Button } from '@/components/ui/button'
+import { AppSidebar } from '@/components/dashboard/app-sidebar'
+import { ChartAreaInteractive } from '@/components/dashboard/chart-area-interactive'
+import { DataTable } from '@/components/dashboard/data-table'
+import { SectionCards } from '@/components/dashboard/section-cards'
+import { SiteHeader } from '@/components/dashboard/site-header'
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+import { getCurrentUser } from '@/features/auth/server'
+
+import data from '@/components/dashboard/data.json'
 
 export default async function DashboardPage({
   params,
@@ -9,34 +14,38 @@ export default async function DashboardPage({
   params: Promise<{ locale: string }>
 }) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'auth' })
-  const supabase = await getServerClient()
-  const {
-    data: { user },
-  } = await supabase.auth.getUser()
+  const user = await getCurrentUser()
+
+  const userInfo = {
+    name: user?.user_metadata?.full_name ?? user?.email?.split('@')[0] ?? 'User',
+    email: user?.email ?? '',
+    avatar: user?.user_metadata?.avatar_url ?? '',
+  }
 
   return (
-    <div className="min-h-screen bg-background">
-      <header className="border-b">
-        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
-          <h1 className="text-xl font-semibold">{t('dashboardTitle')}</h1>
-          <div className="flex items-center gap-4">
-            <span className="text-sm text-muted-foreground">{user?.email}</span>
-            <form action={signOut}>
-              <input type="hidden" name="locale" value={locale} />
-              <Button type="submit" variant="outline" size="sm">
-                {t('signOutButton')}
-              </Button>
-            </form>
+    <SidebarProvider
+      style={
+        {
+          '--sidebar-width': 'calc(var(--spacing) * 72)',
+          '--header-height': 'calc(var(--spacing) * 12)',
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant="inset" user={userInfo} locale={locale} />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              <SectionCards />
+              <div className="px-4 lg:px-6">
+                <ChartAreaInteractive />
+              </div>
+              <DataTable data={data} />
+            </div>
           </div>
         </div>
-      </header>
-
-      <main className="mx-auto max-w-7xl px-4 py-8">
-        <p className="text-muted-foreground">
-          {t('dashboardWelcome', { email: user?.email ?? '' })}
-        </p>
-      </main>
-    </div>
+      </SidebarInset>
+    </SidebarProvider>
   )
 }

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

@@ -1,5 +1,5 @@
 import { redirect } from 'next/navigation'
-import { getServerClient } from '@/infra/db/client'
+import { getCurrentUser } from '@/features/auth/server'
 
 export default async function ProtectedLayout({
   children,
@@ -9,10 +9,7 @@ export default async function ProtectedLayout({
   params: Promise<{ locale: string }>
 }) {
   const { locale } = await params
-  const supabase = await getServerClient()
-  const {
-    data: { user },
-  } = await supabase.auth.getUser()
+  const user = await getCurrentUser()
 
   if (!user) {
     redirect(`/${locale}/login`)

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

@@ -1,12 +1,17 @@
 import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
 import { NextIntlClientProvider } from 'next-intl'
 import { getMessages } from 'next-intl/server'
-import { ThemeProvider } from 'next-themes'
 import { notFound } from 'next/navigation'
 import { Toaster } from '@/components/ui/sonner'
 import { isLocale } from '@/i18n/config'
 import './globals.css'
 
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-sans',
+})
+
 export const metadata: Metadata = {
   title: 'AgentDock Web Template',
   description: 'Generated by AgentDock scaffold platform',
@@ -29,13 +34,11 @@ export default async function LocaleLayout({
 
   return (
     <html lang={locale} suppressHydrationWarning>
-      <body className="min-h-screen bg-background font-sans antialiased">
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-          <NextIntlClientProvider messages={messages}>
-            {children}
-          </NextIntlClientProvider>
-          <Toaster />
-        </ThemeProvider>
+      <body className={`${inter.variable} min-h-screen bg-background font-sans antialiased`}>
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+        <Toaster />
       </body>
     </html>
   )

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

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export default async function PrivacyPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale } = await params
+
+  return (
+    <main className="mx-auto max-w-3xl px-4 py-10">
+      <h1 className="text-2xl font-semibold">Privacy Policy</h1>
+      <p className="mt-4 text-muted-foreground">
+        This template page is a placeholder. Replace it with your actual privacy policy before shipping.
+      </p>
+      <p className="mt-6">
+        <Link href={`/${locale}/signup`} className="underline underline-offset-4">
+          Back to sign up
+        </Link>
+      </p>
+    </main>
+  )
+}

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

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export default async function TermsPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale } = await params
+
+  return (
+    <main className="mx-auto max-w-3xl px-4 py-10">
+      <h1 className="text-2xl font-semibold">Terms of Service</h1>
+      <p className="mt-4 text-muted-foreground">
+        This template page is a placeholder. Replace it with your actual terms before shipping.
+      </p>
+      <p className="mt-6">
+        <Link href={`/${locale}/signup`} className="underline underline-offset-4">
+          Back to sign up
+        </Link>
+      </p>
+    </main>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/app/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server'
+import { defaultLocale } from '@/i18n/config'
+
+/**
+ * Handles GET / — next-intl middleware should redirect to /${defaultLocale}
+ * first, but this route handler is the belt-and-suspenders fallback for edge
+ * cases where the middleware matcher doesn't fire (e.g. Turbopack dev quirks).
+ */
+export function GET(request: Request) {
+  const url = new URL(request.url)
+  url.pathname = `/${defaultLocale}`
+  return NextResponse.redirect(url, { status: 307 })
+}

package/dist/templates/web-nextjs/apps/web/src/components/dashboard/app-sidebar.tsx

@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from "react"
+import {
+  IconCamera,
+  IconChartBar,
+  IconDashboard,
+  IconDatabase,
+  IconFileAi,
+  IconFileDescription,
+  IconFileWord,
+  IconFolder,
+  IconHelp,
+  IconInnerShadowTop,
+  IconListDetails,
+  IconReport,
+  IconSearch,
+  IconSettings,
+  IconUsers,
+} from "@tabler/icons-react"
+
+import { NavDocuments } from "@/components/dashboard/nav-documents"
+import { NavMain } from "@/components/dashboard/nav-main"
+import { NavSecondary } from "@/components/dashboard/nav-secondary"
+import { NavUser } from "@/components/dashboard/nav-user"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+const data = {
+  user: {
+    name: "shadcn",
+    email: "m@example.com",
+    avatar: "/avatars/shadcn.jpg",
+  },
+  navMain: [
+    {
+      title: "Dashboard",
+      url: "#",
+      icon: IconDashboard,
+    },
+    {
+      title: "Lifecycle",
+      url: "#",
+      icon: IconListDetails,
+    },
+    {
+      title: "Analytics",
+      url: "#",
+      icon: IconChartBar,
+    },
+    {
+      title: "Projects",
+      url: "#",
+      icon: IconFolder,
+    },
+    {
+      title: "Team",
+      url: "#",
+      icon: IconUsers,
+    },
+  ],
+  navClouds: [
+    {
+      title: "Capture",
+      icon: IconCamera,
+      isActive: true,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Proposal",
+      icon: IconFileDescription,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Prompts",
+      icon: IconFileAi,
+      url: "#",
+      items: [
+        {
+          title: "Active Proposals",
+          url: "#",
+        },
+        {
+          title: "Archived",
+          url: "#",
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: "Settings",
+      url: "#",
+      icon: IconSettings,
+    },
+    {
+      title: "Get Help",
+      url: "#",
+      icon: IconHelp,
+    },
+    {
+      title: "Search",
+      url: "#",
+      icon: IconSearch,
+    },
+  ],
+  documents: [
+    {
+      name: "Data Library",
+      url: "#",
+      icon: IconDatabase,
+    },
+    {
+      name: "Reports",
+      url: "#",
+      icon: IconReport,
+    },
+    {
+      name: "Word Assistant",
+      url: "#",
+      icon: IconFileWord,
+    },
+  ],
+}
+
+export function AppSidebar({
+  user,
+  locale,
+  ...props
+}: React.ComponentProps<typeof Sidebar> & {
+  user: { name: string; email: string; avatar: string }
+  locale: string
+}) {
+  return (
+    <Sidebar collapsible="offcanvas" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild
+              className="data-[slot=sidebar-menu-button]:p-1.5!"
+            >
+              <a href={`/${locale}/dashboard`}>
+                <IconInnerShadowTop className="size-5!" />
+                <span className="text-base font-semibold">AgentDock</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavDocuments items={data.documents} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={user} locale={locale} />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}