create-xani-agentic-app 1.0.0

package/template/specs/ui-polish-responsive/tasks/task-07-chat-page.md

@@ -0,0 +1,225 @@
+# Task 07: Chat Page
+
+## Status
+
+pending
+
+## Wave
+
+2
+
+## Description
+
+Update the chat page to use shadcn Input/Button components instead of native HTML elements, add responsive breakpoints to the header and message bubbles, make the input form sticky at the bottom, and improve the empty state. This page has the most interactive elements and benefits significantly from consistent component usage.
+
+## Dependencies
+
+**Depends on:** task-01-globals-css.md
+**Blocks:** None
+
+**Context from dependencies:** Task 01 updates the color palette (so `text-primary`, `bg-primary` references use the new blue-tinted primary). No utility classes from Task 01 are used on this page (chat doesn't use `card-interactive`).
+
+## Files to Modify
+
+- `src/app/chat/page.tsx` — Replace native elements with shadcn components, add responsive classes, sticky input
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Add Input import**. Add to the existing imports:
+
+```tsx
+import { Input } from "@/components/ui/input";
+```
+
+The file already imports `Button` from `@/components/ui/button`.
+
+2. **Also import Bot icon** for the improved empty state. Add `Bot` to the existing lucide-react import:
+
+```tsx
+import { Copy, Check, Loader2, Bot } from "lucide-react";
+```
+
+3. **Replace native `<button>` in CopyButton** (lines 165-177). Change the function body from:
+
+```tsx
+return (
+  <button
+    onClick={handleCopy}
+    className="p-1 hover:bg-muted rounded transition-colors"
+    title="Copy to clipboard"
+  >
+    {copied ? (
+      <Check className="h-3.5 w-3.5 text-green-500" />
+    ) : (
+      <Copy className="h-3.5 w-3.5 text-muted-foreground" />
+    )}
+  </button>
+);
+```
+
+To:
+
+```tsx
+return (
+  <Button
+    variant="ghost"
+    size="icon"
+    className="h-7 w-7"
+    onClick={handleCopy}
+    title="Copy to clipboard"
+  >
+    {copied ? (
+      <Check className="h-3.5 w-3.5 text-green-500" />
+    ) : (
+      <Copy className="h-3.5 w-3.5 text-muted-foreground" />
+    )}
+  </Button>
+);
+```
+
+4. **Update container** (line 247). Change:
+
+```
+className="container mx-auto px-4 py-8"
+```
+
+To:
+
+```
+className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8"
+```
+
+5. **Update chat header** (lines 249-261). Change:
+
+```tsx
+<div className="flex justify-between items-center mb-6 pb-4 border-b">
+  <h1 className="text-2xl font-bold">AI Chat</h1>
+  <div className="flex items-center gap-4">
+    <span className="text-sm text-muted-foreground">
+      Welcome, {session.user.name}!
+    </span>
+```
+
+To:
+
+```tsx
+<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-4 mb-4 sm:mb-6 pb-4 border-b">
+  <h1 className="text-xl sm:text-2xl font-bold">AI Chat</h1>
+  <div className="flex items-center gap-2 sm:gap-4">
+    <span className="text-sm text-muted-foreground hidden sm:inline">
+      Welcome, {session.user.name}!
+    </span>
+```
+
+Key changes: flex stacks on mobile, welcome text hidden on mobile (`hidden sm:inline`), smaller gaps.
+
+6. **Update message bubble max-widths** (line ~289-290). For user messages, change:
+
+```
+bg-primary text-primary-foreground ml-auto max-w-[80%]
+```
+
+To:
+
+```
+bg-primary text-primary-foreground ml-auto max-w-[85%] sm:max-w-[80%] md:max-w-2xl shadow-sm
+```
+
+For AI messages, change:
+
+```
+bg-muted max-w-[80%]
+```
+
+To:
+
+```
+bg-muted max-w-[85%] sm:max-w-[80%] md:max-w-2xl shadow-sm
+```
+
+7. **Update message area** (line 271). Change:
+
+```
+className="min-h-[50vh] overflow-y-auto space-y-4 mb-4"
+```
+
+To:
+
+```
+className="min-h-[50vh] overflow-y-auto space-y-4 mb-4 pb-4"
+```
+
+8. **Improve empty state** (lines 272-275). Change:
+
+```tsx
+<div className="text-center text-muted-foreground py-12">
+  Start a conversation with AI
+</div>
+```
+
+To:
+
+```tsx
+<div className="text-center text-muted-foreground py-16 space-y-3">
+  <Bot className="h-12 w-12 mx-auto text-muted-foreground/50" />
+  <p className="text-lg font-medium">Start a conversation with AI</p>
+  <p className="text-sm">Type a message below to begin chatting</p>
+</div>
+```
+
+9. **Make input form sticky and replace native input** (lines 317-344). Change the form from:
+
+```tsx
+<form
+  onSubmit={...}
+  className="flex gap-2"
+>
+  <input
+    value={input}
+    onChange={(e) => setInput(e.target.value)}
+    placeholder="Type your message..."
+    className="flex-1 p-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+    disabled={isStreaming}
+  />
+  <Button type="submit" disabled={!input.trim() || isStreaming}>
+    ...
+  </Button>
+</form>
+```
+
+To:
+
+```tsx
+<form
+  onSubmit={...}
+  className="sticky bottom-0 bg-background py-4 border-t z-10 flex gap-2 sm:gap-3"
+>
+  <Input
+    value={input}
+    onChange={(e) => setInput(e.target.value)}
+    placeholder="Type your message..."
+    className="flex-1 min-w-0"
+    disabled={isStreaming}
+  />
+  <Button type="submit" disabled={!input.trim() || isStreaming}>
+    ...
+  </Button>
+</form>
+```
+
+Key changes: `sticky bottom-0 bg-background py-4 border-t z-10` makes the form stick. `Input` replaces native `<input>` for consistent styling. `min-w-0` prevents flex overflow.
+
+## Acceptance Criteria
+
+- [ ] Chat input uses shadcn `Input` component, not a native `<input>`
+- [ ] CopyButton uses shadcn `Button variant="ghost" size="icon"`, not a native `<button>`
+- [ ] Chat header stacks vertically on mobile (`flex-col`) and is horizontal on sm+
+- [ ] Welcome text is hidden on mobile (`hidden sm:inline`)
+- [ ] Message bubbles have `shadow-sm` for depth
+- [ ] Message widths scale: `max-w-[85%]` on mobile, `max-w-[80%]` on sm, `max-w-2xl` on md+
+- [ ] Input form is sticky at bottom with `bg-background` and `border-t`
+- [ ] Empty state shows Bot icon, title text, and subtitle
+- [ ] Container has responsive padding: `px-4 sm:px-6 lg:px-8`
+- [ ] No TypeScript errors (Input import is correct)

package/template/specs/ui-polish-responsive/tasks/task-08-profile-page.md

@@ -0,0 +1,192 @@
+# Task 08: Profile Page
+
+## Status
+
+pending
+
+## Wave
+
+2
+
+## Description
+
+Update the profile page with responsive stacking, improved grid breakpoints, and flex-wrap on tight rows. The avatar section needs to stack vertically on mobile, the quick actions grid needs an intermediate `sm:` breakpoint, and all the `flex items-center justify-between` rows in cards and dialogs need `flex-wrap` to prevent overflow on narrow 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 specifically used on this page (profile cards are informational, not interactive).
+
+## Files to Modify
+
+- `src/app/profile/page.tsx` — Update responsive classes throughout
+
+## Technical Details
+
+### Implementation Steps
+
+1. **Update container** (line 67). Change:
+
+```
+className="container max-w-4xl mx-auto py-8 px-4"
+```
+
+To:
+
+```
+className="container max-w-4xl mx-auto py-6 sm:py-8 px-4 sm:px-6 lg:px-8"
+```
+
+2. **Update title row** (line 68). Change:
+
+```
+className="flex items-center gap-4 mb-8"
+```
+
+To:
+
+```
+className="flex items-center gap-2 sm:gap-4 mb-6 sm:mb-8"
+```
+
+3. **Update title text** (line 78). Change:
+
+```
+className="text-3xl font-bold"
+```
+
+To:
+
+```
+className="text-2xl sm:text-3xl font-bold"
+```
+
+4. **Update avatar section** (line 85). Change:
+
+```
+className="flex items-center space-x-4"
+```
+
+To:
+
+```
+className="flex flex-col items-center sm:flex-row sm:items-center gap-4"
+```
+
+Important: remove `space-x-4` entirely — it conflicts with `flex-col`. The `gap-4` handles spacing in both directions.
+
+5. **Update avatar size** (line 86). Change:
+
+```
+className="h-20 w-20"
+```
+
+To:
+
+```
+className="h-16 w-16 sm:h-20 sm:w-20"
+```
+
+6. **Update text container** next to avatar (line 96). Change:
+
+```
+className="space-y-2"
+```
+
+To:
+
+```
+className="space-y-2 text-center sm:text-left"
+```
+
+7. **Update name heading** (line 97). Change:
+
+```
+className="text-2xl font-semibold"
+```
+
+To:
+
+```
+className="text-xl sm:text-2xl font-semibold"
+```
+
+8. **Update email row** (line 98). Change:
+
+```
+className="flex items-center gap-2 text-muted-foreground"
+```
+
+To:
+
+```
+className="flex flex-wrap items-center justify-center sm:justify-start gap-2 text-muted-foreground"
+```
+
+9. **Update Account Status grid** (line 160). Change:
+
+```
+className="grid grid-cols-1 md:grid-cols-2 gap-4"
+```
+
+To:
+
+```
+className="grid grid-cols-1 sm:grid-cols-2 gap-4"
+```
+
+10. **Update all status/activity flex rows** — add `flex-wrap gap-2` and responsive padding. These appear at multiple locations. For each row that has `flex items-center justify-between p-4 border rounded-lg`, change to:
+
+```
+flex flex-wrap items-center justify-between gap-2 p-3 sm:p-4 border rounded-lg
+```
+
+Apply this to the following locations:
+- Line 161 (Email Verification status)
+- Line 172 (Account Type status)
+- Line 196 (Current Session activity)
+
+11. **Update Quick Actions grid** (line 224). Change:
+
+```
+className="grid grid-cols-1 md:grid-cols-3 gap-4"
+```
+
+To:
+
+```
+className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
+```
+
+12. **Update dialog inner rows** — For the Security Settings dialog (lines 325, 342, 357), each row with `flex items-center justify-between p-4 border rounded-lg`, change to:
+
+```
+flex flex-wrap items-center justify-between gap-2 p-3 sm:p-4 border rounded-lg
+```
+
+13. **Update Email Preferences dialog rows** (lines 388, 396) — same pattern, change:
+
+```
+flex items-center justify-between p-4 border rounded-lg
+```
+
+To:
+
+```
+flex flex-wrap items-center justify-between gap-2 p-3 sm:p-4 border rounded-lg
+```
+
+## Acceptance Criteria
+
+- [ ] Avatar section stacks vertically on mobile (flex-col) and is horizontal on sm+
+- [ ] Avatar is smaller on mobile (h-16 w-16) and full size on sm+ (h-20 w-20)
+- [ ] Text next to avatar is centered on mobile, left-aligned on sm+
+- [ ] Email row wraps on narrow screens (flex-wrap)
+- [ ] Quick actions grid has intermediate breakpoint: 1 col → 2 at sm → 3 at lg
+- [ ] Account status grid uses sm:grid-cols-2 instead of md:grid-cols-2
+- [ ] All flex justify-between rows in cards and dialogs have flex-wrap and gap-2
+- [ ] Container and title have responsive padding and sizing
+- [ ] No overflow or horizontal scroll at 320px viewport
+- [ ] Profile page title scales: `text-2xl sm:text-3xl`

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