create-agentic-app 1.1.56 → 1.1.58

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

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`