feat: Add Next.js frontend with Framer Motion animations

## New Frontend (frontend/)
- Next.js 14 with App Router and TypeScript
- Framer Motion page transitions and animations
- Glassmorphic dark theme matching Cursor/Antigravity
- Animated sidebar navigation
- All 4 modes: Chat, Search, Refactor, Generate

## Pages
- / - Home with drag-and-drop upload
- /chat - Animated chat messages with source chips
- /search - Regex search with expandable results
- /refactor - Pattern templates with diff preview
- /generate - Feature generation with code display

## Tech Stack
- Next.js 14, TypeScript, Tailwind CSS v4
- Framer Motion, React Query, Lucide Icons
- API proxy to FastAPI backend

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/next.config.ts

@@ -0,0 +1,20 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // API rewrites to proxy to FastAPI backend
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: 'http://localhost:8000/api/:path*',
+      },
+    ];
+  },
+
+  // Image optimization
+  images: {
+    remotePatterns: [],
+  },
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.20",
+    "axios": "^1.13.4",
+    "framer-motion": "^12.29.2",
+    "lucide-react": "^0.563.0",
+    "next": "16.1.6",
+    "prism-react-renderer": "^2.4.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend/src/app/chat/page.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { motion, AnimatePresence } from 'framer-motion';
+import { useState, useRef, useEffect } from 'react';
+import { Send, Bot, User, FileCode, Sparkles } from 'lucide-react';
+
+interface Message {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    sources?: string[];
+}
+
+export default function ChatPage() {
+    const [messages, setMessages] = useState<Message[]>([]);
+    const [input, setInput] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!input.trim() || isLoading) return;
+
+        const userMessage: Message = {
+            id: Date.now().toString(),
+            role: 'user',
+            content: input,
+        };
+
+        setMessages((prev) => [...prev, userMessage]);
+        setInput('');
+        setIsLoading(true);
+
+        try {
+            const response = await fetch('http://localhost:8000/api/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message: input }),
+            });
+
+            const data = await response.json();
+
+            const assistantMessage: Message = {
+                id: (Date.now() + 1).toString(),
+                role: 'assistant',
+                content: data.answer || data.response || 'No response received',
+                sources: data.sources || [],
+            };
+
+            setMessages((prev) => [...prev, assistantMessage]);
+        } catch (error) {
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: (Date.now() + 1).toString(),
+                    role: 'assistant',
+                    content: 'Error connecting to backend. Please ensure the API is running.',
+                },
+            ]);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const suggestions = [
+        'Explain how authentication works',
+        'Find all database queries',
+        'What are the main entry points?',
+        'Show me the API endpoints',
+    ];
+
+    return (
+        <div className="flex flex-col h-screen">
+            {/* Header */}
+            <motion.header
+                initial={{ y: -20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6 m-4 mb-0 flex items-center justify-between"
+            >
+                <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-sky-400 to-violet-500 flex items-center justify-center">
+                        💬
+                    </div>
+                    <div>
+                        <h1 className="font-bold text-lg">Chat Mode</h1>
+                        <p className="text-sm text-slate-400">Ask questions about your codebase</p>
+                    </div>
+                </div>
+            </motion.header>
+
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-4">
+                {messages.length === 0 ? (
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="flex flex-col items-center justify-center h-full text-center"
+                    >
+                        <Sparkles className="w-16 h-16 text-slate-600 mb-4" />
+                        <h2 className="text-2xl font-bold bg-gradient-to-r from-sky-400 to-violet-400 bg-clip-text text-transparent mb-2">Ask anything about your code</h2>
+                        <p className="text-slate-400 mb-8 max-w-md">
+                            I can explain functions, find patterns, suggest improvements, and more.
+                        </p>
+
+                        <div className="flex flex-wrap gap-2 justify-center max-w-xl">
+                            {suggestions.map((suggestion, i) => (
+                                <motion.button
+                                    key={suggestion}
+                                    initial={{ opacity: 0, scale: 0.9 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    transition={{ delay: i * 0.1 }}
+                                    whileHover={{ scale: 1.05 }}
+                                    whileTap={{ scale: 0.95 }}
+                                    onClick={() => setInput(suggestion)}
+                                    className="px-4 py-2 bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-xl rounded-full text-sm text-slate-300 hover:border-sky-500/50 transition-colors"
+                                >
+                                    {suggestion}
+                                </motion.button>
+                            ))}
+                        </div>
+                    </motion.div>
+                ) : (
+                    <AnimatePresence>
+                        {messages.map((message, i) => (
+                            <motion.div
+                                key={message.id}
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: i * 0.05 }}
+                                className={`flex gap-4 ${message.role === 'user' ? 'flex-row-reverse' : ''}`}
+                            >
+                                <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${message.role === 'user'
+                                        ? 'bg-violet-500/20 text-violet-400'
+                                        : 'bg-sky-500/20 text-sky-400'
+                                    }`}>
+                                    {message.role === 'user' ? <User className="w-5 h-5" /> : <Bot className="w-5 h-5" />}
+                                </div>
+
+                                <div className={`bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6 max-w-[70%] ${message.role === 'user'
+                                        ? 'bg-violet-500/10 border-violet-500/20'
+                                        : 'border-sky-500/20'
+                                    }`}>
+                                    {/* Sources */}
+                                    {message.sources && message.sources.length > 0 && (
+                                        <div className="flex flex-wrap gap-2 mb-3 pb-3 border-b border-white/10">
+                                            {message.sources.map((source, i) => (
+                                                <span key={i} className="inline-flex items-center gap-1 px-2 py-1 bg-slate-800 rounded text-xs text-slate-400">
+                                                    <FileCode className="w-3 h-3" />
+                                                    {source}
+                                                </span>
+                                            ))}
+                                        </div>
+                                    )}
+
+                                    <p className="whitespace-pre-wrap">{message.content}</p>
+                                </div>
+                            </motion.div>
+                        ))}
+                    </AnimatePresence>
+                )}
+
+                {isLoading && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="flex gap-4"
+                    >
+                        <div className="w-10 h-10 rounded-xl bg-sky-500/20 text-sky-400 flex items-center justify-center">
+                            <Bot className="w-5 h-5" />
+                        </div>
+                        <div className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6 border-sky-500/20">
+                            <div className="flex gap-1">
+                                <span className="w-2 h-2 bg-sky-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                                <span className="w-2 h-2 bg-sky-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                                <span className="w-2 h-2 bg-sky-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                            </div>
+                        </div>
+                    </motion.div>
+                )}
+
+                <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input */}
+            <motion.form
+                initial={{ y: 20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                onSubmit={handleSubmit}
+                className="p-4"
+            >
+                <div className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6 flex items-center gap-4 !p-3">
+                    <input
+                        type="text"
+                        value={input}
+                        onChange={(e) => setInput(e.target.value)}
+                        placeholder="Ask about your codebase..."
+                        className="flex-1 bg-transparent border-none outline-none text-slate-200 placeholder:text-slate-500"
+                        disabled={isLoading}
+                    />
+                    <motion.button
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.9 }}
+                        type="submit"
+                        disabled={isLoading || !input.trim()}
+                        className="w-10 h-10 bg-gradient-to-r from-sky-500 to-violet-500 rounded-xl flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        <Send className="w-5 h-5" />
+                    </motion.button>
+                </div>
+            </motion.form>
+        </div>
+    );
+}

frontend/src/app/generate/page.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { Sparkles, FileCode, Save, MessageSquare } from 'lucide-react';
+
+export default function GeneratePage() {
+    const [featureDesc, setFeatureDesc] = useState('');
+    const [framework, setFramework] = useState('Auto-detect');
+    const [includeTests, setIncludeTests] = useState(true);
+    const [includeDocs, setIncludeDocs] = useState(true);
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [result, setResult] = useState<string | null>(null);
+
+    const examples = [
+        'Create a user authentication system with JWT tokens',
+        'Build a REST API endpoint for file uploads',
+        'Add a caching layer with Redis',
+        'Generate unit tests for the auth module',
+    ];
+
+    const handleGenerate = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!featureDesc.trim()) return;
+
+        setIsGenerating(true);
+
+        try {
+            const response = await fetch('http://localhost:8000/api/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    message: `Generate a complete implementation for: ${featureDesc}. Framework: ${framework}. Include tests: ${includeTests}. Include docs: ${includeDocs}.`,
+                }),
+            });
+
+            const data = await response.json();
+            setResult(data.answer || data.response || 'No response received');
+        } catch (error) {
+            console.error('Generation failed:', error);
+            setResult('Error connecting to backend');
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return (
+        <div className="flex flex-col h-screen">
+            {/* Header */}
+            <motion.header
+                initial={{ y: -20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6 m-4 mb-0"
+            >
+                <div className="flex items-center gap-3 mb-4">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-400 to-fuchsia-500 flex items-center justify-center">
+                        ✨
+                    </div>
+                    <div>
+                        <h1 className="font-bold text-lg">Generate Mode</h1>
+                        <p className="text-sm text-slate-400">Create complete features from descriptions</p>
+                    </div>
+                </div>
+
+                {/* Examples */}
+                <div className="flex flex-wrap gap-2 mb-4">
+                    {examples.map((example) => (
+                        <motion.button
+                            key={example}
+                            whileHover={{ scale: 1.02 }}
+                            whileTap={{ scale: 0.98 }}
+                            onClick={() => setFeatureDesc(example)}
+                            className="px-3 py-1.5 bg-slate-800 rounded-lg text-sm text-slate-300 hover:bg-slate-700 transition-colors"
+                        >
+                            {example.slice(0, 40)}...
+                        </motion.button>
+                    ))}
+                </div>
+
+                {/* Form */}
+                <form onSubmit={handleGenerate} className="space-y-4">
+                    <div>
+                        <label className="block text-sm text-slate-400 mb-2">Feature Description</label>
+                        <textarea
+                            value={featureDesc}
+                            onChange={(e) => setFeatureDesc(e.target.value)}
+                            placeholder="Describe the feature you want to build in detail..."
+                            rows={4}
+                            className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-xl focus:border-violet-500 focus:outline-none transition-colors resize-none"
+                        />
+                    </div>
+
+                    <div className="flex gap-4">
+                        <div className="flex-1">
+                            <label className="block text-sm text-slate-400 mb-2">Framework</label>
+                            <select
+                                value={framework}
+                                onChange={(e) => setFramework(e.target.value)}
+                                className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-xl focus:border-violet-500 focus:outline-none transition-colors"
+                            >
+                                <option>Auto-detect</option>
+                                <option>FastAPI</option>
+                                <option>Flask</option>
+                                <option>Django</option>
+                                <option>Express.js</option>
+                                <option>React</option>
+                            </select>
+                        </div>
+
+                        <label className="flex items-center gap-2 px-4 py-3 bg-slate-800/50 rounded-xl cursor-pointer">
+                            <input
+                                type="checkbox"
+                                checked={includeTests}
+                                onChange={(e) => setIncludeTests(e.target.checked)}
+                                className="w-4 h-4 accent-violet-500"
+                            />
+                            <span className="text-sm text-slate-300">Tests</span>
+                        </label>
+
+                        <label className="flex items-center gap-2 px-4 py-3 bg-slate-800/50 rounded-xl cursor-pointer">
+                            <input
+                                type="checkbox"
+                                checked={includeDocs}
+                                onChange={(e) => setIncludeDocs(e.target.checked)}
+                                className="w-4 h-4 accent-violet-500"
+                            />
+                            <span className="text-sm text-slate-300">Docs</span>
+                        </label>
+                    </div>
+
+                    <motion.button
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                        type="submit"
+                        disabled={isGenerating || !featureDesc.trim()}
+                        className="w-full py-3 bg-gradient-to-r from-violet-500 to-fuchsia-500 rounded-xl font-semibold flex items-center justify-center gap-2 disabled:opacity-50"
+                    >
+                        {isGenerating ? (
+                            <>
+                                <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                Generating...
+                            </>
+                        ) : (
+                            <>
+                                <Sparkles className="w-5 h-5" />
+                                Generate Feature
+                            </>
+                        )}
+                    </motion.button>
+                </form>
+            </motion.header>
+
+            {/* Result */}
+            <div className="flex-1 overflow-y-auto p-4">
+                {result && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="space-y-4"
+                    >
+                        {/* Actions */}
+                        <div className="flex gap-2">
+                            <motion.button
+                                whileHover={{ scale: 1.05 }}
+                                whileTap={{ scale: 0.95 }}
+                                className="flex items-center gap-2 px-4 py-2 bg-green-500/20 text-green-400 rounded-lg"
+                            >
+                                <Save className="w-4 h-4" />
+                                Save Files
+                            </motion.button>
+                            <motion.button
+                                whileHover={{ scale: 1.05 }}
+                                whileTap={{ scale: 0.95 }}
+                                className="flex items-center gap-2 px-4 py-2 bg-sky-500/20 text-sky-400 rounded-lg"
+                            >
+                                <MessageSquare className="w-4 h-4" />
+                                Discuss
+                            </motion.button>
+                        </div>
+
+                        {/* Generated Content */}
+                        <div className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
+                            <div className="flex items-center gap-2 mb-4 pb-4 border-b border-white/10">
+                                <FileCode className="w-5 h-5 text-violet-400" />
+                                <span className="font-medium">Generated Feature</span>
+                            </div>
+                            <div className="prose prose-invert max-w-none">
+                                <pre className="whitespace-pre-wrap text-sm">{result}</pre>
+                            </div>
+                        </div>
+                    </motion.div>
+                )}
+
+                {!result && !isGenerating && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="flex flex-col items-center justify-center h-64 text-slate-500"
+                    >
+                        <Sparkles className="w-12 h-12 mb-4 opacity-50" />
+                        <p>Describe a feature above to generate code</p>
+                    </motion.div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/src/app/globals.css

@@ -0,0 +1,54 @@
+@import "tailwindcss";
+
+/* Theme tokens */
+@theme {
+  --color-background: #050608;
+  --color-foreground: #E2E8F0;
+  --color-card: rgba(15, 23, 42, 0.6);
+  --color-primary: #38BDF8;
+  --color-secondary: #8B5CF6;
+  --color-muted: #94A3B8;
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-glow: rgba(56, 189, 248, 0.3);
+}
+
+body {
+  background: radial-gradient(circle at 10% 20%, rgba(13, 17, 28, 1) 0%, rgba(5, 6, 8, 1) 90%);
+  color: var(--color-foreground);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  min-height: 100vh;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(15, 23, 42, 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(148, 163, 184, 0.5);
+}
+
+/* Code blocks */
+pre {
+  background: #0B0E14 !important;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+code {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.9em;
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { motion, AnimatePresence } from 'framer-motion';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import './globals.css';
+
+const queryClient = new QueryClient();
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body className="antialiased">
+        <QueryClientProvider client={queryClient}>
+          <div className="min-h-screen flex">
+            {/* Sidebar */}
+            <Sidebar />
+
+            {/* Main Content */}
+            <main className="flex-1 flex flex-col">
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key="content"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -20 }}
+                  transition={{ duration: 0.3, ease: 'easeOut' }}
+                  className="flex-1"
+                >
+                  {children}
+                </motion.div>
+              </AnimatePresence>
+            </main>
+          </div>
+        </QueryClientProvider>
+      </body>
+    </html>
+  );
+}
+
+// Sidebar Component
+function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <motion.aside
+      initial={{ x: -100, opacity: 0 }}
+      animate={{ x: 0, opacity: 1 }}
+      transition={{ duration: 0.5, ease: 'easeOut' }}
+      className="w-64 bg-slate-900/60 backdrop-blur-xl border-r border-white/10 p-4 flex flex-col"
+    >
+      {/* Logo */}
+      <div className="flex items-center gap-3 mb-8 px-2">
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-sky-400 to-violet-500 flex items-center justify-center">
+          <span className="text-xl">🕷️</span>
+        </div>
+        <div>
+          <h1 className="font-bold text-lg bg-gradient-to-r from-sky-400 to-violet-400 bg-clip-text text-transparent">
+            Code Crawler
+          </h1>
+          <p className="text-xs text-slate-500">v2.0</p>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 space-y-2">
+        <NavItem href="/" icon="📁" label="Upload" active={pathname === '/'} />
+        <NavItem href="/chat" icon="💬" label="Chat" active={pathname === '/chat'} />
+        <NavItem href="/search" icon="🔍" label="Search" active={pathname === '/search'} />
+        <NavItem href="/refactor" icon="🔧" label="Refactor" active={pathname === '/refactor'} />
+        <NavItem href="/generate" icon="✨" label="Generate" active={pathname === '/generate'} />
+      </nav>
+
+      {/* Footer */}
+      <div className="pt-4 border-t border-white/10">
+        <div className="px-4 py-2 text-xs text-slate-500">
+          Powered by Gemini AI
+        </div>
+      </div>
+    </motion.aside>
+  );
+}
+
+function NavItem({ href, icon, label, active }: { href: string; icon: string; label: string; active: boolean }) {
+  return (
+    <Link href={href}>
+      <motion.div
+        whileHover={{ scale: 1.02, x: 4 }}
+        whileTap={{ scale: 0.98 }}
+        className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all cursor-pointer ${active
+            ? 'bg-gradient-to-r from-sky-500/20 to-violet-500/20 border border-sky-500/30'
+            : 'hover:bg-white/5'
+          }`}
+      >
+        <span className="text-lg">{icon}</span>
+        <span className={`font-medium ${active ? 'text-sky-400' : 'text-slate-300'}`}>
+          {label}
+        </span>
+      </motion.div>
+    </Link>
+  );
+}

frontend/src/app/page.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useState, useCallback } from 'react';
+import { Upload, Folder, FileCode, ArrowRight, Loader2 } from 'lucide-react';
+
+export default function HomePage() {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      handleUpload(files[0]);
+    }
+  }, []);
+
+  const handleUpload = async (file: File) => {
+    setIsUploading(true);
+
+    // Simulate progress
+    for (let i = 0; i <= 100; i += 10) {
+      await new Promise(r => setTimeout(r, 200));
+      setUploadProgress(i);
+    }
+
+    // TODO: Actually upload to backend
+    setTimeout(() => {
+      setIsUploading(false);
+      window.location.href = '/chat';
+    }, 500);
+  };
+
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center p-8">
+      {/* Hero Section */}
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        className="text-center mb-12"
+      >
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
+          className="w-24 h-24 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-sky-400 to-violet-500 flex items-center justify-center shadow-lg shadow-sky-500/30"
+        >
+          <span className="text-5xl">🕷️</span>
+        </motion.div>
+
+        <h1 className="text-4xl font-bold bg-gradient-to-r from-sky-400 to-violet-400 bg-clip-text text-transparent mb-4">
+          Code Crawler
+        </h1>
+        <p className="text-slate-400 text-lg max-w-md">
+          AI-powered codebase assistant. Upload your project and start exploring.
+        </p>
+      </motion.div>
+
+      {/* Upload Zone */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ delay: 0.3, duration: 0.5 }}
+        onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={handleDrop}
+        className={`
+          w-full max-w-2xl p-12 rounded-2xl border-2 border-dashed 
+          transition-all duration-300 cursor-pointer
+          ${isDragging
+            ? 'border-sky-400 bg-sky-500/10 scale-105'
+            : 'border-slate-600 hover:border-sky-500/50 hover:bg-slate-800/30'
+          }
+        `}
+      >
+        {isUploading ? (
+          <div className="text-center">
+            <Loader2 className="w-12 h-12 mx-auto mb-4 text-sky-400 animate-spin" />
+            <p className="text-slate-300 mb-4">Processing codebase...</p>
+            <div className="w-full bg-slate-700 rounded-full h-2">
+              <motion.div
+                className="bg-gradient-to-r from-sky-400 to-violet-500 h-2 rounded-full"
+                initial={{ width: 0 }}
+                animate={{ width: `${uploadProgress}%` }}
+                transition={{ duration: 0.3 }}
+              />
+            </div>
+            <p className="text-sm text-slate-500 mt-2">{uploadProgress}%</p>
+          </div>
+        ) : (
+          <div className="text-center">
+            <motion.div
+              animate={{ y: isDragging ? -10 : 0 }}
+              className="mb-6"
+            >
+              <Upload className="w-16 h-16 mx-auto text-slate-500" />
+            </motion.div>
+            <p className="text-xl text-slate-300 mb-2">
+              Drop your project here
+            </p>
+            <p className="text-slate-500 mb-6">
+              or click to select a ZIP file
+            </p>
+
+            <input
+              type="file"
+              accept=".zip"
+              onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])}
+              className="hidden"
+              id="file-input"
+            />
+            <label
+              htmlFor="file-input"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-sky-500 to-violet-500 rounded-xl font-semibold hover:opacity-90 transition-opacity cursor-pointer"
+            >
+              <Folder className="w-5 h-5" />
+              Browse Files
+            </label>
+          </div>
+        )}
+      </motion.div>
+
+      {/* Features */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.5 }}
+        className="mt-12 flex gap-6"
+      >
+        {[
+          { icon: '💬', label: 'Chat' },
+          { icon: '🔍', label: 'Search' },
+          { icon: '🔧', label: 'Refactor' },
+          { icon: '✨', label: 'Generate' },
+        ].map((feature, i) => (
+          <motion.div
+            key={feature.label}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.6 + i * 0.1 }}
+            className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6 text-center min-w-[100px]"
+          >
+            <span className="text-2xl mb-2 block">{feature.icon}</span>
+            <span className="text-sm text-slate-400">{feature.label}</span>
+          </motion.div>
+        ))}
+      </motion.div>
+    </div>
+  );
+}

frontend/src/app/refactor/page.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { Wrench, Play, Eye, CheckCircle, XCircle } from 'lucide-react';
+
+export default function RefactorPage() {
+    const [searchPattern, setSearchPattern] = useState('');
+    const [replacePattern, setReplacePattern] = useState('');
+    const [filePattern, setFilePattern] = useState('**/*.py');
+    const [isDryRun, setIsDryRun] = useState(true);
+    const [isRefactoring, setIsRefactoring] = useState(false);
+    const [result, setResult] = useState<any>(null);
+
+    const commonPatterns = [
+        { name: 'print → logging', search: 'print\\((.*)\\)', replace: 'logger.info(\\1)' },
+        { name: 'assertEqual → assert', search: 'assertEqual\\(([^,]+),\\s*([^)]+)\\)', replace: 'assert \\1 == \\2' },
+        { name: 'Remove trailing whitespace', search: '[ \\t]+$', replace: '' },
+    ];
+
+    const handleRefactor = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!searchPattern.trim() || !replacePattern) return;
+
+        setIsRefactoring(true);
+
+        try {
+            const response = await fetch('http://localhost:8000/api/refactor', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    search_pattern: searchPattern,
+                    replace_pattern: replacePattern,
+                    file_pattern: filePattern,
+                    dry_run: isDryRun,
+                }),
+            });
+
+            const data = await response.json();
+            setResult(data);
+        } catch (error) {
+            console.error('Refactor failed:', error);
+        } finally {
+            setIsRefactoring(false);
+        }
+    };
+
+    return (
+        <div className="flex flex-col h-screen">
+            {/* Header */}
+            <motion.header
+                initial={{ y: -20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6 m-4 mb-0"
+            >
+                <div className="flex items-center gap-3 mb-4">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-400 to-red-500 flex items-center justify-center">
+                        🔧
+                    </div>
+                    <div>
+                        <h1 className="font-bold text-lg">Refactor Mode</h1>
+                        <p className="text-sm text-slate-400">Automated code refactoring with regex</p>
+                    </div>
+                </div>
+
+                {/* Common Patterns */}
+                <div className="flex gap-2 mb-4">
+                    {commonPatterns.map((p) => (
+                        <motion.button
+                            key={p.name}
+                            whileHover={{ scale: 1.05 }}
+                            whileTap={{ scale: 0.95 }}
+                            onClick={() => {
+                                setSearchPattern(p.search);
+                                setReplacePattern(p.replace);
+                            }}
+                            className="px-3 py-1.5 bg-slate-800 rounded-lg text-sm text-slate-300 hover:bg-slate-700 transition-colors"
+                        >
+                            {p.name}
+                        </motion.button>
+                    ))}
+                </div>
+
+                {/* Form */}
+                <form onSubmit={handleRefactor} className="space-y-4">
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <label className="block text-sm text-slate-400 mb-2">Search Pattern</label>
+                            <input
+                                type="text"
+                                value={searchPattern}
+                                onChange={(e) => setSearchPattern(e.target.value)}
+                                placeholder="e.g., print\((.*)\)"
+                                className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-xl focus:border-orange-500 focus:outline-none transition-colors font-mono text-sm"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-sm text-slate-400 mb-2">Replace Pattern</label>
+                            <input
+                                type="text"
+                                value={replacePattern}
+                                onChange={(e) => setReplacePattern(e.target.value)}
+                                placeholder="e.g., logger.info(\1)"
+                                className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-xl focus:border-orange-500 focus:outline-none transition-colors font-mono text-sm"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="flex gap-4 items-end">
+                        <div className="flex-1">
+                            <label className="block text-sm text-slate-400 mb-2">File Pattern</label>
+                            <input
+                                type="text"
+                                value={filePattern}
+                                onChange={(e) => setFilePattern(e.target.value)}
+                                className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-xl focus:border-orange-500 focus:outline-none transition-colors"
+                            />
+                        </div>
+
+                        <label className="flex items-center gap-2 px-4 py-3 bg-slate-800/50 rounded-xl cursor-pointer">
+                            <input
+                                type="checkbox"
+                                checked={isDryRun}
+                                onChange={(e) => setIsDryRun(e.target.checked)}
+                                className="w-4 h-4 accent-orange-500"
+                            />
+                            <span className="text-sm text-slate-300">Dry Run</span>
+                            <Eye className="w-4 h-4 text-slate-400" />
+                        </label>
+                    </div>
+
+                    <motion.button
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                        type="submit"
+                        disabled={isRefactoring || !searchPattern.trim()}
+                        className="w-full py-3 bg-gradient-to-r from-orange-500 to-red-500 rounded-xl font-semibold flex items-center justify-center gap-2 disabled:opacity-50"
+                    >
+                        {isRefactoring ? (
+                            <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                        ) : (
+                            <>
+                                <Wrench className="w-5 h-5" />
+                                {isDryRun ? 'Preview Changes' : 'Apply Refactoring'}
+                            </>
+                        )}
+                    </motion.button>
+                </form>
+            </motion.header>
+
+            {/* Results */}
+            <div className="flex-1 overflow-y-auto p-4">
+                {result && (
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="space-y-4"
+                    >
+                        {/* Summary */}
+                        <div className={`bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6 flex items-center gap-4 ${result.success ? 'border-green-500/30' : 'border-red-500/30'
+                            }`}>
+                            {result.success ? (
+                                <CheckCircle className="w-8 h-8 text-green-400" />
+                            ) : (
+                                <XCircle className="w-8 h-8 text-red-400" />
+                            )}
+                            <div>
+                                <p className="font-semibold">
+                                    {result.success
+                                        ? `${isDryRun ? 'Preview:' : 'Applied:'} ${result.files_changed || 0} files, ${result.total_replacements || 0} replacements`
+                                        : 'Refactoring failed'
+                                    }
+                                </p>
+                                {result.error && (
+                                    <p className="text-sm text-red-400">{result.error}</p>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* Changes */}
+                        {result.changes?.map((change: any, i: number) => (
+                            <motion.div
+                                key={i}
+                                initial={{ opacity: 0, x: -20 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                transition={{ delay: i * 0.05 }}
+                                className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6"
+                            >
+                                <p className="text-sm font-medium text-slate-300 mb-2">
+                                    📄 {change.file_path} ({change.replacements} changes)
+                                </p>
+                                {change.preview && (
+                                    <pre className="text-xs overflow-x-auto">{change.preview}</pre>
+                                )}
+                            </motion.div>
+                        ))}
+                    </motion.div>
+                )}
+
+                {!result && !isRefactoring && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="flex flex-col items-center justify-center h-64 text-slate-500"
+                    >
+                        <Wrench className="w-12 h-12 mb-4 opacity-50" />
+                        <p>Configure patterns above to preview or apply refactoring</p>
+                    </motion.div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/src/app/search/page.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { motion, AnimatePresence } from 'framer-motion';
+import { useState } from 'react';
+import { Search, FileCode, ChevronDown, ChevronRight } from 'lucide-react';
+
+interface SearchResult {
+    file_path: string;
+    line_number: number;
+    line_content: string;
+    context_before: string[];
+    context_after: string[];
+}
+
+export default function SearchPage() {
+    const [pattern, setPattern] = useState('');
+    const [filePattern, setFilePattern] = useState('**/*.py');
+    const [results, setResults] = useState<SearchResult[]>([]);
+    const [isSearching, setIsSearching] = useState(false);
+    const [expandedResults, setExpandedResults] = useState<Set<number>>(new Set());
+
+    const handleSearch = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!pattern.trim()) return;
+
+        setIsSearching(true);
+
+        try {
+            const response = await fetch('http://localhost:8000/api/search', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    pattern,
+                    file_pattern: filePattern,
+                    context_lines: 2
+                }),
+            });
+
+            const data = await response.json();
+            setResults(data.results || []);
+        } catch (error) {
+            console.error('Search failed:', error);
+        } finally {
+            setIsSearching(false);
+        }
+    };
+
+    const toggleExpand = (index: number) => {
+        const newExpanded = new Set(expandedResults);
+        if (newExpanded.has(index)) {
+            newExpanded.delete(index);
+        } else {
+            newExpanded.add(index);
+        }
+        setExpandedResults(newExpanded);
+    };
+
+    return (
+        <div className="flex flex-col h-screen">
+            {/* Header */}
+            <motion.header
+                initial={{ y: -20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6 m-4 mb-0"
+            >
+                <div className="flex items-center gap-3 mb-4">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center">
+                        🔍
+                    </div>
+                    <div>
+                        <h1 className="font-bold text-lg">Search Mode</h1>
+                        <p className="text-sm text-slate-400">Find patterns across your codebase</p>
+                    </div>
+                </div>
+
+                {/* Search Form */}
+                <form onSubmit={handleSearch} className="space-y-4">
+                    <div className="flex gap-4">
+                        <div className="flex-1">
+                            <label className="block text-sm text-slate-400 mb-2">Search Pattern (regex)</label>
+                            <input
+                                type="text"
+                                value={pattern}
+                                onChange={(e) => setPattern(e.target.value)}
+                                placeholder="e.g., class\s+(\w+) or def.*login"
+                                className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-xl focus:border-sky-500 focus:outline-none transition-colors"
+                            />
+                        </div>
+                        <div className="w-48">
+                            <label className="block text-sm text-slate-400 mb-2">File Pattern</label>
+                            <input
+                                type="text"
+                                value={filePattern}
+                                onChange={(e) => setFilePattern(e.target.value)}
+                                placeholder="**/*.py"
+                                className="w-full px-4 py-3 bg-slate-800/50 border border-slate-700 rounded-xl focus:border-sky-500 focus:outline-none transition-colors"
+                            />
+                        </div>
+                    </div>
+
+                    <motion.button
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                        type="submit"
+                        disabled={isSearching || !pattern.trim()}
+                        className="w-full py-3 bg-gradient-to-r from-emerald-500 to-cyan-500 rounded-xl font-semibold flex items-center justify-center gap-2 disabled:opacity-50"
+                    >
+                        {isSearching ? (
+                            <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                        ) : (
+                            <>
+                                <Search className="w-5 h-5" />
+                                Search Codebase
+                            </>
+                        )}
+                    </motion.button>
+                </form>
+            </motion.header>
+
+            {/* Results */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-3">
+                {results.length > 0 && (
+                    <motion.p
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="text-sm text-slate-400 mb-4"
+                    >
+                        Found {results.length} matches
+                    </motion.p>
+                )}
+
+                <AnimatePresence>
+                    {results.map((result, i) => (
+                        <motion.div
+                            key={i}
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: i * 0.03 }}
+                            className="bg-slate-900/60 backdrop-blur-xl border border-white/10 rounded-2xl p-6 !p-0 overflow-hidden"
+                        >
+                            {/* Header */}
+                            <button
+                                onClick={() => toggleExpand(i)}
+                                className="w-full flex items-center gap-3 p-4 hover:bg-white/5 transition-colors"
+                            >
+                                {expandedResults.has(i) ? (
+                                    <ChevronDown className="w-4 h-4 text-slate-400" />
+                                ) : (
+                                    <ChevronRight className="w-4 h-4 text-slate-400" />
+                                )}
+                                <FileCode className="w-4 h-4 text-sky-400" />
+                                <span className="text-sm font-medium text-slate-300">
+                                    {result.file_path}
+                                </span>
+                                <span className="text-xs text-slate-500">
+                                    Line {result.line_number}
+                                </span>
+                            </button>
+
+                            {/* Code Preview */}
+                            <AnimatePresence>
+                                {expandedResults.has(i) && (
+                                    <motion.div
+                                        initial={{ height: 0, opacity: 0 }}
+                                        animate={{ height: 'auto', opacity: 1 }}
+                                        exit={{ height: 0, opacity: 0 }}
+                                        className="border-t border-slate-700"
+                                    >
+                                        <pre className="p-4 text-sm overflow-x-auto !rounded-none !border-0">
+                                            {result.context_before?.map((line, j) => (
+                                                <div key={`before-${j}`} className="text-slate-500">{line}</div>
+                                            ))}
+                                            <div className="bg-sky-500/20 text-sky-200 -mx-4 px-4 py-1 border-l-2 border-sky-400">
+                                                {result.line_content}
+                                            </div>
+                                            {result.context_after?.map((line, j) => (
+                                                <div key={`after-${j}`} className="text-slate-500">{line}</div>
+                                            ))}
+                                        </pre>
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>
+                        </motion.div>
+                    ))}
+                </AnimatePresence>
+
+                {results.length === 0 && !isSearching && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="flex flex-col items-center justify-center h-64 text-slate-500"
+                    >
+                        <Search className="w-12 h-12 mb-4 opacity-50" />
+                        <p>Enter a pattern to search your codebase</p>
+                    </motion.div>
+                )}
+            </div>
+        </div>
+    );
+}

frontend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}