create-xani-agentic-app 1.0.0

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/(auth)/forgot-password/page.tsx

@@ -0,0 +1,35 @@
+import { headers } from "next/headers"
+import { redirect } from "next/navigation"
+import { ForgotPasswordForm } from "@/components/auth/forgot-password-form"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { auth } from "@/lib/auth"
+
+export default async function ForgotPasswordPage() {
+  const session = await auth.api.getSession({ headers: await headers() })
+
+  if (session) {
+    redirect("/dashboard")
+  }
+
+  return (
+    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <CardTitle>Forgot password</CardTitle>
+          <CardDescription>
+            Enter your email address and we&apos;ll send you a reset link
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center">
+          <ForgotPasswordForm />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/template/src/app/(auth)/layout.tsx

@@ -0,0 +1,7 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <>{children}</>
+}

package/template/src/app/(auth)/login/page.tsx

@@ -0,0 +1,44 @@
+import { headers } from "next/headers"
+import { redirect } from "next/navigation"
+import { SignInButton } from "@/components/auth/sign-in-button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { auth } from "@/lib/auth"
+
+export default async function LoginPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ reset?: string }>
+}) {
+  const session = await auth.api.getSession({ headers: await headers() })
+
+  if (session) {
+    redirect("/dashboard")
+  }
+
+  const { reset } = await searchParams
+
+  return (
+    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <CardTitle>Welcome back</CardTitle>
+          <CardDescription>Sign in to your account</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center">
+          {reset === "success" && (
+            <p className="mb-4 text-sm text-green-600 dark:text-green-400">
+              Password reset successfully. Please sign in with your new password.
+            </p>
+          )}
+          <SignInButton />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/template/src/app/(auth)/register/page.tsx

@@ -0,0 +1,33 @@
+import { headers } from "next/headers"
+import { redirect } from "next/navigation"
+import { SignUpForm } from "@/components/auth/sign-up-form"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { auth } from "@/lib/auth"
+
+export default async function RegisterPage() {
+  const session = await auth.api.getSession({ headers: await headers() })
+
+  if (session) {
+    redirect("/dashboard")
+  }
+
+  return (
+    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <CardTitle>Create an account</CardTitle>
+          <CardDescription>Get started with your new account</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center">
+          <SignUpForm />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/template/src/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,36 @@
+import { Suspense } from "react"
+import { headers } from "next/headers"
+import { redirect } from "next/navigation"
+import { ResetPasswordForm } from "@/components/auth/reset-password-form"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { auth } from "@/lib/auth"
+
+export default async function ResetPasswordPage() {
+  const session = await auth.api.getSession({ headers: await headers() })
+
+  if (session) {
+    redirect("/dashboard")
+  }
+
+  return (
+    <div className="flex min-h-[calc(100vh-4rem)] items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <CardTitle>Reset password</CardTitle>
+          <CardDescription>Enter your new password below</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center">
+          <Suspense fallback={<div>Loading...</div>}>
+            <ResetPasswordForm />
+          </Suspense>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/template/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { toNextJsHandler } from "better-auth/next-js"
+import { auth } from "@/lib/auth"
+
+export const { GET, POST } = toNextJsHandler(auth)

package/template/src/app/api/chat/route.ts

@@ -0,0 +1,80 @@
+import { headers } from "next/headers";
+import { createOpenRouter } from "@openrouter/ai-sdk-provider";
+import { streamText, UIMessage, convertToModelMessages } from "ai";
+import { z } from "zod";
+import { auth } from "@/lib/auth";
+
+// Zod schema for message validation
+const messagePartSchema = z.object({
+  type: z.string(),
+  text: z.string().max(10000, "Message text too long").optional(),
+});
+
+const messageSchema = z.object({
+  id: z.string().optional(),
+  role: z.enum(["user", "assistant", "system"]),
+  parts: z.array(messagePartSchema).optional(),
+  content: z.union([z.string(), z.array(messagePartSchema)]).optional(),
+});
+
+const chatRequestSchema = z.object({
+  messages: z.array(messageSchema).max(100, "Too many messages"),
+});
+
+export async function POST(req: Request) {
+  // Verify user is authenticated
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) {
+    return new Response(JSON.stringify({ error: "Unauthorized" }), {
+      status: 401,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  // Parse and validate request body
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return new Response(JSON.stringify({ error: "Invalid JSON" }), {
+      status: 400,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const parsed = chatRequestSchema.safeParse(body);
+  if (!parsed.success) {
+    return new Response(
+      JSON.stringify({
+        error: "Invalid request",
+        details: parsed.error.flatten().fieldErrors,
+      }),
+      {
+        status: 400,
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  }
+
+  const { messages }: { messages: UIMessage[] } = parsed.data as { messages: UIMessage[] };
+
+  // Initialize OpenRouter with API key from environment
+  const apiKey = process.env.OPENROUTER_API_KEY;
+  if (!apiKey) {
+    return new Response(JSON.stringify({ error: "OpenRouter API key not configured" }), {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const openrouter = createOpenRouter({ apiKey });
+
+  const result = streamText({
+    model: openrouter(process.env.OPENROUTER_MODEL || "openai/gpt-5-mini"),
+    messages: convertToModelMessages(messages),
+  });
+
+  return (
+    result as unknown as { toUIMessageStreamResponse: () => Response }
+  ).toUIMessageStreamResponse();
+}

package/template/src/app/api/diagnostics/route.ts

@@ -0,0 +1,162 @@
+import { NextResponse } from "next/server";
+
+type StatusLevel = "ok" | "warn" | "error";
+
+interface DiagnosticsResponse {
+  timestamp: string;
+  env: {
+    POSTGRES_URL: boolean;
+    BETTER_AUTH_SECRET: boolean;
+    GOOGLE_CLIENT_ID: boolean;
+    GOOGLE_CLIENT_SECRET: boolean;
+    OPENROUTER_API_KEY: boolean;
+    NEXT_PUBLIC_APP_URL: boolean;
+  };
+  database: {
+    connected: boolean;
+    schemaApplied: boolean;
+    error?: string;
+  };
+  auth: {
+    configured: boolean;
+    routeResponding: boolean | null;
+  };
+  ai: {
+    configured: boolean;
+  };
+  storage: {
+    configured: boolean;
+    type: "local" | "remote";
+  };
+  overallStatus: StatusLevel;
+}
+
+// This endpoint is intentionally public (no auth required) because it's used
+// by the setup checklist on the homepage before users are logged in.
+// It only returns boolean flags about configuration status, not sensitive data.
+export async function GET(req: Request) {
+  const env = {
+    POSTGRES_URL: Boolean(process.env.POSTGRES_URL),
+    BETTER_AUTH_SECRET: Boolean(process.env.BETTER_AUTH_SECRET),
+    GOOGLE_CLIENT_ID: Boolean(process.env.GOOGLE_CLIENT_ID),
+    GOOGLE_CLIENT_SECRET: Boolean(process.env.GOOGLE_CLIENT_SECRET),
+    OPENROUTER_API_KEY: Boolean(process.env.OPENROUTER_API_KEY),
+    NEXT_PUBLIC_APP_URL: Boolean(process.env.NEXT_PUBLIC_APP_URL),
+  } as const;
+
+  // Database checks with timeout
+  let dbConnected = false;
+  let schemaApplied = false;
+  let dbError: string | undefined;
+  if (env.POSTGRES_URL) {
+    try {
+      // Add timeout to prevent hanging on unreachable database
+      const dbCheckPromise = (async () => {
+        const [{ db }, { sql }, schema] = await Promise.all([
+          import("@/lib/db"),
+          import("drizzle-orm"),
+          import("@/lib/schema"),
+        ]);
+
+        // Ping DB - this will actually attempt to connect
+        const result = await db.execute(sql`SELECT 1 as ping`);
+        if (!result) {
+          throw new Error("Database query returned no result");
+        }
+        dbConnected = true;
+
+        try {
+          // Touch a known table to verify migrations
+          await db.select().from(schema.user).limit(1);
+          schemaApplied = true;
+        } catch {
+          schemaApplied = false;
+          // If we can't query the user table, it's likely migrations haven't run
+          if (!dbError) {
+            dbError = "Schema not applied. Run: npm run db:migrate";
+          }
+        }
+      })();
+
+      const timeoutPromise = new Promise((_, reject) =>
+        setTimeout(() => reject(new Error("Database connection timeout (5s)")), 5000)
+      );
+
+      await Promise.race([dbCheckPromise, timeoutPromise]);
+    } catch {
+      dbConnected = false;
+      schemaApplied = false;
+
+      // Provide user-friendly error messages
+      dbError = "Database not connected. Please start your PostgreSQL database and verify your POSTGRES_URL in .env";
+    }
+  } else {
+    dbConnected = false;
+    schemaApplied = false;
+    dbError = "POSTGRES_URL is not set";
+  }
+
+  // Auth route check: we consider the route responding if it returns any HTTP response
+  // for /api/auth/session (status codes in the 2xx-4xx range are acceptable for readiness)
+  const origin = (() => {
+    try {
+      return new URL(req.url).origin;
+    } catch {
+      return process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000";
+    }
+  })();
+
+  let authRouteResponding: boolean | null = null;
+  try {
+    const res = await fetch(`${origin}/api/auth/session`, {
+      method: "GET",
+      headers: { Accept: "application/json" },
+      cache: "no-store",
+    });
+    authRouteResponding = res.status >= 200 && res.status < 500;
+  } catch {
+    authRouteResponding = false;
+  }
+
+  const authConfigured =
+    env.BETTER_AUTH_SECRET && env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET;
+  const aiConfigured = env.OPENROUTER_API_KEY; // We avoid live-calling the AI provider here
+
+  // Storage configuration check
+  const storageConfigured = Boolean(process.env.BLOB_READ_WRITE_TOKEN);
+  const storageType: "local" | "remote" = storageConfigured ? "remote" : "local";
+
+  const overallStatus: StatusLevel = (() => {
+    if (!env.POSTGRES_URL || !dbConnected || !schemaApplied) return "error";
+    if (!authConfigured) return "error";
+    // AI is optional; warn if not configured
+    if (!aiConfigured) return "warn";
+    return "ok";
+  })();
+
+  const body: DiagnosticsResponse = {
+    timestamp: new Date().toISOString(),
+    env,
+    database: {
+      connected: dbConnected,
+      schemaApplied,
+      ...(dbError !== undefined && { error: dbError }),
+    },
+    auth: {
+      configured: authConfigured,
+      routeResponding: authRouteResponding,
+    },
+    ai: {
+      configured: aiConfigured,
+    },
+    storage: {
+      configured: storageConfigured,
+      type: storageType,
+    },
+    overallStatus,
+  };
+
+  return NextResponse.json(body, {
+    status: 200,
+  });
+}

package/template/src/app/chat/error.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect } from "react";
+import { MessageSquareWarning, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export default function ChatError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("Chat error:", error);
+  }, [error]);
+
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className="max-w-md mx-auto text-center">
+        <div className="flex justify-center mb-6">
+          <MessageSquareWarning className="h-16 w-16 text-destructive" />
+        </div>
+        <h1 className="text-2xl font-bold mb-4">Chat Error</h1>
+        <p className="text-muted-foreground mb-6">
+          There was a problem with the chat service. This could be due to a
+          connection issue or the AI service being temporarily unavailable.
+        </p>
+        {error.message && (
+          <p className="text-sm text-muted-foreground mb-4 p-2 bg-muted rounded">
+            {error.message}
+          </p>
+        )}
+        <div className="flex gap-4 justify-center">
+          <Button onClick={reset}>
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Try again
+          </Button>
+          <Button variant="outline" onClick={() => (window.location.href = "/")}>
+            Go home
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/app/chat/loading.tsx

@@ -0,0 +1,42 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ChatLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="max-w-4xl mx-auto">
+        {/* Header skeleton */}
+        <div className="flex justify-between items-center mb-6 pb-4 border-b">
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-4 w-40" />
+        </div>
+
+        {/* Messages skeleton */}
+        <div className="min-h-[50vh] space-y-4 mb-4">
+          {/* AI message */}
+          <div className="max-w-[80%]">
+            <Skeleton className="h-4 w-12 mb-2" />
+            <Skeleton className="h-20 w-full rounded-lg" />
+          </div>
+
+          {/* User message */}
+          <div className="max-w-[80%] ml-auto">
+            <Skeleton className="h-4 w-12 mb-2 ml-auto" />
+            <Skeleton className="h-12 w-full rounded-lg" />
+          </div>
+
+          {/* AI message */}
+          <div className="max-w-[80%]">
+            <Skeleton className="h-4 w-12 mb-2" />
+            <Skeleton className="h-32 w-full rounded-lg" />
+          </div>
+        </div>
+
+        {/* Input skeleton */}
+        <div className="flex gap-2">
+          <Skeleton className="flex-1 h-10 rounded-md" />
+          <Skeleton className="h-10 w-20 rounded-md" />
+        </div>
+      </div>
+    </div>
+  );
+}