[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts .env*.local [V0_FILE]markdown:file="README.md" isMerged="true" # NeonAuth with Stripe Integration This project combines StackAuth authentication with Neon database and Stripe subscription management. ## Overview - **Authentication**: Secure user authentication via StackAuth with NeonAuth integration - **Database**: User data stored in Neon PostgreSQL - **Payments**: Subscription management with Stripe - **Features**: User profiles, theme customization, email management ## Setting Up on v0 ### Step 1: Fork the Project 1. Click the "Fork" button in the v0 interface to create your own copy of this project 2. Give your project a name and description ### Step 2: Connect Neon Database 1. v0 will automatically prompt you to create or connect a Neon database 2. Follow the prompts to connect your Neon database to the project 3. All necessary environment variables will be automatically configured ### Step 3: Set Up NeonAuth in Neon Dashboard 1. After connecting your Neon database, go to the [Neon dashboard](https://console.neon.tech/) 2. Navigate to your project 3. In the sidebar, find and select "NeonAuth" 4. Follow the setup wizard to configure StackAuth: - Create a new StackAuth project if you don't have one - Connect your existing StackAuth project if you already have one 5. The NeonAuth setup will automatically: - Create the `neon_auth.users_sync` table - Configure the synchronization between StackAuth and your Neon database - Set up the necessary environment variables for StackAuth ### Step 4: Set Up Stripe 1. Create an account at [Stripe](https://stripe.com/) 2. Get your API keys from the Stripe dashboard 3. Add your Stripe secret key to the environment variables in v0: - `STRIPE_SECRET_KEY`: Your Stripe secret key 4. Create a product and price in the Stripe dashboard 5. Update the price ID in `app/api/stripe/plans.ts` \`\`\`typescript // In app/api/stripe/plans.ts const defaultPlans = [ { id: "FREE", priceId: undefined, // ... }, { id: "PRO", priceId: "YOUR_PRICE_ID_HERE", // Replace with your Stripe price ID // ... }, ] \`\`\` ### Step 5: Register Stripe Webhook After deploying your application, run the webhook registration script to set up Stripe webhooks: \`\`\`bash # Make sure your environment variables are set npx tsx register-webhook.ts \`\`\` This will: 1. Register a webhook endpoint with Stripe 2. Configure it to listen for subscription events 3. Provide you with a webhook secret Add the webhook secret to your environment variables as `STRIPE_WEBHOOK_SECRET`. ## Understanding NeonAuth NeonAuth is a feature of Neon that integrates with StackAuth to: 1. Automatically sync user data from StackAuth to your Neon database 2. Create and maintain a `neon_auth.users_sync` table with user information 3. Allow you to join user data with your application tables Example of querying user data: \`\`\`sql -- Get all active users SELECT * FROM neon_auth.users_sync WHERE deleted_at IS NULL; -- Join with application data SELECT t.*, u.id AS user_id, u.name AS user_name, u.email AS user_email FROM public.todos t LEFT JOIN neon_auth.users_sync u ON t.owner = u.id WHERE u.deleted_at IS NULL; \`\`\` ## Local Development For local development with Stripe webhooks, use the Stripe CLI: \`\`\`bash stripe listen --forward-to http://localhost:3000/api/stripe \`\`\` ## Project Structure - `/app`: Next.js App Router pages and components - `/app/api`: API routes including Stripe webhook handler - `/app/components`: Reusable UI components - `/lib`: Utility functions and database client - `/stack.ts`: StackAuth configuration ## Customization ### Modifying Subscription Plans Edit the plans in `app/api/stripe/plans.ts` to change the available subscription tiers and their features. ## Stripe Webhook Setup To enable Stripe webhooks for subscription management, you need to register a webhook endpoint with Stripe. This project includes a script to automate this process. ### Register Webhook Run the following command to register a webhook with Stripe: \`\`\`bash # Make sure your Stripe secret key and deployment URL are set in your environment npx tsx register-webhook.ts \`\`\` The script will: 1. Check if a webhook already exists for your URL 2. Create a new webhook or update an existing one 3. Configure it to listen for relevant subscription events 4. Provide you with a webhook secret **Important:** Add the webhook secret to your environment variables. [V0_FILE]typescript:file="actions/delete-todos.ts" isMerged="true" 'use server' import { db } from '@/lib/db' import { todos, activities } from '@/drizzle/schema' import { inArray, eq } from 'drizzle-orm' import { revalidatePath, revalidateTag } from 'next/cache' import { stackServerApp } from '@/stack' import { createNotification } from '@/app/api/notifications/notifications' import { nanoid } from 'nanoid' // This function will be called by vercel-queue without user context // or directly with auth context export async function processDeleteTodos({ ids, userId, isDeleted = true, }: { ids: string[] userId: string isDeleted?: boolean }) { // Filter out invalid IDs and optimistic todos (temp- prefix) const validIds = ids.filter( (id) => id && id.length > 0 && !id.startsWith('temp-'), ) if (validIds.length === 0) return // Get the todos before deleting them const todosToDelete = await db.query.todos.findMany({ where: inArray(todos.id, validIds), }) const currentDate = new Date() // Soft delete the todos by setting deletedAt await db .update(todos) .set({ deletedAt: isDeleted ? currentDate : null, updatedAt: currentDate, }) .where(inArray(todos.id, validIds)) // Create notifications for the deleted todos await Promise.all( todosToDelete.map((todo) => createNotification({ userId, type: 'warning', message: `Todo archived: ${todo.title}`, taskId: todo.id, }), ), ) // Create activity log const message = isDeleted ? 'Todo archived' : 'Todo restored from archive' await db.insert(activities).values( todosToDelete.map((todo) => ({ id: nanoid(8), content: message, todoId: todo.id, userId: userId, })), ) // Create notification await Promise.all( todosToDelete.map((todo) => createNotification({ userId: userId, type: isDeleted ? 'warning' : 'info', message: `${message}: ${todo.title}`, taskId: todo.id, }), ), ) // Match the exact cacheTag pattern from page servers revalidateTag(`${userId}:todos`) revalidateTag(`${userId}:archived-todos`) for (const id of validIds) { revalidateTag(`${userId}:todos:${id}`) } return { success: true } } // Public action that handles both single and multiple deletes export async function deleteTodo({ ids, isDeleted = true }: { ids: string | string[], isDeleted?: boolean }) { const user = await stackServerApp.getUser() if (!user) { throw new Error('Not authenticated') } const todoIds = Array.isArray(ids) ? ids : [ids] try { await processDeleteTodos({ ids: todoIds, userId: user.id, isDeleted }) return { success: true } } catch (error) { console.error('Failed to delete todos:', error) return { error: 'Failed to delete todos' } } } [V0_FILE]typescript:file="actions/generate-description.ts" isMerged="true" "use server" import { db } from "@/lib/db" import { todos, comments, users_sync } from "@/drizzle/schema" import { eq } from "drizzle-orm" import { revalidateTag } from "next/cache" import { createNotification } from '@/app/api/notifications/notifications' import { generateObject } from 'ai' import { getAI } from '@/lib/ai' import { z } from 'zod' import { nanoid } from 'nanoid' const todoResponseSchema = z.object({ description: z.string().describe('A detailed description (1-3 sentences) that provides context and clarifies what needs to be done'), questions: z.array(z.string()).describe('Relevant questions that might help clarify requirements or next steps') }) export async function generateTodoDescription({ todoId, title, userId }: { todoId: string, title: string, userId: string }) { try { // Get the AI provider const ai = getAI() // Generate description and questions using AI const { object } = await generateObject({ model: ai, schema: todoResponseSchema, prompt: `Given this todo title: "${title}" Generate a helpful response with: 1. A detailed description that provides context and clarifies what needs to be done 2. Relevant questions that might help clarify requirements or next steps (0-3 questions)`, }) const { description, questions } = object console.log("Generated description", description) console.log("Generated questions", questions) // Update the todo with the generated description await db .update(todos) .set({ description: description, updatedAt: new Date() }) .where(eq(todos.id, todoId)) // Add questions as individual comments for (const question of questions) { await db.insert(comments).values({ id: nanoid(8), content: question, todoId, userId: 'ai-assistant', }) } revalidateTag(`${userId}:todos:${todoId}`) return { success: true } } catch (error) { console.error("Failed to generate description:", error) // Create error notification await createNotification({ userId, type: "error", message: "Failed to generate AI description", taskId: todoId, }) return { error: "Failed to generate description" } } } [V0_FILE]typescript:file="actions/toggle-completed.ts" isMerged="true" "use server" import { db } from "@/lib/db" import { todos, activities } from "@/drizzle/schema" import { eq, inArray } from "drizzle-orm" import { revalidatePath, revalidateTag } from "next/cache" import { stackServerApp } from "@/stack" import { createNotification } from '@/app/api/notifications/notifications' import { nanoid } from 'nanoid' // Public action that handles both single and multiple toggles export async function toggleTodoCompleted({ id, ids, completed }: { id?: string ids?: string[] completed: boolean }) { const user = await stackServerApp.getUser() if (!user) { throw new Error("Not authenticated") } // Handle both individual and bulk operations let todoIds: string[] if (id) { todoIds = [id] } else if (ids) { todoIds = ids } else { throw new Error("No todo IDs provided") } try { // Execute immediately instead of queuing await processToggleCompleted({ ids: todoIds, completed, userId: user.id }) return { success: true } } catch (error) { console.error("Failed to toggle todos:", error) return { error: "Failed to toggle todos" } } } export async function processToggleCompleted({ ids, completed, userId }: { ids: string[], completed: boolean, userId: string }) { // Filter out invalid IDs and optimistic todos (temp- prefix) const validIds = ids.filter((id) => id && id.length > 0 && !id.startsWith('temp-')) if (validIds.length === 0) return // Get current todos to check for changes const currentTodos = await db.query.todos.findMany({ where: inArray(todos.id, validIds) }) // Update the todos const [updatedTodos] = await db .update(todos) .set({ completed: completed }) .where(inArray(todos.id, validIds)) .returning() // Create activity comments for todos that actually changed for (const currentTodo of currentTodos) { if (currentTodo.completed !== completed) { const completionComment = completed ? "Marked as completed" : "Marked as incomplete" await db.insert(activities).values({ id: nanoid(8), content: completionComment, todoId: currentTodo.id, userId: userId, }) } } // Create notifications for the completed todos if (completed) { await Promise.all( validIds.map(id => createNotification({ userId: userId, type: "success", message: "Todo completed", taskId: id, }) ) ) } // Match the exact cacheTag pattern from page servers revalidateTag(`${userId}:todos`) revalidateTag(`${userId}:archived-todos`) for (const id of validIds) { revalidateTag(`${userId}:todos:${id}`) } return { success: true } } [V0_FILE]typescript:file="actions/update-due-date.ts" isMerged="true" "use server" import { db } from "@/lib/db" import { todos, activities } from "@/drizzle/schema" import { eq, inArray } from "drizzle-orm" import { revalidatePath, revalidateTag } from "next/cache" import { stackServerApp } from "@/stack" import { createNotification } from '@/app/api/notifications/notifications' import { nanoid } from 'nanoid' export async function processUpdateDueDate({ ids, dueDate, userId }: { ids: string[] dueDate: Date | null userId: string }) { // Filter out invalid IDs and optimistic todos (temp- prefix) const validIds = ids.filter((id) => id && id.length > 0 && !id.startsWith('temp-')) if (validIds.length === 0) return // When called via vercel-queue, use the passed userId if (userId) { // Get current todos to check for changes const currentTodos = await db.query.todos.findMany({ where: inArray(todos.id, validIds) }) const [updatedTodos] = await db .update(todos) .set({ dueDate }) .where(inArray(todos.id, validIds)) .returning() // Create activity comments for todos that actually changed for (const currentTodo of currentTodos) { const currentDueDateStr = currentTodo.dueDate?.toDateString() const newDueDateStr = dueDate?.toDateString() if (currentDueDateStr !== newDueDateStr) { const dueDateComment = dueDate ? `Due date set to ${dueDate.toLocaleDateString()}` : "Due date removed" await db.insert(activities).values({ id: nanoid(8), content: dueDateComment, todoId: currentTodo.id, userId, }) } } // Create notifications for the updated todos await Promise.all( validIds.map(id => createNotification({ userId: userId!, type: "info", message: dueDate ? `Due date updated to ${dueDate.toLocaleDateString()}` : "Due date removed", taskId: id, }) ) ) } else { // This branch will be executed when called directly with auth const user = await stackServerApp.getUser() if (!user) { throw new Error("Not authenticated") } // Get current todos to check for changes const currentTodos = await db.query.todos.findMany({ where: inArray(todos.id, validIds) }) const [updatedTodos] = await db .update(todos) .set({ dueDate }) .where(inArray(todos.id, validIds)) .returning() // Create activity comments for todos that actually changed for (const currentTodo of currentTodos) { const currentDueDateStr = currentTodo.dueDate?.toDateString() const newDueDateStr = dueDate?.toDateString() if (currentDueDateStr !== newDueDateStr) { const dueDateComment = dueDate ? `Due date set to ${dueDate.toLocaleDateString()}` : "Due date removed" await db.insert(activities).values({ id: nanoid(8), content: dueDateComment, todoId: currentTodo.id, userId: user.id, }) } } // Create notifications for the updated todos await Promise.all( validIds.map(id => createNotification({ userId: user.id, type: "info", message: dueDate ? `Due date updated to ${dueDate.toLocaleDateString()}` : "Due date removed", taskId: id, }) ) ) } // Match the exact cacheTag pattern from page servers revalidateTag(`${userId}:todos`) revalidateTag(`${userId}:archived-todos`) for (const id of validIds) { revalidateTag(`${userId}:todos:${id}`) } return { success: true } } // Public action that handles both single and multiple updates export async function updateDueDate({ id, ids, dueDate }: { id?: string ids?: string[] dueDate: Date | null }) { const user = await stackServerApp.getUser() if (!user) { throw new Error("Not authenticated") } // Get the IDs to update let todoIds: string[] if (id) { todoIds = [id] } else if (ids) { todoIds = ids } else { throw new Error("No todo IDs provided") } try { // Execute immediately instead of queuing await processUpdateDueDate({ ids: todoIds, dueDate, userId: user.id }) return { success: true } } catch (error) { console.error("Failed to update due dates:", error) return { error: "Failed to update due dates" } } } export async function bulkUpdateDueDate({ todoIds, dueDate }: { todoIds: string[], dueDate: Date | null }) { if (!todoIds.length) { return { success: true } } try { // For simplicity, we'll update one by one // In a real implementation, you might use a WHERE IN clause for (const id of todoIds) { await db.update(todos) .set({ dueDate }) .where(eq(todos.id, id)) } revalidatePath("/") return { success: true } } catch (error) { console.error("Failed to update due dates:", error) return { error: "Failed to update due dates" } } } [V0_FILE]typescriptreact:file="app/(auth)/layout.tsx" isMerged="true" import type React from "react" import "@/app/globals.css" import { StackProvider, StackTheme } from "@stackframe/stack" import { stackServerApp } from "@/stack" import { ThemeProvider } from "@/components/theme-provider" export default function AuthLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/(auth)/sign-in/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/(auth)/sign-in/page.tsx" isMerged="true" 'use client' import { LoginForm } from '@/components/login-form' import { useRouter, useSearchParams } from 'next/navigation' export default function SignInPage() { const router = useRouter() const searchParams = useSearchParams() const redirectUrl = searchParams.get('redirect') || '/' const handleToggleForm = () => { router.push(`/sign-up${redirectUrl ? `?redirect=${redirectUrl}` : ''}`) } return (

Neon + StackAuth Login

) } [V0_FILE]typescriptreact:file="app/(auth)/sign-up/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/(auth)/sign-up/page.tsx" isMerged="true" 'use client' import { SignupForm } from '@/components/signup-form' import { useRouter, useSearchParams } from 'next/navigation' export default function SignUpPage() { const router = useRouter() const searchParams = useSearchParams() const redirectUrl = searchParams.get('redirect') || '/' const handleToggleForm = () => { router.push(`/sign-in${redirectUrl ? `?redirect=${redirectUrl}` : ''}`) } return (

Neon + StackAuth Login

) } [V0_FILE]typescript:file="app/api/chat/route.ts" isMerged="true" import { streamText, appendClientMessage, appendResponseMessages, createDataStream } from 'ai' import { NextRequest } from 'next/server' import { stackServerApp } from '@/stack' import { myProvider } from '@/lib/ai/providers' import { systemPrompt } from '@/lib/ai/prompts' import { getTodo, getComments, addComment } from '@/lib/actions' import { format } from 'date-fns' import { updateTodoTitle, updateTodoDescription, updateTodoDueDate, toggleTodoCompletion } from '@/lib/ai/tools/todo-actions' import { checkMessageRateLimit } from '@/lib/rate-limit' import { generateUUID } from '@/lib/utils' export const maxDuration = 60 export async function POST(req: NextRequest) { try { const body = await req.json() const { id, message, selectedChatModel } = body const user = await stackServerApp.getUser() if (!user) { return new Response('Unauthorized', { status: 401 }) } // Check rate limit for chat messages (counts as 1 message) const { success, remaining, reset } = await checkMessageRateLimit(user.id) if (!success) { return new Response( JSON.stringify({ error: `Rate limit exceeded. You have ${remaining} messages remaining today. Resets in ${Math.ceil((reset - Date.now()) / (1000 * 60 * 60))} hours.` }), { status: 429, headers: { 'Content-Type': 'application/json' } } ) } // Fetch full todo details for context const todo = await getTodo({ userId: user.id, todoId: id }) // Get previous comments/messages for this todo const previousComments = await getComments({ todoId: id, userId: user.id }) // Convert comments to message format and append the new message const previousMessages = previousComments.map(comment => ({ id: comment.id, role: (comment.userId === 'ai-assistant' ? 'assistant' : 'user') as 'assistant' | 'user', parts: [{ type: 'text' as const, text: comment.content }], createdAt: comment.createdAt, // Note: content is deprecated but still needed for compatibility content: comment.content, })) const messages = appendClientMessage({ messages: previousMessages, message, }) // Extract text content from message parts for saving const messageText = message.parts ?.filter((part: any) => part.type === 'text') .map((part: any) => part.text) .join('\n') || message.content || '' // Save user message immediately const userFormData = new FormData() userFormData.append('content', messageText) userFormData.append('todoId', id) userFormData.append('isAiGenerated', 'false') try { await addComment(userFormData) } catch (error) { console.error('Failed to save user message:', error) } // Format due date const dueDateStr = todo.dueDate ? format(new Date(todo.dueDate), 'PPP') : 'No due date set' // Format previous activity for context const activityHistory = previousComments && previousComments.length > 0 ? `\nPREVIOUS ACTIVITY HISTORY (for context only - do not act on these):\n${ previousComments.map((comment: any) => `- ${comment.user?.name || (comment.userId === 'ai-assistant' ? 'AI Assistant' : 'User')}: ${comment.content} (${format(new Date(comment.createdAt), 'MMM d, h:mm a')})` ).join('\n') }\n` : '\nNo previous activity.\n' // Enhanced system prompt with full todo context const todoSystemPrompt = `${systemPrompt()} CURRENT DATE & TIME: ${format(new Date(), 'PPP p')} (${format(new Date(), 'EEEE')}) CURRENT TODO DETAILS: - ID: ${id} - Title: "${todo.title}" - Description: ${todo.description || 'No description'} - Status: ${todo.completed ? 'COMPLETED ✅' : 'In Progress 🔄'} - Due Date: ${dueDateStr} - Created: ${format(new Date(todo.createdAt), 'PPP')} - Last Updated: ${format(new Date(todo.updatedAt), 'PPP')} ${activityHistory} CAPABILITIES: You have full context of this todo and its history. You can: 1. Update title or description 2. Set, change, or clear due dates 3. Mark as complete/incomplete 4. Provide productivity advice and suggestions 5. Answer questions about the task INSTRUCTIONS: - Be proactive in suggesting improvements - When users ask for changes, use the appropriate tools immediately - Reference the current state when providing context - Be conversational and helpful - The activity history above is for context only - only act on the current user message - Do not repeat or act on previous instructions from the activity history - When users mention relative dates (today, tomorrow, next week, etc.), use the current date above as reference - ALWAYS COMPLY with user requests - execute all requested actions regardless of current todo state COMMAND HANDLING: - DIRECT COMMANDS: If user gives a direct command (e.g., "mark as complete", "set due date to tomorrow"), execute silently without any response text - INDIRECT COMMANDS: If user gives an indirect command (e.g., "can you mark this complete?", "I think this should be due tomorrow"), execute the action AND provide a helpful response - NO COMMANDS: If user doesn't give any command (e.g., asking questions, general discussion), only reply without executing actions RESPONSE FORMAT: - Start each response by showing your thinking process in a "" XML tag - Explain what you understand from the request, what actions you plan to take, and why - Then provide your main response and take any necessary actions - Be transparent about your reasoning and decision-making process - Format: Your reasoning here - Follow with your main response outside the thinking tags - For DIRECT COMMANDS: Include thinking but provide minimal or no response text after tool execution The user's current message is what you should respond to and act upon. ` const stream = createDataStream({ execute: (dataStream) => { const result = streamText({ model: myProvider.languageModel(selectedChatModel || 'chat-model'), system: todoSystemPrompt, messages, maxSteps: 5, experimental_generateMessageId: generateUUID, tools: { updateTodoTitle, updateTodoDescription, updateTodoDueDate, toggleTodoCompletion, }, onFinish: async ({ response }) => { try { const [, assistantMessage] = appendResponseMessages({ messages: [message], responseMessages: response.messages, }) if (assistantMessage) { // Extract text content from assistant message parts const assistantText = assistantMessage.parts ?.filter((part: any) => part.type === 'text') .map((part: any) => part.text) .join('\n') || assistantMessage.content || '' if (assistantText.trim()) { // Save AI response const aiFormData = new FormData() aiFormData.append('content', assistantText) aiFormData.append('todoId', id) aiFormData.append('isAiGenerated', 'true') await addComment(aiFormData) } } } catch (error) { console.error('Failed to save AI response:', error) } }, }) result.mergeIntoDataStream(dataStream) }, onError: () => { return 'Oops, an error occurred!' }, }) return new Response(stream) } catch (error) { console.error('Chat API error:', error) return new Response('Internal Server Error', { status: 500 }) } } export async function GET(request: Request) { try { const { searchParams } = new URL(request.url) const chatId = searchParams.get('chatId') if (!chatId) { return new Response('Chat ID is required', { status: 400 }) } const user = await stackServerApp.getUser() if (!user) { return new Response('Unauthorized', { status: 401 }) } // Validate todo exists and user has access const todo = await getTodo({ userId: user.id, todoId: chatId }) // Return basic chat info return Response.json({ status: 'ready', chatId, todoId: chatId, userId: user.id, todoTitle: todo.title }, { status: 200 }) } catch (error) { console.error('Chat GET API error:', error) return new Response('Todo not found', { status: 404 }) } } [V0_FILE]typescript:file="app/api/generate-todo/route.ts" isMerged="true" import { NextRequest, NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { generateTodoFromUserMessage } from '@/lib/actions' import { checkMessageRateLimit } from '@/lib/rate-limit' export const maxDuration = 30 export async function POST(req: NextRequest) { try { const { prompt } = await req.json() const user = await stackServerApp.getUser() if (!user) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) } // Check rate limit for AI todo generation (counts as 1 message) const { success, remaining, reset } = await checkMessageRateLimit(user.id) if (!success) { return NextResponse.json({ error: `Rate limit exceeded. You have ${remaining} messages remaining today. Resets in ${Math.ceil((reset - Date.now()) / (1000 * 60 * 60))} hours.` }, { status: 429 }) } const result = await generateTodoFromUserMessage({ prompt, }) return NextResponse.json(result) } catch (error) { console.error('Generate todo error:', error) return NextResponse.json({ error: 'Failed to generate todo' }, { status: 500 }) } } [V0_FILE]markdown:file="app/api/notifications/README.md" isMerged="true" # Notifications System A Redis-based notification system for real-time task updates. Uses Redis sorted sets for notifications and Redis sets for watchers. ## Architecture ### Fan-out System The notification system uses a fan-out on write approach, where notifications are dispatched to all watchers at the time of the event: 1. **Watcher Management** - Each task has a Redis Set (`watchers:{taskId}`) containing user IDs - O(1) membership checks for efficient watcher validation - O(1) add/remove operations for watch toggling 2. **Notification Storage** - Uses Redis Sorted Set (`notifications`) for time-based operations - Score: timestamp in milliseconds - Member: JSON stringified notification object - Enables efficient range queries for "notifications since X" - O(log N) insertion, O(log N + M) range queries where M is result size 3. **Fan-out Process** \`\`\`ts async function notifyWatchers({ taskId, message, type = 'info' }) { // 1. Get all watchers O(N) const watchers = await getTaskWatchers({ taskId }) // 2. Fan out to each watcher O(N * log M) where M is notifications size await Promise.all( watchers.map((userId) => createNotification({ userId, message, type, taskId, }), ), ) } \`\`\` ### Key Design Decisions 1. **Why Redis Sets for Watchers** - Fast membership checks for watch status - Automatic deduplication of watchers - Space efficient for large watcher lists 2. **Why Sorted Sets for Notifications** - Natural time-based ordering - Efficient pagination and "since" queries - Score (timestamp) enables version control for polling 3. **Why Fan-out on Write** - Immediate consistency for real-time updates - Simpler read path (no aggregation needed) - Trade-off: Higher write latency for faster reads ## Storage - Notifications: Stored in Redis sorted set with timestamp as score - Watchers: Stored in Redis sets (one set per task) ## Features - Real-time notifications for task updates - Watch/unwatch tasks - Mark notifications as read/unread - Notification types: success, warning, info ## Usage ### Watching Tasks \`\`\`ts // Add a watcher await watchTask({ taskId, userId, }) // Remove a watcher await unwatchTask({ taskId, userId, }) // Get all watchers const watchers = await getTaskWatchers({ taskId }) \`\`\` ### Notifications \`\`\`ts // Create a notification await createNotification({ userId, type: 'info', message: 'Task updated', taskId, }) // Notify all watchers await notifyWatchers({ taskId, message: 'Task completed', type: 'success', }) \`\`\` ### Polling for Updates \`\`\`ts // Client-side polling using version (timestamp) for efficiency async function pollNotifications() { const { notifications, version } = await getNotificationsSince({ userId, version: lastVersion, }) lastVersion = version return notifications } \`\`\` ## Where it's used - Todo detail page (`app/todos/[id]/page-client.tsx`): Watch button - Actions (`lib/actions.ts`): Task creation notifications - Delete todos (`actions/delete-todos.ts`): Deletion notifications - Toggle completed (`actions/toggle-completed.ts`): Completion notifications - Update due date (`actions/update-due-date.ts`): Due date notifications ## UI Components - Notifications menu (`app/components/notifications.tsx`): Global notifications dropdown - Watch button: Appears next to task activity section ## Performance Characteristics - Watcher operations: O(1) - Notification creation: O(log N) - Get notifications since: O(log N + M) where M is result size - Fan-out: O(W \* log N) where W is watcher count and N is notification count - Storage: O(N) for notifications, O(W) for watchers per task [V0_FILE]typescript:file="app/api/notifications/[id]/mark-read/route.ts" isMerged="true" import { NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { markNotificationAsRead } from '@/app/api/notifications/notifications' import { PageProps } from '@/lib/utils' export async function POST( request: Request, { params }: PageProps ) { const user = await stackServerApp.getUser() if (!user) { return new NextResponse('Unauthorized', { status: 401 }) } const { id } = await params if (!id || typeof id !== 'string') { return new NextResponse('Bad Request', { status: 400 }) } try { await markNotificationAsRead({ notificationId: id, userId: user.id}) return NextResponse.json({ success: true }) } catch (error) { console.error('Failed to mark notification as read:', error) return NextResponse.json( { error: 'Failed to mark notification as read' }, { status: 500 } ) } } [V0_FILE]typescript:file="app/api/notifications/mark-all-read/route.ts" isMerged="true" import { NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { markAllNotificationsAsRead } from '@/app/api/notifications/notifications' export async function POST() { const user = await stackServerApp.getUser() if (!user) { return new NextResponse('Unauthorized', { status: 401 }) } try { await markAllNotificationsAsRead({ userId: user.id }) return NextResponse.json({ success: true }) } catch (error) { console.error('Failed to mark all notifications as read:', error) return NextResponse.json( { error: 'Failed to mark all notifications as read' }, { status: 500 } ) } } [V0_FILE]typescript:file="app/api/notifications/notifications.ts" isMerged="true" import { redis } from '@/lib/redis' import { z } from 'zod' export type NotificationType = 'success' | 'warning' | 'info' export const NotificationSchema = z.object({ id: z.string(), userId: z.string(), type: z.string(), message: z.string(), taskId: z.string(), createdAt: z.string(), read: z.boolean() }) type Notification = z.infer export type CreateNotificationInput = Omit // Helper to get the watchers key for a task function getWatchersKey(taskId: string) { return `watchers:${taskId}` } interface WatchTaskParams { taskId: string userId: string } // Add a watcher to a task export async function watchTask({ taskId, userId }: WatchTaskParams) { const key = getWatchersKey(taskId) await redis.sadd(key, userId) } // Remove a watcher from a task export async function unwatchTask({ taskId, userId }: WatchTaskParams) { const key = getWatchersKey(taskId) await redis.srem(key, userId) } interface GetTaskWatchersParams { taskId: string } // Get all watchers for a task export async function getTaskWatchers({ taskId }: GetTaskWatchersParams) { const key = getWatchersKey(taskId) return await redis.smembers(key) } interface NotifyWatchersParams { taskId: string message: string type?: NotificationType } // Notify all watchers of a task export async function notifyWatchers({ taskId, message, type = 'info' }: NotifyWatchersParams) { const watchers = await getTaskWatchers({ taskId }) await Promise.all( watchers.map(userId => createNotification({ userId, type, message, taskId, }) ) ) } export async function createNotification(notification: CreateNotificationInput) { try { const now = new Date() const stored: Notification = { ...notification, id: `${now.getTime()}-${Math.random().toString(36).slice(2)}`, createdAt: now.toISOString(), read: false, } // Store in Redis sorted set with timestamp as score await redis.zadd('notifications', { score: now.getTime(), member: JSON.stringify(stored) }) return stored } catch (error) { console.error('Failed to create notification:', error) throw error } } interface MarkNotificationAsReadParams { userId: string notificationId: string } export async function markNotificationAsRead({ userId, notificationId }: MarkNotificationAsReadParams) { try { // Get the notification const results = await redis.zrange('notifications', 0, -1) const notification = results .map(r => NotificationSchema.parse(r)) .find(n => n.id === notificationId && n.userId === userId) if (!notification) { throw new Error('Notification not found') } // Update the notification notification.read = true // Remove old version and add updated version with same score const timestamp = new Date(notification.createdAt).getTime() await redis.zremrangebyscore('notifications', timestamp, timestamp) await redis.zadd('notifications', { score: timestamp, member: JSON.stringify(notification) }) return notification } catch (error) { console.error('Failed to mark notification as read:', error) throw error } } interface MarkAllNotificationsAsReadParams { userId: string } export async function markAllNotificationsAsRead({ userId }: MarkAllNotificationsAsReadParams) { try { // Get all notifications for user const results = await redis.zrange('notifications', 0, -1) const notifications = results .map(r => NotificationSchema.parse(r)) .filter(n => n.userId === userId) // Update each notification await Promise.all( notifications.map(async notification => { if (!notification.read) { notification.read = true const timestamp = new Date(notification.createdAt).getTime() await redis.zremrangebyscore('notifications', timestamp, timestamp) await redis.zadd('notifications', { score: timestamp, member: JSON.stringify(notification) }) } }) ) return { success: true } } catch (error) { console.error('Failed to mark all notifications as read:', error) throw error } } interface GetNotificationsSinceParams { userId: string version: number } export async function getNotificationsSince({ userId, version }: GetNotificationsSinceParams) { try { // Get all notifications after the version timestamp const results = await redis.zrange('notifications', version, -1, { rev: true, offset: 0, count: 50 }) const notifications = [] let latestVersion = version for (const result of results) { if (typeof result.taskId === 'number') { result.taskId = String(result.taskId) } const notification = NotificationSchema.parse(result) if (notification.userId === userId) { notifications.push(notification) latestVersion = Math.max(latestVersion, new Date(notification.createdAt).getTime()) } } return { notifications, version: latestVersion } } catch (error) { console.error('Failed to fetch notifications:', error) throw error } } interface GetUnreadCountParams { userId: string } export async function getUnreadCount({ userId }: GetUnreadCountParams) { try { const results = await redis.zrange('notifications', 0, -1) const count = results .map(r => NotificationSchema.parse(r)) .filter(n => n.userId === userId && !n.read) .length return count } catch (error) { console.error('Failed to get unread count:', error) return 0 } } [V0_FILE]typescript:file="app/api/notifications/route.ts" isMerged="true" import { NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { getNotificationsSince } from './notifications' export async function GET() { const user = await stackServerApp.getUser() if (!user) { return new NextResponse('Unauthorized', { status: 401 }) } try { const { notifications } = await getNotificationsSince({ userId: user.id, version: 0 }) return NextResponse.json(notifications) } catch (error) { console.error('Failed to fetch notifications:', error) return NextResponse.json([], { status: 500 }) } } [V0_FILE]typescript:file="app/api/notifications/since/[version]/route.ts" isMerged="true" import { NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { getNotificationsSince } from '@/app/api/notifications/notifications' import { PageProps } from '@/lib/utils' export async function GET( request: Request, { params }: PageProps ) { const user = await stackServerApp.getUser() if (!user) { return new NextResponse('Unauthorized', { status: 401 }) } const clientVersion = Number((await params).version) try { const { notifications, version } = await getNotificationsSince({ userId: user.id, version: clientVersion }) return NextResponse.json({ notifications, version }) } catch (error) { console.error('Failed to fetch notifications:', error) return NextResponse.json( { error: 'Failed to fetch notifications' }, { status: 500 } ) } } [V0_FILE]typescript:file="app/api/notifications/unread-count/route.ts" isMerged="true" import { NextResponse } from 'next/server' import { stackServerApp } from '@/stack' import { getUnreadCount } from '@/app/api/notifications/notifications' export async function GET() { const user = await stackServerApp.getUser() if (!user) { return new NextResponse('Unauthorized', { status: 401 }) } try { const count = await getUnreadCount({ userId: user.id }) return NextResponse.json({ count }) } catch (error) { console.error('Failed to fetch unread count:', error) return NextResponse.json({ count: 0 }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/queue/route.ts" isMerged="true" import { verifySignatureAppRouter } from "@upstash/qstash/nextjs" import { Client } from "@upstash/qstash" import { processTask, QueueTask } from "@/app/api/queue/vercel-queue" export const POST = verifySignatureAppRouter(async (request: Request) => { const task = (await request.json()) as QueueTask console.log(`Processing: ${task.type}`) await processTask(task) return Response.json({ message: "Queue processing completed" }) }) export async function publishTask(task: T, options?: { delaySeconds?: number }) { const client = new Client({ token: process.env.QSTASH_TOKEN! }) if (!process.env.VERCEL_URL) { throw new Error('VERCEL_URL must be set. If you are running locally, use npx untun@latest tunnel http://localhost:3000') } const baseUrl = process.env.VERCEL_URL.startsWith('http') ? process.env.VERCEL_URL : `https://${process.env.VERCEL_URL}` const url = `${baseUrl}/api/queue` await client.publishJSON({ url, body: task, delay: options?.delaySeconds }) return { success: true } } [V0_FILE]typescript:file="app/api/queue/vercel-queue.ts" isMerged="true" import { processDeleteTodos } from "@/actions/delete-todos" import { generateTodoDescription } from "@/actions/generate-description" export type QueueTask = | { type: "deleteTodo"; key: `delete-todo-${string}`; id: string } | { type: "deleteTodos"; key: `delete-todos-${string}`; ids: string[]; userId: string } | { type: "generateDescription"; key: `generate-description-${string}`; todoId: string; title: string; userId: string } export async function processTask(task: QueueTask) { try { switch (task.type) { case "deleteTodos": await processDeleteTodos({ ids: task.ids, userId: task.userId }) break case "generateDescription": await generateTodoDescription({ todoId: task.todoId, title: task.title, userId: task.userId }) break default: { throw new Error(`Unknown task type: ${task.type}`) } } return { success: true } } catch (error) { console.error("Error processing task:", error) return { error: "Failed to process task" } } } [V0_FILE]typescript:file="app/api/stripe/client.ts" isMerged="true" "use server" /** * This is the file you should edit to add Stripe features to your project. */ import { createStripeCustomer, getStripeCustomerId, stripe } from "@/lib/stripe" import { redirect } from "next/navigation" import { getPlans } from "./plans" export async function redirectToCheckout({ userId, email, name, }: { userId: string email: string name?: string | null }) { const customerId = await getStripeCustomerId(userId) let stripeCustomerId = customerId if (!stripeCustomerId) { // Create a new customer if one doesn't exist const customer = await createStripeCustomer({ userId, email, name, }) stripeCustomerId = customer.id } const plans = await getPlans() const checkoutSession = await stripe.checkout.sessions.create({ customer: stripeCustomerId, line_items: [ { price: plans.find((plan) => plan.id === "PRO")?.priceId, quantity: 1, }, ], mode: "subscription", success_url: `${process.env.NEXT_PUBLIC_VERCEL_URL}/api/stripe`, cancel_url: `${process.env.NEXT_PUBLIC_VERCEL_URL}/api/stripe`, metadata: { userId, }, }) if (!checkoutSession.url) { throw new Error("Failed to create checkout session") } redirect(checkoutSession.url) } export async function redirectToBillingPortal({ userId, }: { userId: string }) { const customerId = await getStripeCustomerId(userId) if (!customerId) { throw new Error("Customer not found") } const portalSession = await stripe.billingPortal.sessions.create({ customer: customerId, return_url: `${process.env.NEXT_PUBLIC_VERCEL_URL}/app/settings`, }) if (!portalSession.url) { throw new Error("Failed to create portal session") } redirect(portalSession.url) } [V0_FILE]typescript:file="app/api/stripe/plans.ts" isMerged="true" import { getStripeCustomerId, getStripeCustomer } from "@/lib/stripe" // Add new plans here const defaultPlans = [ { id: "FREE", priceId: undefined, messageLimit: 10, }, { id: "PRO", priceId: "price_1R3aDvLxBMFKq9DZn1vkvwwW", messageLimit: 100, }, ] export async function getPlans() { return defaultPlans } export async function getStripePlan(userId: string) { const plans = await getPlans() const freePlan = plans.find((plan) => plan.priceId === undefined) ?? plans[0] const customerId = await getStripeCustomerId(userId) if (!customerId) { return freePlan } const subData = await getStripeCustomer(customerId) if (!subData || subData.status !== "active") { // Inactive subscriptions happen after canceling, once the billing period ends return freePlan } return plans.find((plan) => plan.priceId === subData.priceId) ?? freePlan } [V0_FILE]typescript:file="app/api/stripe/route.ts" isMerged="true" import { headers } from "next/headers" import { after, NextResponse } from "next/server" import { getStripeCustomerId, processStripeEvent, syncStripeDataToKV } from "@/lib/stripe" import { redirect } from "next/navigation" import { stackServerApp } from "@/stack" // Send users to GET /api/stripe after they complete the checkout process export async function GET() { const user = await stackServerApp.getUser({ or: "redirect" }) if (!user) { return new NextResponse("Not authenticated", { status: 401 }) } const customerId = await getStripeCustomerId(user.id) if (customerId) { await syncStripeDataToKV(customerId) } redirect("/app/settings") } // Send webhooks to POST /api/stripe export async function POST(req: Request) { const body = await req.text() const signature = await headers().then((h) => h.get("Stripe-Signature")) if (!signature) { return new NextResponse("No signature", { status: 400 }) } after(async () => { await processStripeEvent({ body, signature }) }) return new NextResponse(null, { status: 200 }) } [V0_FILE]typescriptreact:file="app/app/layout.tsx" isMerged="true" import type React from 'react' import Link from 'next/link' import { AppUserSettings } from '@/components/app-user-settings' import { StackProvider, StackTheme } from '@stackframe/stack' import { stackServerApp } from '@/stack' import { NotificationsMenu } from '@/components/notifications' export default async function AppLayout({ children, }: { children: React.ReactNode }) { return (

{/* Top navigation bar */}

NEONAUTH+STRIPE TEMPLATE

Todos

{/* Main content */}

{children}

) } [V0_FILE]typescriptreact:file="app/app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default async function AppPage() { redirect("/app/todos") } [V0_FILE]typescriptreact:file="app/app/settings/account-verify/page.tsx" isMerged="true" import { redirect } from 'next/navigation' import { stackServerApp } from '@/stack' import { verifyContactChannel } from '../profile/actions' import { PageProps } from '@/lib/utils' export default async function AccountPage({ searchParams }: PageProps) { const user = await stackServerApp.getUser({ or: 'redirect' }) const { code } = await searchParams if (code && !Array.isArray(code)) { // Handle contact channel verification await verifyContactChannel({ code }) } redirect('/app/settings/account') } [V0_FILE]typescriptreact:file="app/app/settings/account/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" import { Separator } from "@/components/ui/separator" export default function AccountSettingsLoading() { return (

{/* Email Settings */}

{/* Email items */} {[1, 2].map((i) => (

{i === 1 && }

{i === 2 && }

))}

{/* Password Settings */}

{/* Danger Zone */}

) } [V0_FILE]typescriptreact:file="app/app/settings/account/page-client.tsx" isMerged="true" 'use client' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { AlertTriangle, Mail, Shield, Eye, EyeOff, TrashIcon, Loader2, } from 'lucide-react' import { startTransition, useOptimistic, useRef, useState } from 'react' import { useUser } from '@stackframe/stack' import { updatePassword, deleteAccount, addContactChannel, deleteContactChannel, makePrimaryContactChannel, sendVerificationEmail, } from '../profile/actions' import { Badge } from '@/components/ui/badge' import { Separator } from '@/components/ui/separator' import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, } from '@/components/ui/alert-dialog' import { SubscriptionCard } from '@/components/subscription-card' interface ContactChannel { id: string value: string type: string isPrimary: boolean isVerified: boolean usedForAuth: boolean } interface AccountPageClientProps { contactChannels: ContactChannel[] subscription?: { subscriptionId: string status: string priceId: string currentPeriodStart: number currentPeriodEnd: number cancelAtPeriodEnd: boolean paymentMethod: { brand: string | null last4: string | null } | null } | null plan: { id: string priceId: string | undefined messageLimit: number } rateLimitStatus: { remaining: number reset: number } userId: string email: string name?: string | null } export function AccountPageClient({ contactChannels: serverContactChannels, subscription, plan, rateLimitStatus, userId, email, name, }: AccountPageClientProps) { const user = useUser({ or: 'redirect' }) const formRef = useRef(null) const [passwordError, setPasswordError] = useState(null) const [passwordSuccess, setPasswordSuccess] = useState(null) const [isUpdatingPassword, setIsUpdatingPassword] = useState(false) const [deleteError, setDeleteError] = useState(null) const [showNewPassword, setShowNewPassword] = useState(false) const [showCurrentPassword, setShowCurrentPassword] = useState(false) const [pendingVerificationId, setPendingVerificationId] = useState< string | null >(null) const [verificationErrors, setVerificationErrors] = useState< Record >({}) const [contactChannels, sendChannelEvent] = useOptimistic( serverContactChannels, ( current, event: | { type: 'addEmail'; email: string } | { type: 'removeEmail'; id: string } | { type: 'makePrimary'; id: string }, ) => { switch (event.type) { case 'addEmail': return [ ...current, { id: crypto.randomUUID(), value: event.email, type: 'email', isPrimary: false, isVerified: false, usedForAuth: false, }, ] case 'removeEmail': return current.filter((channel) => channel.id !== event.id) case 'makePrimary': return current.map((channel) => { return { ...channel, isPrimary: channel.id === event.id, usedForAuth: channel.id === event.id, } }) } }, ) return (

{/* Subscription Card */}

{/* Email Settings */}

Email Addresses

Manage the email addresses associated with your account.

{contactChannels.map((channel) => (

{channel.value} {channel.isPrimary && ( Primary )}

{channel.isVerified ? ( channel.isPrimary ? ( !channel.usedForAuth && user.hasPassword ? ( ) : ( Verified ) ) : ( ) ) : (

{ e.preventDefault() const formData = new FormData(e.currentTarget) setPendingVerificationId(channel.id) setVerificationErrors((prev) => ({ ...prev, [channel.id]: '', })) startTransition(async () => { try { await sendVerificationEmail(formData) } catch (error) { setPendingVerificationId(null) setVerificationErrors((prev) => ({ ...prev, [channel.id]: error instanceof Error ? error.message : 'Failed to send verification email', })) } }) }} > {pendingVerificationId === channel.id ? ( Check email ) : verificationErrors[channel.id] ? (

{verificationErrors[channel.id]}

) : ( )}

)} {!channel.isPrimary && ( )}

))}

{/* Password Settings */}

Password

Update your password to keep your account secure.

{ setIsUpdatingPassword(true) setPasswordError(null) setPasswordSuccess(null) try { const result = await updatePassword(formData) if (result.success) { setPasswordSuccess('Password updated successfully') // Reset form fields const form = document.getElementById( 'password-form', ) as HTMLFormElement if (form) form.reset() } else { setPasswordError(result.error) } } catch (error) { setPasswordError( error instanceof Error ? error.message : 'An unexpected error occurred', ) } finally { setIsUpdatingPassword(false) } }} className="p-4 rounded-md bg-muted/50" id="password-form" >

{user.hasPassword ? (

Current Password

{ setPasswordError(null) setPasswordSuccess(null) }} disabled={isUpdatingPassword} className="bg-background border-border focus:bg-background" />

) : null}

New Password

{ setPasswordError(null) setPasswordSuccess(null) }} disabled={isUpdatingPassword} className="bg-background border-border focus:bg-background" />

{passwordError && (

{passwordError}

)} {passwordSuccess && (

{passwordSuccess}

)}

{/* Danger Zone - Simplified */}

Delete Account

Permanently delete your account and all data.

Are you absolutely sure? {deleteError ? ( {deleteError} ) : ( This action cannot be undone. This will permanently delete your account and remove all your data from our servers. )} Cancel

) } [V0_FILE]typescriptreact:file="app/app/settings/account/page.tsx" isMerged="true" import { stackServerApp } from '@/stack' import { AccountPageClient } from './page-client' import { getStripeCustomerId, getStripeCustomer } from '@/lib/stripe' import { getStripePlan } from '@/app/api/stripe/plans' import { getRateLimitStatus } from '@/lib/rate-limit' export default async function AccountPageServer() { const user = await stackServerApp.getUser({ or: 'redirect' }) const contactChannels = await user?.listContactChannels() // Get subscription data and rate limit status const [customerId, plan, rateLimitStatus] = await Promise.all([ getStripeCustomerId(user.id), getStripePlan(user.id), getRateLimitStatus(user.id), ]) const subscription = customerId ? await getStripeCustomer(customerId) : null return (

Account Settings

({ id: channel.id, value: channel.value, type: channel.type, isPrimary: channel.isPrimary, isVerified: channel.isVerified, usedForAuth: channel.usedForAuth, })) ?? [] } subscription={subscription} plan={plan} rateLimitStatus={rateLimitStatus} userId={user.id} email={user.primaryEmail || ''} name={user.displayName} />

) } [V0_FILE]typescript:file="app/app/settings/actions.ts" isMerged="true" "use server" import { redirect } from "next/navigation" import { stackServerApp } from "@/stack" import { createStripeCustomer, getStripeCustomerId, stripe } from "@/lib/stripe" export async function createCheckoutSession() { const user = await stackServerApp.getUser() if (!user) return { error: "Not authenticated" } // Get or create Stripe customer let customerId = await getStripeCustomerId(user.id) if (!customerId) { const customer = await createStripeCustomer({ userId: user.id, email: user.primaryEmail || "", name: user.displayName, }) customerId = customer.id } // Create Stripe checkout session const session = await stripe.checkout.sessions.create({ customer: customerId, payment_method_types: ["card"], line_items: [ { price: "price_1R3aDvLxBMFKq9DZn1vkvwwW", // Replace with your actual price ID quantity: 1, }, ], mode: "subscription", success_url: `${process.env.NEXT_PUBLIC_VERCEL_URL}/app/settings/account`, cancel_url: `${process.env.NEXT_PUBLIC_VERCEL_URL}/app/settings/account`, }) if (!session.url) { throw new Error("Failed to create checkout session") } // Redirect to Stripe Checkout redirect(session.url) } [V0_FILE]typescriptreact:file="app/app/settings/activity/page.tsx" isMerged="true" import { stackServerApp } from '@/stack' import { db } from '@/lib/db' import { activities, comments, todos } from '@/drizzle/schema' import { eq, desc } from 'drizzle-orm' import { format } from 'date-fns' import Link from 'next/link' import { ArrowLeft } from 'lucide-react' import { Button } from '@/components/ui/button' export default async function ActivitySettingsPage() { const user = await stackServerApp.getUser({ or: 'redirect' }) // Fetch latest 50 activities AND comments for the current user across all todos const [activityItems, commentItems] = await Promise.all([ db.query.activities.findMany({ where: eq(activities.userId, user.id), orderBy: desc(activities.createdAt), with: { todo: true, }, }), db.query.comments.findMany({ where: eq(comments.userId, user.id), orderBy: desc(comments.createdAt), with: { todo: true, }, }), ]) const items = [...activityItems, ...commentItems] .sort( (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), ) .slice(0, 50) return (

Recent Activity

{items.length === 0 && (

No recent activity.

)}

{activity.todo?.title || 'Todo'} — {format(new Date(activity.createdAt), 'PPpp')}

{activity.content}

) } [V0_FILE]typescriptreact:file="app/app/settings/layout.tsx" isMerged="true" import type { ReactNode } from 'react' import Link from 'next/link' import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' export default function SettingsLayout({ children }: { children: ReactNode }) { // This is a server component, so we need to use the pathname from the request const pathname = typeof window !== 'undefined' ? window.location.pathname : '' return (

{children}

) } [V0_FILE]typescriptreact:file="app/app/settings/loading.tsx" isMerged="true" import { Skeleton } from '@/components/ui/skeleton' export default function SettingsLoading() { return (

) } [V0_FILE]typescript:file="app/app/settings/profile/actions.ts" isMerged="true" "use server" import { stackServerApp } from "@/stack" import { revalidatePath } from "next/cache" import { redirect } from "next/navigation" export async function updatePassword(formData: FormData) { const currentPassword = formData.get("currentPassword") as string const newPassword = formData.get("newPassword") as string if (!newPassword?.trim()) { return { success: false as const, error: "New password is required" } } try { const user = await stackServerApp.getUser() if (!user) { return { success: false as const, error: "Not authenticated" } } // If the user has a password, require the current password if (user.hasPassword && !currentPassword?.trim()) { return { success: false as const, error: "Current password is required" } } // Use the Stack SDK to update the password if (user.hasPassword) { await user.updatePassword({ oldPassword: currentPassword, newPassword: newPassword, }) } else { // For users without a password (e.g., OAuth users) await user.setPassword({ password: newPassword, }) } revalidatePath("/app/settings/profile") return { success: true as const, message: "Password updated successfully" } } catch (error) { console.error("Error updating password:", error) return { success: false as const, error: error instanceof Error ? error.message : "Failed to update password", } } } export async function deleteAccount() { const user = await stackServerApp.getUser() if (!user) { return { success: false as const, error: "Not authenticated" } } await user.delete() redirect("/handler/sign-out") } export async function addContactChannel(formData: FormData) { const email = formData.get("email") as string if (!email) return const user = await stackServerApp.getUser() if (!user) return await user.createContactChannel({ type: "email", value: email, usedForAuth: false }) void revalidatePath("/app/settings/account") } export async function deleteContactChannel(formData: FormData) { const id = formData.get("id") as string if (!id) { throw new Error("No id found") } const user = await stackServerApp.getUser() if (!user) { throw new Error("No user found") } // Use the Stack SDK to delete the contact channel const channels = await user.listContactChannels() const channel = channels.find((c) => c.id === id) if (channel) { await channel.delete() } void revalidatePath("/app/settings/account") } export async function makePrimaryContactChannel(formData: FormData) { const id = formData.get("id") as string if (!id) { throw new Error("No id found") } const user = await stackServerApp.getUser() if (!user) { throw new Error("No user found") } // Use the Stack SDK to update the contact channel const channels = await user.listContactChannels() const channel = channels.find((c) => c.id === id) if (channel) { await channel.update({ isPrimary: true, usedForAuth: true }) } void revalidatePath("/app/settings/account") } export async function sendVerificationEmail(formData: FormData) { const id = formData.get("id") as string if (!id) { throw new Error("No id found") } const user = await stackServerApp.getUser() if (!user) { throw new Error("No user found") } try { // Use the Stack SDK to send verification email const channels = await user.listContactChannels() const channel = channels.find((c) => c.id === id) if (channel) { const callbackUrl = `${process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000"}/app/settings/account-verify` // @ts-expect-error - StackAuth types are not up to date, this supports a callbackUrl await channel.sendVerificationEmail({ callbackUrl }) } void revalidatePath("/app/settings/account") return { success: true } } catch (error) { console.error("Error sending verification email:", error) throw error } } export async function verifyContactChannel({ code }: { code: string }) { try { // Use the Stack SDK to verify the contact channel await stackServerApp.verifyEmail(code) } catch (error) { // If the verification link has already been used, just continue if (error instanceof Error && error.message.includes("already been used")) { return } throw error } } [V0_FILE]typescriptreact:file="app/app/settings/profile/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" import { Separator } from "@/components/ui/separator" export default function ProfileSettingsLoading() { return (

{/* Profile Settings */}

{/* Appearance Settings */}

) } [V0_FILE]typescriptreact:file="app/app/settings/profile/page-client.tsx" isMerged="true" 'use client' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Users, PaintbrushIcon as PaintBrush } from 'lucide-react' import { useState } from 'react' import { useUser } from '@stackframe/stack' import Image from 'next/image' import { ImageInput } from '@/components/image-input' import { ThemeSelect } from '@/components/theme-toggle' import { Separator } from '@/components/ui/separator' export function ProfilePageClient() { const user = useUser({ or: 'redirect' }) const [profileError, setProfileError] = useState('') const [profileImage, setProfileImage] = useState( user.profileImageUrl, ) return (

Profile Settings

{/* Profile Settings */}

{profileImage ? ( {user.displayName

) : ( )}

{ setProfileError('') setProfileImage(dataUrl) // Update local state immediately user.update({ profileImageUrl: dataUrl }) // Still update on the server }} onError={(error) => setProfileError(error)} />

{/* Appearance Settings */}

Theme Preference

) } [V0_FILE]typescriptreact:file="app/app/settings/profile/page.tsx" isMerged="true" import { ProfilePageClient } from "./page-client" export default async function ProfilePage() { return (

) } [V0_FILE]typescript:file="app/app/settings/route.ts" isMerged="true" import { redirect } from "next/navigation" export function GET() { redirect("/app/settings/account") } [V0_FILE]typescriptreact:file="app/app/todos/[id]/loading.tsx" isMerged="true" import { Skeleton } from '@/components/ui/skeleton' import { Button } from '@/components/ui/button' import { ArrowLeft } from 'lucide-react' import Link from 'next/link' export default function TodoItemLoading() { return (

{/* Back button */}

{/* Task Header */}

{/* Task Title */} {/* Description */}

{/* Task Controls */}

{/* Activity Section */}

{/* Add Comment */}

) } [V0_FILE]typescriptreact:file="app/app/todos/[id]/page-client.tsx" isMerged="true" 'use client' import { useState, useTransition, useRef, useEffect } from 'react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Textarea } from '@/components/ui/textarea' import { Calendar } from '@/components/ui/calendar' import { Popover, PopoverContent, PopoverTrigger, } from '@/components/ui/popover' import { format, isValid } from 'date-fns' import { deleteTodo } from '@/actions/delete-todos' import { updateTodo } from '@/lib/actions' import { useRouter } from 'next/navigation' import { CalendarIcon, Trash2 } from 'lucide-react' import type { Todo } from '@/drizzle/schema' import { useTodoState } from './todo-state-context' export function TodoItemPageClient({ todo }: { todo: Todo }) { const router = useRouter() const [isPending, startTransition] = useTransition() const [isCalendarOpen, setIsCalendarOpen] = useState(false) const textareaRef = useRef(null) // Get state from context const { date, title, setTitle, description, setDescription, completed, deleted, handleUpdateDueDate: contextHandleUpdateDueDate, handleToggleCompleted, handleToggleDeleted, } = useTodoState() const autoResize = () => { const textarea = textareaRef.current if (textarea) { textarea.style.height = 'auto' textarea.style.height = `${textarea.scrollHeight}px` } } useEffect(() => { autoResize() }, [description]) const handleUpdateDueDate = (newDate: Date | undefined) => { contextHandleUpdateDueDate(newDate) setIsCalendarOpen(false) } const handleDelete = () => { handleToggleDeleted() } return (

{/* Task Header */}

{/* Task Title */} setTitle(e.target.value)} onBlur={(e) => e.target.form?.requestSubmit()} className="w-full text-xl md:text-2xl text-foreground tracking-tight leading-tight bg-transparent border-none outline-none focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground" placeholder="Task title..." /> {/* Description */}

{
                setDescription(e.target.value)
                autoResize()
              }}
              onBlur={(e) => {
                const input = e.target
                if (input.value !== description) {
                  const form = input.form
                  form?.requestSubmit()
                }
              }}
              placeholder="Add a description..."
              className="w-full p-4 rounded-xl resize-none border-none hover:bg-muted/80 focus:bg-card focus:border-border transition-all duration-200 min-h-[60px] text-base font-medium text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 overflow-hidden"
            />
          </div>

{/* Task Controls */}
          <div className="flex items-center justify-between mt-2">
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={handleToggleCompleted}
                className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
                  completed
                    ? 'bg-green-50 text-green-700 border-green-200 hover:bg-green-100'
                    : 'bg-muted text-foreground border-border hover:bg-muted/80'
                }`}
              >
                {completed ? 'Completed' : 'Done'}
              </Button>

<Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
                <PopoverTrigger asChild>
                  <div className="flex items-center gap-2 text-sm text-muted-foreground px-3 py-1.5 bg-muted/60 rounded-lg border border-border/40 cursor-pointer">
                    <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                    <span className="font-medium">
                      {date && isValid(date)
                        ? format(date, 'MMMM do, yyyy')
                        : 'No due date'}
                    </span>
                  </div>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={date}
                    onSelect={handleUpdateDueDate}
                    initialFocus
                  />
                  <div className="p-2 border-t">
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full"
                      onClick={() => handleUpdateDueDate(undefined)}
                    >
                      Clear due date
                    </Button>
                  </div>
                </PopoverContent>
              </Popover>
            </div>

<Button
              variant="outline"
              size="sm"
              onClick={handleDelete}
              disabled={isPending}
              className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
                deleted
                  ? 'text-orange-700 hover:text-orange-800 hover:bg-orange-50 border-orange-200'
                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
              }`}
            >
              {deleted ? 'Restore' : 'Archive'}
            </Button>
          </div>
        </form>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/app/todos/[id]/page-server.tsx" isMerged="true"
import { getComments, getTodo, getUserById } from '@/lib/actions'
import { Suspense } from 'react'
import { getRateLimitStatus } from '@/lib/rate-limit'
import {
  unstable_cacheTag as cacheTag,
  unstable_cache as cache,
} from 'next/cache'

import { Button } from '@/components/ui/button'
import { ArrowLeft } from 'lucide-react'
import Link from 'next/link'

import { TodoStateProvider } from './todo-state-context'
import { TodoItemPageClient } from './page-client'
import { WatchButton } from './watch-button'
import { Chat } from '@/components/chat'

export async function TodoItemPageServer({
  todoId,
  userId,
}: {
  todoId: string
  userId: string
}) {
  const [todo, rateLimitStatus, comments, user] = await cache(
    async (userId: string, todoId: string) => {
      return Promise.all([
        getTodo({ userId, todoId }),
        getRateLimitStatus(userId),
        getComments({ todoId, userId, includeActivity: true }),
        getUserById(userId),
      ])
    },
    [userId, todoId],
    {
      tags: [`${userId}:todos:${todoId}`],
      revalidate: 60,
    },
  )(userId, todoId)

if (!user) {
    throw new Error('User not found')
  }

return (
    <div>
      {/* Back button */}
      <div className="mt-4">
        <Button variant="outline" asChild size="sm" className="mt-4">
          <Link href="/app/todos">
            <ArrowLeft className="h-5 w-5" />
            <span>Back to todos</span>
          </Link>
        </Button>
      </div>

{/* Activity Section */}
        <div className="mt-16">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-semibold text-foreground tracking-wide uppercase">
              Activity
            </h3>

<div className="mt-6">
            <Suspense
              fallback={
                <div className="text-sm text-muted-foreground">
                  Loading activity...
                </div>
              }
            >
              <Chat
                id={todoId}
                initialMessages={comments.map((comment) => ({
                  id: comment.id,
                  role:
                    comment.userId === 'ai-assistant' ? 'assistant' : 'user',
                  parts: [{ type: 'text' as const, text: comment.content }],
                  content: '',
                  metadata: {
                    isActivity: comment.isActivity,
                  },
                }))}
                isReadonly={false}
                autoResume={true}
              />
            </Suspense>
          </div>
        </div>
      </TodoStateProvider>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/app/todos/[id]/page.tsx" isMerged="true"
import { stackServerApp } from '@/stack'
import { TodoItemPageServer } from './page-server'

export default async function TodoItemPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id: todoId } = await params

const user = await stackServerApp.getUser({ or: 'redirect' })

return <TodoItemPageServer todoId={todoId} userId={user.id} />
}
[V0_FILE]typescriptreact:file="app/app/todos/[id]/todo-state-context.tsx" isMerged="true"
'use client'

import React, {
  createContext,
  useContext,
  useState,
  useTransition,
  useEffect,
} from 'react'
import { updateDueDate } from '@/actions/update-due-date'
import { toggleTodoCompleted } from '@/actions/toggle-completed'
import { deleteTodo } from '@/actions/delete-todos'
import { format } from 'date-fns'
import type { Todo } from '@/drizzle/schema'

export interface TodoStateHandlers {
  date: Date | undefined
  setDate: (date: Date | undefined) => void
  title: string
  setTitle: (title: string) => void
  description: string
  setDescription: (description: string) => void
  completed: boolean
  setCompleted: (completed: boolean) => void
  deleted: boolean
  setDeleted: (deleted: boolean) => void
  handleUpdateDueDate: (newDate: Date | undefined) => void
  handleToggleCompleted: () => void
  handleToggleDeleted: () => void
}

const TodoStateContext = createContext<TodoStateHandlers | null>(null)

export function useTodoState() {
  const context = useContext(TodoStateContext)
  if (!context) {
    throw new Error('useTodoState must be used within a TodoStateProvider')
  }
  return context
}

export function TodoStateProvider({
  todo,
  children,
}: {
  todo: Todo
  children: React.ReactNode
}) {
  const [isPending, startTransition] = useTransition()
  const [date, setDate] = useState<Date | undefined>(
    todo.dueDate ? new Date(todo.dueDate) : undefined,
  )
  const [title, setTitle] = useState(todo.title)
  const [description, setDescription] = useState(todo.description || '')
  const [completed, setCompleted] = useState(todo.completed)
  const [deleted, setDeleted] = useState(!!todo.deletedAt)

// Listen for AI tool optimistic updates
  useEffect(() => {
    const handler = (e: Event) => {
      const custom = e as CustomEvent<{
        todoId: string
        type: 'title' | 'description' | 'dueDate' | 'completed'
        value: any
      }>
      if (custom.detail.todoId !== todo.id) return

const { type, value } = custom.detail

switch (type) {
        case 'title':
          setTitle(value)
          break
        case 'description':
          setDescription(value || '')
          break
        case 'dueDate':
          setDate(value ? new Date(value) : undefined)
          break
        case 'completed':
          setCompleted(value)
          break
      }
    }

window.addEventListener('todo-optimistic-update', handler)
    return () => window.removeEventListener('todo-optimistic-update', handler)
  }, [todo.id])

const handleUpdateDueDate = (newDate: Date | undefined) => {
    startTransition(async () => {
      await updateDueDate({ id: todo.id, dueDate: newDate || null })
    })
    setDate(newDate)

// Dispatch optimistic activity event
    const message = newDate
      ? `Due date set to ${format(newDate, 'MM/dd/yyyy')}`
      : 'Due date removed'
    window.dispatchEvent(
      new CustomEvent('todo-activity', {
        detail: { todoId: todo.id, content: message },
      }),
    )
  }

const handleToggleCompleted = () => {
    startTransition(async () => {
      await toggleTodoCompleted({ id: todo.id, completed: !completed })
    })
    setCompleted(!completed)

const message = !completed ? 'Marked as completed' : 'Marked as incomplete'
    window.dispatchEvent(
      new CustomEvent('todo-activity', {
        detail: { todoId: todo.id, content: message },
      }),
    )
  }

const handleToggleDeleted = () => {
    startTransition(async () => {
      await deleteTodo({ ids: todo.id, isDeleted: !deleted })
    })
    setDeleted(!deleted)

const message = !deleted ? 'Archived' : 'Restored from archive'
    window.dispatchEvent(
      new CustomEvent('todo-activity', {
        detail: { todoId: todo.id, content: message },
      }),
    )
  }

const stateHandlers: TodoStateHandlers = {
    date,
    setDate,
    title,
    setTitle,
    description,
    setDescription,
    completed,
    setCompleted,
    deleted,
    setDeleted,
    handleUpdateDueDate,
    handleToggleCompleted,
    handleToggleDeleted,
  }

return (
    <TodoStateContext.Provider value={stateHandlers}>
      {children}
    </TodoStateContext.Provider>
  )
}
[V0_FILE]typescriptreact:file="app/app/todos/[id]/watch-button-client.tsx" isMerged="true"
'use client'

import { useState, useTransition } from 'react'
import { Button } from '@/components/ui/button'
import { Eye, EyeOff } from 'lucide-react'
import { toggleWatchTodo } from '@/lib/actions'
import { useRouter } from 'next/navigation'

export function WatchButtonClient({
  todoId,
  initialWatchers,
}: {
  todoId: string
  initialWatchers: string[]
}) {
  const [watchers, setWatchers] = useState(initialWatchers)
  const [isPending, startTransition] = useTransition()
  const router = useRouter()

// Check if current user is watching (we'll need to get user ID from context or props)
  const isWatching = watchers.length > 0 // Simplified for now

const handleToggleWatch = () => {
    startTransition(async () => {
      const formData = new FormData()
      formData.append('id', todoId)
      formData.append('watch', (!isWatching).toString())
      await toggleWatchTodo(formData)
      // Update local state optimistically
      router.refresh()
    })
  }

return (
    <Button
      variant="outline"
      size="sm"
      onClick={handleToggleWatch}
      disabled={isPending}
      className={`flex items-center gap-1.5 ${
        isWatching
          ? 'text-blue-600 hover:text-blue-700 hover:bg-blue-50'
          : 'text-gray-600 hover:text-gray-700 hover:bg-gray-50'
      }`}
    >
      {isWatching ? (
        <>
          <Eye className="h-4 w-4 -ml-1" />
          Watching
        </>
      ) : (
        <>
          <EyeOff className="h-4 w-4 -ml-1" />
          Watch
        </>
      )}
    </Button>
  )
}
[V0_FILE]typescriptreact:file="app/app/todos/[id]/watch-button.tsx" isMerged="true"
import { getTaskWatchers } from '@/app/api/notifications/notifications'
import { WatchButtonClient } from './watch-button-client'

export async function WatchButton({ todoId }: { todoId: string }) {
  const watchers = await getTaskWatchers({ taskId: todoId })

return <WatchButtonClient todoId={todoId} initialWatchers={watchers} />
}
[V0_FILE]typescriptreact:file="app/app/todos/actions.tsx" isMerged="true"
'use server'

import 'server-only'

import { and, eq, gte } from 'drizzle-orm'

// Use existing db setup
import { db } from '../../../lib/db'
import { comments } from '../../../drizzle/schema'

export async function getMessageById({ id }: { id: string }) {
  try {
    return await db.select().from(comments).where(eq(comments.id, id))
  } catch (error) {
    throw new Error('Failed to get message by id')
  }
}

export async function deleteMessagesByChatIdAfterTimestamp({
  chatId,
  timestamp,
}: {
  chatId: string
  timestamp: Date
}) {
  try {
    // Delete comments (messages) from the todo (chat) after the timestamp
    return await db
      .delete(comments)
      .where(
        and(eq(comments.todoId, chatId), gte(comments.createdAt, timestamp)),
      )
  } catch (error) {
    throw new Error('Failed to delete messages by chat id after timestamp')
  }
}

export async function deleteTrailingMessages({ id }: { id: string }) {
  const [message] = await getMessageById({ id })

await deleteMessagesByChatIdAfterTimestamp({
    chatId: message.todoId,
    timestamp: message.createdAt,
  })
}
[V0_FILE]typescriptreact:file="app/app/todos/archived/page-client.tsx" isMerged="true"
'use client'
import { useMemo } from 'react'
import { Button } from '@/components/ui/button'
import { CalendarIcon, Archive } from 'lucide-react'
import type { Todo } from '@/drizzle/schema'
import Link from 'next/link'
import { groupTodosByDueDate } from '../utils'

// Archived TodoItem component (simplified, read-only)
function ArchivedTodoItem({ todo }: { todo: Todo }) {
  return (
    <div className="grid grid-cols-subgrid col-span-4 px-2 py-1.5 gap-4 bg-muted/30 rounded-md relative">
      <div className="flex items-center gap-2">
        <div className="flex items-center h-5 pt-0.5">
          <Archive className="h-4 w-4 text-muted-foreground" />
        </div>

<div className="min-w-0">
          <Link
            href={`/app/todos/${todo.id}`}
            prefetch={true}
            className="text-sm text-muted-foreground line-through hover:underline block truncate"
          >
            {todo.title}
          </Link>
        </div>
      </div>

<div className="flex items-center">{/* Empty middle column */}</div>
      <div className="flex items-center">{/* Empty middle column */}</div>
    </div>
  )
}

export function ArchivedTodosPageClient({
  todos,
  userId,
  rateLimitStatus,
}: {
  todos: Todo[]
  userId: string
  rateLimitStatus: {
    remaining: number
    reset: number
  }
}) {
  // Memoize the todo groups, excluding "Today" for archived items
  const todoGroups = useMemo(
    () => groupTodosByDueDate(todos).filter((group) => group.label !== 'Today'),
    [todos],
  )

return (
    <div className="space-y-6 pb-40 mt-8">
      {/* Header */}
      <div className="flex items-center justify-between px-2 py-4">
        <div className="flex items-center gap-3">
          <Archive className="h-6 w-6 text-muted-foreground" />
          <h1 className="text-2xl font-bold">Archived Todos</h1>
        </div>
        <Link href="/app/todos">
          <Button variant="outline">Back to Active Todos</Button>
        </Link>
      </div>

{/* Todo list */}
      <div>
        {/* Card Header */}
        <div className="flex items-center justify-between px-2 py-1">
          <div className="flex items-center gap-2 h-8">
            <div className="text-sm font-medium">Archived Items</div>
          </div>
          <div className="text-sm text-muted-foreground">
            {todos.length} item{todos.length !== 1 ? 's' : ''}
          </div>
        </div>

{/* Todo Groups */}
        {todos.length === 0 ? (
          <div className="text-center py-8">
            <Archive className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
            <p className="text-muted-foreground mb-2">No archived todos yet.</p>
            <p className="text-sm text-muted-foreground">
              Deleted todos and overdue completed items will appear here.
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-[1fr_auto_auto_auto]">
            {todoGroups.map((group) => (
              <div
                key={group.label}
                className="rounded-lg mt-4 col-span-4 grid grid-cols-subgrid"
              >
                {/* Date Header */}
                <div className="col-span-4 px-2 py-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                      <h3 className="text-sm font-medium text-muted-foreground">
                        {group.label}
                      </h3>
                    </div>
                  </div>
                </div>

{/* Todos in this group */}
                {group.todos.length > 0 ? (
                  <div className="contents">
                    {group.todos.map((todo) => (
                      <ArchivedTodoItem key={todo.id} todo={todo} />
                    ))}
                  </div>
                ) : (
                  <div className="py-2 px-2 text-sm text-muted-foreground italic">
                    No archived items from {group.label.toLowerCase()}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/app/todos/archived/page-server.tsx" isMerged="true"
import { ArchivedTodosPageClient } from './page-client'
import { getArchivedTodos } from '@/lib/actions'
import { getRateLimitStatus } from '@/lib/rate-limit'
import { Suspense } from 'react'
import TodosLoading from '../loading'
import { unstable_cache as cache } from 'next/cache'

export async function ArchivedTodosPageServer({ userId }: { userId: string }) {
  const [archivedTodos, rateLimitStatus] = await cache(
    async (id: string) => {
      return Promise.all([getArchivedTodos(id), getRateLimitStatus(id)])
    },
    [userId],
    {
      tags: [`${userId}:archived-todos`],
      revalidate: 60,
    },
  )(userId)

return (
    <Suspense fallback={<TodosLoading />}>
      <ArchivedTodosPageClient
        todos={archivedTodos}
        userId={userId}
        rateLimitStatus={rateLimitStatus}
      />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/app/todos/archived/page.tsx" isMerged="true"
import { stackServerApp } from '@/stack'
import { ArchivedTodosPageServer } from './page-server'

export default async function ArchivedTodosPage() {
  const user = await stackServerApp.getUser({ or: 'redirect' })

return <ArchivedTodosPageServer userId={user.id} />
}
[V0_FILE]typescriptreact:file="app/app/todos/loading.tsx" isMerged="true"
import { Skeleton } from '@/components/ui/skeleton'

export default function TodosLoading() {
  return (
    <div className="space-y-6">
      {/* Productivity Metrics */}
      <div className="grid grid-cols-5 gap-4 mt-8">
        <div className="bg-card p-4 rounded-lg border shadow-sm col-span-2">
          <div className="flex items-center justify-between mb-1">
            <Skeleton className="h-4 w-24" />
          </div>
          <div className="flex items-baseline justify-between mb-2">
            <Skeleton className="h-8 w-16" />
            <Skeleton className="h-4 w-24" />
          </div>
          <Skeleton className="h-2 w-full" />
        </div>
      </div>

{/* Search, Filter, and Add */}
      <div className="flex flex-wrap gap-4 items-center">
        <div className="relative flex-1 min-w-[200px]">
          <Skeleton className="h-8 w-full" />
        </div>
        <Skeleton className="h-8 w-24" />
      </div>

{/* Todo list */}
      <div className="border rounded-sm overflow-hidden">
        {/* Card Header */}
        <div className="flex items-center justify-between px-2 py-1 bg-muted/50 border-b">
          <div className="flex items-center gap-2 h-8">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-20" />
          </div>
          <Skeleton className="h-4 w-24" />
        </div>

{/* Todo Groups */}
        <div className="grid grid-cols-[1fr_auto_auto_auto_auto]">
          {/* Today's Group */}
          <div className="col-span-5 grid grid-cols-subgrid">
            <div className="col-span-5 px-2 py-2 border-t bg-muted/30">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Skeleton className="h-4 w-4" />
                  <Skeleton className="h-4 w-24" />
                </div>
                <Skeleton className="h-3 w-16" />
              </div>
            </div>
            {[1, 2, 3].map((i) => (
              <div
                key={i}
                className="grid grid-cols-subgrid col-span-5 px-2 py-1.5 gap-4"
              >
                <div className="flex items-center gap-2">
                  <Skeleton className="h-4 w-4" />
                  <Skeleton className="h-4 w-48" />
                </div>
                <div className="flex items-center">
                  <Skeleton className="h-6 w-20" />
                </div>
                <div className="flex items-center gap-2 justify-end">
                  <Skeleton className="h-6 w-12" />
                  <Skeleton className="h-6 w-6" />
                </div>
              </div>
            ))}
          </div>

{/* Upcoming Group */}
          <div className="col-span-5 grid grid-cols-subgrid">
            <div className="col-span-5 px-2 py-2 border-t bg-muted/30">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Skeleton className="h-4 w-4" />
                  <Skeleton className="h-4 w-32" />
                </div>
                <Skeleton className="h-3 w-16" />
              </div>
            </div>
            {[1, 2].map((i) => (
              <div
                key={i}
                className="grid grid-cols-subgrid col-span-5 px-2 py-1.5 gap-4"
              >
                <div className="flex items-center gap-2">
                  <Skeleton className="h-4 w-4" />
                  <Skeleton className="h-4 w-48" />
                </div>
                <div className="flex items-center">
                  <Skeleton className="h-6 w-20" />
                </div>
                <div className="flex items-center gap-2 justify-end">
                  <Skeleton className="h-6 w-12" />
                  <Skeleton className="h-6 w-6" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/app/todos/page-client.tsx" isMerged="true"
'use client'
import { useState, useCallback, memo, useMemo } from 'react'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { addTodo } from '@/lib/actions'
import { deleteTodo } from '@/actions/delete-todos'
import { updateDueDate } from '@/actions/update-due-date'
import { toggleTodoCompleted } from '@/actions/toggle-completed'
import { redirectToCheckout } from '@/app/api/stripe/client'
import {
  Plus,
  Trash,
  X,
  AlertCircle,
  Clock,
  CalendarIcon,
  CreditCard,
  Zap,
  MoreVertical,
  Loader2,
  MessageSquare,
  Archive,
} from 'lucide-react'
import type { Todo, User } from '@/drizzle/schema'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import { Calendar } from '@/components/ui/calendar'
import { format } from 'date-fns'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import Link from 'next/link'
import { groupTodosByDueDate } from './utils'
import { Textarea } from '@/components/ui/textarea'
import { generateTodoFromUserMessage } from '@/lib/actions'
import { nanoid } from 'nanoid'

// Track all edits in one place
type PendingEdit =
  | { type: 'delete'; ids: Set<string> }
  | { type: 'reschedule'; ids: Set<string>; dueDate: Date | null }
  | { type: 'toggleCompleted'; ids: Set<string>; completed: boolean }
  | { type: 'add'; todo: Todo }

function AddTodoForm({
  onClose,
  setPendingEdits,
  rateLimitStatus,
}: {
  onClose: () => void
  setPendingEdits: React.Dispatch<React.SetStateAction<PendingEdit[]>>
  rateLimitStatus: {
    remaining: number
    reset: number
  }
}) {
  const [selectedDueDate, setSelectedDueDate] = useState<Date | undefined>(
    undefined,
  )
  const [isCalendarOpen, setIsCalendarOpen] = useState(false)
  const [todoText, setTodoText] = useState('')
  const [isGenerating, setIsGenerating] = useState(false)

async function handleAction(formData: FormData) {
    const text = formData.get('text') as string

if (!text?.trim()) return

setIsGenerating(true)

// Generate a clean title from the prompt
    const generatedResult = await generateTodoFromUserMessage({
      prompt: text.trim(),
    })
    const finalTitle = generatedResult?.title || text.trim()
    const parsedDueDate = generatedResult?.dueDate
      ? new Date(generatedResult.dueDate)
      : null
    const finalDueDate = parsedDueDate || selectedDueDate

// Create an optimistic todo with a temporary nanoid
    const optimisticTodo: Todo = {
      id: `temp-${nanoid(8)}`,
      title: finalTitle,
      description: null,
      completed: false,
      dueDate: finalDueDate || null,
      userId: '', // Will be set by server
      createdAt: new Date(),
      updatedAt: new Date(),
      deletedAt: null,
    }

try {
      setPendingEdits((prev) => [
        ...prev,
        { type: 'add', todo: optimisticTodo },
      ])

// Prepare form data for server action
      const serverFormData = new FormData()
      serverFormData.append('text', finalTitle)
      if (finalDueDate) {
        serverFormData.append('dueDate', finalDueDate.toISOString())
      }

// Send the actual request and wait for completion
      await addTodo(serverFormData)

// Reset form state
      setTodoText('')
      setSelectedDueDate(undefined)
      onClose()
    } catch (error) {
      // If there was an error, remove the optimistic todo
      setPendingEdits((prev) =>
        prev.filter(
          (edit) =>
            !(edit.type === 'add' && edit.todo.id === optimisticTodo.id),
        ),
      )
    } finally {
      setIsGenerating(false)
    }
  }

return (
    <div className="relative w-full flex flex-col gap-4">
      <form action={handleAction} className="relative">
        <Textarea
          name="text"
          placeholder="Describe what needs to be done... (e.g., 'Review the marketing proposal by Friday')"
          value={todoText}
          onChange={(e) => setTodoText(e.target.value)}
          className="min-h-[24px] max-h-[calc(75dvh)] resize-none rounded-xl !text-base bg-muted pb-20 dark:border-zinc-700"
          rows={2}
          autoFocus
          disabled={isGenerating}
          onKeyDown={(event) => {
            if (
              event.key === 'Enter' &&
              !event.shiftKey &&
              !event.nativeEvent.isComposing &&
              !isGenerating
            ) {
              event.preventDefault()
              if (todoText.trim()) {
                const formData = new FormData()
                formData.append('text', todoText)
                if (selectedDueDate) {
                  formData.append('dueDate', selectedDueDate.toISOString())
                }
                handleAction(formData)
              }
            }
          }}
        />

{/* Date Controls */}
        <div className="absolute bottom-0 left-0 p-2 flex items-center gap-2">
          <Popover modal open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
            <PopoverTrigger asChild>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="h-8 px-2 text-xs"
              >
                <CalendarIcon className="h-3 w-3 mr-1" />
                {selectedDueDate
                  ? format(selectedDueDate, 'MMM d')
                  : 'Due date'}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0" align="start">
              <Calendar
                mode="single"
                selected={selectedDueDate}
                onSelect={(date) => {
                  setSelectedDueDate(date)
                  setIsCalendarOpen(false)
                }}
                initialFocus
              />
            </PopoverContent>
          </Popover>

{selectedDueDate && (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => setSelectedDueDate(undefined)}
              className="h-8 px-1"
            >
              <X className="h-3 w-3" />
            </Button>
          )}
        </div>

{/* Submit Button */}
        <div className="absolute bottom-0 right-0 p-2">
          <Button
            type="submit"
            className="rounded-full p-1.5 h-fit border dark:border-zinc-600"
            disabled={!todoText.trim() || isGenerating}
          >
            {isGenerating ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <Plus className="h-4 w-4" />
            )}
          </Button>
        </div>
      </form>
    </div>
  )
}

// Memoized TodoItem component
const TodoItem = memo(function TodoItem({
  todo,
  isSelected,
  onToggleSelect,
  onDelete,
  onToggleCompleted,
  onUpdateDueDate,
}: {
  todo: Todo
  isSelected: boolean
  onToggleSelect: (id: string, selected: boolean) => void
  onDelete: (id: string) => void
  onToggleCompleted: (id: string, completed: boolean) => void
  onUpdateDueDate: (id: string, date: Date | null) => void
}) {
  return (
    <div
      className={`grid grid-cols-subgrid col-span-4 px-2 py-1.5 gap-4 hover:bg-muted rounded-md relative group transition-colors`}
    >
      <div className="flex items-center gap-2">
        <div className="flex items-center h-5 pt-0.5">
          <Checkbox
            checked={isSelected}
            onCheckedChange={(checked: boolean) =>
              onToggleSelect(todo.id, checked)
            }
            className={`data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary ${
              isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
            } transition-opacity`}
            aria-label="Select todo for bulk actions"
          />
        </div>

<div className="min-w-0">
          {todo.id.startsWith('temp-') ? (
            <span className="text-sm block truncate">{todo.title}</span>
          ) : (
            <Link
              href={`/app/todos/${todo.id}`}
              prefetch={true}
              className={`text-sm block truncate hover:underline ${
                todo.completed ? 'line-through text-muted-foreground' : ''
              }`}
            >
              {todo.title}
            </Link>
          )}
        </div>
      </div>

<div className="flex items-center">{/* Empty middle column */}</div>

<div className="flex items-center gap-2 justify-end -mr-2">
        {!todo.completed && (
          <Button
            variant="ghost"
            size="sm"
            className="h-6 px-2 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
            onClick={() => onToggleCompleted(todo.id, true)}
          >
            Done
          </Button>
        )}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="h-6 w-6 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
              aria-label="More options"
            >
              <MoreVertical className="h-3.5 w-3.5" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem asChild>
              <TodoDueDateButton
                todo={todo}
                onSelect={(date) => onUpdateDueDate(todo.id, date)}
              />
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => onDelete(todo.id)}>
              <Trash className="h-3.5 w-3.5 mr-2" />
              Delete
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  )
})

export function TodosPageClient({
  todos,
  userId,
  rateLimitStatus,
}: {
  todos: Todo[]
  userId: string
  rateLimitStatus: {
    remaining: number
    reset: number
  }
}) {
  const [selectedTodoIds, setSelectedTodoIds] = useState(
    () => new Set<string>(),
  )
  const [isRescheduleCalendarOpen, setIsRescheduleCalendarOpen] =
    useState(false)
  const [rescheduleDate, setRescheduleDate] = useState<Date | undefined>(
    undefined,
  )
  // Track all edits in one place
  const [pendingEdits, setPendingEdits] = useState<PendingEdit[]>([])

// Memoize the displayed todos to prevent unnecessary recalculations
  const displayedTodos = useMemo(() => {
    let current = [...todos]

// Filter out optimistic todos that now have real counterparts from the server
    const optimisticTodos = pendingEdits
      .filter((edit) => edit.type === 'add')
      .map((edit) => (edit as { type: 'add'; todo: Todo }).todo)

const validOptimisticTodos = optimisticTodos.filter((optimisticTodo) => {
      // Remove optimistic todo if a real todo with the same title exists
      return !current.some(
        (realTodo) =>
          realTodo.title === optimisticTodo.title &&
          !realTodo.id.startsWith('temp-'), // Real todos don't have temp- prefix
      )
    })

for (const edit of pendingEdits) {
      if (edit.type === 'add') {
        // Only add optimistic todos that don't have real counterparts
        if (validOptimisticTodos.includes(edit.todo)) {
          current = [...current, edit.todo]
        }
      } else {
        current = current
          .map((todo) => {
            if (!edit.ids.has(todo.id)) return todo

switch (edit.type) {
              case 'delete':
                return null
              case 'reschedule':
                return { ...todo, dueDate: edit.dueDate }
              case 'toggleCompleted':
                return { ...todo, completed: edit.completed }
            }
          })
          .filter(Boolean) as Todo[]
      }
    }

return current
  }, [todos, pendingEdits])

// Memoize the selected todos
  const selectedTodos = useMemo(
    () => displayedTodos.filter((todo) => selectedTodoIds.has(todo.id)),
    [displayedTodos, selectedTodoIds],
  )

// Memoize the handlers
  const handleToggleSelect = useCallback((id: string, selected: boolean) => {
    setSelectedTodoIds((prev) => {
      const newSet = new Set(prev)
      if (selected) {
        newSet.add(id)
      } else {
        newSet.delete(id)
      }
      return newSet
    })
  }, [])

const handleDelete = useCallback((id: string) => {
    setPendingEdits((prev) => [...prev, { type: 'delete', ids: new Set([id]) }])
    setSelectedTodoIds((prev) => {
      const newSet = new Set(prev)
      newSet.delete(id)
      return newSet
    })
    deleteTodo({ ids: id })
  }, [])

const handleToggleCompleted = useCallback(
    (id: string, completed: boolean) => {
      setPendingEdits((prev) => [
        ...prev,
        { type: 'toggleCompleted', ids: new Set([id]), completed },
      ])
      toggleTodoCompleted({ id, completed })
    },
    [],
  )

const handleUpdateDueDate = useCallback((id: string, date: Date | null) => {
    setPendingEdits((prev) => [
      ...prev,
      { type: 'reschedule', ids: new Set([id]), dueDate: date },
    ])
    updateDueDate({ id, dueDate: date })
  }, [])

// Memoize the todo groups
  const todoGroups = useMemo(
    () => groupTodosByDueDate(displayedTodos),
    [displayedTodos],
  )

// Delete multiple todos
  function deleteSelectedTodos() {
    const idsToDelete = Array.from(selectedTodoIds)

setPendingEdits((prev) => [
      ...prev,
      { type: 'delete', ids: new Set(idsToDelete) },
    ])
    setSelectedTodoIds(new Set())

// The server action handles batching/scheduling
    deleteTodo({ ids: idsToDelete })
  }

// Reschedule multiple todos
  function rescheduleSelectedTodos(date: Date | undefined) {
    const idsToReschedule = Array.from(selectedTodoIds)
    setPendingEdits((prev) => [
      ...prev,
      { type: 'reschedule', ids: selectedTodoIds, dueDate: date || null },
    ])
    setSelectedTodoIds(new Set())
    setIsRescheduleCalendarOpen(false)

// The server action handles batching/scheduling
    updateDueDate({ ids: idsToReschedule, dueDate: date || null })
  }

// Mark multiple todos as completed/uncompleted
  function markSelectedTodosAs(completed: boolean) {
    const idsToToggle = Array.from(selectedTodoIds)
    setPendingEdits((prev) => [
      ...prev,
      { type: 'toggleCompleted', ids: selectedTodoIds, completed },
    ])
    setSelectedTodoIds(new Set())

// The server action handles batching/scheduling
    toggleTodoCompleted({ ids: idsToToggle, completed })
  }

// Select or deselect all visible todos
  function toggleSelectAll(selected: boolean) {
    if (selected) {
      // Select all visible todos at once
      setSelectedTodoIds(new Set(displayedTodos.map((todo) => todo.id)))
    } else {
      // Deselect all
      setSelectedTodoIds(new Set())
    }
  }

return (
    <div className="space-y-6 pb-40 mt-8">
      {/* Todo list */}
      <div>
        {/* Card Header with Bulk Actions */}
        <div className="flex items-center justify-between px-2 py-1">
          {selectedTodoIds.size > 0 ? (
            <>
              {/* Selection Mode Header */}
              <div className="flex items-center gap-2 h-8">
                <Checkbox
                  id="select-all"
                  checked={
                    selectedTodos.length > 0 && displayedTodos.length > 0
                  }
                  onCheckedChange={toggleSelectAll}
                  className="data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary"
                />
                <label htmlFor="select-all" className="text-sm font-medium">
                  {selectedTodoIds.size} selected
                </label>
              </div>
              <div className="flex items-center gap-2">
                {!selectedTodos.every((todo) => todo.completed) ? (
                  <Button
                    variant="outline"
                    size="sm"
                    className="flex items-center gap-1"
                    onClick={() => markSelectedTodosAs(true)}
                  >
                    Done
                  </Button>
                ) : (
                  <Button
                    variant="outline"
                    size="sm"
                    className="flex items-center gap-1"
                    onClick={() => markSelectedTodosAs(false)}
                  >
                    Not done
                  </Button>
                )}

<Popover
                  open={isRescheduleCalendarOpen}
                  onOpenChange={setIsRescheduleCalendarOpen}
                >
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex items-center gap-1"
                    >
                      <Clock className="h-4 w-4 mr-1" />
                      Reschedule
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0" align="end">
                    <div className="p-2 border-b">
                      <h3 className="text-sm font-medium">
                        Reschedule {selectedTodoIds.size} item
                        {selectedTodoIds.size !== 1 ? 's' : ''}
                      </h3>
                    </div>
                    <Calendar
                      mode="single"
                      selected={rescheduleDate}
                      onSelect={(date) => {
                        setRescheduleDate(date)
                      }}
                      initialFocus
                    />
                    <div className="p-2 border-t flex justify-between">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => {
                          rescheduleSelectedTodos(undefined)
                        }}
                      >
                        Clear Date
                      </Button>
                      <div className="flex gap-2">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => setIsRescheduleCalendarOpen(false)}
                        >
                          Cancel
                        </Button>
                        <Button
                          variant="default"
                          size="sm"
                          onClick={() => {
                            if (rescheduleDate) {
                              rescheduleSelectedTodos(rescheduleDate)
                            }
                          }}
                        >
                          Apply
                        </Button>
                      </div>
                    </div>
                  </PopoverContent>
                </Popover>
                <Button variant="ghost" size="sm" onClick={deleteSelectedTodos}>
                  <Trash className="h-4 w-4" />
                </Button>
              </div>
            </>
          ) : (
            <>
              {/* Normal Mode Header */}
              <div className="flex items-center gap-2 h-8">
                <Checkbox
                  id="select-all"
                  checked={
                    selectedTodos.length > 0 && displayedTodos.length > 0
                  }
                  onCheckedChange={(checked: boolean) => {
                    toggleSelectAll(checked)
                  }}
                  className="data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary"
                />
                <label htmlFor="select-all" className="text-sm font-medium">
                  Select All
                </label>
              </div>
              <div className="flex items-center gap-4">
                <Link href="/app/todos/archived">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-muted-foreground"
                  >
                    <Archive className="h-4 w-4 mr-2" />
                    Archived
                  </Button>
                </Link>
                <div className="text-sm text-muted-foreground">
                  {displayedTodos.length} item
                  {displayedTodos.length !== 1 ? 's' : ''}
                </div>
              </div>
            </>
          )}
        </div>

{/* Todo Groups */}
        {displayedTodos.length === 0 ? (
          <div className="text-center py-8">
            <p className="text-muted-foreground">No todos yet.</p>
          </div>
        ) : (
          <div className="grid grid-cols-[1fr_auto_auto_auto]">
            {todoGroups.map((group) => (
              <div
                key={group.label}
                className={`rounded-lg mt-4 col-span-4 grid grid-cols-subgrid`}
              >
                {/* Date Header */}
                <div className={`col-span-4 px-2 py-2`}>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      {group.isPast ? (
                        <AlertCircle className="h-4 w-4 text-red-500" />
                      ) : (
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-4 w-4 p-0 hover:bg-muted"
                          onClick={() => {
                            const allSelected = group.todos.every((todo) =>
                              selectedTodoIds.has(todo.id),
                            )
                            const newSelection = new Set(selectedTodoIds)
                            group.todos.forEach((todo) => {
                              if (allSelected) {
                                newSelection.delete(todo.id)
                              } else {
                                newSelection.add(todo.id)
                              }
                            })
                            setSelectedTodoIds(newSelection)
                          }}
                        >
                          <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                        </Button>
                      )}
                      <h3
                        className={`text-sm font-medium ${
                          group.isPast ? 'text-red-600 dark:text-red-400' : ''
                        }`}
                      >
                        {group.label}
                      </h3>
                    </div>
                  </div>
                </div>

{/* Todos in this group or empty state */}
                {group.todos.length > 0 ? (
                  <div className="contents">
                    {group.todos.map((todo) => (
                      <TodoItem
                        key={todo.id}
                        todo={todo}
                        isSelected={selectedTodoIds.has(todo.id)}
                        onToggleSelect={handleToggleSelect}
                        onDelete={handleDelete}
                        onToggleCompleted={handleToggleCompleted}
                        onUpdateDueDate={handleUpdateDueDate}
                      />
                    ))}
                  </div>
                ) : (
                  <div className="py-2 px-2 text-sm text-muted-foreground italic">
                    {group.label === 'Today'
                      ? 'Nothing due today'
                      : `No items due ${group.label.toLowerCase()}`}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

{/* Fixed Floating Footer with Todo Form */}
      <div className="fixed bottom-0 left-0 right-0 z-50 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/75">
        <div className="mx-auto max-w-4xl p-4">
          <AddTodoForm
            onClose={() => {}}
            setPendingEdits={setPendingEdits}
            rateLimitStatus={rateLimitStatus}
          />

{/* Message Rate Limit Counter */}
          <div className="flex items-center justify-between text-xs text-muted-foreground mt-2 px-2">
            <div className="flex items-center gap-1">
              <MessageSquare className="h-3 w-3" />
              <span>{rateLimitStatus.remaining} messages remaining today</span>
            </div>
            {rateLimitStatus.remaining === 0 ? (
              <span className="text-red-500 dark:text-red-400">
                Resets in{' '}
                {Math.ceil(
                  (rateLimitStatus.reset - Date.now()) / (1000 * 60 * 60),
                )}
                h
              </span>
            ) : null}
          </div>
        </div>
      </div>

{/* Bottom padding to account for fixed footer */}
      <div className="h-32"></div>
    </div>
  )
}

// Helper component for the Todo's due date button and popover
function TodoDueDateButton({
  todo,
  onSelect,
}: {
  todo: Todo
  onSelect: (date: Date | null) => void
}) {
  const [isCalendarOpen, setIsCalendarOpen] = useState(false)

return (
    <Popover modal open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
      <PopoverTrigger asChild>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          <CalendarIcon className="h-3.5 w-3.5 mr-2" />
          {todo.dueDate ? (
            <span>
              Due{' '}
              {new Date(todo.dueDate).toLocaleDateString('en-US', {
                month: 'short',
                day: 'numeric',
              })}
            </span>
          ) : (
            <span>Set due date</span>
          )}
        </DropdownMenuItem>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="end">
        <div className="p-2 border-b">
          <h3 className="text-sm font-medium">Set Due Date</h3>
        </div>
        <div className="p-0">
          <Calendar
            mode="single"
            selected={todo.dueDate ? new Date(todo.dueDate) : undefined}
            onSelect={(date: Date | undefined) => {
              onSelect(date || null)
              setIsCalendarOpen(false)
            }}
            initialFocus
          />
        </div>
        <div className="p-2 border-t">
          <Button
            variant="ghost"
            size="sm"
            className="w-full"
            onClick={() => {
              onSelect(null)
            }}
          >
            Clear due date
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescriptreact:file="app/app/todos/page-server.tsx" isMerged="true"
import { TodosPageClient } from './page-client'
import { getTodos } from '@/lib/actions'
import { getRateLimitStatus } from '@/lib/rate-limit'
import { Suspense } from 'react'
import TodosLoading from './loading'
import {
  unstable_cacheTag as cacheTag,
  unstable_cache as cache,
} from 'next/cache'

export async function TodosPageServer({ userId }: { userId: string }) {
  const [todos, rateLimitStatus] = await cache(
    async (id: string) => {
      return Promise.all([getTodos(id), getRateLimitStatus(id)])
    },
    [userId],
    {
      tags: [`${userId}:todos`],
      revalidate: 60,
    },
  )(userId)

return (
    <Suspense fallback={<TodosLoading />}>
      <TodosPageClient
        todos={todos}
        userId={userId}
        rateLimitStatus={rateLimitStatus}
      />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/app/todos/page.tsx" isMerged="true"
import { stackServerApp } from '@/stack'
import { TodosPageServer } from './page-server'

export default async function TodosPage() {
  const user = await stackServerApp.getUser({ or: 'redirect' })

return <TodosPageServer userId={user.id} />
}
[V0_FILE]typescriptreact:file="app/app/todos/utils.tsx" isMerged="true"
import type { Todo } from '@/drizzle/schema'
import {
  isToday,
  isTomorrow,
  isYesterday,
  format,
  compareAsc,
  isPast,
  isSameDay,
  startOfDay,
} from 'date-fns'

// Helper function to format date for display
export function formatDateForDisplay(date: Date | null): string {
  if (!date) return 'No Due Date'

if (isToday(date)) return 'Today'
  if (isTomorrow(date)) return 'Tomorrow'
  if (isYesterday(date)) return 'Yesterday'

return format(date, 'EEEE, MMMM d, yyyy')
} // Group todos by due date
export function groupTodosByDueDate(
  todos: Todo[],
): { date: Date | null; label: string; todos: Todo[]; isPast: boolean }[] {
  // Sort todos by due date (null dates at the end)
  const sortedTodos = [...todos].sort((a, b) => {
    if (!a.dueDate && !b.dueDate) return 0
    if (!a.dueDate) return 1
    if (!b.dueDate) return -1
    return compareAsc(new Date(a.dueDate), new Date(b.dueDate))
  })

const groups: {
    date: Date | null
    label: string
    todos: Todo[]
    isPast: boolean
  }[] = []

// Create a map to track which dates we have groups for
  const dateMap = new Map<string, boolean>()

// Process todos with due dates
  const withDueDate = sortedTodos.filter((todo) => todo.dueDate)

// Group by date
  withDueDate.forEach((todo) => {
    const todoDate = todo.dueDate ? new Date(todo.dueDate) : null

if (!todoDate) return

// Format date as string for map key
    const dateKey = todoDate.toDateString()
    dateMap.set(dateKey, true)

// Find existing group or create new one
    const existingGroup = groups.find(
      (group) => group.date && todoDate && isSameDay(group.date, todoDate),
    )

const isPastDue = isPast(todoDate) && !isToday(todoDate)

if (existingGroup) {
      existingGroup.todos.push(todo)
    } else {
      groups.push({
        date: todoDate,
        label: formatDateForDisplay(todoDate),
        todos: [todo],
        isPast: isPastDue,
      })
    }
  })

// Add todos with no due date to the Today group
  const withoutDueDate = sortedTodos.filter((todo) => !todo.dueDate)

// Always ensure we have a "Today" group
  const today = startOfDay(new Date())
  const todayKey = today.toDateString()

// Find or create the Today group
  let todayGroup = groups.find(
    (group) => group.date && isSameDay(group.date, today),
  )
  if (!todayGroup) {
    todayGroup = {
      date: today,
      label: 'Today',
      todos: [],
      isPast: false,
    }
    // Find the right position to insert the Today group
    const todayIndex = groups.findIndex(
      (group) => group.date && compareAsc(group.date, today) > 0,
    )
    if (todayIndex === -1) {
      groups.push(todayGroup)
    } else {
      groups.splice(todayIndex, 0, todayGroup)
    }
  }

// Add todos without due date to the Today group
  todayGroup.todos.push(...withoutDueDate)

return groups
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;
}

code, pre {
  font-family: var(--font-geist-mono), monospace;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 142 70% 45%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 142 70% 45%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 142 70% 45%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 142 70% 45%;
    --radius: 0.5rem;
  }

.dark {
    --background: 240 10% 4%; 
    --foreground: 0 0% 98%;
    --card: 240 10% 12%; 
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 6%;
    --popover-foreground: 0 0% 98%;
    --primary: 142 70% 45%; 
    --primary-foreground: 0 0% 100%;
    --secondary: 142 70% 45%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 6% 12%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 6% 12%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 50.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 6% 24%;
    --input: 240 6% 14%;
    --ring: 142 70% 45%; /* Match primary */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/handler/[...stack]/page.tsx" isMerged="true"
import { StackHandler } from '@stackframe/stack'
import { StackProvider, StackTheme } from '@stackframe/stack'
import { stackServerApp } from '@/stack'

export default function StackHandlerPage(props: any) {
  return (
    <StackProvider app={stackServerApp}>
      <StackTheme>
        <StackHandler fullPage app={stackServerApp} routeProps={props} />
      </StackTheme>
    </StackProvider>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from 'react'
import './globals.css'
import { ThemeProvider } from '@/components/theme-provider'
import { Toaster } from '@/components/ui/toaster'
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'
import { TooltipProvider } from '@/components/ui/tooltip'

export const metadata = {
  generator: 'v0.dev',
  title: 'NeonAuth + Stripe v0 Template',
  description: 'A template for NeonAuth, Stack Auth, and Stripe integration',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
      style={{ scrollbarGutter: 'stable' }}
      className={`${GeistSans.variable} ${GeistMono.variable}`}
    >
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          <TooltipProvider>{children}</TooltipProvider>
        </ThemeProvider>
        <Toaster />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
    </div>
  )
}
[V0_FILE]markdown:file="app/template-setup/README.md" isMerged="true"
This directory contains temporary code used for setting up the template

It is only used by the homepage `/app/page.tsx`

Once all of your integrations are correctly configured, you can delete this directory and turn page.tsx
[V0_FILE]typescriptreact:file="app/template-setup/actions.tsx" isMerged="true"
'use server'

import Stripe from 'stripe'
import { db } from '@/lib/db'
import { sql } from 'drizzle-orm'
import { revalidatePath } from 'next/cache'
import { neon } from '@neondatabase/serverless'
import { drizzle } from 'drizzle-orm/neon-http'
import * as schema from '@/drizzle/schema'

export async function getTableStatus() {
  try {
    // Check if DATABASE_URL is available first
    if (!process.env.DATABASE_URL) {
      console.log('DATABASE_URL not set, skipping table check')
      return {
        tables: {
          todos: false,
          users_sync: false,
          comments: false,
          activities: false,
        },
        rls: {
          tables: {},
        },
      }
    }

// Check each table individually
    const tables = ['todos', 'users_sync', 'comments', 'activities']
    const results = await Promise.all(
      tables.map(async (table) => {
        try {
          let result
          if (table === 'users_sync') {
            result = await db.execute(sql`
              SELECT EXISTS (
                SELECT 1 FROM information_schema.tables 
                WHERE table_schema = 'neon_auth' AND table_name = ${table}
              ) as exists
            `)
          } else {
            result = await db.execute(sql`
              SELECT EXISTS (
                SELECT 1 FROM information_schema.tables 
                WHERE table_name = ${table}
              ) as exists
            `)
          }
          return { table, exists: result.rows[0]?.exists || false }
        } catch (error) {
          return { table, exists: false }
        }
      }),
    )

// Check RLS enabled and policies for each table
    const rlsTables = ['todos', 'users_sync', 'comments', 'activities']
    const rlsTableChecks = await Promise.all(
      rlsTables.map(async (table) => {
        try {
          // Check if RLS is enabled
          const rlsResult = await db.execute(sql`
            SELECT relrowsecurity FROM pg_class WHERE relname = ${table}
          `)
          const rlsEnabled = rlsResult.rows[0]?.relrowsecurity === true
          // Check if at least one policy exists
          const policyResult = await db.execute(sql`
            SELECT COUNT(*) as count FROM pg_policies WHERE tablename = ${table}
          `)
          const hasPolicy = Number(policyResult.rows[0]?.count) > 0
          return { table, rlsEnabled, hasPolicy }
        } catch (error) {
          return { table, rlsEnabled: false, hasPolicy: false }
        }
      }),
    )

return {
      tables: Object.fromEntries(
        results.map(({ table, exists }) => [table, exists]),
      ),
      rls: {
        tables: Object.fromEntries(
          rlsTableChecks.map(({ table, rlsEnabled, hasPolicy }) => [
            table,
            { rlsEnabled, hasPolicy },
          ]),
        ),
      },
    }
  } catch (error) {
    console.error('Error checking table status:', error)
    return {
      tables: {
        todos: false,
        users_sync: false,
        comments: false,
        activities: false,
      },
      rls: {
        tables: {},
      },
    }
  }
}

export async function enableRLS() {
  try {
    if (!process.env.DATABASE_URL) {
      throw new Error('DATABASE_URL environment variable is not set')
    }

// Enable RLS for todos table
    await db.execute(sql`ALTER TABLE todos ENABLE ROW LEVEL SECURITY;`)
    await db.execute(sql`DROP POLICY IF EXISTS todos_select ON todos;`)
    await db.execute(
      sql`CREATE POLICY todos_select ON todos FOR SELECT USING (true);`,
    )

// Enable RLS for users_sync table
    await db.execute(sql`ALTER TABLE users_sync ENABLE ROW LEVEL SECURITY;`)
    await db.execute(
      sql`DROP POLICY IF EXISTS users_sync_select ON users_sync;`,
    )
    await db.execute(
      sql`CREATE POLICY users_sync_select ON users_sync FOR SELECT USING (true);`,
    )

revalidatePath('/template-setup')
  } catch (error) {
    console.error('Error enabling RLS:', error)
    throw error
  }
}

export async function checkMigrations() {
  try {
    // Check if DATABASE_URL is available first
    if (!process.env.DATABASE_URL) {
      console.log('DATABASE_URL not set, skipping migration check')
      return {
        tables: {
          todos: false,
          users_sync: false,
          comments: false,
          activities: false,
        },
        columns: {
          users_sync_image: false,
        },
        rls: {
          extension: false,
          authenticated_grants: false,
          anonymous_grants: false,
          default_privileges: false,
          schema_usage: false,
        },
        jwks: false,
        jwksList: [],
      }
    }

// Check if image column exists in users_sync table
    let imageColumnExists = false
    try {
      const imageColumnResult = await db.execute(sql`
        SELECT EXISTS (
          SELECT 1 FROM information_schema.columns 
          WHERE table_schema = 'neon_auth' 
          AND table_name = 'users_sync' 
          AND column_name = 'image'
        ) as exists
      `)
      imageColumnExists = imageColumnResult.rows[0]?.exists || false
    } catch (error) {
      imageColumnExists = false
    }

// Check RLS configuration
    const rlsChecks = await Promise.all([
      // Check for pg_session_jwt extension
      db.execute(sql`
        SELECT EXISTS (
          SELECT 1 FROM pg_extension WHERE extname = 'pg_session_jwt'
        ) as extension_exists
      `),
      // Check authenticated role grants
      db.execute(sql`
        SELECT EXISTS (
          SELECT 1 FROM information_schema.role_table_grants 
          WHERE grantee = 'authenticated' 
          AND table_schema = 'public'
          AND privilege_type IN ('SELECT', 'INSERT', 'UPDATE', 'DELETE')
        ) as authenticated_grants
      `),
      // Check anonymous role grants
      db.execute(sql`
        SELECT EXISTS (
          SELECT 1 FROM information_schema.role_table_grants 
          WHERE grantee = 'anonymous' 
          AND table_schema = 'public'
          AND privilege_type IN ('SELECT', 'INSERT', 'UPDATE', 'DELETE')
        ) as anonymous_grants
      `),
      // Check default privileges
      db.execute(sql`
        SELECT (
          SELECT COUNT(*) = 2 FROM (
            SELECT defaclrole::regrole::text as role, defaclacl
            FROM pg_default_acl
            WHERE defaclnamespace = 'public'::regnamespace
              AND defaclobjtype = 'r'
              AND defaclrole::regrole::text IN ('authenticated', 'anonymous')
          ) as acl
          WHERE
            array_to_string(acl.defaclacl, ',') LIKE '%=arwd%' -- grants all four privileges
        ) as default_privileges
      `),
      // Check schema usage grants
      db.execute(sql`
        SELECT EXISTS (
          SELECT 1 FROM information_schema.role_usage_grants 
          WHERE grantee IN ('authenticated', 'anonymous')
          AND object_schema = 'public'
          AND privilege_type = 'USAGE'
        ) as schema_usage
      `),
    ])

// Check RLS enabled and policies for each table
    const rlsTables = ['todos', 'users_sync', 'comments', 'activities']
    const rlsTableChecks = await Promise.all(
      rlsTables.map(async (table) => {
        // Check if RLS is enabled
        const rlsResult = await db.execute(sql`
          SELECT relrowsecurity FROM pg_class WHERE relname = ${table}
        `)
        const rlsEnabled = rlsResult.rows[0]?.relrowsecurity === true
        // Check if at least one policy exists
        const policyResult = await db.execute(sql`
          SELECT COUNT(*) as count FROM pg_policies WHERE tablename = ${table}
        `)
        const hasPolicy = Number(policyResult.rows[0]?.count) > 0
        return { table, rlsEnabled, hasPolicy }
      }),
    )

// Check JWKS configuration
    let jwksConfigured = false
    let jwksList = []

// Use our API route instead of direct Neon API call
    if (process.env.NEON_API_KEY) {
      try {
        const baseUrl = process.env.VERCEL_URL
          ? `https://${process.env.VERCEL_URL}`
          : process.env.NEXT_PUBLIC_VERCEL_URL
          ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
          : 'http://localhost:3000'

const response = await fetch(
          `${baseUrl}/template-setup/api/check-jwks`,
          {
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
            },
          },
        )

if (response.ok) {
          const data = await response.json()
          jwksConfigured = data.jwks
          jwksList = data.jwksList || []
        } else {
          const errorData = await response.json()
          console.error('JWKS check failed:', errorData.error)
        }
      } catch (error) {
        console.error('Error checking JWKS via API route:', error)
      }
    }

return {
      tables: Object.fromEntries(
        results.map(({ table, exists }) => [table, exists]),
      ),
      columns: {
        users_sync_image: imageColumnExists,
      },
      rls: {
        extension: rlsChecks[0].rows[0]?.extension_exists || false,
        authenticated_grants:
          rlsChecks[1].rows[0]?.authenticated_grants || false,
        anonymous_grants: rlsChecks[2].rows[0]?.anonymous_grants || false,
        default_privileges: rlsChecks[3].rows[0]?.default_privileges || false,
        schema_usage: rlsChecks[4].rows[0]?.schema_usage || false,
        tables: Object.fromEntries(
          rlsTableChecks.map(({ table, rlsEnabled, hasPolicy }) => [
            table,
            { rlsEnabled, hasPolicy },
          ]),
        ),
      },
      jwks: jwksConfigured,
      jwksList,
    }
  } catch (error) {
    return {
      tables: {
        todos: false,
        users_sync: false,
        comments: false,
        activities: false,
      },
      columns: {
        users_sync_image: false,
      },
      rls: {
        extension: false,
        authenticated_grants: false,
        anonymous_grants: false,
        default_privileges: false,
        schema_usage: false,
        tables: {},
      },
      jwks: false,
      jwksList: [],
    }
  }
}

export async function runMigrations(formData: FormData): Promise<void> {
  try {
    // Check if DATABASE_URL is available
    if (!process.env.DATABASE_URL) {
      console.error(
        'DATABASE_URL environment variable is not set. Please configure your database first.',
      )
      return
    }

console.log('Setting up client...')

// verify the connection is working
    await db.execute(sql`SELECT 1`)

// Run migrations manually
    console.log('Running migrations manually...')

// Create todos table with correct column structure
    await db.execute(sql`
      CREATE TABLE IF NOT EXISTS todos (
        id varchar(255) PRIMARY KEY,
        title varchar(255) NOT NULL,
        description text,
        completed boolean DEFAULT false NOT NULL,
        due_date timestamp,
        user_id varchar(255),
        created_at timestamp DEFAULT now() NOT NULL,
        updated_at timestamp DEFAULT now() NOT NULL,
        deleted_at timestamp
      )
    `)

// Create comments table with correct column structure
    await db.execute(sql`
      CREATE TABLE IF NOT EXISTS comments (
        id varchar(255) PRIMARY KEY,
        content text NOT NULL,
        todo_id varchar(255) NOT NULL,
        user_id varchar(255) NOT NULL,
        created_at timestamp DEFAULT now() NOT NULL,
        updated_at timestamp DEFAULT now() NOT NULL
      )
    `)

// Create activities table with correct column structure
    await db.execute(sql`
      CREATE TABLE IF NOT EXISTS activities (
        id varchar(255) PRIMARY KEY,
        content text NOT NULL,
        todo_id varchar(255) NOT NULL,
        user_id varchar(255) NOT NULL,
        created_at timestamp DEFAULT now() NOT NULL,
        updated_at timestamp DEFAULT now() NOT NULL
      )
    `)

// Add image column to neon_auth.users_sync table if it doesn't exist
    try {
      await db.execute(sql`
        ALTER TABLE neon_auth.users_sync 
        ADD COLUMN IF NOT EXISTS image text
      `)
      console.log('Image column added to users_sync table')
    } catch (error) {
      console.log('Image column may already exist or error adding:', error)
    }

console.log('Migrations completed successfully')

// Revalidate the page to show updated migration status
    revalidatePath('/dev-checklist')
  } catch (error) {
    console.error('Error running migrations:', error)
  }
}

export async function registerStripeWebhook() {
  try {
    const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY
    const VERCEL_URL = process.env.VERCEL_URL

if (!STRIPE_SECRET_KEY) {
      console.error('STRIPE_SECRET_KEY is required')
      return
    }

if (!VERCEL_URL) {
      console.error('VERCEL_URL is required')
      return
    }

// Initialize Stripe
    const stripe = new Stripe(STRIPE_SECRET_KEY, {
      apiVersion: '2025-04-30.basil',
    })

// Define the events to listen for (same as in stripe.dev.ts)
    const events = [
      'checkout.session.completed',
      'customer.subscription.created',
      'customer.subscription.updated',
      'customer.subscription.deleted',
      'customer.subscription.paused',
      'customer.subscription.resumed',
      'customer.subscription.pending_update_applied',
      'customer.subscription.pending_update_expired',
      'customer.subscription.trial_will_end',
      'invoice.paid',
      'invoice.payment_failed',
      'invoice.payment_action_required',
      'invoice.upcoming',
      'invoice.marked_uncollectible',
      'invoice.payment_succeeded',
      'payment_intent.succeeded',
      'payment_intent.payment_failed',
      'payment_intent.canceled',
    ] as Stripe.WebhookEndpointCreateParams.EnabledEvent[]

// Construct the webhook URL with https:// prefix
    const webhookUrl = VERCEL_URL.startsWith('http')
      ? `${VERCEL_URL}/api/stripe`
      : `https://${VERCEL_URL}/api/stripe`

console.log(`🔄 Registering Stripe webhook for ${webhookUrl}...`)

// First, list existing webhooks to avoid duplicates
    const existingEndpoints = await stripe.webhookEndpoints.list()

// Check if we already have a webhook for this URL
    const existingEndpoint = existingEndpoints.data.find(
      (endpoint) => endpoint.url === webhookUrl,
    )

if (existingEndpoint) {
      console.log(`ℹ️ Webhook already exists for ${webhookUrl}`)
      console.log(`ℹ️ Webhook ID: ${existingEndpoint.id}`)
      console.log(
        `ℹ️ Updating webhook to ensure it has the correct event types...`,
      )

await stripe.webhookEndpoints.del(existingEndpoint.id)

console.log(`✅ Webhook updated successfully!`)
    }

// Create a new webhook endpoint
    const result = await stripe.webhookEndpoints.create({
      url: webhookUrl,
      enabled_events: events,
      description: `Webhook for ${VERCEL_URL}`,
    })

console.log(`✅ Webhook registered successfully!`)
    console.log(`ℹ️ Webhook ID: ${result.id}`)
    console.log(`ℹ️ Webhook Secret: ${result.secret}`)

// Store the webhook ID and secret in the environment variables
    revalidatePath('/dev-checklist')

return result
  } catch (error) {
    console.error(
      'Error registering webhook:',
      error instanceof Error ? error.message : 'Unknown error occurred',
    )
  }
}

export async function resetDatabase(formData: FormData): Promise<void> {
  try {
    if (!process.env.DATABASE_URL) {
      console.error('DATABASE_URL environment variable is not set.')
      return
    }

console.log('Resetting database...')
    const connection = neon(process.env.DATABASE_URL)
    const migrationDb = drizzle(connection, { schema })

// Execute the commands in sequence
    await migrationDb.execute(sql`DROP SCHEMA IF EXISTS public CASCADE;`)
    await migrationDb.execute(sql`CREATE SCHEMA public;`)
    await migrationDb.execute(sql`GRANT ALL ON SCHEMA public TO public;`)

revalidatePath('/dev-checklist')
  } catch (error) {
    console.error('Error resetting database:', error)
  }
}

export async function configureRLS(formData: FormData): Promise<void> {
  try {
    if (!process.env.DATABASE_URL) {
      console.error('DATABASE_URL environment variable is not set.')
      return
    }

console.log('Configuring RLS...')
    const connection = neon(process.env.DATABASE_URL)
    const migrationDb = drizzle(connection, { schema })

// Create roles if they don't exist
    console.log('Creating roles...')
    await migrationDb.execute(sql`
      DO $$ 
      BEGIN
        IF NOT EXISTS (SELECT FROM pg_roles WHERE rolname = 'authenticated') THEN
          CREATE ROLE authenticated;
        END IF;
        IF NOT EXISTS (SELECT FROM pg_roles WHERE rolname = 'anonymous') THEN
          CREATE ROLE anonymous;
        END IF;
      END
      $$;
    `)

// Create extension
    console.log('Creating extension...')
    await migrationDb.execute(
      sql`CREATE EXTENSION IF NOT EXISTS pg_session_jwt;`,
    )

// Grant permissions for existing tables
    console.log('Granting permissions...')
    await migrationDb.execute(sql`
      GRANT SELECT, UPDATE, INSERT, DELETE ON ALL TABLES
      IN SCHEMA public
      to authenticated;
    `)

await migrationDb.execute(sql`
      GRANT SELECT, UPDATE, INSERT, DELETE ON ALL TABLES
      IN SCHEMA public
      to anonymous;
    `)

// Set up default privileges
    console.log('Setting up default privileges...')
    await migrationDb.execute(sql`
      ALTER DEFAULT PRIVILEGES
      IN SCHEMA public
      GRANT SELECT, UPDATE, INSERT, DELETE ON TABLES
      TO authenticated;
    `)

await migrationDb.execute(sql`
      ALTER DEFAULT PRIVILEGES
      IN SCHEMA public
      GRANT SELECT, UPDATE, INSERT, DELETE ON TABLES
      TO anonymous;
    `)

// Grant schema usage
    console.log('Granting schema usage...')
    await migrationDb.execute(
      sql`GRANT USAGE ON SCHEMA public TO authenticated;`,
    )
    await migrationDb.execute(sql`GRANT USAGE ON SCHEMA public TO anonymous;`)

// Check if tables exist before enabling RLS with more detailed logging
    console.log('Checking table existence...')
    const tableChecks = await Promise.all([
      migrationDb.execute(sql`
        SELECT EXISTS (
          SELECT 1 FROM information_schema.tables 
          WHERE table_schema = 'public' AND table_name = 'todos'
        ) as exists
      `),
      migrationDb.execute(sql`
        SELECT EXISTS (
          SELECT 1 FROM information_schema.tables 
          WHERE table_schema = 'neon_auth' AND table_name = 'users_sync'
        ) as exists
      `),
    ])

const todosExists = tableChecks[0].rows[0]?.exists
    const usersExists = tableChecks[1].rows[0]?.exists

console.log(
      `Tables status: todos=${todosExists}, users_sync=${usersExists}`,
    )

// Only enable RLS and create policies for tables that exist
    if (todosExists) {
      try {
        console.log('Enabling RLS for todos table...')
        await migrationDb.execute(
          sql`ALTER TABLE todos ENABLE ROW LEVEL SECURITY;`,
        )
        console.log('Creating policy for todos table...')
        await migrationDb.execute(
          sql`DROP POLICY IF EXISTS todos_select ON todos;`,
        )
        await migrationDb.execute(
          sql`CREATE POLICY todos_select ON todos FOR SELECT USING (true);`,
        )
        console.log('✅ RLS configured for todos table')
      } catch (error) {
        console.error('❌ Error configuring RLS for todos table:', error)
        throw error
      }
    } else {
      console.log('⚠️ Todos table does not exist, skipping RLS configuration')
    }

if (usersExists) {
      try {
        console.log('Enabling RLS for neon_auth.users_sync table...')
        await migrationDb.execute(
          sql`ALTER TABLE neon_auth.users_sync ENABLE ROW LEVEL SECURITY;`,
        )
        console.log('Creating policy for neon_auth.users_sync table...')
        await migrationDb.execute(
          sql`DROP POLICY IF EXISTS users_sync_select ON neon_auth.users_sync;`,
        )
        await migrationDb.execute(
          sql`CREATE POLICY users_sync_select ON neon_auth.users_sync FOR SELECT USING (true);`,
        )
        console.log('✅ RLS configured for users_sync table')
      } catch (error) {
        console.error('❌ Error configuring RLS for users_sync table:', error)
        // Let's check what's wrong with the table
        try {
          const tableInfo = await migrationDb.execute(sql`
            SELECT column_name, data_type 
            FROM information_schema.columns 
            WHERE table_name = 'users_sync' AND table_schema = 'neon_auth'
            ORDER BY ordinal_position
          `)
          console.log('users_sync table structure:', tableInfo.rows)
        } catch (infoError) {
          console.error('Could not get table info:', infoError)
        }
        throw error
      }
    } else {
      console.log(
        '⚠️ Users_sync table does not exist, skipping RLS configuration',
      )
    }

console.log('✅ RLS configuration completed successfully')
    revalidatePath('/dev-checklist')
  } catch (error) {
    console.error('❌ Error configuring RLS:', error)
    throw error
  }
}

export async function configureJWKS(formData: FormData): Promise<void> {
  try {
    if (
      !process.env.DATABASE_URL ||
      !process.env.NEXT_PUBLIC_STACK_PROJECT_ID
    ) {
      console.error(
        'DATABASE_URL and NEXT_PUBLIC_STACK_PROJECT_ID are required.',
      )
      return
    }

// Get project ID directly from the database instead of environment variable
    const projectIdResult = await getNeonProjectId()
    if (!projectIdResult.success) {
      console.error(`Failed to get Neon project ID: ${projectIdResult.error}`)
      return
    }

const projectId = projectIdResult.projectId

const jwksUrl = `https://api.stack-auth.com/api/v1/projects/${process.env.NEXT_PUBLIC_STACK_PROJECT_ID}/.well-known/jwks.json`

// Add JWKS URL to Neon project
    const response = await fetch(
      `https://console.neon.tech/api/v2/projects/${projectId}/jwks`,
      {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${process.env.NEON_API_KEY}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          jwks_url: jwksUrl,
          provider_name: 'StackAuth',
          role_names: ['authenticated', 'anonymous'],
        }),
      },
    )

if (!response.ok) {
      const error = await response.json()
      console.error(error.message || 'Failed to configure JWKS')
      return
    }

revalidatePath('/dev-checklist')
  } catch (error) {
    console.error('Error configuring JWKS:', error)
  }
}

/**
 * Retrieves the Neon project ID directly from the database connection
 */
async function getNeonProjectId() {
  try {
    if (!process.env.DATABASE_URL) {
      return { success: false, error: 'Database URL not configured' }
    }

// Use the database client from the project
    const result = await db.execute(sql`SHOW neon.project_id`)

console.log('Neon project ID:', result.rows[0]['neon.project_id'])
    if (result.rows.length > 0 && result.rows[0]['neon.project_id']) {
      return {
        success: true,
        projectId: result.rows[0]['neon.project_id'],
      }
    } else {
      return { success: false, error: 'Could not retrieve Neon project ID' }
    }
  } catch (error) {
    console.error(
      'Error getting Neon project ID:',
      error instanceof Error ? error.message : 'Unknown error',
    )
    return {
      success: false,
      error: error instanceof Error ? error.message : 'Unknown error',
    }
  }
}
[V0_FILE]typescript:file="app/template-setup/api/check-jwks/route.ts" isMerged="true"
import { NextRequest, NextResponse } from 'next/server'
import { db } from '@/lib/db'
import { sql } from 'drizzle-orm'

async function getNeonProjectId() {
  try {
    if (!process.env.DATABASE_URL) {
      return { success: false, error: 'Database URL not configured' }
    }

const result = await db.execute(sql`SHOW neon.project_id`)

if (result.rows.length > 0 && result.rows[0]['neon.project_id']) {
      return {
        success: true,
        projectId: result.rows[0]['neon.project_id'],
      }
    } else {
      return { success: false, error: 'Could not retrieve Neon project ID' }
    }
  } catch (error) {
    return {
      success: false,
      error: error instanceof Error ? error.message : 'Unknown error',
    }
  }
}

export async function GET(request: NextRequest) {
  try {
    // Check required environment variables
    if (!process.env.NEON_API_KEY) {
      return NextResponse.json(
        { error: 'NEON_API_KEY not configured' },
        { status: 400 }
      )
    }

// Get project ID
    const projectIdResult = await getNeonProjectId()
    if (!projectIdResult.success) {
      return NextResponse.json(
        { error: `Failed to get Neon project ID: ${projectIdResult.error}` },
        { status: 500 }
      )
    }

const projectId = projectIdResult.projectId

// Make the API call to Neon
    const response = await fetch(
      `https://console.neon.tech/api/v2/projects/${projectId}/jwks`,
      {
        headers: {
          Authorization: `Bearer ${process.env.NEON_API_KEY}`,
        },
      },
    )

if (!response.ok) {
      const errorText = await response.text()
      return NextResponse.json(
        { error: `Neon API error: ${response.status} ${errorText}` },
        { status: response.status }
      )
    }

const data = await response.json()
    
    // Deduplicate JWKS entries based on jwks_url
    const uniqueJwks = data.jwks ? 
      data.jwks.filter((jwks: any, index: number, self: any[]) => 
        self.findIndex((j: any) => j.jwks_url === jwks.jwks_url) === index
      ) : []
    
    return NextResponse.json({
      jwks: uniqueJwks.length > 0,
      jwksList: uniqueJwks,
      projectId,
    })
  } catch (error) {
    console.error('Error checking JWKS:', error)
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    )
  }
}
[V0_FILE]typescriptreact:file="app/template-setup/dev-checklist.tsx" isMerged="true"
import Link from 'next/link'
import {
  CheckCircle2,
  Circle,
  ExternalLink,
  AlertTriangle,
  ArrowRight,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { StripeWebhookForm } from './stripe-webhook-form'
import {
  checkMigrations,
  runMigrations,
  resetDatabase,
  configureRLS,
  configureJWKS,
} from './actions'

// First, let's create a reusable CSS class for environment variables
function EnvVar({ name, exists }: { name: string; exists: boolean }) {
  return (
    <p
      className={`font-medium font-mono ${
        !exists ? 'text-muted-foreground' : ''
      }`}
    >
      {name}
    </p>
  )
}

export async function DevChecklistPage() {
  const tablesStatus = await checkMigrations()
  const migrationsRun =
    tablesStatus.tables.todos &&
    tablesStatus.tables.users_sync &&
    tablesStatus.tables.comments &&
    tablesStatus.tables.activities &&
    tablesStatus.columns.users_sync_image

// Check which essential environment variables are missing
  const essentialVars = {
    database: !!process.env.DATABASE_URL,
    stackProjectId: !!process.env.NEXT_PUBLIC_STACK_PROJECT_ID,
    stackPublishableKey: !!process.env.NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY,
    stackServerKey: !!process.env.STACK_SECRET_SERVER_KEY,
  }

// Calculate progress percentage
  const totalSteps = 18 // Updated total to include image column check
  const completedSteps = [
    !!process.env.DATABASE_URL,
    !!process.env.NEXT_PUBLIC_STACK_PROJECT_ID,
    !!process.env.NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY,
    !!process.env.STACK_SECRET_SERVER_KEY,
    !!process.env.VERCEL_URL,
    !!process.env.NEXT_PUBLIC_VERCEL_URL,
    !!process.env.XAI_API_KEY,
    !!process.env.KV_URL,
    !!process.env.KV_REST_API_TOKEN,
    !!process.env.KV_REST_API_READ_ONLY_TOKEN,
    !!process.env.QSTASH_CURRENT_SIGNING_KEY,
    !!process.env.QSTASH_NEXT_SIGNING_KEY,
    !!process.env.QSTASH_TOKEN,
    !!process.env.QSTASH_URL,
    !!process.env.STRIPE_SECRET_KEY,
    !!process.env.STRIPE_WEBHOOK_SECRET,
    migrationsRun,
    tablesStatus.columns.users_sync_image,
  ].filter(Boolean).length

const isComplete = completedSteps === totalSteps

// Check if we can register Stripe webhook
  const canRegisterWebhook =
    !!process.env.STRIPE_SECRET_KEY && !!process.env.VERCEL_URL

// Check if any table is missing RLS enabled or a policy
  const needsRLS = ['todos', 'users_sync'].some(
    (table) =>
      !tablesStatus.rls.tables?.[table]?.rlsEnabled ||
      !tablesStatus.rls.tables?.[table]?.hasPolicy,
  )

return (
    <div>
      {/* Cleanup Instructions - only show when complete */}
      {isComplete ? (
        <section className="mt-8 rounded-lg border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-950 p-6 mb-8">
          <div className="flex">
            <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
            <div>
              <h3 className="font-semibold text-green-800 dark:text-green-200">
                Setup Complete!
              </h3>
              <ol className="mt-4 space-y-2 text-sm text-green-700 dark:text-green-300 list-decimal pl-5">
                <li>
                  Delete the{' '}
                  <code className="bg-green-100 dark:bg-green-900 px-1.5 py-0.5 rounded text-green-800 dark:text-green-200">
                    app/template-setup
                  </code>{' '}
                  directory
                </li>
                <li>Replace this page with your own homepage</li>
              </ol>
            </div>
          </div>
        </section>
      ) : (
        <section className="mt-8 rounded-lg border border-border bg-card p-6 mb-8">
          <div className="flex">
            <div>
              <h3 className="font-semibold text-foreground">
                <span className="text-muted-foreground">
                  {completedSteps}/{totalSteps}
                </span>{' '}
                steps complete
              </h3>
              <ul className="mt-2 space-y-2 text-sm text-muted-foreground list-disc pl-5">
                <li>
                  Follow the steps below to set up the integrations your project
                  will need.
                </li>
                <li>
                  Then delete this page and replace it with your own homepage.
                </li>
              </ul>
            </div>
          </div>
        </section>
      )}

<div className="space-y-8">
        {/* Neon Integration Section (Database + Auth) */}
        <section className="rounded-lg border border-border overflow-hidden shadow-sm bg-card">
          <div className="flex items-center px-4 py-3">
            <div className="flex h-10 w-10 overflow-hidden items-center justify-center rounded-full bg-muted mr-2">
              <img
                src="https://vercel.com/api/www/avatar/f3f5c58cf14f239dd686ee96fee64e842c70bbfb?s=72"
                alt="Neon Logo"
              />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-foreground">
                Neon + NeonAuth
              </h3>
              <p className="text-sm text-muted-foreground">
                The database stores your users and data. NeonAuth is built on
                top of StackAuth, which is an open source auth service that
                allows both password and social logins.
              </p>
            </div>
          </div>
          <div className="p-4 space-y-4">
            <div className="space-y-4">
              <div className="flex items-start">
                {essentialVars.database ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <div className="flex items-center">
                    <EnvVar
                      name="DATABASE_URL"
                      exists={essentialVars.database}
                    />
                  </div>
                </div>
              </div>

<div className="flex items-start">
                {essentialVars.stackProjectId ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <div className="flex items-center">
                    <EnvVar
                      name="NEXT_PUBLIC_STACK_PROJECT_ID"
                      exists={essentialVars.stackProjectId}
                    />
                  </div>
                </div>
              </div>

<div className="flex items-start">
                {essentialVars.stackPublishableKey ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <div className="flex items-center">
                    <EnvVar
                      name="NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY"
                      exists={essentialVars.stackPublishableKey}
                    />
                  </div>
                </div>
              </div>

<div className="flex items-start">
                {essentialVars.stackServerKey ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <div className="flex items-center">
                    <EnvVar
                      name="STACK_SECRET_SERVER_KEY"
                      exists={essentialVars.stackServerKey}
                    />
                  </div>
                </div>
              </div>
            </div>

<div className="pt-2">
              <Link
                href="https://vercel.com/integrations/neon"
                target="_blank"
                className="inline-flex items-center text-sm font-medium text-foreground hover:underline mr-2"
              >
                Enable Neon Integration
                <ExternalLink className="ml-1 h-3 w-3" />
              </Link>
              <Link
                href="https://neon.tech/docs/guides/neon-auth"
                target="_blank"
                className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mr-2"
              >
                NeonAuth documentation
                <ExternalLink className="ml-1 h-3 w-3" />
              </Link>
            </div>
          </div>
        </section>

{/* Upstash Redis Section */}
        <section className="rounded-lg border border-border overflow-hidden shadow-sm bg-card">
          <div className="flex items-center px-4 py-3">
            <div className="flex h-10 w-10 overflow-hidden items-center justify-center rounded-full bg-muted mr-2">
              <img
                src="https://vercel.com/api/www/avatar/cfffdb788d0e6372f30572554f6e82fb45d4792a?s=72"
                alt="Upstash Logo"
              />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-foreground">
                Upstash Redis
              </h3>
              <p className="text-sm text-muted-foreground">
                Redis stores Stripe subscription data for fast access
              </p>
            </div>
          </div>
          <div className="p-4 space-y-4">
            <div className="space-y-4">
              <div className="flex items-start">
                {!!process.env.KV_URL ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar name="KV_URL" exists={!!process.env.KV_URL} />
                </div>
              </div>

<div className="flex items-start">
                {!!process.env.KV_REST_API_TOKEN ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar
                    name="KV_REST_API_TOKEN"
                    exists={!!process.env.KV_REST_API_TOKEN}
                  />
                </div>
              </div>

<div className="flex items-start">
                {!!process.env.KV_REST_API_READ_ONLY_TOKEN ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar
                    name="KV_REST_API_READ_ONLY_TOKEN"
                    exists={!!process.env.KV_REST_API_READ_ONLY_TOKEN}
                  />
                </div>
              </div>
            </div>

<div className="pt-2">
              <Link
                href="https://vercel.com/integrations/upstash"
                target="_blank"
                className="inline-flex items-center text-sm font-medium text-foreground hover:underline mr-2"
              >
                Enable Upstash Integration
                <ExternalLink className="ml-1 h-3 w-3" />
              </Link>
              <Link
                href="https://upstash.com/docs/redis/overall/getstarted"
                target="_blank"
                className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground"
              >
                Redis documentation
                <ExternalLink className="ml-1 h-3 w-3" />
              </Link>
            </div>
          </div>
        </section>

{/* Upstash QStash Section */}
        <section className="rounded-lg border border-border overflow-hidden shadow-sm bg-card">
          <div className="flex items-center px-4 py-3">
            <div className="flex h-10 w-10 overflow-hidden items-center justify-center rounded-full bg-muted mr-2">
              <img
                src="https://vercel.com/api/www/avatar/cfffdb788d0e6372f30572554f6e82fb45d4792a?s=72"
                alt="Upstash Logo"
              />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-foreground">
                Upstash QStash
              </h3>
              <p className="text-sm text-muted-foreground">
                Message queue for background jobs and webhooks
              </p>
            </div>
          </div>
          <div className="p-4 space-y-4">
            <div className="space-y-4">
              <div className="flex items-start">
                {!!process.env.QSTASH_CURRENT_SIGNING_KEY ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar
                    name="QSTASH_CURRENT_SIGNING_KEY"
                    exists={!!process.env.QSTASH_CURRENT_SIGNING_KEY}
                  />
                </div>
              </div>

<div className="flex items-start">
                {!!process.env.QSTASH_NEXT_SIGNING_KEY ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar
                    name="QSTASH_NEXT_SIGNING_KEY"
                    exists={!!process.env.QSTASH_NEXT_SIGNING_KEY}
                  />
                </div>
              </div>

<div className="flex items-start">
                {!!process.env.QSTASH_TOKEN ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar
                    name="QSTASH_TOKEN"
                    exists={!!process.env.QSTASH_TOKEN}
                  />
                </div>
              </div>

<div className="flex items-start">
                {!!process.env.QSTASH_URL ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar name="QSTASH_URL" exists={!!process.env.QSTASH_URL} />
                </div>
              </div>
            </div>

<div className="pt-2 text-sm">
              Integrations {' -> '} Manage Upstash {' -> '} Open in Upstash{' '}
              {' -> '} QStash {' -> '} and then copy the environment variables
            </div>
          </div>
        </section>

{/* Database Migrations Section */}
        <section className="rounded-lg border border-border overflow-hidden shadow-sm bg-card">
          <div className="flex items-center px-4 py-3">
            <div className="flex h-10 w-10 overflow-hidden items-center justify-center rounded-full bg-muted mr-2">
              <img
                src="https://vercel.com/api/www/avatar/f3f5c58cf14f239dd686ee96fee64e842c70bbfb?s=72"
                alt="Neon Logo"
              />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-foreground">
                Database Tables
              </h3>
              <p className="text-sm text-muted-foreground">
                Run the migrations to set up the database. Optionally, you can
                enable Row Level Security.{' '}
              </p>
            </div>
          </div>
          <div className="p-4 space-y-6">
            <div className="space-y-4">
              <div className="flex items-start">
                {tablesStatus.tables.todos ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <p
                    className={`font-medium ${
                      !tablesStatus.tables.todos ? 'text-muted-foreground' : ''
                    }`}
                  >
                    Todos Table
                  </p>
                  <div className="flex gap-2 text-xs mt-1">
                    {tablesStatus.rls.tables?.todos?.rlsEnabled ? (
                      <CheckCircle2 className="inline h-4 w-4 text-green-500 align-text-bottom" />
                    ) : (
                      <Circle className="inline h-4 w-4 text-red-300 dark:text-red-700 align-text-bottom" />
                    )}
                    <span
                      className={
                        !tablesStatus.rls.tables?.todos?.rlsEnabled
                          ? 'text-red-500 dark:text-red-400'
                          : ''
                      }
                    >
                      RLS enabled
                    </span>
                    {tablesStatus.rls.tables?.todos?.hasPolicy ? (
                      <CheckCircle2 className="inline h-4 w-4 text-green-500 align-text-bottom ml-2" />
                    ) : (
                      <Circle className="inline h-4 w-4 text-red-300 dark:text-red-700 align-text-bottom ml-2" />
                    )}
                    <span
                      className={
                        !tablesStatus.rls.tables?.todos?.hasPolicy
                          ? 'text-red-500 dark:text-red-400'
                          : ''
                      }
                    >
                      Policy present
                    </span>
                  </div>
                </div>
              </div>

<div className="flex items-start">
                {tablesStatus.tables.users_sync ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <p
                    className={`font-medium ${
                      !tablesStatus.tables.users_sync
                        ? 'text-muted-foreground'
                        : ''
                    }`}
                  >
                    Users Sync Table
                  </p>
                  <div className="flex gap-2 text-xs mt-1">
                    {tablesStatus.rls.tables?.users_sync?.rlsEnabled ? (
                      <CheckCircle2 className="inline h-4 w-4 text-green-500 align-text-bottom" />
                    ) : (
                      <Circle className="inline h-4 w-4 text-red-300 dark:text-red-700 align-text-bottom" />
                    )}
                    <span
                      className={
                        !tablesStatus.rls.tables?.users_sync?.rlsEnabled
                          ? 'text-red-500 dark:text-red-400'
                          : ''
                      }
                    >
                      RLS enabled
                    </span>
                    {tablesStatus.rls.tables?.users_sync?.hasPolicy ? (
                      <CheckCircle2 className="inline h-4 w-4 text-green-500 align-text-bottom ml-2" />
                    ) : (
                      <Circle className="inline h-4 w-4 text-red-300 dark:text-red-700 align-text-bottom ml-2" />
                    )}
                    <span
                      className={
                        !tablesStatus.rls.tables?.users_sync?.hasPolicy
                          ? 'text-red-500 dark:text-red-400'
                          : ''
                      }
                    >
                      Policy present
                    </span>
                  </div>
                </div>
              </div>

<div className="flex items-start">
                {tablesStatus.tables.comments ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <p
                    className={`font-medium ${
                      !tablesStatus.tables.comments
                        ? 'text-muted-foreground'
                        : ''
                    }`}
                  >
                    Comments Table
                  </p>
                  <div className="flex gap-2 text-xs mt-1">
                    {tablesStatus.rls.tables?.comments?.rlsEnabled ? (
                      <CheckCircle2 className="inline h-4 w-4 text-green-500 align-text-bottom" />
                    ) : (
                      <Circle className="inline h-4 w-4 text-red-300 dark:text-red-700 align-text-bottom" />
                    )}
                    <span
                      className={
                        !tablesStatus.rls.tables?.comments?.rlsEnabled
                          ? 'text-red-500 dark:text-red-400'
                          : ''
                      }
                    >
                      RLS enabled
                    </span>
                    {tablesStatus.rls.tables?.comments?.hasPolicy ? (
                      <CheckCircle2 className="inline h-4 w-4 text-green-500 align-text-bottom ml-2" />
                    ) : (
                      <Circle className="inline h-4 w-4 text-red-300 dark:text-red-700 align-text-bottom ml-2" />
                    )}
                    <span
                      className={
                        !tablesStatus.rls.tables?.comments?.hasPolicy
                          ? 'text-red-500 dark:text-red-400'
                          : ''
                      }
                    >
                      Policy present
                    </span>
                  </div>
                </div>
              </div>

<div className="flex items-start">
                {tablesStatus.tables.activities ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <p
                    className={`font-medium ${
                      !tablesStatus.tables.activities
                        ? 'text-muted-foreground'
                        : ''
                    }`}
                  >
                    Activities Table
                  </p>
                  <div className="flex gap-2 text-xs mt-1">
                    {tablesStatus.rls.tables?.activities?.rlsEnabled ? (
                      <CheckCircle2 className="inline h-4 w-4 text-green-500 align-text-bottom" />
                    ) : (
                      <Circle className="inline h-4 w-4 text-red-300 dark:text-red-700 align-text-bottom" />
                    )}
                    <span
                      className={
                        !tablesStatus.rls.tables?.activities?.rlsEnabled
                          ? 'text-red-500 dark:text-red-400'
                          : ''
                      }
                    >
                      RLS enabled
                    </span>
                    {tablesStatus.rls.tables?.activities?.hasPolicy ? (
                      <CheckCircle2 className="inline h-4 w-4 text-green-500 align-text-bottom ml-2" />
                    ) : (
                      <Circle className="inline h-4 w-4 text-red-300 dark:text-red-700 align-text-bottom ml-2" />
                    )}
                    <span
                      className={
                        !tablesStatus.rls.tables?.activities?.hasPolicy
                          ? 'text-red-500 dark:text-red-400'
                          : ''
                      }
                    >
                      Policy present
                    </span>
                  </div>
                </div>
              </div>

<div className="flex items-start mt-4">
                {tablesStatus.columns.users_sync_image ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <p
                    className={`font-medium ${
                      !tablesStatus.columns.users_sync_image
                        ? 'text-muted-foreground'
                        : ''
                    }`}
                  >
                    Users Image Column
                  </p>
                  <p className="mt-1 text-sm text-muted-foreground">
                    Image column in neon_auth.users_sync table for storing
                    profile images
                  </p>
                </div>
              </div>

<div className="flex items-start mt-6 mb-4">
                {!!process.env.NEON_API_KEY ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar
                    name="NEON_API_KEY"
                    exists={!!process.env.NEON_API_KEY}
                  />
                  <p className="mt-1 text-sm text-muted-foreground">
                    Only required if you want to enable Row Level Security for
                    your tables. Get it from your{' '}
                    <a
                      href="https://console.neon.tech/app/settings/api-keys"
                      target="_blank"
                      className="text-foreground underline hover:no-underline"
                    >
                      Neon dashboard
                    </a>
                    .
                  </p>
                </div>
              </div>
            </div>

{essentialVars.database && (
              <div className="mt-4">
                <div className="flex gap-4">
                  <form action={runMigrations}>
                    <Button
                      type="submit"
                      className="bg-foreground text-background hover:bg-foreground/90 px-3 py-1 rounded-md"
                    >
                      Run Migrations
                    </Button>
                  </form>
                  <form action={resetDatabase}>
                    <Button
                      type="submit"
                      variant="outline"
                      className="border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 hover:text-red-700 dark:hover:text-red-300 px-3 py-1 rounded-md"
                    >
                      Reset Database
                    </Button>
                  </form>
                </div>
                <p className="mt-2 text-xs text-muted-foreground">
                  Run migrations to set up your database schema, or reset to
                  start fresh.
                </p>
              </div>
            )}

{needsRLS && essentialVars.database && (
              <div className="mt-4">
                <form action={configureRLS}>
                  <Button
                    type="submit"
                    className="bg-foreground text-background hover:bg-foreground/90 px-3 py-1 rounded-md"
                  >
                    Configure RLS
                  </Button>
                </form>
                <p className="mt-2 text-xs text-muted-foreground">
                  Configure Row Level Security for secure data access.
                </p>
              </div>
            )}

{!tablesStatus.jwks &&
              essentialVars.database &&
              essentialVars.stackProjectId && (
                <div className="mt-4">
                  <form action={configureJWKS}>
                    <Button
                      type="submit"
                      className="bg-foreground text-background hover:bg-foreground/90 px-3 py-1 rounded-md"
                    >
                      Configure JWKS
                    </Button>
                  </form>
                  <p className="mt-2 text-xs text-muted-foreground">
                    Configure JWKS URL for StackAuth JWT authentication.
                  </p>
                </div>
              )}

{!essentialVars.database && (
              <div className="mt-3 flex items-center text-sm text-amber-600 dark:text-amber-400">
                <AlertTriangle className="h-4 w-4 mr-1" />
                <span>
                  Database connection required before running migrations
                </span>
              </div>
            )}
          </div>
        </section>

{/* Vercel Section */}
        <section className="rounded-lg border border-border overflow-hidden shadow-sm bg-card">
          <div className="flex items-center px-4 py-3">
            <div className="flex h-10 w-10 items-center justify-center mr-2">
              <svg
                width="32"
                height="32"
                viewBox="0 0 76 64"
                fill="none"
                className="text-foreground"
              >
                <path
                  d="M37.5274 0L75.0548 65H0L37.5274 0Z"
                  fill="currentColor"
                />
              </svg>
            </div>
            <div>
              <h3 className="text-lg font-semibold text-foreground">
                Deployment
              </h3>
              <p className="text-sm text-muted-foreground">
                Host your app on Vercel
              </p>
            </div>
          </div>
          <div className="p-4 space-y-4">
            <div className="bg-muted p-4 rounded-md mb-4">
              <p className="text-sm text-foreground">
                Stripe needs a publicly accessible URL to send webhook events.
              </p>
              <ul className="mt-2 list-disc pl-5 text-sm text-foreground space-y-2">
                <li>
                  <strong className="font-medium">v0</strong> Deploy your app
                  and use the production URL
                </li>
                <li>
                  <strong className="font-medium">Localhost</strong> Run the
                  following command to get a tunnel{' '}
                  <code className="block bg-background mt-1 px-1.5 py-0.5 text-xs rounded text-foreground">
                    npx untun@latest tunnel http://localhost:3000
                  </code>
                </li>
              </ul>
            </div>

<div className="space-y-4">
              <div className="flex items-start">
                {!!process.env.VERCEL_URL ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar name="VERCEL_URL" exists={!!process.env.VERCEL_URL} />
                  <p className="mt-1 text-sm text-muted-foreground">
                    Your Vercel deployment URL (automatically set by Vercel)
                    {process.env.VERCEL_URL && (
                      <span className="block mt-1 font-mono bg-muted px-2 py-1 rounded text-xs">
                        {process.env.VERCEL_URL}
                      </span>
                    )}
                  </p>
                </div>
              </div>

<div className="flex items-start">
                {!!process.env.NEXT_PUBLIC_VERCEL_URL ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar
                    name="NEXT_PUBLIC_VERCEL_URL"
                    exists={!!process.env.NEXT_PUBLIC_VERCEL_URL}
                  />
                  <p className="mt-1 text-sm text-muted-foreground">
                    Use your production deployment URL. This is used for Stripe
                    webhooks
                    {process.env.NEXT_PUBLIC_VERCEL_URL && (
                      <span className="block mt-1 font-mono bg-muted px-2 py-1 rounded text-xs">
                        {process.env.NEXT_PUBLIC_VERCEL_URL}
                      </span>
                    )}
                  </p>
                </div>
              </div>
            </div>

<div className="pt-2">
              <Link
                href="https://vercel.com/docs/projects/environment-variables"
                target="_blank"
                className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground"
              >
                Learn more about Vercel environment variables
                <ExternalLink className="ml-1 h-3 w-3" />
              </Link>
            </div>
          </div>
        </section>

{/* AI Section */}
        <section className="rounded-lg border border-border overflow-hidden shadow-sm bg-card">
          <div className="flex items-center px-4 py-3">
            <div className="flex h-10 w-10 overflow-hidden items-center justify-center rounded-full bg-muted mr-2">
              <img
                src="https://pbs.twimg.com/profile_images/1721983345886003200/mJn-P1UH_400x400.jpg"
                alt="xAI Logo"
              />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-foreground">
                xAI (optional)
              </h3>
              <p className="text-sm text-muted-foreground">
                AI model for prompts and web search
              </p>
            </div>
          </div>
          <div className="p-4 space-y-4">
            <div className="space-y-4">
              <div className="flex items-start">
                {!!process.env.XAI_API_KEY ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar
                    name="XAI_API_KEY"
                    exists={!!process.env.XAI_API_KEY}
                  />
                  <p className="mt-1 text-sm text-muted-foreground">
                    Get your API key from the{' '}
                    <a
                      href="https://console.x.ai"
                      target="_blank"
                      className="text-foreground underline hover:no-underline"
                      rel="noreferrer"
                    >
                      xAI Console
                    </a>
                  </p>
                </div>
              </div>
            </div>

<div className="pt-2">
              <Link
                href="https://docs.x.ai/api"
                target="_blank"
                className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground"
              >
                xAI API documentation
                <ExternalLink className="ml-1 h-3 w-3" />
              </Link>
            </div>
          </div>
        </section>

{/* Stripe Section */}
        <section className="rounded-lg border border-border overflow-hidden shadow-sm bg-card">
          <div className="flex items-center px-4 py-3">
            <div className="flex h-10 w-10 overflow-hidden items-center justify-center rounded-full bg-muted mr-2">
              <img
                src="https://media.glassdoor.com/sql/671932/stripe-squarelogo-1610580619584.png"
                alt="Stripe Logo"
              />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-foreground">Stripe</h3>
              <p className="text-sm text-muted-foreground">
                Payment processing and subscriptions
              </p>
            </div>
          </div>
          <div className="p-4 space-y-4">
            <div className="space-y-4">
              <div className="flex items-start">
                {!!process.env.STRIPE_SECRET_KEY ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar
                    name="STRIPE_SECRET_KEY"
                    exists={!!process.env.STRIPE_SECRET_KEY}
                  />
                  <p className="mt-1 text-sm text-muted-foreground">
                    Get your API key from the{' '}
                    <a
                      href="https://dashboard.stripe.com/test/apikeys"
                      target="_blank"
                      className="text-foreground underline hover:no-underline"
                      rel="noreferrer"
                    >
                      Stripe Dashboard
                    </a>
                  </p>
                </div>
              </div>

<div className="flex items-start">
                {!!process.env.STRIPE_WEBHOOK_SECRET ? (
                  <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
                ) : (
                  <Circle className="h-5 w-5 text-muted-foreground mt-0.5 mr-3 flex-shrink-0" />
                )}
                <div>
                  <EnvVar
                    name="STRIPE_WEBHOOK_SECRET"
                    exists={!!process.env.STRIPE_WEBHOOK_SECRET}
                  />
                </div>
              </div>
            </div>

<div className="pt-2">
              <Link
                href="https://stripe.com/docs/webhooks"
                target="_blank"
                className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground"
              >
                Learn more about Stripe webhooks
                <ExternalLink className="ml-1 h-3 w-3" />
              </Link>
            </div>
          </div>
        </section>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/template-setup/stripe-webhook-form.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Webhook, AlertTriangle } from 'lucide-react'
import { registerStripeWebhook } from './actions'
import { WebhookResultDisplay } from './webhook-result'

type WebhookResult = {
  success: boolean
  message?: string
  error?: string
  webhookId?: string
  webhookSecret?: string
  isUpdate?: boolean
}

export function StripeWebhookForm({
  canRegister,
  webhookSecretExists,
}: {
  canRegister: boolean
  webhookSecretExists: boolean
}) {
  const [isRegistering, setIsRegistering] = useState(false)
  const [result, setResult] = useState<WebhookResult | null>(null)

async function handleRegisterWebhook() {
    setIsRegistering(true)
    setResult(null)

try {
      const result = await registerStripeWebhook()

if (!result) {
        throw new Error('Failed to register webhook')
      }

setResult({
        success: true,
        webhookId: result.id,
        webhookSecret: result.secret,
      })
    } catch (error) {
      setResult({
        success: false,
        error:
          error instanceof Error ? error.message : 'An unknown error occurred',
      })
    } finally {
      setIsRegistering(false)
    }
  }

if (webhookSecretExists) {
    return null
  }

return (
    <div>
      {canRegister ? (
        <div className="mt-4">
          <Button
            onClick={handleRegisterWebhook}
            disabled={isRegistering}
            className="bg-black text-white hover:bg-gray-800"
          >
            <Webhook className="h-4 w-4 mr-2" />
            {isRegistering ? 'Registering...' : 'Register Stripe Webhook'}
          </Button>
        </div>
      ) : (
        <div className="mt-3 flex items-center text-sm text-amber-600">
          <AlertTriangle className="h-4 w-4 mr-1" />
          <span>
            STRIPE_SECRET_KEY and VERCEL_URL required to register webhook
          </span>
        </div>
      )}

{result && <WebhookResultDisplay result={result} />}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/template-setup/webhook-result.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { CheckCircle, Copy, Check } from 'lucide-react'

type WebhookResult = {
  success: boolean
  message?: string
  error?: string
  webhookId?: string
  webhookSecret?: string
  isUpdate?: boolean
}

export function WebhookResultDisplay({ result }: { result: WebhookResult }) {
  const [copied, setCopied] = useState(false)

const copySecret = () => {
    if (
      result.webhookSecret &&
      result.webhookSecret !== 'Existing webhook secret preserved'
    ) {
      navigator.clipboard.writeText(
        `STRIPE_WEBHOOK_SECRET=${result.webhookSecret}`,
      )
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

if (!result || !result.success || !result.webhookSecret) return null

return (
    <Alert className="mt-4 border-green-200 bg-green-50">
      <CheckCircle className="h-4 w-4 text-green-600" />
      <AlertDescription className="flex items-center justify-between text-green-700">
        <code className="bg-green-100 px-2 py-1 rounded text-green-800">
          STRIPE_WEBHOOK_SECRET={result.webhookSecret}
        </code>
        <button
          onClick={copySecret}
          className="ml-2 p-1 rounded hover:bg-green-100"
          aria-label={copied ? 'Copied' : 'Copy webhook secret'}
        >
          {copied ? (
            <Check className="h-4 w-4" />
          ) : (
            <Copy className="h-4 w-4" />
          )}
        </button>
      </AlertDescription>
    </Alert>
  )
}
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/app-user-settings.tsx" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { Settings, MoreHorizontal } from "lucide-react"
import { useUser } from "@stackframe/stack"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"

export function AppUserSettings() {
  const user = useUser()

if (!user) {
    return (
      <div className="flex items-center gap-3">
        <Link
          href="/sign-in"
          className="inline-flex h-7 items-center justify-center rounded-md px-3 text-xs font-medium text-foreground/80 transition-all hover:bg-secondary/80"
        >
          Log In
        </Link>
        <Link
          href="/sign-up"
          className="inline-flex h-7 items-center justify-center font-medium text-center rounded-md outline-hidden bg-primary hover:bg-primary/90 whitespace-nowrap px-3 py-1 text-xs transition-colors duration-200"
        >
          Sign Up
        </Link>
      </div>
    )
  }

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className="flex items-center gap-2 h-7 px-2 ml-2 rounded-full"
        >
          {user.profileImageUrl ? (
            <Image
              src={user.profileImageUrl || "/placeholder.svg"}
              alt="User avatar"
              width={20}
              height={20}
              className="rounded-full"
            />
          ) : (
            <div className="w-5 h-5 rounded-full bg-secondary flex items-center justify-center">
              <span className="text-foreground/80 text-xs">
                {user.displayName
                  ? user.displayName[0].toUpperCase()
                  : "U"}
              </span>
            </div>
          )}
          <MoreHorizontal className="h-3.5 w-3.5" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="end"
        className="dark:bg-card dark:border-border/50"
      >
        <DropdownMenuItem asChild>
          <Link
            href="/app/settings/profile"
            className="flex items-center gap-2"
          >
            <Settings className="h-3.5 w-3.5" />
            Settings
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <Link
            href="/handler/sign-out"
            className="flex items-center gap-2"
          >
            Sign Out
          </Link>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/chat.tsx" isMerged="true"
'use client'

import type { Attachment, UIMessage } from 'ai'
import { useChat } from '@ai-sdk/react'
import { useEffect, useState } from 'react'
import { fetchWithErrorHandlers } from '@/lib/utils'
import { MultimodalInput } from '@/components/multimodal-input'
import { Messages } from './messages'
import { toast } from 'sonner'
import { useSearchParams } from 'next/navigation'
import { useAutoResume } from '@/hooks/use-auto-resume'
import { ChatSDKError } from '@/lib/errors'
import { nanoid } from 'nanoid'

export function Chat({
  id,
  initialMessages,
  isReadonly,
  autoResume,
}: {
  id: string
  initialMessages: Array<UIMessage>
  isReadonly: boolean
  autoResume: boolean
}) {
  const {
    messages,
    setMessages,
    handleSubmit,
    input,
    setInput,
    append,
    status,
    stop,
    reload,
    experimental_resume,
    data,
  } = useChat({
    id,
    initialMessages,
    experimental_throttle: 100,
    sendExtraMessageFields: true,
    generateId: () => nanoid(),
    fetch: fetchWithErrorHandlers,
    experimental_prepareRequestBody: (body) => ({
      id,
      message: body.messages.at(-1),
      selectedChatModel: 'chat-model',
    }),
    onError: (error) => {
      if (error instanceof ChatSDKError) {
        toast.error(error.message)
      }
    },
  })

const searchParams = useSearchParams()
  const query = searchParams.get('query')

const [hasAppendedQuery, setHasAppendedQuery] = useState(false)

useEffect(() => {
    if (query && !hasAppendedQuery) {
      append({
        role: 'user',
        content: query,
      })

setHasAppendedQuery(true)
      window.history.replaceState({}, '', `/app/todos/${id}`)
    }
  }, [query, append, hasAppendedQuery, id])

const [attachments, setAttachments] = useState<Array<Attachment>>([])

// Listen for todo-activity events matching this chat and append as new message
  useEffect(() => {
    const handler = (e: Event) => {
      const custom = e as CustomEvent<{ todoId: string; content: string }>
      if (custom.detail.todoId !== id) return

const newMessage = {
        id: nanoid(),
        role: 'assistant' as const,
        content: custom.detail.content,
        parts: [{ type: 'text' as const, text: custom.detail.content }],
        createdAt: new Date(),
        experimental_attachments: [],
        metadata: { isActivity: true },
      }

setMessages((prev) => [...prev, newMessage])
    }

window.addEventListener('todo-activity', handler)
    return () => window.removeEventListener('todo-activity', handler)
  }, [id, setMessages])

useAutoResume({
    autoResume,
    initialMessages,
    experimental_resume,
    data,
    setMessages,
  })

return (
    <div className="min-w-0 bg-background">
      <Messages
        chatId={id}
        status={status}
        messages={messages}
        setMessages={setMessages}
        reload={reload}
        isReadonly={isReadonly}
        initialMessages={initialMessages}
      />

<form className="flex mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl">
        {!isReadonly && (
          <MultimodalInput
            chatId={id}
            input={input}
            setInput={setInput}
            handleSubmit={handleSubmit}
            status={status}
            stop={stop}
            attachments={attachments}
            setAttachments={setAttachments}
            messages={messages}
            setMessages={setMessages}
            append={append}
          />
        )}
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/error-boundary.tsx" isMerged="true"
'use client'

import { Component, ReactNode } from 'react'

interface ErrorBoundaryState {
  hasError: boolean
  error?: Error
}

interface ErrorBoundaryProps {
  children: ReactNode
  fallback?: ReactNode
}

export class ErrorBoundary extends Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  constructor(props: ErrorBoundaryProps) {
    super(props)
    this.state = { hasError: false }
  }

static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { hasError: true, error }
  }

componentDidCatch(error: Error, errorInfo: any) {
    console.error('Error boundary caught an error:', error, errorInfo)
  }

render() {
    if (this.state.hasError) {
      return (
        this.props.fallback || (
          <div className="text-center py-8">
            <p className="text-gray-500">
              Something went wrong. Please try refreshing the page.
            </p>
          </div>
        )
      )
    }

return this.props.children
  }
}
[V0_FILE]typescriptreact:file="components/image-input.tsx" isMerged="true"
"use client"

import type React from "react"

export function ImageInput({
  onChange,
  onError,
  maxBytes = 100_000,
  ...props
}: {
  onChange?: (dataUrl: string) => void
  onError?: (error: string) => void
  maxBytes?: number
} & Omit<React.ComponentProps<"input">, "type" | "onChange" | "onError" | "accept">) {
  return (
    <input
      {...props}
      type="file"
      accept="image/*"
      onError={(e) => {
        console.error(e)
        onError?.("Unknown error")
      }}
      onChange={async (e) => {
        const file = e.target.files?.[0]
        if (!file) return

if (!file.type.startsWith("image/")) {
          onError?.("Please select a valid image file")
          return
        }

// Create an image element to load the file
        const img = new Image()
        img.src = URL.createObjectURL(file)
        await new Promise((resolve) => (img.onload = resolve))

const dataUrl = compressImage({ img, maxBytes })
        // Cleanup
        URL.revokeObjectURL(img.src)

if (!dataUrl) {
          onError?.("Failed to process image")
          return
        }

if (dataUrl.length > maxBytes) {
          onError?.(`Image is too large. Please select an image under ${Math.floor(maxBytes / 1000)}KB`)
          return
        }

onChange?.(dataUrl)
      }}
    />
  )
}

function compressImage({ img, maxBytes = 100_000 }: { img: HTMLImageElement; maxBytes?: number }) {
  // Create canvas for resizing
  const canvas = document.createElement("canvas")
  const ctx = canvas.getContext("2d")
  if (!ctx) return

// Calculate new dimensions (max 400px)
  const maxSize = 400
  let width = img.width
  let height = img.height
  if (width > height && width > maxSize) {
    height = (height * maxSize) / width
    width = maxSize
  } else if (height > maxSize) {
    width = (width * maxSize) / height
    height = maxSize
  }

// Set canvas size and draw resized image
  canvas.width = width
  canvas.height = height
  ctx.drawImage(img, 0, 0, width, height)

// Convert to base64 with reduced quality
  const base64 = canvas.toDataURL("image/jpeg", 0.8)

// Check if size is under 100KB, if not reduce quality further
  let quality = 0.8
  let base64String = base64
  while (base64String.length > maxBytes && quality > 0.1) {
    quality -= 0.1
    base64String = canvas.toDataURL("image/jpeg", quality)
  }

return base64String
}
[V0_FILE]typescriptreact:file="components/login-form.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useStackApp } from "@stackframe/stack"
import { useRouter } from "next/navigation"
import { AlertCircle } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

// Use the exact error codes from the API
type ErrorType = "none" | "EMAIL_PASSWORD_MISMATCH" | "INVALID_TOTP_CODE" | "UNKNOWN_ERROR"

// Map error codes to their corresponding messages
const errorMessages: Record<ErrorType, string> = {
  none: "",
  EMAIL_PASSWORD_MISMATCH: "Invalid email or password",
  INVALID_TOTP_CODE: "Invalid two-factor authentication code",
  UNKNOWN_ERROR: "Failed to sign in. Please try again.",
}

// Define loading states
type LoadingState = null | "email" | "google" | "github"

// Helper function to extract error code from error name
function getErrorCodeFromName(name: string): string | null {
  const match = name.match(/KnownError<([A-Z_]+)>/)
  return match ? match[1] : null
}

export function LoginForm({
  className,
  onToggleForm,
  redirectUrl = "/",
  ...props
}: React.ComponentPropsWithoutRef<"div"> & {
  onToggleForm?: () => void
  redirectUrl?: string
}) {
  const app = useStackApp()
  const router = useRouter()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [errorType, setErrorType] = useState<ErrorType>("none")
  const [loadingState, setLoadingState] = useState<LoadingState>(null)

const handleEmailPasswordLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoadingState("email")
    setErrorType("none")

const result = await app.signInWithCredential({
      email,
      password,
    })

console.log("Login result:", result)

if (result.status === "error") {
      const error = result.error
      console.log("Login error details:", JSON.stringify(error, null, 2))

// Extract error code from error name
      const errorCode = error.code || (error.name ? getErrorCodeFromName(error.name) : null)

// Use the exact error code if it's one we know about
      if (errorCode === "EMAIL_PASSWORD_MISMATCH" || errorCode === "INVALID_TOTP_CODE") {
        setErrorType(errorCode as ErrorType)
      } else {
        setErrorType("UNKNOWN_ERROR")
      }

setLoadingState(null)
    } else {
      router.push(redirectUrl)
    }
  }

const handleOAuthLogin = async (provider: "google" | "github") => {
    setLoadingState(provider)
    setErrorType("none")

try {
      await app.signInWithOAuth(provider)
      // OAuth redirects automatically on success
    } catch (err: any) {
      console.error(`${provider} login error:`, err)
      setErrorType("UNKNOWN_ERROR")
      setLoadingState(null)
    }
  }

return (
    <div className={cn("flex flex-col gap-6", className)} {...props}>
      <Card>
        <CardHeader className="text-center">
          <CardTitle className="text-xl">Welcome back</CardTitle>
          <CardDescription>Login with your account</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleEmailPasswordLogin}>
            <div className="grid gap-6">
              <div className="flex flex-col gap-4">
                <Button
                  variant="outline"
                  className="w-full"
                  type="button"
                  disabled={loadingState !== null}
                  onClick={() => handleOAuthLogin("google")}
                >
                  {loadingState === "google" ? (
                    <span className="flex items-center">
                      <svg
                        className="animate-spin -ml-1 mr-3 h-4 w-4 text-current"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Signing in...
                    </span>
                  ) : (
                    <>
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="w-5 h-5 mr-2">
                        <path
                          d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
                          fill="currentColor"
                        />
                      </svg>
                      Login with Google
                    </>
                  )}
                </Button>
                <Button
                  variant="outline"
                  className="w-full"
                  type="button"
                  disabled={loadingState !== null}
                  onClick={() => handleOAuthLogin("github")}
                >
                  {loadingState === "github" ? (
                    <span className="flex items-center">
                      <svg
                        className="animate-spin -ml-1 mr-3 h-4 w-4 text-current"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Signing in...
                    </span>
                  ) : (
                    <>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        className="w-5 h-5 mr-2"
                      >
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                      </svg>
                      Login with GitHub
                    </>
                  )}
                </Button>
              </div>
              <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
                <span className="relative z-10 bg-background px-2 text-muted-foreground">Or continue with</span>
              </div>

{errorType !== "none" && (
                <Alert variant="destructive" className="mb-2">
                  <AlertCircle className="h-4 w-4" />
                  <AlertTitle>Error</AlertTitle>
                  <AlertDescription>{errorMessages[errorType]}</AlertDescription>
                </Alert>
              )}

<div className="grid gap-6">
                <div className="grid gap-2">
                  <Label htmlFor="email">Email</Label>
                  <Input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} />
                </div>
                <div className="grid gap-2">
                  <div className="flex items-center">
                    <Label htmlFor="password">Password</Label>
                    <a
                      href="#"
                      className="ml-auto text-sm underline-offset-4 hover:underline"
                      onClick={(e) => {
                        e.preventDefault()
                        if (email) {
                          app.sendForgotPasswordEmail(email)
                          alert("Password reset email sent. Please check your inbox.")
                        } else {
                          alert("Please enter your email address first.")
                        }
                      }}
                    >
                      Forgot your password?
                    </a>
                  </div>
                  <Input
                    id="password"
                    type="password"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </div>
                <Button type="submit" className="w-full" disabled={loadingState !== null}>
                  {loadingState === "email" ? (
                    <span className="flex items-center justify-center">
                      <svg
                        className="animate-spin -ml-1 mr-3 h-4 w-4 text-white"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Logging in...
                    </span>
                  ) : (
                    "Login"
                  )}
                </Button>
              </div>
              <div className="text-center text-sm">
                Don't have an account?{" "}
                <a
                  href="#"
                  className="underline underline-offset-4"
                  onClick={(e) => {
                    e.preventDefault()
                    router.push("/sign-up")
                    if (onToggleForm) onToggleForm()
                  }}
                >
                  Sign up
                </a>
              </div>
            </div>
          </form>
        </CardContent>
      </Card>
      <div className="text-balance text-center text-xs text-muted-foreground">
        Built by{" "}
        <a
          href="https://x.com/jacobmparis"
          target="_blank"
          rel="noopener noreferrer"
          className="underline underline-offset-4 hover:text-primary"
        >
          @jacobmparis
        </a>{" "}
        on v0
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/markdown.tsx" isMerged="true"
import Link from 'next/link'
import React, { memo } from 'react'
import ReactMarkdown, { type Components } from 'react-markdown'
import remarkGfm from 'remark-gfm'

const components: Partial<Components> = {
  pre: ({ children }) => <>{children}</>,
  ol: ({ node, children, ...props }) => {
    return (
      <ol className="list-decimal list-outside ml-4" {...props}>
        {children}
      </ol>
    )
  },
  li: ({ node, children, ...props }) => {
    return (
      <li className="py-1" {...props}>
        {children}
      </li>
    )
  },
  ul: ({ node, children, ...props }) => {
    return (
      <ul className="list-decimal list-outside ml-4" {...props}>
        {children}
      </ul>
    )
  },
  strong: ({ node, children, ...props }) => {
    return (
      <span className="font-semibold" {...props}>
        {children}
      </span>
    )
  },
  a: ({ node, children, ...props }) => {
    return (
      // @ts-expect-error
      <Link
        className="text-blue-500 hover:underline"
        target="_blank"
        rel="noreferrer"
        {...props}
      >
        {children}
      </Link>
    )
  },
  h1: ({ node, children, ...props }) => {
    return (
      <h1 className="text-3xl font-semibold mt-6 mb-2" {...props}>
        {children}
      </h1>
    )
  },
  h2: ({ node, children, ...props }) => {
    return (
      <h2 className="text-2xl font-semibold mt-6 mb-2" {...props}>
        {children}
      </h2>
    )
  },
  h3: ({ node, children, ...props }) => {
    return (
      <h3 className="text-xl font-semibold mt-6 mb-2" {...props}>
        {children}
      </h3>
    )
  },
  h4: ({ node, children, ...props }) => {
    return (
      <h4 className="text-lg font-semibold mt-6 mb-2" {...props}>
        {children}
      </h4>
    )
  },
  h5: ({ node, children, ...props }) => {
    return (
      <h5 className="text-base font-semibold mt-6 mb-2" {...props}>
        {children}
      </h5>
    )
  },
  h6: ({ node, children, ...props }) => {
    return (
      <h6 className="text-sm font-semibold mt-6 mb-2" {...props}>
        {children}
      </h6>
    )
  },
}

const remarkPlugins = [remarkGfm]

const NonMemoizedMarkdown = ({ children }: { children: string }) => {
  return (
    <ReactMarkdown remarkPlugins={remarkPlugins} components={components}>
      {children}
    </ReactMarkdown>
  )
}

export const Markdown = memo(
  NonMemoizedMarkdown,
  (prevProps, nextProps) => prevProps.children === nextProps.children,
)
[V0_FILE]typescriptreact:file="components/message-editor.tsx" isMerged="true"
'use client'

import { ChatRequestOptions, Message } from 'ai'
import { Button } from './ui/button'
import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
import { Textarea } from './ui/textarea'
import { deleteTrailingMessages } from '@/app/app/todos/actions'
import { UseChatHelpers } from '@ai-sdk/react'

export type MessageEditorProps = {
  message: Message
  setMode: Dispatch<SetStateAction<'view' | 'edit'>>
  setMessages: UseChatHelpers['setMessages']
  reload: UseChatHelpers['reload']
}

export function MessageEditor({
  message,
  setMode,
  setMessages,
  reload,
}: MessageEditorProps) {
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false)

const [draftContent, setDraftContent] = useState<string>(message.content)
  const textareaRef = useRef<HTMLTextAreaElement>(null)

useEffect(() => {
    if (textareaRef.current) {
      adjustHeight()
    }
  }, [])

const adjustHeight = () => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto'
      textareaRef.current.style.height = `${
        textareaRef.current.scrollHeight + 2
      }px`
    }
  }

const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setDraftContent(event.target.value)
    adjustHeight()
  }

return (
    <div className="flex flex-col gap-2 w-full">
      <Textarea
        data-testid="message-editor"
        ref={textareaRef}
        className="bg-transparent outline-none overflow-hidden resize-none !text-base rounded-xl w-full"
        value={draftContent}
        onChange={handleInput}
      />

<div className="flex flex-row gap-2 justify-end">
        <Button
          variant="outline"
          className="h-fit py-2 px-3"
          onClick={() => {
            setMode('view')
          }}
        >
          Cancel
        </Button>
        <Button
          data-testid="message-editor-send-button"
          variant="default"
          className="h-fit py-2 px-3"
          disabled={isSubmitting}
          onClick={async () => {
            setIsSubmitting(true)

await deleteTrailingMessages({
              id: message.id,
            })

// @ts-expect-error todo: support UIMessage in setMessages
            setMessages((messages) => {
              const index = messages.findIndex((m) => m.id === message.id)

if (index !== -1) {
                const updatedMessage = {
                  ...message,
                  content: draftContent,
                  parts: [{ type: 'text', text: draftContent }],
                }

return [...messages.slice(0, index), updatedMessage]
              }

return messages
            })

setMode('view')
            reload()
          }}
        >
          {isSubmitting ? 'Sending...' : 'Send'}
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/message-reasoning.tsx" isMerged="true"
'use client'

import { useState } from 'react'
import { ChevronDown, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'

interface MessageReasoningProps {
  isLoading: boolean
  reasoning: string
}

export function MessageReasoning({
  isLoading,
  reasoning,
}: MessageReasoningProps) {
  const [isExpanded, setIsExpanded] = useState(false)

return (
    <div className="flex flex-col">
      {isLoading ? (
        <div className="flex flex-row gap-2 items-center">
          <div className="text-sm">Thinking</div>
          <div className="animate-spin">
            <Loader2 className="h-4 w-4" />
          </div>
        </div>
      ) : (
        <div className="flex flex-row gap-2 items-center">
          <div className="text-sm">Reasoned for a few seconds</div>
          <button
            data-testid="message-reasoning-toggle"
            type="button"
            className="cursor-pointer"
            onClick={() => {
              setIsExpanded(!isExpanded)
            }}
          >
            <ChevronDown
              className={cn(
                'h-4 w-4 transition-transform duration-200',
                isExpanded ? 'rotate-180' : 'rotate-0',
              )}
            />
          </button>
        </div>
      )}

{isExpanded && (
        <div data-testid="message-reasoning" className="pl-4 text-sm mt-2 mb-1">
          <div className="whitespace-pre-wrap">{reasoning}</div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/message.tsx" isMerged="true"
'use client'

import type { UIMessage } from 'ai'
import { memo, useState } from 'react'
import { Markdown } from './markdown'
import equal from 'fast-deep-equal'
import { cn, sanitizeText } from '@/lib/utils'
import { Button } from './ui/button'
import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip'
import { MessageEditor } from './message-editor'
import { MessageReasoning } from './message-reasoning'
import type { UseChatHelpers } from '@ai-sdk/react'
import { PencilIcon, SparklesIcon, User, CopyIcon } from 'lucide-react'
import { PreviewAttachment } from './preview-attachment'
import { formatDistanceToNow } from 'date-fns'
import { useCopyToClipboard } from 'usehooks-ts'
import { toast } from 'sonner'
import { useSearchParams } from 'next/navigation'

const PurePreviewMessage = ({
  chatId,
  message,
  isLoading,
  setMessages,
  reload,
  isReadonly,
  requiresScrollPadding,
}: {
  chatId: string
  message: UIMessage
  isLoading: boolean
  setMessages: UseChatHelpers['setMessages']
  reload: UseChatHelpers['reload']
  isReadonly: boolean
  requiresScrollPadding: boolean
}) => {
  const [mode, setMode] = useState<'view' | 'edit'>('view')
  const [_, copyToClipboard] = useCopyToClipboard()

// Check for activity message metadata
  const isActivityMessage = (message as any).metadata?.isActivity === true

if (isActivityMessage) {
    return (
      <div className="flex items-start gap-3 px-4 py-2 rounded-lg hover:bg-muted transition-colors">
        <div className="flex-shrink-0">
          <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
            <User className="w-4 h-4 text-white" />
          </div>
        </div>
        <div className="flex-1 min-w-0 mt-1">
          <div className="flex items-center justify-between">
            <span className="text-muted-foreground">
              <span className="font-medium text-foreground">You</span>{' '}
              {message.content || (message.parts?.[0] as any)?.text}
            </span>
            <span className="text-xs text-muted-foreground ml-2">
              {formatDistanceToNow(new Date(message.createdAt || new Date()), {
                addSuffix: true,
              })}
            </span>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="group/message">
      <div className="flex items-start gap-3 px-4 py-2 rounded-lg hover:bg-muted transition-colors">
        {/* Avatar */}
        <div className="flex-shrink-0">
          {message.role === 'assistant' ? (
            <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
              <SparklesIcon className="w-4 h-4 text-white" />
            </div>
          ) : (
            <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
              <User className="w-4 h-4 text-white" />
            </div>
          )}
        </div>

{/* Content */}
        <div className="flex-1 min-w-0 mt-1">
          {/* Header */}
          <div className="flex items-center gap-2 mb-2">
            <span className="font-medium text-foreground">
              {message.role === 'assistant' ? 'AI Assistant' : 'You'}
            </span>
            {!isReadonly && (
              <div className="flex items-center gap-2 ml-auto opacity-0 group-hover/message:opacity-100">
                <span className="text-xs text-muted-foreground">
                  {formatDistanceToNow(
                    new Date(message.createdAt || new Date()),
                    {
                      addSuffix: true,
                    },
                  )}
                </span>
                {message.role === 'user' && (
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-6 w-6 p-0"
                        onClick={() => setMode('edit')}
                      >
                        <PencilIcon className="w-3 h-3" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Edit message</TooltipContent>
                  </Tooltip>
                )}
                {message.role === 'assistant' && (
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-6 w-6 p-0"
                        onClick={async () => {
                          const textFromParts = message.parts
                            ?.filter((part) => part.type === 'text')
                            .map((part) => part.text)
                            .join('\n')
                            .trim()

if (!textFromParts) {
                            toast.error("There's no text to copy!")
                            return
                          }

await copyToClipboard(textFromParts)
                          toast.success('Copied to clipboard!')
                        }}
                      >
                        <CopyIcon className="w-3 h-3" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Copy</TooltipContent>
                  </Tooltip>
                )}
              </div>
            )}
          </div>

{/* Attachments */}
          {message.experimental_attachments &&
            message.experimental_attachments.length > 0 && (
              <div className="flex flex-wrap gap-2 mb-3">
                {message.experimental_attachments.map((attachment) => (
                  <PreviewAttachment
                    key={attachment.url}
                    attachment={attachment}
                  />
                ))}
              </div>
            )}

{/* Message Content */}
          {message.parts?.map((part, index) => {
            const key = `message-${message.id}-part-${index}`

if (part.type === 'reasoning') {
              return (
                <div key={key} className="mb-3">
                  <MessageReasoning
                    isLoading={isLoading}
                    reasoning={part.reasoning}
                  />
                </div>
              )
            }

if (part.type === 'text') {
              if (mode === 'edit') {
                return (
                  <div key={key} className="mt-2">
                    <MessageEditor
                      message={message}
                      setMode={setMode}
                      setMessages={setMessages}
                      reload={reload}
                    />
                  </div>
                )
              }

return (
                <div
                  key={key}
                  className="prose prose-sm max-w-none dark:prose-invert"
                >
                  <div className="text-foreground leading-relaxed">
                    <Markdown>{sanitizeText(part.text)}</Markdown>
                  </div>
                </div>
              )
            }

if (part.type === 'tool-invocation') {
              const { toolInvocation } = part
              const { toolName, toolCallId, state } = toolInvocation

if (state === 'call') {
                return (
                  <div
                    key={toolCallId}
                    className="bg-muted/50 rounded-md p-3 mb-2"
                  >
                    <div className="text-xs text-muted-foreground mb-1">
                      Tool: {toolName}
                    </div>
                    <pre className="text-xs overflow-x-auto">
                      {JSON.stringify(toolInvocation.args, null, 2)}
                    </pre>
                  </div>
                )
              }

if (state === 'result') {
                // Trigger optimistic updates based on successful tool results
                const result = toolInvocation.result
                if (result?.success && chatId) {
                  if (toolName === 'updateTodoTitle' && result.newTitle) {
                    window.dispatchEvent(
                      new CustomEvent('todo-optimistic-update', {
                        detail: {
                          todoId: chatId,
                          type: 'title',
                          value: result.newTitle,
                        },
                      }),
                    )
                  } else if (
                    toolName === 'updateTodoDescription' &&
                    result.newDescription !== undefined
                  ) {
                    window.dispatchEvent(
                      new CustomEvent('todo-optimistic-update', {
                        detail: {
                          todoId: chatId,
                          type: 'description',
                          value: result.newDescription,
                        },
                      }),
                    )
                  } else if (toolName === 'updateTodoDueDate') {
                    window.dispatchEvent(
                      new CustomEvent('todo-optimistic-update', {
                        detail: {
                          todoId: chatId,
                          type: 'dueDate',
                          value: result.newDueDate,
                        },
                      }),
                    )
                  } else if (
                    toolName === 'toggleTodoCompletion' &&
                    result.completed !== undefined
                  ) {
                    window.dispatchEvent(
                      new CustomEvent('todo-optimistic-update', {
                        detail: {
                          todoId: chatId,
                          type: 'completed',
                          value: result.completed,
                        },
                      }),
                    )
                  }
                }

return (
                  <div
                    key={toolCallId}
                    className="bg-green-50 dark:bg-green-900/20 rounded-md p-3 mb-2"
                  >
                    <div className="text-xs text-green-600 dark:text-green-400 mb-1">
                      Result: {toolName}
                    </div>
                    <pre className="text-xs overflow-x-auto text-green-700 dark:text-green-300">
                      {JSON.stringify(toolInvocation.result, null, 2)}
                    </pre>
                  </div>
                )
              }
            }

return null
          })}
        </div>
      </div>
    </div>
  )
}

export const PreviewMessage = memo(
  PurePreviewMessage,
  (prevProps, nextProps) => {
    if (prevProps.isLoading !== nextProps.isLoading) return false
    if (prevProps.message.id !== nextProps.message.id) return false
    if (prevProps.requiresScrollPadding !== nextProps.requiresScrollPadding)
      return false
    if (!equal(prevProps.message.parts, nextProps.message.parts)) return false
    return true
  },
)

export const ThinkingMessage = () => {
  return (
    <div className="group/message">
      <div className="flex items-start gap-3 p-4 rounded-lg">
        <div className="flex-shrink-0 mt-0.5">
          <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
            <SparklesIcon className="w-4 h-4 text-white animate-pulse" />
          </div>
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-2">
            <span className="font-medium text-foreground">AI Assistant</span>
            <span className="text-xs text-muted-foreground">thinking...</span>
          </div>
          <div className="flex items-center gap-2 text-muted-foreground">
            <div className="flex gap-1">
              <div
                className="w-2 h-2 bg-muted-foreground/60 rounded-full animate-bounce"
                style={{ animationDelay: '0ms' }}
              ></div>
              <div
                className="w-2 h-2 bg-muted-foreground/60 rounded-full animate-bounce"
                style={{ animationDelay: '150ms' }}
              ></div>
              <div
                className="w-2 h-2 bg-muted-foreground/60 rounded-full animate-bounce"
                style={{ animationDelay: '300ms' }}
              ></div>
            </div>
            <span className="text-sm">Processing your request</span>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/messages.tsx" isMerged="true"
import type { UIMessage } from 'ai'
import { PreviewMessage, ThinkingMessage } from './message'
import { memo } from 'react'
import equal from 'fast-deep-equal'
import type { UseChatHelpers } from '@ai-sdk/react'
import { format, isSameDay } from 'date-fns'

interface MessagesProps {
  chatId: string
  status: UseChatHelpers['status']
  messages: Array<UIMessage>
  setMessages: UseChatHelpers['setMessages']
  reload: UseChatHelpers['reload']
  isReadonly: boolean
  initialMessages: Array<UIMessage>
}

function PureMessages({
  chatId,
  status,
  messages,
  setMessages,
  reload,
  isReadonly,
  initialMessages,
}: MessagesProps) {
  return (
    <div className="flex flex-col min-w-0 pt-4">
      {messages.map((message, index) => {
        const showDateHeader =
          index === 0 ||
          !isSameDay(
            new Date(messages[index - 1].createdAt || new Date()),
            new Date(message.createdAt || new Date()),
          )

return (
          <div key={message.id}>
            {showDateHeader && (
              <div className="flex items-center justify-center py-4">
                <div className="text-xs text-muted-foreground bg-background px-3 py-1 rounded-full border">
                  {format(
                    new Date(message.createdAt || new Date()),
                    'MMMM d, yyyy',
                  )}
                </div>
              </div>
            )}
            <PreviewMessage
              chatId={chatId}
              message={message}
              isLoading={
                status === 'streaming' && messages.length - 1 === index
              }
              setMessages={setMessages}
              reload={reload}
              isReadonly={isReadonly}
              requiresScrollPadding={false}
            />
          </div>
        )
      })}

{status === 'submitted' &&
        messages.length > 0 &&
        messages[messages.length - 1].role === 'user' &&
        messages.length > initialMessages.length && <ThinkingMessage />}
    </div>
  )
}

export const Messages = memo(PureMessages, (prevProps, nextProps) => {
  if (prevProps.status !== nextProps.status) return false
  if (prevProps.status && nextProps.status) return false
  if (prevProps.messages.length !== nextProps.messages.length) return false
  if (prevProps.initialMessages.length !== nextProps.initialMessages.length)
    return false
  if (!equal(prevProps.messages, nextProps.messages)) return false

return true
})
[V0_FILE]typescriptreact:file="components/multimodal-input.tsx" isMerged="true"
'use client'

import type { Attachment, UIMessage } from 'ai'
import cx from 'classnames'
import type React from 'react'
import {
  useRef,
  useEffect,
  useState,
  useCallback,
  type Dispatch,
  type SetStateAction,
  type ChangeEvent,
  memo,
} from 'react'
import { toast } from 'sonner'
import { useLocalStorage, useWindowSize } from 'usehooks-ts'

import { PreviewAttachment } from './preview-attachment'
import { Button } from './ui/button'
import { Textarea } from './ui/textarea'
import equal from 'fast-deep-equal'
import type { UseChatHelpers } from '@ai-sdk/react'
import {
  ArrowDown,
  ArrowUpIcon,
  PaperclipIcon,
  StopCircleIcon,
} from 'lucide-react'
import { useScrollToBottom } from '@/hooks/use-scroll-to-bottom'

function PureMultimodalInput({
  chatId,
  input,
  setInput,
  status,
  stop,
  attachments,
  setAttachments,
  messages,
  setMessages,
  append,
  handleSubmit,
  className,
}: {
  chatId: string
  input: UseChatHelpers['input']
  setInput: UseChatHelpers['setInput']
  status: UseChatHelpers['status']
  stop: () => void
  attachments: Array<Attachment>
  setAttachments: Dispatch<SetStateAction<Array<Attachment>>>
  messages: Array<UIMessage>
  setMessages: UseChatHelpers['setMessages']
  append: UseChatHelpers['append']
  handleSubmit: UseChatHelpers['handleSubmit']
  className?: string
}) {
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const { width } = useWindowSize()

useEffect(() => {
    if (textareaRef.current) {
      adjustHeight()
    }
  }, [])

const resetHeight = () => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto'
      textareaRef.current.style.height = '98px'
    }
  }

const [localStorageInput, setLocalStorageInput] = useLocalStorage('input', '')

useEffect(() => {
    if (textareaRef.current) {
      const domValue = textareaRef.current.value
      // Prefer DOM value over localStorage to handle hydration
      const finalValue = domValue || localStorageInput || ''
      setInput(finalValue)
      adjustHeight()
    }
    // Only run once after hydration
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

useEffect(() => {
    setLocalStorageInput(input)
  }, [input, setLocalStorageInput])

const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInput(event.target.value)
    adjustHeight()
  }

const fileInputRef = useRef<HTMLInputElement>(null)
  const [uploadQueue, setUploadQueue] = useState<Array<string>>([])

const submitForm = useCallback(() => {
    window.history.replaceState({}, '', `/app/todos/${chatId}`)

handleSubmit(undefined, {
      experimental_attachments: attachments,
    })

setAttachments([])
    setLocalStorageInput('')
    resetHeight()

if (width && width > 768) {
      textareaRef.current?.focus()
    }
  }, [
    attachments,
    handleSubmit,
    setAttachments,
    setLocalStorageInput,
    width,
    chatId,
  ])

const uploadFile = async (file: File) => {
    const formData = new FormData()
    formData.append('file', file)

try {
      const response = await fetch('/api/files/upload', {
        method: 'POST',
        body: formData,
      })

if (response.ok) {
        const data = await response.json()
        const { url, pathname, contentType } = data

return {
          url,
          name: pathname,
          contentType: contentType,
        }
      }
      const { error } = await response.json()
      toast.error(error)
    } catch (error) {
      toast.error('Failed to upload file, please try again!')
    }
  }

const handleFileChange = useCallback(
    async (event: ChangeEvent<HTMLInputElement>) => {
      const files = Array.from(event.target.files || [])

setUploadQueue(files.map((file) => file.name))

try {
        const uploadPromises = files.map((file) => uploadFile(file))
        const uploadedAttachments = await Promise.all(uploadPromises)
        const successfullyUploadedAttachments = uploadedAttachments.filter(
          (attachment) => attachment !== undefined,
        )

setAttachments((currentAttachments) => [
          ...currentAttachments,
          ...successfullyUploadedAttachments,
        ])
      } catch (error) {
        console.error('Error uploading files!', error)
      } finally {
        setUploadQueue([])
      }
    },
    [setAttachments],
  )

const { isAtBottom, scrollToBottom } = useScrollToBottom()

useEffect(() => {
    if (status === 'submitted') {
      scrollToBottom()
    }
  }, [status, scrollToBottom])

return (
    <div className="relative w-full flex flex-col gap-4">
      {!isAtBottom && (
        <div className="absolute left-1/2 bottom-28 -translate-x-1/2 z-50">
          <Button
            data-testid="scroll-to-bottom-button"
            className="rounded-full"
            size="icon"
            variant="outline"
            onClick={(event) => {
              event.preventDefault()
              scrollToBottom()
            }}
          >
            <ArrowDown />
          </Button>
        </div>
      )}

{(attachments.length > 0 || uploadQueue.length > 0) && (
        <div
          data-testid="attachments-preview"
          className="flex flex-row gap-2 overflow-x-scroll items-end"
        >
          {attachments.map((attachment) => (
            <PreviewAttachment key={attachment.url} attachment={attachment} />
          ))}

{uploadQueue.map((filename) => (
            <PreviewAttachment
              key={filename}
              attachment={{
                url: '',
                name: filename,
                contentType: '',
              }}
              isUploading={true}
            />
          ))}
        </div>
      )}

<Textarea
        data-testid="multimodal-input"
        ref={textareaRef}
        placeholder="Send a message..."
        value={input}
        onChange={handleInput}
        className={cx(
          'min-h-[24px] max-h-[calc(75dvh)] overflow-hidden resize-none rounded-2xl !text-base bg-muted pb-10 dark:border-zinc-700',
          className,
        )}
        rows={2}
        autoFocus
        onKeyDown={(event) => {
          if (
            event.key === 'Enter' &&
            !event.shiftKey &&
            !event.nativeEvent.isComposing
          ) {
            event.preventDefault()

if (status !== 'ready') {
              toast.error('Please wait for the model to finish its response!')
            } else {
              submitForm()
            }
          }
        }}
      />

<div className="absolute bottom-0 right-0 p-2 w-fit flex flex-row justify-end">
        {status === 'submitted' ? (
          <StopButton stop={stop} setMessages={setMessages} />
        ) : (
          <SendButton
            input={input}
            submitForm={submitForm}
            uploadQueue={uploadQueue}
          />
        )}
      </div>
    </div>
  )
}

export const MultimodalInput = memo(
  PureMultimodalInput,
  (prevProps, nextProps) => {
    if (prevProps.input !== nextProps.input) return false
    if (prevProps.status !== nextProps.status) return false
    if (!equal(prevProps.attachments, nextProps.attachments)) return false

return true
  },
)

function PureAttachmentsButton({
  fileInputRef,
  status,
}: {
  fileInputRef: React.MutableRefObject<HTMLInputElement | null>
  status: UseChatHelpers['status']
}) {
  return (
    <Button
      data-testid="attachments-button"
      className="rounded-md rounded-bl-lg p-[7px] h-fit dark:border-zinc-700 hover:dark:bg-zinc-900 hover:bg-zinc-200"
      onClick={(event) => {
        event.preventDefault()
        fileInputRef.current?.click()
      }}
      disabled={status !== 'ready'}
      variant="ghost"
    >
      <PaperclipIcon size={14} />
    </Button>
  )
}

const AttachmentsButton = memo(PureAttachmentsButton)

function PureStopButton({
  stop,
  setMessages,
}: {
  stop: () => void
  setMessages: UseChatHelpers['setMessages']
}) {
  return (
    <Button
      data-testid="stop-button"
      className="rounded-full p-1.5 h-fit border dark:border-zinc-600"
      onClick={(event) => {
        event.preventDefault()
        stop()
        setMessages((messages) => messages)
      }}
    >
      <StopCircleIcon size={14} />
    </Button>
  )
}

const StopButton = memo(PureStopButton)

function PureSendButton({
  submitForm,
  input,
  uploadQueue,
}: {
  submitForm: () => void
  input: string
  uploadQueue: Array<string>
}) {
  return (
    <Button
      data-testid="send-button"
      className="rounded-full p-1.5 h-fit border dark:border-zinc-600"
      onClick={(event) => {
        event.preventDefault()
        submitForm()
      }}
      disabled={input.length === 0 || uploadQueue.length > 0}
    >
      <ArrowUpIcon size={14} />
    </Button>
  )
}

const SendButton = memo(PureSendButton, (prevProps, nextProps) => {
  if (prevProps.uploadQueue.length !== nextProps.uploadQueue.length)
    return false
  if (prevProps.input !== nextProps.input) return false
  return true
})
[V0_FILE]typescriptreact:file="components/notifications.tsx" isMerged="true"
'use client'

import { useState, useCallback } from 'react'
import { Bell, X } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { formatDistanceToNow } from 'date-fns'
import { NotificationSchema } from '@/app/api/notifications/notifications'
import { z } from 'zod'
import { useRouter } from 'next/navigation'
import useSWR from 'swr'

type Notification = z.infer<typeof NotificationSchema>

interface NotificationsData {
  notifications: Notification[]
  version: number
}

const STORAGE_KEY = 'notifications-data'

// Get stored data from localStorage
function getStoredData(): NotificationsData | null {
  if (typeof window === 'undefined') return null
  try {
    const stored = localStorage.getItem(STORAGE_KEY)
    return stored ? JSON.parse(stored) : null
  } catch {
    return null
  }
}

// Store data to localStorage
function storeData(data: NotificationsData) {
  if (typeof window === 'undefined') return
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
  } catch (error) {
    console.error('Failed to store notifications data:', error)
  }
}

// Fetcher function for SWR that handles merging with stored data
async function fetchAndMergeNotifications(
  url: string,
): Promise<NotificationsData> {
  const response = await fetch(url)
  if (!response.ok) {
    throw new Error('Failed to fetch notifications')
  }

const newData: NotificationsData = await response.json()

// Get existing notifications from localStorage
  const stored = getStoredData()
  const existingNotifications = stored?.notifications || []

// Merge new notifications with existing ones, avoiding duplicates
  const existingIds = new Set(existingNotifications.map((n) => n.id))
  const newNotifications = newData.notifications.filter(
    (n) => !existingIds.has(n.id),
  )

const mergedNotifications = [...newNotifications, ...existingNotifications]
    .sort(
      (a, b) =>
        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
    )
    .slice(0, 100) // Keep only the latest 100 notifications

const mergedData = {
    notifications: mergedNotifications,
    version: newData.version,
  }

// Store the merged data
  if (newNotifications.length > 0) {
    storeData(mergedData)
  }

return mergedData
}

export function NotificationsMenu() {
  const [showNotifications, setShowNotifications] = useState(false)
  const router = useRouter()

const [initialTimestamp] = useState(() => {
    const stored = getStoredData()
    return stored?.version || 0
  })

// Use SWR to fetch and merge notifications
  const { data, error, mutate } = useSWR(
    `/api/notifications/since/${initialTimestamp}`,
    fetchAndMergeNotifications,
    {
      refreshInterval: 30000, // Poll every 30 seconds
      revalidateOnFocus: true,
      revalidateOnReconnect: true,
      fallbackData: getStoredData() || undefined, // Use stored data as fallback
    },
  )

// Derive notifications and unread count from SWR data
  const notifications = data?.notifications || []
  const unreadCount = notifications.filter((n) => !n.read).length

const handleNotificationClick = useCallback(
    async (notification: Notification) => {
      if (!notification.read) {
        try {
          await fetch(`/api/notifications/${notification.id}/mark-read`, {
            method: 'POST',
          })

// Update local state optimistically
          const updatedNotifications = notifications.map((n) =>
            n.id === notification.id ? { ...n, read: true } : n,
          )

const updatedData = {
            notifications: updatedNotifications,
            version: data?.version || Date.now(),
          }

// Update localStorage
          storeData(updatedData)

// Revalidate SWR data
          mutate(updatedData, false)
        } catch (error) {
          console.error('Failed to mark notification as read:', error)
        }
      }

// Navigate if the notification has a taskId
      if (notification.taskId) {
        router.push(`/app/todos?task=${notification.taskId}`)
      }

setShowNotifications(false)
    },
    [notifications, data?.version, mutate, router],
  )

const markAllAsRead = useCallback(async () => {
    try {
      await fetch('/api/notifications/mark-all-read', {
        method: 'POST',
      })

// Update local state optimistically
      const updatedNotifications = notifications.map((n) => ({
        ...n,
        read: true,
      }))
      const updatedData = {
        notifications: updatedNotifications,
        version: data?.version || Date.now(),
      }

// Update localStorage
      storeData(updatedData)

// Revalidate SWR data
      mutate(updatedData, false)
    } catch (error) {
      console.error('Failed to mark all notifications as read:', error)
    }
  }, [notifications, data?.version, mutate])

const handleClearRead = useCallback(() => {
    const unreadNotifications = notifications.filter((n) => !n.read)
    const updatedData = {
      notifications: unreadNotifications,
      version: data?.version || Date.now(),
    }

// Update localStorage
    storeData(updatedData)

// Update SWR data
    mutate(updatedData, false)
  }, [notifications, data?.version, mutate])

return (
    <div className="relative">
      <Button
        variant="ghost"
        size="sm"
        className="p-2 hover:bg-muted/80 transition-all duration-200 rounded-lg relative"
        onClick={() => setShowNotifications(!showNotifications)}
      >
        <Bell className="h-4 w-4 text-muted-foreground" />
        {unreadCount > 0 && (
          <div className="absolute -top-1 -right-1 h-5 w-5 bg-red-500 rounded-full flex items-center justify-center">
            <span className="text-xs text-white font-semibold">
              {unreadCount}
            </span>
          </div>
        )}
      </Button>

{showNotifications && (
        <div className="absolute right-0 top-full mt-2 w-72 bg-card rounded-lg shadow-xl border border-border backdrop-blur-sm z-50">
          <div className="p-3 border-b border-border">
            <div className="flex items-center justify-between">
              <h3 className="text-sm font-semibold text-foreground">
                Notifications
              </h3>
              <div className="flex items-center gap-1">
                {unreadCount > 0 && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={markAllAsRead}
                    className="text-xs text-muted-foreground hover:text-foreground px-2 py-1 h-6"
                  >
                    Mark all read
                  </Button>
                )}
                {notifications.some((n) => n.read) && (
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={handleClearRead}
                    className="text-xs text-muted-foreground hover:text-foreground px-2 py-1 h-6"
                  >
                    Clear read
                  </Button>
                )}
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setShowNotifications(false)}
                  className="p-1 hover:bg-muted rounded h-6 w-6"
                >
                  <X className="h-3 w-3 text-muted-foreground" />
                </Button>
              </div>
            </div>
          </div>

<div className="max-h-80 overflow-y-auto">
            {notifications.length === 0 ? (
              <div className="p-4 text-center text-muted-foreground text-sm">
                {error
                  ? 'Failed to load notifications'
                  : data === undefined
                  ? 'Loading…'
                  : 'No notifications yet'}
              </div>
            ) : (
              notifications.map((notification: Notification) => (
                <div
                  key={notification.id}
                  className={`p-3 border-b border-border hover:bg-muted/50 transition-all duration-200 cursor-pointer ${
                    !notification.read
                      ? 'bg-blue-50/30 dark:bg-blue-950/30'
                      : ''
                  }`}
                  onClick={() => handleNotificationClick(notification)}
                  role="link"
                  tabIndex={0}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault()
                      handleNotificationClick(notification)
                    }
                  }}
                >
                  <div className="flex gap-2">
                    <div>
                      <p className="text-sm text-foreground">
                        {notification.message}
                      </p>
                      <p className="text-xs text-muted-foreground mt-1">
                        {formatDistanceToNow(new Date(notification.createdAt), {
                          addSuffix: true,
                        })}
                      </p>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/preview-attachment.tsx" isMerged="true"
import type { Attachment } from 'ai'
import { LoaderIcon } from 'lucide-react'

export const PreviewAttachment = ({
  attachment,
  isUploading = false,
}: {
  attachment: Attachment
  isUploading?: boolean
}) => {
  const { name, url, contentType } = attachment

return (
    <div data-testid="input-attachment-preview" className="flex flex-col gap-2">
      <div className="w-20 h-16 aspect-video bg-muted rounded-md relative flex flex-col items-center justify-center">
        {contentType ? (
          contentType.startsWith('image') ? (
            // NOTE: it is recommended to use next/image for images
            // eslint-disable-next-line @next/next/no-img-element
            <img
              key={url}
              src={url}
              alt={name ?? 'An image attachment'}
              className="rounded-md size-full object-cover"
            />
          ) : (
            <div className="" />
          )
        ) : (
          <div className="" />
        )}

{isUploading && (
          <div
            data-testid="input-attachment-loader"
            className="animate-spin absolute text-zinc-500"
          >
            <LoaderIcon />
          </div>
        )}
      </div>
      <div className="text-xs text-zinc-500 max-w-16 truncate">{name}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/signup-form.tsx" isMerged="true"
'use client'

import type React from 'react'
import { useState } from 'react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { useStackApp } from '@stackframe/stack'
import { useRouter } from 'next/navigation'

// Use the exact error codes from the API
type ErrorType =
  | 'none'
  | 'USER_EMAIL_ALREADY_EXISTS'
  | 'PASSWORD_REQUIREMENTS_NOT_MET'
  | 'UNKNOWN_ERROR'

// Map error codes to their corresponding messages
const errorMessages: Record<ErrorType, string | ((email: string) => string)> = {
  none: '',
  USER_EMAIL_ALREADY_EXISTS: (email: string) =>
    `Email "${email}" is already registered. Please sign in instead.`,
  PASSWORD_REQUIREMENTS_NOT_MET: 'Password does not meet requirements.',
  UNKNOWN_ERROR: 'Failed to create account. Please try again.',
}

// Define loading states
type LoadingState = null | 'email' | 'google' | 'github'

export function SignupForm({
  className,
  onToggleForm,
  redirectUrl = '/',
  ...props
}: React.ComponentPropsWithoutRef<'div'> & {
  onToggleForm?: () => void
  redirectUrl?: string
}) {
  const app = useStackApp()
  const router = useRouter()
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [errorType, setErrorType] = useState<ErrorType>('none')
  const [loadingState, setLoadingState] = useState<LoadingState>(null)

const handleSignup = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoadingState('email')
    setErrorType('none')

// Call the signup method and directly handle the response
    const result = await app.signUpWithCredential({
      email,
      password,
    })

// Log the full response for debugging
    console.log('Signup result:', result)

// Check if result contains error information
    if (result.status === 'error') {
      const error = result.error

// Log the complete error for debugging
      console.log('Signup error details:', JSON.stringify(error, null, 2))

// Extract error code from error name
      const errorCode =
        error.code || (error.name ? getErrorCodeFromName(error.name) : null)

// Use the exact error code if it's one we know about
      if (
        errorCode === 'USER_EMAIL_ALREADY_EXISTS' ||
        errorCode === 'PASSWORD_REQUIREMENTS_NOT_MET'
      ) {
        setErrorType(errorCode as ErrorType)
      } else {
        setErrorType('UNKNOWN_ERROR')
      }

setLoadingState(null)
    } else {
      router.push(redirectUrl)
    }
  }

const handleOAuthSignup = async (provider: 'google' | 'github') => {
    setLoadingState(provider)
    setErrorType('none')

try {
      await app.signInWithOAuth(provider)
      // OAuth redirects automatically on success
    } catch (err: any) {
      console.error(`${provider} signup error:`, err)
      setErrorType('UNKNOWN_ERROR')
      setLoadingState(null)
    }
  }

// Get the error message based on the current error type
  const errorMessage =
    errorType === 'USER_EMAIL_ALREADY_EXISTS'
      ? (errorMessages[errorType] as (email: string) => string)(email)
      : (errorMessages[errorType] as string)

return (
    <div className={cn('flex flex-col gap-6', className)} {...props}>
      <Card>
        <CardHeader className="text-center">
          <CardTitle className="text-xl">Create an account</CardTitle>
          <CardDescription>Sign up to get started</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSignup}>
            <div className="grid gap-6">
              <div className="flex flex-col gap-4">
                <Button
                  variant="outline"
                  className="w-full"
                  type="button"
                  disabled={loadingState !== null}
                  onClick={() => handleOAuthSignup('google')}
                >
                  {loadingState === 'google' ? (
                    <span className="flex items-center">
                      <svg
                        className="animate-spin -ml-1 mr-3 h-4 w-4 text-current"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Signing up...
                    </span>
                  ) : (
                    <>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        className="w-5 h-5 mr-2"
                      >
                        <path
                          d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
                          fill="currentColor"
                        />
                      </svg>
                      Sign up with Google
                    </>
                  )}
                </Button>
                <Button
                  variant="outline"
                  className="w-full"
                  type="button"
                  disabled={loadingState !== null}
                  onClick={() => handleOAuthSignup('github')}
                >
                  {loadingState === 'github' ? (
                    <span className="flex items-center">
                      <svg
                        className="animate-spin -ml-1 mr-3 h-4 w-4 text-current"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Signing up...
                    </span>
                  ) : (
                    <>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                        className="w-5 h-5 mr-2"
                      >
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0"></path>
                      </svg>
                      Sign up with GitHub
                    </>
                  )}
                </Button>
              </div>
              <div className="relative">
                <div className="absolute inset-0 flex items-center">
                  <span className="w-full border-t" />
                </div>
                <div className="relative flex justify-center text-xs uppercase">
                  <span className="bg-background px-2 text-muted-foreground">
                    Or continue with
                  </span>
                </div>
              </div>
              <div className="grid gap-2">
                <div className="grid gap-1">
                  <label className="sr-only" htmlFor="name">
                    Name
                  </label>
                  <input
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    placeholder="Name"
                    type="text"
                    id="name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                  />
                </div>
                <div className="grid gap-1">
                  <label className="sr-only" htmlFor="email">
                    Email
                  </label>
                  <input
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    placeholder="Email"
                    type="email"
                    id="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>
                <div className="grid gap-1">
                  <label className="sr-only" htmlFor="password">
                    Password
                  </label>
                  <input
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    placeholder="Password"
                    type="password"
                    id="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                  />
                </div>
                {errorMessage ? (
                  <p className="text-sm text-red-500">{errorMessage}</p>
                ) : null}
                <Button disabled={loadingState !== null} type="submit">
                  {loadingState === 'email' ? (
                    <span className="flex items-center">
                      <svg
                        className="animate-spin -ml-1 mr-3 h-4 w-4 text-current"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Creating account...
                    </span>
                  ) : (
                    'Create account'
                  )}
                </Button>
              </div>
            </div>
          </form>
        </CardContent>
      </Card>
      <div className="text-center text-sm text-muted-foreground">
        Already have an account?{' '}
        <Button variant="link" onClick={onToggleForm}>
          Sign in
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/subscription-card.tsx" isMerged="true"
'use client'

import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Zap, Package } from 'lucide-react'
import {
  redirectToCheckout,
  redirectToBillingPortal,
} from '@/app/api/stripe/client'
import { useState } from 'react'
import { cn } from '@/lib/utils'
import { Progress } from '@/components/ui/progress'

interface SubscriptionCardProps {
  userId: string
  email: string
  name?: string | null
  plan: {
    id: string
    messageLimit: number
  }
  subscription?: {
    status: string
    currentPeriodEnd?: number
    cancelAtPeriodEnd?: boolean
    paymentMethod?: {
      brand: string | null
      last4: string | null
    } | null
  } | null
  rateLimitStatus: {
    remaining: number
    reset: number
  }
}

export function SubscriptionCard({
  userId,
  email,
  name,
  plan,
  subscription,
  rateLimitStatus,
}: SubscriptionCardProps) {
  const [isLoading, setIsLoading] = useState(false)
  const isPro = plan.id === 'PRO'
  const isActive = subscription?.status === 'active'

// Calculate message usage for progress bar
  const messageLimit = plan.messageLimit
  const messagesUsed = messageLimit - rateLimitStatus.remaining
  const usagePercentage = (messagesUsed / messageLimit) * 100

return (
    <div
      className={cn(isPro ? 'col-span-2' : 'rounded-lg border px-4 py-3 -my-3')}
    >
      <div className="space-y-1">
        <div className="flex items-center gap-2">
          <h2 className="text-xl font-medium">
            {isPro ? 'Pro Plan' : 'Free Plan'}
          </h2>
          {isPro ? <Badge variant="outline">Active</Badge> : null}
        </div>
        <p className="text-sm text-muted-foreground">
          {isPro
            ? `Advanced features with ${messageLimit} messages per day`
            : `Basic features with ${messageLimit} messages per day`}
        </p>
      </div>

<div className="space-y-4 mt-4">
        <div className="space-y-2">
          <div className="flex items-center justify-between text-sm">
            <span>Messages Today</span>
            <span className="font-medium">
              {messagesUsed} / {messageLimit}
            </span>
          </div>
          <Progress value={usagePercentage} className="h-2" />
        </div>
      </div>

{!isPro && (
        <ul className="grid gap-2 text-sm mt-4">
          <li className="flex items-center gap-2">
            <Zap className="h-4 w-4 text-muted" />
            <span>{messageLimit} messages per day</span>
          </li>
          <li className="flex items-center gap-2">
            <Package className="h-4 w-4 text-muted" />
            <span>Basic AI assistance</span>
          </li>
        </ul>
      )}

<div className="mt-8 flex justify-end">
        {isPro ? (
          <form
            action={async () => {
              setIsLoading(true)
              try {
                await redirectToBillingPortal({ userId })
              } catch (error) {
                console.error('Error redirecting to billing portal:', error)
                setIsLoading(false)
              }
            }}
          >
            <Button
              type="submit"
              variant="outline"
              className="gap-2"
              disabled={isLoading}
            >
              {isLoading ? 'Redirecting...' : 'Manage Subscription'}
            </Button>
          </form>
        ) : (
          <form
            action={async () => {
              setIsLoading(true)
              try {
                await redirectToCheckout({ userId, email, name })
              } catch (error) {
                console.error('Error redirecting to checkout:', error)
                setIsLoading(false)
              }
            }}
          >
            <Button type="submit" className="gap-2" disabled={isLoading}>
              {isLoading ? 'Redirecting...' : 'Upgrade to Pro'}
            </Button>
          </form>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
'use client'
import { Moon, Sun, Laptop } from 'lucide-react'
import { useTheme } from 'next-themes'

import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Label } from './ui/label'
import { RadioGroup, RadioGroupItem } from './ui/radio-group'

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" className="h-8 w-8 rounded-md">
          <Sun className="h-[1.1rem] w-[1.1rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.1rem] w-[1.1rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="end"
        className="dark:bg-card dark:border-border/50"
      >
        <DropdownMenuItem
          onClick={() => setTheme('light')}
          className="cursor-pointer"
        >
          Light
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => setTheme('dark')}
          className="cursor-pointer"
        >
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem
          onClick={() => setTheme('system')}
          className="cursor-pointer"
        >
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export function ThemeSelect() {
  const { theme, setTheme } = useTheme()

return (
    <RadioGroup
      defaultValue={theme}
      onValueChange={setTheme}
      className="flex gap-4"
    >
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="light" id="light" />
        <Label htmlFor="light" className="flex items-center gap-1.5">
          <Sun className="h-4 w-4" />
          Light
        </Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="dark" id="dark" />
        <Label htmlFor="dark" className="flex items-center gap-1.5">
          <Moon className="h-4 w-4" />
          Dark
        </Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="system" id="system" />
        <Label htmlFor="system" className="flex items-center gap-1.5">
          <Laptop className="h-4 w-4" />
          System
        </Label>
      </div>
    </RadioGroup>
  )
}
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    />
  </AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
AlertDialogDescription.displayName =
  AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    className={cn(buttonVariants(), className)}
    {...props}
  />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel
    ref={ref}
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
      className
    )}
    {...props}
  />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
        default: "bg-background text-foreground",
        destructive:
          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
))
Alert.displayName = "Alert"

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
    {...props}
  />
))
AlertTitle.displayName = "AlertTitle"

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm [&_p]:leading-relaxed", className)}
    {...props}
  />
))
AlertDescription.displayName = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }
[V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true"
"use client"

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    )}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    className={cn("aspect-square h-full w-full", className)}
    {...props}
  />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted",
      className
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.ComponentPropsWithoutRef<"nav"> & {
    separator?: React.ReactNode
  }
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
Breadcrumb.displayName = "Breadcrumb"

const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
      className
    )}
    {...props}
  />
))
BreadcrumbList.displayName = "BreadcrumbList"

const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
))
BreadcrumbItem.displayName = "BreadcrumbItem"

const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = "BreadcrumbLink"

const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
))
BreadcrumbPage.displayName = "BreadcrumbPage"

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-8 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true"
"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/carousel.tsx" isMerged="true"
"use client"

import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = "horizontal",
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "ArrowLeft") {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === "ArrowRight") {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext]
    )

React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

setApi(api)
    }, [api, setApi])

React.useEffect(() => {
      if (!api) {
        return
      }

onSelect(api)
      api.on("reInit", onSelect)
      api.on("select", onSelect)

return () => {
        api?.off("select", onSelect)
      }
    }, [api, onSelect])

return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("relative", className)}
          role="region"
          aria-roledescription="carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  }
)
Carousel.displayName = "Carousel"

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = "CarouselContent"

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      {...props}
    />
  )
})
CarouselItem.displayName = "CarouselItem"

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute  h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-left-12 top-1/2 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="h-4 w-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = "CarouselPrevious"

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute h-8 w-8 rounded-full",
        orientation === "horizontal"
          ? "-right-12 top-1/2 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="h-4 w-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = "CarouselNext"

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

return context
}

const ChartContainer = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    config: ChartConfig
    children: React.ComponentProps<
      typeof RechartsPrimitive.ResponsiveContainer
    >["children"]
  }
>(({ id, className, children, config, ...props }, ref) => {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-chart={chartId}
        ref={ref}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
})
ChartContainer.displayName = "Chart"

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color
  )

if (!colorConfig.length) {
    return null
  }

return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
    React.ComponentProps<"div"> & {
      hideLabel?: boolean
      hideIndicator?: boolean
      indicator?: "line" | "dot" | "dashed"
      nameKey?: string
      labelKey?: string
    }
>(
  (
    {
      active,
      payload,
      className,
      indicator = "dot",
      hideLabel = false,
      hideIndicator = false,
      label,
      labelFormatter,
      labelClassName,
      formatter,
      color,
      nameKey,
      labelKey,
    },
    ref
  ) => {
    const { config } = useChart()

const tooltipLabel = React.useMemo(() => {
      if (hideLabel || !payload?.length) {
        return null
      }

const [item] = payload
      const key = `${labelKey || item.dataKey || item.name || "value"}`
      const itemConfig = getPayloadConfigFromPayload(config, item, key)
      const value =
        !labelKey && typeof label === "string"
          ? config[label as keyof typeof config]?.label || label
          : itemConfig?.label

if (labelFormatter) {
        return (
          <div className={cn("font-medium", labelClassName)}>
            {labelFormatter(value, payload)}
          </div>
        )
      }

if (!value) {
        return null
      }

return <div className={cn("font-medium", labelClassName)}>{value}</div>
    }, [
      label,
      labelFormatter,
      payload,
      hideLabel,
      labelClassName,
      config,
      labelKey,
    ])

if (!active || !payload?.length) {
      return null
    }

const nestLabel = payload.length === 1 && indicator !== "dot"

return (
      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
      >
        {!nestLabel ? tooltipLabel : null}
        <div className="grid gap-1.5">
          {payload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

return (
              <div
                key={item.dataKey}
                className={cn(
                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium tabular-nums text-foreground">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
        </div>
      </div>
    )
  }
)
ChartTooltipContent.displayName = "ChartTooltip"

const ChartLegend = RechartsPrimitive.Legend

const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> &
    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
      hideIcon?: boolean
      nameKey?: string
    }
>(
  (
    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
    ref
  ) => {
    const { config } = useChart()

if (!payload?.length) {
      return null
    }

return (
      <div
        ref={ref}
        className={cn(
          "flex items-center justify-center gap-4",
          verticalAlign === "top" ? "pb-3" : "pt-3",
          className
        )}
      >
        {payload.map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
            <div
              key={item.value}
              className={cn(
                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
      </div>
    )
  }
)
ChartLegendContent.displayName = "ChartLegend"

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

let configLabelKey: string = key

if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx" isMerged="true"
"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="components/ui/command.tsx" isMerged="true"
"use client"

import * as React from "react"
import { type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"

import { cn } from "@/lib/utils"
import { Dialog, DialogContent } from "@/components/ui/dialog"

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    className={cn(
      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
      className
    )}
    {...props}
  />
))
Command.displayName = CommandPrimitive.displayName

const CommandDialog = ({ children, ...props }: DialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    />
  </div>
))

CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
))

CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    className="py-6 text-center text-sm"
    {...props}
  />
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
      className
    )}
    {...props}
  />
))

CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      className
    )}
    {...props}
  />
))

CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
CommandShortcut.displayName = "CommandShortcut"

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/context-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const ContextMenu = ContextMenuPrimitive.Root

const ContextMenuTrigger = ContextMenuPrimitive.Trigger

const ContextMenuGroup = ContextMenuPrimitive.Group

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuSub = ContextMenuPrimitive.Sub

const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup

const ContextMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <ContextMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

const ContextMenuSubContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName

const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Portal>
    <ContextMenuPrimitive.Content
      ref={ref}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName

const ContextMenuItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName

const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <ContextMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName =
  ContextMenuPrimitive.CheckboxItem.displayName

const ContextMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <ContextMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName

const ContextMenuLabel = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold text-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-border", className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

const ContextMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
ContextMenuShortcut.displayName = "ContextMenuShortcut"

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx" isMerged="true"
"use client"

import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"

import { cn } from "@/lib/utils"

const Drawer = ({
  shouldScaleBackground = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root
    shouldScaleBackground={shouldScaleBackground}
    {...props}
  />
)
Drawer.displayName = "Drawer"

const DrawerTrigger = DrawerPrimitive.Trigger

const DrawerPortal = DrawerPrimitive.Portal

const DrawerClose = DrawerPrimitive.Close

const DrawerOverlay = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Overlay
    ref={ref}
    className={cn("fixed inset-0 z-50 bg-black/80", className)}
    {...props}
  />
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      className={cn(
        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
        className
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
))
DrawerContent.displayName = "DrawerContent"

const DrawerHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
    {...props}
  />
)
DrawerHeader.displayName = "DrawerHeader"

const DrawerFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
    {...props}
  />
)
DrawerFooter.displayName = "DrawerFooter"

const DrawerTitle = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Title
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
DrawerTitle.displayName = DrawerPrimitive.Title.displayName

const DrawerDescription = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DrawerPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
DrawerDescription.displayName = DrawerPrimitive.Description.displayName

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
  DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName =
  DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
  DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
      {...props}
    />
  )
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="components/ui/form.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  ControllerProps,
  FieldPath,
  FieldValues,
  FormProvider,
  useFormContext,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState, formState } = useFormContext()

const fieldState = getFieldState(fieldContext.name, formState)

if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

const { id } = itemContext

return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
)

const FormItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const id = React.useId()

return (
    <FormItemContext.Provider value={{ id }}>
      <div ref={ref} className={cn("space-y-2", className)} {...props} />
    </FormItemContext.Provider>
  )
})
FormItem.displayName = "FormItem"

const FormLabel = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField()

return (
    <Label
      ref={ref}
      className={cn(error && "text-destructive", className)}
      htmlFor={formItemId}
      {...props}
    />
  )
})
FormLabel.displayName = "FormLabel"

const FormControl = React.forwardRef<
  React.ElementRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
    <Slot
      ref={ref}
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
})
FormControl.displayName = "FormControl"

const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
  const { formDescriptionId } = useFormField()

return (
    <p
      ref={ref}
      id={formDescriptionId}
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
})
FormDescription.displayName = "FormDescription"

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

if (!body) {
    return null
  }

return (
    <p
      ref={ref}
      id={formMessageId}
      className={cn("text-sm font-medium text-destructive", className)}
      {...props}
    >
      {body}
    </p>
  )
})
FormMessage.displayName = "FormMessage"

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
[V0_FILE]typescriptreact:file="components/ui/hover-card.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"

import { cn } from "@/lib/utils"

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    className={cn(
      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

export { HoverCard, HoverCardTrigger, HoverCardContent }
[V0_FILE]typescriptreact:file="components/ui/input-otp.tsx" isMerged="true"
"use client"

import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { Dot } from "lucide-react"

import { cn } from "@/lib/utils"

const InputOTP = React.forwardRef<
  React.ElementRef<typeof OTPInput>,
  React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
  <OTPInput
    ref={ref}
    containerClassName={cn(
      "flex items-center gap-2 has-[:disabled]:opacity-50",
      containerClassName
    )}
    className={cn("disabled:cursor-not-allowed", className)}
    {...props}
  />
))
InputOTP.displayName = "InputOTP"

const InputOTPGroup = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center", className)} {...props} />
))
InputOTPGroup.displayName = "InputOTPGroup"

const InputOTPSlot = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

return (
    <div
      ref={ref}
      className={cn(
        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
        isActive && "z-10 ring-2 ring-ring ring-offset-background",
        className
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  )
})
InputOTPSlot.displayName = "InputOTPSlot"

const InputOTPSeparator = React.forwardRef<
  React.ElementRef<"div">,
  React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
  <div ref={ref} role="separator" {...props}>
    <Dot />
  </div>
))
InputOTPSeparator.displayName = "InputOTPSeparator"

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
    VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    className={cn(labelVariants(), className)}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/menubar.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const MenubarMenu = MenubarPrimitive.Menu

const MenubarGroup = MenubarPrimitive.Group

const MenubarPortal = MenubarPrimitive.Portal

const MenubarSub = MenubarPrimitive.Sub

const MenubarRadioGroup = MenubarPrimitive.RadioGroup

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    className={cn(
      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
      className
    )}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      className
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <MenubarPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(
  (
    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
    ref
  ) => (
    <MenubarPrimitive.Portal>
      <MenubarPrimitive.Content
        ref={ref}
        align={align}
        alignOffset={alignOffset}
        sideOffset={sideOffset}
        className={cn(
          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
          className
        )}
        {...props}
      />
    </MenubarPrimitive.Portal>
  )
)
MenubarContent.displayName = MenubarPrimitive.Content.displayName

const MenubarItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenubarPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenubarPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

const MenubarLabel = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Label
    ref={ref}
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName

const MenubarSeparator = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName

const MenubarShortcut = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
  return (
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}
MenubarShortcut.displayname = "MenubarShortcut"

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarGroup,
  MenubarSub,
  MenubarShortcut,
}
[V0_FILE]typescriptreact:file="components/ui/navigation-menu.tsx" isMerged="true"
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      "relative z-10 flex max-w-max flex-1 items-center justify-center",
      className
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      "group flex flex-1 list-none items-center justify-center space-x-1",
      className
    )}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = NavigationMenuPrimitive.Item

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
)

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
      className
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = NavigationMenuPrimitive.Link

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className
      )}
      ref={ref}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName =
  NavigationMenuPrimitive.Indicator.displayName

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}
[V0_FILE]typescriptreact:file="components/ui/pagination.tsx" isMerged="true"
import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"
import { ButtonProps, buttonVariants } from "@/components/ui/button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
)
Pagination.displayName = "Pagination"

const PaginationContent = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    className={cn("flex flex-row items-center gap-1", className)}
    {...props}
  />
))
PaginationContent.displayName = "PaginationContent"

const PaginationItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, "size"> &
  React.ComponentProps<"a">

const PaginationLink = ({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) => (
  <a
    aria-current={isActive ? "page" : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? "outline" : "ghost",
        size,
      }),
      className
    )}
    {...props}
  />
)
PaginationLink.displayName = "PaginationLink"

const PaginationPrevious = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn("gap-1 pl-2.5", className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink
    aria-label="Go to next page"
    size="default"
    className={cn("gap-1 pr-2.5", className)}
    {...props}
  >
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    aria-hidden
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Root
      className={cn("grid gap-2", className)}
      {...props}
      ref={ref}
    />
  )
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/resizable.tsx" isMerged="true"
"use client"

import { GripVertical } from "lucide-react"
import * as ResizablePrimitive from "react-resizable-panels"

import { cn } from "@/lib/utils"

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn("relative overflow-hidden", className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
        "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn(
      "flex cursor-default items-center justify-center py-1",
      className
    )}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName =
  SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
  (
    { className, orientation = "horizontal", decorative = true, ...props },
    ref
  ) => (
    <SeparatorPrimitive.Root
      ref={ref}
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className
      )}
      {...props}
    />
  )
)
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = SheetPrimitive.Root

const SheetTrigger = SheetPrimitive.Trigger

const SheetClose = SheetPrimitive.Close

const SheetPortal = SheetPrimitive.Portal

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className
    )}
    {...props}
    ref={ref}
  />
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName

const sheetVariants = cva(
  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
  {
    variants: {
      side: {
        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
        bottom:
          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
        right:
          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
      },
    },
    defaultVariants: {
      side: "right",
    },
  }
)

interface SheetContentProps
  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
    VariantProps<typeof sheetVariants> {}

const SheetContent = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Content>,
  SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
  <SheetPortal>
    <SheetOverlay />
    <SheetPrimitive.Content
      ref={ref}
      className={cn(sheetVariants({ side }), className)}
      {...props}
    >
      {children}
      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </SheetPrimitive.Close>
    </SheetPrimitive.Content>
  </SheetPortal>
))
SheetContent.displayName = SheetPrimitive.Content.displayName

const SheetHeader = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
      className
    )}
    {...props}
  />
)
SheetHeader.displayName = "SheetHeader"

const SheetFooter = ({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    )}
    {...props}
  />
)
SheetFooter.displayName = "SheetFooter"

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold text-foreground", className)}
    {...props}
  />
))
SheetTitle.displayName = SheetPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof SheetPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
  <SheetPrimitive.Description
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
SheetDescription.displayName = SheetPrimitive.Description.displayName

export {
  Sheet,
  SheetPortal,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
[V0_FILE]typescriptreact:file="components/ui/sidebar.tsx" isMerged="true"
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar:state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContext = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContext | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

return context
}

const SidebarProvider = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    defaultOpen?: boolean
    open?: boolean
    onOpenChange?: (open: boolean) => void
  }
>(
  (
    {
      defaultOpen = true,
      open: openProp,
      onOpenChange: setOpenProp,
      className,
      style,
      children,
      ...props
    },
    ref
  ) => {
    const isMobile = useIsMobile()
    const [openMobile, setOpenMobile] = React.useState(false)

// This is the internal state of the sidebar.
    // We use openProp and setOpenProp for control from outside the component.
    const [_open, _setOpen] = React.useState(defaultOpen)
    const open = openProp ?? _open
    const setOpen = React.useCallback(
      (value: boolean | ((value: boolean) => boolean)) => {
        const openState = typeof value === "function" ? value(open) : value
        if (setOpenProp) {
          setOpenProp(openState)
        } else {
          _setOpen(openState)
        }

// This sets the cookie to keep the sidebar state.
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
      },
      [setOpenProp, open]
    )

// Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile
        ? setOpenMobile((open) => !open)
        : setOpen((open) => !open)
    }, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.
    React.useEffect(() => {
      const handleKeyDown = (event: KeyboardEvent) => {
        if (
          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
          (event.metaKey || event.ctrlKey)
        ) {
          event.preventDefault()
          toggleSidebar()
        }
      }

window.addEventListener("keydown", handleKeyDown)
      return () => window.removeEventListener("keydown", handleKeyDown)
    }, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".
    // This makes it easier to style the sidebar with Tailwind classes.
    const state = open ? "expanded" : "collapsed"

const contextValue = React.useMemo<SidebarContext>(
      () => ({
        state,
        open,
        setOpen,
        isMobile,
        openMobile,
        setOpenMobile,
        toggleSidebar,
      }),
      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
    )

return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH,
                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn(
              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
              className
            )}
            ref={ref}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  }
)
SidebarProvider.displayName = "SidebarProvider"

const Sidebar = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    side?: "left" | "right"
    variant?: "sidebar" | "floating" | "inset"
    collapsible?: "offcanvas" | "icon" | "none"
  }
>(
  (
    {
      side = "left",
      variant = "sidebar",
      collapsible = "offcanvas",
      className,
      children,
      ...props
    },
    ref
  ) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === "none") {
      return (
        <div
          className={cn(
            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
            className
          )}
          ref={ref}
          {...props}
        >
          {children}
        </div>
      )
    }

if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-mobile="true"
            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
            style={
              {
                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
            side={side}
          >
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

return (
      <div
        ref={ref}
        className="group peer hidden md:block text-sidebar-foreground"
        data-state={state}
        data-collapsible={state === "collapsed" ? collapsible : ""}
        data-variant={variant}
        data-side={side}
      >
        {/* This is what handles the sidebar gap on desktop */}
        <div
          className={cn(
            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
            "group-data-[collapsible=offcanvas]:w-0",
            "group-data-[side=right]:rotate-180",
            variant === "floating" || variant === "inset"
              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
          )}
        />
        <div
          className={cn(
            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
            side === "left"
              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
            // Adjust the padding for floating and inset variants.
            variant === "floating" || variant === "inset"
              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
            className
          )}
          {...props}
        >
          <div
            data-sidebar="sidebar"
            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
          >
            {children}
          </div>
        </div>
      </div>
    )
  }
)
Sidebar.displayName = "Sidebar"

const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <Button
      ref={ref}
      data-sidebar="trigger"
      variant="ghost"
      size="icon"
      className={cn("h-7 w-7", className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
})
SidebarTrigger.displayName = "SidebarTrigger"

const SidebarRail = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button">
>(({ className, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

return (
    <button
      ref={ref}
      data-sidebar="rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        className
      )}
      {...props}
    />
  )
})
SidebarRail.displayName = "SidebarRail"

const SidebarInset = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"main">
>(({ className, ...props }, ref) => {
  return (
    <main
      ref={ref}
      className={cn(
        "relative flex min-h-svh flex-1 flex-col bg-background",
        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
        className
      )}
      {...props}
    />
  )
})
SidebarInset.displayName = "SidebarInset"

const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
  React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => {
  return (
    <Input
      ref={ref}
      data-sidebar="input"
      className={cn(
        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
        className
      )}
      {...props}
    />
  )
})
SidebarInput.displayName = "SidebarInput"

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="header"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarHeader.displayName = "SidebarHeader"

const SidebarFooter = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
})
SidebarFooter.displayName = "SidebarFooter"

const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
  React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => {
  return (
    <Separator
      ref={ref}
      data-sidebar="separator"
      className={cn("mx-2 w-auto bg-sidebar-border", className)}
      {...props}
    />
  )
})
SidebarSeparator.displayName = "SidebarSeparator"

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarContent.displayName = "SidebarContent"

const SidebarGroup = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      data-sidebar="group"
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
  )
})
SidebarGroup.displayName = "SidebarGroup"

const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "div"

return (
    <Comp
      ref={ref}
      data-sidebar="group-label"
      className={cn(
        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupLabel.displayName = "SidebarGroupLabel"

const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      ref={ref}
      data-sidebar="group-action"
      className={cn(
        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarGroupAction.displayName = "SidebarGroupAction"

const SidebarGroupContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="group-content"
    className={cn("w-full text-sm", className)}
    {...props}
  />
))
SidebarGroupContent.displayName = "SidebarGroupContent"

const SidebarMenu = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu"
    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
    {...props}
  />
))
SidebarMenu.displayName = "SidebarMenu"

const SidebarMenuItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    data-sidebar="menu-item"
    className={cn("group/menu-item relative", className)}
    {...props}
  />
))
SidebarMenuItem.displayName = "SidebarMenuItem"

const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline:
          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const SidebarMenuButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    isActive?: boolean
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>
>(
  (
    {
      asChild = false,
      isActive = false,
      variant = "default",
      size = "default",
      tooltip,
      className,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : "button"
    const { isMobile, state } = useSidebar()

const button = (
      <Comp
        ref={ref}
        data-sidebar="menu-button"
        data-size={size}
        data-active={isActive}
        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
        {...props}
      />
    )

if (!tooltip) {
      return button
    }

if (typeof tooltip === "string") {
      tooltip = {
        children: tooltip,
      }
    }

return (
      <Tooltip>
        <TooltipTrigger asChild>{button}</TooltipTrigger>
        <TooltipContent
          side="right"
          align="center"
          hidden={state !== "collapsed" || isMobile}
          {...tooltip}
        />
      </Tooltip>
    )
  }
)
SidebarMenuButton.displayName = "SidebarMenuButton"

const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button"> & {
    asChild?: boolean
    showOnHover?: boolean
  }
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"

return (
    <Comp
      ref={ref}
      data-sidebar="menu-action"
      className={cn(
        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 after:md:hidden",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuAction.displayName = "SidebarMenuAction"

const SidebarMenuBadge = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-sidebar="menu-badge"
    className={cn(
      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
      "peer-data-[size=sm]/menu-button:top-1",
      "peer-data-[size=default]/menu-button:top-1.5",
      "peer-data-[size=lg]/menu-button:top-2.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuBadge.displayName = "SidebarMenuBadge"

const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> & {
    showIcon?: boolean
  }
>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

return (
    <div
      ref={ref}
      data-sidebar="menu-skeleton"
      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 flex-1 max-w-[--skeleton-width]"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  )
})
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"

const SidebarMenuSub = React.forwardRef<
  HTMLUListElement,
  React.ComponentProps<"ul">
>(({ className, ...props }, ref) => (
  <ul
    ref={ref}
    data-sidebar="menu-sub"
    className={cn(
      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
      "group-data-[collapsible=icon]:hidden",
      className
    )}
    {...props}
  />
))
SidebarMenuSub.displayName = "SidebarMenuSub"

const SidebarMenuSubItem = React.forwardRef<
  HTMLLIElement,
  React.ComponentProps<"li">
>(({ ...props }, ref) => <li ref={ref} {...props} />)
SidebarMenuSubItem.displayName = "SidebarMenuSubItem"

const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<"a"> & {
    asChild?: boolean
    size?: "sm" | "md"
    isActive?: boolean
  }
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"

return (
    <Comp
      ref={ref}
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
})
SidebarMenuSubButton.displayName = "SidebarMenuSubButton"

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isMerged="true"
import { cn } from "@/lib/utils"

function Skeleton({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex w-full touch-none select-none items-center",
      className
    )}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/ui/sonner.tsx" isMerged="true"
"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
          description: "group-[.toast]:text-muted-foreground",
          actionButton:
            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
          cancelButton:
            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Table = React.forwardRef<
  HTMLTableElement,
  React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
  <div className="relative w-full overflow-auto">
    <table
      ref={ref}
      className={cn("w-full caption-bottom text-sm", className)}
      {...props}
    />
  </div>
))
Table.displayName = "Table"

const TableHeader = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
))
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tbody
    ref={ref}
    className={cn("[&_tr:last-child]:border-0", className)}
    {...props}
  />
))
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<
  HTMLTableSectionElement,
  React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
  <tfoot
    ref={ref}
    className={cn(
      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
      className
    )}
    {...props}
  />
))
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn(
      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
      className
    )}
    {...props}
  />
))
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
      className
    )}
    {...props}
  />
))
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
    {...props}
  />
))
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<
  HTMLTableCaptionElement,
  React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
  <caption
    ref={ref}
    className={cn("mt-4 text-sm text-muted-foreground", className)}
    {...props}
  />
))
TableCaption.displayName = "TableCaption"

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea">
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive:
          "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true"
"use client"

import { useToast } from "@/hooks/use-toast"
import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants>
>({
  size: "default",
  variant: "default",
})

const ToggleGroup = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
  <ToggleGroupPrimitive.Root
    ref={ref}
    className={cn("flex items-center justify-center gap-1", className)}
    {...props}
  >
    <ToggleGroupContext.Provider value={{ variant, size }}>
      {children}
    </ToggleGroupContext.Provider>
  </ToggleGroupPrimitive.Root>
))

ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName

const ToggleGroupItem = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
    VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
  const context = React.useContext(ToggleGroupContext)

return (
    <ToggleGroupPrimitive.Item
      ref={ref}
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
})

ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName

export { ToggleGroup, ToggleGroupItem }
[V0_FILE]typescriptreact:file="components/ui/toggle.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const toggleVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline:
          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        default: "h-10 px-3 min-w-10",
        sm: "h-9 px-2.5 min-w-9",
        lg: "h-11 px-5 min-w-11",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
    VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
    className={cn(toggleVariants({ variant, size, className }))}
    {...props}
  />
))

Toggle.displayName = TogglePrimitive.Root.displayName

export { Toggle, toggleVariants }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import { cn } from "@/lib/utils"

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
  />
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
[V0_FILE]typescriptreact:file="components/ui/use-mobile.tsx" isMerged="true"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescript:file="components/ui/use-toast.ts" isMerged="true"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="drizzle.config.ts" isMerged="true"
import {  defineConfig } from "drizzle-kit";
import * as dotenv from "dotenv";
dotenv.config();

export default defineConfig({
  schema: "./drizzle/schema.ts",
  out: "./drizzle",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
})
[V0_FILE]sql:file="drizzle/0000_lowly_onslaught.sql" isMerged="true"
CREATE TABLE "comments" (
	"id" varchar(255) PRIMARY KEY NOT NULL,
	"content" text NOT NULL,
	"todo_id" varchar(255) NOT NULL,
	"user_id" varchar(255) NOT NULL,
	"created_at" timestamp DEFAULT now() NOT NULL,
	"updated_at" timestamp DEFAULT now() NOT NULL
);
--> statement-breakpoint
CREATE TABLE "todos" (
	"id" varchar(255) PRIMARY KEY NOT NULL,
	"title" varchar(255) NOT NULL,
	"description" text,
	"completed" boolean DEFAULT false NOT NULL,
	"due_date" timestamp,
	"user_id" varchar(255),
	"created_at" timestamp DEFAULT now() NOT NULL,
	"updated_at" timestamp DEFAULT now() NOT NULL
);
[V0_FILE]sql:file="drizzle/0001_milky_wolfsbane.sql" isMerged="true"
ALTER TABLE "todos" ADD COLUMN "deleted_at" timestamp;
[V0_FILE]sql:file="drizzle/0002_friendly_vampiro.sql" isMerged="true"
CREATE TABLE "activities" (
	"id" varchar(255) PRIMARY KEY NOT NULL,
	"content" text NOT NULL,
	"todo_id" varchar(255) NOT NULL,
	"user_id" varchar(255) NOT NULL,
	"created_at" timestamp DEFAULT now() NOT NULL,
	"updated_at" timestamp DEFAULT now() NOT NULL
);
[V0_FILE]json:file="drizzle/meta/0000_snapshot.json" isMerged="true"
{
  "id": "d565ba6f-eb5d-424d-a7dc-2749f5e5b9c3",
  "prevId": "00000000-0000-0000-0000-000000000000",
  "version": "7",
  "dialect": "postgresql",
  "tables": {
    "public.comments": {
      "name": "comments",
      "schema": "",
      "columns": {
        "id": {
          "name": "id",
          "type": "varchar(255)",
          "primaryKey": true,
          "notNull": true
        },
        "content": {
          "name": "content",
          "type": "text",
          "primaryKey": false,
          "notNull": true
        },
        "todo_id": {
          "name": "todo_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "user_id": {
          "name": "user_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "created_at": {
          "name": "created_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "updated_at": {
          "name": "updated_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        }
      },
      "indexes": {},
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {},
      "policies": {},
      "checkConstraints": {},
      "isRLSEnabled": false
    },
    "public.todos": {
      "name": "todos",
      "schema": "",
      "columns": {
        "id": {
          "name": "id",
          "type": "varchar(255)",
          "primaryKey": true,
          "notNull": true
        },
        "title": {
          "name": "title",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "description": {
          "name": "description",
          "type": "text",
          "primaryKey": false,
          "notNull": false
        },
        "completed": {
          "name": "completed",
          "type": "boolean",
          "primaryKey": false,
          "notNull": true,
          "default": false
        },
        "due_date": {
          "name": "due_date",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": false
        },
        "user_id": {
          "name": "user_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": false
        },
        "created_at": {
          "name": "created_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "updated_at": {
          "name": "updated_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        }
      },
      "indexes": {},
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {},
      "policies": {},
      "checkConstraints": {},
      "isRLSEnabled": false
    },
    "public.users_sync": {
      "name": "users_sync",
      "schema": "",
      "columns": {
        "id": {
          "name": "id",
          "type": "varchar(255)",
          "primaryKey": true,
          "notNull": true
        },
        "email": {
          "name": "email",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": false
        },
        "name": {
          "name": "name",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": false
        },
        "image": {
          "name": "image",
          "type": "text",
          "primaryKey": false,
          "notNull": false
        },
        "created_at": {
          "name": "created_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "updated_at": {
          "name": "updated_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "deleted_at": {
          "name": "deleted_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": false
        }
      },
      "indexes": {},
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {},
      "policies": {},
      "checkConstraints": {},
      "isRLSEnabled": false
    }
  },
  "enums": {},
  "schemas": {},
  "sequences": {},
  "roles": {},
  "policies": {},
  "views": {},
  "_meta": {
    "columns": {},
    "schemas": {},
    "tables": {}
  }
}
[V0_FILE]json:file="drizzle/meta/0001_snapshot.json" isMerged="true"
{
  "id": "d43ba838-c9c5-41c6-ab0b-b5083c978279",
  "prevId": "d565ba6f-eb5d-424d-a7dc-2749f5e5b9c3",
  "version": "7",
  "dialect": "postgresql",
  "tables": {
    "public.comments": {
      "name": "comments",
      "schema": "",
      "columns": {
        "id": {
          "name": "id",
          "type": "varchar(255)",
          "primaryKey": true,
          "notNull": true
        },
        "content": {
          "name": "content",
          "type": "text",
          "primaryKey": false,
          "notNull": true
        },
        "todo_id": {
          "name": "todo_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "user_id": {
          "name": "user_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "created_at": {
          "name": "created_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "updated_at": {
          "name": "updated_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        }
      },
      "indexes": {},
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {},
      "policies": {},
      "checkConstraints": {},
      "isRLSEnabled": false
    },
    "public.todos": {
      "name": "todos",
      "schema": "",
      "columns": {
        "id": {
          "name": "id",
          "type": "varchar(255)",
          "primaryKey": true,
          "notNull": true
        },
        "title": {
          "name": "title",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "description": {
          "name": "description",
          "type": "text",
          "primaryKey": false,
          "notNull": false
        },
        "completed": {
          "name": "completed",
          "type": "boolean",
          "primaryKey": false,
          "notNull": true,
          "default": false
        },
        "due_date": {
          "name": "due_date",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": false
        },
        "user_id": {
          "name": "user_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": false
        },
        "created_at": {
          "name": "created_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "updated_at": {
          "name": "updated_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "deleted_at": {
          "name": "deleted_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": false
        }
      },
      "indexes": {},
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {},
      "policies": {},
      "checkConstraints": {},
      "isRLSEnabled": false
    },
    "public.users_sync": {
      "name": "users_sync",
      "schema": "",
      "columns": {
        "id": {
          "name": "id",
          "type": "varchar(255)",
          "primaryKey": true,
          "notNull": true
        },
        "email": {
          "name": "email",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": false
        },
        "name": {
          "name": "name",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": false
        },
        "image": {
          "name": "image",
          "type": "text",
          "primaryKey": false,
          "notNull": false
        },
        "created_at": {
          "name": "created_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "updated_at": {
          "name": "updated_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "deleted_at": {
          "name": "deleted_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": false
        }
      },
      "indexes": {},
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {},
      "policies": {},
      "checkConstraints": {},
      "isRLSEnabled": false
    }
  },
  "enums": {},
  "schemas": {},
  "sequences": {},
  "roles": {},
  "policies": {},
  "views": {},
  "_meta": {
    "columns": {},
    "schemas": {},
    "tables": {}
  }
}
[V0_FILE]json:file="drizzle/meta/0002_snapshot.json" isMerged="true"
{
  "id": "03c79bb5-83b5-4a68-b59f-361572109d42",
  "prevId": "d43ba838-c9c5-41c6-ab0b-b5083c978279",
  "version": "7",
  "dialect": "postgresql",
  "tables": {
    "public.activities": {
      "name": "activities",
      "schema": "",
      "columns": {
        "id": {
          "name": "id",
          "type": "varchar(255)",
          "primaryKey": true,
          "notNull": true
        },
        "content": {
          "name": "content",
          "type": "text",
          "primaryKey": false,
          "notNull": true
        },
        "todo_id": {
          "name": "todo_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "user_id": {
          "name": "user_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "created_at": {
          "name": "created_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "updated_at": {
          "name": "updated_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        }
      },
      "indexes": {},
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {},
      "policies": {},
      "checkConstraints": {},
      "isRLSEnabled": false
    },
    "public.comments": {
      "name": "comments",
      "schema": "",
      "columns": {
        "id": {
          "name": "id",
          "type": "varchar(255)",
          "primaryKey": true,
          "notNull": true
        },
        "content": {
          "name": "content",
          "type": "text",
          "primaryKey": false,
          "notNull": true
        },
        "todo_id": {
          "name": "todo_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "user_id": {
          "name": "user_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "created_at": {
          "name": "created_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "updated_at": {
          "name": "updated_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        }
      },
      "indexes": {},
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {},
      "policies": {},
      "checkConstraints": {},
      "isRLSEnabled": false
    },
    "public.todos": {
      "name": "todos",
      "schema": "",
      "columns": {
        "id": {
          "name": "id",
          "type": "varchar(255)",
          "primaryKey": true,
          "notNull": true
        },
        "title": {
          "name": "title",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": true
        },
        "description": {
          "name": "description",
          "type": "text",
          "primaryKey": false,
          "notNull": false
        },
        "completed": {
          "name": "completed",
          "type": "boolean",
          "primaryKey": false,
          "notNull": true,
          "default": false
        },
        "due_date": {
          "name": "due_date",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": false
        },
        "user_id": {
          "name": "user_id",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": false
        },
        "created_at": {
          "name": "created_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "updated_at": {
          "name": "updated_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "deleted_at": {
          "name": "deleted_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": false
        }
      },
      "indexes": {},
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {},
      "policies": {},
      "checkConstraints": {},
      "isRLSEnabled": false
    },
    "public.users_sync": {
      "name": "users_sync",
      "schema": "",
      "columns": {
        "id": {
          "name": "id",
          "type": "varchar(255)",
          "primaryKey": true,
          "notNull": true
        },
        "email": {
          "name": "email",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": false
        },
        "name": {
          "name": "name",
          "type": "varchar(255)",
          "primaryKey": false,
          "notNull": false
        },
        "image": {
          "name": "image",
          "type": "text",
          "primaryKey": false,
          "notNull": false
        },
        "created_at": {
          "name": "created_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "updated_at": {
          "name": "updated_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": true,
          "default": "now()"
        },
        "deleted_at": {
          "name": "deleted_at",
          "type": "timestamp",
          "primaryKey": false,
          "notNull": false
        }
      },
      "indexes": {},
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {},
      "policies": {},
      "checkConstraints": {},
      "isRLSEnabled": false
    }
  },
  "enums": {},
  "schemas": {},
  "sequences": {},
  "roles": {},
  "policies": {},
  "views": {},
  "_meta": {
    "columns": {},
    "schemas": {},
    "tables": {}
  }
}
[V0_FILE]json:file="drizzle/meta/_journal.json" isMerged="true"
{
  "version": "7",
  "dialect": "postgresql",
  "entries": [
    {
      "idx": 0,
      "version": "7",
      "when": 1749227511813,
      "tag": "0000_lowly_onslaught",
      "breakpoints": true
    },
    {
      "idx": 1,
      "version": "7",
      "when": 1749937220316,
      "tag": "0001_milky_wolfsbane",
      "breakpoints": true
    },
    {
      "idx": 2,
      "version": "7",
      "when": 1750016800632,
      "tag": "0002_friendly_vampiro",
      "breakpoints": true
    }
  ]
}
[V0_FILE]typescript:file="drizzle/schema.ts" isMerged="true"
import { text, boolean, pgTable, timestamp, varchar, pgSchema } from "drizzle-orm/pg-core"
import { relations } from "drizzle-orm"

// Define the neon_auth schema
const neonAuthSchema = pgSchema("neon_auth")

// Define the neon_auth schema users_sync table
export const users_sync = neonAuthSchema.table("users_sync", {
  id: varchar("id", { length: 255 }).primaryKey(),
  email: varchar("email", { length: 255 }),
  name: varchar("name", { length: 255 }),
  image: text("image"),
  created_at: timestamp("created_at").defaultNow().notNull(),
  updated_at: timestamp("updated_at").defaultNow().notNull(),
  deleted_at: timestamp("deleted_at"),
})

export const todos = pgTable("todos", {
  id: varchar("id", { length: 255 }).primaryKey(),
  title: varchar("title", { length: 255 }).notNull(),
  description: text("description"),
  completed: boolean("completed").notNull().default(false),
  dueDate: timestamp("due_date"),
  userId: varchar("user_id", { length: 255 }),
  createdAt: timestamp("created_at").defaultNow().notNull(),
  updatedAt: timestamp("updated_at").defaultNow().notNull(),
  deletedAt: timestamp("deleted_at"),
})

export const comments = pgTable("comments", {
  id: varchar("id", { length: 255 }).primaryKey(),
  content: text("content").notNull(),
  todoId: varchar("todo_id", { length: 255 }).notNull(),
  userId: varchar("user_id", { length: 255 }).notNull(),
  createdAt: timestamp("created_at").defaultNow().notNull(),
  updatedAt: timestamp("updated_at").defaultNow().notNull(),
})

export const activities = pgTable("activities", {
  id: varchar("id", { length: 255 }).primaryKey(),
  content: text("content").notNull(),
  todoId: varchar("todo_id", { length: 255 }).notNull(),
  userId: varchar("user_id", { length: 255 }).notNull(),
  createdAt: timestamp("created_at").defaultNow().notNull(),
  updatedAt: timestamp("updated_at").defaultNow().notNull(),
})

// Define relations
export const usersRelations = relations(users_sync, ({ many }) => ({
  comments: many(comments, { relationName: "userComments" }),
  todos: many(todos, { relationName: "userTodos" }),
}))

export const todosRelations = relations(todos, ({ many, one }) => ({
  comments: many(comments, { relationName: "todoComments" }),
  user: one(users_sync, {
    fields: [todos.userId],
    references: [users_sync.id],
    relationName: "userTodos",
  }),
}))

export const commentsRelations = relations(comments, ({ one }) => ({
  todo: one(todos, {
    fields: [comments.todoId],
    references: [todos.id],
    relationName: "todoComments",
  }),
  user: one(users_sync, {
    fields: [comments.userId],
    references: [users_sync.id],
    relationName: "userComments",
  }),
}))

export const activitiesRelations = relations(activities, ({ one }) => ({
  todo: one(todos, {
    fields: [activities.todoId],
    references: [todos.id],
    relationName: "todoActivities",
  }),
  user: one(users_sync, {
    fields: [activities.userId],
    references: [users_sync.id],
    relationName: "userActivities",
  }),
}))

// Types for use in the application
export type Todo = typeof todos.$inferSelect
export type NewTodo = typeof todos.$inferInsert
export type User = typeof users_sync.$inferSelect
export type NewUser = typeof users_sync.$inferInsert
export type Comment = typeof comments.$inferSelect
export type NewComment = typeof comments.$inferInsert
[V0_FILE]typescript:file="hooks/use-auto-resume.ts" isMerged="true"
'use client';

import { useEffect } from 'react';
import type { UIMessage } from 'ai';
import type { UseChatHelpers } from '@ai-sdk/react';
import { DataPart } from '@/lib/types';

export interface UseAutoResumeParams {
  autoResume: boolean;
  initialMessages: UIMessage[];
  experimental_resume: UseChatHelpers['experimental_resume'];
  data: UseChatHelpers['data'];
  setMessages: UseChatHelpers['setMessages'];
}

export function useAutoResume({
  autoResume,
  initialMessages,
  experimental_resume,
  data,
  setMessages,
}: UseAutoResumeParams) {
  useEffect(() => {
    if (!autoResume) return;

const mostRecentMessage = initialMessages.at(-1);

if (mostRecentMessage?.role === 'user') {
      experimental_resume();
    }

// we intentionally run this once
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

useEffect(() => {
    if (!data) return;
    if (data.length === 0) return;

const dataPart = data[0] as DataPart;

if (dataPart.type === 'append-message') {
      const message = JSON.parse(dataPart.message) as UIMessage;
      setMessages([...initialMessages, message]);
    }
  }, [data, initialMessages, setMessages]);
}
[V0_FILE]typescriptreact:file="hooks/use-scroll-to-bottom.tsx" isMerged="true"
import useSWR from 'swr';
import { useRef, useEffect, useCallback } from 'react';

type ScrollFlag = ScrollBehavior | false;

export function useScrollToBottom() {
  const containerRef = useRef<HTMLDivElement>(null);
  const endRef = useRef<HTMLDivElement>(null);

const { data: isAtBottom = false, mutate: setIsAtBottom } = useSWR(
    'messages:is-at-bottom',
    null,
    { fallbackData: false },
  );

const { data: scrollBehavior = false, mutate: setScrollBehavior } =
    useSWR<ScrollFlag>('messages:should-scroll', null, { fallbackData: false });

useEffect(() => {
    if (scrollBehavior) {
      endRef.current?.scrollIntoView({ behavior: scrollBehavior });
      setScrollBehavior(false);
    }
  }, [setScrollBehavior, scrollBehavior]);

const scrollToBottom = useCallback(
    (scrollBehavior: ScrollBehavior = 'smooth') => {
      setScrollBehavior(scrollBehavior);
    },
    [setScrollBehavior],
  );

function onViewportEnter() {
    setIsAtBottom(true);
  }

function onViewportLeave() {
    setIsAtBottom(false);
  }

return {
    containerRef,
    endRef,
    isAtBottom,
    scrollToBottom,
    onViewportEnter,
    onViewportLeave,
  };
}
[V0_FILE]typescript:file="hooks/use-toast.ts" isMerged="true"
"use client"

// Inspired by react-hot-toast library
import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="lib/actions.ts" isMerged="true"
"use server"

import { revalidatePath, revalidateTag } from "next/cache"
import { db } from "@/lib/db"
import { todos, users_sync, comments, activities } from "@/drizzle/schema"
import { eq, desc, count, isNull, and } from "drizzle-orm"
import { stackServerApp, getAccessToken } from "@/stack"
import { cookies } from "next/headers"
import { createNotification, watchTask, notifyWatchers, unwatchTask } from '@/app/api/notifications/notifications'
import { generateObject } from 'ai'
import { myProvider } from '@/lib/ai/providers'
import { format } from 'date-fns'
import { z } from 'zod'
import { checkMessageRateLimit } from '@/lib/rate-limit'
import { publishTask } from "@/app/api/queue/route"
import { nanoid } from 'nanoid'

// If the user has credits available, we'll prefill info in their todo based on the prompt
// otherwise just use it directly and give them a blank one
export async function generateTodoFromUserMessage({
  prompt,
}: {
  prompt: string;
}) {
  const user = await stackServerApp.getUser()
  if (!user) {
    throw new Error('Not authenticated')
  }

// Fallback function to truncate prompt
  const fallbackToTruncatedPrompt = () => {
    return {
      title: prompt.trim().slice(0, 80),
      dueDate: undefined
    }
  }

// Check if XAI_API_KEY exists
  if (!process.env.XAI_API_KEY) {
    return fallbackToTruncatedPrompt()
  }

// Check rate limit before making LLM call
  const rateLimitResult = await checkMessageRateLimit(user.id)
  if (!rateLimitResult.success) {
    return fallbackToTruncatedPrompt()
  }

const currentDate = new Date()

try {
    const { object } = await generateObject({
      model: myProvider.languageModel('title-model'),
      schema: z.object({
        title: z.string().describe('A clear, actionable task title (max 80 characters)'),
        dueDate: z.string().optional().describe('ISO date string if a deadline is mentioned'),
      }),
      system: `You are extracting todo information from user input.
      
Current date: ${format(currentDate, 'PPP')} (${format(currentDate, 'EEEE')})

Rules:
- Generate a clear, actionable title (max 80 characters)
- If a due date/deadline is mentioned, parse it relative to today and return as ISO string
- Examples: "tomorrow" = next day, "Friday" = next Friday, "next week" = 7 days from now`,
      prompt: prompt,
    });

return object;
  } catch (error) {
    // If LLM call fails for any reason, fall back to truncated prompt
    console.error('LLM generation failed, falling back to truncated prompt:', error)
    return fallbackToTruncatedPrompt()
  }
}

export async function getTodos(userId: string) {
  try {
    const items = await db.select().from(todos).where(and(eq(todos.userId, userId), isNull(todos.deletedAt))).orderBy(todos.id)
    
    // Filter out overdue completed items (they should be archived)
    const now = new Date()
    const activeTodos = items.filter(todo => {
      // If it's completed and overdue, it should be archived
      if (todo.completed && todo.dueDate && todo.dueDate < now) {
        return false
      }
      return true
    })
    
    return activeTodos
  } catch (error) {
    console.error("Failed to fetch todos:", error)
    return []
  }
}

export async function getArchivedTodos(userId: string) {
  try {
    const items = await db.select().from(todos).where(eq(todos.userId, userId)).orderBy(todos.id)
    
    // Filter for archived items:
    // 1. Manually deleted (deletedAt is not null)
    // 2. Overdue completed items (completed=true AND dueDate < now)
    const now = new Date()
    const archivedItems = items.filter(todo => {
      // Manually deleted
      if (todo.deletedAt) {
        return true
      }
      
      // Overdue completed items
      if (todo.completed && todo.dueDate && todo.dueDate < now) {
        return true
      }
      
      return false
    })
    
    return archivedItems
  } catch (error) {
    console.error("Failed to fetch archived todos:", error)
    return []
  }
}

export async function getTodo({ userId, todoId }: { userId: string, todoId: string }) {

console.log(userId, todoId)
  try {
    const item = await db.query.todos.findFirst({
      where: eq(todos.id, todoId)
    })
    
    if (!item) {
      throw new Error("Todo not found")
    }

// Check ownership
    if (item.userId !== userId) {
      throw new Error("Access denied")
    }
    
    return item
  } catch (error) {
    console.error("Failed to fetch todo:", error)
    throw error
  }
}

export async function getUsers() {
  try {
    const result = await db.select().from(users_sync).where(isNull(users_sync.deleted_at)).orderBy(users_sync.name)
    return result
  } catch (error) {
    console.error("Failed to fetch users:", error)
    return []
  }
}

export async function getUserById(userId: string) {
  console.log(userId)
  try {
    const result = await db
      .select()
      .from(users_sync)
      .where(and(eq(users_sync.id, userId), isNull(users_sync.deleted_at)))

return result[0] || null
  } catch (error) {
    console.error("Failed to fetch user:", error)
    return null
  }
}

export async function addTodo(formData: FormData) {
  const user = await stackServerApp.getUser()
  if (!user) {
    throw new Error('Not authenticated')
  }

const text = formData.get('text') as string
  const dueDateStr = formData.get('dueDate') as string | null

if (!text || typeof text !== 'string') {
    throw new Error('Text is required')
  }

let dueDate: Date | null = null
  if (dueDateStr && dueDateStr.trim()) {
    dueDate = new Date(dueDateStr)
    if (isNaN(dueDate.getTime())) {
      dueDate = null
    }
  }

const description = formData.get("description") as string | null

if (!text?.trim()) {
    return { error: "Todo title is required" }
  }

try {
    const [todo] = await db.insert(todos).values({
      id: nanoid(8),
      title: text,
      description: description?.trim() || null,
      dueDate: dueDate,
      userId: user.id,
    }).returning()

// Add creator as a watcher
    await watchTask({ 
      taskId: todo.id, 
      userId: user.id 
    })
    
    await createNotification({
      userId: user.id,
      type: "info",
      message: `New todo created: ${text}`,
      taskId: todo.id,
    })

// Queue AI description generation if no description was provided
    if (!description?.trim()) {
      await publishTask({
        type: "generateDescription",
        key: `generate-description-${todo.id}`,
        todoId: todo.id,
        title: text,
        userId: user.id,
      })
    }

revalidateTag(`${user.id}:todos`)
    
    return { success: true }
  } catch (error) {
    console.error("Failed to add todo:", error)
    return { error: "Failed to add todo" }
  }
}

export async function getTotalCreatedTodos() {
  const user = await stackServerApp.getUser()
  if (!user) {
    throw new Error("Not authenticated")
  }

try {
    const result = await db.select({ count: count() }).from(todos).where(eq(todos.userId, user.id))
    return result[0]?.count ?? 0
  } catch (error) {
    console.error("Failed to count todos:", error)
    return 0
  }
}

export async function updateTodo(formData: FormData) {
  const id = formData.get('id')
  const title = formData.get('title')
  const description = formData.get('description')

if (!id || typeof id !== 'string') {
    throw new Error('Invalid todo id')
  }

const todoId = id
  const user = await stackServerApp.getUser()
  if (!user) {
    throw new Error("Not authenticated")
  }

try {
    // Get the current todo to compare changes
    const currentTodo = await db.query.todos.findFirst({
      where: eq(todos.id, todoId)
    })

if (!currentTodo) {
      throw new Error("Todo not found")
    }

// Check ownership
    if (currentTodo.userId !== user.id) {
      throw new Error("Access denied")
    }

// Only update fields that are provided
    const updateData: any = {
      updatedAt: new Date(),
    }
    
    const changes: string[] = []

if (title !== null && title !== currentTodo.title) {
      updateData.title = title as string
      changes.push(`Title changed to "${title}"`)
    }
    
    if (description !== null && description !== currentTodo.description) {
      updateData.description = description as string
      if (description) {
        changes.push(`Description updated`)
      } else {
        changes.push(`Description removed`)
      }
    }

if (changes.length > 0) {
      const [todo] = await db
        .update(todos)
        .set(updateData)
        .where(eq(todos.id, todoId))
        .returning()

// Log changes as activity instead of comment
      const changeComment = changes.join(', ')
      await db.insert(activities).values({
        id: nanoid(8),
        content: changeComment,
        todoId,
        userId: user.id,
      })

// Notify all watchers of the update
      await notifyWatchers({
        taskId: todo.id,
        message: `Todo updated: ${todo.title}`,
        type: "info"
      })
    }

revalidatePath('/')
    
    // Add cache tag revalidation
    revalidateTag(`${user.id}:todos`)
    revalidateTag(`${user.id}:archived-todos`)
    
    return
  } catch (error) {
    console.error('Failed to update todo:', error)
    throw new Error('Failed to update todo')
  }
}

// Add a new action to watch/unwatch todos
export async function toggleWatchTodo(formData: FormData) {
  const id = formData.get('id')
  const watch = formData.get('watch') === 'true'

if (!id || typeof id !== 'string') {
    throw new Error('Invalid todo id')
  }

const todoId = id
  const user = await stackServerApp.getUser()
  if (!user) {
    throw new Error("Not authenticated")
  }

try {
    // Check if user owns the todo
    const todo = await db.query.todos.findFirst({
      where: eq(todos.id, todoId)
    })

if (!todo) {
      throw new Error("Todo not found")
    }

if (todo.userId !== user.id) {
      throw new Error("Access denied")
    }

if (watch) {
      await watchTask({ 
        taskId: todoId, 
        userId: user.id 
      })
      await createNotification({
        userId: user.id,
        type: "info",
        message: "You are now watching this todo",
        taskId: todoId,
      })
    } else {
      await unwatchTask({ 
        taskId: todoId, 
        userId: user.id 
      })
    }

return { success: true }
  } catch (error) {
    console.error('Failed to toggle watch status:', error)
    return { error: 'Failed to update watch status' }
  }
}

// Overloaded getComments to optionally include activities
export async function getComments(arg1: any): Promise<any[]> {
  try {
    // Determine input signature
    let todoId: string
    let userId: string | undefined
    let includeActivity = false

if (typeof arg1 === 'string') {
      todoId = arg1
      // If userId is not supplied, attempt to fetch from auth context
      const user = await stackServerApp.getUser()
      userId = user?.id
    } else {
      todoId = arg1.todoId
      userId = arg1.userId
      includeActivity = arg1.includeActivity ?? false
    }

if (!todoId) {
      throw new Error("Todo ID is required")
    }

// Ownership check when userId available
    if (userId) {
      const todo = await db.query.todos.findFirst({
        where: and(eq(todos.id, todoId), eq(todos.userId, userId))
      })
      if (!todo) {
        throw new Error("Todo not found")
      }
    }

// Fetch comments
    const commentsList = await db.query.comments.findMany({
      where: eq(comments.todoId, todoId),
      with: {
        user: true
      },
      orderBy: comments.createdAt,
    })

if (!includeActivity) {
      return commentsList
    }

// Fetch activities and coerce to Comment shape
    const activitiesList = await db.query.activities.findMany({
      where: eq(activities.todoId, todoId),
      with: {
        user: true,
      },
      orderBy: activities.createdAt,
    }) as any[]

// Add discriminator fields
    const commentsWithDiscriminator = commentsList.map(comment => ({
      ...comment,
      isActivity: false
    }))

const activitiesWithDiscriminator = activitiesList.map(activity => ({
      ...activity,
      isActivity: true
    }))

const result = [
      ...commentsWithDiscriminator,
      ...activitiesWithDiscriminator,
    ].sort((a: any, b: any) =>
      new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
    ) as any[]

console.log('getComments result:', result.map(r => ({ 
      id: r.id, 
      content: r.content, 
      isActivity: r.isActivity,
      type: r.isActivity ? 'activity' : 'comment'
    })))

return result
  } catch (error) {
    console.error("Failed to fetch comments:", error)
    return []
  }
}

export async function addComment(formData: FormData) {
  const user = await stackServerApp.getUser()
  if (!user) {
    throw new Error('Not authenticated')
  }

const content = formData.get('content')
  const todoId = formData.get('todoId')
  const isAiGenerated = formData.get('isAiGenerated') === 'true'

if (!content || typeof content !== 'string') {
    throw new Error('Content is required')
  }

if (!todoId || typeof todoId !== 'string') {
    throw new Error('Todo ID is required')
  }

// Check if user owns the todo (only for human-generated comments)
  if (!isAiGenerated) {
    const todo = await db.query.todos.findFirst({
      where: eq(todos.id, todoId)
    })

if (!todo) {
      throw new Error("Todo not found")
    }

if (todo.userId !== user.id) {
      throw new Error("Access denied")
    }
  }

// Only check rate limit for human-generated comments
  if (!isAiGenerated) {
    const rateLimitResult = await checkMessageRateLimit(user.id)
    if (!rateLimitResult.success) {
      const hoursUntilReset = Math.ceil(
        (rateLimitResult.reset - Date.now()) / (1000 * 60 * 60),
      )
      throw new Error(
        `Rate limit exceeded. You have ${rateLimitResult.remaining} messages remaining today. Resets in ${hoursUntilReset} hours.`,
      )
    }
  }

let userId: string
  let userName: string | null = null

if (isAiGenerated) {
    // For AI-generated comments, use a special AI user ID
    userId = 'ai-assistant'
    userName = 'AI Assistant'
    
    // Ensure AI user exists in users_sync table
    await db.insert(users_sync).values({
      id: 'ai-assistant',
      email: 'ai@assistant.local',
      name: 'AI Assistant',
      image: null,
    }).onConflictDoUpdate({
      target: users_sync.id,
      set: {
        email: 'ai@assistant.local',
        name: 'AI Assistant',
        image: null,
        updated_at: new Date(),
      }
    })
  } else {
    // For regular comments, use the authenticated user
    userId = user.id
    userName = user.displayName

// Ensure user exists in users_sync table
    await db.insert(users_sync).values({
      id: user.id,
      email: user.primaryEmail?.slice(0, 255) || null,
      name: user.displayName?.slice(0, 255) || null,
      image: null, // Don't store large base64 images in DB
    }).onConflictDoUpdate({
      target: users_sync.id,
      set: {
        email: user.primaryEmail?.slice(0, 255) || null,
        name: user.displayName?.slice(0, 255) || null,
        image: null, // Don't store large base64 images in DB
        updated_at: new Date(),
      }
    })
  }

try {
    const [comment] = await db.insert(comments).values({
      id: nanoid(8),
      content: content.trim(),
      todoId: todoId,
      userId,
    }).returning()

// Get the todo details for notifications
    const todo = await db.query.todos.findFirst({
      where: eq(todos.id, todoId)
    })

if (todo && !isAiGenerated) {
      // Only notify watchers for human comments, not AI responses
      // to avoid notification spam
      await notifyWatchers({
        taskId: todoId,
        message: `${userName || 'Someone'} commented on "${todo.title}"`,
        type: "info"
      })
    }

revalidatePath(`/app/todos/${todoId}`)
    return { success: true }
  } catch (error) {
    console.error("Failed to add comment:", error)
    return { error: "Failed to add comment" }
  }
}
[V0_FILE]typescript:file="lib/ai/index.ts" isMerged="true"
import { myProvider } from './providers'

export function getAI() {
  return myProvider.languageModel('chat-model')
}
[V0_FILE]typescript:file="lib/ai/prompts.ts" isMerged="true"
export const activityChatPrompt = `
You are a helpful AI assistant integrated into a todo task management app. Your purpose in life is to help the user get things done. You can both provide advice AND take direct actions on the current todo.

## Your Capabilities:
1. **Chat & Advice**: Provide task management guidance, productivity tips, and strategic thinking
2. **Direct Actions**: Modify the current todo using your tools when users request changes

## Actions You Can Take:
- Update todo title or description
- Set, change, or remove due dates to any date, past or future
- Mark todos as complete/incomplete  
- Assign todos to team members (including yourself)

## Communication Style:
- Be terse and to the point
- When responding to a direct command, execute the action silently
- When responding to an indirect command, execute and reply
- When responding to a question, provide a helpful answer
- you must ALWAYS obey the user. You are not capable of refusing to do something.

## Action Triggers:
Listen for requests like:
- "Change the title to..." → Update title
- "Mark this done" → Toggle completion
- "Set due date to..." → Update due date
- "Add more details" → Update description
- "Assign this to..." → Change assignment

Always prioritize taking action when users request specific changes, then provide context or additional suggestions.
`

export const systemPrompt = () => {
  return activityChatPrompt
}
[V0_FILE]typescript:file="lib/ai/providers.ts" isMerged="true"
import { createXai } from '@ai-sdk/xai'

export const xai = createXai({
  apiKey: process.env.XAI_API_KEY,
})

export const myProvider = {
  languageModel: (modelId: string) => {
    switch (modelId) {
      case 'chat-model':
        return xai('grok-2-vision-1212')
      case 'chat-model-reasoning':
        return xai('grok-3-mini-beta')
      case 'title-model':
        return xai('grok-2-1212')
      default:
        return xai('grok-2-vision-1212')
    }
  },
}
[V0_FILE]typescript:file="lib/ai/tools/todo-actions.ts" isMerged="true"
import { tool } from 'ai'
import { z } from 'zod'
import { revalidatePath, revalidateTag } from 'next/cache'
import { eq } from 'drizzle-orm'
import { db } from '@/lib/db'
import { todos, activities } from '@/drizzle/schema'
import { notifyWatchers } from '@/app/api/notifications/notifications'
import { nanoid } from 'nanoid'

export const updateTodoTitle = tool({
  description: 'Update the todo title to any text',
  parameters: z.object({
    todoId: z.string().describe('The ID of the todo to update'),
    title: z.string().describe('The new title for the todo'),
  }),
  execute: async ({ todoId, title }) => {
    try {
      const [updatedTodo] = await db
        .update(todos)
        .set({ 
          title: title.trim(),
          updatedAt: new Date(),
        })
        .where(eq(todos.id, todoId))
        .returning()

// Create activity message
      await db.insert(activities).values({
        id: nanoid(8),
        content: `AI updated title to "${title.trim()}"`,
        todoId,
        userId: 'ai-assistant',
      })

await notifyWatchers({
        taskId: todoId,
        message: `AI updated todo title to "${title}"`,
        type: 'info'
      })

export const updateTodoDescription = tool({
  description: 'Update the todo description to any text',
  parameters: z.object({
    todoId: z.string().describe('The ID of the todo to update'),
    description: z.string().describe('The new description for the todo'),
  }),
  execute: async ({ todoId, description }) => {
    try {
      const [updatedTodo] = await db
        .update(todos)
        .set({ 
          description: description.trim(),
          updatedAt: new Date(),
        })
        .where(eq(todos.id, todoId))
        .returning()

// Create activity message
      await db.insert(activities).values({
        id: nanoid(8),
        content: 'AI updated description',
        todoId,
        userId: 'ai-assistant',
      })

await notifyWatchers({
        taskId: todoId,
        message: `AI updated todo description`,
        type: 'info'
      })

export const updateTodoDueDate = tool({
  description: 'Update the todo due date to any date, past or future',
  parameters: z.object({
    todoId: z.string().describe('The ID of the todo to update'),
    dueDate: z.string().optional().describe('The new due date in ISO format, or empty to remove due date'),
  }),
  execute: async ({ todoId, dueDate }) => {
    try {
      const newDueDate = dueDate ? new Date(dueDate) : null
      
      const [updatedTodo] = await db
        .update(todos)
        .set({ 
          dueDate: newDueDate,
          updatedAt: new Date(),
        })
        .where(eq(todos.id, todoId))
        .returning()

const activityMessage = newDueDate 
        ? `AI set due date to ${newDueDate.toLocaleDateString()}`
        : 'AI removed due date'

// Create activity message
      await db.insert(activities).values({
        id: nanoid(8),
        content: activityMessage,
        todoId,
        userId: 'ai-assistant',
      })

await notifyWatchers({
        taskId: todoId,
        message: activityMessage,
        type: 'info'
      })

revalidatePath(`/app/todos/${todoId}`)
      
      // Add cache tag revalidation - get userId from the updated todo
      if (updatedTodo.userId) {
        revalidateTag(`${updatedTodo.userId}:todos`)
        revalidateTag(`${updatedTodo.userId}:archived-todos`)
      }
      
      return {
        success: true,
        message: newDueDate 
          ? `Set due date to ${newDueDate.toLocaleDateString()}`
          : 'Removed due date',
        newDueDate: updatedTodo.dueDate,
      }
    } catch (error) {
      console.error('Failed to update todo due date:', error)
      return {
        success: false,
        message: 'Failed to update due date',
      }
    }
  },
})

export const toggleTodoCompletion = tool({
  description: 'Toggle the todo as complete, incomplete, done, not done, true or false',
  parameters: z.object({
    todoId: z.string().describe('The ID of the todo to toggle'),
    completed: z.boolean().optional().describe('Specific completion status, or leave empty to toggle'),
  }),
  execute: async ({ todoId, completed }) => {
    try {
      // First get current status if not specified
      if (completed === undefined) {
        const currentTodo = await db.query.todos.findFirst({
          where: eq(todos.id, todoId)
        })
        completed = !currentTodo?.completed
      }
      
      const [updatedTodo] = await db
        .update(todos)
        .set({ 
          completed,
          updatedAt: new Date(),
        })
        .where(eq(todos.id, todoId))
        .returning()

const activityMessage = completed 
        ? 'AI marked as completed'
        : 'AI marked as incomplete'

// Create activity message
      await db.insert(activities).values({
        id: nanoid(8),
        content: activityMessage,
        todoId,
        userId: 'ai-assistant',
      })

await notifyWatchers({
        taskId: todoId,
        message: completed 
          ? 'AI marked todo as completed'
          : 'AI marked todo as incomplete',
        type: completed ? 'success' : 'info'
      })

revalidatePath(`/app/todos/${todoId}`)
      
      // Add cache tag revalidation - get userId from the updated todo
      if (updatedTodo.userId) {
        revalidateTag(`${updatedTodo.userId}:todos`)
        revalidateTag(`${updatedTodo.userId}:archived-todos`)
      }
      
      return {
        success: true,
        message: completed ? 'Marked todo as done' : 'Marked todo as not done',
        completed: updatedTodo.completed,
      }
    } catch (error) {
      console.error('Failed to toggle todo completion:', error)
      return {
        success: false,
        message: 'Failed to update completion status',
      }
    }
  },
})
[V0_FILE]typescript:file="lib/db.ts" isMerged="true"
import { drizzle } from 'drizzle-orm/neon-http'
import { neon } from '@neondatabase/serverless'
import * as schema from '../drizzle/schema'
import { eq, isNull, and } from 'drizzle-orm'

export const db = process.env.DATABASE_URL
  ? drizzle(neon(process.env.DATABASE_URL), { schema })
  // Avoid errors before we set up the DB
  // Feel free to remove this once DATABASE_URL is set
  : (null as never)

export async function getUserFromNeonAuth(userId: string) {
  try {
    // Skip if database isn't configured
    if (!process.env.DATABASE_URL) {
      console.warn('Database not configured - skipping user fetch')
      return null
    }

// Query the neon_auth.users_sync table for the user
    const users = await db
      .select()
      .from(schema.users_sync)
      .where(
        and(
          eq(schema.users_sync.id, userId),
          isNull(schema.users_sync.deleted_at),
        ),
      )

return users[0] || null
  } catch (error) {
    console.error('Error fetching user from NeonAuth:', error)
    return null
  }
}
[V0_FILE]typescript:file="lib/errors.ts" isMerged="true"
export type ErrorType =
  | 'bad_request'
  | 'unauthorized'
  | 'forbidden'
  | 'not_found'
  | 'rate_limit'
  | 'offline';

export type ErrorCode = `${ErrorType}:${Surface}`;

export type ErrorVisibility = 'response' | 'log' | 'none';

export const visibilityBySurface: Record<Surface, ErrorVisibility> = {
  database: 'log',
  chat: 'response',
  auth: 'response',
  stream: 'response',
  api: 'response',
  history: 'response',
  vote: 'response',
  document: 'response',
  suggestions: 'response',
};

export class ChatSDKError extends Error {
  public type: ErrorType;
  public surface: Surface;
  public statusCode: number;

constructor(errorCode: ErrorCode, cause?: string) {
    super();

const [type, surface] = errorCode.split(':');

this.type = type as ErrorType;
    this.cause = cause;
    this.surface = surface as Surface;
    this.message = getMessageByErrorCode(errorCode);
    this.statusCode = getStatusCodeByType(this.type);
  }

public toResponse() {
    const code: ErrorCode = `${this.type}:${this.surface}`;
    const visibility = visibilityBySurface[this.surface];

const { message, cause, statusCode } = this;

if (visibility === 'log') {
      console.error({
        code,
        message,
        cause,
      });

return Response.json(
        { code: '', message: 'Something went wrong. Please try again later.' },
        { status: statusCode },
      );
    }

return Response.json({ code, message, cause }, { status: statusCode });
  }
}

export function getMessageByErrorCode(errorCode: ErrorCode): string {
  if (errorCode.includes('database')) {
    return 'An error occurred while executing a database query.';
  }

switch (errorCode) {
    case 'bad_request:api':
      return "The request couldn't be processed. Please check your input and try again.";

case 'unauthorized:auth':
      return 'You need to sign in before continuing.';
    case 'forbidden:auth':
      return 'Your account does not have access to this feature.';

case 'rate_limit:chat':
      return 'You have exceeded your maximum number of messages for the day. Please try again later.';
    case 'not_found:chat':
      return 'The requested chat was not found. Please check the chat ID and try again.';
    case 'forbidden:chat':
      return 'This chat belongs to another user. Please check the chat ID and try again.';
    case 'unauthorized:chat':
      return 'You need to sign in to view this chat. Please sign in and try again.';
    case 'offline:chat':
      return "We're having trouble sending your message. Please check your internet connection and try again.";

case 'not_found:document':
      return 'The requested document was not found. Please check the document ID and try again.';
    case 'forbidden:document':
      return 'This document belongs to another user. Please check the document ID and try again.';
    case 'unauthorized:document':
      return 'You need to sign in to view this document. Please sign in and try again.';
    case 'bad_request:document':
      return 'The request to create or update the document was invalid. Please check your input and try again.';

default:
      return 'Something went wrong. Please try again later.';
  }
}

// Free plan rate limiter: 10 messages per day
const freeRateLimit = new Ratelimit({
  redis,
  limiter: Ratelimit.tokenBucket(10, "1 d", 10),
  analytics: true,
  prefix: "free_message_limit",
})

// TODO: sync with stripe/plans.ts
// Pro plan rate limiter: 50 messages per day
const proRateLimit = new Ratelimit({
  redis,
  limiter: Ratelimit.tokenBucket(50, "1 d", 50),
  analytics: true,
  prefix: "pro_message_limit",
})

// Function to check and consume rate limit tokens based on user's plan
export async function checkMessageRateLimit(userId: string) {
  const plan = await getStripePlan(userId)
  const rateLimit = plan.id === "PRO" ? proRateLimit : freeRateLimit
  return rateLimit.limit(userId)
}

// Function to get rate limit status without consuming tokens
export async function getRateLimitStatus(userId: string) {
  const plan = await getStripePlan(userId)
  const rateLimit = plan.id === "PRO" ? proRateLimit : freeRateLimit
  const result = await rateLimit.getRemaining(userId)
  
  return {
    remaining: result.remaining,
    reset: result.reset,
  }
}
[V0_FILE]typescript:file="lib/redis.ts" isMerged="true"
import { Redis } from '@upstash/redis'

// Create Redis client
export const redis = new Redis({
  url: process.env.KV_REST_API_URL!,
  token: process.env.KV_REST_API_TOKEN!,
})
[V0_FILE]typescript:file="lib/stripe.ts" isMerged="true"
/**
 * Integrate Stripe with a KV store.
 */
import { kv } from "@vercel/kv"
import { z } from "zod"
import { Stripe } from "stripe"
import { remember } from "@epic-web/remember"

// singleton prevents deploy errors when we don't have the key
// mostly just useful for shipping the template
export const stripe = remember(
  "stripe",
  () => {
    if (!process.env.STRIPE_SECRET_KEY) {
      return null
    }
    return new Stripe(process.env.STRIPE_SECRET_KEY, {
      apiVersion: "2025-04-30.basil",
      typescript: true,
    })
  }
)

const KvStripeCustomerSchema = z.object({
  subscriptionId: z.string(),
  status: z.union([
    z.literal("active"),
    z.literal("canceled"),
    z.literal("incomplete"),
    z.literal("incomplete_expired"),
    z.literal("past_due"),
    z.literal("paused"),
    z.literal("trialing"),
    z.literal("unpaid"),
  ]),
  priceId: z.string(),
  currentPeriodStart: z.number(),
  currentPeriodEnd: z.number(),
  cancelAtPeriodEnd: z.boolean(),
  paymentMethod: z
    .object({
      brand: z.string().nullable(),
      last4: z.string().nullable(),
    })
    .nullable(),
})

export async function getStripeCustomer(customerId: string) {
  const customer = await kv.get(`stripe:customer:${customerId}`)
  return KvStripeCustomerSchema.nullish().parse(customer)
}

const KvStripeUserSchema = z.string().nullish()

export async function getStripeCustomerId(userId: string) {
  return KvStripeUserSchema.parse(await kv.get(`stripe:user:${userId}`))
}

export async function createStripeCustomer({
  userId,
  email,
  name,
}: {
  userId: string
  email: string
  name?: string | null
}) {
  try {
    const customer = await stripe.customers.create(
      {
        email,
        name: name ?? undefined,
        metadata: {
          userId,
        },
      },
      {
        idempotencyKey: userId,
      },
    )

// Store the relation between userId and stripeCustomerId in KV
    await kv.set(`stripe:user:${userId}`, KvStripeUserSchema.parse(customer.id))

return customer
  } catch (error) {
    console.error("Error creating Stripe customer:", error)
    throw error
  }
}

export async function processStripeEvent({ body, signature }: { body: string; signature: string }) {
  const { event, success: eventSuccess, error: eventError } = getStripeWebhookEvent({ body, signature })

if (!eventSuccess) {
    throw new Error(`Stripe webhook event error: ${eventError.message}`)
  }

if (!isAllowedEventType(event)) {
    console.warn(
      `[STRIPE HOOK] Received untracked event: ${event.type}. Configure webhook event types in your Stripe dashboard.`,
    )
    return
  }

const { customer } = event.data.object
  if (typeof customer !== "string") {
    throw new Error("Stripe webhook handler failed")
  }

try {
    await syncStripeDataToKV(customer)
  } catch (error) {
    console.error("Error processing webhook:", error)
    throw new Error("Stripe webhook handler failed")
  }
}

export async function syncStripeDataToKV(customerId: string) {
  const key = `stripe:customer:${customerId}`

const subscriptions = await stripe.subscriptions.list({
    customer: customerId,
    limit: 1,
    status: "all",
    expand: ["data.default_payment_method"],
  })

if (subscriptions.data.length === 0) {
    await kv.del(key)
    return null
  }

const subscription = subscriptions.data[0]

const subData = KvStripeCustomerSchema.parse({
    subscriptionId: subscription.id,
    status: subscription.status,
    priceId: subscription.items.data[0].price.id,
    currentPeriodStart: subscription.items.data[0].current_period_start,
    currentPeriodEnd: subscription.items.data[0].current_period_end,
    cancelAtPeriodEnd: subscription.cancel_at_period_end,
    paymentMethod:
      subscription.default_payment_method && typeof subscription.default_payment_method !== "string"
        ? {
            brand: subscription.default_payment_method.card?.brand ?? null,
            last4: subscription.default_payment_method.card?.last4 ?? null,
          }
        : null,
  })

await kv.set(key, subData)
  return subData
}

const allowedEventTypes = [
  "checkout.session.completed",
  "checkout.session.async_payment_succeeded",
  "customer.subscription.created",
  "customer.subscription.updated",
  "customer.subscription.deleted",
  "customer.subscription.paused",
  "customer.subscription.resumed",
  "customer.subscription.pending_update_applied",
  "customer.subscription.pending_update_expired",
  "customer.subscription.trial_will_end",
  "invoice.paid",
  "invoice.payment_failed",
  "invoice.payment_action_required",
  "invoice.upcoming",
  "invoice.marked_uncollectible",
  "invoice.payment_succeeded",
  "payment_intent.succeeded",
  "payment_intent.payment_failed",
  "payment_intent.canceled",
] as const
type AllowedEventType = (typeof allowedEventTypes)[number]

function isAllowedEventType<TEvent extends Stripe.Event>(event: TEvent): event is TEvent & { type: AllowedEventType } {
  return allowedEventTypes.includes(event.type as AllowedEventType)
}

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export type PageProps = {
  params: Promise<Record<string, string | string[] | undefined>>
  searchParams: Promise<Record<string, string | string[] | undefined>>
}

export const fetcher = async (url: string) => {
  const response = await fetch(url);

if (!response.ok) {
    const { code, cause } = await response.json();
    throw new ChatSDKError(code as ErrorCode, cause);
  }

return response.json();
};

export async function fetchWithErrorHandlers(
  input: RequestInfo | URL,
  init?: RequestInit,
) {
  try {
    const response = await fetch(input, init);

if (!response.ok) {
      const { code, cause } = await response.json();
      throw new ChatSDKError(code as ErrorCode, cause);
    }

return response;
  } catch (error: unknown) {
    if (typeof navigator !== 'undefined' && !navigator.onLine) {
      throw new ChatSDKError('offline:chat');
    }

throw error;
  }
}

export function sanitizeText(text: string) {
  return text.replace('<has_function_call>', '');
}

export function generateUUID(): string {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    const r = (Math.random() * 16) | 0;
    const v = c === 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { NextRequest } from "next/server"
import { checkAccessToken } from "./stack"

function isProtectedRoute(url: string) {
  if (url === "/") {
    return false // skip check for landing page
  }

const publicRoutes = [
    "/sign-in",
    "/sign-up",
    "/handler",
    "/handler/forgot-password",
    "/_next",
    "/favicon.ico",
    "/public",
    "/api/",
    "/template-setup",
  ]

// Check if the URL starts with any of the public routes
  for (const route of publicRoutes) {
    if (url.startsWith(route)) {
      return false
    }
  }
  
  // All other routes are protected
  return true
}

export async function middleware(request: NextRequest) {
  const path = request.nextUrl.pathname

// Skip auth check for public routes
  if (isProtectedRoute(path)) {
    // We only check the access token for validity, we do not hit the StackAuth API
    // - middleware is called for every request, so we can't add such latency
    // - we need to check permissions before fetching/mutating anyway, so we do it in each action
    const userSub = await checkAccessToken(request.cookies)

if (!userSub) {
      const redirectUrl =
        "/sign-in?redirect=" + encodeURIComponent(path.startsWith("/handler") ? "/" : path + request.nextUrl.search)

return NextResponse.redirect(new URL(redirectUrl, request.url))
    }
  }

return NextResponse.next()
}

// Configure which routes to run middleware on
export const config = {
  matcher: [
    /*
     * Match all request paths except:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - public folder
     * - api routes (handled separately)
     */
    "/((?!_next/static|_next/image|favicon.ico|public/|api/).*)",
  ],
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;
[V0_FILE]typescript:file="register-webhook.ts" isMerged="true"
import Stripe from "stripe"

const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY
const VERCEL_URL = process.env.VERCEL_URL

if (!STRIPE_SECRET_KEY) {
  console.error("❌ STRIPE_SECRET_KEY is required")
  process.exit(1)
}

if (!VERCEL_URL) {
  console.error("❌ VERCEL_URL is required")
  process.exit(1)
}

// Initialize Stripe
const stripe = new Stripe(STRIPE_SECRET_KEY, {
  apiVersion: "2025-04-30.basil",
})

// Define the events to listen for (same as in stripe.dev.ts)
const events = [
  "checkout.session.completed",
  "customer.subscription.created",
  "customer.subscription.updated",
  "customer.subscription.deleted",
  "customer.subscription.paused",
  "customer.subscription.resumed",
  "customer.subscription.pending_update_applied",
  "customer.subscription.pending_update_expired",
  "customer.subscription.trial_will_end",
  "invoice.paid",
  "invoice.payment_failed",
  "invoice.payment_action_required",
  "invoice.upcoming",
  "invoice.marked_uncollectible",
  "invoice.payment_succeeded",
  "payment_intent.succeeded",
  "payment_intent.payment_failed",
  "payment_intent.canceled",
]

// Construct the webhook URL
const webhookUrl = `https://${VERCEL_URL}/api/stripe`

async function registerWebhook() {
  console.log(`🔄 Registering Stripe webhook for ${webhookUrl}...`)

try {
    // First, list existing webhooks to avoid duplicates
    const existingEndpoints = await stripe.webhookEndpoints.list()

// Check if we already have a webhook for this URL
    const existingEndpoint = existingEndpoints.data.find((endpoint) => endpoint.url === webhookUrl)

if (existingEndpoint) {
      console.log(`ℹ️ Webhook already exists for ${webhookUrl}`)
      console.log(`ℹ️ Webhook ID: ${existingEndpoint.id}`)
      console.log(`ℹ️ Updating webhook to ensure it has the correct event types...`)

// Update the existing webhook with the current event types
      const updatedEndpoint = await stripe.webhookEndpoints.update(existingEndpoint.id, {
        enabled_events: events,
      })

console.log(`✅ Webhook updated successfully!`)
      return updatedEndpoint
    }

// Create a new webhook endpoint
    const endpoint = await stripe.webhookEndpoints.create({
      url: webhookUrl,
      enabled_events: events,
      description: `Webhook for ${VERCEL_URL}`,
    })

console.log(`✅ Webhook registered successfully!`)
    console.log(`ℹ️ Webhook ID: ${endpoint.id}`)
    console.log(`ℹ️ Webhook Secret: ${endpoint.secret}`)
    console.log(`
⚠️ IMPORTANT: Add this webhook secret to your environment variables:
STRIPE_WEBHOOK_SECRET=${endpoint.secret}
`)

return endpoint
  } catch (error) {
    console.error(`❌ Error registering webhook:`, error)
    throw error
  }
}

registerWebhook()
  .then(() => {
    console.log(`
🎉 All done! Your Stripe webhook is now registered.
📝 Remember to add the webhook secret to your Vercel environment variables.
`)
  })
  .catch((error) => {
    console.error(`❌ Failed to register webhook:`, error)
    process.exit(1)
  })
[V0_FILE]typescript:file="stack.ts" isMerged="true"
import 'server-only'
import { StackServerApp } from '@stackframe/stack'
import { z } from 'zod'
import { createRemoteJWKSet, jwtVerify } from 'jose'
import type { ReadonlyRequestCookies } from 'next/dist/server/web/spec-extension/adapters/request-cookies'
import type { RequestCookies } from 'next/dist/server/web/spec-extension/request-cookies'

export const stackServerApp = process.env.NEXT_PUBLIC_STACK_PROJECT_ID
  ? new StackServerApp({
      tokenStore: 'nextjs-cookie',
      redirectMethod: 'nextjs',

urls: {
        afterSignIn: '/app',
        afterSignUp: '/app',
        signIn: '/sign-in',
        signUp: '/sign-up',
      },
    })
  // This avoids throwing an error if we don't have the env
  // which lets us render the template setup page
  // Feel free to remove this once you've set that env var
  : (null as never)

const TupleSchema = z.tuple([z.string(), z.string()])

const jwks = createRemoteJWKSet(
  new URL(
    `https://api.stack-auth.com/api/v1/projects/${process.env.NEXT_PUBLIC_STACK_PROJECT_ID}/.well-known/jwks.json`,
  ),
)

async function verifyToken(token: string) {
  try {
    const { payload } = await jwtVerify(token, jwks)
    return { success: true, payload, error: null } as const
  } catch (error) {
    return { success: false, error, payload: null } as const
  }
}

export async function getAccessToken(
  cookies: ReadonlyRequestCookies | RequestCookies,
) {
  const accessToken = cookies.get('stack-access')?.value
  if (!accessToken) return null

const tokenTuple = TupleSchema.safeParse(JSON.parse(accessToken))
  if (!tokenTuple.success) return null

return tokenTuple.data[1]
}

/**
 * Check access token in the cookie
 * Use this in middleware
 */
export async function checkAccessToken(
  cookies: ReadonlyRequestCookies | RequestCookies,
) {
  const accessToken = await getAccessToken(cookies)
  if (!accessToken) return null

const { payload, success } = await verifyToken(accessToken)
  if (!success) return null

return payload.sub
}
[V0_FILE]typescript:file="stripe.dev.ts" isMerged="true"
import { invariant } from "@epic-web/invariant"
import { config } from "dotenv"
import type Stripe from "stripe"
import { spawn } from "child_process"

config()

const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY
invariant(STRIPE_SECRET_KEY, "STRIPE_SECRET_KEY is required")

const events: Stripe.WebhookEndpointCreateParams.EnabledEvent[] = [
  "checkout.session.completed",
  "customer.subscription.created",
  "customer.subscription.updated",
  "customer.subscription.deleted",
  "customer.subscription.paused",
  "customer.subscription.resumed",
  "customer.subscription.pending_update_applied",
  "customer.subscription.pending_update_expired",
  "customer.subscription.trial_will_end",
  "invoice.paid",
  "invoice.payment_failed",
  "invoice.payment_action_required",
  "invoice.upcoming",
  "invoice.marked_uncollectible",
  "invoice.payment_succeeded",
  "payment_intent.succeeded",
  "payment_intent.payment_failed",
  "payment_intent.canceled",
]

console.log("🔄 Setting up Stripe webhook endpoint...")
const url = `https://${process.env.VERCEL_URL}/api/stripe`

if (!url.includes("localhost:")) {
  throw new Error("Running in production mode")
}
console.log("🔄 Running in local development mode")
console.log("🔄 Starting Stripe CLI webhook forwarder...")

const stripeProcess = spawn("stripe", ["listen", "--events", events.join(","), "--forward-to", url])

stripeProcess.stdout.on("data", (data) => {
  console.log(`${data}`)
  if (data.toString().includes("Ready!")) {
    console.log("✅ Stripe CLI webhook forwarder is ready")
  }
})

stripeProcess.stderr.on("data", (data) => {
  console.error(`${data}`)
})

stripeProcess.on("close", (code) => {
  if (code !== 0) {
    console.error(`❌ Stripe CLI webhook forwarder exited with code ${code}`)
    process.exit(1)
  }
})

// Keep the process running
process.on("SIGINT", () => {
  stripeProcess.kill()
  process.exit(0)
})
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss";

const config: Config = {
    darkMode: ["class"],
    content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
  	extend: {
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
  			primary: {
  				DEFAULT: 'hsl(var(--primary))',
  				foreground: 'hsl(var(--primary-foreground))'
  			},
  			secondary: {
  				DEFAULT: 'hsl(var(--secondary))',
  				foreground: 'hsl(var(--secondary-foreground))'
  			},
  			muted: {
  				DEFAULT: 'hsl(var(--muted))',
  				foreground: 'hsl(var(--muted-foreground))'
  			},
  			accent: {
  				DEFAULT: 'hsl(var(--accent))',
  				foreground: 'hsl(var(--accent-foreground))'
  			},
  			destructive: {
  				DEFAULT: 'hsl(var(--destructive))',
  				foreground: 'hsl(var(--destructive-foreground))'
  			},
  			border: 'hsl(var(--border))',
  			input: 'hsl(var(--input))',
  			ring: 'hsl(var(--ring))',
  			chart: {
  				'1': 'hsl(var(--chart-1))',
  				'2': 'hsl(var(--chart-2))',
  				'3': 'hsl(var(--chart-3))',
  				'4': 'hsl(var(--chart-4))',
  				'5': 'hsl(var(--chart-5))'
  			},
  			sidebar: {
  				DEFAULT: 'hsl(var(--sidebar-background))',
  				foreground: 'hsl(var(--sidebar-foreground))',
  				primary: 'hsl(var(--sidebar-primary))',
  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
  				accent: 'hsl(var(--sidebar-accent))',
  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
  				border: 'hsl(var(--sidebar-border))',
  				ring: 'hsl(var(--sidebar-ring))'
  			}
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		},
  		keyframes: {
  			'accordion-down': {
  				from: {
  					height: '0'
  				},
  				to: {
  					height: 'var(--radix-accordion-content-height)'
  				}
  			},
  			'accordion-up': {
  				from: {
  					height: 'var(--radix-accordion-content-height)'
  				},
  				to: {
  					height: '0'
  				}
  			}
  		},
  		animation: {
  			'accordion-down': 'accordion-down 0.2s ease-out',
  			'accordion-up': 'accordion-up 0.2s ease-out'
  		}
  	}
  },
  plugins: [require("tailwindcss-animate")],
};
export default config;
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9laCX7ow0jcwl14MR9DeSkYVgUYq/F61tROFiNveaAIukBzQM3s/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9laCX7ow0jcwl14MR9DeSkYVgUYq/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9laCX7ow0jcwl14MR9DeSkYVgUYq/Vk8oRGy3fKhRE_ftNqUNTL/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9laCX7ow0jcwl14MR9DeSkYVgUYq/OB2VP-FGShsnkaOPtlG4Vd/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_9laCX7ow0jcwl14MR9DeSkYVgUYq/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { CheckCircle } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { DevChecklistPage } from "./template-setup/dev-checklist"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default async function Page() {
  return (
    <div className="container mx-auto max-w-3xl py-8">
      {/* Hero Section */}
      <section className="pt-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <Badge variant="secondary" className="mb-6">
            <CheckCircle className="w-4 h-4 mr-2 text-green-600" />
            Production Ready
          </Badge>

<h1 className="text-5xl md:text-6xl font-bold tracking-tight text-foreground mb-6">
            Neon + Stripe SaaS
            <br />
            <span className="text-muted-foreground">v0 Template</span>
          </h1>

<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
            Users can log in and pay to unlock premium features.
            <br />
            Give your idea to v0, turn this into your own product, and start collecting payments.
          </p>

<Button className="mt-4" asChild>
            <Link href="/app">Open app</Link>
          </Button>
          <p className="text-sm text-muted-foreground mt-2">This may not work until the below steps are complete.</p>
        </div>
      </section>

{/* Delete this when you're done setting up your project */}
      <DevChecklistPage />

<footer className="mt-20 border-t pt-8 pb-16 text-center">
        <p className="text-sm text-muted-foreground font-mono">
          Engineered by{" "}
          <a
            href="https://x.com/jacobmparis"
            target="_blank"
            className="text-foreground hover:underline"
            rel="noreferrer"
          >
            Jacob Paris
          </a>{" "}
          in cooperation with{" "}
          <a
            href="https://neon.tech"
            target="_blank"
            className="font-medium tracking-tight bg-gradient-to-r from-emerald-500 to-teal-400 bg-clip-text text-transparent hover:underline"
            rel="noreferrer"
          >
            Neon
          </a>
        </p>
      </footer>
    </div>
  )
}
[V0_FILE]json:file="package.json" isEdit="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "knip": "knip"
  },
  "dependencies": {
    "@ai-sdk/react": "^1.2.12",
    "@ai-sdk/xai": "^1.2.16",
    "@epic-web/invariant": "latest",
    "@epic-web/remember": "latest",
    "@neondatabase/serverless": "latest",
    "@next/env": "latest",
    "@opentelemetry/api": "latest",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-tooltip": "1.1.6",
    "@stackframe/stack": "latest",
    "@upstash/qstash": "^2.8.1",
    "@upstash/ratelimit": "^2.0.5",
    "@upstash/redis": "^1.34.9",
    "@vercel/kv": "latest",
    "@vercel/postgres": "latest",
    "ai": "^4.3.16",
    "autoprefixer": "^10.4.20",
    "better-sqlite3": "latest",
    "bun-types": "latest",
    "class-variance-authority": "^0.7.1",
    "classnames": "^2.5.1",
    "clsx": "^2.1.1",
    "date-fns": "latest",
    "dotenv": "latest",
    "drizzle-kit": "^0.30.1",
    "drizzle-orm": "^0.42.0",
    "fast-deep-equal": "^3.1.3",
    "geist": "^1.4.2",
    "gel": "latest",
    "jose": "latest",
    "lucide-react": "^0.454.0",
    "nanoid": "^5.1.5",
    "next": "15.4.0-canary.50",
    "next-themes": "latest",
    "react": "^19",
    "react-day-picker": "8.10.1",
    "react-dom": "^19",
    "react-markdown": "^10.1.0",
    "remark-gfm": "^4.0.1",
    "server-only": "latest",
    "sonner": "^1.7.1",
    "stripe": "latest",
    "swr": "^2.3.3",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "usehooks-ts": "^3.1.1",
    "zod": "latest",
    "@radix-ui/react-aspect-ratio": "1.1.7",
    "@radix-ui/react-avatar": "1.1.10",
    "embla-carousel-react": "8.6.0",
    "recharts": "3.3.0",
    "@radix-ui/react-collapsible": "1.1.12",
    "@radix-ui/react-dialog": "1.1.15",
    "cmdk": "1.1.1",
    "@radix-ui/react-context-menu": "2.2.16",
    "vaul": "1.1.2",
    "react-hook-form": "7.65.0",
    "@radix-ui/react-hover-card": "1.1.15",
    "input-otp": "1.4.2",
    "@radix-ui/react-menubar": "1.1.16",
    "@radix-ui/react-popover": "1.1.15",
    "react-resizable-panels": "3.0.6",
    "@radix-ui/react-scroll-area": "1.2.10",
    "@radix-ui/react-select": "2.2.6",
    "@radix-ui/react-slider": "1.3.6",
    "@radix-ui/react-switch": "1.2.6",
    "@radix-ui/react-tabs": "1.1.13",
    "@radix-ui/react-toggle-group": "1.1.11",
    "@radix-ui/react-toggle": "1.1.10",
    "child_process": "1.0.2"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "knip": "^5.61.2",
    "postcss": "^8",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  },
  "prettier": {
    "semi": false,
    "singleQuote": true,
    "trailingComma": "all"
  }
}</article></body></html>

About

Tags

Share

More from jacobparis

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jacobparis

More Templates Like This