Reupload OmniDev clean version

components/new/scaffold.tsx

@@ -5,19 +5,54 @@ import { useAi } from "@/hooks/useAi";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { toast } from "sonner";
+import { NEW_STACKS, NewStackId } from "@/lib/new-stacks";
+import { HERO_STYLES } from "@/lib/hero-presets";
 
-const DEFAULT_INSTRUCTION = `Initialize a complete full-stack web project with the following structure and runnable code:
+function buildInstruction(stack: NewStackId, lang: "js" | "ts", hero: string, title?: string) {
+  const jsOrTs = lang === 'ts' ? 'TypeScript' : 'JavaScript';
+  const reactEntry = lang === 'ts' ? "/frontend/src/main.tsx and /frontend/src/App.tsx" : "/frontend/src/main.jsx and /frontend/src/App.jsx";
+
+  switch (stack) {
+    case 'express-react':
+      return `Initialize a complete full-stack web project with the following structure and runnable code.
+
+Title: ${title || 'OmniDev Full-Stack App'}
 
 Requirements:
-- Frontend under /frontend using React + Vite (JavaScript), TailwindCSS preconfigured.
-- Backend under /backend using Express (JavaScript, ESM), with basic routes (GET /, GET /health) and CORS enabled.
-- Add a minimal README.md at root.
+- Frontend under /frontend using React + Vite (${jsOrTs}), TailwindCSS preconfigured.
+- Backend under /backend using Express (${jsOrTs}, ESM), with basic routes (GET /, GET /health) and CORS enabled.
+- Use a Hero section with style: ${hero}. Keep it performant and accessible.
+- Add a minimal README.md at root with start instructions.
 - Provide package.json in both /frontend and /backend with scripts to start dev/prod.
-- Provide /frontend/index.html and /frontend/src/main.jsx, /frontend/src/App.jsx.
-- Provide /backend/server.js.
+- Provide /frontend/index.html and ${reactEntry}.
+- Provide /backend/server.${lang === 'ts' ? 'ts' : 'js'}.
 - Use ports 5173 for frontend and 3000 for backend.
 - Keep everything simple and runnable.
-- Return JSON strictly as file updates (no markdown), paths rooted from repo, e.g. /frontend/..., /backend/...`;
+- Return STRICT JSON ONLY as file updates (no markdown), paths rooted from repo (e.g., /frontend/..., /backend/...).`;
+    case 'nextjs':
+      return `Scaffold a full-stack Next.js 15 App Router project.
+
+Title: ${title || 'OmniDev Next App'}
+
+Requirements:
+- Next.js (${jsOrTs}), App Router, TailwindCSS.
+- Implement a landing page with a Hero section style: ${hero}.
+- Add /api/health route that returns { ok: true }.
+- Provide package.json with dev/build scripts.
+- Keep it simple and runnable with \'next dev\'.
+- Return STRICT JSON ONLY as file updates (no markdown), paths rooted from repo (e.g., /app/page.${lang === 'ts' ? 'tsx' : 'jsx'}, /app/api/health/route.${lang === 'ts' ? 'ts' : 'js'}).`;
+    case 'nestjs-react':
+      return `Initialize a NestJS backend and React (Vite) frontend.
+
+Title: ${title || 'OmniDev Nest + React'}
+
+Requirements:
+- Backend under /backend using NestJS (${jsOrTs}). Generate AppModule, AppController with GET / and GET /health. Enable CORS.
+- Frontend under /frontend using React + Vite (${jsOrTs}), TailwindCSS with a modern Hero section style: ${hero}.
+- Provide package.json in both apps with start/build scripts.
+- Return STRICT JSON ONLY as file updates (no markdown), paths rooted from repo.`;
+  }
+}
 
 export default function ScaffoldNew() {
   const { user, openLoginWindow } = useUser();
@@ -26,6 +61,10 @@ export default function ScaffoldNew() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [logs, setLogs] = useState<string[]>([]);
+  const [stack, setStack] = useState<NewStackId>("express-react");
+  const [lang, setLang] = useState<"js" | "ts">("js");
+  const [hero, setHero] = useState<string>(HERO_STYLES[0].id);
+  const [title, setTitle] = useState<string>("");
 
   async function runScaffold() {
     if (!user) {
@@ -37,14 +76,15 @@ export default function ScaffoldNew() {
     setLogs(["Starting scaffold via Augment..."]);
     try {
       // 1) Call augment to generate full-stack files
+      const instruction = buildInstruction(stack, lang, hero, title);
       const aug = await fetch('/api/augment', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           context: '/ (empty project)',
-          instruction: DEFAULT_INSTRUCTION,
-          language: 'javascript',
-          framework: 'express-react',
+          instruction,
+          language: lang === 'ts' ? 'typescript' : 'javascript',
+          framework: stack,
           response_type: 'file_updates',
           model,
           provider,
@@ -56,11 +96,10 @@ export default function ScaffoldNew() {
       setLogs(prev => [...prev, `Augment produced ${aug.files.length} files`]);
 
       // 2) Create space with initial files
-      const title = 'OmniDev Full-Stack Project';
       const created = await fetch('/api/me/projects', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title, initialFiles: aug.files.map((f: any) => ({ path: f.path, content: f.content })) })
+        body: JSON.stringify({ title: title || 'OmniDev Project', initialFiles: aug.files.map((f: any) => ({ path: f.path, content: f.content })) })
       }).then(r => r.json());
       if (!created?.space?.project?.space_id) {
         throw new Error(created?.error || 'Failed to create project');
@@ -75,24 +114,49 @@ export default function ScaffoldNew() {
     }
   }
 
-  useEffect(() => {
-    // Auto-run once when visiting /new
-    runScaffold();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  // Removed auto-run; wait for user selection
 
   return (
-    <section className="max-w-2xl mx-auto p-6 text-neutral-200">
-      <h1 className="text-2xl font-semibold mb-2">Initializing Full-Stack Project...</h1>
-      <p className="text-sm text-neutral-400 mb-4">OmniDev is generating a complete frontend + backend project. This may take a moment.</p>
-      {error && <p className="text-red-400 text-sm mb-2">{error}</p>}
-      <ul className="text-sm text-neutral-400 space-y-1">
+    <section className="max-w-3xl mx-auto p-6 text-neutral-200">
+      <h1 className="text-2xl font-semibold mb-1">Create New Project</h1>
+      <p className="text-sm text-neutral-400 mb-4">Choose your stack and hero style, then OmniDev will scaffold a complete project.</p>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="text-sm block mb-1">Project Title</label>
+          <input className="w-full bg-neutral-800 rounded p-2 text-sm" placeholder="OmniDev Project" value={title} onChange={(e) => setTitle(e.target.value)} />
+        </div>
+        <div>
+          <label className="text-sm block mb-1">Language</label>
+          <select className="w-full bg-neutral-800 rounded p-2 text-sm" value={lang} onChange={(e) => setLang(e.target.value as any)}>
+            <option value="js">JavaScript</option>
+            <option value="ts">TypeScript</option>
+          </select>
+        </div>
+        <div>
+          <label className="text-sm block mb-1">Stack</label>
+          <select className="w-full bg-neutral-800 rounded p-2 text-sm" value={stack} onChange={(e) => setStack(e.target.value as NewStackId)}>
+            {NEW_STACKS.map(s => (
+              <option key={s.id} value={s.id}>{s.label}</option>
+            ))}
+          </select>
+          <p className="text-xs text-neutral-500 mt-1">{NEW_STACKS.find(s => s.id === stack)?.description}</p>
+        </div>
+        <div>
+          <label className="text-sm block mb-1">Hero Style</label>
+          <select className="w-full bg-neutral-800 rounded p-2 text-sm" value={hero} onChange={(e) => setHero(e.target.value)}>
+            {HERO_STYLES.map(h => (
+              <option key={h.id} value={h.id}>{h.label}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+      {error && <p className="text-red-400 text-sm mt-3">{error}</p>}
+      <ul className="text-sm text-neutral-400 space-y-1 mt-3">
         {logs.map((l, i) => (<li key={i}>• {l}</li>))}
       </ul>
-      <div className="mt-4">
-        <Button size="sm" onClick={runScaffold} disabled={loading}>{loading ? 'Working...' : 'Retry'}</Button>
+      <div className="mt-5">
+        <Button size="sm" onClick={runScaffold} disabled={loading}>{loading ? 'Working...' : 'Create Project'}</Button>
       </div>
     </section>
   );
 }
-

lib/hero-presets.ts

@@ -0,0 +1,15 @@
+export const HERO_STYLES = [
+  { id: "animated-gradient", label: "Animated Gradient" },
+  { id: "particles", label: "Particles" },
+  { id: "waves", label: "Waves" },
+  { id: "noise", label: "Noise Overlay" },
+  { id: "parallax", label: "Parallax Layers" },
+  { id: "vanta-globe", label: "Vanta Globe" },
+  { id: "morphing-blobs", label: "Morphing Blobs" },
+  { id: "rays", label: "Rays / Aurora" },
+  { id: "grid", label: "Animated Grid" },
+  { id: "shapes", label: "Floating Shapes" },
+  { id: "lines", label: "Moving Lines" },
+  { id: "orbits", label: "Orbits" },
+];
+

lib/new-stacks.ts

@@ -0,0 +1,30 @@
+export type NewStackId = "express-react" | "nextjs" | "nestjs-react";
+
+export interface NewStack {
+  id: NewStackId;
+  label: string;
+  description: string;
+  frameworkHint: string; // sent to /api/augment as framework
+}
+
+export const NEW_STACKS: NewStack[] = [
+  {
+    id: "express-react",
+    label: "Express + React (Vite)",
+    description: "React (Vite + Tailwind) for frontend and Express (ESM) for backend.",
+    frameworkHint: "express-react",
+  },
+  {
+    id: "nextjs",
+    label: "Next.js (App Router)",
+    description: "Full-stack Next.js 15 (App Router) with Tailwind and an /api route.",
+    frameworkHint: "nextjs",
+  },
+  {
+    id: "nestjs-react",
+    label: "NestJS + React",
+    description: "NestJS backend + React (Vite + Tailwind) frontend.",
+    frameworkHint: "nestjs-react",
+  },
+];
+