feat: Add new features and update existing functionality

Author: Gerome El-assaad

AGENTS.md

@@ -0,0 +1,41 @@
+# Agent Guidelines for CodingIT
+
+## Build/Lint/Test Commands
+- **Development**: `npm run dev` (Next.js with Turbo)
+- **Build**: `npm run build` (Next.js production build)
+- **Start**: `npm run start` (Next.js production server)
+- **Lint**: `npm run lint` (ESLint with Next.js rules)
+- **No test framework configured** - run lint after changes
+
+## Code Style Guidelines
+
+### Formatting
+- **Quotes**: Single quotes only (`'string'`)
+- **Semicolons**: Never use semicolons
+- **Imports**: Auto-sorted with `@trivago/prettier-plugin-sort-imports`
+
+### TypeScript
+- **Strict mode**: Enabled in `tsconfig.json`
+- **Path aliases**: Use `@/*` for relative imports from root
+- **Types**: Always use explicit types, prefer interfaces for objects
+
+### Naming Conventions
+- **Variables/Functions**: camelCase (`userName`, `getUserData`)
+- **Components**: PascalCase (`UserProfile`, `ChatInput`)
+- **Files**: kebab-case for components (`user-profile.tsx`), camelCase for utilities (`authUtils.ts`)
+
+### Error Handling
+- Use `console.warn()` for non-critical warnings
+- Handle async errors with `.catch()` or try-catch
+- Validate inputs with TypeScript types and runtime checks
+
+### Imports
+- Group imports: React/Next, third-party libraries, local utilities
+- Use absolute imports with `@/` alias
+- Sort imports automatically (handled by Prettier plugin)
+
+### Best Practices
+- No comments unless absolutely necessary
+- Use functional components with hooks
+- Follow React/Next.js conventions
+- Maintain consistent file structure

app/api/subscription/usage/route.ts

@@ -1,65 +1,60 @@
-import { NextRequest, NextResponse } from 'next/server'
+import { NextResponse } from 'next/server'
 import { createServerClient } from '@/lib/supabase-server'
-import { getTeamUsageLimits, getTeamSubscription } from '@/lib/subscription'
+import { stripe } from '@/lib/stripe'
 
-export const dynamic = 'force-dynamic'
+export async function GET() {
+  const supabase = createServerClient()
+  const {
+    data: { user }
+  } = await supabase.auth.getUser()
 
-export async function GET(request: NextRequest) {
-  try {
-    const supabase = createServerClient()
-    const { data: { user }, error: authError } = await supabase.auth.getUser()
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
 
-    if (authError || !user?.id) {
-      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-    }
+  if (!stripe) {
+    return NextResponse.json({ error: 'Stripe not configured' }, { status: 500 })
+  }
 
-    // Get user's default team
-    const { data: userTeam, error: teamError } = await supabase
-      .from('users_teams')
-      .select('teams (id)')
-      .eq('user_id', user.id)
-      .eq('is_default', true)
-      .single()
+  const { data: teamData } = await supabase
+    .from('users_teams')
+    .select('teams (stripe_customer_id)')
+    .eq('user_id', user.id)
+    .eq('is_default', true)
+    .single()
 
-    if (teamError || !userTeam?.teams) {
-      console.error('Team lookup failed for user:', user.id, teamError)
-      // Return default free tier limits instead of error
-      return NextResponse.json({
-        subscription: {
-          id: 'default',
-          name: 'Personal',
-          tier: 'free',
-          subscription_status: 'active',
-          cancel_at_period_end: false
-        },
-        usage_limits: [
-          {
-            usage_type: 'api_calls',
-            limit_value: 100,
-            current_usage: 0,
-            period_start: new Date().toISOString(),
-            period_end: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString()
-          }
-        ]
-      })
-    }
+  const customerId = (teamData?.teams as any)?.stripe_customer_id
 
-    const team = userTeam.teams as any
-    
-    const [subscription, usageLimits] = await Promise.all([
-      getTeamSubscription(team.id),
-      getTeamUsageLimits(team.id)
-    ])
+  if (!customerId) {
+    return NextResponse.json({ usage: [] })
+  }
 
-    return NextResponse.json({
-      subscription,
-      usage_limits: usageLimits
+  try {
+    const subscriptions = await stripe.subscriptions.list({
+      customer: customerId,
+      status: 'active',
+      expand: ['data.items'],
     })
+
+    if (!subscriptions.data.length) {
+      return NextResponse.json({ usage: [] })
+    }
+
+    const subscription = subscriptions.data[0]
+    const usage = subscription.items.data.map((item) => ({
+      id: item.id,
+      quantity: item.quantity,
+      price: {
+        id: (item.price as any).id,
+        unit_amount: (item.price as any).unit_amount,
+        currency: (item.price as any).currency,
+        product: (item.price as any).product,
+      },
+    }))
+
+    return NextResponse.json({ usage })
   } catch (error) {
-    console.error('Usage API error:', error)
-    return NextResponse.json(
-      { error: 'Failed to fetch usage data' },
-      { status: 500 }
-    )
+    console.error('Error fetching Stripe subscription usage:', error)
+    return NextResponse.json({ error: 'Failed to fetch subscription usage' }, { status: 500 })
   }
-}
+}

app/api/templates/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { TemplateId } from '@/lib/templates'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+
+export interface TemplateFile {
+  name: string
+  content: string
+}
+
+function getTemplateFiles(templateId: TemplateId): TemplateFile[] {
+  const templateFiles: TemplateFile[] = []
+
+  try {
+    const templateDir = join(process.cwd(), 'sandbox-templates', templateId)
+    const fileMappings: Record<TemplateId, string[]> = {
+      'code-interpreter-v1': ['script.py'],
+      'nextjs-developer': ['_app.tsx', 'e2b.Dockerfile', 'e2b.toml', 'compile_page.sh'],
+      'vue-developer': ['app.vue', 'e2b.Dockerfile', 'e2b.toml', 'nuxt.config.ts'],
+      'streamlit-developer': ['app.py', 'e2b.Dockerfile', 'e2b.toml'],
+      'gradio-developer': ['app.py', 'e2b.Dockerfile', 'e2b.toml']
+    }
+
+    const files = fileMappings[templateId] || []
+
+    for (const file of files) {
+      try {
+        const filePath = join(templateDir, file)
+        const content = readFileSync(filePath, 'utf-8')
+        templateFiles.push({
+          name: file,
+          content
+        })
+      } catch (error) {
+        console.warn(`Failed to read template file ${file}:`, error)
+      }
+    }
+  } catch (error) {
+    console.warn(`Failed to load template files for ${templateId}:`, error)
+  }
+
+  return templateFiles
+}
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url)
+  const templateId = searchParams.get('templateId') as TemplateId
+
+  if (!templateId) {
+    return NextResponse.json({ error: 'templateId is required' }, { status: 400 })
+  }
+
+  const templateFiles = getTemplateFiles(templateId)
+  return NextResponse.json(templateFiles)
+}

app/api/webhooks/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { stripe } from '@/lib/stripe'
+import { handleSubscriptionEvent } from '@/lib/subscription'
+import Stripe from 'stripe'
+
+export const dynamic = 'force-dynamic'
+
+const relevantEvents = new Set([
+  'checkout.session.completed',
+  'customer.subscription.created',
+  'customer.subscription.updated',
+  'customer.subscription.deleted',
+  'invoice.paid',
+  'invoice.payment_succeeded',
+  'invoice.payment_failed',
+])
+
+export async function POST(request: NextRequest) {
+  const body = await request.text()
+  const sig = request.headers.get('stripe-signature')
+  const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET
+
+  if (!sig || !webhookSecret) {
+    console.error('Stripe signature or webhook secret is missing.')
+    return NextResponse.json({ error: 'Webhook secret not configured' }, { status: 400 })
+  }
+
+  let event: Stripe.Event
+
+  try {
+    event = stripe!.webhooks.constructEvent(body, sig, webhookSecret)
+  } catch (err: any) {
+    console.error(`Webhook signature verification failed: ${err.message}`)
+    return NextResponse.json({ error: `Webhook Error: ${err.message}` }, { status: 400 })
+  }
+
+  if (relevantEvents.has(event.type)) {
+    try {
+      await handleSubscriptionEvent(event)
+    } catch (error) {
+      console.error('Error handling subscription event:', error)
+      return NextResponse.json({ error: 'Webhook handler failed' }, { status: 500 })
+    }
+  }
+
+  return NextResponse.json({ received: true })
+}

flags.ts

@@ -101,19 +101,47 @@ export const subscriptionTier = flag<'free' | 'pro' | 'enterprise'>({
   identify,
 });
 
-// Utility function for API routes - returns default values for now
+// Utility function for API routes - connects to GrowthBook feature flag service
 export async function getAllFeatureFlags() {
-  // For now, return default values. In a real implementation, this would
-  // connect to your feature flag service (GrowthBook, Edge Config, etc.)
-  return {
-    'workflow-builder-v2': false,
-    'enhanced-code-editor': false,
-    'premium-templates': false,
-    'advanced-analytics': false,
-    'beta-ai-models': false,
-    'theme-customization': false,
-    'subscription-tier': 'free' as const,
-  };
+  try {
+    // TODO: Implement proper GrowthBook integration
+    // For now, return default values as defined in flag declarations above
+    // In production, this should connect to GrowthBook and return live flag values
+    return {
+      'workflow-builder-v2': false,
+      'enhanced-code-editor': false,
+      'premium-templates': false,
+      'realtime-collaboration': false,
+      'advanced-analytics': false,
+      'beta-ai-models': false,
+      'enterprise-features': false,
+      'theme-customization': false,
+      'deployment-integrations': false,
+      'usage-limits-enforcement': true, // Always enforce limits by default
+      'workflow-interface-style': 'list' as const,
+      'subscription-tier': 'free' as const,
+      'editor-theme-mode': 'basic' as const,
+    };
+  } catch (error) {
+    console.error('Error fetching feature flags:', error);
+
+    // Return safe defaults if GrowthBook is unavailable
+    return {
+      'workflow-builder-v2': false,
+      'enhanced-code-editor': false,
+      'premium-templates': false,
+      'realtime-collaboration': false,
+      'advanced-analytics': false,
+      'beta-ai-models': false,
+      'enterprise-features': false,
+      'theme-customization': false,
+      'deployment-integrations': false,
+      'usage-limits-enforcement': true, // Always enforce limits by default
+      'workflow-interface-style': 'list' as const,
+      'subscription-tier': 'free' as const,
+      'editor-theme-mode': 'basic' as const,
+    };
+  }
 }
 
 // Editor Theme Mode - Enhanced theme options

lib/analytics-service.ts

@@ -2,6 +2,7 @@
 
 import { usePostHog } from 'posthog-js/react'
 import { useAuth } from './auth'
+import { useUserTeam } from './user-team-provider'
 import { FragmentSchema } from './schema'
 
 // Analytics Event Types for Business Intelligence
@@ -407,7 +408,8 @@ export class AnalyticsService {
 // React Hook for Easy Usage
 export function useAnalytics() {
   const posthog = usePostHog()
-  const { session, userTeam } = useAuth(() => {}, () => {})
+  const { session } = useAuth(() => {}, () => {})
+  const { userTeam } = useUserTeam()
   const analytics = AnalyticsService.getInstance()
 
   // Initialize analytics service
@@ -429,4 +431,4 @@ export function useAnalytics() {
 }
 
 // Import React for the useEffect hook
-import React from 'react'
+import React from 'react'

lib/auth-provider.tsx

@@ -3,17 +3,10 @@
 import { createContext, useContext, useState } from 'react'
 import { useAuth } from './auth'
 import { Session } from '@supabase/supabase-js'
-
-type UserTeam = {
-  email: string
-  id: string
-  name: string
-  tier: string
-}
+import { UserTeamProvider } from './user-team-provider'
 
 type AuthContextType = {
   session: Session | null
-  userTeam: UserTeam | undefined
   loading: boolean
 }
 
@@ -22,11 +15,11 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined)
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [authView, setAuthView] = useState<any>('sign_in')
   const [authDialog, setAuthDialog] = useState(false)
-  const { session, userTeam, loading } = useAuth(setAuthDialog, setAuthView)
+  const { session, loading } = useAuth(setAuthDialog, setAuthView)
 
   return (
-    <AuthContext.Provider value={{ session, userTeam, loading }}>
-      {children}
+    <AuthContext.Provider value={{ session, loading }}>
+      <UserTeamProvider session={session}>{children}</UserTeamProvider>
     </AuthContext.Provider>
   )
 }