create-xani-agentic-app 1.0.0

package/template/src/components/auth/sign-in-button.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { signIn, useSession } from "@/lib/auth-client"
+
+export function SignInButton() {
+  const { data: session, isPending: sessionPending } = useSession()
+  const router = useRouter()
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [error, setError] = useState("")
+  const [isPending, setIsPending] = useState(false)
+
+  if (sessionPending) {
+    return <Button disabled>Loading...</Button>
+  }
+
+  if (session) {
+    return null
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError("")
+    setIsPending(true)
+
+    try {
+      const result = await signIn.email({
+        email,
+        password,
+        callbackURL: "/dashboard",
+      })
+
+      if (result.error) {
+        setError(result.error.message || "Failed to sign in")
+      } else {
+        router.push("/dashboard")
+        router.refresh()
+      }
+    } catch {
+      setError("An unexpected error occurred")
+    } finally {
+      setIsPending(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 w-full max-w-sm">
+      <div className="space-y-2">
+        <Label htmlFor="email">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          placeholder="you@example.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          disabled={isPending}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="password">Password</Label>
+        <Input
+          id="password"
+          type="password"
+          placeholder="Your password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+          disabled={isPending}
+        />
+      </div>
+      {error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
+      <Button type="submit" className="w-full" disabled={isPending}>
+        {isPending ? "Signing in..." : "Sign in"}
+      </Button>
+      <div className="text-center text-sm text-muted-foreground">
+        <Link href="/forgot-password" className="hover:underline">
+          Forgot password?
+        </Link>
+      </div>
+      <div className="text-center text-sm text-muted-foreground">
+        Don&apos;t have an account?{" "}
+        <Link href="/register" className="text-primary hover:underline">
+          Sign up
+        </Link>
+      </div>
+    </form>
+  )
+}

package/template/src/components/auth/sign-out-button.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { signOut, useSession } from "@/lib/auth-client";
+
+export function SignOutButton() {
+  const { data: session, isPending } = useSession();
+  const router = useRouter();
+
+  if (isPending) {
+    return <Button disabled>Loading...</Button>;
+  }
+
+  if (!session) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outline"
+      onClick={async () => {
+        await signOut();
+        router.replace("/");
+        router.refresh();
+      }}
+    >
+      Sign out
+    </Button>
+  );
+}

package/template/src/components/auth/sign-up-form.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { signUp } from "@/lib/auth-client"
+
+export function SignUpForm() {
+  const router = useRouter()
+  const [name, setName] = useState("")
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+  const [error, setError] = useState("")
+  const [isPending, setIsPending] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError("")
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match")
+      return
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters")
+      return
+    }
+
+    setIsPending(true)
+
+    try {
+      const result = await signUp.email({
+        name,
+        email,
+        password,
+        callbackURL: "/dashboard",
+      })
+
+      if (result.error) {
+        setError(result.error.message || "Failed to create account")
+      } else {
+        router.push("/dashboard")
+        router.refresh()
+      }
+    } catch {
+      setError("An unexpected error occurred")
+    } finally {
+      setIsPending(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 w-full max-w-sm">
+      <div className="space-y-2">
+        <Label htmlFor="name">Name</Label>
+        <Input
+          id="name"
+          type="text"
+          placeholder="Your name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          disabled={isPending}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="email">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          placeholder="you@example.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          disabled={isPending}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="password">Password</Label>
+        <Input
+          id="password"
+          type="password"
+          placeholder="Create a password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+          disabled={isPending}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="confirmPassword">Confirm Password</Label>
+        <Input
+          id="confirmPassword"
+          type="password"
+          placeholder="Confirm your password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+          disabled={isPending}
+        />
+      </div>
+      {error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
+      <Button type="submit" className="w-full" disabled={isPending}>
+        {isPending ? "Creating account..." : "Create account"}
+      </Button>
+      <div className="text-center text-sm text-muted-foreground">
+        Already have an account?{" "}
+        <Link href="/login" className="text-primary hover:underline">
+          Sign in
+        </Link>
+      </div>
+    </form>
+  )
+}

package/template/src/components/auth/user-profile.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { User, LogOut } from "lucide-react";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useSession, signOut } from "@/lib/auth-client";
+
+export function UserProfile() {
+  const { data: session, isPending } = useSession();
+  const router = useRouter();
+
+  if (isPending) {
+    return <div>Loading...</div>;
+  }
+
+  if (!session) {
+    return (
+      <div className="flex items-center gap-2">
+        <Link href="/login">
+          <Button variant="ghost" size="sm">
+            Sign in
+          </Button>
+        </Link>
+        <Link href="/register">
+          <Button size="sm">Sign up</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  const handleSignOut = async () => {
+    await signOut();
+    router.replace("/");
+    router.refresh();
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Avatar className="size-8 cursor-pointer hover:opacity-80 transition-opacity">
+          <AvatarImage
+            src={session.user?.image || ""}
+            alt={session.user?.name || "User"}
+            referrerPolicy="no-referrer"
+          />
+          <AvatarFallback>
+            {(
+              session.user?.name?.[0] ||
+              session.user?.email?.[0] ||
+              "U"
+            ).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">
+              {session.user?.name}
+            </p>
+            <p className="text-xs leading-none text-muted-foreground">
+              {session.user?.email}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/profile" className="flex items-center">
+            <User className="mr-2 h-4 w-4" />
+            Your Profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleSignOut} variant="destructive">
+          <LogOut className="mr-2 h-4 w-4" />
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/template/src/components/setup-checklist.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { CheckCircle2, XCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type 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: "ok" | "warn" | "error";
+};
+
+function StatusIcon({ ok }: { ok: boolean }) {
+  return ok ? (
+    <div title="ok">
+      <CheckCircle2 className="h-4 w-4 text-green-600" aria-label="ok" />
+    </div>
+  ) : (
+    <div title="not ok">
+      <XCircle className="h-4 w-4 text-red-600" aria-label="not-ok" />
+    </div>
+  );
+}
+
+export function SetupChecklist() {
+  const [data, setData] = useState<DiagnosticsResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  async function load() {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/diagnostics", { cache: "no-store" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const json = (await res.json()) as DiagnosticsResponse;
+      setData(json);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load diagnostics");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch("/api/diagnostics", { cache: "no-store" });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const json = (await res.json()) as DiagnosticsResponse;
+        if (!cancelled) setData(json);
+      } catch (e) {
+        if (!cancelled)
+          setError(
+            e instanceof Error ? e.message : "Failed to load diagnostics",
+          );
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const steps = [
+    {
+      key: "env",
+      label: "Environment variables",
+      ok:
+        !!data?.env.POSTGRES_URL &&
+        !!data?.env.BETTER_AUTH_SECRET &&
+        !!data?.env.GOOGLE_CLIENT_ID &&
+        !!data?.env.GOOGLE_CLIENT_SECRET,
+      detail:
+        "Requires POSTGRES_URL, BETTER_AUTH_SECRET, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET",
+    },
+    {
+      key: "db",
+      label: "Database connected & schema",
+      ok: !!data?.database.connected && !!data?.database.schemaApplied,
+      detail: data?.database.error
+        ? `Error: ${data.database.error}`
+        : undefined,
+    },
+    {
+      key: "auth",
+      label: "Auth configured",
+      ok: !!data?.auth.configured,
+      detail:
+        data?.auth.routeResponding === false
+          ? "Auth route not responding"
+          : undefined,
+    },
+    {
+      key: "ai",
+      label: "AI integration (optional)",
+      ok: !!data?.ai.configured,
+      detail: !data?.ai.configured
+        ? "Set OPENROUTER_API_KEY for AI chat"
+        : undefined,
+    },
+    {
+      key: "storage",
+      label: "File storage (optional)",
+      ok: true, // Always considered "ok" since local storage works
+      detail: data?.storage
+        ? data.storage.type === "remote"
+          ? "Using Vercel Blob storage"
+          : "Using local storage (public/uploads/)"
+        : undefined,
+    },
+  ] as const;
+
+  const completed = steps.filter((s) => s.ok).length;
+
+  return (
+    <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">
+        {steps.map((s) => (
+          <li key={s.key} className="flex items-start gap-2">
+            <div className="mt-0.5">
+              <StatusIcon ok={Boolean(s.ok)} />
+            </div>
+            <div>
+              <div className="font-medium">{s.label}</div>
+              {s.detail ? (
+                <div className="text-sm text-muted-foreground">{s.detail}</div>
+              ) : null}
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      {data ? (
+        <div className="mt-4 text-xs text-muted-foreground">
+          Last checked: {new Date(data.timestamp).toLocaleString()}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/template/src/components/site-footer.tsx

@@ -0,0 +1,24 @@
+import { GitHubStars } from "./ui/github-stars";
+
+export function SiteFooter() {
+  return (
+    <footer className="border-t py-4 sm:py-6 text-center text-sm text-muted-foreground">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center space-y-3">
+          <GitHubStars repo="AlexandreXavier/xani-agentic-starter-kit" />
+          <p>
+            Built using Xani Agentic Starter Kit by{" "}
+            <a
+              href="https://github.com/AlexandreXavier"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+            >
+              AlexandreXavier
+            </a>
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/template/src/components/site-header.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { Bot } from "lucide-react";
+import { UserProfile } from "@/components/auth/user-profile";
+import { ModeToggle } from "./ui/mode-toggle";
+
+export function SiteHeader() {
+  return (
+    <>
+      {/* Skip to main content link for accessibility */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-background focus:text-foreground focus:border focus:rounded-md"
+      >
+        Skip to main content
+      </a>
+      <header className="border-b" role="banner">
+        <nav
+          className="container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex justify-between items-center"
+          aria-label="Main navigation"
+        >
+          <h1 className="text-xl sm:text-2xl font-bold">
+            <Link
+              href="/"
+              className="flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
+              aria-label="Starter Kit - Go to homepage"
+            >
+              <div
+                className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10"
+                aria-hidden="true"
+              >
+                <Bot className="h-5 w-5" />
+              </div>
+              <span className="bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
+                Starter Kit
+              </span>
+            </Link>
+          </h1>
+          <div className="flex items-center gap-2 sm:gap-4" role="group" aria-label="User actions">
+            <UserProfile />
+            <ModeToggle />
+          </div>
+        </nav>
+      </header>
+    </>
+  );
+}