create-agentic-app 1.1.56 → 1.1.58

package/template/specs/ui-polish-responsive/tasks/task-09-auth-pages.md

@@ -0,0 +1,97 @@
+# Task 09: Auth Pages
+
+## Status
+
+pending
+
+## Wave
+
+2
+
+## Description
+
+Polish all 4 auth pages (login, register, forgot-password, reset-password) with entrance animations, card shadows, a subtle background gradient, and improved vertical centering that works with the new flex layout. These pages are the first thing new users see, so visual polish matters.
+
+## Dependencies
+
+**Depends on:** task-01-globals-css.md, task-02-layout.md
+**Blocks:** None
+
+**Context from dependencies:** Task 01 defines the `auth-bg` utility class (radial gradient from accent color) and the `animate-fade-up` animation in globals.css. Task 02 adds `flex-1` to the `<main>` element, so auth pages can use `flex-1` to fill available vertical space properly.
+
+## Files to Modify
+
+- `src/app/(auth)/login/page.tsx` — Add animation, shadow, background, update min-height
+- `src/app/(auth)/register/page.tsx` — Same changes
+- `src/app/(auth)/forgot-password/page.tsx` — Same changes
+- `src/app/(auth)/reset-password/page.tsx` — Same changes
+
+## Technical Details
+
+### Implementation Steps
+
+All 4 files follow the exact same pattern. Each has an outer wrapper div with a Card inside.
+
+#### For each file, make these 2 changes:
+
+**Change 1: Update the wrapper div.** Each file has:
+
+```tsx
+<div className="flex min-h-[calc(100vh-4rem)] items-center justify-center p-4">
+```
+
+Change to:
+
+```tsx
+<div className="auth-bg flex flex-1 min-h-[calc(100vh-8rem)] items-center justify-center p-4">
+```
+
+Changes:
+- `auth-bg` — adds the subtle radial gradient background from globals.css
+- `flex-1` — fills available space in the flex column layout (from Task 02)
+- `min-h-[calc(100vh-8rem)]` — accounts for both header and footer height (was just 4rem for header)
+
+**Change 2: Add shadow and animation to the Card.** Each file has:
+
+```tsx
+<Card className="w-full max-w-md">
+```
+
+Change to:
+
+```tsx
+<Card className="w-full max-w-md shadow-lg animate-fade-up">
+```
+
+Changes:
+- `shadow-lg` — adds elevation/depth to the card
+- `animate-fade-up` — entrance animation (defined in globals.css keyframes, registered in @theme inline)
+
+### File-specific locations:
+
+**login/page.tsx:**
+- Wrapper div: line 27
+- Card: line 28
+
+**register/page.tsx:**
+- Wrapper div: line 20
+- Card: line 21
+
+**forgot-password/page.tsx:**
+- Wrapper div: line 21
+- Card: line 22
+
+**reset-password/page.tsx:**
+- Wrapper div: line 21
+- Card: line 22
+
+## Acceptance Criteria
+
+- [ ] All 4 auth pages have `auth-bg` class on the wrapper div
+- [ ] All 4 auth pages have `flex-1 min-h-[calc(100vh-8rem)]` on the wrapper div
+- [ ] All 4 auth cards have `shadow-lg` for depth
+- [ ] All 4 auth cards have `animate-fade-up` for entrance animation
+- [ ] Cards animate upward on page load (smooth fade + translate)
+- [ ] Subtle radial gradient visible in the background (especially visible in dark mode)
+- [ ] Footer stays at the bottom of the viewport on all auth pages
+- [ ] No visual regressions to auth form functionality

package/template/specs/ui-polish-responsive/tasks/task-10-setup-checklist.md

@@ -0,0 +1,120 @@
+# Task 10: Setup Checklist Card Adoption
+
+## Status
+
+pending
+
+## Wave
+
+2
+
+## Description
+
+Replace the bare `<div>` wrapper in the SetupChecklist component with a shadcn Card component for visual consistency with the rest of the app. The checklist is displayed on the home page and currently uses `p-6 border rounded-lg` which is the same pattern as the feature cards that are being upgraded to shadcn Cards.
+
+## Dependencies
+
+**Depends on:** task-01-globals-css.md
+**Blocks:** None
+
+**Context from dependencies:** Task 01 updates the color palette. The setup checklist does not use `card-interactive` since it's an informational display, not a clickable card.
+
+## Files to Modify
+
+- `src/components/setup-checklist.tsx` — Replace wrapper div with shadcn Card
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Add Card imports.** Add at the top:
+
+```tsx
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+```
+
+2. **Replace the outer wrapper** (line 124). The current structure is:
+
+```tsx
+<div className="p-6 border rounded-lg text-left">
+  <div className="flex items-center justify-between mb-4">
+    <div>
+      <h3 className="font-semibold">Setup checklist</h3>
+      <p className="text-sm text-muted-foreground">
+        {completed}/{steps.length} completed
+      </p>
+    </div>
+    <Button size="sm" onClick={load} disabled={loading}>
+      {loading ? "Checking..." : "Re-check"}
+    </Button>
+  </div>
+
+  {error ? <div className="text-sm text-destructive">{error}</div> : null}
+
+  <ul className="space-y-2">
+    ...checklist items...
+  </ul>
+
+  {data ? (
+    <div className="mt-4 text-xs text-muted-foreground">
+      Last checked: {new Date(data.timestamp).toLocaleString()}
+    </div>
+  ) : null}
+</div>
+```
+
+Replace with:
+
+```tsx
+<Card className="text-left">
+  <CardHeader className="pb-4">
+    <div className="flex items-center justify-between">
+      <div>
+        <CardTitle className="text-base">Setup checklist</CardTitle>
+        <p className="text-sm text-muted-foreground">
+          {completed}/{steps.length} completed
+        </p>
+      </div>
+      <Button size="sm" onClick={load} disabled={loading}>
+        {loading ? "Checking..." : "Re-check"}
+      </Button>
+    </div>
+  </CardHeader>
+  <CardContent>
+    {error ? <div className="text-sm text-destructive mb-4">{error}</div> : null}
+
+    <ul className="space-y-2">
+      ...checklist items stay the same...
+    </ul>
+
+    {data ? (
+      <div className="mt-4 text-xs text-muted-foreground">
+        Last checked: {new Date(data.timestamp).toLocaleString()}
+      </div>
+    ) : null}
+  </CardContent>
+</Card>
+```
+
+Key changes:
+- Outer `<div>` → `<Card>` 
+- Title area wrapped in `<CardHeader>` with the flex row inside
+- `h3` → `<CardTitle className="text-base">` (text-base to match current visual size)
+- Content wrapped in `<CardContent>`
+- Error div gets `mb-4` since CardContent doesn't have the same padding structure
+- All checklist items and timestamp stay exactly the same
+
+## Acceptance Criteria
+
+- [ ] Setup checklist uses shadcn `Card`/`CardHeader`/`CardTitle`/`CardContent`
+- [ ] Visual appearance is consistent — no jarring size or spacing changes
+- [ ] Title uses `CardTitle` with `text-base` to maintain current size
+- [ ] Re-check button still works and is positioned to the right of the title
+- [ ] Error state still displays correctly
+- [ ] Checklist items render identically to before
+- [ ] No TypeScript errors

package/template/specs/ui-polish-responsive/tasks/task-11-starter-prompt-modal.md

@@ -0,0 +1,87 @@
+# Task 11: Starter Prompt Modal
+
+## Status
+
+pending
+
+## Wave
+
+2
+
+## Description
+
+Replace the native `<textarea>` in the StarterPromptModal with the shadcn Textarea component for visual consistency, and make the button row responsive so buttons stack on very small screens.
+
+## Dependencies
+
+**Depends on:** task-01-globals-css.md
+**Blocks:** None
+
+**Context from dependencies:** Task 01 updates the color palette. No utility classes from Task 01 are used in this component.
+
+## Files to Modify
+
+- `src/components/starter-prompt-modal.tsx` — Replace native textarea, update button layout
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Add Textarea import.** Add at the top:
+
+```tsx
+import { Textarea } from "@/components/ui/textarea";
+```
+
+2. **Replace native `<textarea>`** (lines 161-167). Change:
+
+```tsx
+<textarea
+  id="project-description"
+  placeholder="e.g., A task management app for teams with real-time collaboration, project timelines, and AI-powered task prioritization..."
+  value={projectDescription}
+  onChange={(e) => setProjectDescription(e.target.value)}
+  className="w-full h-24 px-3 py-2 border rounded-md resize-none text-sm"
+/>
+```
+
+To:
+
+```tsx
+<Textarea
+  id="project-description"
+  placeholder="e.g., A task management app for teams with real-time collaboration, project timelines, and AI-powered task prioritization..."
+  value={projectDescription}
+  onChange={(e) => setProjectDescription(e.target.value)}
+  className="h-24 resize-none"
+/>
+```
+
+Key changes:
+- `<textarea>` → `<Textarea>` (shadcn component)
+- Remove explicit `w-full px-3 py-2 border rounded-md text-sm` — the shadcn Textarea handles these styles internally
+- Keep `h-24 resize-none` as overrides
+
+3. **Update button row** (line 174). Change:
+
+```
+className="flex gap-2"
+```
+
+To:
+
+```
+className="flex flex-col-reverse sm:flex-row gap-2"
+```
+
+This makes the buttons stack on mobile (with Cancel on top via `flex-col-reverse`) and sit side-by-side on sm+.
+
+## Acceptance Criteria
+
+- [ ] Textarea uses shadcn `Textarea` component, not a native `<textarea>`
+- [ ] Textarea has consistent focus ring styling matching other form elements
+- [ ] Button row stacks on mobile (`flex-col-reverse`) and is horizontal on sm+ (`sm:flex-row`)
+- [ ] "Copy Starter Prompt" button appears before "Cancel" button in both layouts
+- [ ] Textarea placeholder text renders correctly
+- [ ] Copy functionality still works (the `projectDescription` state binding is unchanged)
+- [ ] No TypeScript errors

package/template/src/app/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
 @theme inline {
   --color-background: var(--background);
@@ -36,6 +37,9 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --animate-fade-in: fade-in 0.3s ease-out;
+  --animate-fade-up: fade-up 0.4s ease-out;
+  --animate-scale-in: scale-in 0.2s ease-out;
 }
 
 :root {
@@ -46,18 +50,18 @@
   --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
+  --primary: oklch(0.21 0.034 270);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.967 0.001 286.375);
   --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
+  --accent: oklch(0.96 0.012 270);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.92 0.004 286.32);
   --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
+  --ring: oklch(0.705 0.06 270);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -80,18 +84,18 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
+  --primary: oklch(0.92 0.02 270);
   --primary-foreground: oklch(0.21 0.006 285.885);
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.274 0.006 286.033);
   --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
+  --accent: oklch(0.28 0.018 270);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
+  --ring: oklch(0.552 0.05 270);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -107,11 +111,65 @@
   --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @layer base {
   * {
     @apply border-border;
   }
+  html {
+    scroll-behavior: smooth;
+  }
   body {
     @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+  :focus-visible {
+    @apply outline-2 outline-offset-2 outline-ring;
+  }
+}
+
+@layer utilities {
+  .card-interactive {
+    @apply transition-all duration-200 ease-out;
+  }
+  .card-interactive:hover {
+    @apply shadow-md -translate-y-0.5;
   }
-}
+  .auth-bg {
+    background-image: radial-gradient(
+      circle at 50% 0%,
+      var(--accent) 0%,
+      transparent 50%
+    );
+  }
+}

package/template/src/app/layout.tsx

@@ -89,7 +89,7 @@ export default function RootLayout({
         />
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen flex flex-col`}
       >
         <ThemeProvider
           attribute="class"
@@ -98,7 +98,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <SiteHeader />
-          <main id="main-content">{children}</main>
+          <main id="main-content" className="flex-1">{children}</main>
           <SiteFooter />
           <Toaster richColors position="top-right" />
         </ThemeProvider>