Update app.py

app.py

@@ -3,8 +3,47 @@ import gradio as gr
 
 TITLE = "AppDraft"
 
-
-def slugify(value):
+STACKS = [
+    "Next.js + TypeScript",
+    "React + Vite",
+    "FastAPI + React",
+    "Flask + HTMX",
+    "Electron + React",
+    "React Native + Expo",
+    "Vue 3 + TypeScript",
+    "SvelteKit",
+]
+
+PLATFORMS = [
+    "Web app",
+    "Mobile app",
+    "Desktop app",
+    "Marketplace",
+    "SaaS dashboard",
+    "Landing page + app",
+    "Browser extension",
+    "CLI tool",
+]
+
+STYLES = [
+    "Minimal modern",
+    "Dark SaaS",
+    "Bold startup",
+    "Playful consumer",
+    "Enterprise clean",
+    "Mobile-first utility",
+    "Glassmorphism",
+    "Retro terminal",
+]
+
+AUTHS = ["Email + password", "Magic link", "OAuth (Google/GitHub)", "No auth"]
+
+DATABASES = ["PostgreSQL", "Supabase", "SQLite", "MongoDB", "Firebase", "PlanetScale", "Turso"]
+
+EXTRAS = ["Payments", "Notifications", "Admin panel", "AI features", "File uploads", "Realtime", "Search", "Analytics"]
+
+
+def slugify(value: str) -> str:
     value = (value or "my-app").strip().lower()
     out = []
     for ch in value:
@@ -19,56 +58,68 @@ def slugify(value):
 
 
 def build_pack(app_idea, stack, platform, style, auth, database, extras):
-    app_name = (app_idea or "My App").strip().split("\n")[0][:60] or "My App"
+    if not app_idea or not app_idea.strip():
+        return (
+            "## No input\n\nPlease describe your app idea in the box above.",
+            "", "", "", "", "", "", ""
+        )
+
+    app_name = app_idea.strip().split("\n")[0][:60] or "My App"
     slug = slugify(app_name)
     extras = extras or []
 
     feature_pool = [
         "Authentication and user onboarding" if auth != "No auth" else "Guest-friendly onboarding and local session flow",
         "Dashboard or home view with quick actions",
-        "Create, edit, delete core records",
+        "Create, edit, and delete core records",
         "Search, filter, and sort data",
         "Responsive mobile-friendly UI",
-        "Error, loading, and empty states",
-        "Analytics or activity history",
+        "Error, loading, and empty states throughout",
+        "Activity history and analytics",
     ]
-
     if "Payments" in extras:
         feature_pool.append("Subscriptions, billing, and checkout flow")
     if "Notifications" in extras:
-        feature_pool.append("Email or in-app notification system")
+        feature_pool.append("Email and in-app notification system")
     if "Admin panel" in extras:
         feature_pool.append("Role-based admin panel and moderation tools")
     if "AI features" in extras:
-        feature_pool.append("AI-powered generation, summarization, or recommendation flow")
+        feature_pool.append("AI-powered generation, summarization, or recommendations")
     if "File uploads" in extras:
         feature_pool.append("Secure file upload and storage pipeline")
     if "Realtime" in extras:
         feature_pool.append("Realtime collaboration or live activity updates")
+    if "Search" in extras:
+        feature_pool.append("Full-text search with filters and indexing")
+    if "Analytics" in extras:
+        feature_pool.append("Usage analytics dashboard and event tracking")
 
     pages = [
         "Landing / marketing page",
         "Sign in / sign up" if auth != "No auth" else "Welcome / guest entry",
         "Main dashboard",
-        "List view",
-        "Detail view",
-        "Create / edit form",
-        "Settings page",
+        "List view with filters",
+        "Detail / single record view",
+        "Create and edit form",
+        "User settings and profile",
     ]
-
     if "Admin panel" in extras:
-        pages.append("Admin dashboard")
+        pages.append("Admin dashboard and user management")
     if "Payments" in extras:
-        pages.append("Billing page")
+        pages.append("Billing and subscription management")
+    if "Analytics" in extras:
+        pages.append("Analytics and reporting dashboard")
 
     components = [
-        "Navbar / app shell",
+        "Navbar and app shell",
         "Sidebar or tab navigation",
-        "Hero / empty state block",
-        "Cards and data tables",
-        "Modal / drawer for quick actions",
-        "Toast / alert system",
-        "Form inputs with validation",
+        "Hero or empty state block",
+        "Data cards and tables",
+        "Modal and drawer for quick actions",
+        "Toast and alert notification system",
+        "Form inputs with validation feedback",
+        "Loading skeletons and spinners",
+        "Confirmation dialogs",
     ]
 
     tables = [
@@ -84,67 +135,52 @@ def build_pack(app_idea, stack, platform, style, auth, database, extras):
         },
         {
             "table": "items",
-            "fields": ["id", "project_id", "title", "content", "type", "created_at", "updated_at"],
+            "fields": ["id", "project_id", "title", "content", "type", "order", "created_at", "updated_at"],
         },
         {
             "table": "activity_logs",
-            "fields": ["id", "user_id", "action", "entity_type", "entity_id", "created_at"],
+            "fields": ["id", "user_id", "action", "entity_type", "entity_id", "metadata", "created_at"],
         },
     ]
-
     if "Payments" in extras:
-        tables.append(
-            {
-                "table": "subscriptions",
-                "fields": ["id", "user_id", "plan", "status", "provider_customer_id", "renewal_date"],
-            }
-        )
+        tables.append({"table": "subscriptions", "fields": ["id", "user_id", "plan", "status", "provider_customer_id", "renewal_date"]})
     if "Notifications" in extras:
-        tables.append(
-            {
-                "table": "notifications",
-                "fields": ["id", "user_id", "type", "title", "body", "read_at", "created_at"],
-            }
-        )
+        tables.append({"table": "notifications", "fields": ["id", "user_id", "type", "title", "body", "read_at", "created_at"]})
     if "File uploads" in extras:
-        tables.append(
-            {
-                "table": "files",
-                "fields": ["id", "owner_id", "project_id", "filename", "mime_type", "storage_url", "created_at"],
-            }
-        )
+        tables.append({"table": "files", "fields": ["id", "owner_id", "entity_id", "filename", "mime_type", "storage_url", "size_bytes", "created_at"]})
+    if "Analytics" in extras:
+        tables.append({"table": "events", "fields": ["id", "user_id", "event_name", "properties", "session_id", "created_at"]})
 
     endpoints = [
-        "POST /api/auth/register" if auth != "No auth" else "POST /api/session/start",
-        "POST /api/auth/login" if auth != "No auth" else "GET /api/session",
-        "GET /api/projects",
-        "POST /api/projects",
-        "GET /api/projects/:id",
-        "PUT /api/projects/:id",
+        "POST   /api/auth/register" if auth != "No auth" else "POST   /api/session/start",
+        "POST   /api/auth/login" if auth != "No auth" else "GET    /api/session",
+        "POST   /api/auth/logout" if auth != "No auth" else "",
+        "GET    /api/projects",
+        "POST   /api/projects",
+        "GET    /api/projects/:id",
+        "PUT    /api/projects/:id",
         "DELETE /api/projects/:id",
-        "GET /api/items?projectId=:id",
-        "POST /api/items",
+        "GET    /api/items?projectId=:id",
+        "POST   /api/items",
+        "PUT    /api/items/:id",
+        "DELETE /api/items/:id",
     ]
-
+    endpoints = [e for e in endpoints if e]
     if "Payments" in extras:
-        endpoints += [
-            "POST /api/billing/create-checkout-session",
-            "GET /api/billing/subscription",
-        ]
+        endpoints += ["POST   /api/billing/checkout", "GET    /api/billing/subscription", "POST   /api/billing/cancel"]
     if "Notifications" in extras:
-        endpoints += [
-            "GET /api/notifications",
-            "POST /api/notifications/mark-read",
-        ]
+        endpoints += ["GET    /api/notifications", "POST   /api/notifications/mark-read"]
     if "File uploads" in extras:
-        endpoints += [
-            "POST /api/files/upload",
-            "DELETE /api/files/:id",
-        ]
+        endpoints += ["POST   /api/files/upload", "GET    /api/files", "DELETE /api/files/:id"]
+    if "Search" in extras:
+        endpoints += ["GET    /api/search?q=:query"]
 
     folder_tree = f"""{slug}/
 ├── app/
 │   ├── components/
+│   │   ├── ui/
+│   │   ├── forms/
+│   │   └── layout/
 │   ├── pages/
 │   ├── hooks/
 │   ├── services/
@@ -157,104 +193,247 @@ def build_pack(app_idea, stack, platform, style, auth, database, extras):
 │   └── models/
 ├── database/
 │   ├── schema.sql
+│   ├── migrations/
 │   └── seed.sql
 ├── public/
+│   └── assets/
 ├── tests/
+│   ├── unit/
+│   └── integration/
 ├── .env.example
+├── .gitignore
 ├── README.md
 └── package.json"""
 
-    starter_code = f"""# {app_name}
+    starter_code = f"""# {app_name} - Starter Code
 
-## Suggested stack
+## Stack
 - Frontend: {stack}
 - Platform: {platform}
-- UI style: {style}
+- UI Style: {style}
 - Auth: {auth}
 - Database: {database}
+- Extras: {', '.join(extras) if extras else 'None'}
+
+---
 
-## Core app shell
+## App Shell
 ```tsx
-export default function AppShell() {{
+// app/layout.tsx
+export default function RootLayout({{ children }}: {{ children: React.ReactNode }}) {{
   return (
-    <main>
-      <h1>{app_name}</h1>
-      <p>Build the main workflow here.</p>
-    </main>
+    <html lang="en">
+      <body>
+        <nav className="navbar">
+          <h1>{app_name}</h1>
+        </nav>
+        <main className="main-content">
+          {{children}}
+        </main>
+      </body>
+    </html>
   );
 }}
 ```
 
-## Example API contract
+## API Service
 ```ts
-export async function getProjects() {{
-  const res = await fetch('/api/projects');
+// app/services/api.ts
+const BASE = '/api';
+
+export async function fetchProjects() {{
+  const res = await fetch(`${{BASE}}/projects`);
   if (!res.ok) throw new Error('Failed to load projects');
   return res.json();
 }}
+
+export async function createProject(data: {{ title: string; description: string }}) {{
+  const res = await fetch(`${{BASE}}/projects`, {{
+    method: 'POST',
+    headers: {{ 'Content-Type': 'application/json' }},
+    body: JSON.stringify(data),
+  }});
+  if (!res.ok) throw new Error('Failed to create project');
+  return res.json();
+}}
 ```
 
-## SQL starter
+## Database Schema
 ```sql
+-- database/schema.sql
 CREATE TABLE projects (
-  id UUID PRIMARY KEY,
-  owner_id UUID NOT NULL,
-  title TEXT NOT NULL,
+  id         UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  owner_id   UUID NOT NULL,
+  title      TEXT NOT NULL,
   description TEXT,
-  status TEXT DEFAULT 'draft',
+  status     TEXT DEFAULT 'draft',
+  created_at TIMESTAMP DEFAULT NOW(),
+  updated_at TIMESTAMP DEFAULT NOW()
+);
+
+CREATE TABLE items (
+  id         UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
+  title      TEXT NOT NULL,
+  content    TEXT,
+  type       TEXT DEFAULT 'default',
+  "order"    INT DEFAULT 0,
   created_at TIMESTAMP DEFAULT NOW(),
   updated_at TIMESTAMP DEFAULT NOW()
 );
-```"""
+```
 
-    prd = f"""# Product Brief
+## Environment Variables
+```env
+# .env.example
+DATABASE_URL=
+NEXT_PUBLIC_API_URL=
+JWT_SECRET=
+NODE_ENV=development
+```
+"""
+
+    prd = f"""# Product Requirements Document
 
 ## App Name
-{app_name}
+**{app_name}**
 
-## One-line idea
+## Idea
 {app_idea}
 
-## Target platform
+---
+
+## Target Platform
 {platform}
 
-## Tech stack
+## Tech Stack
 {stack}
 
-## Experience goal
-Create a {style.lower()} product that feels fast, clear, and easy to expand in an IDE.
+## Design Style
+{style}
+
+## Auth Strategy
+{auth}
+
+## Database
+{database}
+
+## Extra Features
+{', '.join(extras) if extras else 'None selected'}
+
+---
+
+## Experience Goal
+Build a {style.lower()} {platform.lower()} that feels fast and intuitive.
+Users should be able to get value within 60 seconds of opening the app.
+
+---
+
+## Core Features
+""" + "\n".join(f"- {item}" for item in feature_pool)
+
+    ui_plan = f"""# UI Plan
+
+## Pages ({len(pages)} total)
+""" + "\n".join(f"- {p}" for p in pages) + f"""
+
+---
 
-## Must-have features
-""" + "\n".join(f"- {item}" for item in feature_pool[:8])
+## Components ({len(components)} total)
+""" + "\n".join(f"- {c}" for c in components) + """
 
-    ui_plan = "# UI Plan\n\n## Pages\n" + "\n".join(f"- {p}" for p in pages)
-    ui_plan += "\n\n## Components\n" + "\n".join(f"- {c}" for c in components)
+---
+
+## Design Tokens
+- Use a consistent spacing scale: 4, 8, 12, 16, 24, 32, 48px
+- Font sizes: 12, 14, 16, 20, 24, 32px
+- Border radius: 4px (inputs), 8px (cards), 16px (modals)
+- Transitions: 150ms ease for hover, 250ms ease for modals
+
+## Accessibility
+- All interactive elements must be keyboard navigable
+- ARIA labels on icon-only buttons
+- Color contrast ratio minimum 4.5:1
+- Focus indicators on all inputs
+"""
 
     db_plan = "# Database Plan\n\n" + "\n\n".join(
-        f"## {t['table']}\n" + "\n".join(f"- {field}" for field in t["fields"])
+        f"## Table: `{t['table']}`\n" + "\n".join(f"- `{field}`" for field in t["fields"])
         for t in tables
-    )
+    ) + """
+
+---
+
+## Indexes to add
+- Index on `owner_id` for all user-owned tables
+- Index on `created_at` for time-sorted queries
+- Index on `status` for filtered list views
+
+## Relationships
+- projects.owner_id -> users.id
+- items.project_id -> projects.id (CASCADE DELETE)
+- activity_logs.user_id -> users.id
+"""
+
+    api_plan = "# API Routes\n\n" + "\n".join(f"- `{route}`" for route in endpoints) + """
+
+---
+
+## Auth headers
+All protected routes require:
+```
+Authorization: Bearer <token>
+```
+
+## Error format
+```json
+{
+  "error": true,
+  "message": "Human readable message",
+  "code": "ERROR_CODE"
+}
+```
+
+## Success format
+```json
+{
+  "data": {},
+  "meta": { "total": 0, "page": 1 }
+}
+```
+"""
+
+    system_prompt = f"""You are a senior full-stack engineer and product architect.
+
+Build a complete, production-ready application based on the following spec:
 
-    api_plan = "# API Routes\n\n" + "\n".join(f"- {route}" for route in endpoints)
-
-    system_prompt = f"""You are a senior product engineer and UX architect.
-Generate implementation-ready output for this app idea: {app_idea}
-Stack: {stack}
-Platform: {platform}
-Style: {style}
-Auth: {auth}
-Database: {database}
-Extras: {', '.join(extras) if extras else 'None'}
-Return:
-1. Product requirements
-2. User stories
-3. Information architecture
-4. Components
-5. Database schema
-6. API routes
-7. Folder structure
-8. Starter code
-Keep output concise, structured, and copy-paste ready."""
+APP IDEA: {app_idea}
+
+STACK:
+- Framework: {stack}
+- Platform: {platform}
+- Design style: {style}
+- Auth: {auth}
+- Database: {database}
+- Extra features: {', '.join(extras) if extras else 'None'}
+
+DELIVER THE FOLLOWING IN ORDER:
+1. Folder structure with all files listed
+2. package.json / requirements.txt with all dependencies
+3. Database schema (full SQL or ORM models)
+4. Auth implementation
+5. Core API routes with full handler code
+6. Frontend pages: layout, dashboard, list, detail, form
+7. Reusable UI components
+8. Environment variable template
+9. README with setup instructions
+
+RULES:
+- Write real, working code. No placeholders.
+- Use TypeScript where applicable.
+- Follow the {style.lower()} design system.
+- All code must be copy-paste ready into an IDE.
+- Keep files under 200 lines each."""
 
     json_export = json.dumps(
         {
@@ -269,7 +448,7 @@ Keep output concise, structured, and copy-paste ready."""
             "features": feature_pool,
             "pages": pages,
             "components": components,
-            "tables": tables,
+            "tables": [{"table": t["table"], "fields": t["fields"]} for t in tables],
             "endpoints": endpoints,
             "folder_tree": folder_tree,
         },
@@ -279,77 +458,75 @@ Keep output concise, structured, and copy-paste ready."""
     return prd, ui_plan, db_plan, api_plan, folder_tree, starter_code, system_prompt, json_export
 
 
-with gr.Blocks(title=TITLE) as demo:
-    gr.Markdown(
-        """
+WELCOME = """
 # AppDraft
-### Turn an app idea into a copy-paste build pack for your IDE.
-Describe the app once, then generate a product brief, UI plan, schema, API routes, folder structure, and starter code.
+Describe your app idea below, pick your stack and options, then hit **Generate**.
+You'll get a full build pack across 8 tabs that you can copy straight into your IDE.
+
+| Tab | What you get |
+|---|---|
+| PRD | Product requirements, goals, and feature list |
+| UI | Pages, components, and design tokens |
+| Database | Tables, fields, indexes, and relationships |
+| API | All routes with auth and error format |
+| Structure | Full folder and file tree |
+| Starter code | App shell, services, schema, env template |
+| Prompt | Paste this into any AI to generate the full app |
+| JSON | Machine-readable export of the entire spec |
 """
-    )
 
-    with gr.Row():
-        app_idea = gr.Textbox(
-            label="App idea",
-            lines=5,
-            placeholder="Example: A local service marketplace for last-minute movers with quotes, scheduling, reviews, Stripe payments, and an admin dashboard.",
-        )
 
-        with gr.Column():
-            stack = gr.Dropdown(
-                ["Next.js + TypeScript", "React + Vite", "FastAPI + React", "Flask + HTMX", "Electron + React", "React Native + Expo"],
-                value="Next.js + TypeScript",
-                label="Target stack",
-            )
-            platform = gr.Dropdown(
-                ["Web app", "Mobile app", "Desktop app", "Marketplace", "SaaS dashboard", "Landing page + app"],
-                value="Web app",
-                label="Platform",
-            )
-            style = gr.Dropdown(
-                ["Minimal modern", "Dark SaaS", "Bold startup", "Playful consumer", "Enterprise clean", "Mobile-first utility"],
-                value="Dark SaaS",
-                label="Design style",
-            )
-            auth = gr.Dropdown(
-                ["Email + password", "Magic link", "OAuth", "No auth"],
-                value="Email + password",
-                label="Auth",
-            )
-            database = gr.Dropdown(
-                ["PostgreSQL", "Supabase", "SQLite", "MongoDB", "Firebase"],
-                value="PostgreSQL",
-                label="Database",
-            )
-            extras = gr.CheckboxGroup(
-                ["Payments", "Notifications", "Admin panel", "AI features", "File uploads", "Realtime"],
-                label="Extras",
+with gr.Blocks(title=TITLE) as demo:
+    gr.Markdown(WELCOME)
+
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=1):
+            gr.Markdown("### Describe your app")
+            app_idea = gr.Textbox(
+                label="App idea",
+                lines=6,
+                placeholder="Example: A habit tracker for developers with streaks, GitHub integration, daily standups, and a public profile page.",
+                show_label=False,
             )
 
-    generate = gr.Button("Generate build pack", variant="primary")
-
-    with gr.Tabs():
-        with gr.Tab("PRD"):
-            prd = gr.Markdown()
-        with gr.Tab("UI"):
-            ui = gr.Markdown()
-        with gr.Tab("Database"):
-            db = gr.Markdown()
-        with gr.Tab("API"):
-            api = gr.Markdown()
-        with gr.Tab("Structure"):
-            tree = gr.Textbox(lines=16, label="Folder structure")
-        with gr.Tab("Starter code"):
-            starter = gr.Markdown()
-        with gr.Tab("Prompt"):
-            prompt = gr.Code(language="markdown")
-        with gr.Tab("JSON"):
-            export_json = gr.Code(language="json")
+            gr.Markdown("### Stack and options")
+            stack = gr.Dropdown(STACKS, value="Next.js + TypeScript", label="Target stack")
+            platform = gr.Dropdown(PLATFORMS, value="Web app", label="Platform")
+            style = gr.Dropdown(STYLES, value="Dark SaaS", label="Design style")
+            auth = gr.Dropdown(AUTHS, value="Email + password", label="Auth")
+            database = gr.Dropdown(DATABASES, value="PostgreSQL", label="Database")
+
+            gr.Markdown("### Extra features")
+            extras = gr.CheckboxGroup(EXTRAS, label="", value=[])
+
+            generate = gr.Button("Generate build pack", variant="primary", size="lg")
+
+        with gr.Column(scale=2):
+            gr.Markdown("### Your build pack")
+            with gr.Tabs():
+                with gr.Tab("PRD"):
+                    prd_out = gr.Markdown(value="*Fill in the form and click Generate to build your pack.*")
+                with gr.Tab("UI"):
+                    ui_out = gr.Markdown()
+                with gr.Tab("Database"):
+                    db_out = gr.Markdown()
+                with gr.Tab("API"):
+                    api_out = gr.Markdown()
+                with gr.Tab("Structure"):
+                    tree_out = gr.Textbox(lines=20, label="Folder tree", show_copy_button=True)
+                with gr.Tab("Starter code"):
+                    starter_out = gr.Markdown()
+                with gr.Tab("Prompt"):
+                    prompt_out = gr.Code(language="markdown", label="Copy this prompt into any AI")
+                with gr.Tab("JSON"):
+                    json_out = gr.Code(language="json", label="Full spec export")
 
     generate.click(
         fn=build_pack,
         inputs=[app_idea, stack, platform, style, auth, database, extras],
-        outputs=[prd, ui, db, api, tree, starter, prompt, export_json],
+        outputs=[prd_out, ui_out, db_out, api_out, tree_out, starter_out, prompt_out, json_out],
     )
 
-demo.launch()
+
+if __name__ == "__main__":
+    demo.launch()