onFileSelect(node)}
+ onContextMenu={(e) => handleContextMenu(e, node)}
+ >
+ {getFileIcon(node.name)}
+ {isRenaming ? (
+ setNewName(e.target.value)}
+ onBlur={() => handleRename(node)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') handleRename(node)
+ if (e.key === 'Escape') {
+ setRenamingFile(null)
+ setNewName('')
+ }
+ }}
+ className="flex-1 bg-zinc-700 text-sm px-1 rounded outline-none border border-blue-500"
+ autoFocus
+ />
+ ) : (
+ {node.name}
+ )}
+
+
+ )
+ })
+ }
+
+ return (
+
+ {/* Search */}
+
+
+
+ setSearchQuery(e.target.value)}
+ placeholder="Search files..."
+ className="w-full bg-zinc-700/50 border border-zinc-600 rounded-lg pl-8 pr-8 py-1.5 text-sm text-white placeholder:text-zinc-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+ />
+ {searchQuery && (
+
+ )}
+
+
+
+ {/* Filters */}
+
+
+ {fileFilters.map((filter) => (
+
+ ))}
+
+
+ {/* File Tree */}
+
+ {filteredFiles.length === 0 ? (
+
+ ) : (
+ renderFileTree(filteredFiles)
+ )}
+
+
+ {/* Context Menu */}
+ {contextMenu && (
+ <>
+
setContextMenu(null)}
+ />
+
+ {onFileRename && (
+
+ )}
+ {onFileCopy && (
+
+ )}
+ {onFileDownload && (
+
+ )}
+ {onFileDelete && (
+ <>
+
+
+
+ )}
+
+
+ )}
+
+ )
+}
+
+export default EnhancedFileExplorer
diff --git a/apps/vibe-coding-platform/components/templates/template-picker.tsx b/apps/vibe-coding-platform/components/templates/template-picker.tsx
new file mode 100644
index 0000000000..8456ade4a0
--- /dev/null
+++ b/apps/vibe-coding-platform/components/templates/template-picker.tsx
@@ -0,0 +1,255 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+ Layout,
+ Server,
+ Smartphone,
+ Database,
+ Bot,
+ ShoppingCart,
+ FileCode2,
+ Sparkles,
+ Loader2,
+ X,
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+interface Template {
+ id: string
+ name: string
+ description: string
+ icon: React.ElementType
+ category: string
+ prompt: string
+ color: string
+}
+
+const TEMPLATES: Template[] = [
+ {
+ id: 'nextjs-app',
+ name: 'Next.js App',
+ description: 'Full-stack React application with App Router, TypeScript, and Tailwind CSS',
+ icon: Layout,
+ category: 'framework',
+ prompt: 'Create a Next.js 14 application with App Router, TypeScript, Tailwind CSS, and a modern dashboard layout',
+ color: 'bg-zinc-700',
+ },
+ {
+ id: 'react-spa',
+ name: 'React SPA',
+ description: 'Single page application with React, Vite, and React Router',
+ icon: FileCode2,
+ category: 'framework',
+ prompt: 'Create a React single page application with Vite, React Router, TypeScript, and Tailwind CSS',
+ color: 'bg-cyan-500',
+ },
+ {
+ id: 'api-server',
+ name: 'API Server',
+ description: 'REST API with Express.js, TypeScript, and OpenAPI documentation',
+ icon: Server,
+ category: 'backend',
+ prompt: 'Create a REST API server with Express.js, TypeScript, Zod validation, and OpenAPI/Swagger documentation',
+ color: 'bg-green-500',
+ },
+ {
+ id: 'mobile-app',
+ name: 'React Native',
+ description: 'Cross-platform mobile app with Expo and React Native',
+ icon: Smartphone,
+ category: 'mobile',
+ prompt: 'Create a React Native mobile app with Expo, TypeScript, and navigation',
+ color: 'bg-purple-500',
+ },
+ {
+ id: 'database-app',
+ name: 'Full-Stack CRUD',
+ description: 'Complete CRUD application with database, API, and frontend',
+ icon: Database,
+ category: 'fullstack',
+ prompt: 'Create a full-stack CRUD application with Next.js, Prisma, SQLite, and a complete admin dashboard',
+ color: 'bg-orange-500',
+ },
+ {
+ id: 'chatbot',
+ name: 'AI Chatbot',
+ description: 'AI-powered chatbot with streaming responses',
+ icon: Bot,
+ category: 'ai',
+ prompt: 'Create an AI chatbot application with Next.js, Vercel AI SDK, and a beautiful chat interface',
+ color: 'bg-pink-500',
+ },
+ {
+ id: 'ecommerce',
+ name: 'E-commerce',
+ description: 'Online store with product catalog and shopping cart',
+ icon: ShoppingCart,
+ category: 'fullstack',
+ prompt: 'Create an e-commerce website with Next.js, product listings, shopping cart, and checkout flow',
+ color: 'bg-yellow-500',
+ },
+ {
+ id: 'ai-generated',
+ name: 'AI Decides',
+ description: 'Let AI analyze your needs and suggest the best stack',
+ icon: Sparkles,
+ category: 'ai',
+ prompt: 'Analyze my requirements and create the most appropriate project structure',
+ color: 'bg-gradient-to-r from-purple-500 to-pink-500',
+ },
+]
+
+interface TemplatePickerProps {
+ isOpen: boolean
+ onClose: () => void
+ onSelect?: (template: Template) => void
+}
+
+export function TemplatePicker({ isOpen, onClose, onSelect }: TemplatePickerProps) {
+ const router = useRouter()
+ const [selectedCategory, setSelectedCategory] = useState
(null)
+ const [isCreating, setIsCreating] = useState(false)
+ const [selectedTemplate, setSelectedTemplate] = useState(null)
+
+ const categories = [
+ { id: null, name: 'All' },
+ { id: 'framework', name: 'Frameworks' },
+ { id: 'backend', name: 'Backend' },
+ { id: 'fullstack', name: 'Full-Stack' },
+ { id: 'mobile', name: 'Mobile' },
+ { id: 'ai', name: 'AI' },
+ ]
+
+ const filteredTemplates = selectedCategory
+ ? TEMPLATES.filter((t) => t.category === selectedCategory)
+ : TEMPLATES
+
+ const handleSelectTemplate = async (template: Template) => {
+ if (onSelect) {
+ onSelect(template)
+ onClose()
+ return
+ }
+
+ setSelectedTemplate(template)
+ setIsCreating(true)
+
+ try {
+ const response = await fetch('/api/projects', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ name: `${template.name} Project`,
+ description: template.description,
+ template: template.id,
+ }),
+ })
+
+ if (response.ok) {
+ const { project } = await response.json()
+ router.push(`/?project=${project.id}&prompt=${encodeURIComponent(template.prompt)}`)
+ }
+ } catch (error) {
+ console.error('Failed to create project:', error)
+ } finally {
+ setIsCreating(false)
+ setSelectedTemplate(null)
+ onClose()
+ }
+ }
+
+ if (!isOpen) return null
+
+ return (
+
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ {/* Header */}
+
+
+
Choose a Template
+
+ Start with a pre-configured project template
+
+
+
+
+
+ {/* Categories */}
+
+ {categories.map((category) => (
+
+ ))}
+
+
+ {/* Templates Grid */}
+
+
+ {filteredTemplates.map((template) => (
+
+ ))}
+
+
+
+ {/* Footer */}
+
+
+ Or start from scratch in the editor
+
+
+
+
+