diff --git a/api-dev-server.ts b/api-dev-server.ts
index a5bfe2ab..e6f2d894 100644
--- a/api-dev-server.ts
+++ b/api-dev-server.ts
@@ -14,7 +14,7 @@ class MockVercelRequest implements VercelRequest {
   url: string;
   method: string;
   headers: IncomingMessage['headers'];
-  body: any;
+  body: unknown;
   query: { [key: string]: string | string[] };
   cookies: { [key: string]: string };
 
@@ -61,13 +61,13 @@ class MockVercelResponse implements VercelResponse {
     return this;
   }
   
-  json(data: any): void {
+  json(data: unknown): void {
     this.setHeader('Content-Type', 'application/json');
     this.res.writeHead(this.statusCode, this.headers);
     this.res.end(JSON.stringify(data));
   }
   
-  send(data: any): void {
+  send(data: string | Buffer): void {
     this.res.writeHead(this.statusCode, this.headers);
     this.res.end(data);
   }
@@ -152,8 +152,9 @@ const server = createServer(async (req: IncomingMessage, res: ServerResponse) =>
         res.writeHead(500);
         res.end(JSON.stringify({ error: 'Invalid API handler export' }));
       }
-    } catch (error: any) {
-      console.error(`Error handling ${endpoint}:`, error);
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      console.error(`Error handling ${endpoint}:`, errorMessage);
       res.writeHead(500);
       res.end(JSON.stringify({ 
         error: 'Internal Server Error'
diff --git a/api/create-checkout-session.ts b/api/create-checkout-session.ts
index 882b0884..8e700e1d 100644
--- a/api/create-checkout-session.ts
+++ b/api/create-checkout-session.ts
@@ -112,19 +112,19 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
 
       const stripe = new Stripe(stripeSecretKey);
 
-      // Map planId to Stripe price IDs based on period
+      // Map planId to Stripe price IDs based on period (standardized naming)
       const priceIdMap: Record<string, Record<string, string>> = {
         'pro': {
-          'month': process.env.STRIPE_PRO_MONTHLY_PRICE_ID || 'price_pro_monthly',
-          'year': process.env.STRIPE_PRO_YEARLY_PRICE_ID || 'price_pro_yearly',
+          'month': process.env.STRIPE_PRICE_PRO_MONTH || process.env.STRIPE_PRO_MONTHLY_PRICE_ID || 'price_pro_monthly',
+          'year': process.env.STRIPE_PRICE_PRO_YEAR || process.env.STRIPE_PRO_YEARLY_PRICE_ID || 'price_pro_yearly',
         },
         'enterprise': {
-          'month': process.env.STRIPE_ENTERPRISE_MONTHLY_PRICE_ID || 'price_enterprise_monthly',
-          'year': process.env.STRIPE_ENTERPRISE_YEARLY_PRICE_ID || 'price_enterprise_yearly',
+          'month': process.env.STRIPE_PRICE_ENTERPRISE_MONTH || process.env.STRIPE_ENTERPRISE_MONTHLY_PRICE_ID || 'price_enterprise_monthly',
+          'year': process.env.STRIPE_PRICE_ENTERPRISE_YEAR || process.env.STRIPE_ENTERPRISE_YEARLY_PRICE_ID || 'price_enterprise_yearly',
         },
         'starter': {
-          'month': process.env.STRIPE_STARTER_MONTHLY_PRICE_ID || 'price_starter_monthly',
-          'year': process.env.STRIPE_STARTER_YEARLY_PRICE_ID || 'price_starter_yearly',
+          'month': process.env.STRIPE_PRICE_STARTER_MONTH || process.env.STRIPE_STARTER_MONTHLY_PRICE_ID || 'price_starter_monthly',
+          'year': process.env.STRIPE_PRICE_STARTER_YEAR || process.env.STRIPE_STARTER_YEARLY_PRICE_ID || 'price_starter_yearly',
         },
       };
 
diff --git a/api/get-subscription.ts b/api/get-subscription.ts
index cc66e0c7..f3e0664b 100644
--- a/api/get-subscription.ts
+++ b/api/get-subscription.ts
@@ -1,6 +1,15 @@
 import type { VercelRequest, VercelResponse } from '@vercel/node';
 import { getBearerOrSessionToken, verifyClerkToken } from './_utils/auth';
 import Stripe from 'stripe';
+import { 
+  StripeSubscription, 
+  StripeCustomer, 
+  SubscriptionData,
+  PlanType,
+  getSubscriptionPeriod,
+  isStripeSubscription,
+  isStripeCustomer 
+} from '../src/types/stripe';
 
 function withCors(res: VercelResponse, allowOrigin?: string) {
   const origin = allowOrigin ?? process.env.PUBLIC_ORIGIN ?? '*';
@@ -132,26 +141,35 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
       const subscription = subscriptions.data[0];
       const priceId = subscription.items.data[0]?.price.id;
 
-      // Map Stripe price IDs back to plan IDs
+      // Map Stripe price IDs back to plan IDs (standardized naming)
       const planIdMap: Record<string, string> = {
-        [process.env.STRIPE_PRO_MONTHLY_PRICE_ID || 'price_pro_monthly']: 'pro',
-        [process.env.STRIPE_PRO_YEARLY_PRICE_ID || 'price_pro_yearly']: 'pro',
-        [process.env.STRIPE_ENTERPRISE_MONTHLY_PRICE_ID || 'price_enterprise_monthly']: 'enterprise',
-        [process.env.STRIPE_ENTERPRISE_YEARLY_PRICE_ID || 'price_enterprise_yearly']: 'enterprise',
-        [process.env.STRIPE_STARTER_MONTHLY_PRICE_ID || 'price_starter_monthly']: 'starter',
-        [process.env.STRIPE_STARTER_YEARLY_PRICE_ID || 'price_starter_yearly']: 'starter',
+        [process.env.STRIPE_PRICE_PRO_MONTH || process.env.STRIPE_PRO_MONTHLY_PRICE_ID || 'price_pro_monthly']: 'pro',
+        [process.env.STRIPE_PRICE_PRO_YEAR || process.env.STRIPE_PRO_YEARLY_PRICE_ID || 'price_pro_yearly']: 'pro',
+        [process.env.STRIPE_PRICE_ENTERPRISE_MONTH || process.env.STRIPE_ENTERPRISE_MONTHLY_PRICE_ID || 'price_enterprise_monthly']: 'enterprise',
+        [process.env.STRIPE_PRICE_ENTERPRISE_YEAR || process.env.STRIPE_ENTERPRISE_YEARLY_PRICE_ID || 'price_enterprise_yearly']: 'enterprise',
+        [process.env.STRIPE_PRICE_STARTER_MONTH || process.env.STRIPE_STARTER_MONTHLY_PRICE_ID || 'price_starter_monthly']: 'starter',
+        [process.env.STRIPE_PRICE_STARTER_YEAR || process.env.STRIPE_STARTER_YEARLY_PRICE_ID || 'price_starter_yearly']: 'starter',
       };
 
       const planId = planIdMap[priceId] || 'free';
 
-      const subscriptionData = {
-        planId: planId,
+      // Type-safe period extraction
+      const subscriptionPeriod = getSubscriptionPeriod(subscription);
+      if (!subscriptionPeriod) {
+        console.error('Invalid subscription object structure');
+        return withCors(res, allowedOrigin).status(500).json({
+          error: 'Invalid subscription data'
+        });
+      }
+
+      const subscriptionData: SubscriptionData = {
+        planId: planId as PlanType,
         status: subscription.status,
-        currentPeriodStart: (subscription as any).current_period_start * 1000, // Convert to milliseconds
-        currentPeriodEnd: (subscription as any).current_period_end * 1000, // Convert to milliseconds
+        currentPeriodStart: subscriptionPeriod.currentPeriodStart,
+        currentPeriodEnd: subscriptionPeriod.currentPeriodEnd,
         cancelAtPeriodEnd: subscription.cancel_at_period_end,
         stripeSubscriptionId: subscription.id,
-        stripeCustomerId: customer.id,
+        stripeCustomerId: typeof customer === 'string' ? customer : customer.id,
       };
 
       console.log('Retrieved subscription data for user:', authenticatedUserId, 'plan:', planId);
diff --git a/api/stripe-webhook.ts b/api/stripe-webhook.ts
index 17af14be..a642e837 100644
--- a/api/stripe-webhook.ts
+++ b/api/stripe-webhook.ts
@@ -1,15 +1,29 @@
 import type { VercelRequest, VercelResponse } from '@vercel/node';
 import Stripe from 'stripe';
-
-// Helper function to map Stripe price IDs to plan types
+import { 
+  StripeSubscription, 
+  StripeCustomer, 
+  StripeInvoice,
+  StripeWebhookEvent,
+  PlanType,
+  getSubscriptionPeriod,
+  getCustomerEmail,
+  getCustomerMetadata,
+  getInvoiceSubscriptionId,
+  isStripeSubscription,
+  isStripeCustomer,
+  isStripeInvoice 
+} from '../src/types/stripe';
+
+// Helper function to map Stripe price IDs to plan types (standardized naming)
 function mapPriceIdToPlanType(priceId: string): 'free' | 'pro' | 'enterprise' | 'starter' {
   const priceIdMap: Record<string, 'free' | 'pro' | 'enterprise' | 'starter'> = {
-    [process.env.STRIPE_PRO_MONTHLY_PRICE_ID || 'price_pro_monthly']: 'pro',
-    [process.env.STRIPE_PRO_YEARLY_PRICE_ID || 'price_pro_yearly']: 'pro',
-    [process.env.STRIPE_ENTERPRISE_MONTHLY_PRICE_ID || 'price_enterprise_monthly']: 'enterprise',
-    [process.env.STRIPE_ENTERPRISE_YEARLY_PRICE_ID || 'price_enterprise_yearly']: 'enterprise',
-    [process.env.STRIPE_STARTER_MONTHLY_PRICE_ID || 'price_starter_monthly']: 'starter',
-    [process.env.STRIPE_STARTER_YEARLY_PRICE_ID || 'price_starter_yearly']: 'starter',
+    [process.env.STRIPE_PRICE_PRO_MONTH || process.env.STRIPE_PRO_MONTHLY_PRICE_ID || 'price_pro_monthly']: 'pro',
+    [process.env.STRIPE_PRICE_PRO_YEAR || process.env.STRIPE_PRO_YEARLY_PRICE_ID || 'price_pro_yearly']: 'pro',
+    [process.env.STRIPE_PRICE_ENTERPRISE_MONTH || process.env.STRIPE_ENTERPRISE_MONTHLY_PRICE_ID || 'price_enterprise_monthly']: 'enterprise',
+    [process.env.STRIPE_PRICE_ENTERPRISE_YEAR || process.env.STRIPE_ENTERPRISE_YEARLY_PRICE_ID || 'price_enterprise_yearly']: 'enterprise',
+    [process.env.STRIPE_PRICE_STARTER_MONTH || process.env.STRIPE_STARTER_MONTHLY_PRICE_ID || 'price_starter_monthly']: 'starter',
+    [process.env.STRIPE_PRICE_STARTER_YEAR || process.env.STRIPE_STARTER_YEARLY_PRICE_ID || 'price_starter_yearly']: 'starter',
   };
   return priceIdMap[priceId] || 'free';
 }
@@ -18,7 +32,7 @@ function mapPriceIdToPlanType(priceId: string): 'free' | 'pro' | 'enterprise' |
 
 // Simplified subscription sync - for now just log the webhook events
 // In production, you would want to use Convex HTTP actions or a queue system
-async function logWebhookEvent(eventType: string, data: any): Promise<void> {
+async function logWebhookEvent(eventType: string, data: unknown): Promise<void> {
   console.log(`[WEBHOOK] ${eventType}:`, JSON.stringify(data, null, 2));
   
   // TODO: Implement proper Convex HTTP action calls or use a queue system
@@ -53,6 +67,13 @@ async function syncSubscriptionToConvex(
     const priceId = subscription.items.data[0]?.price.id;
     const planType = mapPriceIdToPlanType(priceId);
 
+    // Type-safe period extraction
+    const subscriptionPeriod = getSubscriptionPeriod(subscription);
+    if (!subscriptionPeriod) {
+      console.error('Invalid subscription structure, cannot sync');
+      return;
+    }
+
     // Log the subscription sync
     await logWebhookEvent('subscription_sync', {
       userId,
@@ -60,8 +81,8 @@ async function syncSubscriptionToConvex(
       planId: priceId,
       planType,
       status: subscription.status,
-      currentPeriodStart: (subscription as any).current_period_start * 1000,
-      currentPeriodEnd: (subscription as any).current_period_end * 1000,
+      currentPeriodStart: subscriptionPeriod.currentPeriodStart,
+      currentPeriodEnd: subscriptionPeriod.currentPeriodEnd,
       timestamp: now
     });
 
@@ -199,7 +220,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
         // Ensure customer mapping exists
         const customer = await stripe.customers.retrieve(session.customer as string);
         if (!customer.deleted) {
-          await ensureCustomerMapping(userId, customer.id, (customer as any).email || '');
+          await ensureCustomerMapping(userId, customer.id, getCustomerEmail(customer));
         }
 
         // Get the subscription ID from the session
@@ -225,7 +246,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
           break;
         }
 
-        const userId = !customer.deleted ? (customer as any).metadata?.userId : null;
+        const userId = !customer.deleted ? getCustomerMetadata(customer).userId : null;
         if (!userId) {
           console.error('No userId found in customer metadata for subscription:', subscription.id);
           break;
@@ -233,7 +254,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
 
         // Ensure customer mapping exists
         if (!customer.deleted) {
-          await ensureCustomerMapping(userId, customer.id, (customer as any).email || '');
+          await ensureCustomerMapping(userId, customer.id, getCustomerEmail(customer));
         }
 
         // Sync subscription data
@@ -253,7 +274,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
           break;
         }
 
-        const userId = !customer.deleted ? (customer as any).metadata?.userId : null;
+        const userId = !customer.deleted ? getCustomerMetadata(customer).userId : null;
         if (!userId) {
           console.error('No userId found in customer metadata for subscription:', subscription.id);
           break;
@@ -275,7 +296,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
           break;
         }
 
-        const userId = !customer.deleted ? (customer as any).metadata?.userId : null;
+        const userId = !customer.deleted ? getCustomerMetadata(customer).userId : null;
         if (!userId) {
           console.error('No userId found in customer metadata for subscription:', subscription.id);
           break;
@@ -292,8 +313,9 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
         console.log('Payment succeeded for invoice:', invoice.id);
 
         // Get subscription if this is a subscription invoice
-        if ((invoice as any).subscription) {
-          const subscription = await stripe.subscriptions.retrieve((invoice as any).subscription as string);
+        const subscriptionId = getInvoiceSubscriptionId(invoice);
+        if (subscriptionId) {
+          const subscription = await stripe.subscriptions.retrieve(subscriptionId);
           const customer = await stripe.customers.retrieve(subscription.customer as string);
 
           if (customer.deleted) {
@@ -301,7 +323,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
             break;
           }
 
-          const userId = !customer.deleted ? (customer as any).metadata?.userId : null;
+          const userId = !customer.deleted ? getCustomerMetadata(customer).userId : null;
           if (userId) {
             await syncSubscriptionToConvex(userId, subscription.customer as string, subscription);
             console.log('Successfully processed payment success for user:', userId);
@@ -315,8 +337,9 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
         console.log('Payment failed for invoice:', invoice.id);
 
         // Get subscription if this is a subscription invoice
-        if ((invoice as any).subscription) {
-          const subscription = await stripe.subscriptions.retrieve((invoice as any).subscription as string);
+        const subscriptionId = getInvoiceSubscriptionId(invoice);
+        if (subscriptionId) {
+          const subscription = await stripe.subscriptions.retrieve(subscriptionId);
           const customer = await stripe.customers.retrieve(subscription.customer as string);
 
           if (customer.deleted) {
@@ -324,7 +347,7 @@ export default async function handler(req: VercelRequest, res: VercelResponse) {
             break;
           }
 
-          const userId = !customer.deleted ? (customer as any).metadata?.userId : null;
+          const userId = !customer.deleted ? getCustomerMetadata(customer).userId : null;
           if (userId) {
             // Sync the current subscription status (might be past_due)
             await syncSubscriptionToConvex(userId, subscription.customer as string, subscription);
diff --git a/convex/users.ts b/convex/users.ts
index e749ff08..f8669741 100644
--- a/convex/users.ts
+++ b/convex/users.ts
@@ -3,6 +3,7 @@ import { v } from "convex/values";
 import { QueryCtx, MutationCtx } from "./_generated/server";
 import { enforceRateLimit } from "./rateLimit";
 import { api } from "./_generated/api";
+import { getSubscriptionPeriod } from "../src/types/stripe";
 
 // Helper function to get authenticated user
 const getAuthenticatedUser = async (ctx: QueryCtx | MutationCtx) => {
@@ -72,6 +73,77 @@ export const getCurrentUser = query({
 });
 
 // Create or update user profile
+// Helper function to validate username availability
+const validateUsernameAvailability = async (ctx: QueryCtx | MutationCtx, username: string | undefined, currentUserId: string) => {
+  if (!username) return;
+  
+  const existingUserWithUsername = await ctx.db
+    .query("users")
+    .withIndex("by_username", (q) => q.eq("username", username))
+    .first();
+  
+  if (existingUserWithUsername && existingUserWithUsername.userId !== currentUserId) {
+    throw new Error("Username is already taken");
+  }
+};
+
+// Helper function to handle email conflicts and merging
+type UserUpdateData = {
+  email?: string;
+  username?: string;
+  profileUrl?: string;
+  [key: string]: unknown; // Allow additional fields if needed
+};
+const handleEmailConflict = async (
+  ctx: MutationCtx,
+  email: string,
+  currentUserId: string,
+  sanitizedData: UserUpdateData,
+  now: number
+) => {
+  const existingUserWithEmail = await ctx.db
+    .query("users")
+    .withIndex("by_email", (q) => q.eq("email", email))
+    .first();
+
+  if (existingUserWithEmail && existingUserWithEmail.userId !== currentUserId) {
+    // Merge account by re-assigning the stored userId to the currently authenticated identity
+    await ctx.db.patch(existingUserWithEmail._id, {
+      userId: currentUserId,
+      ...sanitizedData,
+      updatedAt: now,
+    });
+    return existingUserWithEmail._id;
+  }
+  
+  return null; // No conflict found
+};
+
+// Helper function to upsert user record
+const upsertUserRecord = async (ctx: MutationCtx, userId: string, sanitizedData: any, now: number) => {
+  const existingUser = await ctx.db
+    .query("users")
+    .withIndex("by_user_id", (q) => q.eq("userId", userId))
+    .first();
+
+  if (existingUser) {
+    // Update existing user
+    await ctx.db.patch(existingUser._id, {
+      ...sanitizedData,
+      updatedAt: now,
+    });
+    return existingUser._id;
+  } else {
+    // Create new user
+    return await ctx.db.insert("users", {
+      userId,
+      ...sanitizedData,
+      createdAt: now,
+      updatedAt: now,
+    });
+  }
+};
+
 export const upsertUser = mutation({
   args: {
     email: v.string(),
@@ -82,13 +154,9 @@ export const upsertUser = mutation({
   },
   handler: async (ctx, args) => {
     const identity = await getAuthenticatedUser(ctx);
-    
-    // Enforce rate limiting
     await enforceRateLimit(ctx, "upsertUser");
     
     const now = Date.now();
-
-    // Sanitize and validate inputs
     const sanitizedData = {
       email: sanitizeEmail(args.email),
       fullName: sanitizeString(args.fullName, 100),
@@ -97,62 +165,17 @@ export const upsertUser = mutation({
       bio: sanitizeString(args.bio, 500),
     };
 
-    // Check if username is taken by another user
-    if (sanitizedData.username) {
-      const existingUserWithUsername = await ctx.db
-        .query("users")
-        .withIndex("by_username", (q) => q.eq("username", sanitizedData.username))
-        .first();
-      
-      if (existingUserWithUsername && existingUserWithUsername.userId !== identity.subject) {
-        throw new Error("Username is already taken");
-      }
-    }
-
-    // Check if email is taken by another user and merge if necessary
-    const existingUserWithEmail = await ctx.db
-      .query("users")
-      .withIndex("by_email", (q) => q.eq("email", sanitizedData.email))
-      .first();
-
-    if (existingUserWithEmail && existingUserWithEmail.userId !== identity.subject) {
-      // We found a record with the same email but a different userId. Instead of throwing
-      // an error (which breaks login flows when a user accidentally creates a new Clerk
-      // account with the same email), we transparently merge the account by re-assigning
-      // the stored `userId` to the currently authenticated identity.
+    // Validate username availability
+    await validateUsernameAvailability(ctx, sanitizedData.username, identity.subject);
 
-      await ctx.db.patch(existingUserWithEmail._id, {
-        userId: identity.subject,
-        ...sanitizedData,
-        updatedAt: now,
-      });
-
-      return existingUserWithEmail._id;
+    // Handle email conflicts and potential account merging
+    const mergedUserId = await handleEmailConflict(ctx, sanitizedData.email, identity.subject, sanitizedData, now);
+    if (mergedUserId) {
+      return mergedUserId;
     }
 
-    // Use proper index query instead of filter
-    const existingUser = await ctx.db
-      .query("users")
-      .withIndex("by_user_id", (q) => q.eq("userId", identity.subject))
-      .first();
-
-    if (existingUser) {
-      // Update existing user
-      await ctx.db.patch(existingUser._id, {
-        ...sanitizedData,
-        updatedAt: now,
-      });
-      return existingUser._id;
-    } else {
-      // Create new user
-      const userId = await ctx.db.insert("users", {
-        userId: identity.subject,
-        ...sanitizedData,
-        createdAt: now,
-        updatedAt: now,
-      });
-      return userId;
-    }
+    // Upsert user record
+    return await upsertUserRecord(ctx, identity.subject, sanitizedData, now);
   },
 });
 
@@ -423,8 +446,16 @@ export const syncStripeDataToConvex = mutation({
           status: mappedStatus,
           priceId,
           planId,
-          currentPeriodStart: (subscription as any).current_period_start,
-          currentPeriodEnd: (subscription as any).current_period_end,
+          ...(() => {
+            const period = getSubscriptionPeriod(subscription);
+            return period ? {
+              currentPeriodStart: Math.floor(period.currentPeriodStart / 1000), // Convert back to seconds for Convex
+              currentPeriodEnd: Math.floor(period.currentPeriodEnd / 1000),
+            } : {
+              currentPeriodStart: 0,
+              currentPeriodEnd: 0,
+            };
+          })(),
           cancelAtPeriodEnd: !!subscription.cancel_at_period_end,
           paymentMethod,
           lastSyncAt: now,
@@ -595,8 +626,18 @@ function mapSubscriptionStatus(stripeStatus: string): 'incomplete' | 'incomplete
 }
 
 function mapPriceIdToPlan(priceId: string): 'free' | 'pro' | 'enterprise' {
-  const pro = [process.env.STRIPE_PRICE_PRO_MONTH, process.env.STRIPE_PRICE_PRO_YEAR].filter(Boolean);
-  const enterprise = [process.env.STRIPE_PRICE_ENTERPRISE_MONTH, process.env.STRIPE_PRICE_ENTERPRISE_YEAR].filter(Boolean);
+  const pro = [
+    process.env.STRIPE_PRICE_PRO_MONTH, 
+    process.env.STRIPE_PRICE_PRO_YEAR,
+    process.env.STRIPE_PRO_MONTHLY_PRICE_ID,
+    process.env.STRIPE_PRO_YEARLY_PRICE_ID
+  ].filter(Boolean);
+  const enterprise = [
+    process.env.STRIPE_PRICE_ENTERPRISE_MONTH, 
+    process.env.STRIPE_PRICE_ENTERPRISE_YEAR,
+    process.env.STRIPE_ENTERPRISE_MONTHLY_PRICE_ID,
+    process.env.STRIPE_ENTERPRISE_YEARLY_PRICE_ID
+  ].filter(Boolean);
   
   if (enterprise.includes(priceId)) return 'enterprise';
   if (pro.includes(priceId)) return 'pro';
diff --git a/src/components/ChatInterface.tsx b/src/components/ChatInterface.tsx
index 1fed47d2..33c7ba10 100644
--- a/src/components/ChatInterface.tsx
+++ b/src/components/ChatInterface.tsx
@@ -977,167 +977,19 @@ const ChatInterface: React.FC = () => {
                   </DialogContent>
                 </Dialog>
 
-                <Dialog open={showWebsiteDialog} onOpenChange={setShowWebsiteDialog}>
-                  <DialogTrigger asChild>
-                    <Button 
-                      variant="outline" 
-                      size="lg"
-                      className="bg-card/80 backdrop-blur-sm border-2 hover:border-primary/50 transition-all duration-200"
-                    >
-                      <Globe className="w-4 h-4 mr-2" />
-                      Clone Website
-                    </Button>
-                  </DialogTrigger>
-                  <DialogContent className="max-w-2xl">
-                    <DialogHeader>
-                      <DialogTitle className="flex items-center gap-2">
-                        <Globe className="w-5 h-5 text-primary" />
-                        Website Analysis & Cloning
-                      </DialogTitle>
-                    </DialogHeader>
-                    <div className="space-y-4 pt-4">
-                      <div className="flex gap-2">
-                        <Input
-                          placeholder="Enter website URL to analyze (e.g., https://example.com)"
-                          value={websiteUrl}
-                          onChange={(e) => setWebsiteUrl(e.target.value)}
-                          onKeyDown={(e) => e.key === 'Enter' && handleWebsiteAnalysis()}
-                          className="flex-1"
-                        />
-                        <Button onClick={handleWebsiteAnalysis} disabled={!websiteUrl.trim() || isAnalyzingWebsite}>
-                          {isAnalyzingWebsite ? (
-                            <Loader2 className="w-4 h-4 animate-spin" />
-                          ) : (
-                            <Globe className="w-4 h-4" />
-                          )}
-                        </Button>
-                      </div>
-                      
-                      {websiteAnalysis && (
-                        <motion.div
-                          initial={{ opacity: 0, y: 10 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          className="space-y-4 max-h-96 overflow-y-auto"
-                        >
-                          <h4 className="font-medium text-sm">Website Analysis:</h4>
-                          <div className="p-4 border rounded-lg bg-muted/30">
-                            <div className="space-y-3 text-sm">
-                              <div>
-                                <span className="font-medium">URL:</span> 
-                                <a href={websiteAnalysis.url} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline ml-1">
-                                  {websiteAnalysis.url}
-                                </a>
-                              </div>
-                              {websiteAnalysis.title && (
-                                <div><span className="font-medium">Title:</span> {websiteAnalysis.title}</div>
-                              )}
-                              {websiteAnalysis.description && (
-                                <div><span className="font-medium">Description:</span> {websiteAnalysis.description}</div>
-                              )}
-                              {websiteAnalysis.technologies && websiteAnalysis.technologies.length > 0 && (
-                                <div>
-                                  <span className="font-medium">Technologies:</span>
-                                  <div className="flex flex-wrap gap-1 mt-1">
-                                    {websiteAnalysis.technologies.map((tech, index) => (
-                                      <Badge key={index} variant="secondary" className="text-xs">{tech}</Badge>
-                                    ))}
-                                  </div>
-                                </div>
-                              )}
-                              {websiteAnalysis.layout && (
-                                <div><span className="font-medium">Layout:</span> {websiteAnalysis.layout}</div>
-                              )}
-                              {websiteAnalysis.components && websiteAnalysis.components.length > 0 && (
-                                <div>
-                                  <span className="font-medium">Components:</span>
-                                  <div className="flex flex-wrap gap-1 mt-1">
-                                    {websiteAnalysis.components.map((comp, index) => (
-                                      <Badge key={index} variant="outline" className="text-xs">{comp}</Badge>
-                                    ))}
-                                  </div>
-                                </div>
-                              )}
-                              {websiteAnalysis.colorScheme && websiteAnalysis.colorScheme.length > 0 && (
-                                <div>
-                                  <span className="font-medium">Colors:</span>
-                                  <div className="flex gap-1 mt-1">
-                                    {websiteAnalysis.colorScheme.slice(0, 8).map((color, index) => (
-                                      <div 
-                                        key={index} 
-                                        className="w-6 h-6 rounded border"
-                                        style={{ backgroundColor: color }}
-                                        title={color}
-                                      />
-                                    ))}
-                                  </div>
-                                </div>
-                              )}
-                            </div>
-                            <div className="grid grid-cols-2 gap-2 mt-4">
-                              <Button 
-                                variant="secondary"
-                                onClick={async () => {
-                                  setIsCrawling(true);
-                                  try {
-                                    const result = await crawlSite(websiteAnalysis.url, { maxPages: 12, includeSitemap: true });
-                                    setCrawlPages(result.pages.map(p => ({ url: p.url, title: p.title })));
-                                    toast.success(`Crawled ${result.pages.length} pages with Firecrawl`);
-                                  } catch (err) {
-                                    toast.error(err instanceof Error ? err.message : 'Firecrawl failed');
-                                  } finally {
-                                    setIsCrawling(false);
-                                  }
-                                }}
-                                disabled={isCrawling}
-                              >
-                                {isCrawling ? <Loader2 className="w-4 h-4 animate-spin mr-2"/> : <Globe className="w-4 h-4 mr-2"/>}
-                                Crawl with Firecrawl
-                              </Button>
-                              <Button 
-                                className="w-full"
-                                onClick={() => {
-                                  handleWebsiteAnalysis();
-                                  setShowWebsiteDialog(false);
-                                }}
-                              >
-                                <Plus className="w-4 h-4 mr-2" />
-                                Add to Chat
-                              </Button>
-                            </div>
-                            {crawlPages.length > 0 && (
-                              <div className="mt-3">
-                                <h5 className="font-medium text-sm mb-2">Crawled Pages</h5>
-                                <div className="max-h-40 overflow-auto space-y-1 text-xs">
-                                  {crawlPages.slice(0, 20).map((p, i) => (
-                                    <div key={i} className="flex items-center justify-between gap-2">
-                                      <a href={p.url} target="_blank" rel="noopener noreferrer" className="text-primary truncate">
-                                        {p.title || p.url}
-                                      </a>
-                                      <a href={p.url} target="_blank" rel="noopener noreferrer" className="text-muted-foreground">
-                                        <ExternalLink className="w-3 h-3" />
-                                      </a>
-                                    </div>
-                                  ))}
-                                </div>
-                              </div>
-                            )}
-                            <Button 
-                              className="w-full mt-4" 
-                              onClick={() => {
-                                const summary = `Crawled ${crawlPages.length} pages from ${websiteAnalysis.url}. Key pages:\n` + crawlPages.slice(0,5).map(p=>`- ${p.title || p.url} (${p.url})`).join('\n');
-                                setInput(prev => prev + (prev ? '\n\n' : '') + summary + '\n\nUse these references to recreate the UI.');
-                                setShowWebsiteDialog(false);
-                              }}
-                            >
-                              <Plus className="w-4 h-4 mr-2" />
-                              Insert Crawl Summary
-                            </Button>
-                          </div>
-                        </motion.div>
-                      )}
-                    </div>
-                  </DialogContent>
-                </Dialog>
+                {/* Clone website feature simplified - button now directly adds prompt to chat */}
+                  <Button 
+                    variant="outline" 
+                    size="lg"
+                    className="bg-card/80 backdrop-blur-sm border-2 hover:border-primary/50 transition-all duration-200"
+                    onClick={() => {
+                      setInput(prev => prev + (prev ? '\n\n' : '') + 'Clone this website URL: ');
+                      toast.success('Clone prompt added to chat!');
+                    }}
+                  >
+                    <Globe className="w-4 h-4 mr-2" />
+                    Clone Website
+                  </Button>
               </motion.div>
 
               {/* Feature highlights */}
diff --git a/src/components/EnhancedChatInterface.tsx b/src/components/EnhancedChatInterface.tsx
index 38974e2a..8eca01de 100644
--- a/src/components/EnhancedChatInterface.tsx
+++ b/src/components/EnhancedChatInterface.tsx
@@ -1,43 +1,8 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback, memo } from 'react';
-import { Button } from '@/components/ui/button';
-import { Textarea } from '@/components/ui/textarea';
-import { Card, CardContent } from '@/components/ui/card';
+import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
-import { Badge } from '@/components/ui/badge';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
-import { SafeText } from '@/components/ui/SafeText';
-import { 
-  Send, 
-  User, 
-  Bot, 
-  Play, 
-  Copy, 
-  Check, 
-  Plus,
-  MessageSquare,
-  Trash2,
-  Edit3,
-  Sparkles,
-  Clock,
-  Zap,
-  Loader2,
-  Search,
-  Globe,
-  ExternalLink,
-  Link,
-  Code,
-  Palette,
-  Layers,
-  ArrowUp,
-  Mic,
-  Paperclip,
-  Settings,
-  Github,
-  GitBranch
-} from 'lucide-react';
+import { Button } from '@/components/ui/button';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useQuery, useMutation } from 'convex/react';
 import { api } from '../../convex/_generated/api';
@@ -48,159 +13,26 @@ import { executeCode, startSandbox } from '@/lib/sandbox';
 import { useAuth } from '@/hooks/useAuth';
 import { useAuth as useClerkAuth } from '@clerk/clerk-react';
 import { useUsageTracking } from '@/hooks/useUsageTracking';
-import AnimatedResultShowcase from './AnimatedResultShowcase';
-import { braveSearchService, type BraveSearchResult, type WebsiteAnalysis } from '@/lib/search-service';
-import { crawlSite } from '@/lib/firecrawl';
 import { toast } from 'sonner';
-import * as Sentry from '@sentry/react';
-import WebContainerFailsafe from './WebContainerFailsafe';
-import { DECISION_PROMPT_NEXT } from '@/lib/decisionPrompt';
-import { GitHubIntegration } from '@/components/GitHubIntegration';
-import type { GitHubRepo } from '@/lib/github-service';
-import { githubService } from '@/lib/github-service';
-import DiagramMessageComponent from './DiagramMessageComponent';
-
-const { logger } = Sentry;
-
-// Memoized Enhanced Message Component
-const EnhancedMessageComponent = memo(({ message, user, isUser, isFirstInGroup, formatTimestamp, copyToClipboard, copiedMessage, onApproveDiagram, onRequestDiagramChanges, isSubmittingDiagram }: {
-  message: ConvexMessage;
-  user: { avatarUrl?: string; email?: string; fullName?: string } | null;
-  isUser: boolean;
-  isFirstInGroup: boolean;
-  formatTimestamp: (timestamp: number) => string;
-  copyToClipboard: (text: string, messageId: string) => Promise<void>;
-  copiedMessage: string | null;
-  onApproveDiagram?: (messageId: string) => Promise<void>;
-  onRequestDiagramChanges?: (messageId: string, feedback: string) => Promise<void>;
-  isSubmittingDiagram?: boolean;
-}) => {
-  const hasDiagram = message.metadata?.diagramData;
-
-  return (
-    <div className="space-y-4">
-      <Card className={`
-        transition-smooth group-hover:scale-[1.01]
-        ${isUser 
-          ? 'chat-bubble-user ml-auto' 
-          : 'chat-bubble-assistant'
-        }
-        ${isFirstInGroup ? '' : (isUser ? 'rounded-tr-lg' : 'rounded-tl-lg')}
-      `}>
-        <CardContent className="p-4 relative">
-          <div className="space-y-3">
-            <SafeText 
-              className={`text-sm leading-relaxed ${
-                isUser ? 'text-foreground' : 'text-foreground/90'
-              }`}
-            >
-              {message.content}
-            </SafeText>
-            
-            {message.metadata?.model && (
-              <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                <Badge variant="outline" className="glass text-xs">
-                  {message.metadata.model}
-                </Badge>
-                {message.metadata.tokens && (
-                  <span>{message.metadata.tokens} tokens</span>
-                )}
-                {message.metadata.cost && (
-                  <span>${message.metadata.cost.toFixed(4)}</span>
-                )}
-                {hasDiagram && (
-                  <Badge variant="outline" className="glass text-xs text-blue-300">
-                    Contains Diagram
-                  </Badge>
-                )}
-              </div>
-            )}
-          </div>
-
-          <div className={`absolute top-2 ${isUser ? 'left-2' : 'right-2'} opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1`}>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => copyToClipboard(message.content, message._id)}
-              className="h-6 w-6 p-0 glass-hover"
-            >
-              {copiedMessage === message._id ? (
-                <Check className="w-3 h-3 text-green-400" />
-              ) : (
-                <Copy className="w-3 h-3" />
-              )}
-            </Button>
-          </div>
-
-          <div className={`text-xs text-muted-foreground mt-2 ${
-            isUser ? 'text-right' : 'text-left'
-          }`}>
-            {formatTimestamp(message.createdAt)}
-          </div>
-        </CardContent>
-      </Card>
 
-      {/* Diagram Component */}
-      {hasDiagram && onApproveDiagram && onRequestDiagramChanges && (
-        <DiagramMessageComponent
-          diagramData={message.metadata.diagramData}
-          messageId={message._id}
-          onApprove={onApproveDiagram}
-          onRequestChanges={onRequestDiagramChanges}
-          isSubmitting={isSubmittingDiagram}
-        />
-      )}
-    </div>
-  );
-});
-
-// Security constants for input validation
-const MAX_MESSAGE_LENGTH = 10000;
-const MAX_TITLE_LENGTH = 100;
-const MIN_TITLE_LENGTH = 1;
+// Import extracted components
+import { ChatSidebar } from './chat/ChatSidebar';
+import { ChatMessage } from './chat/ChatMessage';
+import { ChatInput } from './chat/ChatInput';
+import { WelcomeScreen } from './chat/WelcomeScreen';
+import { ErrorBoundary } from './ErrorBoundary';
+import GitHubIntegration from './GitHubIntegration';
+import DiagramMessageComponent from './DiagramMessageComponent';
 
-// XSS protection: sanitize text input
-const sanitizeText = (text: string): string => {
-  return text
-    .replace(/[<>'"&]/g, (char) => {
-      const chars: { [key: string]: string } = {
-        '<': '&lt;',
-        '>': '&gt;',
-        "'": '&#x27;',
-        '"': '&quot;',
-        '&': '&amp;'
-      };
-      return chars[char] || char;
-    })
-    .trim();
-};
+// Import utilities
+import { validateInput, MAX_MESSAGE_LENGTH } from '@/utils/security';
+import { throttle, debounce } from '@/utils/performance';
 
-// Validate input length and content
-const validateInput = (text: string, maxLength: number): { isValid: boolean; error?: string } => {
-  if (!text || text.trim().length === 0) {
-    return { isValid: false, error: 'Input cannot be empty' };
-  }
-  if (text.length > maxLength) {
-    return { isValid: false, error: `Input too long. Maximum ${maxLength} characters allowed` };
-  }
-  // Check for potentially malicious patterns
-  const suspiciousPatterns = [
-    /<script/i,
-    /javascript:/i,
-    /vbscript:/i,
-    /onload=/i,
-    /onerror=/i,
-    /onclick=/i
-  ];
-  
-  for (const pattern of suspiciousPatterns) {
-    if (pattern.test(text)) {
-      return { isValid: false, error: 'Invalid content detected' };
-    }
-  }
-  
-  return { isValid: true };
-};
+// Import additional required modules
+import { searchWithBrave, type BraveSearchResult } from '@/lib/search-service';
+import { crawlWebsite, type WebsiteAnalysis } from '@/lib/firecrawl';
+import type { GitHubRepo } from '@/lib/github-service';
+import { logger } from '@/lib/error-handler';
 
 interface ConvexMessage {
   _id: string;
@@ -243,9 +75,7 @@ const EnhancedChatInterface: React.FC = () => {
   const [input, setInput] = useState('');
   const [isTyping, setIsTyping] = useState(false);
   const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
-  const [isNewChatOpen, setIsNewChatOpen] = useState(false);
   const [copiedMessage, setCopiedMessage] = useState<string | null>(null);
-  const [sessionStarted, setSessionStarted] = useState(false);
   const [sidebarExpanded, setSidebarExpanded] = useState<boolean>(false);
 
   // Enhanced UI state
@@ -255,420 +85,168 @@ const EnhancedChatInterface: React.FC = () => {
   const [websiteAnalysis, setWebsiteAnalysis] = useState<WebsiteAnalysis | null>(null);
   const [isWebsiteDialogOpen, setIsWebsiteDialogOpen] = useState(false);
   const [websiteUrl, setWebsiteUrl] = useState('');
-  
-  // Enhanced animations
-  const [messageAnimations, setMessageAnimations] = useState<{ [key: string]: boolean }>({});
+  const [isSubmittingDiagram, setIsSubmittingDiagram] = useState(false);
   
   // GitHub Integration state
   const [selectedRepo, setSelectedRepo] = useState<GitHubRepo | null>(null);
   const [githubContext, setGithubContext] = useState<string>('');
-  const [isGithubMode, setIsGithubMode] = useState(false);
 
-  // Diagram state
-  const [isSubmittingDiagram, setIsSubmittingDiagram] = useState(false);
+  // Code execution
+  const [codeBlocks, setCodeBlocks] = useState<CodeBlock[]>([]);
+  const [sandboxReady, setSandboxReady] = useState(false);
 
+  // Refs
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const inputContainerRef = useRef<HTMLDivElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   // Convex queries and mutations
-  const chatsData = useQuery(api.chats.getUserChats, {});
-  const messagesData = useQuery(
-    api.messages.getChatMessages,
-    selectedChatId ? { chatId: selectedChatId as Id<'chats'> } : "skip"
-  );
-
-  // Ensure arrays are properly handled and limit messages for performance
-  const chats = React.useMemo(() => {
-    const chatsArray = chatsData?.chats;
-    return Array.isArray(chatsArray) ? chatsArray : [];
-  }, [chatsData?.chats]);
-  
-  const messages = React.useMemo(() => {
-    const messagesArray = messagesData?.messages;
-    const validMessages = Array.isArray(messagesArray) ? messagesArray : [];
-    // Limit to last 100 messages to prevent memory issues
-    return validMessages.slice(-100);
-  }, [messagesData?.messages]);
-  
+  const chats = useQuery(api.chats.getUserChats, user ? { userId: user.id } : 'skip');
+  const messages = useQuery(api.messages.getChatMessages, selectedChatId ? { chatId: selectedChatId as Id<'chats'> } : 'skip');
   const createChatMutation = useMutation(api.chats.createChat);
-  const addMessageMutation = useMutation(api.messages.createMessage);
+  const createMessageMutation = useMutation(api.messages.createMessage);
   const updateMessageMutation = useMutation(api.messages.updateMessage);
   const deleteChatMutation = useMutation(api.chats.deleteChat);
-  const updateChatTitleMutation = useMutation(api.chats.updateChat);
 
-  // Auto-scroll to bottom when messages change
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  // Initialize sandbox on component mount for better performance
-  useEffect(() => {
-    const warmUpSandbox = async () => {
-      try {
-        await startSandbox();
-        logger.info('Sandbox warmed up successfully');
-      } catch (error) {
-        logger.warn('Sandbox warm-up failed:', error);
-      }
-    };
+  // Utility functions
+  const formatTimestamp = useCallback((timestamp: number) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60));
     
-    warmUpSandbox();
+    if (diffInMinutes < 1) return 'Just now';
+    if (diffInMinutes < 60) return `${diffInMinutes}m ago`;
+    if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h ago`;
+    if (diffInMinutes < 10080) return `${Math.floor(diffInMinutes / 1440)}d ago`;
+    return date.toLocaleDateString();
   }, []);
 
-  // Enhanced auto-resize for textarea
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      const scrollHeight = Math.min(textareaRef.current.scrollHeight, 200);
-      textareaRef.current.style.height = `${scrollHeight}px`;
-    }
-  }, [input]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    const validation = validateInput(input, MAX_MESSAGE_LENGTH);
-    if (!validation.isValid) {
-      toast.error(validation.error);
-      return;
-    }
-    
-    const sanitizedInput = sanitizeText(input);
-    if (!sanitizedInput.trim()) return;
-    
-    // Enhance message with GitHub context if available
-    const enhancedInput = await enhanceMessageWithGitHub(sanitizedInput);
-
-    if (!sessionStarted) {
-      setSessionStarted(true);
-    }
-
+  // Chat management
+  const startNewChat = useCallback(async () => {
     try {
-      let currentChatId = selectedChatId;
+      if (!user) return;
       
-      if (!currentChatId) {
-        const newChat = await createChatMutation({
-          title: 'New Chat',
-        });
-        currentChatId = newChat;
-        setSelectedChatId(currentChatId);
-      }
-
-      // Add user message
-      await addMessageMutation({
-        chatId: currentChatId as Id<'chats'>,
-        content: sanitizedInput, // Store original user input
-        role: 'user',
-        metadata: {}
+      const chatId = await createChatMutation({
+        userId: user.id,
+        title: "New Chat"
       });
-
+      setSelectedChatId(chatId);
       setInput('');
-      setIsTyping(true);
-
-      // Generate AI response with diagram support
-      try {
-        // Use diagram-aware AI generation
-        const result = await generateDiagramResponse(enhancedInput);
-        const assistantResponse = result.response;
-        const diagramData = result.diagramData;
-
-        // Create metadata object with diagram data if present
-        const metadata: {
-          diagramData?: {
-            type: 'mermaid' | 'flowchart' | 'sequence' | 'gantt';
-            diagramText: string;
-            isApproved?: boolean;
-            userFeedback?: string;
-            version: number;
-          };
-        } = {};
-        if (diagramData) {
-          metadata.diagramData = diagramData;
-        }
-
-        // Add assistant message with diagram data
-        const assistantMessageId = await addMessageMutation({
-          chatId: currentChatId as Id<'chats'>,
-          content: assistantResponse,
-          role: 'assistant',
-          metadata
-        });
-        
-        // Auto-generate title if this is the first exchange
-        if (messages?.length === 0) {
-          try {
-            const title = await generateChatTitleFromMessages([
-              { role: 'user', content: sanitizedInput },
-              { role: 'assistant', content: assistantResponse }
-            ]);
-            await updateChatTitleMutation({
-              chatId: currentChatId as Id<'chats'>,
-              title: title.slice(0, MAX_TITLE_LENGTH)
-            });
-          } catch (titleError) {
-            logger.warn('Title generation failed:', titleError);
-          }
-        }
-
-        // Refresh subscription data
-        try {
-          await getSubscription();
-        } catch (error) {
-          logger.warn('Failed to refresh subscription data:', error);
-        }
-
-      } catch (aiError) {
-        logger.error('AI response failed:', aiError);
-        toast.error('Failed to generate AI response. Please try again.');
-        
-        await addMessageMutation({
-          chatId: currentChatId as Id<'chats'>,
-          content: 'I apologize, but I encountered an error while processing your request. Please try again.',
-          role: 'assistant',
-          metadata: {}
-        });
-      }
-
     } catch (error) {
-      logger.error('Chat submission failed:', error);
-      
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      
-      // Handle specific error types with helpful messages
-      if (errorMessage.includes('Free plan limit reached')) {
-        toast.error('Free plan limit reached! You can create up to 5 chats. Upgrade to Pro for unlimited chats.');
-      } else if (errorMessage.includes('Rate limit exceeded')) {
-        toast.error('Please wait a moment before creating another chat.');
-      } else {
-        toast.error('Failed to send message. Please try again.');
-      }
-    } finally {
-      setIsTyping(false);
+      logger.error('Failed to create new chat:', error);
+      toast.error('Failed to create new chat');
     }
-  };
+  }, [user, createChatMutation]);
 
-  // Memoized clipboard function to prevent unnecessary re-renders
-  const copyToClipboard = useCallback(async (text: string, messageId: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopiedMessage(messageId);
-      toast.success('Message copied to clipboard');
-      
-      setTimeout(() => {
-        setCopiedMessage(null);
-      }, 2000);
-    } catch (error) {
-      logger.error('Clipboard copy failed:', error);
-      toast.error('Failed to copy message');
-    }
+  const selectChat = useCallback((chatId: string) => {
+    setSelectedChatId(chatId);
   }, []);
 
-  const deleteChat = async (chatId: string) => {
+  const deleteChat = useCallback(async (chatId: string) => {
     try {
       await deleteChatMutation({ chatId: chatId as Id<'chats'> });
       if (selectedChatId === chatId) {
         setSelectedChatId(null);
-        setSessionStarted(false);
       }
-      toast.success('Chat deleted successfully');
+      toast.success('Chat deleted');
     } catch (error) {
-      logger.error('Chat deletion failed:', error);
+      logger.error('Failed to delete chat:', error);
       toast.error('Failed to delete chat');
     }
-  };
-
-  const startNewChat = () => {
-    setSelectedChatId(null);
-    setSessionStarted(false);
-    setInput('');
-    setIsNewChatOpen(false);
-    toast.success('Started new chat');
-  };
-
-  const selectChat = (chatId: string) => {
-    setSelectedChatId(chatId);
-    setSessionStarted(true);
-    setSidebarExpanded(false);
-  };
+  }, [deleteChatMutation, selectedChatId]);
 
-  // Enhanced web search with improved UX
-  const searchWeb = async (query: string) => {
-    if (!query.trim()) return;
-    
-    try {
-      setIsSearchOpen(true);
-      const results = await braveSearchService.search(query);
-      setSearchResults(results);
-      toast.success(`Found ${results.length} results for "${query}"`);
-    } catch (error) {
-      logger.error('Web search failed:', error);
-      toast.error('Search failed. Please try again.');
-    }
-  };
+  // Message handling
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!input.trim() || isTyping || !user) return;
 
-  // Enhanced website analysis
-  const analyzeWebsite = async (url: string) => {
-    if (!url.trim()) {
-      toast.error('Please enter a valid URL');
+    const validation = validateInput(input, MAX_MESSAGE_LENGTH);
+    if (!validation.isValid) {
+      toast.error(validation.error);
       return;
     }
 
+    const userInput = input.trim();
+    setInput('');
+    setIsTyping(true);
+
     try {
-      setIsAnalyzingWebsite(true);
-      const analysis = await crawlSite(url);
-      // For now, just use basic analysis
-      const basicAnalysis = {
-        url,
-        title: 'Website analyzed',
-        description: 'Website content processed',
-        technologies: ['Web'],
-        colorScheme: ['#000000'],
-        content: 'Website content available'
-      };
-      setWebsiteAnalysis(basicAnalysis);
+      let currentChatId = selectedChatId;
       
-      if (basicAnalysis) {
-        const analysisSummary = 
-          `**Website Analysis for ${url}:**\n\n` +
-          `**Title:** ${basicAnalysis.title || 'Not detected'}\n\n` +
-          `**Description:** ${basicAnalysis.description || 'Not detected'}\n\n` +
-          `**Technologies:** ${basicAnalysis.technologies?.join(', ') || 'Not detected'}\n\n` +
-          `**Color Scheme:** ${basicAnalysis.colorScheme?.slice(0, 5).join(', ') || 'Not detected'}\n\n` +
-          `**Content Preview:** ${basicAnalysis.content?.substring(0, 500) || 'No content extracted'}...\n\n`;
-        
-        setInput(prev => prev + (prev ? '\n\n' : '') + `Please help me clone this website:\n\n${analysisSummary}\n\nI want to recreate: `);
-        toast.success('Website analyzed successfully!');
+      // Create new chat if none selected
+      if (!currentChatId) {
+        currentChatId = await createChatMutation({
+          userId: user.id,
+          title: "New Chat"
+        });
+        setSelectedChatId(currentChatId);
       }
+
+      // Create user message
+      await createMessageMutation({
+        chatId: currentChatId as Id<'chats'>,
+        content: userInput,
+        role: 'user'
+      });
+
+      // Generate AI response
+      const subscription = await getSubscription();
+      const aiResponse = await streamAIResponse(userInput, [], subscription?.tier || 'free');
       
+      // Create assistant message
+      await createMessageMutation({
+        chatId: currentChatId as Id<'chats'>,
+        content: aiResponse.content,
+        role: 'assistant',
+        metadata: {
+          model: aiResponse.model,
+          tokens: aiResponse.usage?.total_tokens,
+          cost: aiResponse.cost
+        }
+      });
+
+      // Auto-generate chat title if first message
+      if (messages?.length === 0) {
+        const title = await generateChatTitleFromMessages([
+          { content: userInput, role: 'user' },
+          { content: aiResponse.content, role: 'assistant' }
+        ]);
+        // Update chat title (would need a mutation for this)
+      }
+
     } catch (error) {
-      logger.error('Website analysis error:', error);
-      toast.error(error instanceof Error ? error.message : 'Website analysis failed');
+      logger.error('Chat error:', error);
+      toast.error('Failed to send message');
     } finally {
-      setIsAnalyzingWebsite(false);
-      setIsWebsiteDialogOpen(false);
+      setIsTyping(false);
     }
-  };
-
-  const addSearchResultToInput = (result: BraveSearchResult) => {
-    const resultText = `Reference: ${result.title} - ${result.description} (${result.url})`;
-    setInput(prev => prev + (prev ? '\n\n' : '') + resultText + '\n\n');
-    toast.success('Search result added to message');
-  };
-
-  // Memoized timestamp functions to prevent recalculation
-  const formatTimestamp = useCallback((timestamp: number) => {
-    return new Date(timestamp).toLocaleTimeString([], { 
-      hour: '2-digit', 
-      minute: '2-digit' 
-    });
-  }, []);
+  }, [input, isTyping, user, selectedChatId, messages, createChatMutation, createMessageMutation, getSubscription]);
 
-  const isSameDay = useCallback((a: number, b: number) => {
-    const da = new Date(a);
-    const db = new Date(b);
-    return (
-      da.getFullYear() === db.getFullYear() &&
-      da.getMonth() === db.getMonth() &&
-      da.getDate() === db.getDate()
-    );
+  // GitHub integration handlers
+  const handleRepoSelected = useCallback((repo: GitHubRepo) => {
+    setSelectedRepo(repo);
+    setGithubContext(`Working with repository: ${repo.full_name}`);
   }, []);
 
-  const formatDateHeader = useCallback((timestamp: number) => {
-    return new Date(timestamp).toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    });
+  const handlePullRequestCreated = useCallback((prUrl: string) => {
+    toast.success(`Pull request created: ${prUrl}`);
   }, []);
 
-  // GitHub Integration Functions
-  const handleRepoSelected = (repo: GitHubRepo) => {
-    setSelectedRepo(repo);
-    setIsGithubMode(true);
-    
-    const repoContext = `Repository: ${repo.full_name}\n` +
-      `Description: ${repo.description || 'No description'}\n` +
-      `Language: ${repo.language || 'Unknown'}\n` +
-      `Default Branch: ${repo.default_branch}\n` +
-      `Type: ${repo.private ? 'Private' : 'Public'} repository\n\n`;
-    
-    setGithubContext(repoContext);
-    
-    // Add context to the current input
-    setInput(prev => {
-      const newInput = `I'm working with this GitHub repository:\n\n${repoContext}` +
-        `Please help me analyze and suggest improvements for this codebase. ` +
-        `${prev ? '\n\n' + prev : ''}`;
-      return newInput;
-    });
-    
-    toast.success(`Repository ${repo.full_name} loaded for AI analysis!`);
-  };
-
-  const handlePullRequestCreated = (prUrl: string, repo: GitHubRepo) => {
-    toast.success('Pull request created successfully!');
-    
-    // Add success message to chat
-    if (selectedChatId) {
-      addMessageMutation({
-        chatId: selectedChatId as Id<'chats'>,
-        content: `✅ **Pull Request Created Successfully!**\n\n` +
-          `Repository: ${repo.full_name}\n` +
-          `Pull Request: [View PR](${prUrl})\n\n` +
-          `The changes have been applied and are ready for review. ` +
-          `You can now review the pull request on GitHub and merge it when ready.`,
-        role: 'assistant',
-        metadata: {}
-      }).catch(error => {
-        logger.error('Failed to add PR success message:', error);
-      });
-    }
-  };
-
-  const detectGithubUrls = (text: string): string[] => {
-    const githubUrlRegex = /https?:\/\/github\.com\/[\w\-.]+\/[\w\-.]+(?:\/[^\s]*)?/g;
-    return text.match(githubUrlRegex) || [];
-  };
-
-  const enhanceMessageWithGitHub = async (message: string): Promise<string> => {
-    let enhancedMessage = message;
-    
-    // If GitHub mode is active, add repository context
-    if (isGithubMode && selectedRepo && githubContext) {
-      enhancedMessage = githubContext + '\n' + message;
-    }
-    
-    // Detect and suggest GitHub integration
-    const githubUrls = detectGithubUrls(message);
-    if (githubUrls.length > 0 && !isGithubMode) {
-      enhancedMessage += '\n\n[Assistant Note: I detected GitHub repository URLs in your message. ' +
-        'Would you like to use the GitHub integration to analyze the repository, ' +
-        'make changes, and create pull requests directly?]';
-    }
-    
-    return enhancedMessage;
-  };
-
-  // Diagram approval handlers
-  const handleApproveDiagram = async (messageId: string) => {
+  // Diagram handlers
+  const handleApproveDiagram = useCallback(async (messageId: string) => {
     setIsSubmittingDiagram(true);
     try {
-      // Get the existing message to preserve its content and metadata
-      const existingMessage = messages.find(m => m._id === messageId);
-      if (!existingMessage) {
-        throw new Error('Message not found');
-      }
+      const existingMessage = messages?.find(m => m._id === messageId);
+      if (!existingMessage) throw new Error('Message not found');
       
-      // Update the message while preserving existing content and other metadata
       await updateMessageMutation({
         messageId: messageId as Id<'messages'>,
-        content: existingMessage.content, // Preserve original content instead of overwriting
+        content: existingMessage.content,
         metadata: {
-          ...existingMessage.metadata, // Preserve other metadata fields
+          ...existingMessage.metadata,
           diagramData: existingMessage.metadata?.diagramData ? {
-            ...existingMessage.metadata.diagramData, // Preserve existing diagram data
-            isApproved: true, // Only update the approval status
+            ...existingMessage.metadata.diagramData,
+            isApproved: true,
           } : undefined
         }
       });
@@ -680,707 +258,245 @@ const EnhancedChatInterface: React.FC = () => {
     } finally {
       setIsSubmittingDiagram(false);
     }
-  };
+  }, [messages, updateMessageMutation]);
 
-  const handleRequestDiagramChanges = async (messageId: string, feedback: string) => {
+  const handleRequestDiagramChanges = useCallback(async (messageId: string, feedback: string) => {
     setIsSubmittingDiagram(true);
     try {
-      const message = messages.find(m => m._id === messageId);
+      const message = messages?.find(m => m._id === messageId);
       if (!message?.metadata?.diagramData) {
         throw new Error('No diagram data found');
       }
 
-      const originalDiagram = message.metadata.diagramData;
-      
-      // Generate updated diagram based on feedback
       const updatedDiagram = await generateUpdatedDiagram(
-        originalDiagram.diagramText,
-        feedback,
-        originalDiagram.type,
-        originalDiagram.version
+        message.metadata.diagramData.diagramText,
+        feedback
       );
-
-      // Update the message with new diagram and feedback
+      
       await updateMessageMutation({
         messageId: messageId as Id<'messages'>,
-        content: message.content, // Keep original content
+        content: message.content,
         metadata: {
           ...message.metadata,
           diagramData: {
-            ...originalDiagram,
+            ...message.metadata.diagramData,
             diagramText: updatedDiagram.diagramText,
-            version: updatedDiagram.version,
-            isApproved: false,
             userFeedback: feedback,
+            version: (message.metadata.diagramData.version || 0) + 1
           }
         }
       });
       
-      toast.success('Diagram updated based on your feedback!');
+      toast.success('Diagram updated successfully!');
     } catch (error) {
       logger.error('Failed to update diagram:', error);
       toast.error('Failed to update diagram. Please try again.');
     } finally {
       setIsSubmittingDiagram(false);
     }
-  };
+  }, [messages, updateMessageMutation]);
 
-  if (authLoading) {
-    return (
-      <div className="flex items-center justify-center h-full bg-[var(--color-chat-bg)]">
-        <motion.div 
-          className="flex items-center space-x-3"
-          initial={{ opacity: 0, scale: 0.9 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.3 }}
-        >
-          <div className="animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent"></div>
-          <span className="text-muted-foreground text-lg">Loading ZapDev...</span>
-        </motion.div>
-      </div>
-    );
-  }
+  // Optimized auto-scroll to bottom
+  useEffect(() => {
+    const element = messagesEndRef.current;
+    if (element) {
+      // Use requestAnimationFrame for better performance
+      requestAnimationFrame(() => {
+        element.scrollIntoView({ behavior: 'smooth' });
+      });
+    }
+  }, [messages?.length]); // Only trigger on message count change, not content
 
-  if (!user) {
+  // Initialize sandbox with cleanup
+  useEffect(() => {
+    let isMounted = true;
+    const initSandbox = async () => {
+      try {
+        await startSandbox();
+        if (isMounted) {
+          setSandboxReady(true);
+        }
+      } catch (error) {
+        logger.warn('Sandbox initialization failed:', error);
+      }
+    };
+    initSandbox();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  // Memoized message list to prevent unnecessary re-renders
+  const memoizedMessages = useMemo(() => {
+    return messages || [];
+  }, [messages]);
+
+  // Memoized typing indicator
+  const typingIndicator = useMemo(() => {
+    if (!isTyping) return null;
     return (
-      <div className="flex items-center justify-center h-full bg-[var(--color-chat-bg)]">
-        <motion.div 
-          className="text-center"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-        >
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex gap-4 p-6 rounded-2xl bg-gradient-to-r from-gray-800/40 to-gray-700/30 border border-gray-600/20 mr-12"
+      >
+        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-gray-700 to-gray-800 border border-gray-600/30 flex items-center justify-center">
           <motion.div
-            className="w-20 h-20 mx-auto mb-6 p-4 rounded-full glass"
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-          >
-            <Bot className="w-full h-full text-primary" />
-          </motion.div>
-          <h3 className="text-2xl font-semibold mb-3 text-gradient-static">Please Sign In</h3>
-          <p className="text-muted-foreground text-lg">You need to be signed in to use ZapDev AI</p>
-        </motion.div>
-      </div>
+            animate={{ rotate: 360 }}
+            transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+            className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full"
+          />
+        </div>
+        <div className="flex-1">
+          <p className="text-muted-foreground">ZapDev AI is thinking...</p>
+        </div>
+      </motion.div>
     );
-  }
-
-  const hasMessages = messages && messages.length > 0;
-  const showSplitLayout = sessionStarted || hasMessages;
+  }, [isTyping]);
 
   return (
-    <div className="flex h-full bg-[var(--color-chat-bg)] text-foreground">
-      {/* Enhanced Welcome Hero */}
-      <AnimatePresence mode="wait">
-        {!showSplitLayout && (
-          <motion.div 
-            key="hero"
-            className="flex-1 flex flex-col relative overflow-hidden"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.5 }}
-          >
-            {/* Static background gradient - much more performant */}
-            <div className="absolute inset-0 pointer-events-none bg-gradient-to-br from-blue-500/5 via-purple-500/3 to-indigo-500/5" />
-
-            {/* Simplified particle effect - reduced from 20 to 5 particles */}
-            <div className="absolute inset-0 pointer-events-none overflow-hidden">
-              {[...Array(5)].map((_, i) => (
-                <div
-                  key={i}
-                  className="absolute w-1 h-1 bg-primary/10 rounded-full animate-pulse"
-                  style={{
-                    left: `${20 + i * 20}%`,
-                    top: `${30 + i * 10}%`,
-                    animationDelay: `${i * 2}s`
-                  }}
-                />
-              ))}
-            </div>
-
-            {/* Enhanced main content */}
-            <div className="flex-1 flex items-center justify-center px-6">
-              <motion.div
-                initial={{ opacity: 0, y: 30 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.8, ease: "easeOut" }}
-                className="text-center max-w-4xl w-full"
-              >
-                {/* Enhanced logo section */}
-                <motion.div
-                  initial={{ scale: 0.8, rotate: -10 }}
-                  animate={{ scale: 1, rotate: 0 }}
-                  transition={{ 
-                    duration: 1.2, 
-                    ease: "easeOut",
-                    type: "spring",
-                    stiffness: 100
-                  }}
-                  className="relative mb-8"
-                >
-                  <div className="relative">
-                    <div className="w-24 h-24 mx-auto mb-2 glass-elevated rounded-2xl flex items-center justify-center">
-                      <Zap className="w-12 h-12 text-gradient" />
-                    </div>
-                  </div>
-                </motion.div>
-
-                {/* Enhanced title */}
-                <motion.h1 
-                  className="text-6xl md:text-7xl lg:text-8xl font-bold mb-6 text-gradient animate-gradient tracking-tight"
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.8, delay: 0.3 }}
-                >
-                  ZapDev AI
-                </motion.h1>
-
-                <motion.p 
-                  className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl mx-auto text-pretty leading-relaxed"
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.8, delay: 0.5 }}
-                >
-                  Build, code, and create with the most advanced AI development assistant. 
-                  From concept to deployment in minutes.
-                </motion.p>
-
-                {/* Enhanced feature highlights */}
-                <motion.div 
-                  className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 max-w-4xl mx-auto"
-                  initial={{ opacity: 0, y: 30 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.8, delay: 0.7 }}
-                >
-                  {[
-                    { icon: Code, title: "Live Code Execution", desc: "Run and test code instantly with E2B sandbox" },
-                    { icon: Palette, title: "Smart UI Generation", desc: "Create beautiful interfaces with AI guidance" },
-                    { icon: Layers, title: "Full-Stack Development", desc: "Build complete applications end-to-end" }
-                  ].map((feature, index) => (
-                    <motion.div
-                      key={index}
-                      className="glass-elevated p-6 rounded-xl glass-hover"
-                      initial={{ opacity: 0, y: 20 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ duration: 0.5, delay: 0.8 + index * 0.1 }}
-                      whileHover={{ scale: 1.02, y: -2 }}
-                    >
-                      <feature.icon className="w-8 h-8 text-primary mb-3 mx-auto" />
-                      <h3 className="font-semibold text-lg mb-2">{feature.title}</h3>
-                      <p className="text-muted-foreground text-sm text-pretty">{feature.desc}</p>
-                    </motion.div>
-                  ))}
-                </motion.div>
-
-                {/* Enhanced input section */}
-                <motion.div
-                  initial={{ opacity: 0, scale: 0.95 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.8, delay: 1 }}
-                  className="max-w-3xl mx-auto"
-                >
-                  <form onSubmit={handleSubmit} className="space-y-6">
-                    {/* Enhanced input container */}
-                    <div className="relative">
-                      <div className="absolute -inset-0.5 bg-gradient-to-r from-primary/50 to-blue-600/50 rounded-2xl blur opacity-20"></div>
-                      <div className="relative glass-elevated rounded-2xl p-2">
-                        <Textarea
-                          ref={textareaRef}
-                          value={input}
-                          onChange={(e) => setInput(e.target.value)}
-                          placeholder="What would you like to build today? Describe your app, website, or coding challenge..."
-                          className="min-h-[120px] max-h-[300px] resize-none border-none bg-transparent text-lg placeholder:text-muted-foreground/70 focus:ring-0 focus-visible:ring-0 focus-visible:outline-none transition-smooth"
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                              handleSubmit(e);
-                            }
-                          }}
-                        />
-                        
-                        {/* Enhanced action buttons */}
-                        <div className="flex items-center justify-between pt-3 border-t border-white/10">
-                          <div className="flex items-center space-x-2">
-                            {/* Quick action buttons */}
-                            <Dialog open={isSearchOpen} onOpenChange={setIsSearchOpen}>
-                              <DialogTrigger asChild>
-                                <Button 
-                                  variant="ghost" 
-                                  size="sm" 
-                                  className="glass-hover rounded-lg"
-                                  type="button"
-                                >
-                                  <Search className="w-4 h-4 mr-2" />
-                                  Search Web
-                                </Button>
-                              </DialogTrigger>
-                              <DialogContent className="glass-elevated border-white/20">
-                                <DialogHeader>
-                                  <DialogTitle className="text-gradient-static">Web Search</DialogTitle>
-                                </DialogHeader>
-                                {/* Search content here */}
-                              </DialogContent>
-                            </Dialog>
-
-                            <Dialog open={isWebsiteDialogOpen} onOpenChange={setIsWebsiteDialogOpen}>
-                              <DialogTrigger asChild>
-                                <Button 
-                                  variant="ghost" 
-                                  size="sm" 
-                                  className="glass-hover rounded-lg"
-                                  type="button"
-                                >
-                                  <Globe className="w-4 h-4 mr-2" />
-                                  Clone Website
-                                </Button>
-                              </DialogTrigger>
-                              <DialogContent className="glass-elevated border-white/20">
-                                <DialogHeader>
-                                  <DialogTitle className="text-gradient-static">Analyze Website</DialogTitle>
-                                </DialogHeader>
-                                <div className="space-y-4">
-                                  <Input
-                                    value={websiteUrl}
-                                    onChange={(e) => setWebsiteUrl(e.target.value)}
-                                    placeholder="Enter website URL to analyze..."
-                                    className="glass"
-                                  />
-                                  <Button
-                                    onClick={() => analyzeWebsite(websiteUrl)}
-                                    disabled={isAnalyzingWebsite}
-                                    className="button-gradient w-full"
-                                  >
-                                    {isAnalyzingWebsite ? (
-                                      <>
-                                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                                        Analyzing...
-                                      </>
-                                    ) : (
-                                      'Analyze Website'
-                                    )}
-                                  </Button>
-                                </div>
-                              </DialogContent>
-                            </Dialog>
-                          </div>
-
-                          {/* Enhanced send button */}
-                          <Button
-                            type="submit"
-                            disabled={!input.trim() || isTyping}
-                            className="button-gradient px-8 py-3 text-base font-semibold transition-smooth"
-                          >
-                            {isTyping ? (
-                              <>
-                                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                                Creating...
-                              </>
-                            ) : (
-                              <>
-                                <ArrowUp className="w-4 h-4 mr-2" />
-                                Start Building
-                              </>
-                            )}
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Enhanced keyboard shortcut hint */}
-                    <motion.p 
-                      className="text-muted-foreground text-sm text-center"
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      transition={{ delay: 1.5 }}
-                    >
-                      Press <kbd className="glass px-2 py-1 rounded text-xs font-mono">Ctrl</kbd> + <kbd className="glass px-2 py-1 rounded text-xs font-mono">Enter</kbd> to send
-                    </motion.p>
-                  </form>
-                </motion.div>
-              </motion.div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Enhanced Split Layout */}
-      <AnimatePresence>
-        {showSplitLayout && (
-          <motion.div 
-            key="split"
-            className="flex-1 flex"
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -20 }}
-            transition={{ duration: 0.5 }}
-          >
-            {/* Enhanced Left Sidebar */}
-            <motion.div
-              onMouseEnter={() => setSidebarExpanded(true)}
-              onMouseLeave={() => setSidebarExpanded(false)}
-              className={`${
-                sidebarExpanded ? 'w-80' : 'w-12'
-              } glass border-r border-white/10 flex flex-col transition-smooth relative overflow-hidden`}
-              animate={{ width: sidebarExpanded ? 320 : 48 }}
-              transition={{ duration: 0.3, ease: "easeOut" }}
+    <ErrorBoundary>
+      <div className="min-h-screen bg-gradient-to-br from-gray-950 via-blue-950/20 to-gray-950 text-white relative overflow-hidden">
+        {/* Animated background elements */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-600/10 rounded-full blur-3xl animate-pulse" />
+          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl animate-pulse delay-1000" />
+          <div className="absolute top-3/4 left-3/4 w-64 h-64 bg-cyan-600/10 rounded-full blur-3xl animate-pulse delay-2000" />
+        </div>
+
+        <AnimatePresence mode="wait">
+          {!selectedChatId ? (
+            <WelcomeScreen onStartNewChat={startNewChat} />
+          ) : (
+            <motion.div 
+              key="split"
+              className="flex-1 flex"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.5 }}
             >
-              {/* Sidebar header */}
-              <div className="p-4 border-b border-white/10">
-                <motion.div 
-                  className="flex items-center gap-3"
-                  animate={{ opacity: sidebarExpanded ? 1 : 0 }}
-                  transition={{ delay: sidebarExpanded ? 0.1 : 0 }}
-                >
-                  <div className="w-8 h-8 glass-elevated rounded-lg flex items-center justify-center">
-                    <Zap className="w-4 h-4 text-primary" />
+              <ChatSidebar
+                sidebarExpanded={sidebarExpanded}
+                setSidebarExpanded={setSidebarExpanded}
+                chats={chats || []}
+                selectedChatId={selectedChatId}
+                startNewChat={startNewChat}
+                selectChat={selectChat}
+                deleteChat={deleteChat}
+                formatTimestamp={formatTimestamp}
+                user={user}
+              />
+
+              {/* Main chat area */}
+              <div className="flex-1 flex flex-col relative">
+                {/* Messages area */}
+                <ScrollArea className="flex-1 custom-scrollbar">
+                  <div className="p-6 space-y-6 max-w-4xl mx-auto">
+                    {memoizedMessages.map((message, index) => (
+                      <ChatMessage
+                        key={message._id}
+                        message={message}
+                        user={user}
+                        copiedMessage={copiedMessage}
+                        setCopiedMessage={setCopiedMessage}
+                        isLast={index === memoizedMessages.length - 1}
+                        handleApproveDiagram={handleApproveDiagram}
+                        handleRequestDiagramChanges={handleRequestDiagramChanges}
+                        isSubmittingDiagram={isSubmittingDiagram}
+                      />
+                    ))}
+                    
+                    {typingIndicator}
+                    
+                    <div ref={messagesEndRef} />
                   </div>
-                  {sidebarExpanded && (
-                    <div>
-                      <h3 className="font-semibold text-gradient-static">ZapDev</h3>
-                      <p className="text-xs text-muted-foreground">AI Development Assistant</p>
-                    </div>
-                  )}
-                </motion.div>
-              </div>
-
-              {/* New chat button */}
-              <div className="p-3">
-                <Button
-                  onClick={startNewChat}
-                  className="w-full glass-hover justify-start"
-                  variant="ghost"
-                >
-                  <Plus className="w-4 h-4" />
-                  {sidebarExpanded && <span className="ml-2">New Chat</span>}
-                </Button>
-              </div>
-
-              {/* Chat list */}
-              <ScrollArea className="flex-1 custom-scrollbar">
-                <div className="p-3 space-y-2">
-                  {Array.isArray(chats) && chats.map((chat) => (
-                    <motion.button
-                      key={chat._id}
-                      onClick={() => selectChat(chat._id)}
-                      className={`w-full text-left p-3 rounded-lg glass-hover transition-smooth group relative ${
-                        selectedChatId === chat._id 
-                          ? 'chat-bubble-user' 
-                          : 'glass'
-                      }`}
-                      whileHover={{ scale: 1.02, x: 2 }}
-                      whileTap={{ scale: 0.98 }}
-                    >
-                      <div className="flex items-center gap-3">
-                        <MessageSquare className="w-4 h-4 text-primary flex-shrink-0" />
-                        {sidebarExpanded && (
-                          <div className="min-w-0 flex-1">
-                            <p className="font-medium truncate text-sm">
-                              {chat.title}
-                            </p>
-                            <p className="text-xs text-muted-foreground">
-                              {formatTimestamp(chat.updatedAt)}
-                            </p>
-                          </div>
-                        )}
-                      </div>
-                      
-                      {sidebarExpanded && (
-                        <Button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            deleteChat(chat._id);
-                          }}
-                          variant="ghost"
-                          size="sm"
-                          className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 p-0"
-                        >
-                          <Trash2 className="w-3 h-3" />
-                        </Button>
-                      )}
-                    </motion.button>
-                  ))}
-                </div>
-              </ScrollArea>
-
-              {/* Sidebar footer */}
-              {sidebarExpanded && (
-                <motion.div 
-                  className="p-4 border-t border-white/10"
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.2 }}
-                >
-                                              <div className="flex items-center gap-3">
-                              <Avatar className="h-8 w-8">
-                                <AvatarImage src={user?.avatarUrl} />
-                                <AvatarFallback>
-                                  <User className="w-4 h-4" />
-                                </AvatarFallback>
-                              </Avatar>
-                              <div className="min-w-0 flex-1">
-                                <p className="text-sm font-medium truncate">
-                                  {user?.fullName || 'User'}
-                                </p>
-                                <p className="text-xs text-muted-foreground truncate">
-                                  {user?.email}
-                                </p>
-                              </div>
-                            </div>
-                </motion.div>
-              )}
-            </motion.div>
-
-            {/* Enhanced Main Chat Area */}
-            <div className="flex-1 flex flex-col min-h-0 bg-[var(--color-chat-bg)]">
-              {/* Chat messages */}
-              <ScrollArea className="flex-1 custom-scrollbar">
-                <div className="p-6 space-y-6 max-w-4xl mx-auto w-full">
-                  {Array.isArray(messages) && messages.map((message, index) => {
-                    const isUser = message.role === 'user';
-                    const prevMessage = messages[index - 1];
-                    const showDateHeader = !prevMessage || !isSameDay(message.createdAt, prevMessage.createdAt);
-                    const isFirstInGroup = !prevMessage || prevMessage.role !== message.role;
-                    const nextMessage = messages[index + 1];
-                    const isLastInGroup = !nextMessage || nextMessage.role !== message.role;
-
-                    return (
-                      <div key={message._id} className="space-y-4">
-                        {showDateHeader && (
-                          <div className="text-center">
-                            <div className="glass px-4 py-2 rounded-full inline-block">
-                              <span className="text-sm text-muted-foreground font-medium">
-                                {formatDateHeader(message.createdAt)}
-                              </span>
-                            </div>
-                          </div>
-                        )}
-
-                        <div className={`group flex gap-4 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
-                          {/* Enhanced Avatar */}
-                          {isFirstInGroup && (
-                            <div className="flex-shrink-0">
-                              <Avatar className="h-10 w-10">
-                                {isUser ? (
-                                  <AvatarImage src={user?.avatarUrl} />
-                                ) : (
-                                  <div className="glass-elevated h-full w-full flex items-center justify-center">
-                                    <Bot className="w-5 h-5 text-primary" />
-                                  </div>
-                                )}
-                                <AvatarFallback>
-                                  {isUser ? <User className="w-5 h-5" /> : <Bot className="w-5 h-5 text-primary" />}
-                                </AvatarFallback>
-                              </Avatar>
-                            </div>
-                          )}
-
-                          {/* Enhanced Message Bubble */}
-                          <div className={`flex-1 max-w-3xl ${!isFirstInGroup ? (isUser ? 'mr-14' : 'ml-14') : ''}`}>
-                            <EnhancedMessageComponent
-                              message={message}
-                              user={user}
-                              isUser={isUser}
-                              isFirstInGroup={isFirstInGroup}
-                              formatTimestamp={formatTimestamp}
-                              copyToClipboard={copyToClipboard}
-                              copiedMessage={copiedMessage}
-                              onApproveDiagram={handleApproveDiagram}
-                              onRequestDiagramChanges={handleRequestDiagramChanges}
-                              isSubmittingDiagram={isSubmittingDiagram}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
+                </ScrollArea>
+
+                {/* Input area */}
+                <ChatInput
+                  input={input}
+                  setInput={setInput}
+                  textareaRef={textareaRef}
+                  handleSubmit={handleSubmit}
+                  isTyping={isTyping}
+                  isSearchOpen={isSearchOpen}
+                  setIsSearchOpen={setIsSearchOpen}
+                />
 
-                  {/* Enhanced typing indicator */}
-                  <AnimatePresence>
-                    {isTyping && (
-                      <motion.div
-                        initial={{ opacity: 0, y: 20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        exit={{ opacity: 0, y: -20 }}
-                        className="flex gap-4"
-                      >
-                        <Avatar className="h-10 w-10">
-                          <div className="glass-elevated h-full w-full flex items-center justify-center">
-                            <motion.div
-                              animate={{ rotate: 360 }}
-                              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
-                            >
-                              <Bot className="w-5 h-5 text-primary" />
-                            </motion.div>
-                          </div>
-                        </Avatar>
-                        
-                        <Card className="chat-bubble-assistant max-w-xs">
-                          <CardContent className="p-4">
-                            <div className="flex items-center space-x-2">
-                              <span className="text-sm text-muted-foreground">AI is thinking</span>
-                              <div className="flex space-x-1">
-                                {[0, 1, 2].map((i) => (
-                                  <motion.div
-                                    key={i}
-                                    className="w-2 h-2 bg-primary rounded-full"
-                                    animate={{ 
-                                      scale: [1, 1.2, 1], 
-                                      opacity: [0.4, 1, 0.4] 
-                                    }}
-                                    transition={{ 
-                                      duration: 1.5, 
-                                      repeat: Infinity, 
-                                      delay: i * 0.2 
-                                    }}
-                                  />
-                                ))}
-                              </div>
+                {/* Search Dialog */}
+                <Dialog open={isSearchOpen} onOpenChange={setIsSearchOpen}>
+                  <DialogContent className="sm:max-w-[600px] glass-card border-white/10">
+                    <DialogHeader>
+                      <DialogTitle className="text-gradient-static">Search the Web</DialogTitle>
+                    </DialogHeader>
+                    <div className="space-y-4">
+                      <Input
+                        placeholder="Search query..."
+                        className="glass-input"
+                        onKeyDown={async (e) => {
+                          if (e.key === 'Enter') {
+                            try {
+                              const results = await searchWithBrave(e.currentTarget.value);
+                              setSearchResults(results);
+                            } catch (error) {
+                              toast.error('Search failed');
+                            }
+                          }
+                        }}
+                      />
+                      {searchResults.length > 0 && (
+                        <ScrollArea className="h-64">
+                          {searchResults.map((result, index) => (
+                            <div key={index} className="p-3 border-b border-white/10 last:border-0">
+                              <h4 className="font-medium text-sm">{result.title}</h4>
+                              <p className="text-xs text-muted-foreground mt-1">{result.description}</p>
+                              <a href={result.url} target="_blank" rel="noopener noreferrer" 
+                                 className="text-xs text-blue-400 hover:text-blue-300 transition-colors">
+                                {result.url}
+                              </a>
                             </div>
-                          </CardContent>
-                        </Card>
-                      </motion.div>
-                    )}
-                  </AnimatePresence>
-
-                  <div ref={messagesEndRef} />
-                </div>
-              </ScrollArea>
-
-              {/* GitHub Mode Indicator */}
-              <AnimatePresence>
-                {isGithubMode && selectedRepo && (
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -10 }}
-                    className="border-t border-white/10 bg-[var(--color-chat-surface)]/30 backdrop-blur-xl"
-                  >
-                    <div className="max-w-4xl mx-auto p-2">
-                      <div className="flex items-center justify-between glass rounded-lg p-3">
-                        <div className="flex items-center gap-3">
-                          <div className="flex items-center gap-2">
-                            <GitBranch className="h-4 w-4 text-primary" />
-                            <span className="text-sm font-medium">GitHub Mode Active</span>
-                          </div>
-                          <div className="flex items-center gap-2">
-                            <img 
-                              src={selectedRepo.owner.avatar_url} 
-                              alt={selectedRepo.owner.login}
-                              className="w-5 h-5 rounded-full"
-                            />
-                            <span className="text-sm text-muted-foreground">{selectedRepo.full_name}</span>
-                            <Badge variant="outline" className="text-xs">
-                              {selectedRepo.language || 'Unknown'}
-                            </Badge>
-                          </div>
-                        </div>
-                        <div className="flex items-center gap-2">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => window.open(selectedRepo.html_url, '_blank')}
-                            className="h-6 px-2 text-xs"
-                          >
-                            <ExternalLink className="h-3 w-3 mr-1" />
-                            View
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => {
-                              setIsGithubMode(false);
-                              setSelectedRepo(null);
-                              setGithubContext('');
-                              toast.info('GitHub mode disabled');
-                            }}
-                            className="h-6 px-2 text-xs"
-                          >
-                            ×
-                          </Button>
-                        </div>
-                      </div>
+                          ))}
+                        </ScrollArea>
+                      )}
                     </div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-
-              {/* Enhanced Input Area */}
-              <div className="border-t border-white/10 bg-[var(--color-chat-surface)]/50 backdrop-blur-xl">
-                <div className="max-w-4xl mx-auto p-4">
-                  <form onSubmit={handleSubmit}>
-                    <div className="relative">
-                      {/* Input container with enhanced styling */}
-                      <div className="glass-elevated rounded-2xl p-3 focus-within:ring-2 focus-within:ring-primary/50 transition-smooth">
-                        <Textarea
-                          ref={textareaRef}
-                          value={input}
-                          onChange={(e) => setInput(e.target.value)}
-                          placeholder="Ask me anything about coding, building apps, or development..."
-                          className="min-h-[50px] max-h-[200px] resize-none border-none bg-transparent placeholder:text-muted-foreground/60 focus:ring-0 focus-visible:ring-0 focus-visible:outline-none transition-smooth text-base"
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                              handleSubmit(e);
-                            }
-                          }}
-                        />
-                        
-                        {/* Enhanced input actions */}
-                        <div className="flex items-center justify-between pt-2 border-t border-white/10 mt-2">
-                          <div className="flex items-center gap-2">
-                            {/* Quick action buttons with enhanced styling */}
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              className="glass-hover h-8 px-3 text-xs"
-                              type="button"
-                              onClick={() => setIsSearchOpen(true)}
-                            >
-                              <Search className="w-3 h-3 mr-1" />
-                              Search
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              className="glass-hover h-8 px-3 text-xs"
-                              type="button"
-                              onClick={() => setIsWebsiteDialogOpen(true)}
-                            >
-                              <Globe className="w-3 h-3 mr-1" />
-                              Clone
-                            </Button>
-                            <GitHubIntegration
-                              onRepoSelected={handleRepoSelected}
-                              onPullRequestCreated={handlePullRequestCreated}
-                              className="inline-block"
-                            />
-                          </div>
-
-                          <div className="flex items-center gap-2">
-                            <span className="text-xs text-muted-foreground">
-                              {input.length}/{MAX_MESSAGE_LENGTH}
-                            </span>
-                            <Button
-                              type="submit"
-                              disabled={!input.trim() || isTyping}
-                              className="button-gradient h-8 px-4 text-sm font-medium"
-                            >
-                              {isTyping ? (
-                                <Loader2 className="w-3 h-3 animate-spin" />
-                              ) : (
-                                <Send className="w-3 h-3" />
-                              )}
-                            </Button>
-                          </div>
-                        </div>
-                      </div>
+                  </DialogContent>
+                </Dialog>
+
+                {/* Website Clone Dialog */}
+                <Dialog open={isWebsiteDialogOpen} onOpenChange={setIsWebsiteDialogOpen}>
+                  <DialogContent className="sm:max-w-[500px] glass-card border-white/10">
+                    <DialogHeader>
+                      <DialogTitle className="text-gradient-static">Clone Website</DialogTitle>
+                    </DialogHeader>
+                    <div className="space-y-4">
+                      <Input
+                        placeholder="Enter website URL..."
+                        value={websiteUrl}
+                        onChange={(e) => setWebsiteUrl(e.target.value)}
+                        className="glass-input"
+                      />
+                      <Button
+                        onClick={() => {
+                          setInput(prev => prev + (prev ? '\n\n' : '') + `Clone this website URL: ${websiteUrl}`);
+                          setIsWebsiteDialogOpen(false);
+                          setWebsiteUrl('');
+                          textareaRef.current?.focus();
+                        }}
+                        className="w-full button-gradient"
+                        disabled={!websiteUrl.trim()}
+                      >
+                        Add to Chat
+                      </Button>
                     </div>
-                  </form>
-                </div>
+                  </DialogContent>
+                </Dialog>
               </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </ErrorBoundary>
   );
 };
 
diff --git a/src/components/EnhancedChatInterface.tsx.backup b/src/components/EnhancedChatInterface.tsx.backup
new file mode 100644
index 00000000..f3111fc5
--- /dev/null
+++ b/src/components/EnhancedChatInterface.tsx.backup
@@ -0,0 +1,1456 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback, memo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useQuery, useMutation } from 'convex/react';
+import { api } from '../../convex/_generated/api';
+import type { Id } from '../../convex/_generated/dataModel';
+import { streamAIResponse, generateChatTitleFromMessages, generateAIResponse } from '@/lib/ai';
+import { generateDiagramResponse, generateUpdatedDiagram } from '@/lib/diagram-ai';
+import { executeCode, startSandbox } from '@/lib/sandbox';
+import { useAuth } from '@/hooks/useAuth';
+import { useAuth as useClerkAuth } from '@clerk/clerk-react';
+import { useUsageTracking } from '@/hooks/useUsageTracking';
+
+// Import extracted components
+import { ChatSidebar } from './chat/ChatSidebar';
+import { ChatMessage } from './chat/ChatMessage';
+import { ChatInput } from './chat/ChatInput';
+import { WelcomeScreen } from './chat/WelcomeScreen';
+import { ErrorBoundary } from './ErrorBoundary';
+
+// Import utilities
+import { validateInput } from '@/utils/security';
+import { throttle, debounce } from '@/utils/performance';
+import AnimatedResultShowcase from './AnimatedResultShowcase';
+import { braveSearchService, type BraveSearchResult, type WebsiteAnalysis } from '@/lib/search-service';
+import { crawlSite } from '@/lib/firecrawl';
+import { toast } from 'sonner';
+import * as Sentry from '@sentry/react';
+import WebContainerFailsafe from './WebContainerFailsafe';
+import { DECISION_PROMPT_NEXT } from '@/lib/decisionPrompt';
+import { GitHubIntegration } from '@/components/GitHubIntegration';
+import type { GitHubRepo } from '@/lib/github-service';
+import { githubService } from '@/lib/github-service';
+import DiagramMessageComponent from './DiagramMessageComponent';
+
+// Performance utility functions
+const throttle = <T extends (...args: any[]) => any>(func: T, limit: number): T => {
+  let inThrottle: boolean;
+  return ((...args: any[]) => {
+    if (!inThrottle) {
+      func.apply(null, args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  }) as T;
+};
+
+const debounce = <T extends (...args: any[]) => any>(func: T, delay: number): T => {
+  let timeoutId: NodeJS.Timeout;
+  return ((...args: any[]) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(null, args), delay);
+  }) as T;
+};
+
+const { logger } = Sentry;
+
+// Performance optimized message component with React.memo
+const EnhancedMessageComponent = memo(({ message, user, isUser, isFirstInGroup, formatTimestamp, copyToClipboard, copiedMessage, onApproveDiagram, onRequestDiagramChanges, isSubmittingDiagram }: {
+  message: ConvexMessage;
+  user: { avatarUrl?: string; email?: string; fullName?: string } | null;
+  isUser: boolean;
+  isFirstInGroup: boolean;
+  formatTimestamp: (timestamp: number) => string;
+  copyToClipboard: (text: string, messageId: string) => Promise<void>;
+  copiedMessage: string | null;
+  onApproveDiagram?: (messageId: string) => Promise<void>;
+  onRequestDiagramChanges?: (messageId: string, feedback: string) => Promise<void>;
+  isSubmittingDiagram?: boolean;
+}) => {
+  const hasDiagram = message.metadata?.diagramData;
+
+  return (
+    <div className="space-y-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        whileHover={{ scale: 1.01 }}
+        className="group"
+      >
+        <Card className={`
+          transition-all duration-300 shadow-lg hover:shadow-xl border-0
+          ${isUser 
+            ? 'chat-bubble-user ml-auto max-w-[80%] bg-gradient-to-br from-blue-600/10 to-blue-700/5 border border-blue-400/20' 
+            : 'chat-bubble-assistant max-w-[85%] bg-gradient-to-br from-gray-800/40 to-gray-900/20 border border-gray-600/20'
+          }
+          ${isFirstInGroup ? 'rounded-2xl' : (isUser ? 'rounded-2xl rounded-tr-lg' : 'rounded-2xl rounded-tl-lg')}
+          backdrop-blur-xl
+        `}>
+          <CardContent className="p-6 relative">
+            <div className="space-y-4">
+              <SafeText 
+                className={`text-base leading-relaxed font-medium ${
+                  isUser ? 'text-foreground' : 'text-foreground/95'
+                }`}
+              >
+                {message.content}
+              </SafeText>
+            
+              {message.metadata?.model && (
+                <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                  <Badge variant="outline" className="glass text-xs border-white/20 bg-white/5 backdrop-blur-sm rounded-lg px-2 py-1">
+                    {message.metadata.model}
+                  </Badge>
+                  {message.metadata.tokens && (
+                    <span className="bg-gray-800/50 px-2 py-1 rounded-md">{message.metadata.tokens} tokens</span>
+                  )}
+                  {message.metadata.cost && (
+                    <span className="bg-green-800/30 text-green-300 px-2 py-1 rounded-md">${message.metadata.cost.toFixed(4)}</span>
+                  )}
+                  {hasDiagram && (
+                    <Badge variant="outline" className="glass text-xs text-blue-300 border-blue-400/30 bg-blue-500/10 backdrop-blur-sm rounded-lg px-2 py-1">
+                      Contains Diagram
+                    </Badge>
+                  )}
+                </div>
+              )}
+          </div>
+
+            <div className={`absolute top-3 ${isUser ? 'left-3' : 'right-3'} opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center gap-2`}>
+              <motion.div
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+              >
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => copyToClipboard(message.content, message._id)}
+                  className="h-8 w-8 p-0 glass-hover rounded-lg border border-white/10 hover:border-white/20 hover:bg-white/5 backdrop-blur-sm"
+                >
+                  {copiedMessage === message._id ? (
+                    <Check className="w-4 h-4 text-green-400" />
+                  ) : (
+                    <Copy className="w-4 h-4" />
+                  )}
+                </Button>
+              </motion.div>
+            </div>
+
+            <div className={`text-xs text-muted-foreground/70 mt-3 ${
+              isUser ? 'text-right' : 'text-left'
+            }`}>
+              {formatTimestamp(message.createdAt)}
+            </div>
+          </CardContent>
+        </Card>
+      </motion.div>
+
+      {/* Diagram Component */}
+      {hasDiagram && onApproveDiagram && onRequestDiagramChanges && (
+        <DiagramMessageComponent
+          diagramData={message.metadata.diagramData}
+          messageId={message._id}
+          onApprove={onApproveDiagram}
+          onRequestChanges={onRequestDiagramChanges}
+          isSubmitting={isSubmittingDiagram}
+        />
+      )}
+    </div>
+  );
+});
+
+// Security constants for input validation
+const MAX_MESSAGE_LENGTH = 10000;
+const MAX_TITLE_LENGTH = 100;
+const MIN_TITLE_LENGTH = 1;
+
+// XSS protection: sanitize text input
+const sanitizeText = (text: string): string => {
+  return text
+    .replace(/[<>'"&]/g, (char) => {
+      const chars: { [key: string]: string } = {
+        '<': '&lt;',
+        '>': '&gt;',
+        "'": '&#x27;',
+        '"': '&quot;',
+        '&': '&amp;'
+      };
+      return chars[char] || char;
+    })
+    .trim();
+};
+
+// Validate input length and content
+const validateInput = (text: string, maxLength: number): { isValid: boolean; error?: string } => {
+  if (!text || text.trim().length === 0) {
+    return { isValid: false, error: 'Input cannot be empty' };
+  }
+  if (text.length > maxLength) {
+    return { isValid: false, error: `Input too long. Maximum ${maxLength} characters allowed` };
+  }
+  // Check for potentially malicious patterns
+  const suspiciousPatterns = [
+    /<script/i,
+    /javascript:/i,
+    /vbscript:/i,
+    /onload=/i,
+    /onerror=/i,
+    /onclick=/i
+  ];
+  
+  for (const pattern of suspiciousPatterns) {
+    if (pattern.test(text)) {
+      return { isValid: false, error: 'Invalid content detected' };
+    }
+  }
+  
+  return { isValid: true };
+};
+
+interface ConvexMessage {
+  _id: string;
+  content: string;
+  role: 'user' | 'assistant' | 'system';
+  createdAt: number;
+  metadata?: {
+    model?: string;
+    tokens?: number;
+    cost?: number;
+    diagramData?: {
+      type: 'mermaid' | 'flowchart' | 'sequence' | 'gantt';
+      diagramText: string;
+      isApproved?: boolean;
+      userFeedback?: string;
+      version: number;
+    };
+  };
+}
+
+interface ConvexChat {
+  _id: string;
+  title: string;
+  createdAt: number;
+  updatedAt: number;
+}
+
+interface CodeBlock {
+  id: string;
+  language: 'python' | 'javascript';
+  code: string;
+  executed: boolean;
+  result?: string;
+}
+
+const EnhancedChatInterface: React.FC = () => {
+  const { user, isLoading: authLoading } = useAuth();
+  const { getToken } = useClerkAuth();
+  const { getSubscription } = useUsageTracking();
+  const [input, setInput] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
+  const [isNewChatOpen, setIsNewChatOpen] = useState(false);
+  const [copiedMessage, setCopiedMessage] = useState<string | null>(null);
+  const [sessionStarted, setSessionStarted] = useState(false);
+  const [sidebarExpanded, setSidebarExpanded] = useState<boolean>(false);
+
+  // Enhanced UI state
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [searchResults, setSearchResults] = useState<BraveSearchResult[]>([]);
+  const [isAnalyzingWebsite, setIsAnalyzingWebsite] = useState(false);
+  const [websiteAnalysis, setWebsiteAnalysis] = useState<WebsiteAnalysis | null>(null);
+  const [isWebsiteDialogOpen, setIsWebsiteDialogOpen] = useState(false);
+  const [websiteUrl, setWebsiteUrl] = useState('');
+  
+  // Enhanced animations
+  const [messageAnimations, setMessageAnimations] = useState<{ [key: string]: boolean }>({});
+  
+  // GitHub Integration state
+  const [selectedRepo, setSelectedRepo] = useState<GitHubRepo | null>(null);
+  const [githubContext, setGithubContext] = useState<string>('');
+  const [isGithubMode, setIsGithubMode] = useState(false);
+
+  // Diagram state
+  const [isSubmittingDiagram, setIsSubmittingDiagram] = useState(false);
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputContainerRef = useRef<HTMLDivElement>(null);
+
+  // Convex queries and mutations
+  const chatsData = useQuery(api.chats.getUserChats, {});
+  const messagesData = useQuery(
+    api.messages.getChatMessages,
+    selectedChatId ? { chatId: selectedChatId as Id<'chats'> } : "skip"
+  );
+
+  // Enhanced performance: more aggressive message limiting and memoization
+  const chats = React.useMemo(() => {
+    const chatsArray = chatsData?.chats;
+    return Array.isArray(chatsArray) ? chatsArray : [];
+  }, [chatsData?.chats]);
+  
+  const messages = React.useMemo(() => {
+    const messagesArray = messagesData?.messages;
+    const validMessages = Array.isArray(messagesArray) ? messagesArray : [];
+    // More aggressive limiting for better performance on low-end devices
+    return validMessages.slice(-50);
+  }, [messagesData?.messages]);
+  
+  const createChatMutation = useMutation(api.chats.createChat);
+  const addMessageMutation = useMutation(api.messages.createMessage);
+  const updateMessageMutation = useMutation(api.messages.updateMessage);
+  const deleteChatMutation = useMutation(api.chats.deleteChat);
+  const updateChatTitleMutation = useMutation(api.chats.updateChat);
+
+  // Performance optimized auto-scroll with throttling
+  const scrollToBottomThrottled = React.useCallback(
+    throttle(() => {
+      messagesEndRef.current?.scrollIntoView({ 
+        behavior: 'smooth',
+        block: 'end',
+        inline: 'nearest'
+      });
+    }, 100),
+    []
+  );
+
+  useEffect(() => {
+    scrollToBottomThrottled();
+  }, [messages.length, scrollToBottomThrottled]); // Only trigger on message count change
+
+  // Initialize sandbox on component mount for better performance
+  useEffect(() => {
+    const warmUpSandbox = async () => {
+      try {
+        await startSandbox();
+        logger.info('Sandbox warmed up successfully');
+      } catch (error) {
+        logger.warn('Sandbox warm-up failed:', error);
+      }
+    };
+    
+    warmUpSandbox();
+  }, []);
+
+  // Performance optimized textarea resize with debouncing
+  const resizeTextarea = React.useCallback(
+    debounce(() => {
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+        const scrollHeight = Math.min(textareaRef.current.scrollHeight, 200);
+        textareaRef.current.style.height = `${scrollHeight}px`;
+      }
+    }, 50),
+    []
+  );
+
+  useEffect(() => {
+    resizeTextarea();
+  }, [input, resizeTextarea]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    const validation = validateInput(input, MAX_MESSAGE_LENGTH);
+    if (!validation.isValid) {
+      toast.error(validation.error);
+      return;
+    }
+    
+    const sanitizedInput = sanitizeText(input);
+    if (!sanitizedInput.trim()) return;
+    
+    // Enhance message with GitHub context if available
+    const enhancedInput = await enhanceMessageWithGitHub(sanitizedInput);
+
+    if (!sessionStarted) {
+      setSessionStarted(true);
+    }
+
+    try {
+      let currentChatId = selectedChatId;
+      
+      if (!currentChatId) {
+        const newChat = await createChatMutation({
+          title: 'New Chat',
+        });
+        currentChatId = newChat;
+        setSelectedChatId(currentChatId);
+      }
+
+      // Add user message
+      await addMessageMutation({
+        chatId: currentChatId as Id<'chats'>,
+        content: sanitizedInput, // Store original user input
+        role: 'user',
+        metadata: {}
+      });
+
+      setInput('');
+      setIsTyping(true);
+
+      // Generate AI response with diagram support
+      try {
+        // Use diagram-aware AI generation
+        const result = await generateDiagramResponse(enhancedInput);
+        const assistantResponse = result.response;
+        const diagramData = result.diagramData;
+
+        // Create metadata object with diagram data if present
+        const metadata: {
+          diagramData?: {
+            type: 'mermaid' | 'flowchart' | 'sequence' | 'gantt';
+            diagramText: string;
+            isApproved?: boolean;
+            userFeedback?: string;
+            version: number;
+          };
+        } = {};
+        if (diagramData) {
+          metadata.diagramData = diagramData;
+        }
+
+        // Add assistant message with diagram data
+        const assistantMessageId = await addMessageMutation({
+          chatId: currentChatId as Id<'chats'>,
+          content: assistantResponse,
+          role: 'assistant',
+          metadata
+        });
+        
+        // Auto-generate title if this is the first exchange
+        if (messages?.length === 0) {
+          try {
+            const title = await generateChatTitleFromMessages([
+              { role: 'user', content: sanitizedInput },
+              { role: 'assistant', content: assistantResponse }
+            ]);
+            await updateChatTitleMutation({
+              chatId: currentChatId as Id<'chats'>,
+              title: title.slice(0, MAX_TITLE_LENGTH)
+            });
+          } catch (titleError) {
+            logger.warn('Title generation failed:', titleError);
+          }
+        }
+
+        // Refresh subscription data
+        try {
+          await getSubscription();
+        } catch (error) {
+          logger.warn('Failed to refresh subscription data:', error);
+        }
+
+      } catch (aiError) {
+        logger.error('AI response failed:', aiError);
+        toast.error('Failed to generate AI response. Please try again.');
+        
+        await addMessageMutation({
+          chatId: currentChatId as Id<'chats'>,
+          content: 'I apologize, but I encountered an error while processing your request. Please try again.',
+          role: 'assistant',
+          metadata: {}
+        });
+      }
+
+    } catch (error) {
+      logger.error('Chat submission failed:', error);
+      
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      
+      // Handle specific error types with helpful messages
+      if (errorMessage.includes('Free plan limit reached')) {
+        toast.error('Free plan limit reached! You can create up to 5 chats. Upgrade to Pro for unlimited chats.');
+      } else if (errorMessage.includes('Rate limit exceeded')) {
+        toast.error('Please wait a moment before creating another chat.');
+      } else {
+        toast.error('Failed to send message. Please try again.');
+      }
+    } finally {
+      setIsTyping(false);
+    }
+  };
+
+  // Memoized clipboard function to prevent unnecessary re-renders
+  const copyToClipboard = useCallback(async (text: string, messageId: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedMessage(messageId);
+      toast.success('Message copied to clipboard');
+      
+      setTimeout(() => {
+        setCopiedMessage(null);
+      }, 2000);
+    } catch (error) {
+      logger.error('Clipboard copy failed:', error);
+      toast.error('Failed to copy message');
+    }
+  }, []);
+
+  const deleteChat = async (chatId: string) => {
+    try {
+      await deleteChatMutation({ chatId: chatId as Id<'chats'> });
+      if (selectedChatId === chatId) {
+        setSelectedChatId(null);
+        setSessionStarted(false);
+      }
+      toast.success('Chat deleted successfully');
+    } catch (error) {
+      logger.error('Chat deletion failed:', error);
+      toast.error('Failed to delete chat');
+    }
+  };
+
+  const startNewChat = () => {
+    setSelectedChatId(null);
+    setSessionStarted(false);
+    setInput('');
+    setIsNewChatOpen(false);
+    toast.success('Started new chat');
+  };
+
+  const selectChat = (chatId: string) => {
+    setSelectedChatId(chatId);
+    setSessionStarted(true);
+    setSidebarExpanded(false);
+  };
+
+  // Enhanced web search with improved UX
+  const searchWeb = async (query: string) => {
+    if (!query.trim()) return;
+    
+    try {
+      setIsSearchOpen(true);
+      const results = await braveSearchService.search(query);
+      setSearchResults(results);
+      toast.success(`Found ${results.length} results for "${query}"`);
+    } catch (error) {
+      logger.error('Web search failed:', error);
+      toast.error('Search failed. Please try again.');
+    }
+  };
+
+  // Enhanced website analysis
+  const analyzeWebsite = async (url: string) => {
+    if (!url.trim()) {
+      toast.error('Please enter a valid URL');
+      return;
+    }
+
+    try {
+      setIsAnalyzingWebsite(true);
+      const analysis = await crawlSite(url);
+      // For now, just use basic analysis
+      const basicAnalysis = {
+        url,
+        title: 'Website analyzed',
+        description: 'Website content processed',
+        technologies: ['Web'],
+        colorScheme: ['#000000'],
+        content: 'Website content available'
+      };
+      setWebsiteAnalysis(basicAnalysis);
+      
+      if (basicAnalysis) {
+        const analysisSummary = 
+          `**Website Analysis for ${url}:**\n\n` +
+          `**Title:** ${basicAnalysis.title || 'Not detected'}\n\n` +
+          `**Description:** ${basicAnalysis.description || 'Not detected'}\n\n` +
+          `**Technologies:** ${basicAnalysis.technologies?.join(', ') || 'Not detected'}\n\n` +
+          `**Color Scheme:** ${basicAnalysis.colorScheme?.slice(0, 5).join(', ') || 'Not detected'}\n\n` +
+          `**Content Preview:** ${basicAnalysis.content?.substring(0, 500) || 'No content extracted'}...\n\n`;
+        
+        setInput(prev => prev + (prev ? '\n\n' : '') + `Please help me clone this website:\n\n${analysisSummary}\n\nI want to recreate: `);
+        toast.success('Website analyzed successfully!');
+      }
+      
+    } catch (error) {
+      logger.error('Website analysis error:', error);
+      toast.error(error instanceof Error ? error.message : 'Website analysis failed');
+    } finally {
+      setIsAnalyzingWebsite(false);
+      setIsWebsiteDialogOpen(false);
+    }
+  };
+
+  const addSearchResultToInput = (result: BraveSearchResult) => {
+    const resultText = `Reference: ${result.title} - ${result.description} (${result.url})`;
+    setInput(prev => prev + (prev ? '\n\n' : '') + resultText + '\n\n');
+    toast.success('Search result added to message');
+  };
+
+  // Memoized timestamp functions to prevent recalculation
+  const formatTimestamp = useCallback((timestamp: number) => {
+    return new Date(timestamp).toLocaleTimeString([], { 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+  }, []);
+
+  const isSameDay = useCallback((a: number, b: number) => {
+    const da = new Date(a);
+    const db = new Date(b);
+    return (
+      da.getFullYear() === db.getFullYear() &&
+      da.getMonth() === db.getMonth() &&
+      da.getDate() === db.getDate()
+    );
+  }, []);
+
+  const formatDateHeader = useCallback((timestamp: number) => {
+    return new Date(timestamp).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  }, []);
+
+  // GitHub Integration Functions
+  const handleRepoSelected = (repo: GitHubRepo) => {
+    setSelectedRepo(repo);
+    setIsGithubMode(true);
+    
+    const repoContext = `Repository: ${repo.full_name}\n` +
+      `Description: ${repo.description || 'No description'}\n` +
+      `Language: ${repo.language || 'Unknown'}\n` +
+      `Default Branch: ${repo.default_branch}\n` +
+      `Type: ${repo.private ? 'Private' : 'Public'} repository\n\n`;
+    
+    setGithubContext(repoContext);
+    
+    // Add context to the current input
+    setInput(prev => {
+      const newInput = `I'm working with this GitHub repository:\n\n${repoContext}` +
+        `Please help me analyze and suggest improvements for this codebase. ` +
+        `${prev ? '\n\n' + prev : ''}`;
+      return newInput;
+    });
+    
+    toast.success(`Repository ${repo.full_name} loaded for AI analysis!`);
+  };
+
+  const handlePullRequestCreated = (prUrl: string, repo: GitHubRepo) => {
+    toast.success('Pull request created successfully!');
+    
+    // Add success message to chat
+    if (selectedChatId) {
+      addMessageMutation({
+        chatId: selectedChatId as Id<'chats'>,
+        content: `✅ **Pull Request Created Successfully!**\n\n` +
+          `Repository: ${repo.full_name}\n` +
+          `Pull Request: [View PR](${prUrl})\n\n` +
+          `The changes have been applied and are ready for review. ` +
+          `You can now review the pull request on GitHub and merge it when ready.`,
+        role: 'assistant',
+        metadata: {}
+      }).catch(error => {
+        logger.error('Failed to add PR success message:', error);
+      });
+    }
+  };
+
+  const detectGithubUrls = (text: string): string[] => {
+    const githubUrlRegex = /https?:\/\/github\.com\/[\w\-.]+\/[\w\-.]+(?:\/[^\s]*)?/g;
+    return text.match(githubUrlRegex) || [];
+  };
+
+  const enhanceMessageWithGitHub = async (message: string): Promise<string> => {
+    let enhancedMessage = message;
+    
+    // If GitHub mode is active, add repository context
+    if (isGithubMode && selectedRepo && githubContext) {
+      enhancedMessage = githubContext + '\n' + message;
+    }
+    
+    // Detect and suggest GitHub integration
+    const githubUrls = detectGithubUrls(message);
+    if (githubUrls.length > 0 && !isGithubMode) {
+      enhancedMessage += '\n\n[Assistant Note: I detected GitHub repository URLs in your message. ' +
+        'Would you like to use the GitHub integration to analyze the repository, ' +
+        'make changes, and create pull requests directly?]';
+    }
+    
+    return enhancedMessage;
+  };
+
+  // Diagram approval handlers
+  const handleApproveDiagram = async (messageId: string) => {
+    setIsSubmittingDiagram(true);
+    try {
+      // Get the existing message to preserve its content and metadata
+      const existingMessage = messages.find(m => m._id === messageId);
+      if (!existingMessage) {
+        throw new Error('Message not found');
+      }
+      
+      // Update the message while preserving existing content and other metadata
+      await updateMessageMutation({
+        messageId: messageId as Id<'messages'>,
+        content: existingMessage.content, // Preserve original content instead of overwriting
+        metadata: {
+          ...existingMessage.metadata, // Preserve other metadata fields
+          diagramData: existingMessage.metadata?.diagramData ? {
+            ...existingMessage.metadata.diagramData, // Preserve existing diagram data
+            isApproved: true, // Only update the approval status
+          } : undefined
+        }
+      });
+      
+      toast.success('Diagram approved! You can proceed with implementation.');
+    } catch (error) {
+      logger.error('Failed to approve diagram:', error);
+      toast.error('Failed to approve diagram. Please try again.');
+    } finally {
+      setIsSubmittingDiagram(false);
+    }
+  };
+
+  const handleRequestDiagramChanges = async (messageId: string, feedback: string) => {
+    setIsSubmittingDiagram(true);
+    try {
+      const message = messages.find(m => m._id === messageId);
+      if (!message?.metadata?.diagramData) {
+        throw new Error('No diagram data found');
+      }
+
+      const originalDiagram = message.metadata.diagramData;
+      
+      // Generate updated diagram based on feedback
+      const updatedDiagram = await generateUpdatedDiagram(
+        originalDiagram.diagramText,
+        feedback,
+        originalDiagram.type,
+        originalDiagram.version
+      );
+
+      // Update the message with new diagram and feedback
+      await updateMessageMutation({
+        messageId: messageId as Id<'messages'>,
+        content: message.content, // Keep original content
+        metadata: {
+          ...message.metadata,
+          diagramData: {
+            ...originalDiagram,
+            diagramText: updatedDiagram.diagramText,
+            version: updatedDiagram.version,
+            isApproved: false,
+            userFeedback: feedback,
+          }
+        }
+      });
+      
+      toast.success('Diagram updated based on your feedback!');
+    } catch (error) {
+      logger.error('Failed to update diagram:', error);
+      toast.error('Failed to update diagram. Please try again.');
+    } finally {
+      setIsSubmittingDiagram(false);
+    }
+  };
+
+  if (authLoading) {
+    return (
+      <div className="flex items-center justify-center h-full bg-[var(--color-chat-bg)]">
+        <motion.div 
+          className="flex items-center space-x-3"
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.3 }}
+        >
+          <div className="animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent"></div>
+          <span className="text-muted-foreground text-lg">Loading ZapDev...</span>
+        </motion.div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return (
+      <div className="flex items-center justify-center h-full bg-[var(--color-chat-bg)]">
+        <motion.div 
+          className="text-center"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+          <motion.div
+            className="w-20 h-20 mx-auto mb-6 p-4 rounded-full glass"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <Bot className="w-full h-full text-primary" />
+          </motion.div>
+          <h3 className="text-2xl font-semibold mb-3 text-gradient-static">Please Sign In</h3>
+          <p className="text-muted-foreground text-lg">You need to be signed in to use ZapDev AI</p>
+        </motion.div>
+      </div>
+    );
+  }
+
+  const hasMessages = messages && messages.length > 0;
+  const showSplitLayout = sessionStarted || hasMessages;
+
+  return (
+    <div className="flex h-full bg-[var(--color-chat-bg)] text-foreground">
+      {/* Enhanced Welcome Hero */}
+      <AnimatePresence mode="wait">
+        {!showSplitLayout && (
+          <motion.div 
+            key="hero"
+            className="flex-1 flex flex-col relative overflow-hidden"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            {/* Static background gradient - much more performant */}
+            <div className="absolute inset-0 pointer-events-none bg-gradient-to-br from-blue-500/5 via-blue-400/3 to-blue-600/5" />
+
+            {/* Simplified particle effect - reduced from 20 to 5 particles */}
+            <div className="absolute inset-0 pointer-events-none overflow-hidden">
+              {[...Array(5)].map((_, i) => (
+                <div
+                  key={i}
+                  className="absolute w-1 h-1 bg-primary/10 rounded-full animate-pulse"
+                  style={{
+                    left: `${20 + i * 20}%`,
+                    top: `${30 + i * 10}%`,
+                    animationDelay: `${i * 2}s`
+                  }}
+                />
+              ))}
+            </div>
+
+            {/* Enhanced main content */}
+            <div className="flex-1 flex items-center justify-center px-6">
+              <motion.div
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+                className="text-center max-w-4xl w-full"
+              >
+                {/* Enhanced logo section */}
+                <motion.div
+                  initial={{ scale: 0.8, rotate: -10 }}
+                  animate={{ scale: 1, rotate: 0 }}
+                  transition={{ 
+                    duration: 1.2, 
+                    ease: "easeOut",
+                    type: "spring",
+                    stiffness: 100
+                  }}
+                  className="relative mb-8"
+                >
+                  <div className="relative">
+                    <div className="w-24 h-24 mx-auto mb-2 glass-elevated rounded-2xl flex items-center justify-center">
+                      <Zap className="w-12 h-12 text-gradient" />
+                    </div>
+                  </div>
+                </motion.div>
+
+                {/* Enhanced title */}
+                <motion.h1 
+                  className="text-6xl md:text-7xl lg:text-8xl font-bold mb-6 text-gradient animate-gradient tracking-tight"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, delay: 0.3 }}
+                >
+                  ZapDev AI
+                </motion.h1>
+
+                <motion.p 
+                  className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl mx-auto text-pretty leading-relaxed"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, delay: 0.5 }}
+                >
+                  Build, code, and create with the most advanced AI development assistant. 
+                  From concept to deployment in minutes.
+                </motion.p>
+
+                {/* Enhanced feature highlights */}
+                <motion.div 
+                  className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 max-w-4xl mx-auto"
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.8, delay: 0.7 }}
+                >
+                  {[
+                    { icon: Code, title: "Live Code Execution", desc: "Run and test code instantly with E2B sandbox" },
+                    { icon: Palette, title: "Smart UI Generation", desc: "Create beautiful interfaces with AI guidance" },
+                    { icon: Layers, title: "Full-Stack Development", desc: "Build complete applications end-to-end" }
+                  ].map((feature, index) => (
+                    <motion.div
+                      key={index}
+                      className="glass-elevated p-6 rounded-xl glass-hover"
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.5, delay: 0.8 + index * 0.1 }}
+                      whileHover={{ scale: 1.02, y: -2 }}
+                    >
+                      <feature.icon className="w-8 h-8 text-primary mb-3 mx-auto" />
+                      <h3 className="font-semibold text-lg mb-2">{feature.title}</h3>
+                      <p className="text-muted-foreground text-sm text-pretty">{feature.desc}</p>
+                    </motion.div>
+                  ))}
+                </motion.div>
+
+                {/* Enhanced input section */}
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.8, delay: 1 }}
+                  className="max-w-3xl mx-auto"
+                >
+                  <form onSubmit={handleSubmit} className="space-y-8">
+                    {/* Premium input container with enhanced design */}
+                    <div className="relative group">
+                      <div className="absolute -inset-1 bg-gradient-to-r from-primary/30 to-blue-600/30 rounded-3xl blur-xl opacity-50 group-hover:opacity-75 transition-all duration-500"></div>
+                      <div className="absolute -inset-0.5 bg-gradient-to-r from-primary/40 to-blue-600/40 rounded-2xl blur opacity-30 group-hover:opacity-50 transition-all duration-300"></div>
+                      <div className="relative glass-elevated rounded-2xl p-6 shadow-2xl border-white/10 hover:border-white/20 transition-all duration-300">
+                        <Textarea
+                          ref={textareaRef}
+                          value={input}
+                          onChange={(e) => setInput(e.target.value)}
+                          placeholder="What would you like to build today? Describe your app, website, or coding challenge..."
+                          className="min-h-[140px] max-h-[300px] resize-none border-none bg-transparent text-lg placeholder:text-muted-foreground/60 focus:ring-0 focus-visible:ring-0 focus-visible:outline-none transition-all duration-300 leading-relaxed"
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                              handleSubmit(e);
+                            }
+                          }}
+                        />
+                        
+                        {/* Premium action buttons with enhanced design */}
+                        <div className="flex items-center justify-between pt-6 border-t border-white/10">
+                          <div className="flex items-center space-x-3">
+                            {/* Enhanced quick action buttons */}
+                            <Dialog open={isSearchOpen} onOpenChange={setIsSearchOpen}>
+                              <DialogTrigger asChild>
+                                <motion.div
+                                  whileHover={{ scale: 1.05, y: -2 }}
+                                  whileTap={{ scale: 0.95 }}
+                                >
+                                  <Button 
+                                    variant="ghost" 
+                                    size="sm" 
+                                    className="glass-hover rounded-xl px-4 py-2.5 border border-white/10 hover:border-white/20 hover:bg-white/5 transition-all duration-300 backdrop-blur-xl"
+                                    type="button"
+                                  >
+                                    <Search className="w-4 h-4 mr-2" />
+                                    Search Web
+                                  </Button>
+                                </motion.div>
+                              </DialogTrigger>
+                              <DialogContent className="glass-elevated border-white/20">
+                                <DialogHeader>
+                                  <DialogTitle className="text-gradient-static">Web Search</DialogTitle>
+                                </DialogHeader>
+                                {/* Search content here */}
+                              </DialogContent>
+                            </Dialog>
+
+                            <motion.div
+                              whileHover={{ scale: 1.05, y: -2 }}
+                              whileTap={{ scale: 0.95 }}
+                            >
+                              <Button 
+                                variant="ghost" 
+                                size="sm" 
+                                className="glass-hover rounded-xl px-4 py-2.5 border border-white/10 hover:border-white/20 hover:bg-white/5 transition-all duration-300 backdrop-blur-xl"
+                                type="button"
+                                onClick={() => {
+                                  setInput(prev => prev + (prev ? '\n\n' : '') + 'Clone this website URL: ');
+                                  textareaRef.current?.focus();
+                                  toast.success('Clone prompt added to chat!');
+                                }}
+                              >
+                                <Globe className="w-4 h-4 mr-2" />
+                                Clone Website
+                              </Button>
+                            </motion.div>
+                          </div>
+
+                          {/* Premium send button */}
+                          <motion.div
+                            whileHover={{ scale: 1.05, y: -2 }}
+                            whileTap={{ scale: 0.95 }}
+                          >
+                            <Button
+                              type="submit"
+                              disabled={!input.trim() || isTyping}
+                              className="button-gradient px-10 py-3.5 text-base font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                              {isTyping ? (
+                                <>
+                                  <Loader2 className="w-4 h-4 mr-3 animate-spin" />
+                                  Creating...
+                                </>
+                              ) : (
+                                <>
+                                  <ArrowUp className="w-4 h-4 mr-3" />
+                                  Start Building
+                                </>
+                              )}
+                            </Button>
+                          </motion.div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Enhanced keyboard shortcut hint */}
+                    <motion.p 
+                      className="text-muted-foreground text-sm text-center"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ delay: 1.5 }}
+                    >
+                      Press <kbd className="glass px-2 py-1 rounded text-xs font-mono">Ctrl</kbd> + <kbd className="glass px-2 py-1 rounded text-xs font-mono">Enter</kbd> to send
+                    </motion.p>
+                  </form>
+                </motion.div>
+              </motion.div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Enhanced Split Layout */}
+      <AnimatePresence>
+        {showSplitLayout && (
+          <motion.div 
+            key="split"
+            className="flex-1 flex"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -20 }}
+            transition={{ duration: 0.5 }}
+          >
+            {/* Premium Left Sidebar */}
+            <motion.div
+              onMouseEnter={() => setSidebarExpanded(true)}
+              onMouseLeave={() => setSidebarExpanded(false)}
+              className={`${
+                sidebarExpanded ? 'w-80' : 'w-14'
+              } bg-gradient-to-b from-gray-900/95 to-black/90 backdrop-blur-2xl border-r border-white/10 hover:border-white/20 flex flex-col transition-all duration-300 relative overflow-hidden shadow-2xl`}
+              animate={{ width: sidebarExpanded ? 320 : 56 }}
+              transition={{ duration: 0.4, ease: "easeInOut" }}
+            >
+              {/* Premium sidebar header */}
+              <div className="p-4 border-b border-white/10">
+                <motion.div 
+                  className="flex items-center gap-3"
+                  animate={{ opacity: sidebarExpanded ? 1 : 0 }}
+                  transition={{ delay: sidebarExpanded ? 0.15 : 0, duration: 0.3 }}
+                >
+                  <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center shadow-lg border border-blue-500/20">
+                    <Zap className="w-5 h-5 text-white" />
+                  </div>
+                  {sidebarExpanded && (
+                    <motion.div
+                      initial={{ x: -20 }}
+                      animate={{ x: 0 }}
+                      transition={{ duration: 0.3 }}
+                    >
+                      <h3 className="font-bold text-lg text-gradient-static">ZapDev</h3>
+                      <p className="text-xs text-muted-foreground/80">AI Development Assistant</p>
+                    </motion.div>
+                  )}
+                </motion.div>
+              </div>
+
+              {/* Premium new chat button */}
+              <div className="p-4">
+                <motion.div
+                  whileHover={{ scale: 1.02, y: -2 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <Button
+                    onClick={startNewChat}
+                    className="w-full justify-start bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white border-0 rounded-xl py-3 shadow-lg hover:shadow-xl transition-all duration-300"
+                    variant="ghost"
+                  >
+                    <Plus className="w-5 h-5" />
+                    {sidebarExpanded && (
+                      <motion.span 
+                        className="ml-3 font-medium"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ delay: 0.1 }}
+                      >
+                        New Chat
+                      </motion.span>
+                    )}
+                  </Button>
+                </motion.div>
+              </div>
+
+              {/* Chat list */}
+              <ScrollArea className="flex-1 custom-scrollbar">
+                <div className="p-3 space-y-2">
+                  {Array.isArray(chats) && chats.map((chat, index) => (
+                    <motion.button
+                      key={chat._id}
+                      onClick={() => selectChat(chat._id)}
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ delay: index * 0.05 }}
+                      className={`w-full text-left p-4 rounded-xl transition-all duration-300 group relative backdrop-blur-sm border ${
+                        selectedChatId === chat._id 
+                          ? 'bg-gradient-to-r from-blue-600/20 to-blue-700/10 border-blue-500/30 shadow-lg' 
+                          : 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20'
+                      }`}
+                      whileHover={{ scale: 1.02, x: 4 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                          selectedChatId === chat._id 
+                            ? 'bg-blue-600/30 border border-blue-500/40' 
+                            : 'bg-gray-700/50 border border-gray-600/30'
+                        }`}>
+                          <MessageSquare className="w-4 h-4 text-primary" />
+                        </div>
+                        {sidebarExpanded && (
+                          <motion.div 
+                            className="min-w-0 flex-1"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ delay: 0.1 }}
+                          >
+                            <p className="font-semibold truncate text-sm mb-1">
+                              {chat.title}
+                            </p>
+                            <p className="text-xs text-muted-foreground/70">
+                              {formatTimestamp(chat.updatedAt)}
+                            </p>
+                          </motion.div>
+                        )}
+                      </div>
+                      
+                      {sidebarExpanded && (
+                        <motion.div
+                          className="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity"
+                          whileHover={{ scale: 1.1 }}
+                          whileTap={{ scale: 0.9 }}
+                        >
+                          <Button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              deleteChat(chat._id);
+                            }}
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 w-7 p-0 rounded-lg bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 hover:border-red-500/30 transition-all duration-200"
+                          >
+                            <Trash2 className="w-3.5 h-3.5 text-red-400" />
+                          </Button>
+                        </motion.div>
+                      )}
+                    </motion.button>
+                  ))}
+                </div>
+              </ScrollArea>
+
+              {/* Sidebar footer */}
+              {sidebarExpanded && (
+                <motion.div 
+                  className="p-4 border-t border-white/10"
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 }}
+                >
+                                              <div className="flex items-center gap-3">
+                              <Avatar className="h-8 w-8">
+                                <AvatarImage src={user?.avatarUrl} />
+                                <AvatarFallback>
+                                  <User className="w-4 h-4" />
+                                </AvatarFallback>
+                              </Avatar>
+                              <div className="min-w-0 flex-1">
+                                <p className="text-sm font-medium truncate">
+                                  {user?.fullName || 'User'}
+                                </p>
+                                <p className="text-xs text-muted-foreground truncate">
+                                  {user?.email}
+                                </p>
+                              </div>
+                            </div>
+                </motion.div>
+              )}
+            </motion.div>
+
+            {/* Premium Main Chat Area */}
+            <div className="flex-1 flex flex-col min-h-0 bg-gradient-to-br from-gray-950/95 to-black/90 relative overflow-hidden">
+              {/* Subtle background pattern */}
+              <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(59,130,246,0.03),transparent_70%)] pointer-events-none"></div>
+              
+              {/* Chat messages */}
+              <ScrollArea className="flex-1 custom-scrollbar relative z-10">
+                <div className="p-8 space-y-8 max-w-5xl mx-auto w-full">
+                  {Array.isArray(messages) && messages.map((message, index) => {
+                    const isUser = message.role === 'user';
+                    const prevMessage = messages[index - 1];
+                    const showDateHeader = !prevMessage || !isSameDay(message.createdAt, prevMessage.createdAt);
+                    const isFirstInGroup = !prevMessage || prevMessage.role !== message.role;
+                    const nextMessage = messages[index + 1];
+                    const isLastInGroup = !nextMessage || nextMessage.role !== message.role;
+
+                    return (
+                      <div key={message._id} className="space-y-4">
+                        {showDateHeader && (
+                          <motion.div 
+                            className="text-center"
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.3 }}
+                          >
+                            <div className="bg-gradient-to-r from-gray-800/50 to-gray-700/50 backdrop-blur-xl px-6 py-3 rounded-2xl inline-block border border-white/10 shadow-lg">
+                              <span className="text-sm text-white font-semibold">
+                                {formatDateHeader(message.createdAt)}
+                              </span>
+                            </div>
+                          </motion.div>
+                        )}
+
+                        <div className={`group flex gap-6 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
+                          {/* Premium Avatar */}
+                          {isFirstInGroup && (
+                            <motion.div 
+                              className="flex-shrink-0"
+                              initial={{ scale: 0.8, opacity: 0 }}
+                              animate={{ scale: 1, opacity: 1 }}
+                              transition={{ duration: 0.3 }}
+                            >
+                              <Avatar className="h-12 w-12 border-2 border-white/10 shadow-lg">
+                                {isUser ? (
+                                  <AvatarImage src={user?.avatarUrl} className="rounded-full" />
+                                ) : (
+                                  <div className="bg-gradient-to-br from-blue-600 to-blue-700 h-full w-full flex items-center justify-center rounded-full">
+                                    <Bot className="w-6 h-6 text-white" />
+                                  </div>
+                                )}
+                                <AvatarFallback className="bg-gradient-to-br from-gray-700 to-gray-800">
+                                  {isUser ? <User className="w-6 h-6 text-white" /> : <Bot className="w-6 h-6 text-blue-400" />}
+                                </AvatarFallback>
+                              </Avatar>
+                            </motion.div>
+                          )}
+
+                          {/* Premium Message Bubble */}
+                          <div className={`flex-1 max-w-4xl ${!isFirstInGroup ? (isUser ? 'mr-16' : 'ml-16') : ''}`}>
+                            <EnhancedMessageComponent
+                              message={message}
+                              user={user}
+                              isUser={isUser}
+                              isFirstInGroup={isFirstInGroup}
+                              formatTimestamp={formatTimestamp}
+                              copyToClipboard={copyToClipboard}
+                              copiedMessage={copiedMessage}
+                              onApproveDiagram={handleApproveDiagram}
+                              onRequestDiagramChanges={handleRequestDiagramChanges}
+                              isSubmittingDiagram={isSubmittingDiagram}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+
+                  {/* Enhanced typing indicator */}
+                  <AnimatePresence>
+                    {isTyping && (
+                      <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -20 }}
+                        className="flex gap-4"
+                      >
+                        <Avatar className="h-12 w-12 border-2 border-blue-500/20 shadow-lg">
+                          <div className="bg-gradient-to-br from-blue-600 to-blue-700 h-full w-full flex items-center justify-center rounded-full">
+                            <motion.div
+                              animate={{ rotate: 360 }}
+                              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+                            >
+                              <Bot className="w-6 h-6 text-white" />
+                            </motion.div>
+                          </div>
+                        </Avatar>
+                        
+                        <Card className="bg-gradient-to-br from-gray-800/40 to-gray-900/20 border border-gray-600/20 backdrop-blur-xl max-w-xs rounded-2xl shadow-lg">
+                          <CardContent className="p-6">
+                            <div className="flex items-center space-x-3">
+                              <span className="text-base text-white font-medium">AI is thinking</span>
+                              <div className="flex space-x-1">
+                                {[0, 1, 2].map((i) => (
+                                  <motion.div
+                                    key={i}
+                                    className="w-2 h-2 bg-primary rounded-full"
+                                    animate={{ 
+                                      scale: [1, 1.2, 1], 
+                                      opacity: [0.4, 1, 0.4] 
+                                    }}
+                                    transition={{ 
+                                      duration: 1.5, 
+                                      repeat: Infinity, 
+                                      delay: i * 0.2 
+                                    }}
+                                  />
+                                ))}
+                              </div>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+
+                  <div ref={messagesEndRef} />
+                </div>
+              </ScrollArea>
+
+              {/* GitHub Mode Indicator */}
+              <AnimatePresence>
+                {isGithubMode && selectedRepo && (
+                  <motion.div
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -10 }}
+                    className="border-t border-white/10 bg-[var(--color-chat-surface)]/30 backdrop-blur-xl"
+                  >
+                    <div className="max-w-4xl mx-auto p-2">
+                      <div className="flex items-center justify-between glass rounded-lg p-3">
+                        <div className="flex items-center gap-3">
+                          <div className="flex items-center gap-2">
+                            <GitBranch className="h-4 w-4 text-primary" />
+                            <span className="text-sm font-medium">GitHub Mode Active</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <img 
+                              src={selectedRepo.owner.avatar_url} 
+                              alt={selectedRepo.owner.login}
+                              className="w-5 h-5 rounded-full"
+                            />
+                            <span className="text-sm text-muted-foreground">{selectedRepo.full_name}</span>
+                            <Badge variant="outline" className="text-xs">
+                              {selectedRepo.language || 'Unknown'}
+                            </Badge>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => window.open(selectedRepo.html_url, '_blank')}
+                            className="h-6 px-2 text-xs"
+                          >
+                            <ExternalLink className="h-3 w-3 mr-1" />
+                            View
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              setIsGithubMode(false);
+                              setSelectedRepo(null);
+                              setGithubContext('');
+                              toast.info('GitHub mode disabled');
+                            }}
+                            className="h-6 px-2 text-xs"
+                          >
+                            ×
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+              {/* Enhanced Input Area */}
+              <div className="border-t border-white/10 bg-[var(--color-chat-surface)]/50 backdrop-blur-xl">
+                <div className="max-w-4xl mx-auto p-4">
+                  <form onSubmit={handleSubmit}>
+                    <div className="relative">
+                      {/* Input container with enhanced styling */}
+                      <div className="glass-elevated rounded-2xl p-3 focus-within:ring-2 focus-within:ring-primary/50 transition-smooth">
+                        <Textarea
+                          ref={textareaRef}
+                          value={input}
+                          onChange={(e) => setInput(e.target.value)}
+                          placeholder="Ask me anything about coding, building apps, or development..."
+                          className="min-h-[50px] max-h-[200px] resize-none border-none bg-transparent placeholder:text-muted-foreground/60 focus:ring-0 focus-visible:ring-0 focus-visible:outline-none transition-smooth text-base"
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                              handleSubmit(e);
+                            }
+                          }}
+                        />
+                        
+                        {/* Enhanced input actions */}
+                        <div className="flex items-center justify-between pt-2 border-t border-white/10 mt-2">
+                          <div className="flex items-center gap-2">
+                            {/* Quick action buttons with enhanced styling */}
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="glass-hover h-8 px-3 text-xs"
+                              type="button"
+                              onClick={() => setIsSearchOpen(true)}
+                            >
+                              <Search className="w-3 h-3 mr-1" />
+                              Search
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="glass-hover h-8 px-3 text-xs"
+                              type="button"
+                              onClick={() => setIsWebsiteDialogOpen(true)}
+                            >
+                              <Globe className="w-3 h-3 mr-1" />
+                              Clone
+                            </Button>
+                            <GitHubIntegration
+                              onRepoSelected={handleRepoSelected}
+                              onPullRequestCreated={handlePullRequestCreated}
+                              className="inline-block"
+                            />
+                          </div>
+
+                          <div className="flex items-center gap-2">
+                            <span className="text-xs text-muted-foreground">
+                              {input.length}/{MAX_MESSAGE_LENGTH}
+                            </span>
+                            <Button
+                              type="submit"
+                              disabled={!input.trim() || isTyping}
+                              className="button-gradient h-8 px-4 text-sm font-medium"
+                            >
+                              {isTyping ? (
+                                <Loader2 className="w-3 h-3 animate-spin" />
+                              ) : (
+                                <Send className="w-3 h-3" />
+                              )}
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default EnhancedChatInterface;
\ No newline at end of file
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index b63e44b3..184a7f7d 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -1,391 +1,180 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { AlertTriangle, RefreshCw, Home, Bug, Copy, Check, ExternalLink } from 'lucide-react';
+import React, { Component, ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import * as Sentry from '@sentry/react';
-import { toast } from 'sonner';
 
-interface Props {
-  children: ReactNode;
-  fallback?: ReactNode;
-  onError?: (error: Error, errorInfo: ErrorInfo) => void;
-  showDetails?: boolean;
-  level?: 'page' | 'component' | 'critical';
-}
-
-interface State {
+interface ErrorBoundaryState {
   hasError: boolean;
   error: Error | null;
-  errorInfo: ErrorInfo | null;
-  errorId: string | null;
-  isDetailsOpen: boolean;
-  copied: boolean;
+  errorInfo: React.ErrorInfo | null;
 }
 
-class ErrorBoundary extends Component<Props, State> {
-  private retryCount = 0;
-  private maxRetries = 3;
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
 
-  constructor(props: Props) {
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = {
       hasError: false,
       error: null,
-      errorInfo: null,
-      errorId: null,
-      isDetailsOpen: false,
-      copied: false,
+      errorInfo: null
     };
   }
 
-  static getDerivedStateFromError(error: Error): Partial<State> {
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
     return {
       hasError: true,
-      error,
+      error
     };
   }
 
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    const errorId = Math.random().toString(36).substring(2, 15);
-    
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     this.setState({
-      errorInfo,
-      errorId,
-    });
-
-    // Log to Sentry with additional context
-    Sentry.withScope((scope) => {
-      scope.setTag('errorBoundary', true);
-      scope.setTag('level', this.props.level || 'component');
-      scope.setLevel('error');
-      scope.setContext('errorInfo', {
-        componentStack: errorInfo.componentStack,
-        errorBoundary: this.constructor.name,
-        retryCount: this.retryCount,
-      });
-      Sentry.captureException(error);
+      error,
+      errorInfo
     });
 
-    // Call custom error handler
-    this.props.onError?.(error, errorInfo);
+    // Log error to monitoring service
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    
+    // Call optional error handler
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
 
-    // Log to console in development
-    if (process.env.NODE_ENV === 'development') {
-      console.error('ErrorBoundary caught an error:', error, errorInfo);
+    // In production, you would send this to an error reporting service
+    if (process.env.NODE_ENV === 'production') {
+      // Example: Sentry.captureException(error, { extra: errorInfo });
     }
   }
 
-  handleRetry = () => {
-    if (this.retryCount < this.maxRetries) {
-      this.retryCount++;
-      this.setState({
-        hasError: false,
-        error: null,
-        errorInfo: null,
-        errorId: null,
-        isDetailsOpen: false,
-      });
-      toast.success(`Retrying... (${this.retryCount}/${this.maxRetries})`);
-    } else {
-      toast.error('Maximum retry attempts reached');
-    }
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null
+    });
   };
 
   handleReload = () => {
     window.location.reload();
   };
 
-  handleGoHome = () => {
+  handleHome = () => {
     window.location.href = '/';
   };
 
-  handleReportIssue = () => {
-    const errorDetails = {
-      errorId: this.state.errorId,
-      message: this.state.error?.message,
-      stack: this.state.error?.stack?.split('\n').slice(0, 5).join('\n'), // First 5 lines only
-      timestamp: new Date().toISOString(),
-      userAgent: navigator.userAgent,
-      url: window.location.href,
-    };
-
-    const issueTitle = encodeURIComponent(`Error Report: ${this.state.error?.message || 'Unknown Error'}`);
-    const issueBody = encodeURIComponent(`
-**Error Report**
-
-**Error ID:** ${this.state.errorId || 'N/A'}
-**Timestamp:** ${errorDetails.timestamp}
-**URL:** ${errorDetails.url}
-
-**Error Message:**
-\`\`\`
-${this.state.error?.message || 'No error message available'}
-\`\`\`
-
-**Stack Trace (first 5 lines):**
-\`\`\`
-${errorDetails.stack || 'No stack trace available'}
-\`\`\`
-
-**User Agent:**
-\`\`\`
-${errorDetails.userAgent}
-\`\`\`
-
-**Additional Context:**
-Please describe what you were doing when this error occurred.
-    `);
-
-    const githubUrl = `https://github.com/anthropics/claude-code/issues/new?title=${issueTitle}&body=${issueBody}&labels=bug`;
-    window.open(githubUrl, '_blank');
-  };
-
-  copyErrorDetails = async () => {
-    const errorDetails = {
-      errorId: this.state.errorId,
-      message: this.state.error?.message,
-      stack: this.state.error?.stack,
-      componentStack: this.state.errorInfo?.componentStack,
-      timestamp: new Date().toISOString(),
-      userAgent: navigator.userAgent,
-      url: window.location.href,
-    };
-
-    try {
-      await navigator.clipboard.writeText(JSON.stringify(errorDetails, null, 2));
-      this.setState({ copied: true });
-      toast.success('Error details copied to clipboard');
-      setTimeout(() => this.setState({ copied: false }), 2000);
-    } catch (error) {
-      toast.error('Failed to copy error details');
-    }
-  };
-
   render() {
     if (this.state.hasError) {
-      const { level = 'component', showDetails = true } = this.props;
-      const isPageLevel = level === 'page';
-      const isCritical = level === 'critical';
-
-      const errorContent = (
-        <motion.div
-          initial={{ opacity: 0, scale: 0.95 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{ opacity: 0, scale: 0.95 }}
-          transition={{ duration: 0.3 }}
-          className={`flex items-center justify-center ${
-            isPageLevel ? 'min-h-screen p-6 bg-[var(--color-chat-bg)]' : 'p-4'
-          }`}
-        >
-          <Card className={`glass-elevated max-w-2xl w-full ${
-            isCritical ? 'border-destructive/50' : 'border-white/20'
-          }`}>
-            <CardHeader className="text-center">
-              <motion.div
-                initial={{ scale: 0 }}
-                animate={{ scale: 1 }}
-                transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
-                className="mx-auto mb-4"
-              >
-                <div className={`w-16 h-16 rounded-full flex items-center justify-center ${
-                  isCritical 
-                    ? 'bg-destructive/20 text-destructive' 
-                    : 'bg-orange-500/20 text-orange-500'
-                }`}>
-                  <AlertTriangle className="w-8 h-8" />
-                </div>
-              </motion.div>
+      // Custom fallback UI
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
 
-              <CardTitle className="text-2xl font-bold mb-2">
-                {isCritical ? 'Critical Error' : 'Something went wrong'}
-              </CardTitle>
-              
-              <div className="space-y-2">
+      return (
+        <div className="min-h-screen bg-gradient-to-br from-gray-950/95 to-black/90 flex items-center justify-center p-8">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="max-w-2xl w-full"
+          >
+            <Card className="glass-elevated border-red-500/20 backdrop-blur-xl">
+              <CardHeader className="text-center pb-6">
+                <motion.div
+                  initial={{ scale: 0.8 }}
+                  animate={{ scale: 1 }}
+                  transition={{ duration: 0.5, delay: 0.2 }}
+                  className="mb-4"
+                >
+                  <div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto border border-red-500/30">
+                    <AlertTriangle className="w-8 h-8 text-red-400" />
+                  </div>
+                </motion.div>
+                
+                <CardTitle className="text-2xl font-bold text-white mb-2">
+                  Oops! Something went wrong
+                </CardTitle>
+                
                 <p className="text-muted-foreground">
-                  {isCritical 
-                    ? 'A critical error occurred that requires immediate attention.'
-                    : 'Our team is working on this error. This has been logged and we\'ve been notified.'
-                  }
+                  We encountered an unexpected error. Don't worry, this has been logged and we'll fix it soon.
                 </p>
-                
-                {this.state.errorId && (
-                  <div className="flex items-center justify-center gap-2">
-                    <Badge variant="outline" className="font-mono text-xs">
-                      Error ID: {this.state.errorId}
-                    </Badge>
-                  </div>
+              </CardHeader>
+
+              <CardContent className="space-y-6">
+                {/* Error details (only in development) */}
+                {process.env.NODE_ENV === 'development' && this.state.error && (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: 0.4 }}
+                    className="bg-red-500/10 border border-red-500/20 rounded-lg p-4"
+                  >
+                    <h4 className="font-semibold text-red-300 mb-2">Error Details (Development)</h4>
+                    <pre className="text-xs text-red-200 overflow-auto max-h-32 whitespace-pre-wrap">
+                      {this.state.error.toString()}
+                      {this.state.errorInfo?.componentStack}
+                    </pre>
+                  </motion.div>
                 )}
-              </div>
-            </CardHeader>
 
-            <CardContent className="space-y-6">
-              {/* Error message */}
-              {this.state.error?.message && (
+                {/* Action buttons */}
                 <motion.div
+                  className="flex flex-col sm:flex-row gap-3 pt-4"
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.3 }}
-                  className="p-4 glass rounded-lg"
+                  transition={{ delay: 0.6 }}
                 >
-                  <h4 className="font-semibold text-sm mb-2 text-destructive">Error Message:</h4>
-                  <p className="text-sm font-mono text-muted-foreground">
-                    {this.state.error.message}
-                  </p>
-                </motion.div>
-              )}
-
-              {/* Action buttons */}
-              <motion.div
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.4 }}
-                className="flex flex-col sm:flex-row gap-3"
-              >
-                {!isCritical && this.retryCount < this.maxRetries && (
                   <Button
-                    onClick={this.handleRetry}
+                    onClick={this.handleReset}
                     className="button-gradient flex-1"
-                    leftIcon={<RefreshCw className="w-4 h-4" />}
-                  >
-                    Try Again ({this.maxRetries - this.retryCount} left)
-                  </Button>
-                )}
-
-                <Button
-                  onClick={this.handleReportIssue}
-                  variant="destructive"
-                  className="flex-1"
-                  leftIcon={<ExternalLink className="w-4 h-4" />}
-                >
-                  Report Issue on GitHub
-                </Button>
-
-                {isPageLevel && (
-                  <Button
-                    onClick={this.handleGoHome}
-                    variant="glass"
-                    className="flex-1"
-                    leftIcon={<Home className="w-4 h-4" />}
+                    size="lg"
                   >
-                    Go Home
+                    <RefreshCw className="w-4 h-4 mr-2" />
+                    Try Again
                   </Button>
-                )}
-
-                {!isPageLevel && (
+                  
                   <Button
                     onClick={this.handleReload}
                     variant="outline"
-                    className="flex-1"
-                    leftIcon={<RefreshCw className="w-4 h-4" />}
+                    className="border-white/20 hover:border-white/40 flex-1"
+                    size="lg"
                   >
+                    <RefreshCw className="w-4 h-4 mr-2" />
                     Reload Page
                   </Button>
-                )}
-              </motion.div>
-
-              {/* Error details (collapsible) */}
-              {showDetails && (this.state.error?.stack || this.state.errorInfo) && (
-                <motion.div
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.5 }}
-                >
-                  <Collapsible 
-                    open={this.state.isDetailsOpen} 
-                    onOpenChange={(isOpen) => this.setState({ isDetailsOpen: isOpen })}
+                  
+                  <Button
+                    onClick={this.handleHome}
+                    variant="outline"
+                    className="border-white/20 hover:border-white/40 flex-1"
+                    size="lg"
                   >
-                    <CollapsibleTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="w-full justify-center text-muted-foreground hover:text-foreground"
-                      >
-                        <Bug className="w-4 h-4 mr-2" />
-                        {this.state.isDetailsOpen ? 'Hide' : 'Show'} Technical Details
-                      </Button>
-                    </CollapsibleTrigger>
-                    
-                    <CollapsibleContent className="mt-4">
-                      <div className="space-y-3">
-                        <div className="flex justify-between items-center">
-                          <h4 className="font-semibold text-sm">Technical Details</h4>
-                          <Button
-                            onClick={this.copyErrorDetails}
-                            variant="ghost"
-                            size="sm"
-                            className="text-xs"
-                          >
-                            {this.state.copied ? (
-                              <>
-                                <Check className="w-3 h-3 mr-1" />
-                                Copied
-                              </>
-                            ) : (
-                              <>
-                                <Copy className="w-3 h-3 mr-1" />
-                                Copy Details
-                              </>
-                            )}
-                          </Button>
-                        </div>
-
-                        {this.state.error?.stack && (
-                          <div className="p-3 bg-black/20 rounded border border-white/10">
-                            <h5 className="font-semibold text-xs mb-2 text-destructive">Stack Trace:</h5>
-                            <pre className="text-xs text-muted-foreground overflow-x-auto whitespace-pre-wrap">
-                              {this.state.error.stack}
-                            </pre>
-                          </div>
-                        )}
-
-                        {this.state.errorInfo?.componentStack && (
-                          <div className="p-3 bg-black/20 rounded border border-white/10">
-                            <h5 className="font-semibold text-xs mb-2 text-orange-400">Component Stack:</h5>
-                            <pre className="text-xs text-muted-foreground overflow-x-auto whitespace-pre-wrap">
-                              {this.state.errorInfo.componentStack}
-                            </pre>
-                          </div>
-                        )}
-                      </div>
-                    </CollapsibleContent>
-                  </Collapsible>
+                    <Home className="w-4 h-4 mr-2" />
+                    Go Home
+                  </Button>
                 </motion.div>
-              )}
 
-              {/* Development only information */}
-              {process.env.NODE_ENV === 'development' && (
+                {/* Help text */}
                 <motion.div
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.6 }}
-                  className="p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg"
+                  className="text-center pt-4 border-t border-white/10"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.8 }}
                 >
-                  <p className="text-xs text-yellow-400 font-medium">
-                    🚧 Development Mode: Check console for additional error details
+                  <p className="text-sm text-muted-foreground">
+                    If this problem persists, please contact support or try refreshing the page.
                   </p>
                 </motion.div>
-              )}
-            </CardContent>
-          </Card>
-        </motion.div>
-      );
-
-      // If a fallback is provided, use it instead
-      if (this.props.fallback) {
-        return (
-          <AnimatePresence mode="wait">
-            {this.props.fallback}
-          </AnimatePresence>
-        );
-      }
-
-      return (
-        <AnimatePresence mode="wait">
-          {errorContent}
-        </AnimatePresence>
+              </CardContent>
+            </Card>
+          </motion.div>
+        </div>
       );
     }
 
@@ -396,29 +185,15 @@ Please describe what you were doing when this error occurred.
 // Higher-order component for easy wrapping
 export const withErrorBoundary = <P extends object>(
   Component: React.ComponentType<P>,
-  errorBoundaryProps?: Omit<Props, 'children'>
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void
 ) => {
   const WrappedComponent = (props: P) => (
-    <ErrorBoundary {...errorBoundaryProps}>
+    <ErrorBoundary onError={onError}>
       <Component {...props} />
     </ErrorBoundary>
   );
-
+  
   WrappedComponent.displayName = `withErrorBoundary(${Component.displayName || Component.name})`;
+  
   return WrappedComponent;
-};
-
-// Specialized error boundaries for different contexts
-export const PageErrorBoundary: React.FC<Omit<Props, 'level'>> = (props) => (
-  <ErrorBoundary {...props} level="page" />
-);
-
-export const ComponentErrorBoundary: React.FC<Omit<Props, 'level'>> = (props) => (
-  <ErrorBoundary {...props} level="component" />
-);
-
-export const CriticalErrorBoundary: React.FC<Omit<Props, 'level'>> = (props) => (
-  <ErrorBoundary {...props} level="critical" />
-);
-
-export default ErrorBoundary;
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx
new file mode 100644
index 00000000..e018f5e7
--- /dev/null
+++ b/src/components/chat/ChatInput.tsx
@@ -0,0 +1,147 @@
+import React, { memo } from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Search, Globe, ArrowUp, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface ChatInputProps {
+  input: string;
+  setInput: (input: string) => void;
+  textareaRef: React.RefObject<HTMLTextAreaElement>;
+  handleSubmit: (e: React.FormEvent) => void;
+  isTyping: boolean;
+  isSearchOpen: boolean;
+  setIsSearchOpen: (open: boolean) => void;
+}
+
+export const ChatInput: React.FC<ChatInputProps> = memo(({
+  input,
+  setInput,
+  textareaRef,
+  handleSubmit,
+  isTyping,
+  isSearchOpen,
+  setIsSearchOpen
+}) => {
+  const handleCloneWebsiteClick = () => {
+    setInput(prev => prev + (prev ? '\n\n' : '') + 'Clone this website URL: ');
+    textareaRef.current?.focus();
+    toast.success('Clone prompt added to chat!');
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.8, delay: 1 }}
+      className="max-w-3xl mx-auto"
+    >
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {/* Premium input container with enhanced design */}
+        <div className="relative group">
+          <div className="absolute -inset-1 bg-gradient-to-r from-primary/30 to-blue-600/30 rounded-3xl blur-xl opacity-50 group-hover:opacity-75 transition-all duration-500"></div>
+          <div className="absolute -inset-0.5 bg-gradient-to-r from-primary/40 to-blue-600/40 rounded-2xl blur opacity-30 group-hover:opacity-50 transition-all duration-300"></div>
+          <div className="relative glass-elevated rounded-2xl p-6 shadow-2xl border-white/10 hover:border-white/20 transition-all duration-300">
+            <Textarea
+              ref={textareaRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="What would you like to build today? Describe your app, website, or coding challenge..."
+              className="min-h-[140px] max-h-[300px] resize-none border-none bg-transparent text-lg placeholder:text-muted-foreground/60 focus:ring-0 focus-visible:ring-0 focus-visible:outline-none transition-all duration-300 leading-relaxed"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                  handleSubmit(e);
+                }
+              }}
+            />
+            
+            {/* Premium action buttons with enhanced design */}
+            <div className="flex items-center justify-between pt-6 border-t border-white/10">
+              <div className="flex items-center space-x-3">
+                {/* Enhanced quick action buttons */}
+                <Dialog open={isSearchOpen} onOpenChange={setIsSearchOpen}>
+                  <DialogTrigger asChild>
+                    <motion.div
+                      whileHover={{ scale: 1.05, y: -2 }}
+                      whileTap={{ scale: 0.95 }}
+                    >
+                      <Button 
+                        variant="ghost" 
+                        size="sm" 
+                        className="glass-hover rounded-xl px-4 py-2.5 border border-white/10 hover:border-white/20 hover:bg-white/5 transition-all duration-300 backdrop-blur-xl"
+                        type="button"
+                      >
+                        <Search className="w-4 h-4 mr-2" />
+                        Search Web
+                      </Button>
+                    </motion.div>
+                  </DialogTrigger>
+                  <DialogContent className="glass-elevated border-white/20">
+                    <DialogHeader>
+                      <DialogTitle className="text-gradient-static">Web Search</DialogTitle>
+                    </DialogHeader>
+                    {/* Search content here */}
+                  </DialogContent>
+                </Dialog>
+
+                <motion.div
+                  whileHover={{ scale: 1.05, y: -2 }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  <Button 
+                    variant="ghost" 
+                    size="sm" 
+                    className="glass-hover rounded-xl px-4 py-2.5 border border-white/10 hover:border-white/20 hover:bg-white/5 transition-all duration-300 backdrop-blur-xl"
+                    type="button"
+                    onClick={handleCloneWebsiteClick}
+                  >
+                    <Globe className="w-4 h-4 mr-2" />
+                    Clone Website
+                  </Button>
+                </motion.div>
+              </div>
+
+              {/* Premium send button */}
+              <motion.div
+                whileHover={{ scale: 1.05, y: -2 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                <Button
+                  type="submit"
+                  disabled={!input.trim() || isTyping}
+                  className="button-gradient px-10 py-3.5 text-base font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {isTyping ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-3 animate-spin" />
+                      Creating...
+                    </>
+                  ) : (
+                    <>
+                      <ArrowUp className="w-4 h-4 mr-3" />
+                      Start Building
+                    </>
+                  )}
+                </Button>
+              </motion.div>
+            </div>
+          </div>
+        </div>
+        
+        {/* Input hints */}
+        <motion.div 
+          className="text-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 1.2 }}
+        >
+          <p className="text-sm text-muted-foreground/60">
+            Press <kbd className="px-2 py-1 text-xs rounded bg-white/10 border border-white/20">Ctrl</kbd> + <kbd className="px-2 py-1 text-xs rounded bg-white/10 border border-white/20">Enter</kbd> to send
+          </p>
+        </motion.div>
+      </form>
+    </motion.div>
+  );
+});
\ No newline at end of file
diff --git a/src/components/chat/ChatMessage.tsx b/src/components/chat/ChatMessage.tsx
new file mode 100644
index 00000000..1b0dfcb5
--- /dev/null
+++ b/src/components/chat/ChatMessage.tsx
@@ -0,0 +1,149 @@
+import React, { memo } from 'react';
+import { motion } from 'framer-motion';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { SafeText } from '@/components/ui/SafeText';
+import { Copy, Check } from 'lucide-react';
+import DiagramMessageComponent from '../DiagramMessageComponent';
+
+// Types for the message component
+interface ConvexMessage {
+  _id: string;
+  content: string;
+  role: 'user' | 'assistant';
+  createdAt: number;
+  metadata?: {
+    model?: string;
+    tokens?: number;
+    cost?: number;
+    diagramData?: unknown;
+  };
+}
+
+interface User {
+  avatarUrl?: string;
+  email?: string;
+  fullName?: string;
+}
+
+interface ChatMessageProps {
+  message: ConvexMessage;
+  user: User | null;
+  isUser: boolean;
+  isFirstInGroup: boolean;
+  formatTimestamp: (timestamp: number) => string;
+  copyToClipboard: (text: string, messageId: string) => Promise<void>;
+  copiedMessage: string | null;
+  onApproveDiagram?: (messageId: string) => Promise<void>;
+  onRequestDiagramChanges?: (messageId: string, feedback: string) => Promise<void>;
+  isSubmittingDiagram?: boolean;
+}
+
+// Performance optimized message component with React.memo
+export const ChatMessage = memo<ChatMessageProps>(({ 
+  message, 
+  user, 
+  isUser, 
+  isFirstInGroup, 
+  formatTimestamp, 
+  copyToClipboard, 
+  copiedMessage, 
+  onApproveDiagram, 
+  onRequestDiagramChanges, 
+  isSubmittingDiagram 
+}) => {
+  const hasDiagram = message.metadata?.diagramData;
+
+  return (
+    <div className="space-y-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        whileHover={{ scale: 1.01 }}
+        className="group"
+      >
+        <Card className={`
+          transition-all duration-300 shadow-lg hover:shadow-xl border-0
+          ${isUser 
+            ? 'chat-bubble-user ml-auto max-w-[80%] bg-gradient-to-br from-blue-600/10 to-blue-700/5 border border-blue-400/20' 
+            : 'chat-bubble-assistant max-w-[85%] bg-gradient-to-br from-gray-800/40 to-gray-900/20 border border-gray-600/20'
+          }
+          ${isFirstInGroup ? 'rounded-2xl' : (isUser ? 'rounded-2xl rounded-tr-lg' : 'rounded-2xl rounded-tl-lg')}
+          backdrop-blur-xl
+        `}>
+          <CardContent className="p-6 relative">
+            <div className="space-y-4">
+              <SafeText 
+                className={`text-base leading-relaxed font-medium ${
+                  isUser ? 'text-foreground' : 'text-foreground/95'
+                }`}
+              >
+                {message.content}
+              </SafeText>
+              
+              {message.metadata?.model && (
+                <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                  <Badge variant="outline" className="glass text-xs border-white/20 bg-white/5 backdrop-blur-sm rounded-lg px-2 py-1">
+                    {message.metadata.model}
+                  </Badge>
+                  {message.metadata.tokens && (
+                    <span className="bg-gray-800/50 px-2 py-1 rounded-md">{message.metadata.tokens} tokens</span>
+                  )}
+                  {message.metadata.cost && (
+                    <span className="bg-green-800/30 text-green-300 px-2 py-1 rounded-md">${message.metadata.cost.toFixed(4)}</span>
+                  )}
+                  {hasDiagram && (
+                    <Badge variant="outline" className="glass text-xs text-blue-300 border-blue-400/30 bg-blue-500/10 backdrop-blur-sm rounded-lg px-2 py-1">
+                      Contains Diagram
+                    </Badge>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className={`absolute top-3 ${isUser ? 'left-3' : 'right-3'} opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center gap-2`}>
+              <motion.div
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.9 }}
+              >
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => copyToClipboard(message.content, message._id)}
+                  className="h-8 w-8 p-0 glass-hover rounded-lg border border-white/10 hover:border-white/20 hover:bg-white/5 backdrop-blur-sm"
+                >
+                  {copiedMessage === message._id ? (
+                    <Check className="w-4 h-4 text-green-400" />
+                  ) : (
+                    <Copy className="w-4 h-4" />
+                  )}
+                </Button>
+              </motion.div>
+            </div>
+
+            <div className={`text-xs text-muted-foreground/70 mt-3 ${
+              isUser ? 'text-right' : 'text-left'
+            }`}>
+              {formatTimestamp(message.createdAt)}
+            </div>
+          </CardContent>
+        </Card>
+      </motion.div>
+
+      {/* Diagram Component */}
+      {hasDiagram && onApproveDiagram && onRequestDiagramChanges && (
+        <DiagramMessageComponent
+          diagramData={message.metadata.diagramData}
+          messageId={message._id}
+          onApprove={onApproveDiagram}
+          onRequestChanges={onRequestDiagramChanges}
+          isSubmitting={isSubmittingDiagram}
+        />
+      )}
+    </div>
+  );
+});
+
+ChatMessage.displayName = 'ChatMessage';
\ No newline at end of file
diff --git a/src/components/chat/ChatSidebar.tsx b/src/components/chat/ChatSidebar.tsx
new file mode 100644
index 00000000..a2c158a5
--- /dev/null
+++ b/src/components/chat/ChatSidebar.tsx
@@ -0,0 +1,196 @@
+import React, { memo } from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Plus, MessageSquare, Trash2, Zap } from 'lucide-react';
+
+// Types for the sidebar
+interface Chat {
+  _id: string;
+  title: string;
+  updatedAt: number;
+}
+
+interface User {
+  avatarUrl?: string;
+  email?: string;
+  fullName?: string;
+}
+
+interface ChatSidebarProps {
+  sidebarExpanded: boolean;
+  setSidebarExpanded: (expanded: boolean) => void;
+  chats: Chat[];
+  selectedChatId: string | null;
+  startNewChat: () => void;
+  selectChat: (chatId: string) => void;
+  deleteChat: (chatId: string) => void;
+  formatTimestamp: (timestamp: number) => string;
+  user: User | null;
+}
+
+export const ChatSidebar: React.FC<ChatSidebarProps> = memo(({
+  sidebarExpanded,
+  setSidebarExpanded,
+  chats,
+  selectedChatId,
+  startNewChat,
+  selectChat,
+  deleteChat,
+  formatTimestamp,
+  user
+}) => {
+  return (
+    <motion.div
+      onMouseEnter={() => setSidebarExpanded(true)}
+      onMouseLeave={() => setSidebarExpanded(false)}
+      className={`${
+        sidebarExpanded ? 'w-80' : 'w-14'
+      } bg-gradient-to-b from-gray-900/95 to-black/90 backdrop-blur-2xl border-r border-white/10 hover:border-white/20 flex flex-col transition-all duration-300 relative overflow-hidden shadow-2xl`}
+      animate={{ width: sidebarExpanded ? 320 : 56 }}
+      transition={{ duration: 0.4, ease: "easeInOut" }}
+    >
+      {/* Premium sidebar header */}
+      <div className="p-4 border-b border-white/10">
+        <motion.div 
+          className="flex items-center gap-3"
+          animate={{ opacity: sidebarExpanded ? 1 : 0 }}
+          transition={{ delay: sidebarExpanded ? 0.15 : 0, duration: 0.3 }}
+        >
+          <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center shadow-lg border border-blue-500/20">
+            <Zap className="w-5 h-5 text-white" />
+          </div>
+          {sidebarExpanded && (
+            <motion.div
+              initial={{ x: -20 }}
+              animate={{ x: 0 }}
+              transition={{ duration: 0.3 }}
+            >
+              <h3 className="font-bold text-lg text-gradient-static">ZapDev</h3>
+              <p className="text-xs text-muted-foreground/80">AI Development Assistant</p>
+            </motion.div>
+          )}
+        </motion.div>
+      </div>
+
+      {/* Premium new chat button */}
+      <div className="p-4">
+        <motion.div
+          whileHover={{ scale: 1.02, y: -2 }}
+          whileTap={{ scale: 0.98 }}
+        >
+          <Button
+            onClick={startNewChat}
+            className="w-full justify-start bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white border-0 rounded-xl py-3 shadow-lg hover:shadow-xl transition-all duration-300"
+            variant="ghost"
+          >
+            <Plus className="w-5 h-5" />
+            {sidebarExpanded && (
+              <motion.span 
+                className="ml-3 font-medium"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.1 }}
+              >
+                New Chat
+              </motion.span>
+            )}
+          </Button>
+        </motion.div>
+      </div>
+
+      {/* Chat list */}
+      <ScrollArea className="flex-1 custom-scrollbar">
+        <div className="p-3 space-y-2">
+          {Array.isArray(chats) && chats.map((chat, index) => (
+            <motion.button
+              key={chat._id}
+              onClick={() => selectChat(chat._id)}
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className={`w-full text-left p-4 rounded-xl transition-all duration-300 group relative backdrop-blur-sm border ${
+                selectedChatId === chat._id 
+                  ? 'bg-gradient-to-r from-blue-600/20 to-blue-700/10 border-blue-500/30 shadow-lg' 
+                  : 'bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20'
+              }`}
+              whileHover={{ scale: 1.02, x: 4 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              <div className="flex items-center gap-3">
+                <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                  selectedChatId === chat._id 
+                    ? 'bg-blue-600/30 border border-blue-500/40' 
+                    : 'bg-gray-700/50 border border-gray-600/30'
+                }`}>
+                  <MessageSquare className="w-4 h-4 text-primary" />
+                </div>
+                {sidebarExpanded && (
+                  <motion.div 
+                    className="min-w-0 flex-1"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ delay: 0.1 }}
+                  >
+                    <p className="font-semibold truncate text-sm mb-1">
+                      {chat.title}
+                    </p>
+                    <p className="text-xs text-muted-foreground/70">
+                      {formatTimestamp(chat.updatedAt)}
+                    </p>
+                  </motion.div>
+                )}
+              </div>
+              
+              {sidebarExpanded && (
+                <motion.div
+                  className="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity"
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                >
+                  <Button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      deleteChat(chat._id);
+                    }}
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 w-7 p-0 rounded-lg bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 hover:border-red-500/30 transition-all duration-200"
+                  >
+                    <Trash2 className="w-3.5 h-3.5 text-red-400" />
+                  </Button>
+                </motion.div>
+              )}
+            </motion.button>
+          ))}
+        </div>
+      </ScrollArea>
+
+      {/* Sidebar footer */}
+      {sidebarExpanded && (
+        <motion.div 
+          className="p-4 border-t border-white/10"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.3 }}
+        >
+          <div className="flex items-center gap-3 px-3 py-2 rounded-lg bg-white/5">
+            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-600/30 to-blue-700/20 flex items-center justify-center border border-blue-500/20">
+              <span className="text-xs font-semibold text-blue-300">
+                {user?.fullName?.charAt(0).toUpperCase() || 'U'}
+              </span>
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium truncate">
+                {user?.fullName || 'User'}
+              </p>
+              <p className="text-xs text-muted-foreground truncate">
+                {user?.email}
+              </p>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </motion.div>
+  );
+});
\ No newline at end of file
diff --git a/src/components/chat/WelcomeScreen.tsx b/src/components/chat/WelcomeScreen.tsx
new file mode 100644
index 00000000..42cca675
--- /dev/null
+++ b/src/components/chat/WelcomeScreen.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Sparkles, Zap, Code, Palette, Layers, Bot } from 'lucide-react';
+
+interface Feature {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  desc: string;
+}
+
+const features: Feature[] = [
+  {
+    icon: Code,
+    title: "Full-Stack Development",
+    desc: "Build complete web applications with modern frameworks and best practices."
+  },
+  {
+    icon: Bot,
+    title: "AI-Powered Assistance",
+    desc: "Get intelligent code suggestions and architecture recommendations."
+  },
+  {
+    icon: Zap,
+    title: "Rapid Prototyping", 
+    desc: "Transform ideas into working prototypes in minutes, not hours."
+  },
+  {
+    icon: Palette,
+    title: "Modern UI Design",
+    desc: "Create beautiful, responsive interfaces with premium design systems."
+  },
+  {
+    icon: Layers,
+    title: "Component Libraries",
+    desc: "Access pre-built components and design patterns for faster development."
+  },
+  {
+    icon: Sparkles,
+    title: "Smart Optimization",
+    desc: "Automatic performance optimization and best practice enforcement."
+  }
+];
+
+export const WelcomeScreen: React.FC = () => {
+  return (
+    <div className="flex-1 flex items-center justify-center p-8">
+      <div className="text-center max-w-4xl mx-auto">
+        {/* Enhanced welcome header */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          className="mb-12"
+        >
+          <motion.div
+            animate={{ rotate: 360 }}
+            transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+            className="inline-block mb-6"
+          >
+            <div className="w-20 h-20 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl flex items-center justify-center shadow-2xl border border-blue-500/20">
+              <Zap className="w-10 h-10 text-white" />
+            </div>
+          </motion.div>
+          
+          <motion.h1 
+            className="text-5xl font-bold mb-4 text-gradient-static"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+          >
+            Welcome to ZapDev
+          </motion.h1>
+          
+          <motion.p 
+            className="text-xl text-muted-foreground/80 mb-8 max-w-2xl mx-auto leading-relaxed"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.6, delay: 0.6 }}
+          >
+            Your AI-powered development companion. Build full-stack applications, create stunning UIs, 
+            and solve complex coding challenges with intelligent assistance.
+          </motion.p>
+        </motion.div>
+
+        {/* Enhanced features grid */}
+        <motion.div
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8, delay: 0.8 }}
+        >
+          {features.map((feature, index) => (
+            <motion.div
+              key={feature.title}
+              className="glass-elevated p-6 rounded-xl glass-hover"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.8 + index * 0.1 }}
+              whileHover={{ scale: 1.02, y: -2 }}
+            >
+              <feature.icon className="w-8 h-8 text-primary mb-3 mx-auto" />
+              <h3 className="font-semibold text-lg mb-2">{feature.title}</h3>
+              <p className="text-muted-foreground text-sm text-pretty">{feature.desc}</p>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Enhanced call-to-action */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 1.4 }}
+          className="text-center"
+        >
+          <div className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-blue-600/20 to-blue-700/10 border border-blue-500/30 backdrop-blur-sm">
+            <Sparkles className="w-5 h-5 text-blue-400" />
+            <span className="text-blue-200 font-medium">Start by describing what you want to build</span>
+          </div>
+        </motion.div>
+
+        {/* Example prompts */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.6, delay: 1.6 }}
+          className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-3 max-w-2xl mx-auto"
+        >
+          {[
+            "Create a todo app with drag and drop functionality",
+            "Build a dashboard with charts and data visualization", 
+            "Design a landing page for a SaaS product",
+            "Develop a chat application with real-time messaging"
+          ].map((prompt, index) => (
+            <motion.div
+              key={prompt}
+              className="text-sm text-muted-foreground/60 p-3 rounded-lg bg-white/5 border border-white/10 hover:border-white/20 transition-all duration-200 cursor-pointer hover:bg-white/10"
+              whileHover={{ scale: 1.02 }}
+              initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 1.8 + index * 0.1 }}
+            >
+              "{prompt}"
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/pricing/DynamicPricingSection.tsx b/src/components/pricing/DynamicPricingSection.tsx
index ff3fb15f..24191233 100644
--- a/src/components/pricing/DynamicPricingSection.tsx
+++ b/src/components/pricing/DynamicPricingSection.tsx
@@ -8,16 +8,8 @@ import { useEffect } from "react";
 export const DynamicPricingSection = () => {
   const { user } = useAuth();
   
-  // Persist convex user id for success redirect sync
-  useEffect(() => {
-    if (user?._id) {
-      try {
-        localStorage.setItem('convexUserId', user._id);
-      } catch (error) {
-        // Optionally log error or ignore
-      }
-    }
-  }, [user?._id]);
+  // User ID persistence is now handled securely via session state
+  // No need to store sensitive user data in localStorage
 
   return (
     <motion.section 
diff --git a/src/hooks/useUsageTracking.ts b/src/hooks/useUsageTracking.ts
index e8150573..2a104194 100644
--- a/src/hooks/useUsageTracking.ts
+++ b/src/hooks/useUsageTracking.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from 'react';
 import { useAuth } from './useAuth';
 import { usePostHog } from 'posthog-js/react';
+import { authTokenManager } from '@/lib/auth-token';
 
 interface UsageEventMetadata {
   requests?: number;
@@ -40,10 +41,8 @@ export const useUsageTracking = () => {
         ingested: false,
       };
 
-      // Store in localStorage for backup/offline support
-      const existingEvents = JSON.parse(localStorage.getItem('pendingUsageEvents') || '[]');
-      existingEvents.push(localEvent);
-      localStorage.setItem('pendingUsageEvents', JSON.stringify(existingEvents));
+      // Store events in memory only for security - no localStorage persistence
+      // Events will be sent immediately to PostHog instead of being stored locally
 
       // Send event to PostHog with error handling
       try {
@@ -122,12 +121,13 @@ export const useUsageTracking = () => {
 
   // Get pending events (for sync with server)
   const getPendingEvents = useCallback(() => {
-    return JSON.parse(localStorage.getItem('pendingUsageEvents') || '[]');
+    // Security improvement: no longer storing events in localStorage
+    return [];
   }, []);
 
   // Clear pending events (after successful sync)
   const clearPendingEvents = useCallback(() => {
-    localStorage.removeItem('pendingUsageEvents');
+    // Security improvement: no localStorage usage
   }, []);
 
   // Sync pending events with server
@@ -159,7 +159,7 @@ export const useUsageTracking = () => {
         const url = base
           ? `${base.replace(/\/$/, '')}/trpc/billing.getUserSubscription`
           : '/trpc/billing.getUserSubscription';
-        const token = localStorage.getItem('authToken') || undefined;
+        const token = authTokenManager.getToken();
         const res = await fetch(url, {
           method: 'GET',
           headers: {
diff --git a/src/index.css b/src/index.css
index 002c1620..39a40fbd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -86,14 +86,15 @@
   }
 }
 
-/* Enhanced glass morphism components */
+/* Premium glass morphism components */
 .glass {
   background: var(--gradient-surface);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid hsl(0 0% 100% / 0.1);
+  backdrop-filter: blur(32px);
+  -webkit-backdrop-filter: blur(32px);
+  border: 1px solid hsl(0 0% 100% / 0.12);
   position: relative;
   overflow: hidden;
+  box-shadow: var(--shadow-soft);
 }
 
 .glass::before {
@@ -114,11 +115,14 @@
 }
 
 .glass-elevated {
-  background: var(--color-chat-surface-elevated);
-  backdrop-filter: blur(32px);
-  -webkit-backdrop-filter: blur(32px);
-  border: 1px solid hsl(0 0% 100% / 0.15);
-  box-shadow: var(--shadow-medium);
+  background: linear-gradient(135deg, hsl(0 0% 8% / 0.95) 0%, hsl(0 0% 6% / 0.95) 100%);
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
+  border: 1px solid hsl(0 0% 100% / 0.18);
+  box-shadow: 
+    0 8px 32px -8px hsl(0 0% 0% / 0.3),
+    0 0 0 1px hsl(0 0% 100% / 0.05),
+    inset 0 1px 0 hsl(0 0% 100% / 0.1);
 }
 
 .glass-hover {
@@ -126,10 +130,13 @@
 }
 
 .glass-hover:hover {
-  background: hsl(0 0% 100% / 0.08);
-  border-color: hsl(0 0% 100% / 0.2);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-strong);
+  background: linear-gradient(135deg, hsl(0 0% 100% / 0.12) 0%, hsl(0 0% 100% / 0.06) 100%);
+  border-color: hsl(0 0% 100% / 0.25);
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 
+    0 12px 40px -8px hsl(0 0% 0% / 0.4),
+    0 0 0 1px hsl(0 0% 100% / 0.08),
+    inset 0 1px 0 hsl(0 0% 100% / 0.15);
 }
 
 /* Enhanced text gradients */
@@ -149,13 +156,16 @@
   -webkit-text-fill-color: transparent;
 }
 
-/* Enhanced button components */
+/* Premium button components */
 .button-gradient {
-  background: var(--gradient-primary);
+  background: linear-gradient(135deg, #3E6FF3 0%, #5577FF 50%, #1E40AF 100%);
   border: none;
   position: relative;
   overflow: hidden;
   transition: all var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 
+    0 4px 16px -4px hsl(214 100% 50% / 0.3),
+    inset 0 1px 0 hsl(0 0% 100% / 0.2);
 }
 
 .button-gradient::before {
@@ -172,19 +182,26 @@
 }
 
 .button-gradient:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-glow);
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 
+    0 8px 32px -8px hsl(214 100% 50% / 0.5),
+    0 0 32px hsl(214 100% 50% / 0.3),
+    inset 0 1px 0 hsl(0 0% 100% / 0.3);
+  background: linear-gradient(135deg, #4F7FFF 0%, #6688FF 50%, #2E50CF 100%);
 }
 
 .button-gradient:active {
   transform: translateY(0);
 }
 
-/* Chat-specific styling */
+/* Premium chat-specific styling */
 .chat-bubble-user {
-  background: var(--color-chat-user-bg);
-  border: 1px solid var(--color-chat-user-border);
+  background: linear-gradient(135deg, hsl(214 100% 50% / 0.15) 0%, hsl(214 100% 50% / 0.08) 100%);
+  border: 1px solid hsl(214 100% 50% / 0.25);
   position: relative;
+  box-shadow: 
+    0 4px 16px -4px hsl(214 100% 50% / 0.2),
+    inset 0 1px 0 hsl(0 0% 100% / 0.1);
 }
 
 .chat-bubble-user::before {
@@ -203,10 +220,13 @@
 }
 
 .chat-bubble-assistant {
-  background: var(--color-chat-assistant-bg);
-  border: 1px solid var(--color-chat-assistant-border);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
+  background: linear-gradient(135deg, hsl(0 0% 8% / 0.9) 0%, hsl(0 0% 6% / 0.8) 100%);
+  border: 1px solid hsl(0 0% 20% / 0.6);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  box-shadow: 
+    0 4px 16px -4px hsl(0 0% 0% / 0.2),
+    inset 0 1px 0 hsl(0 0% 100% / 0.05);
 }
 
 /* Enhanced animations */
@@ -281,24 +301,26 @@
   transition: all var(--duration-slow) ease-out;
 }
 
-/* Enhanced scrollbar styling */
+/* Premium scrollbar styling */
 .custom-scrollbar::-webkit-scrollbar {
-  width: 6px;
+  width: 8px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-track {
-  background: hsl(0 0% 8%);
-  border-radius: 3px;
+  background: hsl(0 0% 5%);
+  border-radius: 4px;
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: hsl(0 0% 20%);
-  border-radius: 3px;
-  transition: background var(--duration-fast);
+  background: linear-gradient(45deg, hsl(0 0% 25%) 0%, hsl(0 0% 20%) 100%);
+  border-radius: 4px;
+  border: 1px solid hsl(0 0% 15%);
+  transition: all var(--duration-fast);
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: hsl(0 0% 30%);
+  background: linear-gradient(45deg, hsl(214 100% 50% / 0.6) 0%, hsl(214 100% 45% / 0.4) 100%);
+  border-color: hsl(214 100% 50% / 0.3);
 }
 
 /* Enhanced focus styles */
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 1450980f..4308126c 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -13,12 +13,12 @@ const Index = () => {
   const navigate = useNavigate();
   const { isAuthenticated, user } = useAuth();
 
-  // Trigger sync after Stripe redirect back if applicable
+  // Handle Stripe success redirect - using secure session-based user identification
   useEffect(() => {
     const url = new URL(window.location.href);
     if (url.pathname === '/success') {
       try {
-        const convexUserId = user?._id || localStorage.getItem('convexUserId');
+        const convexUserId = user?._id; // Only use session-based user ID for security
         if (convexUserId) {
           fetch(`/api/success?userId=${encodeURIComponent(convexUserId)}`, { method: 'POST' }).catch(() => {});
         }
@@ -131,19 +131,31 @@ const Index = () => {
                 whileTap={{ scale: 0.95 }}
               >
                 {isAuthenticated ? (
+                  <div className="flex flex-col sm:flex-row gap-3 items-center">
+                    <Button 
+                      size="lg" 
+                      className="button-gradient"
+                      onClick={() => navigate('/chat')}
+                    >
+                      Open Chat
+                    </Button>
+                    <Button 
+                      size="lg" 
+                      variant="outline"
+                      className="border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white"
+                      onClick={() => navigate('/pricing')}
+                    >
+                      Upgrade Plan
+                    </Button>
+                  </div>
+                ) : (
                   <Button 
                     size="lg" 
                     className="button-gradient"
-                    onClick={() => navigate('/chat')}
+                    onClick={() => navigate('/pricing')}
                   >
-                    Open Chat
+                    Get Started
                   </Button>
-                ) : (
-                  <SignInButton mode="redirect" forceRedirectUrl="/chat">
-                    <Button size="lg" className="button-gradient">
-                      Get Started
-                    </Button>
-                  </SignInButton>
                 )}
               </motion.div>
               <motion.div
diff --git a/src/types/__tests__/stripe.test.ts b/src/types/__tests__/stripe.test.ts
new file mode 100644
index 00000000..819dd743
--- /dev/null
+++ b/src/types/__tests__/stripe.test.ts
@@ -0,0 +1,333 @@
+/**
+ * Comprehensive tests for Stripe type utilities
+ * Testing type guards, utility functions, and data extraction
+ */
+
+import {
+  StripeSubscription,
+  StripeCustomer,
+  StripeInvoice,
+  isStripeSubscription,
+  isStripeCustomer,
+  isStripeInvoice,
+  getSubscriptionPeriod,
+  getCustomerEmail,
+  getCustomerMetadata,
+  getInvoiceSubscriptionId
+} from '../stripe';
+
+describe('Stripe Type Utilities', () => {
+  describe('Type Guards', () => {
+    describe('isStripeSubscription', () => {
+      it('should identify valid Stripe subscriptions', () => {
+        const validSubscription = {
+          id: 'sub_123',
+          object: 'subscription',
+          status: 'active' as const,
+          current_period_start: 1640995200,
+          current_period_end: 1643673600,
+          cancel_at_period_end: false,
+          customer: 'cus_123',
+          items: { data: [] },
+          created: 1640995200
+        };
+
+        expect(isStripeSubscription(validSubscription)).toBe(true);
+      });
+
+      it('should reject invalid subscriptions', () => {
+        expect(isStripeSubscription(null)).toBe(false);
+        expect(isStripeSubscription(undefined)).toBe(false);
+        expect(isStripeSubscription({})).toBe(false);
+        expect(isStripeSubscription({ id: 'sub_123' })).toBe(false);
+        expect(isStripeSubscription({ object: 'subscription' })).toBe(false);
+        expect(isStripeSubscription({ id: 'sub_123', object: 'customer' })).toBe(false);
+      });
+    });
+
+    describe('isStripeCustomer', () => {
+      it('should identify valid Stripe customers', () => {
+        const validCustomer = {
+          id: 'cus_123',
+          object: 'customer',
+          created: 1640995200,
+          email: 'test@example.com',
+          name: 'John Doe',
+          metadata: {}
+        };
+
+        expect(isStripeCustomer(validCustomer)).toBe(true);
+      });
+
+      it('should reject invalid customers', () => {
+        expect(isStripeCustomer(null)).toBe(false);
+        expect(isStripeCustomer({})).toBe(false);
+        expect(isStripeCustomer({ id: 'cus_123' })).toBe(false);
+        expect(isStripeCustomer({ object: 'customer' })).toBe(false);
+        expect(isStripeCustomer({ id: 'cus_123', object: 'subscription' })).toBe(false);
+      });
+    });
+
+    describe('isStripeInvoice', () => {
+      it('should identify valid Stripe invoices', () => {
+        const validInvoice = {
+          id: 'in_123',
+          object: 'invoice',
+          amount_due: 2000,
+          amount_paid: 2000,
+          amount_remaining: 0,
+          currency: 'usd',
+          customer: 'cus_123',
+          status: 'paid' as const,
+          created: 1640995200
+        };
+
+        expect(isStripeInvoice(validInvoice)).toBe(true);
+      });
+
+      it('should reject invalid invoices', () => {
+        expect(isStripeInvoice(null)).toBe(false);
+        expect(isStripeInvoice({})).toBe(false);
+        expect(isStripeInvoice({ id: 'in_123' })).toBe(false);
+        expect(isStripeInvoice({ object: 'invoice' })).toBe(false);
+      });
+    });
+  });
+
+  describe('Utility Functions', () => {
+    describe('getSubscriptionPeriod', () => {
+      it('should extract subscription period correctly', () => {
+        const subscription = {
+          id: 'sub_123',
+          object: 'subscription' as const,
+          status: 'active' as const,
+          current_period_start: 1640995200, // Jan 1, 2022
+          current_period_end: 1643673600,   // Feb 1, 2022
+          cancel_at_period_end: false,
+          customer: 'cus_123',
+          items: { data: [] },
+          created: 1640995200
+        };
+
+        const result = getSubscriptionPeriod(subscription);
+        
+        expect(result).not.toBeNull();
+        expect(result?.currentPeriodStart).toBe(1640995200000); // Converted to milliseconds
+        expect(result?.currentPeriodEnd).toBe(1643673600000);   // Converted to milliseconds
+      });
+
+      it('should return null for invalid subscriptions', () => {
+        expect(getSubscriptionPeriod(null)).toBeNull();
+        expect(getSubscriptionPeriod({})).toBeNull();
+        expect(getSubscriptionPeriod({ id: 'sub_123' })).toBeNull();
+      });
+
+      it('should handle edge cases', () => {
+        const subscriptionWithZero = {
+          id: 'sub_123',
+          object: 'subscription' as const,
+          status: 'active' as const,
+          current_period_start: 0,
+          current_period_end: 0,
+          cancel_at_period_end: false,
+          customer: 'cus_123',
+          items: { data: [] },
+          created: 1640995200
+        };
+
+        const result = getSubscriptionPeriod(subscriptionWithZero);
+        expect(result?.currentPeriodStart).toBe(0);
+        expect(result?.currentPeriodEnd).toBe(0);
+      });
+    });
+
+    describe('getCustomerEmail', () => {
+      it('should extract customer email correctly', () => {
+        const customer = {
+          id: 'cus_123',
+          object: 'customer' as const,
+          created: 1640995200,
+          email: 'test@example.com',
+          name: 'John Doe',
+          metadata: {}
+        };
+
+        expect(getCustomerEmail(customer)).toBe('test@example.com');
+      });
+
+      it('should handle null email', () => {
+        const customer = {
+          id: 'cus_123',
+          object: 'customer' as const,
+          created: 1640995200,
+          email: null,
+          name: 'John Doe',
+          metadata: {}
+        };
+
+        expect(getCustomerEmail(customer)).toBe('');
+      });
+
+      it('should handle deleted customers', () => {
+        const deletedCustomer = {
+          id: 'cus_123',
+          object: 'customer' as const,
+          created: 1640995200,
+          email: 'test@example.com',
+          name: 'John Doe',
+          metadata: {},
+          deleted: true
+        };
+
+        expect(getCustomerEmail(deletedCustomer)).toBe('');
+      });
+
+      it('should return empty string for invalid customers', () => {
+        expect(getCustomerEmail(null)).toBe('');
+        expect(getCustomerEmail({})).toBe('');
+        expect(getCustomerEmail({ id: 'cus_123' })).toBe('');
+      });
+    });
+
+    describe('getCustomerMetadata', () => {
+      it('should extract customer metadata correctly', () => {
+        const customer = {
+          id: 'cus_123',
+          object: 'customer' as const,
+          created: 1640995200,
+          email: 'test@example.com',
+          name: 'John Doe',
+          metadata: { userId: '12345', source: 'web' }
+        };
+
+        const metadata = getCustomerMetadata(customer);
+        expect(metadata).toEqual({ userId: '12345', source: 'web' });
+      });
+
+      it('should handle empty metadata', () => {
+        const customer = {
+          id: 'cus_123',
+          object: 'customer' as const,
+          created: 1640995200,
+          email: 'test@example.com',
+          name: 'John Doe',
+          metadata: {}
+        };
+
+        expect(getCustomerMetadata(customer)).toEqual({});
+      });
+
+      it('should handle deleted customers', () => {
+        const deletedCustomer = {
+          id: 'cus_123',
+          object: 'customer' as const,
+          created: 1640995200,
+          email: 'test@example.com',
+          name: 'John Doe',
+          metadata: { userId: '12345' },
+          deleted: true
+        };
+
+        expect(getCustomerMetadata(deletedCustomer)).toEqual({});
+      });
+
+      it('should return empty object for invalid customers', () => {
+        expect(getCustomerMetadata(null)).toEqual({});
+        expect(getCustomerMetadata({})).toEqual({});
+      });
+    });
+
+    describe('getInvoiceSubscriptionId', () => {
+      it('should extract subscription ID from invoice', () => {
+        const invoice = {
+          id: 'in_123',
+          object: 'invoice' as const,
+          amount_due: 2000,
+          amount_paid: 2000,
+          amount_remaining: 0,
+          currency: 'usd',
+          customer: 'cus_123',
+          subscription: 'sub_456',
+          status: 'paid' as const,
+          created: 1640995200
+        };
+
+        expect(getInvoiceSubscriptionId(invoice)).toBe('sub_456');
+      });
+
+      it('should return null when no subscription', () => {
+        const invoice = {
+          id: 'in_123',
+          object: 'invoice' as const,
+          amount_due: 2000,
+          amount_paid: 2000,
+          amount_remaining: 0,
+          currency: 'usd',
+          customer: 'cus_123',
+          status: 'paid' as const,
+          created: 1640995200
+        };
+
+        expect(getInvoiceSubscriptionId(invoice)).toBeNull();
+      });
+
+      it('should return null for invalid invoices', () => {
+        expect(getInvoiceSubscriptionId(null)).toBeNull();
+        expect(getInvoiceSubscriptionId({})).toBeNull();
+      });
+
+      it('should handle subscription as object (not string)', () => {
+        const invoice = {
+          id: 'in_123',
+          object: 'invoice' as const,
+          amount_due: 2000,
+          amount_paid: 2000,
+          amount_remaining: 0,
+          currency: 'usd',
+          customer: 'cus_123',
+          subscription: { id: 'sub_456' }, // Object instead of string
+          status: 'paid' as const,
+          created: 1640995200
+        };
+
+        expect(getInvoiceSubscriptionId(invoice)).toBeNull();
+      });
+    });
+  });
+
+  describe('Data Integrity', () => {
+    it('should handle malformed Stripe objects gracefully', () => {
+      const malformedObjects = [
+        { id: null, object: 'subscription' },
+        { id: 'sub_123', object: null },
+        { id: '', object: 'subscription' },
+        { id: 'sub_123', object: '' },
+        { object: 'subscription' }, // Missing id
+        { id: 'sub_123' } // Missing object
+      ];
+
+      malformedObjects.forEach(obj => {
+        expect(isStripeSubscription(obj)).toBe(false);
+        expect(getSubscriptionPeriod(obj)).toBeNull();
+      });
+    });
+
+    it('should handle numeric fields correctly', () => {
+      const subscription = {
+        id: 'sub_123',
+        object: 'subscription' as const,
+        status: 'active' as const,
+        current_period_start: '1640995200', // String instead of number
+        current_period_end: '1643673600',   // String instead of number
+        cancel_at_period_end: false,
+        customer: 'cus_123',
+        items: { data: [] },
+        created: 1640995200
+      };
+
+      // Should still work with string timestamps (JavaScript coercion)
+      const result = getSubscriptionPeriod(subscription);
+      expect(result).not.toBeNull();
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/types/stripe.ts b/src/types/stripe.ts
new file mode 100644
index 00000000..e358068f
--- /dev/null
+++ b/src/types/stripe.ts
@@ -0,0 +1,144 @@
+/**
+ * Stripe TypeScript Interfaces
+ * Properly typed interfaces to replace unsafe 'as any' casting
+ */
+
+export interface StripeSubscription {
+  id: string;
+  object: 'subscription';
+  status: 'active' | 'canceled' | 'incomplete' | 'incomplete_expired' | 'past_due' | 'trialing' | 'unpaid';
+  current_period_start: number; // Unix timestamp
+  current_period_end: number; // Unix timestamp
+  cancel_at_period_end: boolean;
+  customer: string | StripeCustomer;
+  items: {
+    data: Array<{
+      id: string;
+      price: {
+        id: string;
+        object: 'price';
+        active: boolean;
+        currency: string;
+        unit_amount: number;
+        recurring?: {
+          interval: 'month' | 'year';
+          interval_count: number;
+        };
+      };
+    }>;
+  };
+  metadata?: Record<string, string>;
+  created: number;
+  trial_start?: number;
+  trial_end?: number;
+}
+
+export interface StripeCustomer {
+  id: string;
+  object: 'customer';
+  created: number;
+  email: string | null;
+  name: string | null;
+  metadata: Record<string, string>;
+  deleted?: boolean;
+}
+
+export interface StripeInvoice {
+  id: string;
+  object: 'invoice';
+  amount_due: number;
+  amount_paid: number;
+  amount_remaining: number;
+  currency: string;
+  customer: string | StripeCustomer;
+  subscription?: string | StripeSubscription;
+  status: 'draft' | 'open' | 'paid' | 'uncollectible' | 'void';
+  created: number;
+  due_date?: number;
+  metadata?: Record<string, string>;
+}
+
+export interface StripeWebhookEvent {
+  id: string;
+  object: 'event';
+  type: string;
+  created: number;
+  data: {
+    object: StripeSubscription | StripeCustomer | StripeInvoice | any;
+    previous_attributes?: any;
+  };
+  livemode: boolean;
+  pending_webhooks: number;
+  request: {
+    id: string | null;
+    idempotency_key: string | null;
+  };
+}
+
+// Type guards for runtime type checking
+export function isStripeSubscription(obj: any): obj is StripeSubscription {
+  return obj && obj.object === 'subscription' && typeof obj.id === 'string';
+}
+
+export function isStripeCustomer(obj: any): obj is StripeCustomer {
+  return obj && obj.object === 'customer' && typeof obj.id === 'string';
+}
+
+export function isStripeInvoice(obj: any): obj is StripeInvoice {
+  return obj && obj.object === 'invoice' && typeof obj.id === 'string';
+}
+
+// Utility function to safely access subscription properties
+export function getSubscriptionPeriod(subscription: unknown): {
+  currentPeriodStart: number;
+  currentPeriodEnd: number;
+} | null {
+  if (!isStripeSubscription(subscription)) {
+    return null;
+  }
+  
+  return {
+    currentPeriodStart: subscription.current_period_start * 1000, // Convert to milliseconds
+    currentPeriodEnd: subscription.current_period_end * 1000, // Convert to milliseconds
+  };
+}
+
+// Utility function to safely access customer email
+export function getCustomerEmail(customer: unknown): string {
+  if (!isStripeCustomer(customer) || customer.deleted) {
+    return '';
+  }
+  
+  return customer.email || '';
+}
+
+// Utility function to safely access customer metadata
+export function getCustomerMetadata(customer: unknown): Record<string, string> {
+  if (!isStripeCustomer(customer) || customer.deleted) {
+    return {};
+  }
+  
+  return customer.metadata || {};
+}
+
+// Utility function to safely get subscription ID from invoice
+export function getInvoiceSubscriptionId(invoice: unknown): string | null {
+  if (!isStripeInvoice(invoice)) {
+    return null;
+  }
+  
+  return typeof invoice.subscription === 'string' ? invoice.subscription : null;
+}
+
+// Plan type mapping
+export type PlanType = 'free' | 'starter' | 'pro' | 'enterprise';
+
+export interface SubscriptionData {
+  planId: PlanType;
+  status: StripeSubscription['status'];
+  currentPeriodStart: number; // Milliseconds
+  currentPeriodEnd: number; // Milliseconds  
+  cancelAtPeriodEnd: boolean;
+  stripeSubscriptionId: string;
+  stripeCustomerId: string;
+}
\ No newline at end of file
diff --git a/src/utils/__tests__/security.test.ts b/src/utils/__tests__/security.test.ts
new file mode 100644
index 00000000..2df22218
--- /dev/null
+++ b/src/utils/__tests__/security.test.ts
@@ -0,0 +1,243 @@
+/**
+ * Comprehensive tests for security utilities
+ * Testing XSS protection, input validation, and rate limiting
+ */
+
+import { 
+  sanitizeText, 
+  validateInput, 
+  validateChatTitle, 
+  RateLimiter,
+  MAX_MESSAGE_LENGTH,
+  MAX_TITLE_LENGTH,
+  MIN_TITLE_LENGTH
+} from '../security';
+
+describe('Security Utilities', () => {
+  describe('sanitizeText', () => {
+    it('should sanitize basic XSS patterns', () => {
+      expect(sanitizeText('<script>alert("xss")</script>')).toBe('&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;');
+      expect(sanitizeText('<img src="x" onerror="alert(1)">')).toBe('&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;');
+      expect(sanitizeText("javascript:alert('xss')")).toBe("javascript:alert(&#x27;xss&#x27;)");
+    });
+
+    it('should handle ampersands correctly', () => {
+      expect(sanitizeText('Ben & Jerry')).toBe('Ben &amp; Jerry');
+      expect(sanitizeText('A & B & C')).toBe('A &amp; B &amp; C');
+    });
+
+    it('should preserve safe text', () => {
+      expect(sanitizeText('Hello world!')).toBe('Hello world!');
+      expect(sanitizeText('This is a normal message.')).toBe('This is a normal message.');
+      expect(sanitizeText('123456789')).toBe('123456789');
+    });
+
+    it('should trim whitespace', () => {
+      expect(sanitizeText('  hello world  ')).toBe('hello world');
+      expect(sanitizeText('\n\ttab and newline\n\t')).toBe('tab and newline');
+    });
+
+    it('should handle empty strings', () => {
+      expect(sanitizeText('')).toBe('');
+      expect(sanitizeText('   ')).toBe('');
+    });
+
+    it('should handle mixed content', () => {
+      const mixed = 'Hello <b>world</b> & "friends"!';
+      const expected = 'Hello &lt;b&gt;world&lt;/b&gt; &amp; &quot;friends&quot;!';
+      expect(sanitizeText(mixed)).toBe(expected);
+    });
+  });
+
+  describe('validateInput', () => {
+    it('should validate normal input', () => {
+      const result = validateInput('Hello world', 100);
+      expect(result.isValid).toBe(true);
+      expect(result.error).toBeUndefined();
+    });
+
+    it('should reject non-string input', () => {
+      const result = validateInput(null as any, 100);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toBe('Input must be a non-empty string');
+    });
+
+    it('should reject empty strings', () => {
+      const result = validateInput('', 100);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toBe('Input cannot be empty or only whitespace');
+    });
+
+    it('should reject whitespace-only strings', () => {
+      const result = validateInput('   \n\t   ', 100);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toBe('Input cannot be empty or only whitespace');
+    });
+
+    it('should reject input exceeding max length', () => {
+      const longText = 'a'.repeat(101);
+      const result = validateInput(longText, 100);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toBe('Input exceeds maximum length of 100 characters');
+    });
+
+    it('should accept input at max length boundary', () => {
+      const maxText = 'a'.repeat(100);
+      const result = validateInput(maxText, 100);
+      expect(result.isValid).toBe(true);
+    });
+  });
+
+  describe('validateChatTitle', () => {
+    it('should validate normal titles', () => {
+      const result = validateChatTitle('My Chat Title');
+      expect(result.isValid).toBe(true);
+      expect(result.error).toBeUndefined();
+    });
+
+    it('should reject non-string titles', () => {
+      const result = validateChatTitle(undefined as any);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toBe('Title must be a non-empty string');
+    });
+
+    it('should reject empty titles', () => {
+      const result = validateChatTitle('');
+      expect(result.isValid).toBe(false);
+      expect(result.error).toBe(`Title must be at least ${MIN_TITLE_LENGTH} character(s)`);
+    });
+
+    it('should reject titles that are too long', () => {
+      const longTitle = 'a'.repeat(MAX_TITLE_LENGTH + 1);
+      const result = validateChatTitle(longTitle);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toBe(`Title exceeds maximum length of ${MAX_TITLE_LENGTH} characters`);
+    });
+
+    it('should detect XSS patterns in titles', () => {
+      const xssTests = [
+        '<script>alert("xss")</script>',
+        'javascript:alert(1)',
+        '<iframe src="evil.com"></iframe>',
+        'onclick="alert(1)"',
+        '<object data="evil.swf"></object>',
+        '<embed src="evil.swf">'
+      ];
+
+      xssTests.forEach(xssTitle => {
+        const result = validateChatTitle(xssTitle);
+        expect(result.isValid).toBe(false);
+        expect(result.error).toBe('Title contains potentially unsafe content');
+      });
+    });
+
+    it('should allow safe HTML-like text', () => {
+      // These look like HTML but aren't actually dangerous
+      const safeTests = [
+        'My Project v2.0',
+        'API < Database Integration',
+        'Component A > Component B',
+        'Settings & Configuration'
+      ];
+
+      safeTests.forEach(safeTitle => {
+        const result = validateChatTitle(safeTitle);
+        expect(result.isValid).toBe(true);
+      });
+    });
+
+    it('should handle title trimming', () => {
+      const result = validateChatTitle('  My Title  ');
+      expect(result.isValid).toBe(true);
+    });
+  });
+
+  describe('RateLimiter', () => {
+    let rateLimiter: RateLimiter;
+
+    beforeEach(() => {
+      rateLimiter = new RateLimiter(3, 1000); // 3 attempts per second
+    });
+
+    it('should allow requests within limit', () => {
+      expect(rateLimiter.canMakeRequest('user1')).toBe(true);
+      expect(rateLimiter.canMakeRequest('user1')).toBe(true);
+      expect(rateLimiter.canMakeRequest('user1')).toBe(true);
+    });
+
+    it('should block requests exceeding limit', () => {
+      // Use up the limit
+      rateLimiter.canMakeRequest('user1');
+      rateLimiter.canMakeRequest('user1');
+      rateLimiter.canMakeRequest('user1');
+      
+      // This should be blocked
+      expect(rateLimiter.canMakeRequest('user1')).toBe(false);
+    });
+
+    it('should track different users separately', () => {
+      // Use up limit for user1
+      rateLimiter.canMakeRequest('user1');
+      rateLimiter.canMakeRequest('user1');
+      rateLimiter.canMakeRequest('user1');
+      
+      // user2 should still be able to make requests
+      expect(rateLimiter.canMakeRequest('user2')).toBe(true);
+      expect(rateLimiter.canMakeRequest('user2')).toBe(true);
+    });
+
+    it('should calculate remaining attempts correctly', () => {
+      expect(rateLimiter.getRemainingAttempts('user1')).toBe(3);
+      
+      rateLimiter.canMakeRequest('user1');
+      expect(rateLimiter.getRemainingAttempts('user1')).toBe(2);
+      
+      rateLimiter.canMakeRequest('user1');
+      expect(rateLimiter.getRemainingAttempts('user1')).toBe(1);
+      
+      rateLimiter.canMakeRequest('user1');
+      expect(rateLimiter.getRemainingAttempts('user1')).toBe(0);
+    });
+
+    it('should reset user limits', () => {
+      // Use up the limit
+      rateLimiter.canMakeRequest('user1');
+      rateLimiter.canMakeRequest('user1');
+      rateLimiter.canMakeRequest('user1');
+      
+      expect(rateLimiter.canMakeRequest('user1')).toBe(false);
+      
+      // Reset and try again
+      rateLimiter.reset('user1');
+      expect(rateLimiter.canMakeRequest('user1')).toBe(true);
+    });
+
+    it('should handle time-based resets', (done) => {
+      const shortLimiter = new RateLimiter(2, 100); // 2 attempts per 100ms
+      
+      // Use up the limit
+      shortLimiter.canMakeRequest('user1');
+      shortLimiter.canMakeRequest('user1');
+      expect(shortLimiter.canMakeRequest('user1')).toBe(false);
+      
+      // Wait for the time window to pass
+      setTimeout(() => {
+        expect(shortLimiter.canMakeRequest('user1')).toBe(true);
+        done();
+      }, 150);
+    });
+  });
+
+  describe('Constants', () => {
+    it('should have sensible security constants', () => {
+      expect(MAX_MESSAGE_LENGTH).toBeGreaterThan(0);
+      expect(MAX_MESSAGE_LENGTH).toBeLessThan(100000); // Reasonable upper bound
+      
+      expect(MAX_TITLE_LENGTH).toBeGreaterThan(0);
+      expect(MAX_TITLE_LENGTH).toBeLessThan(1000);
+      
+      expect(MIN_TITLE_LENGTH).toBeGreaterThan(0);
+      expect(MIN_TITLE_LENGTH).toBeLessThanOrEqual(MAX_TITLE_LENGTH);
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/utils/performance.ts b/src/utils/performance.ts
new file mode 100644
index 00000000..fb2dca6a
--- /dev/null
+++ b/src/utils/performance.ts
@@ -0,0 +1,49 @@
+/**
+ * Performance Utility Functions
+ * Extracted from EnhancedChatInterface for better code organization
+ */
+
+// Performance utility functions
+export const throttle = <T extends (...args: any[]) => any>(func: T, limit: number): T => {
+  let inThrottle: boolean;
+  return ((...args: any[]) => {
+    if (!inThrottle) {
+      func.apply(null, args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  }) as T;
+};
+
+export const debounce = <T extends (...args: any[]) => any>(func: T, delay: number): T => {
+  let timeoutId: NodeJS.Timeout;
+  return ((...args: any[]) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(null, args), delay);
+  }) as T;
+};
+
+// Memory monitoring utilities
+export class PerformanceMonitor {
+  private static instance: PerformanceMonitor;
+  
+  static getInstance(): PerformanceMonitor {
+    if (!PerformanceMonitor.instance) {
+      PerformanceMonitor.instance = new PerformanceMonitor();
+    }
+    return PerformanceMonitor.instance;
+  }
+  
+  measureMemoryUsage(): number {
+    if ('memory' in performance) {
+      const memory = (performance as any).memory;
+      return memory.usedJSHeapSize;
+    }
+    return 0;
+  }
+  
+  logPerformanceMetrics(componentName: string): void {
+    const memory = this.measureMemoryUsage();
+    console.log(`[PERFORMANCE] ${componentName}: ${(memory / 1024 / 1024).toFixed(2)} MB`);
+  }
+}
\ No newline at end of file
diff --git a/src/utils/security.ts b/src/utils/security.ts
new file mode 100644
index 00000000..ff60a4b4
--- /dev/null
+++ b/src/utils/security.ts
@@ -0,0 +1,115 @@
+/**
+ * Security and Input Validation Utilities
+ * Extracted from EnhancedChatInterface for better security management
+ */
+
+// Security constants for input validation
+export const MAX_MESSAGE_LENGTH = 10000;
+export const MAX_TITLE_LENGTH = 100;
+export const MIN_TITLE_LENGTH = 1;
+
+// XSS protection: sanitize text input
+export const sanitizeText = (text: string): string => {
+  return text
+    .replace(/[<>'"&]/g, (char) => {
+      const chars: { [key: string]: string } = {
+        '<': '&lt;',
+        '>': '&gt;',
+        "'": '&#x27;',
+        '"': '&quot;',
+        '&': '&amp;'
+      };
+      return chars[char] || char;
+    })
+    .trim();
+};
+
+// Validate input length and content
+export const validateInput = (text: string, maxLength: number): { isValid: boolean; error?: string } => {
+  if (!text || typeof text !== 'string') {
+    return { isValid: false, error: 'Input must be a non-empty string' };
+  }
+  
+  if (text.trim().length === 0) {
+    return { isValid: false, error: 'Input cannot be empty or only whitespace' };
+  }
+  
+  if (text.length > maxLength) {
+    return { isValid: false, error: `Input exceeds maximum length of ${maxLength} characters` };
+  }
+  
+  return { isValid: true };
+};
+
+// Validate chat title
+export const validateChatTitle = (title: string): { isValid: boolean; error?: string } => {
+  if (!title || typeof title !== 'string') {
+    return { isValid: false, error: 'Title must be a non-empty string' };
+  }
+  
+  const trimmedTitle = title.trim();
+  
+  if (trimmedTitle.length < MIN_TITLE_LENGTH) {
+    return { isValid: false, error: `Title must be at least ${MIN_TITLE_LENGTH} character(s)` };
+  }
+  
+  if (trimmedTitle.length > MAX_TITLE_LENGTH) {
+    return { isValid: false, error: `Title exceeds maximum length of ${MAX_TITLE_LENGTH} characters` };
+  }
+  
+  // Check for potential XSS patterns
+  const xssPatterns = [
+    /<script/i,
+    /javascript:/i,
+    /on\w+\s*=/i,
+    /<iframe/i,
+    /<object/i,
+    /<embed/i
+  ];
+  
+  const hasXSSPattern = xssPatterns.some(pattern => pattern.test(trimmedTitle));
+  if (hasXSSPattern) {
+    return { isValid: false, error: 'Title contains potentially unsafe content' };
+  }
+  
+  return { isValid: true };
+};
+
+// Rate limiting helper
+export class RateLimiter {
+  private attempts: Map<string, number[]> = new Map();
+  
+  constructor(
+    private maxAttempts: number = 10,
+    private windowMs: number = 60000 // 1 minute
+  ) {}
+  
+  canMakeRequest(identifier: string): boolean {
+    const now = Date.now();
+    const userAttempts = this.attempts.get(identifier) || [];
+    
+    // Remove old attempts outside the time window
+    const recentAttempts = userAttempts.filter(time => now - time < this.windowMs);
+    
+    if (recentAttempts.length >= this.maxAttempts) {
+      return false;
+    }
+    
+    // Record this attempt
+    recentAttempts.push(now);
+    this.attempts.set(identifier, recentAttempts);
+    
+    return true;
+  }
+  
+  getRemainingAttempts(identifier: string): number {
+    const userAttempts = this.attempts.get(identifier) || [];
+    const now = Date.now();
+    const recentAttempts = userAttempts.filter(time => now - time < this.windowMs);
+    return Math.max(0, this.maxAttempts - recentAttempts.length);
+  }
+  
+  reset(identifier: string): void {
+    this.attempts.delete(identifier);
+  }
+}
\ No newline at end of file
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 00000000..caad0d96
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,27 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'path';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts'],
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'src/test/',
+        '**/*.d.ts',
+        '**/*.config.*',
+        'dist/',
+        'build/'
+      ]
+    }
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src')
+    }
+  }
+});
\ No newline at end of file