nextjs-hackathon-stack 0.1.15 → 0.1.16

package/dist/index.js

@@ -104,7 +104,7 @@ async function scaffold(projectName, skipInstall) {
   if (!skipInstall) {
     spinner2.start("Installing dependencies (this may take a minute)");
     try {
-      execSync("pnpm install", { cwd: targetDir, stdio: "pipe" });
+      execSync("pnpm install", { cwd: targetDir, stdio: "pipe", env: { ...process.env, HUSKY: "0" } });
       spinner2.stop("Dependencies installed");
     } catch (err) {
       spinner2.stop("Failed to install dependencies");
@@ -151,15 +151,14 @@ async function scaffold(projectName, skipInstall) {
   } catch {
     spinner2.stop("Husky setup failed \u2014 run manually: pnpm exec husky");
   }
-  success(pc2.bold(`Project "${projectName}" created!`));
+  success(pc2.bold(`\xA1Proyecto "${projectName}" creado!`));
   console.log(`
-  ${pc2.dim("Next steps:")}`);
+  ${pc2.dim("Siguientes pasos:")}`);
   console.log(`  ${pc2.cyan(`cd ${projectName}`)}`);
-  console.log(`  ${pc2.yellow("Edit .env.local and fill in your API keys:")}`);
-  console.log(`    ${pc2.dim("NEXT_PUBLIC_SUPABASE_URL")}       \u2014 from supabase.com > Project Settings > API`);
-  console.log(`    ${pc2.dim("NEXT_PUBLIC_SUPABASE_ANON_KEY")}  \u2014 from supabase.com > Project Settings > API`);
-  console.log(`    ${pc2.dim("DATABASE_URL")}                   \u2014 from supabase.com > Project Settings > Database`);
-  console.log(`    ${pc2.dim("AI_GATEWAY_URL")}                 \u2014 from vercel.com > AI > Gateways`);
+  console.log(`  ${pc2.yellow("Edita .env.local y completa tus credenciales:")}`);
+  console.log(`    ${pc2.dim("NEXT_PUBLIC_SUPABASE_URL")}       \u2014 supabase.com > Project Settings > API`);
+  console.log(`    ${pc2.dim("NEXT_PUBLIC_SUPABASE_ANON_KEY")}  \u2014 supabase.com > Project Settings > API`);
+  console.log(`    ${pc2.dim("DATABASE_URL")}                   \u2014 supabase.com > Project Settings > Database`);
   console.log(`  ${pc2.cyan("pnpm dev")}
 `);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-hackathon-stack",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Scaffold a full-stack Next.js hackathon starter",
   "type": "module",
   "bin": {

package/template/_env.example

@@ -9,13 +9,6 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
 # Supabase DB — https://supabase.com > Project Settings > Database > Connection string (URI)
 DATABASE_URL=postgresql://postgres:[password]@db.your-project-id.supabase.co:5432/postgres
 
-# AI — Vercel AI Gateway (default: MiniMax M2.1)
-# Create gateway at: https://vercel.com > AI > Gateways
-AI_GATEWAY_URL=https://gateway.ai.vercel.app/v1/your-team-id/your-gateway-id
-AI_API_KEY=
-# Optional: override model (default: minimax/minimax-m2.1)
-# AI_MODEL=minimax/minimax-m2.1
-
 # =============================================================================
 # OPTIONAL
 # =============================================================================

package/template/package.json.tmpl

@@ -26,15 +26,12 @@
     "drizzle-orm": "^0.44",
     "drizzle-zod": "^0.7",
     "@tanstack/react-query": "^5",
-    "ai": "^4.3",
-    "@ai-sdk/react": "^1",
     "react-hook-form": "^7",
     "@hookform/resolvers": "^3",
     "zod": "^3",
     "react": "^19",
     "react-dom": "^19",
     "postgres": "^3",
-    "@ai-sdk/openai": "^1",
     "clsx": "^2",
     "tailwind-merge": "^2",
     "class-variance-authority": "^0.7",

package/template/src/app/(protected)/page.tsx

@@ -1,24 +1,33 @@
-import { ChatUi } from "@/features/chat/components/chat-ui";
+import { TodoList } from "@/features/todos/components/todo-list";
+import { AddTodoForm } from "@/features/todos/components/add-todo-form";
 import { logoutAction } from "@/features/auth/actions/logout.action";
 import { createClient } from "@/shared/lib/supabase/server";
+import { db } from "@/shared/db";
+import { todos } from "@/shared/db/schema";
+import { eq } from "drizzle-orm";
 
 export default async function HomePage() {
   const supabase = await createClient();
   const {
     data: { user },
   } = await supabase.auth.getUser();
+  const items = await db.select().from(todos).where(eq(todos.userId, user!.id));
 
   return (
-    <main className="container mx-auto p-8">
-      <div className="mb-4 flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Welcome, {user?.email}</h1>
+    <main className="container mx-auto max-w-2xl p-8">
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Mis tareas</h1>
         <form action={logoutAction}>
-          <button type="submit" className="rounded bg-gray-200 px-4 py-2 text-sm hover:bg-gray-300">
-            Log out
+          <button
+            type="submit"
+            className="rounded bg-gray-200 px-4 py-2 text-sm hover:bg-gray-300"
+          >
+            Cerrar sesión
           </button>
         </form>
       </div>
-      <ChatUi />
+      <AddTodoForm />
+      <TodoList items={items} />
     </main>
   );
 }

package/template/src/app/__tests__/protected-page.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from "vitest";
 
 const mockGetUser = vi.fn();
+const mockSelect = vi.fn();
 
 vi.mock("@/shared/lib/supabase/server", () => ({
   createClient: vi.fn(() =>
@@ -10,14 +11,29 @@ vi.mock("@/shared/lib/supabase/server", () => ({
   ),
 }));
 
-vi.mock("@/features/chat/components/chat-ui", () => ({
-  ChatUi: () => <div data-testid="chat-ui" />,
+vi.mock("@/shared/db", () => ({
+  db: {
+    select: vi.fn(() => ({
+      from: vi.fn(() => ({
+        where: mockSelect,
+      })),
+    })),
+  },
+}));
+
+vi.mock("@/features/todos/components/todo-list", () => ({
+  TodoList: () => <div data-testid="todo-list" />,
+}));
+
+vi.mock("@/features/todos/components/add-todo-form", () => ({
+  AddTodoForm: () => <div data-testid="add-todo-form" />,
 }));
 
 describe("HomePage (protected)", () => {
-  it("renders welcome message with user email", async () => {
+  it("renderiza la página con las tareas del usuario", async () => {
     // Arrange
-    mockGetUser.mockResolvedValue({ data: { user: { email: "user@example.com" } } });
+    mockGetUser.mockResolvedValue({ data: { user: { id: "u1", email: "user@example.com" } } });
+    mockSelect.mockResolvedValue([]);
     const { default: HomePage } = await import("../(protected)/page");
 
     // Act
@@ -27,9 +43,10 @@ describe("HomePage (protected)", () => {
     expect(result).toBeTruthy();
   });
 
-  it("renders with null user gracefully", async () => {
+  it("renderiza correctamente con lista de tareas vacía", async () => {
     // Arrange
-    mockGetUser.mockResolvedValue({ data: { user: null } });
+    mockGetUser.mockResolvedValue({ data: { user: { id: "u1", email: "user@example.com" } } });
+    mockSelect.mockResolvedValue([]);
     const { default: HomePage } = await import("../(protected)/page");
 
     // Act

package/template/src/e2e/todos.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Página de tareas", () => {
+  test("muestra el título Mis tareas", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByRole("heading", { name: "Mis tareas" })).toBeVisible();
+  });
+
+  test("muestra el formulario para agregar tareas", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByRole("textbox", { name: /nueva tarea/i })).toBeVisible();
+    await expect(page.getByRole("button", { name: /agregar/i })).toBeVisible();
+  });
+});

package/template/src/features/auth/__tests__/login-form.test.tsx

@@ -21,8 +21,8 @@ describe("LoginForm", () => {
     render(<LoginForm />);
 
     // Assert
-    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/correo/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/contraseña/i)).toBeInTheDocument();
   });
 
   it("renders submit button", () => {
@@ -30,7 +30,7 @@ describe("LoginForm", () => {
     render(<LoginForm />);
 
     // Assert
-    expect(screen.getByRole("button", { name: /sign in/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /iniciar sesión/i })).toBeInTheDocument();
   });
 
   it("shows validation error when submitting with empty email", async () => {
@@ -39,10 +39,10 @@ describe("LoginForm", () => {
     render(<LoginForm />);
 
     // Act
-    await user.click(screen.getByRole("button", { name: /sign in/i }));
+    await user.click(screen.getByRole("button", { name: /iniciar sesión/i }));
 
     // Assert
-    expect(await screen.findByText(/invalid email/i)).toBeInTheDocument();
+    expect(await screen.findByText(/correo electrónico inválido/i)).toBeInTheDocument();
   });
 
   it("shows validation error for short password", async () => {
@@ -51,12 +51,12 @@ describe("LoginForm", () => {
     render(<LoginForm />);
 
     // Act
-    await user.type(screen.getByLabelText(/email/i), "user@example.com");
-    await user.type(screen.getByLabelText(/password/i), "short");
-    await user.click(screen.getByRole("button", { name: /sign in/i }));
+    await user.type(screen.getByLabelText(/correo/i), "user@example.com");
+    await user.type(screen.getByLabelText(/contraseña/i), "short");
+    await user.click(screen.getByRole("button", { name: /iniciar sesión/i }));
 
     // Assert
-    expect(await screen.findByText(/at least 8 characters/i)).toBeInTheDocument();
+    expect(await screen.findByText(/al menos 8 caracteres/i)).toBeInTheDocument();
   });
 
   it("submits with valid credentials and calls loginAction", async () => {
@@ -65,9 +65,9 @@ describe("LoginForm", () => {
     render(<LoginForm />);
 
     // Act
-    await user.type(screen.getByLabelText(/email/i), "user@example.com");
-    await user.type(screen.getByLabelText(/password/i), "password123");
-    await user.click(screen.getByRole("button", { name: /sign in/i }));
+    await user.type(screen.getByLabelText(/correo/i), "user@example.com");
+    await user.type(screen.getByLabelText(/contraseña/i), "password123");
+    await user.click(screen.getByRole("button", { name: /iniciar sesión/i }));
 
     // Assert
     await waitFor(() => {
@@ -82,9 +82,9 @@ describe("LoginForm", () => {
     render(<LoginForm />);
 
     // Act
-    await user.type(screen.getByLabelText(/email/i), "user@example.com");
-    await user.type(screen.getByLabelText(/password/i), "password123");
-    await user.click(screen.getByRole("button", { name: /sign in/i }));
+    await user.type(screen.getByLabelText(/correo/i), "user@example.com");
+    await user.type(screen.getByLabelText(/contraseña/i), "password123");
+    await user.click(screen.getByRole("button", { name: /iniciar sesión/i }));
 
     // Assert
     await waitFor(() => {

package/template/src/features/auth/components/login-form.tsx

@@ -13,8 +13,8 @@ import { Input } from "@/shared/components/ui/input";
 import { Label } from "@/shared/components/ui/label";
 
 const schema = z.object({
-  email: z.string().email("Invalid email"),
-  password: z.string().min(8, "Password must be at least 8 characters"),
+  email: z.string().email("Correo electrónico inválido"),
+  password: z.string().min(8, "La contraseña debe tener al menos 8 caracteres"),
 });
 
 type FormValues = z.infer<typeof schema>;
@@ -41,8 +41,8 @@ export function LoginForm() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Sign in</CardTitle>
-        <CardDescription>Enter your email and password below</CardDescription>
+        <CardTitle>Iniciar sesión</CardTitle>
+        <CardDescription>Ingresa tu correo y contraseña</CardDescription>
       </CardHeader>
       <CardContent>
         <form onSubmit={(e) => { void onSubmit(e); }} data-testid="login-form" className="space-y-4">
@@ -53,7 +53,7 @@ export function LoginForm() {
           )}
 
           <div className="space-y-1.5">
-            <Label htmlFor="email">Email</Label>
+            <Label htmlFor="email">Correo electrónico</Label>
             <Input
               id="email"
               type="email"
@@ -67,7 +67,7 @@ export function LoginForm() {
           </div>
 
           <div className="space-y-1.5">
-            <Label htmlFor="password">Password</Label>
+            <Label htmlFor="password">Contraseña</Label>
             <Input
               id="password"
               type="password"
@@ -81,7 +81,7 @@ export function LoginForm() {
           </div>
 
           <Button type="submit" className="w-full" disabled={isPending}>
-            {isPending ? "Signing in…" : "Sign in"}
+            {isPending ? "Iniciando sesión…" : "Iniciar sesión"}
           </Button>
         </form>
       </CardContent>

package/template/src/features/todos/__tests__/add-todo-form.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { AddTodoForm } from "../components/add-todo-form";
+
+const mockAdd = vi.fn().mockResolvedValue(undefined);
+
+vi.mock("../actions/todos.action", () => ({
+  addTodoAction: (...args: unknown[]) => mockAdd(...args),
+}));
+
+describe("AddTodoForm", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renderiza el input y el botón Agregar", () => {
+    // Arrange + Act
+    render(<AddTodoForm />);
+
+    // Assert
+    expect(screen.getByRole("textbox", { name: /nueva tarea/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /agregar/i })).toBeInTheDocument();
+  });
+
+  it("llama a addTodoAction con el título al enviar el formulario", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<AddTodoForm />);
+
+    // Act
+    await user.type(screen.getByRole("textbox", { name: /nueva tarea/i }), "Mi tarea");
+    await user.click(screen.getByRole("button", { name: /agregar/i }));
+
+    // Assert
+    await waitFor(() => {
+      expect(mockAdd).toHaveBeenCalled();
+    });
+  });
+
+  it("limpia el input después de enviar", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<AddTodoForm />);
+    const input = screen.getByRole("textbox", { name: /nueva tarea/i });
+
+    // Act
+    await user.type(input, "Tarea temporal");
+    await user.click(screen.getByRole("button", { name: /agregar/i }));
+
+    // Assert
+    await waitFor(() => {
+      expect(input).toHaveValue("");
+    });
+  });
+
+  it("no envía el formulario si el input está vacío (required)", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<AddTodoForm />);
+
+    // Act
+    await user.click(screen.getByRole("button", { name: /agregar/i }));
+
+    // Assert
+    expect(mockAdd).not.toHaveBeenCalled();
+  });
+});

package/template/src/features/todos/__tests__/todo-list.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { TodoList } from "../components/todo-list";
+
+const mockToggle = vi.fn().mockResolvedValue(undefined);
+const mockDelete = vi.fn().mockResolvedValue(undefined);
+
+vi.mock("../actions/todos.action", () => ({
+  toggleTodoAction: (...args: unknown[]) => mockToggle(...args),
+  deleteTodoAction: (...args: unknown[]) => mockDelete(...args),
+}));
+
+const baseTodo = {
+  id: "1",
+  userId: "u1",
+  title: "Comprar leche",
+  completed: false,
+  createdAt: new Date(),
+};
+
+describe("TodoList", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("muestra mensaje vacío cuando no hay tareas", () => {
+    // Arrange + Act
+    render(<TodoList items={[]} />);
+
+    // Assert
+    expect(screen.getByText(/no tienes tareas/i)).toBeInTheDocument();
+  });
+
+  it("renderiza cada tarea en la lista", () => {
+    // Arrange
+    const items = [
+      { ...baseTodo, id: "1", title: "Tarea uno" },
+      { ...baseTodo, id: "2", title: "Tarea dos" },
+    ];
+
+    // Act
+    render(<TodoList items={items} />);
+
+    // Assert
+    expect(screen.getByText("Tarea uno")).toBeInTheDocument();
+    expect(screen.getByText("Tarea dos")).toBeInTheDocument();
+  });
+
+  it("aplica line-through a tareas completadas", () => {
+    // Arrange
+    const items = [{ ...baseTodo, completed: true }];
+
+    // Act
+    render(<TodoList items={items} />);
+
+    // Assert
+    expect(screen.getByText("Comprar leche")).toHaveClass("line-through");
+  });
+
+  it("llama a toggleTodoAction al cambiar el checkbox", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<TodoList items={[baseTodo]} />);
+
+    // Act
+    await user.click(screen.getByRole("checkbox"));
+
+    // Assert
+    expect(mockToggle).toHaveBeenCalledWith("1");
+  });
+
+  it("llama a deleteTodoAction al pulsar Eliminar", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<TodoList items={[baseTodo]} />);
+
+    // Act
+    await user.click(screen.getByRole("button", { name: /eliminar/i }));
+
+    // Assert
+    expect(mockDelete).toHaveBeenCalledWith("1");
+  });
+});

package/template/src/features/todos/__tests__/todos.action.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+const mockInsert = vi.fn();
+const mockUpdate = vi.fn();
+const mockDelete = vi.fn();
+const mockSelectWhere = vi.fn();
+const mockRevalidatePath = vi.fn();
+const mockGetUser = vi.fn();
+
+vi.mock("next/cache", () => ({
+  revalidatePath: (path: string) => mockRevalidatePath(path),
+}));
+
+vi.mock("@/shared/lib/supabase/server", () => ({
+  createClient: vi.fn(() =>
+    Promise.resolve({
+      auth: { getUser: mockGetUser },
+    })
+  ),
+}));
+
+vi.mock("@/shared/db", () => ({
+  db: {
+    insert: vi.fn(() => ({ values: mockInsert })),
+    update: vi.fn(() => ({ set: vi.fn(() => ({ where: mockUpdate })) })),
+    delete: vi.fn(() => ({ where: mockDelete })),
+    select: vi.fn(() => ({ from: vi.fn(() => ({ where: mockSelectWhere })) })),
+  },
+}));
+
+vi.mock("@/shared/db/schema", () => ({
+  todos: {},
+}));
+
+describe("addTodoAction", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("no hace nada si el título está vacío", async () => {
+    // Arrange
+    const { addTodoAction } = await import("../actions/todos.action");
+    const fd = new FormData();
+    fd.set("title", "  ");
+
+    // Act
+    await addTodoAction(fd);
+
+    // Assert
+    expect(mockInsert).not.toHaveBeenCalled();
+  });
+
+  it("no hace nada si no hay usuario autenticado", async () => {
+    // Arrange
+    mockGetUser.mockResolvedValue({ data: { user: null } });
+    const { addTodoAction } = await import("../actions/todos.action");
+    const fd = new FormData();
+    fd.set("title", "Mi tarea");
+
+    // Act
+    await addTodoAction(fd);
+
+    // Assert
+    expect(mockInsert).not.toHaveBeenCalled();
+  });
+
+  it("inserta la tarea y llama a revalidatePath cuando el usuario existe", async () => {
+    // Arrange
+    mockGetUser.mockResolvedValue({ data: { user: { id: "u1" } } });
+    mockInsert.mockResolvedValue(undefined);
+    const { addTodoAction } = await import("../actions/todos.action");
+    const fd = new FormData();
+    fd.set("title", "Nueva tarea");
+
+    // Act
+    await addTodoAction(fd);
+
+    // Assert
+    expect(mockInsert).toHaveBeenCalledWith({ userId: "u1", title: "Nueva tarea" });
+    expect(mockRevalidatePath).toHaveBeenCalledWith("/");
+  });
+
+  it("no hace nada si el campo title no está presente", async () => {
+    // Arrange
+    const { addTodoAction } = await import("../actions/todos.action");
+    const fd = new FormData();
+
+    // Act
+    await addTodoAction(fd);
+
+    // Assert
+    expect(mockInsert).not.toHaveBeenCalled();
+  });
+});
+
+describe("toggleTodoAction", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("no hace nada si la tarea no existe", async () => {
+    // Arrange
+    mockSelectWhere.mockResolvedValue([]);
+    const { toggleTodoAction } = await import("../actions/todos.action");
+
+    // Act
+    await toggleTodoAction("non-existent-id");
+
+    // Assert
+    expect(mockUpdate).not.toHaveBeenCalled();
+  });
+
+  it("invierte completed y llama a revalidatePath", async () => {
+    // Arrange
+    mockSelectWhere.mockResolvedValue([{ id: "1", completed: false }]);
+    mockUpdate.mockResolvedValue(undefined);
+    const { toggleTodoAction } = await import("../actions/todos.action");
+
+    // Act
+    await toggleTodoAction("1");
+
+    // Assert
+    expect(mockUpdate).toHaveBeenCalled();
+    expect(mockRevalidatePath).toHaveBeenCalledWith("/");
+  });
+});
+
+describe("deleteTodoAction", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("elimina la tarea y llama a revalidatePath", async () => {
+    // Arrange
+    mockDelete.mockResolvedValue(undefined);
+    const { deleteTodoAction } = await import("../actions/todos.action");
+
+    // Act
+    await deleteTodoAction("1");
+
+    // Assert
+    expect(mockDelete).toHaveBeenCalled();
+    expect(mockRevalidatePath).toHaveBeenCalledWith("/");
+  });
+});

package/template/src/features/todos/actions/todos.action.ts

@@ -0,0 +1,34 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { eq } from "drizzle-orm";
+import { db } from "@/shared/db";
+import { todos } from "@/shared/db/schema";
+import { createClient } from "@/shared/lib/supabase/server";
+
+export async function addTodoAction(formData: FormData): Promise<void> {
+  const title = formData.get("title");
+  if (!title || typeof title !== "string" || title.trim() === "") return;
+
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) return;
+
+  await db.insert(todos).values({ userId: user.id, title: title.trim() });
+  revalidatePath("/");
+}
+
+export async function toggleTodoAction(id: string): Promise<void> {
+  const [todo] = await db.select().from(todos).where(eq(todos.id, id));
+  if (!todo) return;
+
+  await db.update(todos).set({ completed: !todo.completed }).where(eq(todos.id, id));
+  revalidatePath("/");
+}
+
+export async function deleteTodoAction(id: string): Promise<void> {
+  await db.delete(todos).where(eq(todos.id, id));
+  revalidatePath("/");
+}

package/template/src/features/todos/components/add-todo-form.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useRef, useTransition } from "react";
+import { addTodoAction } from "../actions/todos.action";
+
+export function AddTodoForm() {
+  const [isPending, startTransition] = useTransition();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    startTransition(async () => {
+      await addTodoAction(formData);
+      if (inputRef.current) inputRef.current.value = "";
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-2" data-testid="add-todo-form">
+      <input
+        ref={inputRef}
+        name="title"
+        type="text"
+        placeholder="Nueva tarea…"
+        required
+        disabled={isPending}
+        className="flex-1 rounded border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400"
+        aria-label="Nueva tarea"
+      />
+      <button
+        type="submit"
+        disabled={isPending}
+        className="rounded bg-black px-4 py-2 text-sm text-white hover:bg-gray-800 disabled:opacity-50"
+      >
+        {isPending ? "Agregando…" : "Agregar"}
+      </button>
+    </form>
+  );
+}

package/template/src/features/todos/components/todo-list.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useTransition } from "react";
+import { toggleTodoAction, deleteTodoAction } from "../actions/todos.action";
+import type { SelectTodo } from "@/shared/db/schema";
+
+interface TodoListProps {
+  items: SelectTodo[];
+}
+
+export function TodoList({ items }: TodoListProps) {
+  const [isPending, startTransition] = useTransition();
+
+  if (items.length === 0) {
+    return (
+      <p className="mt-4 text-center text-sm text-gray-500">
+        No tienes tareas. ¡Agrega una!
+      </p>
+    );
+  }
+
+  return (
+    <ul className="mt-4 space-y-2" data-testid="todo-list">
+      {items.map((todo) => (
+        <li
+          key={todo.id}
+          className="flex items-center justify-between rounded border p-3"
+        >
+          <label className="flex cursor-pointer items-center gap-3">
+            <input
+              type="checkbox"
+              checked={todo.completed}
+              disabled={isPending}
+              onChange={() => {
+                startTransition(() => toggleTodoAction(todo.id));
+              }}
+              aria-label={`Marcar "${todo.title}" como completada`}
+            />
+            <span className={todo.completed ? "line-through text-gray-400" : ""}>
+              {todo.title}
+            </span>
+          </label>
+          <button
+            type="button"
+            disabled={isPending}
+            onClick={() => {
+              startTransition(() => deleteTodoAction(todo.id));
+            }}
+            className="rounded px-2 py-1 text-sm text-red-500 hover:bg-red-50"
+            aria-label={`Eliminar "${todo.title}"`}
+          >
+            Eliminar
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/template/src/shared/db/schema.ts

@@ -1,4 +1,4 @@
-import { pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
+import { boolean, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
 import { createInsertSchema, createSelectSchema } from "drizzle-zod";
 
 export const profiles = pgTable("profiles", {
@@ -13,3 +13,17 @@ export const selectProfileSchema = createSelectSchema(profiles);
 
 export type InsertProfile = typeof profiles.$inferInsert;
 export type SelectProfile = typeof profiles.$inferSelect;
+
+export const todos = pgTable("todos", {
+  id: uuid("id").primaryKey().defaultRandom(),
+  userId: uuid("user_id").notNull(),
+  title: text("title").notNull(),
+  completed: boolean("completed").notNull().default(false),
+  createdAt: timestamp("created_at").notNull().defaultNow(),
+});
+
+export const insertTodoSchema = createInsertSchema(todos);
+export const selectTodoSchema = createSelectSchema(todos);
+
+export type InsertTodo = typeof todos.$inferInsert;
+export type SelectTodo = typeof todos.$inferSelect;

package/template/.cursor/rules/ai.mdc

@@ -1,53 +0,0 @@
----
-description: AI SDK + Edge runtime rules. RISK 3 (cold starts).
-globs: ["src/features/chat/**", "src/shared/lib/ai*"]
----
-
-# AI Rules (Risk 3: Vercel Cold Starts)
-
-## Edge Runtime is Mandatory
-```typescript
-// ✅ ALL AI routes must export this
-export const runtime = "edge";
-
-// ❌ Never use Node.js runtime for AI routes (1-3s cold start)
-// export const runtime = "nodejs"; // WRONG
-```
-
-## Never Mix Edge + DB
-```typescript
-// ❌ WRONG — DB + Edge in same route
-export const runtime = "edge";
-import { db } from "@/shared/db"; // WRONG — postgres driver needs Node.js
-```
-
-If you need DB data in an AI route:
-1. Fetch DB data in a Server Component (Node.js)
-2. Pass to client
-3. Client sends to Edge AI route
-
-## AI Model via AI Gateway
-```typescript
-import { createOpenAI } from "@ai-sdk/openai";
-
-const provider = createOpenAI({
-  baseURL: process.env.AI_GATEWAY_URL,
-  apiKey: process.env.AI_API_KEY,
-});
-
-export const aiModel = provider(process.env.AI_MODEL ?? "minimax/minimax-m2.1");
-```
-
-## Streaming Pattern
-```typescript
-import { streamText } from "ai";
-import { aiModel } from "@/shared/lib/ai";
-
-export const runtime = "edge";
-
-export async function POST(req: Request) {
-  const { messages } = await req.json();
-  const result = streamText({ model: aiModel, messages });
-  return result.toDataStreamResponse();
-}
-```

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

@@ -1,24 +0,0 @@
-import { streamText, type CoreMessage } from "ai";
-
-import { aiModel } from "@/shared/lib/ai";
-
-export const runtime = "edge";
-
-export async function POST(req: Request) {
-  const { messages } = (await req.json()) as { messages: CoreMessage[] };
-
-  const result = streamText({
-    model: aiModel,
-    messages,
-    maxTokens: 2048,
-  });
-
-  return result.toDataStreamResponse({
-    getErrorMessage: (error) => {
-      console.error("[chat] stream error:", error);
-      if (error instanceof Error) return error.message;
-      if (typeof error === "object" && error !== null) return JSON.stringify(error);
-      return String(error);
-    },
-  });
-}

package/template/src/e2e/chat.spec.ts

@@ -1,8 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test.describe("Chat feature", () => {
-  test("login page is accessible", async ({ page }) => {
-    await page.goto("/login");
-    await expect(page.getByTestId("login-form")).toBeVisible();
-  });
-});

package/template/src/features/chat/__tests__/chat-ui.test.tsx

@@ -1,121 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-
-import { ChatUi } from "../components/chat-ui";
-
-const mockUseChat = vi.fn(() => ({
-  messages: [] as { id: string; role: string; content: string }[],
-  input: "",
-  handleInputChange: vi.fn(),
-  handleSubmit: vi.fn(),
-  status: "idle",
-}));
-
-vi.mock("@ai-sdk/react", () => ({
-  useChat: (...args: unknown[]) => mockUseChat(...args),
-}));
-
-describe("ChatUi", () => {
-  it("renders chat input", () => {
-    // Arrange + Act
-    render(<ChatUi />);
-
-    // Assert
-    expect(screen.getByTestId("chat-input")).toBeInTheDocument();
-  });
-
-  it("renders send button", () => {
-    // Arrange + Act
-    render(<ChatUi />);
-
-    // Assert
-    expect(screen.getByRole("button", { name: /send/i })).toBeInTheDocument();
-  });
-
-  it("renders messages list area", () => {
-    // Arrange + Act
-    render(<ChatUi />);
-
-    // Assert
-    expect(screen.getByTestId("chat-ui")).toBeInTheDocument();
-  });
-
-  it("renders user and assistant messages", () => {
-    // Arrange
-    mockUseChat.mockReturnValueOnce({
-      messages: [
-        { id: "1", role: "user", content: "Hello" },
-        { id: "2", role: "assistant", content: "Hi there!" },
-      ],
-      input: "",
-      handleInputChange: vi.fn(),
-      handleSubmit: vi.fn(),
-      status: "idle",
-    });
-
-    // Act
-    render(<ChatUi />);
-
-    // Assert
-    expect(screen.getByText("Hello")).toBeInTheDocument();
-    expect(screen.getByText("Hi there!")).toBeInTheDocument();
-  });
-
-  it("shows loading indicator when status is streaming", () => {
-    // Arrange
-    mockUseChat.mockReturnValueOnce({
-      messages: [],
-      input: "",
-      handleInputChange: vi.fn(),
-      handleSubmit: vi.fn(),
-      status: "streaming",
-    });
-
-    // Act
-    render(<ChatUi />);
-
-    // Assert
-    expect(screen.getByText(/thinking/i)).toBeInTheDocument();
-  });
-
-  it("shows loading indicator when status is submitted", () => {
-    // Arrange
-    mockUseChat.mockReturnValueOnce({
-      messages: [],
-      input: "",
-      handleInputChange: vi.fn(),
-      handleSubmit: vi.fn(),
-      status: "submitted",
-    });
-
-    // Act
-    render(<ChatUi />);
-
-    // Assert
-    expect(screen.getByText(/thinking/i)).toBeInTheDocument();
-  });
-
-  it("strips <think> tags from message content", () => {
-    // Arrange
-    mockUseChat.mockReturnValueOnce({
-      messages: [
-        {
-          id: "1",
-          role: "assistant",
-          content: "<think>internal reasoning</think>Visible answer",
-        },
-      ],
-      input: "",
-      handleInputChange: vi.fn(),
-      handleSubmit: vi.fn(),
-      status: "idle",
-    });
-
-    // Act
-    render(<ChatUi />);
-
-    // Assert
-    expect(screen.getByText("Visible answer")).toBeInTheDocument();
-    expect(screen.queryByText(/internal reasoning/)).not.toBeInTheDocument();
-  });
-});

package/template/src/features/chat/__tests__/route.test.ts

@@ -1,82 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-
-let capturedGetErrorMessage: ((error: unknown) => string) | undefined;
-
-vi.mock("ai", () => ({
-  streamText: vi.fn(() => ({
-    toDataStreamResponse: vi.fn((opts?: { getErrorMessage?: (e: unknown) => string }) => {
-      capturedGetErrorMessage = opts?.getErrorMessage;
-      return new Response("data: done\n\n");
-    }),
-  })),
-}));
-
-vi.mock("@/shared/lib/ai", () => ({
-  aiModel: {},
-}));
-
-describe("chat route", () => {
-  it("exports runtime as edge and POST handler", async () => {
-    // Arrange + Act
-    const mod = await import("../../../app/api/chat/route");
-
-    // Assert
-    expect(mod.runtime).toBe("edge");
-    expect(typeof mod.POST).toBe("function");
-  });
-
-  it("calls streamText and returns a response", async () => {
-    // Arrange
-    const mod = await import("../../../app/api/chat/route");
-    const req = new Request("http://localhost/api/chat", {
-      method: "POST",
-      body: JSON.stringify({ messages: [{ role: "user", content: "hello" }] }),
-    });
-
-    // Act
-    const response = await mod.POST(req);
-
-    // Assert
-    expect(response).toBeInstanceOf(Response);
-  });
-
-  it("getErrorMessage returns error.message for Error instances", async () => {
-    // Arrange
-    const mod = await import("../../../app/api/chat/route");
-    const req = new Request("http://localhost/api/chat", {
-      method: "POST",
-      body: JSON.stringify({ messages: [] }),
-    });
-    await mod.POST(req);
-
-    // Act + Assert
-    expect(capturedGetErrorMessage).toBeDefined();
-    expect(capturedGetErrorMessage!(new Error("boom"))).toBe("boom");
-  });
-
-  it("getErrorMessage returns JSON for plain objects", async () => {
-    // Arrange
-    const mod = await import("../../../app/api/chat/route");
-    const req = new Request("http://localhost/api/chat", {
-      method: "POST",
-      body: JSON.stringify({ messages: [] }),
-    });
-    await mod.POST(req);
-
-    // Act + Assert
-    expect(capturedGetErrorMessage!({ code: 42 })).toBe('{"code":42}');
-  });
-
-  it("getErrorMessage returns String() for primitives", async () => {
-    // Arrange
-    const mod = await import("../../../app/api/chat/route");
-    const req = new Request("http://localhost/api/chat", {
-      method: "POST",
-      body: JSON.stringify({ messages: [] }),
-    });
-    await mod.POST(req);
-
-    // Act + Assert
-    expect(capturedGetErrorMessage!("plain string")).toBe("plain string");
-  });
-});

package/template/src/features/chat/__tests__/use-chat.test.ts

@@ -1,15 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-
-vi.mock("@ai-sdk/react", () => ({
-  useChat: vi.fn(() => ({ messages: [], input: "" })),
-}));
-
-describe("use-chat re-export", () => {
-  it("re-exports useChat from @ai-sdk/react", async () => {
-    // Arrange + Act
-    const mod = await import("../hooks/use-chat");
-
-    // Assert
-    expect(typeof mod.useChat).toBe("function");
-  });
-});

package/template/src/features/chat/components/chat-ui.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { useChat } from "@ai-sdk/react";
-
-export function ChatUi() {
-  const { messages, input, handleInputChange, handleSubmit, status } = useChat({
-    api: "/api/chat",
-  });
-  const isLoading = status === "streaming" || status === "submitted";
-
-  return (
-    <div className="flex flex-col gap-4" data-testid="chat-ui">
-      <div className="h-96 overflow-y-auto rounded border p-4 space-y-2">
-        {messages.map((message) => (
-          <div
-            key={message.id}
-            className={`rounded p-2 ${
-              message.role === "user" ? "bg-primary/10 ml-8" : "bg-muted mr-8"
-            }`}
-          >
-            <p className="text-sm">{message.content.replace(/<think>[\s\S]*?<\/think>\s*/g, "")}</p>
-          </div>
-        ))}
-        {isLoading && (
-          <div className="bg-muted mr-8 rounded p-2">
-            <p className="text-sm text-muted-foreground">Thinking...</p>
-          </div>
-        )}
-      </div>
-      <form onSubmit={handleSubmit} className="flex gap-2">
-        <input
-          value={input}
-          onChange={handleInputChange}
-          placeholder="Ask anything..."
-          className="flex-1 rounded border px-3 py-2"
-          data-testid="chat-input"
-        />
-        <button
-          type="submit"
-          disabled={isLoading || !input.trim()}
-          className="rounded bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50"
-        >
-          Send
-        </button>
-      </form>
-    </div>
-  );
-}

package/template/src/features/chat/hooks/use-chat.ts

@@ -1 +0,0 @@
-export { useChat } from "@ai-sdk/react";

package/template/src/shared/__tests__/ai.test.ts

@@ -1,9 +0,0 @@
-import { describe, it, expect } from "vitest";
-
-import { aiModel } from "../lib/ai";
-
-describe("aiModel", () => {
-  it("exports aiModel", () => {
-    expect(aiModel).toBeDefined();
-  });
-});

package/template/src/shared/lib/ai.ts

@@ -1,8 +0,0 @@
-import { createOpenAI } from "@ai-sdk/openai";
-
-const provider = createOpenAI({
-  baseURL: process.env.AI_GATEWAY_URL ?? "https://gateway.ai.vercel.app/v1",
-  apiKey: process.env.AI_API_KEY ?? "",
-});
-
-export const aiModel = provider(process.env.AI_MODEL ?? "minimax/minimax-m2.1");