chore: formatting the code of recent changes

2024-11-29 13:05:35 -05:00
parent fbc56dc7fd
commit 5af35f6920
13 changed files with 956 additions and 911 deletions
--- a/frontend/app/api/ai/route.ts
+++ b/frontend/app/api/ai/route.ts
@ -43,42 +43,45 @@ export async function POST(request: Request) {
    const userData = await dbUser.json()

    // Get tier settings
-    const tierSettings = TIERS[userData.tier as keyof typeof TIERS] || TIERS.FREE
+    const tierSettings =
+      TIERS[userData.tier as keyof typeof TIERS] || TIERS.FREE
    if (userData.generations >= tierSettings.generations) {
      return new Response(
-        `AI generation limit reached for your ${userData.tier || "FREE"} tier`, 
+        `AI generation limit reached for your ${userData.tier || "FREE"} tier`,
        { status: 429 }
      )
    }

-    const { 
-      messages, 
-      context, 
-      activeFileContent, 
+    const {
+      messages,
+      context,
+      activeFileContent,
      isEditMode,
      fileName,
      line,
-      templateType 
+      templateType,
    } = await request.json()

    // Get template configuration
    const templateConfig = templateConfigs[templateType]

    // Create template context
-    const templateContext = templateConfig ? `
+    const templateContext = templateConfig
+      ? `
 Project Template: ${templateConfig.name}

 File Structure:
 ${Object.entries(templateConfig.fileStructure)
  .map(([path, info]) => `${path} - ${info.description}`)
-  .join('\n')}
+  .join("\n")}

 Conventions:
-${templateConfig.conventions.join('\n')}
+${templateConfig.conventions.join("\n")}

 Dependencies:
 ${JSON.stringify(templateConfig.dependencies, null, 2)}
-` : ''
+`
+      : ""

    // Create system message based on mode
    let systemMessage
@ -146,7 +149,10 @@ ${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ""}`
      new ReadableStream({
        async start(controller) {
          for await (const chunk of stream) {
-            if (chunk.type === "content_block_delta" && chunk.delta.type === "text_delta") {
+            if (
+              chunk.type === "content_block_delta" &&
+              chunk.delta.type === "text_delta"
+            ) {
              controller.enqueue(encoder.encode(chunk.delta.text))
            }
          }
@ -164,8 +170,8 @@ ${activeFileContent ? `Active File Content:\n${activeFileContent}\n` : ""}`
  } catch (error) {
    console.error("AI generation error:", error)
    return new Response(
-      error instanceof Error ? error.message : "Internal Server Error", 
+      error instanceof Error ? error.message : "Internal Server Error",
      { status: 500 }
    )
  }
-}
+}
--- a/frontend/app/api/user/upgrade-tier/route.ts
+++ b/frontend/app/api/user/upgrade-tier/route.ts
@ -8,9 +8,9 @@ export async function POST(request: Request) {
    }

    const { tier } = await request.json()
-    
+
    // handle payment processing here
-        
+
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user/update-tier`,
      {
@ -39,4 +39,4 @@ export async function POST(request: Request) {
      { status: 500 }
    )
  }
-}
+}
--- a/frontend/components/editor/AIChat/index.tsx
+++ b/frontend/components/editor/AIChat/index.tsx
@ -53,7 +53,7 @@ export default function AIChat({
  // scroll to bottom of chat when messages change
  const scrollToBottom = (force: boolean = false) => {
    if (!chatContainerRef.current || (!autoScroll && !force)) return
-    
+
    chatContainerRef.current.scrollTo({
      top: chatContainerRef.current.scrollHeight,
      behavior: force ? "smooth" : "auto",
@ -63,10 +63,10 @@ export default function AIChat({
  // function to handle scroll events
  const handleScroll = () => {
    if (!chatContainerRef.current) return
-    
+
    const { scrollTop, scrollHeight, clientHeight } = chatContainerRef.current
    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 50
-    
+
    setAutoScroll(isAtBottom)
    setShowScrollButton(!isAtBottom)
  }
@ -75,8 +75,8 @@ export default function AIChat({
  useEffect(() => {
    const container = chatContainerRef.current
    if (container) {
-      container.addEventListener('scroll', handleScroll)
-      return () => container.removeEventListener('scroll', handleScroll)
+      container.addEventListener("scroll", handleScroll)
+      return () => container.removeEventListener("scroll", handleScroll)
    }
  }, [])

@ -200,7 +200,7 @@ export default function AIChat({
          />
        ))}
        {isLoading && <LoadingDots />}
-        
+
        {/* Add scroll to bottom button */}
        {showScrollButton && (
          <button
--- a/frontend/components/editor/AIChat/lib/chatUtils.ts
+++ b/frontend/components/editor/AIChat/lib/chatUtils.ts
@ -131,22 +131,20 @@ export const handleSend = async (
    }))

    // Fetch AI response for chat message component
-    const response = await fetch("/api/ai", 
-    {
+    const response = await fetch("/api/ai", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          messages: anthropicMessages,
-          context: context || undefined,
-          activeFileContent: activeFileContent,
-          isEditMode: isEditMode,
-          templateType: templateType,
-        }),
-        signal: abortControllerRef.current.signal,
-      }
-    )
+      },
+      body: JSON.stringify({
+        messages: anthropicMessages,
+        context: context || undefined,
+        activeFileContent: activeFileContent,
+        isEditMode: isEditMode,
+        templateType: templateType,
+      }),
+      signal: abortControllerRef.current.signal,
+    })

    // Throw error if response is not ok
    if (!response.ok) {
@ -201,7 +199,8 @@ export const handleSend = async (
      console.error("Error fetching AI response:", error)
      const errorMessage = {
        role: "assistant" as const,
-        content: error.message || "Sorry, I encountered an error. Please try again.",
+        content:
+          error.message || "Sorry, I encountered an error. Please try again.",
      }
      setMessages((prev) => [...prev, errorMessage])
    }
--- a/frontend/components/editor/generate.tsx
+++ b/frontend/components/editor/generate.tsx
@ -66,15 +66,17 @@ export default function GenerateInput({
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
-          messages: [{
-            role: "user",
-            content: regenerate ? currentPrompt : input
-          }],
+          messages: [
+            {
+              role: "user",
+              content: regenerate ? currentPrompt : input,
+            },
+          ],
          context: null,
          activeFileContent: data.code,
          isEditMode: true,
          fileName: data.fileName,
-          line: data.line
+          line: data.line,
        }),
      })

--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@ -1087,62 +1087,62 @@ export default function CodeEditor({
                      </div>
                    </>
                  ) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643
-                    clerk.loaded ? (
-                      <>
-                        {/* {provider && userInfo ? (
+                  clerk.loaded ? (
+                    <>
+                      {/* {provider && userInfo ? (
                          <Cursors yProvider={provider} userInfo={userInfo} />
                        ) : null} */}
-                        <Editor
-                          height="100%"
-                          language={editorLanguage}
-                          beforeMount={handleEditorWillMount}
-                          onMount={handleEditorMount}
-                          onChange={(value) => {
-                            // If the new content is different from the cached content, update it
-                            if (value !== fileContents[activeFileId]) {
-                              setActiveFileContent(value ?? "") // Update the active file content
-                              // Mark the file as unsaved by setting 'saved' to false
-                              setTabs((prev) =>
-                                prev.map((tab) =>
-                                  tab.id === activeFileId
-                                    ? { ...tab, saved: false }
-                                    : tab
-                                )
+                      <Editor
+                        height="100%"
+                        language={editorLanguage}
+                        beforeMount={handleEditorWillMount}
+                        onMount={handleEditorMount}
+                        onChange={(value) => {
+                          // If the new content is different from the cached content, update it
+                          if (value !== fileContents[activeFileId]) {
+                            setActiveFileContent(value ?? "") // Update the active file content
+                            // Mark the file as unsaved by setting 'saved' to false
+                            setTabs((prev) =>
+                              prev.map((tab) =>
+                                tab.id === activeFileId
+                                  ? { ...tab, saved: false }
+                                  : tab
                              )
-                            } else {
-                              // If the content matches the cached content, mark the file as saved
-                              setTabs((prev) =>
-                                prev.map((tab) =>
-                                  tab.id === activeFileId
-                                    ? { ...tab, saved: true }
-                                    : tab
-                                )
+                            )
+                          } else {
+                            // If the content matches the cached content, mark the file as saved
+                            setTabs((prev) =>
+                              prev.map((tab) =>
+                                tab.id === activeFileId
+                                  ? { ...tab, saved: true }
+                                  : tab
                              )
-                            }
-                          }}
-                          options={{
-                            tabSize: 2,
-                            minimap: {
-                              enabled: false,
-                            },
-                            padding: {
-                              bottom: 4,
-                              top: 4,
-                            },
-                            scrollBeyondLastLine: false,
-                            fixedOverflowWidgets: true,
-                            fontFamily: "var(--font-geist-mono)",
-                          }}
-                          theme={theme === "light" ? "vs" : "vs-dark"}
-                          value={activeFileContent}
-                        />
-                      </>
-                    ) : (
-                      <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
-                        <Loader2 className="animate-spin w-6 h-6 mr-3" />
-                        Waiting for Clerk to load...
-                      </div>
-                    )}
+                            )
+                          }
+                        }}
+                        options={{
+                          tabSize: 2,
+                          minimap: {
+                            enabled: false,
+                          },
+                          padding: {
+                            bottom: 4,
+                            top: 4,
+                          },
+                          scrollBeyondLastLine: false,
+                          fixedOverflowWidgets: true,
+                          fontFamily: "var(--font-geist-mono)",
+                        }}
+                        theme={theme === "light" ? "vs" : "vs-dark"}
+                        value={activeFileContent}
+                      />
+                    </>
+                  ) : (
+                    <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
+                      <Loader2 className="animate-spin w-6 h-6 mr-3" />
+                      Waiting for Clerk to load...
+                    </div>
+                  )}
                </div>
              </ResizablePanel>
              <ResizableHandle />
--- a/frontend/components/profile/index.tsx
+++ b/frontend/components/profile/index.tsx
@ -231,7 +231,10 @@ function ProfileCard({
            <div className="flex flex-col items-center gap-2">
              <p className="text-xs text-muted-foreground">{joinedAt}</p>
              {typeof generations === "number" && (
-                <SubscriptionBadge generations={generations} tier={tier as keyof typeof TIERS} />
+                <SubscriptionBadge
+                  generations={generations}
+                  tier={tier as keyof typeof TIERS}
+                />
              )}
            </div>
          </>
@ -445,7 +448,13 @@ const StatsItem = ({ icon: Icon, label }: StatsItemProps) => (
 // #endregion

 // #region Sub Badge
-const SubscriptionBadge = ({ generations, tier = "FREE" }: { generations: number, tier?: keyof typeof TIERS }) => {
+const SubscriptionBadge = ({
+  generations,
+  tier = "FREE",
+}: {
+  generations: number
+  tier?: keyof typeof TIERS
+}) => {
  return (
    <div className="flex gap-2 items-center">
      <Badge variant="secondary" className="text-sm cursor-pointer">
--- a/frontend/components/ui/userButton.tsx
+++ b/frontend/components/ui/userButton.tsx
@ -10,7 +10,7 @@ import {
 import { User } from "@/lib/types"
 import { useClerk } from "@clerk/nextjs"
 import {
-    Crown,
+  Crown,
  LayoutDashboard,
  LogOut,
  Sparkles,
@ -43,7 +43,11 @@ const TIER_INFO = {
  },
 } as const

-export default function UserButton({ userData: initialUserData }: { userData: User }) {
+export default function UserButton({
+  userData: initialUserData,
+}: {
+  userData: User
+}) {
  const [userData, setUserData] = useState<User>(initialUserData)
  const [isOpen, setIsOpen] = useState(false)
  const { signOut } = useClerk()
@ -57,7 +61,7 @@ export default function UserButton({ userData: initialUserData }: { userData: Us
          headers: {
            Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
          },
-          cache: 'no-store'
+          cache: "no-store",
        }
      )
      if (res.ok) {
@ -75,9 +79,12 @@ export default function UserButton({ userData: initialUserData }: { userData: Us
    }
  }, [isOpen])

-  const tierInfo = TIER_INFO[userData.tier as keyof typeof TIER_INFO] || TIER_INFO.FREE
+  const tierInfo =
+    TIER_INFO[userData.tier as keyof typeof TIER_INFO] || TIER_INFO.FREE
  const TierIcon = tierInfo.icon
-  const usagePercentage = Math.floor((userData.generations || 0) * 100 / tierInfo.limit)
+  const usagePercentage = Math.floor(
+    ((userData.generations || 0) * 100) / tierInfo.limit
+  )

  const handleUpgrade = async () => {
    router.push(`/@${userData.username}`)
@ -98,7 +105,6 @@ export default function UserButton({ userData: initialUserData }: { userData: Us

        <DropdownMenuSeparator />

-
        <DropdownMenuItem className="cursor-pointer" asChild>
          <Link href={"/dashboard"}>
            <LayoutDashboard className="mr-2 size-4" />
@ -114,12 +120,13 @@ export default function UserButton({ userData: initialUserData }: { userData: Us
        </DropdownMenuItem>
        <DropdownMenuSeparator />

-
        <div className="py-1.5 px-2 w-full">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1.5">
              <TierIcon className={`h-4 w-4 ${tierInfo.color}`} />
-              <span className="text-sm font-medium">{userData.tier || "FREE"} Plan</span>
+              <span className="text-sm font-medium">
+                {userData.tier || "FREE"} Plan
+              </span>
            </div>
            {(userData.tier === "FREE" || userData.tier === "PRO") && (
              <Button
@ -139,16 +146,20 @@ export default function UserButton({ userData: initialUserData }: { userData: Us
          <div className="w-full">
            <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
              <span>AI Usage</span>
-              <span>{userData.generations}/{tierInfo.limit}</span>
+              <span>
+                {userData.generations}/{tierInfo.limit}
+              </span>
            </div>

-            <div className="rounded-full w-full h-2 overflow-hidden bg-secondary mb-1">  
+            <div className="rounded-full w-full h-2 overflow-hidden bg-secondary mb-1">
              <div
                className={`h-full rounded-full transition-all duration-300 ${
-                usagePercentage > 90 ? 'bg-red-500' : 
-                usagePercentage > 75 ? 'bg-yellow-500' : 
-                tierInfo.color.replace('text-', 'bg-')
-              }`}
+                  usagePercentage > 90
+                    ? "bg-red-500"
+                    : usagePercentage > 75
+                    ? "bg-yellow-500"
+                    : tierInfo.color.replace("text-", "bg-")
+                }`}
                style={{
                  width: `${Math.min(usagePercentage, 100)}%`,
                }}
@ -173,4 +184,3 @@ export default function UserButton({ userData: initialUserData }: { userData: Us
    </DropdownMenu>
  )
 }
-
--- a/frontend/lib/data/index.ts
+++ b/frontend/lib/data/index.ts
@ -38,6 +38,6 @@ export const projectTemplates: {
    name: "PHP",
    description: "PHP development environment",
    icon: "/project-icons/php.svg",
-    disabled: false
+    disabled: false,
  },
 ]
--- a/frontend/lib/templates/index.ts
+++ b/frontend/lib/templates/index.ts
@ -1,290 +1,290 @@
 export interface TemplateConfig {
-    id: string
-    name: string,
-    runCommand: string,
-    fileStructure: {
-      [key: string]: {
-        purpose: string
-        description: string
-      }
-    }
-    conventions: string[]
-    dependencies?: {
-      [key: string]: string
-    }
-    scripts?: {
-      [key: string]: string
+  id: string
+  name: string
+  runCommand: string
+  fileStructure: {
+    [key: string]: {
+      purpose: string
+      description: string
    }
  }
-  
-  export const templateConfigs: { [key: string]: TemplateConfig } = {
-    reactjs: {
-      id: "reactjs",
-      name: "React",
-      runCommand: "npm run dev",
-      fileStructure: {
-        "src/": {
-          purpose: "source",
-          description: "Contains all React components and application logic"
-        },
-        "src/components/": {
-          purpose: "components",
-          description: "Reusable React components"
-        },
-        "src/lib/": {
-          purpose: "utilities",
-          description: "Utility functions and shared code"
-        },
-        "src/App.tsx": {
-          purpose: "entry",
-          description: "Main application component"
-        },
-        "src/index.tsx": {
-          purpose: "entry",
-          description: "Application entry point"
-        },
-        "src/index.css": {
-          purpose: "styles",
-          description: "Global CSS styles"
-        },
-        "public/": {
-          purpose: "static",
-          description: "Static assets and index.html"
-        },
-        "tsconfig.json": {
-          purpose: "config",
-          description: "TypeScript configuration"
-        },
-        "vite.config.ts": {
-          purpose: "config", 
-          description: "Vite bundler configuration"
-        },
-        "package.json": {
-          purpose: "config",
-          description: "Project dependencies and scripts"
-        }
-      },
-      conventions: [
-        "Use functional components with hooks",
-        "Follow React naming conventions (PascalCase for components)",
-        "Keep components small and focused",
-        "Use TypeScript for type safety"
-      ],
-      dependencies: {
-        "@radix-ui/react-icons": "^1.3.0",
-        "@radix-ui/react-slot": "^1.1.0",
-        "class-variance-authority": "^0.7.0",
-        "clsx": "^2.1.1",
-        "lucide-react": "^0.441.0",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "tailwind-merge": "^2.5.2",
-        "tailwindcss-animate": "^1.0.7"
-      },
-      scripts: {
-        "dev": "vite",
-        "build": "tsc && vite build",
-        "preview": "vite preview",
-      }
-    },
-    // Next.js template config
-    nextjs: {
-      id: "nextjs",
-      name: "NextJS",
-      runCommand: "npm run dev",
-      fileStructure: {
-        "pages/": {
-          purpose: "routing",
-          description: "Page components and API routes"
-        },
-        "pages/api/": {
-          purpose: "api",
-          description: "API route handlers"
-        },
-        "pages/_app.tsx": {
-          purpose: "entry",
-          description: "Application wrapper component"
-        },
-        "pages/index.tsx": {
-          purpose: "page",
-          description: "Homepage component"
-        },
-        "public/": {
-          purpose: "static",
-          description: "Static assets and files"
-        },
-        "styles/": {
-          purpose: "styles",
-          description: "CSS modules and global styles"
-        },
-        "styles/globals.css": {
-          purpose: "styles",
-          description: "Global CSS styles"
-        },
-        "styles/Home.module.css": {
-          purpose: "styles",
-          description: "Homepage-specific styles"
-        },
-        "next.config.js": {
-          purpose: "config",
-          description: "Next.js configuration"
-        },
-        "next-env.d.ts": {
-          purpose: "types",
-          description: "Next.js TypeScript declarations"
-        },
-        "tsconfig.json": {
-          purpose: "config",
-          description: "TypeScript configuration"
-        },
-        "package.json": {
-          purpose: "config",
-          description: "Project dependencies and scripts"
-        }
-      },
-      conventions: [
-        "Use file-system based routing",
-        "Keep API routes in pages/api",
-        "Use CSS Modules for component styles",
-        "Follow Next.js data fetching patterns"
-      ],
-      dependencies: {
-        "next": "^14.1.0",
-        "react": "^18.2.0",
-        "react-dom": "18.2.0",
-        "tailwindcss": "^3.4.1"
-      },
-      scripts: {
-        "dev": "next dev",
-        "build": "next build",
-        "start": "next start",
-        "lint": "next lint",
-      }
-    },
-    // Streamlit template config
-    streamlit: {
-      id: "streamlit",
-      name: "Streamlit",
-      runCommand: "./venv/bin/streamlit run main.py --server.runOnSave true",
-      fileStructure: {
-        "main.py": {
-          purpose: "entry",
-          description: "Main Streamlit application file"
-        },
-        "requirements.txt": {
-          purpose: "dependencies",
-          description: "Python package dependencies"
-        },
-        "Procfile": {
-          purpose: "deployment",
-          description: "Deployment configuration for hosting platforms"
-        },
-        "venv/": {
-          purpose: "environment",
-          description: "Python virtual environment directory"
-        }
-      },
-      conventions: [
-        "Use Streamlit components for UI",
-        "Follow PEP 8 style guide",
-        "Keep dependencies in requirements.txt",
-        "Use virtual environment for isolation"
-      ],
-      dependencies: {
-        "streamlit": "^1.40.0",
-        "altair": "^5.5.0"
-      },
-      scripts: {
-        "start": "streamlit run main.py",
-        "dev": "./venv/bin/streamlit run main.py --server.runOnSave true"
-      }
-    },
-    // HTML template config
-    vanillajs: {
-      id: "vanillajs",
-      name: "HTML/JS",
-      runCommand: "npm run dev",
-      fileStructure: {
-        "index.html": {
-          purpose: "entry",
-          description: "Main HTML entry point"
-        },
-        "style.css": {
-          purpose: "styles",
-          description: "Global CSS styles"
-        },
-        "script.js": {
-          purpose: "scripts",
-          description: "JavaScript application logic"
-        },
-        "package.json": {
-          purpose: "config",
-          description: "Project dependencies and scripts"
-        },
-        "package-lock.json": {
-          purpose: "config",
-          description: "Locked dependency versions"
-        },
-        "vite.config.js": {
-          purpose: "config",
-          description: "Vite bundler configuration"
-        }
-      },
-      conventions: [
-        "Use semantic HTML elements",
-        "Keep CSS modular and organized",
-        "Write clean, modular JavaScript",
-        "Follow modern ES6+ practices"
-      ],
-      dependencies: {
-        "vite": "^5.0.12"
-      },
-      scripts: {
-        "dev": "vite",
-        "build": "vite build",
-        "preview": "vite preview"
-      }
-    },
-    // PHP template config
-    php: {
-      id: "php",
-      name: "PHP",
-      runCommand: "npx vite",
-      fileStructure: {
-        "index.php": {
-          purpose: "entry",
-          description: "Main PHP entry point"
-        },
-        "package.json": {
-          purpose: "config",
-          description: "Frontend dependencies and scripts"
-        },
-        "package-lock.json": {
-          purpose: "config",
-          description: "Locked dependency versions"
-        },
-        "vite.config.js": {
-          purpose: "config",
-          description: "Vite configuration for frontend assets"
-        },
-        "node_modules/": {
-          purpose: "dependencies",
-          description: "Frontend dependency files"
-        }
-      },
-      conventions: [
-        "Follow PSR-12 coding standards",
-        "Use modern PHP 8+ features",
-        "Organize assets with Vite",
-        "Keep PHP logic separate from presentation"
-      ],
-      dependencies: {
-        "vite": "^5.0.0"
-      },
-      scripts: {
-        "dev": "vite",
-        "build": "vite build",
-        "preview": "vite preview"
-      }
-    }
+  conventions: string[]
+  dependencies?: {
+    [key: string]: string
+  }
+  scripts?: {
+    [key: string]: string
+  }
+}
+
+export const templateConfigs: { [key: string]: TemplateConfig } = {
+  reactjs: {
+    id: "reactjs",
+    name: "React",
+    runCommand: "npm run dev",
+    fileStructure: {
+      "src/": {
+        purpose: "source",
+        description: "Contains all React components and application logic",
+      },
+      "src/components/": {
+        purpose: "components",
+        description: "Reusable React components",
+      },
+      "src/lib/": {
+        purpose: "utilities",
+        description: "Utility functions and shared code",
+      },
+      "src/App.tsx": {
+        purpose: "entry",
+        description: "Main application component",
+      },
+      "src/index.tsx": {
+        purpose: "entry",
+        description: "Application entry point",
+      },
+      "src/index.css": {
+        purpose: "styles",
+        description: "Global CSS styles",
+      },
+      "public/": {
+        purpose: "static",
+        description: "Static assets and index.html",
+      },
+      "tsconfig.json": {
+        purpose: "config",
+        description: "TypeScript configuration",
+      },
+      "vite.config.ts": {
+        purpose: "config",
+        description: "Vite bundler configuration",
+      },
+      "package.json": {
+        purpose: "config",
+        description: "Project dependencies and scripts",
+      },
+    },
+    conventions: [
+      "Use functional components with hooks",
+      "Follow React naming conventions (PascalCase for components)",
+      "Keep components small and focused",
+      "Use TypeScript for type safety",
+    ],
+    dependencies: {
+      "@radix-ui/react-icons": "^1.3.0",
+      "@radix-ui/react-slot": "^1.1.0",
+      "class-variance-authority": "^0.7.0",
+      clsx: "^2.1.1",
+      "lucide-react": "^0.441.0",
+      react: "^18.3.1",
+      "react-dom": "^18.3.1",
+      "tailwind-merge": "^2.5.2",
+      "tailwindcss-animate": "^1.0.7",
+    },
+    scripts: {
+      dev: "vite",
+      build: "tsc && vite build",
+      preview: "vite preview",
+    },
+  },
+  // Next.js template config
+  nextjs: {
+    id: "nextjs",
+    name: "NextJS",
+    runCommand: "npm run dev",
+    fileStructure: {
+      "pages/": {
+        purpose: "routing",
+        description: "Page components and API routes",
+      },
+      "pages/api/": {
+        purpose: "api",
+        description: "API route handlers",
+      },
+      "pages/_app.tsx": {
+        purpose: "entry",
+        description: "Application wrapper component",
+      },
+      "pages/index.tsx": {
+        purpose: "page",
+        description: "Homepage component",
+      },
+      "public/": {
+        purpose: "static",
+        description: "Static assets and files",
+      },
+      "styles/": {
+        purpose: "styles",
+        description: "CSS modules and global styles",
+      },
+      "styles/globals.css": {
+        purpose: "styles",
+        description: "Global CSS styles",
+      },
+      "styles/Home.module.css": {
+        purpose: "styles",
+        description: "Homepage-specific styles",
+      },
+      "next.config.js": {
+        purpose: "config",
+        description: "Next.js configuration",
+      },
+      "next-env.d.ts": {
+        purpose: "types",
+        description: "Next.js TypeScript declarations",
+      },
+      "tsconfig.json": {
+        purpose: "config",
+        description: "TypeScript configuration",
+      },
+      "package.json": {
+        purpose: "config",
+        description: "Project dependencies and scripts",
+      },
+    },
+    conventions: [
+      "Use file-system based routing",
+      "Keep API routes in pages/api",
+      "Use CSS Modules for component styles",
+      "Follow Next.js data fetching patterns",
+    ],
+    dependencies: {
+      next: "^14.1.0",
+      react: "^18.2.0",
+      "react-dom": "18.2.0",
+      tailwindcss: "^3.4.1",
+    },
+    scripts: {
+      dev: "next dev",
+      build: "next build",
+      start: "next start",
+      lint: "next lint",
+    },
+  },
+  // Streamlit template config
+  streamlit: {
+    id: "streamlit",
+    name: "Streamlit",
+    runCommand: "./venv/bin/streamlit run main.py --server.runOnSave true",
+    fileStructure: {
+      "main.py": {
+        purpose: "entry",
+        description: "Main Streamlit application file",
+      },
+      "requirements.txt": {
+        purpose: "dependencies",
+        description: "Python package dependencies",
+      },
+      Procfile: {
+        purpose: "deployment",
+        description: "Deployment configuration for hosting platforms",
+      },
+      "venv/": {
+        purpose: "environment",
+        description: "Python virtual environment directory",
+      },
+    },
+    conventions: [
+      "Use Streamlit components for UI",
+      "Follow PEP 8 style guide",
+      "Keep dependencies in requirements.txt",
+      "Use virtual environment for isolation",
+    ],
+    dependencies: {
+      streamlit: "^1.40.0",
+      altair: "^5.5.0",
+    },
+    scripts: {
+      start: "streamlit run main.py",
+      dev: "./venv/bin/streamlit run main.py --server.runOnSave true",
+    },
+  },
+  // HTML template config
+  vanillajs: {
+    id: "vanillajs",
+    name: "HTML/JS",
+    runCommand: "npm run dev",
+    fileStructure: {
+      "index.html": {
+        purpose: "entry",
+        description: "Main HTML entry point",
+      },
+      "style.css": {
+        purpose: "styles",
+        description: "Global CSS styles",
+      },
+      "script.js": {
+        purpose: "scripts",
+        description: "JavaScript application logic",
+      },
+      "package.json": {
+        purpose: "config",
+        description: "Project dependencies and scripts",
+      },
+      "package-lock.json": {
+        purpose: "config",
+        description: "Locked dependency versions",
+      },
+      "vite.config.js": {
+        purpose: "config",
+        description: "Vite bundler configuration",
+      },
+    },
+    conventions: [
+      "Use semantic HTML elements",
+      "Keep CSS modular and organized",
+      "Write clean, modular JavaScript",
+      "Follow modern ES6+ practices",
+    ],
+    dependencies: {
+      vite: "^5.0.12",
+    },
+    scripts: {
+      dev: "vite",
+      build: "vite build",
+      preview: "vite preview",
+    },
+  },
+  // PHP template config
+  php: {
+    id: "php",
+    name: "PHP",
+    runCommand: "npx vite",
+    fileStructure: {
+      "index.php": {
+        purpose: "entry",
+        description: "Main PHP entry point",
+      },
+      "package.json": {
+        purpose: "config",
+        description: "Frontend dependencies and scripts",
+      },
+      "package-lock.json": {
+        purpose: "config",
+        description: "Locked dependency versions",
+      },
+      "vite.config.js": {
+        purpose: "config",
+        description: "Vite configuration for frontend assets",
+      },
+      "node_modules/": {
+        purpose: "dependencies",
+        description: "Frontend dependency files",
+      },
+    },
+    conventions: [
+      "Follow PSR-12 coding standards",
+      "Use modern PHP 8+ features",
+      "Organize assets with Vite",
+      "Keep PHP logic separate from presentation",
+    ],
+    dependencies: {
+      vite: "^5.0.0",
+    },
+    scripts: {
+      dev: "vite",
+      build: "vite build",
+      preview: "vite preview",
+    },
+  },
 }
--- a/frontend/lib/tiers.ts
+++ b/frontend/lib/tiers.ts
@ -1,19 +1,19 @@
 export const TIERS = {
-    FREE: {
-      //   generations: 100, 
-      //   maxTokens: 1024,
-      generations: 1000,
-      maxTokens: 4096,
-      model: "claude-3-5-sonnet-20240620",
-    },
-    PRO: {
-      generations: 500,
-      maxTokens: 2048,
-      model: "claude-3-5-sonnet-20240620",
-    },
-    ENTERPRISE: {
-      generations: 1000,
-      maxTokens: 4096,
-      model: "claude-3-5-sonnet-20240620",
-    },
-}
+  FREE: {
+    //   generations: 100,
+    //   maxTokens: 1024,
+    generations: 1000,
+    maxTokens: 4096,
+    model: "claude-3-5-sonnet-20240620",
+  },
+  PRO: {
+    generations: 500,
+    maxTokens: 2048,
+    model: "claude-3-5-sonnet-20240620",
+  },
+  ENTERPRISE: {
+    generations: 1000,
+    maxTokens: 4096,
+    model: "claude-3-5-sonnet-20240620",
+  },
+}