create-xani-agentic-app 1.0.0

package/template/specs/ui-polish-responsive/tasks/task-03-site-header.md

@@ -0,0 +1,79 @@
+# Task 03: Site Header Responsive
+
+## Status
+
+complete
+
+## Wave
+
+1
+
+## Description
+
+Update the site header component with responsive padding and sizing so it scales better on mobile devices. Currently the header uses fixed `px-4 py-4` padding and `text-2xl` logo text that could be tighter on small phones. The action buttons also use a fixed `gap-4` that is generous on narrow screens.
+
+## Dependencies
+
+**Depends on:** None (Wave 1)
+**Blocks:** None
+
+**Context from dependencies:** N/A
+
+## Files to Modify
+
+- `src/components/site-header.tsx` — Update Tailwind classes for responsive sizing
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Update nav padding** (line 19). Change:
+
+```
+container mx-auto px-4 py-4 flex justify-between items-center
+```
+
+To:
+
+```
+container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex justify-between items-center
+```
+
+2. **Update logo text size** (line 21). Change the `<h1>` className from:
+
+```
+text-2xl font-bold
+```
+
+To:
+
+```
+text-xl sm:text-2xl font-bold
+```
+
+3. **Update actions group gap** (line 38). Change:
+
+```
+flex items-center gap-4
+```
+
+To:
+
+```
+flex items-center gap-2 sm:gap-4
+```
+
+### Current file reference
+
+The full current file is at `src/components/site-header.tsx` (46 lines). The structure is:
+- Skip-to-main-content link (accessibility)
+- `<header className="border-b">` wrapper
+- `<nav>` with logo on left, UserProfile + ModeToggle on right
+
+## Acceptance Criteria
+
+- [ ] Nav padding is `px-3 sm:px-4 py-3 sm:py-4`
+- [ ] Logo text is `text-xl sm:text-2xl`
+- [ ] Actions gap is `gap-2 sm:gap-4`
+- [ ] Header looks good at 320px viewport width (no overflow, no cramping)
+- [ ] Header looks unchanged at desktop widths (1024px+)

package/template/specs/ui-polish-responsive/tasks/task-04-site-footer.md

@@ -0,0 +1,63 @@
+# Task 04: Site Footer Responsive
+
+## Status
+
+complete
+
+## Wave
+
+1
+
+## Description
+
+Update the site footer with responsive padding to match the header's responsive scaling and maintain consistent container padding across the app. Currently the footer uses fixed `py-6` and `px-4` that could be tighter on mobile and more generous on large screens.
+
+## Dependencies
+
+**Depends on:** None (Wave 1)
+**Blocks:** None
+
+**Context from dependencies:** N/A
+
+## Files to Modify
+
+- `src/components/site-footer.tsx` — Update Tailwind classes for responsive padding
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Update footer padding** (line 5). Change:
+
+```
+border-t py-6 text-center text-sm text-muted-foreground
+```
+
+To:
+
+```
+border-t py-4 sm:py-6 text-center text-sm text-muted-foreground
+```
+
+2. **Update container padding** (line 6). Change:
+
+```
+container mx-auto px-4
+```
+
+To:
+
+```
+container mx-auto px-4 sm:px-6 lg:px-8
+```
+
+### Current file reference
+
+The file is at `src/components/site-footer.tsx` (24 lines). It renders a `<footer>` with a GitHubStars component and an attribution link.
+
+## Acceptance Criteria
+
+- [ ] Footer padding is `py-4 sm:py-6`
+- [ ] Container padding is `px-4 sm:px-6 lg:px-8`
+- [ ] Footer is slightly more compact on mobile (py-4 vs py-6)
+- [ ] Footer has more generous side padding on large screens (lg:px-8)

package/template/specs/ui-polish-responsive/tasks/task-05-home-page.md

@@ -0,0 +1,215 @@
+# Task 05: Home Page Overhaul
+
+## Status
+
+pending
+
+## Wave
+
+2
+
+## Description
+
+Overhaul the home page with responsive typography, shadcn Card components replacing bare divs, hover effects on interactive cards, and better grid breakpoints. This is the highest-visibility page and sets the visual tone for the entire app. The feature cards and next steps cards are currently plain `<div>` elements with `border rounded-lg` — they need to be replaced with proper shadcn Card components with the `card-interactive` hover utility.
+
+## Dependencies
+
+**Depends on:** task-01-globals-css.md
+**Blocks:** None
+
+**Context from dependencies:** Task 01 defines the `card-interactive` utility class in globals.css which provides `transition-all duration-200 ease-out` with hover effects (`shadow-md -translate-y-0.5`). This task uses that class on all interactive cards. Task 01 also updates the color palette so `text-primary` on icons will show the new blue-tinted primary color.
+
+## Files to Modify
+
+- `src/app/page.tsx` — Replace bare divs with shadcn Cards, update typography responsive classes, fix grid breakpoints
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Add Card imports** at the top of the file. Add this import:
+
+```tsx
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+```
+
+2. **Update container spacing** (line 13). Change:
+
+```
+className="flex-1 container mx-auto px-4 py-12"
+```
+
+To:
+
+```
+className="flex-1 container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12"
+```
+
+3. **Update hero h1 typography** (line 20). Change:
+
+```
+className="text-5xl font-bold tracking-tight bg-gradient-to-r from-primary via-primary/90 to-primary/70 bg-clip-text text-transparent"
+```
+
+To:
+
+```
+className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight bg-gradient-to-r from-primary via-primary/90 to-primary/70 bg-clip-text text-transparent"
+```
+
+4. **Update hero h2 subtitle** (line 24). Change:
+
+```
+className="text-2xl font-semibold text-muted-foreground"
+```
+
+To:
+
+```
+className="text-xl sm:text-2xl font-semibold text-muted-foreground"
+```
+
+5. **Update hero description paragraph** (line 27). Change:
+
+```
+className="text-xl text-muted-foreground"
+```
+
+To:
+
+```
+className="text-base sm:text-lg md:text-xl text-muted-foreground"
+```
+
+6. **Update "Video Tutorial" heading** (line 35). Change:
+
+```
+className="text-2xl font-semibold flex items-center justify-center gap-2"
+```
+
+To:
+
+```
+className="text-xl sm:text-2xl font-semibold flex items-center justify-center gap-2"
+```
+
+7. **Add shadow to video embed container** (line 43). Change:
+
+```
+className="relative pb-[56.25%] h-0 overflow-hidden rounded-lg border"
+```
+
+To:
+
+```
+className="relative pb-[56.25%] h-0 overflow-hidden rounded-lg border shadow-md"
+```
+
+8. **Update feature grid** (line 55). Change:
+
+```
+className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12"
+```
+
+To:
+
+```
+className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mt-12"
+```
+
+9. **Replace all 4 feature card divs** (lines 56-92) with shadcn Card components. Each card currently looks like:
+
+```tsx
+<div className="p-6 border rounded-lg">
+  <h3 className="font-semibold mb-2 flex items-center gap-2">
+    <Shield className="h-4 w-4" />
+    Authentication
+  </h3>
+  <p className="text-sm text-muted-foreground">
+    Better Auth with Google OAuth integration
+  </p>
+</div>
+```
+
+Replace each with:
+
+```tsx
+<Card className="card-interactive">
+  <CardHeader className="pb-3">
+    <CardTitle className="text-base flex items-center gap-2">
+      <Shield className="h-4 w-4 text-primary" />
+      Authentication
+    </CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm text-muted-foreground">
+      Better Auth with Google OAuth integration
+    </p>
+  </CardContent>
+</Card>
+```
+
+Do this for all 4 cards (Authentication/Shield, Database/Database, AI Ready/Bot, UI Components/Palette). Add `text-primary` to each icon.
+
+10. **Update "Next Steps" heading** (line 97). Change:
+
+```
+className="text-2xl font-semibold"
+```
+
+To:
+
+```
+className="text-xl sm:text-2xl font-semibold"
+```
+
+11. **Update next steps grid** (line 98). Change:
+
+```
+className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left"
+```
+
+To:
+
+```
+className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-left"
+```
+
+12. **Replace all 4 next steps card divs** (lines 99-169) with shadcn Card components. Each currently looks like:
+
+```tsx
+<div className="p-4 border rounded-lg">
+  <h4 className="font-medium mb-2">1. Set up environment variables</h4>
+  ...content...
+</div>
+```
+
+Replace each wrapper with:
+
+```tsx
+<Card className="card-interactive">
+  <CardContent className="pt-6">
+    <h4 className="font-medium mb-2">1. Set up environment variables</h4>
+    ...content stays the same...
+  </CardContent>
+</Card>
+```
+
+Use `pt-6` on CardContent since there's no CardHeader for these simpler cards.
+
+## Acceptance Criteria
+
+- [ ] Hero h1 scales: `text-3xl` on mobile, `text-4xl` on sm, `text-5xl` on md+
+- [ ] Hero h2 and description also scale responsively
+- [ ] Feature grid uses `sm:grid-cols-2` breakpoint (2 columns at 640px)
+- [ ] All 4 feature cards use shadcn `Card`/`CardHeader`/`CardContent` with `card-interactive`
+- [ ] All feature card icons have `text-primary` class
+- [ ] All 4 next steps cards use shadcn `Card`/`CardContent` with `card-interactive`
+- [ ] Video embed has `shadow-md` 
+- [ ] Container has responsive padding: `px-4 sm:px-6 lg:px-8`
+- [ ] No TypeScript errors (Card imports are correct)

package/template/specs/ui-polish-responsive/tasks/task-06-dashboard.md

@@ -0,0 +1,222 @@
+# Task 06: Dashboard Page
+
+## Status
+
+pending
+
+## Wave
+
+2
+
+## Description
+
+Update the dashboard page to use shadcn Card components instead of bare divs, add responsive breakpoints, improve the loading state, and add visual polish. The dashboard currently has two plain `<div>` cards with `border border-border rounded-lg` and a simple "Loading..." text.
+
+## Dependencies
+
+**Depends on:** task-01-globals-css.md
+**Blocks:** None
+
+**Context from dependencies:** Task 01 defines the `card-interactive` utility class in globals.css and updates the primary color to a blue-tinted hue. This task uses `card-interactive` on cards and `text-primary` on new icon accents.
+
+## Files to Modify
+
+- `src/app/dashboard/page.tsx` — Replace divs with Cards, add responsive classes, improve loading
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Add new imports**. The file currently imports: `Link`, `Lock`, `UserProfile`, `Button`, `useDiagnostics`, `useSession`. Add these:
+
+```tsx
+import { Lock, Bot, User } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Spinner } from "@/components/ui/spinner";
+```
+
+Remove the existing `Lock` from the lucide-react import (it's being re-imported in the combined import).
+
+2. **Update loading state** (lines 15-19). Change:
+
+```tsx
+return (
+  <div className="flex justify-center items-center h-screen">
+    Loading...
+  </div>
+);
+```
+
+To:
+
+```tsx
+return (
+  <div className="flex justify-center items-center h-screen">
+    <Spinner size="lg" />
+  </div>
+);
+```
+
+3. **Update unauthenticated state container** (line 24). Change:
+
+```
+className="container mx-auto px-4 py-12"
+```
+
+To:
+
+```
+className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12"
+```
+
+4. **Wrap unauthenticated content in Card** (lines 26-34). Change:
+
+```tsx
+<div className="mb-8">
+  <Lock className="w-16 h-16 mx-auto mb-4 text-muted-foreground" />
+  <h1 className="text-2xl font-bold mb-2">Protected Page</h1>
+  <p className="text-muted-foreground mb-6">
+    You need to sign in to access the dashboard
+  </p>
+</div>
+```
+
+To:
+
+```tsx
+<Card className="mb-8 text-center">
+  <CardContent className="pt-6">
+    <Lock className="w-16 h-16 mx-auto mb-4 text-muted-foreground" />
+    <h1 className="text-2xl font-bold mb-2">Protected Page</h1>
+    <p className="text-muted-foreground mb-6">
+      You need to sign in to access the dashboard
+    </p>
+  </CardContent>
+</Card>
+```
+
+5. **Update authenticated container** (line 40). Change:
+
+```
+className="container mx-auto p-6"
+```
+
+To:
+
+```
+className="container mx-auto p-4 sm:p-6 max-w-5xl"
+```
+
+6. **Update title section** (lines 41-43). Change:
+
+```tsx
+<div className="flex justify-between items-center mb-8">
+  <h1 className="text-3xl font-bold">Dashboard</h1>
+</div>
+```
+
+To:
+
+```tsx
+<div className="flex flex-wrap justify-between items-center gap-4 mb-6 sm:mb-8">
+  <h1 className="text-2xl sm:text-3xl font-bold">Dashboard</h1>
+</div>
+```
+
+7. **Update card grid** (line 45). Change:
+
+```
+className="grid grid-cols-1 md:grid-cols-2 gap-6"
+```
+
+To:
+
+```
+className="grid grid-cols-1 sm:grid-cols-2 gap-6"
+```
+
+8. **Replace AI Chat card div** (lines 46-59). Change:
+
+```tsx
+<div className="p-6 border border-border rounded-lg">
+  <h2 className="text-xl font-semibold mb-2">AI Chat</h2>
+  <p className="text-muted-foreground mb-4">
+    Start a conversation with AI using the Vercel AI SDK
+  </p>
+  ...button...
+</div>
+```
+
+To:
+
+```tsx
+<Card className="card-interactive">
+  <CardHeader>
+    <CardTitle className="flex items-center gap-2">
+      <Bot className="h-5 w-5 text-primary" />
+      AI Chat
+    </CardTitle>
+    <CardDescription>
+      Start a conversation with AI using the Vercel AI SDK
+    </CardDescription>
+  </CardHeader>
+  <CardContent>
+    ...button stays the same...
+  </CardContent>
+</Card>
+```
+
+9. **Replace Profile card div** (lines 62-76). Change:
+
+```tsx
+<div className="p-6 border border-border rounded-lg">
+  <h2 className="text-xl font-semibold mb-2">Profile</h2>
+  <p className="text-muted-foreground mb-4">
+    Manage your account settings and preferences
+  </p>
+  <div className="space-y-2">
+    <p><strong>Name:</strong> {session.user.name}</p>
+    <p><strong>Email:</strong> {session.user.email}</p>
+  </div>
+</div>
+```
+
+To:
+
+```tsx
+<Card className="card-interactive">
+  <CardHeader>
+    <CardTitle className="flex items-center gap-2">
+      <User className="h-5 w-5 text-primary" />
+      Profile
+    </CardTitle>
+    <CardDescription>
+      Manage your account settings and preferences
+    </CardDescription>
+  </CardHeader>
+  <CardContent>
+    <div className="space-y-2">
+      <p><strong>Name:</strong> {session.user.name}</p>
+      <p><strong>Email:</strong> {session.user.email}</p>
+    </div>
+  </CardContent>
+</Card>
+```
+
+## Acceptance Criteria
+
+- [ ] Both dashboard cards use shadcn `Card`/`CardHeader`/`CardTitle`/`CardDescription`/`CardContent`
+- [ ] Both cards have `card-interactive` class
+- [ ] AI Chat card has Bot icon with `text-primary`, Profile card has User icon with `text-primary`
+- [ ] Loading state shows `Spinner` component instead of "Loading..." text
+- [ ] Container has `max-w-5xl` to prevent overly wide content
+- [ ] Grid uses `sm:grid-cols-2` breakpoint
+- [ ] Title scales: `text-2xl sm:text-3xl`
+- [ ] Unauthenticated state wraps in Card
+- [ ] No TypeScript errors