@cogito.ai/cli 0.4.2 → 0.4.3

package/dist/templates/web-nextjs/apps/web/src/components/dashboard/nav-user.tsx

@@ -1,17 +1,9 @@
-"use client"
+'use client'
 
 import Link from 'next/link'
-import {
-  IconDotsVertical,
-  IconLogout,
-  IconUserCircle,
-} from "@tabler/icons-react"
+import { IconDotsVertical, IconLogout, IconUserCircle } from '@tabler/icons-react'
 
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar"
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,13 +12,13 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from '@/components/ui/dropdown-menu'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from "@/components/ui/sidebar"
+} from '@/components/ui/sidebar'
 import { signOut } from '@/features/auth'
 
 export function NavUser({
@@ -57,16 +49,14 @@ export function NavUser({
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs text-muted-foreground">
-                  {user.email}
-                </span>
+                <span className="truncate text-xs text-muted-foreground">{user.email}</span>
               </div>
               <IconDotsVertical className="ml-auto size-4" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
             className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            side={isMobile ? "bottom" : "right"}
+            side={isMobile ? 'bottom' : 'right'}
             align="end"
             sideOffset={4}
           >
@@ -78,16 +68,17 @@ export function NavUser({
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{user.name}</span>
-                  <span className="truncate text-xs text-muted-foreground">
-                    {user.email}
-                  </span>
+                  <span className="truncate text-xs text-muted-foreground">{user.email}</span>
                 </div>
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
               <DropdownMenuItem asChild>
-                <Link href={`/${locale}/settings/profile`} className="flex w-full items-center gap-2">
+                <Link
+                  href={`/${locale}/settings/profile`}
+                  className="flex w-full items-center gap-2"
+                >
                   <IconUserCircle />
                   Account
                 </Link>

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

@@ -1,26 +1,23 @@
-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 { 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 data from "./data.json"
+import data from './data.json'
 
 export default function Page() {
   return (
     <SidebarProvider
       style={
         {
-          "--sidebar-width": "calc(var(--spacing) * 72)",
-          "--header-height": "calc(var(--spacing) * 12)",
+          '--sidebar-width': 'calc(var(--spacing) * 72)',
+          '--header-height': 'calc(var(--spacing) * 12)',
         } as React.CSSProperties
       }
     >
-      <AppSidebar variant="inset" user={{ name: "User", email: "", avatar: "" }} locale="en" />
+      <AppSidebar variant="inset" user={{ name: 'User', email: '', avatar: '' }} locale="en" />
       <SidebarInset>
         <SiteHeader />
         <div className="flex flex-1 flex-col">

package/dist/templates/web-nextjs/apps/web/src/components/dashboard/section-cards.tsx

@@ -1,6 +1,6 @@
-import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react"
+import { IconTrendingDown, IconTrendingUp } from '@tabler/icons-react'
 
-import { Badge } from "@/components/ui/badge"
+import { Badge } from '@/components/ui/badge'
 import {
   Card,
   CardAction,
@@ -8,7 +8,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from '@/components/ui/card'
 
 export function SectionCards() {
   return (
@@ -30,9 +30,7 @@ export function SectionCards() {
           <div className="line-clamp-1 flex gap-2 font-medium">
             Trending up this month <IconTrendingUp className="size-4" />
           </div>
-          <div className="text-muted-foreground">
-            Visitors for the last 6 months
-          </div>
+          <div className="text-muted-foreground">Visitors for the last 6 months</div>
         </CardFooter>
       </Card>
       <Card className="@container/card">
@@ -52,9 +50,7 @@ export function SectionCards() {
           <div className="line-clamp-1 flex gap-2 font-medium">
             Down 20% this period <IconTrendingDown className="size-4" />
           </div>
-          <div className="text-muted-foreground">
-            Acquisition needs attention
-          </div>
+          <div className="text-muted-foreground">Acquisition needs attention</div>
         </CardFooter>
       </Card>
       <Card className="@container/card">

package/dist/templates/web-nextjs/apps/web/src/components/dashboard/site-header.tsx

@@ -1,18 +1,17 @@
-import { Button } from "@/components/ui/button"
-import { Separator } from "@/components/ui/separator"
-import { SidebarTrigger } from "@/components/ui/sidebar"
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { SidebarTrigger } from '@/components/ui/sidebar'
+import { ThemeToggle } from '@/components/ui/theme-toggle'
 
 export function SiteHeader() {
   return (
     <header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
       <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
         <SidebarTrigger className="-ml-1" />
-        <Separator
-          orientation="vertical"
-          className="mx-2 data-[orientation=vertical]:h-4"
-        />
+        <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
         <h1 className="text-base font-medium">Documents</h1>
         <div className="ml-auto flex items-center gap-2">
+          <ThemeToggle />
           <Button variant="ghost" asChild size="sm" className="hidden sm:flex">
             <a
               href="https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard"

package/dist/templates/web-nextjs/apps/web/src/components/landing/features.tsx

@@ -0,0 +1,63 @@
+import { useTranslations } from 'next-intl'
+import { Shield, GitBranch, Bot, BookOpen } from 'lucide-react'
+
+const icons = [Shield, GitBranch, Bot, BookOpen]
+
+export function Features() {
+  const t = useTranslations('landing')
+
+  const features = [
+    {
+      key: 'auth',
+      icon: Shield,
+    },
+    {
+      key: 'monorepo',
+      icon: GitBranch,
+    },
+    {
+      key: 'aiCoding',
+      icon: Bot,
+    },
+    {
+      key: 'docs',
+      icon: BookOpen,
+    },
+  ]
+
+  return (
+    <section
+      id="features"
+      className="px-4 py-16 md:py-24"
+      style={{ padding: 'clamp(32px, 8vw, 80px) 0' }}
+    >
+      <div className="mx-auto max-w-7xl px-4 md:px-6">
+        <div className="mb-12 text-center">
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">{t('features.title')}</h2>
+          <p className="mt-4 text-muted-foreground">{t('features.subtitle')}</p>
+        </div>
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {features.map((feature) => {
+            const Icon = feature.icon
+            return (
+              <div
+                key={feature.key}
+                className="group rounded-xl border bg-card p-6 transition-colors hover:border-primary/20"
+              >
+                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                  <Icon className="h-5 w-5" />
+                </div>
+                <h3 className="text-lg font-semibold">
+                  {t(`features.items.${feature.key}.title`)}
+                </h3>
+                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                  {t(`features.items.${feature.key}.description`)}
+                </p>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/components/landing/footer.tsx

@@ -0,0 +1,48 @@
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { IconBrandGithub } from '@tabler/icons-react'
+
+interface FooterProps {
+  locale: string
+}
+
+export function Footer({ locale }: FooterProps) {
+  const t = useTranslations('landing')
+  const year = new Date().getFullYear()
+
+  const links = [
+    { href: `/${locale}/help`, label: t('footer.help') },
+    { href: `/${locale}/privacy`, label: t('footer.privacy') },
+    { href: `/${locale}/about`, label: t('footer.about') },
+  ]
+
+  return (
+    <footer className="border-t bg-background px-4 py-8 md:py-12">
+      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row md:px-6">
+        <div className="flex items-center gap-4">
+          {links.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+        <div className="flex items-center gap-4">
+          <a
+            href="https://github.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub"
+            className="text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <IconBrandGithub className="h-5 w-5" />
+          </a>
+          <span className="text-sm text-muted-foreground">{t('footer.copyright', { year })}</span>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/components/landing/header.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { Menu } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import { ThemeToggle } from '@/components/ui/theme-toggle'
+
+interface HeaderProps {
+  locale: string
+}
+
+export function Header({ locale }: HeaderProps) {
+  const t = useTranslations('landing')
+  const [open, setOpen] = useState(false)
+
+  const navLinks = [
+    { href: `/${locale}/#features`, label: t('nav.features') },
+    { href: `/${locale}/#pricing`, label: t('nav.pricing') },
+    { href: '/docs', label: t('nav.docs') },
+  ]
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-sm">
+      <div className="mx-auto flex h-(--header-height, 4rem) max-w-7xl items-center justify-between px-4 md:px-6">
+        {/* Logo */}
+        <Link href={`/${locale}`} className="flex items-center gap-2">
+          <span className="text-lg font-semibold tracking-tight">AgentDock</span>
+        </Link>
+
+        {/* Desktop Nav */}
+        <nav className="hidden items-center gap-6 md:flex">
+          {navLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+
+        {/* Desktop Actions */}
+        <div className="hidden items-center gap-2 md:flex">
+          <ThemeToggle />
+          <Button variant="ghost" asChild size="sm" className="min-h-[44px]">
+            <Link href={`/${locale}/login`}>{t('nav.login')}</Link>
+          </Button>
+          <Button asChild size="sm" className="min-h-[44px]">
+            <Link href={`/${locale}/signup`}>{t('nav.getStarted')}</Link>
+          </Button>
+        </div>
+
+        {/* Mobile Menu */}
+        <div className="flex items-center gap-2 md:hidden">
+          <ThemeToggle />
+          <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="icon" className="min-h-[44px] min-w-[44px]">
+                <Menu className="h-5 w-5" />
+                <span className="sr-only">Open menu</span>
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-[280px]">
+              <nav className="mt-8 flex flex-col gap-4">
+                {navLinks.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    onClick={() => setOpen(false)}
+                    className="text-base font-medium text-muted-foreground transition-colors hover:text-foreground"
+                  >
+                    {link.label}
+                  </Link>
+                ))}
+                <hr className="my-2" />
+                <Button asChild className="w-full min-h-[44px]">
+                  <Link href={`/${locale}/signup`} onClick={() => setOpen(false)}>
+                    {t('nav.getStarted')}
+                  </Link>
+                </Button>
+                <Button variant="outline" asChild className="w-full min-h-[44px]">
+                  <Link href={`/${locale}/login`} onClick={() => setOpen(false)}>
+                    {t('nav.login')}
+                  </Link>
+                </Button>
+              </nav>
+            </SheetContent>
+          </Sheet>
+        </div>
+      </div>
+    </header>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/components/landing/hero.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+
+interface HeroProps {
+  locale: string
+}
+
+export function Hero({ locale }: HeroProps) {
+  const t = useTranslations('landing')
+
+  return (
+    <section className="relative overflow-hidden px-4 py-16 md:py-24 lg:py-32">
+      <div className="mx-auto max-w-4xl text-center">
+        <Badge variant="secondary" className="mb-4">
+          {t('hero.badge')}
+        </Badge>
+        <h1
+          className="mx-auto max-w-3xl font-bold tracking-tight"
+          style={{ fontSize: 'clamp(2rem, 5vw + 1rem, 4rem)', lineHeight: 1.1 }}
+        >
+          {t('hero.title')}
+        </h1>
+        <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-muted-foreground md:text-xl">
+          {t('hero.subtitle')}
+        </p>
+        <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
+          <Button asChild size="lg" className="min-h-[44px] min-w-[44px] px-8">
+            <Link href={`/${locale}/signup`}>{t('hero.ctaPrimary')}</Link>
+          </Button>
+          <Button asChild variant="outline" size="lg" className="min-h-[44px] min-w-[44px] px-8">
+            <Link href="/docs">{t('hero.ctaSecondary')}</Link>
+          </Button>
+        </div>
+      </div>
+
+      {/* Decorative geometric shapes - CSS only, no custom SVG */}
+      <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden opacity-30">
+        <div className="absolute -left-20 -top-20 h-64 w-64 rounded-full bg-gradient-to-br from-primary/10 to-transparent blur-3xl" />
+        <div className="absolute -bottom-20 -right-20 h-64 w-64 rounded-full bg-gradient-to-tl from-primary/10 to-transparent blur-3xl" />
+      </div>
+    </section>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/components/landing/how-it-works.tsx

@@ -0,0 +1,35 @@
+import { useTranslations } from 'next-intl'
+
+export function HowItWorks() {
+  const t = useTranslations('landing')
+
+  const steps = [
+    { key: 'step1', number: '01' },
+    { key: 'step2', number: '02' },
+    { key: 'step3', number: '03' },
+  ]
+
+  return (
+    <section className="px-4 py-16 md:py-24" style={{ padding: 'clamp(32px, 8vw, 80px) 0' }}>
+      <div className="mx-auto max-w-7xl px-4 md:px-6">
+        <div className="mb-12 text-center">
+          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">{t('howItWorks.title')}</h2>
+          <p className="mt-4 text-muted-foreground">{t('howItWorks.subtitle')}</p>
+        </div>
+        <div className="grid gap-8 md:grid-cols-3">
+          {steps.map((step) => (
+            <div key={step.key} className="relative text-center">
+              <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-2xl font-bold text-primary">
+                {step.number}
+              </div>
+              <h3 className="text-lg font-semibold">{t(`howItWorks.steps.${step.key}.title`)}</h3>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                {t(`howItWorks.steps.${step.key}.description`)}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/components/landing/pricing-teaser.tsx

@@ -0,0 +1,23 @@
+import { useTranslations } from 'next-intl'
+import { Button } from '@/components/ui/button'
+
+export function PricingTeaser() {
+  const t = useTranslations('landing')
+
+  return (
+    <section
+      id="pricing"
+      className="px-4 py-16 md:py-24"
+      style={{ padding: 'clamp(32px, 8vw, 80px) 0' }}
+    >
+      <div className="mx-auto max-w-3xl px-4 text-center md:px-6">
+        <h2 className="text-3xl font-bold tracking-tight md:text-4xl">{t('pricing.title')}</h2>
+        <p className="mt-4 text-muted-foreground">{t('pricing.description')}</p>
+        <Button asChild className="mt-8 min-h-[44px] min-w-[44px]">
+          <a href="mailto:contact@agentdock.dev">{t('pricing.cta')}</a>
+        </Button>
+        {/* TODO: Integrate Stripe, see add-stripe-payments change */}
+      </div>
+    </section>
+  )
+}

package/dist/templates/web-nextjs/apps/web/src/components/profile/profile-form.tsx

@@ -17,7 +17,11 @@ interface ProfileFormProps {
 }
 
 export function ProfileForm({ defaultName, locale }: ProfileFormProps) {
-  const { register, formState: { errors }, reset } = useForm<DisplayNameInput>({
+  const {
+    register,
+    formState: { errors },
+    reset,
+  } = useForm<DisplayNameInput>({
     resolver: zodResolver(displayNameSchema),
     defaultValues: { name: defaultName },
   })
@@ -48,9 +52,7 @@ export function ProfileForm({ defaultName, locale }: ProfileFormProps) {
             {...register('name')}
           />
           {errors.name && (
-            <FieldDescription className="text-destructive">
-              {errors.name.message}
-            </FieldDescription>
+            <FieldDescription className="text-destructive">{errors.name.message}</FieldDescription>
           )}
         </Field>
         <Field>

package/dist/templates/web-nextjs/apps/web/src/components/providers/theme-provider.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}