repomix-output.txt

This file is a merged representation of the entire codebase, combining all repository files into a single document.
Generated by Repomix on: 2024-11-28T07:12:41.160Z

================================================================
File Summary
================================================================

Purpose:
--------
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.

File Format:
------------
The content is organized as follows:
1. This summary section
2. Repository information
3. Repository structure
4. Multiple file entries, each consisting of:
  a. A separator line (================)
  b. The file path (File: path/to/file)
  c. Another separator line
  d. The full contents of the file
  e. A blank line

Usage Guidelines:
-----------------
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.

Notes:
------
- Some files may have been excluded based on .gitignore rules and Repomix's
  configuration.
- Binary files are not included in this packed representation. Please refer to
  the Repository Structure section for a complete list of file paths, including
  binary files.

Additional Info:
----------------

For more information about Repomix, visit: https://github.com/yamadashy/repomix

================================================================
Repository Structure
================================================================
.bolt/config.json
.bolt/prompt
.gitignore
api/ai/chat.ts
api/ai/generate-code.ts
api/ai/generate-document.ts
api/ai/generate-idea.ts
api/auth/login.ts
api/auth/signup.ts
api/db/index.ts
api/index.ts
drizzle.config.ts
drizzle/0000_lean_robbie_robertson.sql
drizzle/meta/_journal.json
drizzle/meta/0000_snapshot.json
eslint.config.js
index.html
netlify.toml
package.json
postcss.config.js
README.md
SECURITY.md
src/@types/xterm-addon-fit.d.ts
src/App.tsx
src/components/AuthModal.tsx
src/components/dashboard/Analytics.tsx
src/components/dashboard/Chat.tsx
src/components/dashboard/CodeBuilder.tsx
src/components/dashboard/Documents.tsx
src/components/dashboard/IdeaGenerator.tsx
src/components/dashboard/Settings.tsx
src/components/dashboard/Terminal.tsx
src/components/ErrorBoundary.tsx
src/components/Features.tsx
src/components/Footer.tsx
src/components/Hero.tsx
src/components/Navbar.tsx
src/components/PaywallModal.tsx
src/components/Pricing.tsx
src/components/PrivateRoute.tsx
src/components/Testimonials.tsx
src/db/index.ts
src/db/migrate.ts
src/db/schema.ts
src/index.css
src/main.tsx
src/pages/Dashboard.tsx
src/pages/LandingPage.tsx
src/services/api.ts
src/services/webcontainer.ts
src/store/authStore.ts
src/vite-env.d.ts
tailwind.config.js
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vercel.json
vite.config.ts

================================================================
Repository Files
================================================================

================
File: .bolt/config.json
================
{
  "template": "bolt-vite-react-ts"
}

================
File: .bolt/prompt
================
For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.

By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.

Use icons from lucide-react for logos.

Use stock photos from unsplash where appropriate, only valid URLs you know exist. Do not download the images, only link to them in image tags.

================
File: .gitignore
================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# Database
*.db
*.sqlite
*.sqlite3

================
File: api/ai/chat.ts
================
// api/ai/chat.ts
import OpenAI from 'openai';
import type { VercelRequest, VercelResponse } from '@vercel/node';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

export default async function handler(req: VercelRequest, res: VercelResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  // Enable streaming
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Access-Control-Allow-Origin', '*');

  try {
    // Parse the request body
    let messages;
    if (typeof req.body === 'string') {
      messages = JSON.parse(req.body).messages;
    } else {
      messages = req.body.messages;
    }

    if (!messages) {
      throw new Error('No messages provided');
    }

    const completion = await openai.chat.completions.create({
      model: 'gpt-4-0125-preview',
      messages: [
        {
          role: 'system',
          content: 'You are an AI co-founder assistant, helping entrepreneurs build and grow their startups. Provide strategic advice, answer questions, and help with planning.'
        },
        ...messages
      ],
      stream: true,
      temperature: 0.7,
      max_tokens: 1000
    });

    // Stream each chunk of the response
    for await (const chunk of completion) {
      const content = chunk.choices[0]?.delta?.content || '';
      if (content) {
        res.write(`data: ${JSON.stringify({ content })}\n\n`);
      }
    }

    res.write('data: [DONE]\n\n');
    res.end();

  } catch (error: any) {
    console.error('Chat API error:', error);
    res.write(`data: ${JSON.stringify({ error: error.message || 'An error occurred' })}\n\n`);
    res.end();
  }
}

================
File: api/ai/generate-code.ts
================
import { OpenAIStream } from 'ai';
import { Configuration, OpenAIApi } from 'openai-edge';
import { NextRequest } from 'next/server';

// Configure OpenAI
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY
});
const openai = new OpenAIApi(configuration);

// Enable Edge Runtime
export const runtime = 'edge';

export default async function handler(req: NextRequest) {
  if (req.method !== 'POST') {
    return new Response('Method not allowed', { status: 405 });
  }

  try {
    const { template, specifications, features } = await req.json();

    const response = await openai.createChatCompletion({
      model: 'gpt-4-0125-preview',
      messages: [
        {
          role: 'system',
          content: `You are an expert software developer. Generate production-ready, well-documented code based on the provided specifications. 
          Include error handling, best practices, and comments explaining key functionality.`
        },
        {
          role: 'user',
          content: `Generate code for a ${template} with the following:
          Tech Stack: ${specifications.techStack.join(', ')}
          Features: ${JSON.stringify(features)}
          Specifications: ${JSON.stringify(specifications)}
          
          Provide:
          1. Main implementation code
          2. Required dependencies
          3. Setup instructions
          4. API documentation (if applicable)
          5. Testing guidelines`
        }
      ],
      stream: true,
      temperature: 0.2,
      max_tokens: 4000
    });

    // Create a streaming response
    const stream = OpenAIStream(response);
    return new Response(stream);

  } catch (error: any) {
    console.error('Code generation error:', error);
    return new Response(
      JSON.stringify({
        error: 'Error generating code',
        details: error.message
      }),
      {
        status: 500,
        headers: {
          'Content-Type': 'application/json'
        }
      }
    );
  }
}

================
File: api/ai/generate-document.ts
================
// api/ai/generate-document.ts
import OpenAI from 'openai';
import type { VercelRequest, VercelResponse } from '@vercel/node';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

export default async function handler(req: VercelRequest, res: VercelResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { type, businessInfo, audience, purpose, tone } = req.body;

    const documentPrompts = {
      'pitch_deck': 'Create a compelling pitch deck outline with key slides and content',
      'business_plan': 'Write a detailed business plan following standard industry format',
      'marketing_plan': 'Develop a comprehensive marketing strategy and execution plan',
      'financial_projection': 'Generate financial projections and analysis',
      'executive_summary': 'Write a concise executive summary highlighting key business aspects'
    };

    const completion = await openai.chat.completions.create({
      model: 'gpt-4-0125-preview',
      messages: [
        {
          role: 'system',
          content: `You are an expert business document writer. Generate professional ${type} documents that are detailed, well-structured, and tailored to the audience.`
        },
        {
          role: 'user',
          content: `${documentPrompts[type as keyof typeof documentPrompts]}
          
          Business Information: ${JSON.stringify(businessInfo)}
          Target Audience: ${audience}
          Purpose: ${purpose}
          Tone: ${tone}
          
          Provide the document in a well-formatted structure with clear sections and professional language.`
        }
      ],
      temperature: 0.4,
      max_tokens: 3000
    });

    return res.status(200).json({
      document: completion.choices[0].message.content,
      type,
      timestamp: new Date().toISOString()
    });
    
  } catch (error) {
    console.error('Document generation error:', error);
    return res.status(500).json({ error: 'Failed to generate document' });
  }
}

================
File: api/ai/generate-idea.ts
================
// api/ai/generate-idea.ts
import OpenAI from 'openai';
import type { VercelRequest, VercelResponse } from '@vercel/node';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

export default async function handler(req: VercelRequest, res: VercelResponse) {
  if (req.method !== 'POST') {
    console.log('Method not allowed:', req.method);
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    console.log('Received request body:', req.body);
    
    // Parse the request body if it's a string
    const bodyData = typeof req.body === 'string' ? JSON.parse(req.body) : req.body;
    console.log('Parsed request data:', bodyData);

    const { industry, targetMarket, technology, problemSpace } = bodyData;

    // Validate required fields
    if (!industry || !targetMarket || !technology || !problemSpace) {
      console.log('Missing required fields:', { industry, targetMarket, technology, problemSpace });
      return res.status(400).json({ error: 'Missing required fields' });
    }

    console.log('Making OpenAI API call with parameters:', {
      industry,
      targetMarket,
      technology,
      problemSpace
    });

    const completion = await openai.chat.completions.create({
      model: 'gpt-4-0125-preview',
      messages: [
        {
          role: 'system',
          content: 'You are a startup idea generator that creates innovative, market-viable business concepts. Format your response as detailed JSON.'
        },
        {
          role: 'user',
          content: `Generate a detailed startup idea with the following parameters:
          Industry: ${industry}
          Target Market: ${targetMarket}
          Technology: ${technology}
          Problem Space: ${problemSpace}
          
          Return a JSON object with these exact keys:
          {
            "name": "startup name",
            "pitch": "one line pitch",
            "description": "detailed description",
            "keyFeatures": ["feature1", "feature2", ...],
            "targetAudience": "target audience description",
            "revenueModel": "revenue model description",
            "challenges": ["challenge1", "challenge2", ...],
            "growthStrategy": "growth strategy description"
          }`
        }
      ],
      temperature: 0.8,
      max_tokens: 1000,
      response_format: { type: "json_object" }
    });

    console.log('Received OpenAI response');
    const responseContent = completion.choices[0].message.content;
    console.log('Response content:', responseContent);

    const parsedResponse = JSON.parse(responseContent);
    console.log('Parsed response:', parsedResponse);

    return res.status(200).json(parsedResponse);
    
  } catch (error: any) {
    console.error('Detailed error:', {
      name: error.name,
      message: error.message,
      stack: error.stack,
      response: error.response?.data,
      status: error.response?.status
    });

    if (error instanceof SyntaxError) {
      return res.status(400).json({ 
        error: 'Invalid request format',
        details: error.message
      });
    }

    if (error.response?.status === 429) {
      return res.status(429).json({ 
        error: 'Rate limit exceeded. Please try again later.'
      });
    }

    return res.status(500).json({ 
      error: 'Failed to generate idea',
      details: process.env.NODE_ENV === 'development' ? error.message : 'Internal server error'
    });
  }
}

================
File: api/auth/login.ts
================
// api/auth/login.ts
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { compare } from 'bcryptjs';
import { SignJWT } from 'jose';
import { sql } from '@vercel/postgres';

const secret = new TextEncoder().encode(process.env.JWT_SECRET || 'fallback-secret-key-for-development');

export default async function handler(req: VercelRequest, res: VercelResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { email, password } = req.body;

    console.log('Attempting login for email:', email);

    // Check if email and password are provided
    if (!email || !password) {
      return res.status(400).json({ error: 'Email and password are required' });
    }

    // Find user directly with SQL query
    const userResult = await sql`
      SELECT id, email, name, password_hash
      FROM users
      WHERE email = ${email}
    `;

    const user = userResult.rows[0];

    if (!user) {
      console.log('User not found:', email);
      return res.status(401).json({ error: 'Invalid credentials' });
    }

    // Verify password
    const validPassword = await compare(password, user.password_hash);
    if (!validPassword) {
      console.log('Invalid password for user:', email);
      return res.status(401).json({ error: 'Invalid credentials' });
    }

    // Get subscription
    const subscriptionResult = await sql`
      SELECT *
      FROM subscriptions
      WHERE user_id = ${user.id}
      AND status = 'active'
      AND expires_at > NOW()
      ORDER BY created_at DESC
      LIMIT 1
    `;

    const subscription = subscriptionResult.rows[0];

    // Generate JWT
    const token = await new SignJWT({ userId: user.id })
      .setProtectedHeader({ alg: 'HS256' })
      .setExpirationTime('24h')
      .sign(secret);

    console.log('Login successful for user:', email);

    return res.status(200).json({
      token,
      user: {
        id: user.id,
        email: user.email,
        name: user.name
      },
      subscription
    });

  } catch (error) {
    console.error('Login error:', error);
    return res.status(500).json({ 
      error: 'Internal server error',
      details: process.env.NODE_ENV === 'development' ? error.message : undefined
    });
  }
}

================
File: api/auth/signup.ts
================
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { hash } from 'bcryptjs';
import { SignJWT } from 'jose';
import { db } from '../db';

const secret = new TextEncoder().encode(process.env.JWT_SECRET);

export default async function handler(req: VercelRequest, res: VercelResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { email, password, name } = req.body;

    const existingUser = await db.users.findByEmail(email);
    if (existingUser) {
      return res.status(400).json({ error: 'Email already exists' });
    }

    const passwordHash = await hash(password, 10);
    const user = await db.users.create({ email, name, passwordHash });

    // Create a free trial subscription
    const trialEnd = new Date();
    trialEnd.setDate(trialEnd.getDate() + 14); // 14-day trial

    const subscription = await db.subscriptions.create({
      userId: user.id,
      plan: 'starter',
      status: 'active',
      expiresAt: trialEnd
    });

    const token = await new SignJWT({ userId: user.id })
      .setProtectedHeader({ alg: 'HS256' })
      .setExpirationTime('24h')
      .sign(secret);

    res.status(201).json({
      token,
      user: {
        id: user.id,
        email: user.email,
        name: user.name
      },
      subscription
    });
  } catch (error) {
    console.error('Signup error:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

================
File: api/db/index.ts
================
// api/db/index.ts
import { sql } from '@vercel/postgres';

export const db = {
  users: {
    create: async (data: { email: string; name: string; passwordHash: string }) => {
      try {
        const result = await sql`
          INSERT INTO users (email, name, password_hash)
          VALUES (${data.email}, ${data.name}, ${data.passwordHash})
          RETURNING id, email, name;
        `;
        return result.rows[0];
      } catch (error) {
        console.error('Database error:', error);
        throw error;
      }
    },

    findByEmail: async (email: string) => {
      try {
        const result = await sql`
          SELECT id, email, name, password_hash
          FROM users
          WHERE email = ${email};
        `;
        return result.rows[0];
      } catch (error) {
        console.error('Database error:', error);
        throw error;
      }
    }
  },

  subscriptions: {
    create: async (data: { userId: string; plan: string; status: string; expiresAt: Date }) => {
      try {
        const result = await sql`
          INSERT INTO subscriptions (user_id, plan, status, expires_at)
          VALUES (${data.userId}, ${data.plan}, ${data.status}, ${data.expiresAt})
          RETURNING *;
        `;
        return result.rows[0];
      } catch (error) {
        console.error('Database error:', error);
        throw error;
      }
    },

    findByUserId: async (userId: string) => {
      try {
        const result = await sql`
          SELECT *
          FROM subscriptions
          WHERE user_id = ${userId}
          AND status = 'active'
          AND expires_at > NOW()
          ORDER BY created_at DESC
          LIMIT 1;
        `;
        return result.rows[0];
      } catch (error) {
        console.error('Database error:', error);
        throw error;
      }
    }
  }
};

================
File: api/index.ts
================
import express from 'express';
import { sql } from '@vercel/postgres';
import cors from 'cors';
import { hash, compare } from 'bcryptjs';
import { body, validationResult } from 'express-validator';
import jwt from 'jsonwebtoken';

const app = express();
app.use(express.json());
app.use(cors());

const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';

// Middleware
const authenticate = (req, res, next) => {
  const token = req.header('Authorization')?.replace('Bearer ', '');
  if (!token) {
    return res.status(401).json({ error: 'Authentication required' });
  }
  try {
    const decoded = jwt.verify(token, JWT_SECRET);
    req.user = decoded;
    next();
  } catch (error) {
    res.status(401).json({ error: 'Invalid token' });
  }
};

// Initialize database
async function initDatabase() {
  await sql`
    CREATE TABLE IF NOT EXISTS users (
      id SERIAL PRIMARY KEY,
      email TEXT UNIQUE NOT NULL,
      password TEXT NOT NULL,
      name TEXT NOT NULL
    )
  `;
  await sql`
    CREATE TABLE IF NOT EXISTS ideas (
      id SERIAL PRIMARY KEY,
      user_id INTEGER REFERENCES users(id),
      title TEXT NOT NULL,
      description TEXT,
      key_features JSONB,
      target_audience TEXT,
      revenue_model TEXT,
      created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
    )
  `;
  await sql`
    CREATE TABLE IF NOT EXISTS documents (
      id SERIAL PRIMARY KEY,
      user_id INTEGER REFERENCES users(id),
      type TEXT NOT NULL,
      title TEXT NOT NULL,
      content JSONB,
      created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
    )
  `;
}

initDatabase().catch(console.error);

// Auth endpoints
app.post('/api/auth/signup', 
  body('email').isEmail(),
  body('password').isLength({ min: 6 }),
  body('name').notEmpty(),
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    const { email, password, name } = req.body;
    try {
      const hashedPassword = await hash(password, 10);
      await sql`INSERT INTO users (email, password, name) VALUES (${email}, ${hashedPassword}, ${name})`;
      res.status(201).json({ message: 'User created successfully' });
    } catch (error) {
      console.error('Signup error:', error);
      res.status(400).json({ error: 'User creation failed' });
    }
});

app.post('/api/auth/login', 
  body('email').isEmail(),
  body('password').notEmpty(),
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    const { email, password } = req.body;
    try {
      const result = await sql`SELECT * FROM users WHERE email = ${email}`;
      const user = result.rows[0];
      if (user && await compare(password, user.password)) {
        const token = jwt.sign({ userId: user.id }, JWT_SECRET, { expiresIn: '24h' });
        res.json({ token, user: { id: user.id, email: user.email, name: user.name } });
      } else {
        res.status(401).json({ error: 'Invalid credentials' });
      }
    } catch (error) {
      console.error('Login error:', error);
      res.status(500).json({ error: 'Login failed' });
    }
});

// Ideas endpoints
app.post('/api/ideas', 
  authenticate,
  body('title').notEmpty(),
  body('description').notEmpty(),
  body('keyFeatures').isArray(),
  body('targetAudience').notEmpty(),
  body('revenueModel').notEmpty(),
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    const { title, description, keyFeatures, targetAudience, revenueModel } = req.body;
    const userId = req.user.userId;
    try {
      const result = await sql`
        INSERT INTO ideas (user_id, title, description, key_features, target_audience, revenue_model)
        VALUES (${userId}, ${title}, ${description}, ${JSON.stringify(keyFeatures)}, ${targetAudience}, ${revenueModel})
        RETURNING id
      `;
      res.status(201).json({ id: result.rows[0].id });
    } catch (error) {
      console.error('Idea creation error:', error);
      res.status(400).json({ error: 'Idea creation failed' });
    }
});

app.get('/api/ideas', authenticate, async (req, res) => {
  const userId = req.user.userId;
  const page = parseInt(req.query.page as string) || 1;
  const limit = parseInt(req.query.limit as string) || 10;
  const offset = (page - 1) * limit;

  try {
    const result = await sql`
      SELECT * FROM ideas
      WHERE user_id = ${userId}
      ORDER BY created_at DESC
      LIMIT ${limit} OFFSET ${offset}
    `;
    const totalCount = await sql`SELECT COUNT(*) FROM ideas WHERE user_id = ${userId}`;
    res.json({
      ideas: result.rows.map(idea => ({ ...idea, keyFeatures: idea.key_features })),
      totalCount: parseInt(totalCount.rows[0].count),
      currentPage: page,
      totalPages: Math.ceil(parseInt(totalCount.rows[0].count) / limit)
    });
  } catch (error) {
    console.error('Fetch ideas error:', error);
    res.status(500).json({ error: 'Failed to fetch ideas' });
  }
});

app.put('/api/ideas/:id', 
  authenticate,
  body('title').notEmpty(),
  body('description').notEmpty(),
  body('keyFeatures').isArray(),
  body('targetAudience').notEmpty(),
  body('revenueModel').notEmpty(),
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    const { id } = req.params;
    const { title, description, keyFeatures, targetAudience, revenueModel } = req.body;
    const userId = req.user.userId;

    try {
      const result = await sql`
        UPDATE ideas
        SET title = ${title}, description = ${description}, key_features = ${JSON.stringify(keyFeatures)},
            target_audience = ${targetAudience}, revenue_model = ${revenueModel}
        WHERE id = ${id} AND user_id = ${userId}
        RETURNING *
      `;
      if (result.rows.length === 0) {
        return res.status(404).json({ error: 'Idea not found or unauthorized' });
      }
      res.json(result.rows[0]);
    } catch (error) {
      console.error('Update idea error:', error);
      res.status(500).json({ error: 'Failed to update idea' });
    }
});

app.delete('/api/ideas/:id', authenticate, async (req, res) => {
  const { id } = req.params;
  const userId = req.user.userId;

  try {
    const result = await sql`
      DELETE FROM ideas
      WHERE id = ${id} AND user_id = ${userId}
      RETURNING id
    `;
    if (result.rows.length === 0) {
      return res.status(404).json({ error: 'Idea not found or unauthorized' });
    }
    res.json({ message: 'Idea deleted successfully' });
  } catch (error) {
    console.error('Delete idea error:', error);
    res.status(500).json({ error: 'Failed to delete idea' });
  }
});

// Documents endpoints
app.post('/api/documents', 
  authenticate,
  body('type').notEmpty(),
  body('title').notEmpty(),
  body('content').notEmpty(),
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    const { type, title, content } = req.body;
    const userId = req.user.userId;
    try {
      const result = await sql`
        INSERT INTO documents (user_id, type, title, content)
        VALUES (${userId}, ${type}, ${title}, ${JSON.stringify(content)})
        RETURNING id
      `;
      res.status(201).json({ id: result.rows[0].id });
    } catch (error) {
      console.error('Document creation error:', error);
      res.status(400).json({ error: 'Document creation failed' });
    }
});

app.get('/api/documents', authenticate, async (req, res) => {
  const userId = req.user.userId;
  const page = parseInt(req.query.page as string) || 1;
  const limit = parseInt(req.query.limit as string) || 10;
  const offset = (page - 1) * limit;

  try {
    const result = await sql`
      SELECT * FROM documents
      WHERE user_id = ${userId}
      ORDER BY created_at DESC
      LIMIT ${limit} OFFSET ${offset}
    `;
    const totalCount = await sql`SELECT COUNT(*) FROM documents WHERE user_id = ${userId}`;
    res.json({
      documents: result.rows,
      totalCount: parseInt(totalCount.rows[0].count),
      currentPage: page,
      totalPages: Math.ceil(parseInt(totalCount.rows[0].count) / limit)
    });
  } catch (error) {
    console.error('Fetch documents error:', error);
    res.status(500).json({ error: 'Failed to fetch documents' });
  }
});

app.put('/api/documents/:id', 
  authenticate,
  body('type').notEmpty(),
  body('title').notEmpty(),
  body('content').notEmpty(),
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    const { id } = req.params;
    const { type, title, content } = req.body;
    const userId = req.user.userId;

    try {
      const result = await sql`
        UPDATE documents
        SET type = ${type}, title = ${title}, content = ${JSON.stringify(content)}
        WHERE id = ${id} AND user_id = ${userId}
        RETURNING *
      `;
      if (result.rows.length === 0) {
        return res.status(404).json({ error: 'Document not found or unauthorized' });
      }
      res.json(result.rows[0]);
    } catch (error) {
      console.error('Update document error:', error);
      res.status(500).json({ error: 'Failed to update document' });
    }
});

app.delete('/api/documents/:id', authenticate, async (req, res) => {
  const { id } = req.params;
  const userId = req.user.userId;

  try {
    const result = await sql`
      DELETE FROM documents
      WHERE id = ${id} AND user_id = ${userId}
      RETURNING id
    `;
    if (result.rows.length === 0) {
      return res.status(404).json({ error: 'Document not found or unauthorized' });
    }
    res.json({ message: 'Document deleted successfully' });
  } catch (error) {
    console.error('Delete document error:', error);
    res.status(500).json({ error: 'Failed to delete document' });
  }
});

export default app;

================
File: drizzle.config.ts
================
import type { Config } from 'drizzle-kit';

export default {
  schema: './src/db/schema.ts',
  out: './drizzle',
  driver: 'better-sqlite',
  dbCredentials: {
    url: 'sqlite.db',
  },
} satisfies Config;

================
File: drizzle/0000_lean_robbie_robertson.sql
================
CREATE TABLE `documents` (
	`id` text PRIMARY KEY NOT NULL,
	`user_id` text NOT NULL,
	`type` text NOT NULL,
	`title` text NOT NULL,
	`content` text NOT NULL,
	`created_at` integer DEFAULT CURRENT_TIMESTAMP NOT NULL,
	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE TABLE `ideas` (
	`id` text PRIMARY KEY NOT NULL,
	`user_id` text NOT NULL,
	`title` text NOT NULL,
	`description` text NOT NULL,
	`key_features` text NOT NULL,
	`target_audience` text NOT NULL,
	`revenue_model` text NOT NULL,
	`created_at` integer DEFAULT CURRENT_TIMESTAMP NOT NULL,
	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE TABLE `subscriptions` (
	`id` text PRIMARY KEY NOT NULL,
	`user_id` text NOT NULL,
	`plan` text NOT NULL,
	`status` text NOT NULL,
	`expires_at` integer NOT NULL,
	`created_at` integer DEFAULT CURRENT_TIMESTAMP NOT NULL,
	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action
);
--> statement-breakpoint
CREATE TABLE `users` (
	`id` text PRIMARY KEY NOT NULL,
	`email` text NOT NULL,
	`name` text NOT NULL,
	`password_hash` text NOT NULL,
	`created_at` integer DEFAULT CURRENT_TIMESTAMP NOT NULL
);
--> statement-breakpoint
CREATE UNIQUE INDEX `users_email_unique` ON `users` (`email`);

================
File: drizzle/meta/_journal.json
================
{
  "version": "5",
  "dialect": "sqlite",
  "entries": [
    {
      "idx": 0,
      "version": "5",
      "when": 1732595406050,
      "tag": "0000_lean_robbie_robertson",
      "breakpoints": true
    }
  ]
}

================
File: drizzle/meta/0000_snapshot.json
================
{
  "version": "5",
  "dialect": "sqlite",
  "id": "ed66920d-8b3d-41ae-91cf-35dbe7821aaf",
  "prevId": "00000000-0000-0000-0000-000000000000",
  "tables": {
    "documents": {
      "name": "documents",
      "columns": {
        "id": {
          "name": "id",
          "type": "text",
          "primaryKey": true,
          "notNull": true,
          "autoincrement": false
        },
        "user_id": {
          "name": "user_id",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "type": {
          "name": "type",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "title": {
          "name": "title",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "content": {
          "name": "content",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "created_at": {
          "name": "created_at",
          "type": "integer",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false,
          "default": "CURRENT_TIMESTAMP"
        }
      },
      "indexes": {},
      "foreignKeys": {
        "documents_user_id_users_id_fk": {
          "name": "documents_user_id_users_id_fk",
          "tableFrom": "documents",
          "tableTo": "users",
          "columnsFrom": [
            "user_id"
          ],
          "columnsTo": [
            "id"
          ],
          "onDelete": "no action",
          "onUpdate": "no action"
        }
      },
      "compositePrimaryKeys": {},
      "uniqueConstraints": {}
    },
    "ideas": {
      "name": "ideas",
      "columns": {
        "id": {
          "name": "id",
          "type": "text",
          "primaryKey": true,
          "notNull": true,
          "autoincrement": false
        },
        "user_id": {
          "name": "user_id",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "title": {
          "name": "title",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "description": {
          "name": "description",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "key_features": {
          "name": "key_features",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "target_audience": {
          "name": "target_audience",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "revenue_model": {
          "name": "revenue_model",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "created_at": {
          "name": "created_at",
          "type": "integer",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false,
          "default": "CURRENT_TIMESTAMP"
        }
      },
      "indexes": {},
      "foreignKeys": {
        "ideas_user_id_users_id_fk": {
          "name": "ideas_user_id_users_id_fk",
          "tableFrom": "ideas",
          "tableTo": "users",
          "columnsFrom": [
            "user_id"
          ],
          "columnsTo": [
            "id"
          ],
          "onDelete": "no action",
          "onUpdate": "no action"
        }
      },
      "compositePrimaryKeys": {},
      "uniqueConstraints": {}
    },
    "subscriptions": {
      "name": "subscriptions",
      "columns": {
        "id": {
          "name": "id",
          "type": "text",
          "primaryKey": true,
          "notNull": true,
          "autoincrement": false
        },
        "user_id": {
          "name": "user_id",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "plan": {
          "name": "plan",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "status": {
          "name": "status",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "expires_at": {
          "name": "expires_at",
          "type": "integer",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "created_at": {
          "name": "created_at",
          "type": "integer",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false,
          "default": "CURRENT_TIMESTAMP"
        }
      },
      "indexes": {},
      "foreignKeys": {
        "subscriptions_user_id_users_id_fk": {
          "name": "subscriptions_user_id_users_id_fk",
          "tableFrom": "subscriptions",
          "tableTo": "users",
          "columnsFrom": [
            "user_id"
          ],
          "columnsTo": [
            "id"
          ],
          "onDelete": "no action",
          "onUpdate": "no action"
        }
      },
      "compositePrimaryKeys": {},
      "uniqueConstraints": {}
    },
    "users": {
      "name": "users",
      "columns": {
        "id": {
          "name": "id",
          "type": "text",
          "primaryKey": true,
          "notNull": true,
          "autoincrement": false
        },
        "email": {
          "name": "email",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "name": {
          "name": "name",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "password_hash": {
          "name": "password_hash",
          "type": "text",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false
        },
        "created_at": {
          "name": "created_at",
          "type": "integer",
          "primaryKey": false,
          "notNull": true,
          "autoincrement": false,
          "default": "CURRENT_TIMESTAMP"
        }
      },
      "indexes": {
        "users_email_unique": {
          "name": "users_email_unique",
          "columns": [
            "email"
          ],
          "isUnique": true
        }
      },
      "foreignKeys": {},
      "compositePrimaryKeys": {},
      "uniqueConstraints": {}
    }
  },
  "enums": {},
  "_meta": {
    "schemas": {},
    "tables": {},
    "columns": {}
  }
}

================
File: eslint.config.js
================
import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  }
);

================
File: index.html
================
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="AIFounder - Your AI Co-Founder for startup success. Get instant insights, strategic planning, and execution support 24/7." />
    <meta name="theme-color" content="#1a1a1a" />
    <title>AIFounder - Your AI Co-Founder</title>
    
    <!-- Preload critical assets -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link 
      rel="preload" 
      as="style" 
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
    />
    <link 
      rel="stylesheet" 
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
    />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

================
File: netlify.toml
================
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

================
File: package.json
================
{
  "name": "ai-cofounder-platform",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@sqlite.org/sqlite-wasm": "^3.47.0-build1",
    "@vercel/analytics": "^1.4.1",
    "@vercel/postgres": "^0.7.2",
    "@webcontainer/api": "^1.5.1",
    "ai": "^4.0.7",
    "axios": "^1.6.7",
    "bcryptjs": "^2.4.3",
    "date-fns": "^3.3.1",
    "firebase": "^11.0.2",
    "jose": "^5.9.6",
    "lucide-react": "^0.344.0",
    "next": "^15.0.3",
    "openai": "^4.73.1",
    "openai-edge": "^1.2.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.22.3",
    "recharts": "^2.13.3",
    "repomix": "^0.2.5",
    "uuid": "^9.0.1",
    "xterm": "^5.3.0",
    "xterm-addon-fit": "^0.8.0",
    "zod": "^3.22.4",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.1",
    "@types/d3-time": "^3.0.4",
    "@types/diff-match-patch": "^1.0.36",
    "@types/node": "^22.10.1",
    "@types/pg": "^8.11.10",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.18",
    "eslint": "^9.9.1",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.11",
    "globals": "^15.9.0",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "terser": "^5.36.0",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.3.0",
    "vite": "^5.4.2"
  }
}

================
File: postcss.config.js
================
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

================
File: README.md
================
# AIFounder - Your AI Co-Founder Platform

AIFounder is an advanced AI platform designed to help entrepreneurs build and scale their startups. It provides AI-powered insights, code generation, document creation, and strategic planning capabilities.

![AIFounder Platform](https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=2070&q=80)

## 🚀 Features

- **AI Chat Assistant**: Get instant answers to your startup questions
- **Idea Generator**: Generate and validate startup ideas with AI
- **Code Builder**: Generate production-ready code for your startup
- **Document Generator**: Create professional business documents
- **Analytics Dashboard**: Track your startup's progress
- **Real-time Collaboration**: Work with your AI co-founder seamlessly

## 🛠️ Tech Stack

- **Frontend**: React, TypeScript, Tailwind CSS
- **Backend**: Node.js, Express, TypeScript
- **Database**: PostgreSQL with Drizzle ORM
- **AI**: OpenAI GPT-4
- **Authentication**: JWT
- **Deployment**: Vercel

## 📦 Installation

1. Clone the repository:
```bash
git clone https://github.com/yourusername/aifounder.git
cd aifounder
```

2. Install dependencies:
```bash
npm install
```

3. Set up environment variables:
```bash
cp .env.example .env
```

4. Fill in your environment variables:
```env
DATABASE_URL=your_database_url
OPENAI_API_KEY=your_openai_api_key
JWT_SECRET=your_jwt_secret
```

5. Run database migrations:
```bash
npm run db:migrate
```

6. Start the development server:
```bash
npm run dev
```

## 🚀 Deployment

The application is configured for deployment on Vercel:

1. Connect your GitHub repository to Vercel
2. Configure environment variables in Vercel dashboard
3. Deploy!

## 🧪 Testing

Run tests using:
```bash
npm run test
```

## 📐 Architecture

The application follows a modern, scalable architecture:

- `/src/components` - React components
- `/src/pages` - Page components and routing
- `/src/store` - State management with Zustand
- `/src/services` - API services and business logic
- `/src/db` - Database schema and migrations
- `/api` - Serverless API endpoints

## 🤝 Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.

## 🙏 Acknowledgments

- OpenAI for providing the AI capabilities
- The open-source community for awesome tools and libraries
- All contributors who help improve the platform

## 📞 Support

For support, email support@aifounder.com or join our [Discord community](https://discord.gg/aifounder).

================
File: SECURITY.md
================
# Security Policy

## Supported Versions

Use this section to tell people about which versions of your project are
currently being supported with security updates.

| Version | Supported          |
| ------- | ------------------ |
| 5.1.x   | :white_check_mark: |
| 5.0.x   | :x:                |
| 4.0.x   | :white_check_mark: |
| < 4.0   | :x:                |

## Reporting a Vulnerability

Use this section to tell people how to report a vulnerability.

Tell them where to go, how often they can expect to get an update on a
reported vulnerability, what to expect if the vulnerability is accepted or
declined, etc.

================
File: src/@types/xterm-addon-fit.d.ts
================
declare module 'xterm-addon-fit';

================
File: src/App.tsx
================
import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import ErrorBoundary from './components/ErrorBoundary';
import { useAuthStore } from './store/authStore';
import { Analytics } from "@vercel/analytics/react";

// Implement code splitting with lazy loading
const LandingPage = lazy(() => import('./pages/LandingPage'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const PaywallModal = lazy(() => import('./components/PaywallModal'));
const PrivateRoute = lazy(() => import('./components/PrivateRoute'));

function LoadingFallback() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-gray-900 to-black">
      <div className="flex flex-col items-center">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
        <p className="mt-4 text-blue-500">Loading...</p>
      </div>
    </div>
  );
}

// Subscription guard component
interface SubscriptionGuardProps {
  children: React.ReactNode;
}

function SubscriptionGuard({ children }: SubscriptionGuardProps) {
  const { subscription } = useAuthStore();
  
  if (!subscription || subscription.status !== 'active') {
    return <Navigate to="/subscribe" replace />;
  }
  
  return <>{children}</>;
}

function App() {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);

  return (
    <ErrorBoundary>
      <BrowserRouter>
        <Suspense fallback={<LoadingFallback />}>
          <Routes>
            <Route path="/" element={<LandingPage />} />
            
            {/* Subscription route */}
            <Route
              path="/subscribe"
              element={
                isAuthenticated ? (
                  <PaywallModal />
                ) : (
                  <Navigate to="/" replace />
                )
              }
            />
            
            {/* Protected dashboard routes */}
            <Route
              path="/dashboard/*"
              element={
                <PrivateRoute>
                  <SubscriptionGuard>
                    <Dashboard />
                  </SubscriptionGuard>
                </PrivateRoute>
              }
            />

            {/* Catch-all route */}
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </Suspense>
      </BrowserRouter>
      <Analytics />
    </ErrorBoundary>
  );
}

export default App;

================
File: src/components/AuthModal.tsx
================
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { X } from 'lucide-react';
import { useAuthStore } from '../store/authStore';

interface AuthModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
}

export default function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps) {
  const [isSignup, setIsSignup] = useState(true);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const { login, signup } = useAuthStore();
  const navigate = useNavigate();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    try {
      if (isSignup) {
        await signup(email, password, name);
        navigate('/subscribe'); // Redirect to paywall after signup
      } else {
        await login(email, password);
        const subscription = useAuthStore.getState().subscription;
        
        if (!subscription || subscription.status !== 'active') {
          navigate('/subscribe'); // Redirect to paywall if no active subscription
        } else {
          onSuccess(); // Proceed to dashboard if subscription is active
        }
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Authentication failed');
    } finally {
      setLoading(false);
    }
  };

  const resetForm = () => {
    setEmail('');
    setPassword('');
    setName('');
    setError('');
    setLoading(false);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="relative w-full max-w-md p-6 bg-gray-800 rounded-xl shadow-xl">
        <button
          onClick={() => {
            onClose();
            resetForm();
          }}
          className="absolute top-4 right-4 text-gray-400 hover:text-white"
        >
          <X className="h-6 w-6" />
        </button>

        <h2 className="text-2xl font-bold mb-6">
          {isSignup ? 'Create your account' : 'Welcome back'}
        </h2>

        <form onSubmit={handleSubmit} className="space-y-4">
          {isSignup && (
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-1">
                Full Name
              </label>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="input-primary w-full"
                placeholder="John Doe"
                required
              />
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-1">
              Email
            </label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="input-primary w-full"
              placeholder="you@example.com"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-1">
              Password
            </label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="input-primary w-full"
              placeholder="••••••••"
              required
              minLength={8}
            />
          </div>

          {error && (
            <p className="text-red-500 text-sm">{error}</p>
          )}

          <button
            type="submit"
            disabled={loading}
            className="button-primary w-full"
          >
            {loading ? (
              <span className="flex items-center justify-center">
                <svg className="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24">
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="4"
                  />
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                  />
                </svg>
                Processing...
              </span>
            ) : (
              isSignup ? 'Create Account' : 'Sign In'
            )}
          </button>

          <p className="text-center text-gray-400">
            {isSignup ? 'Already have an account?' : "Don't have an account?"}{' '}
            <button
              type="button"
              onClick={() => {
                setIsSignup(!isSignup);
                setError('');
                resetForm();
              }}
              className="text-blue-400 hover:text-blue-300"
            >
              {isSignup ? 'Sign In' : 'Sign Up'}
            </button>
          </p>
        </form>
      </div>
    </div>
  );
}

================
File: src/components/dashboard/Analytics.tsx
================
import React, { useState } from 'react';
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { Building2, Users, BrainCircuit, Save, PenLine } from 'lucide-react';

interface CompanyInfo {
  name: string;
  industry: string;
  stage: string;
  size: string;
  founded: string;
}

interface Generation {
  id: string;
  type: 'idea' | 'document' | 'code';
  title: string;
  timestamp: Date;
  category: string;
}

export default function Analytics() {
  const [companyInfo, setCompanyInfo] = useState<CompanyInfo>({
    name: '',
    industry: '',
    stage: '',
    size: '',
    founded: ''
  });
  const [isEditing, setIsEditing] = useState(false);
  const [generations, setGenerations] = useState<Generation[]>([]);

  // Sample data - In production, fetch from API
  const usageData = [
    { date: '2024-01', ideas: 12, documents: 8, code: 5 },
    { date: '2024-02', ideas: 15, documents: 10, code: 7 },
    { date: '2024-03', ideas: 20, documents: 12, code: 9 }
  ];

  const handleSaveCompanyInfo = () => {
    // In production, save to backend
    setIsEditing(false);
  };

  return (
    <div className="space-y-8">
      {/* Company Information */}
      <div className="bg-gray-800 rounded-xl p-6">
        <div className="flex justify-between items-center mb-6">
          <div className="flex items-center">
            <Building2 className="h-6 w-6 text-blue-500 mr-2" />
            <h3 className="text-xl font-semibold">Company Information</h3>
          </div>
          <button
            onClick={() => setIsEditing(!isEditing)}
            className="flex items-center px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700"
          >
            {isEditing ? (
              <>
                <Save className="h-4 w-4 mr-2" />
                Save
              </>
            ) : (
              <>
                <PenLine className="h-4 w-4 mr-2" />
                Edit
              </>
            )}
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {Object.entries(companyInfo).map(([key, value]) => (
            <div key={key} className="space-y-2">
              <label className="block text-sm font-medium text-gray-400">
                {key.charAt(0).toUpperCase() + key.slice(1)}
              </label>
              {isEditing ? (
                <input
                  type="text"
                  value={value}
                  onChange={(e) =>
                    setCompanyInfo((prev) => ({ ...prev, [key]: e.target.value }))
                  }
                  className="w-full bg-gray-700 rounded-lg px-4 py-2"
                />
              ) : (
                <p className="text-lg">{value || 'Not specified'}</p>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Usage Analytics */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div className="bg-gray-800 rounded-xl p-6">
          <h3 className="text-xl font-semibold mb-6">Generation Activity</h3>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={usageData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="ideas" stroke="#3b82f6" />
                <Line type="monotone" dataKey="documents" stroke="#8b5cf6" />
                <Line type="monotone" dataKey="code" stroke="#10b981" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-gray-800 rounded-xl p-6">
          <h3 className="text-xl font-semibold mb-6">Generation Distribution</h3>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={usageData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="ideas" fill="#3b82f6" />
                <Bar dataKey="documents" fill="#8b5cf6" />
                <Bar dataKey="code" fill="#10b981" />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>

      {/* Generation History */}
      <div className="bg-gray-800 rounded-xl p-6">
        <h3 className="text-xl font-semibold mb-6">Generation History</h3>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-700">
                <th className="text-left py-3 px-4">Type</th>
                <th className="text-left py-3 px-4">Title</th>
                <th className="text-left py-3 px-4">Category</th>
                <th className="text-left py-3 px-4">Date</th>
              </tr>
            </thead>
            <tbody>
              {generations.map((gen) => (
                <tr key={gen.id} className="border-b border-gray-700/50">
                  <td className="py-3 px-4">
                    <span className="capitalize">{gen.type}</span>
                  </td>
                  <td className="py-3 px-4">{gen.title}</td>
                  <td className="py-3 px-4">{gen.category}</td>
                  <td className="py-3 px-4">
                    {gen.timestamp.toLocaleDateString()}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

================
File: src/components/dashboard/Chat.tsx
================
import React, { useState, useEffect, useRef } from 'react';
import { Send, Loader } from 'lucide-react';
import { useAuthStore } from '../../store/authStore';

interface Message {
  id: string;
  content: string;
  role: 'user' | 'assistant';
  timestamp: Date;
}

function Chat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const { token } = useAuthStore();

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleSend = async () => {
    if (!input.trim() || isLoading) return;

    const userMessage: Message = {
      id: Date.now().toString(),
      content: input,
      role: 'user',
      timestamp: new Date()
    };

    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsLoading(true);

    try {
      const response = await fetch('/api/ai/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({
          messages: messages.concat(userMessage).map(msg => ({
            role: msg.role,
            content: msg.content
          }))
        })
      });

      if (!response.ok) {
        throw new Error('Failed to get AI response');
      }

      const reader = response.body?.getReader();
      const decoder = new TextDecoder();
      let accumulatedMessage = '';
      let currentAssistantMessage: Message | null = null;

      if (reader) {
        while (true) {
          const { value, done } = await reader.read();
          if (done) break;

          const chunk = decoder.decode(value);
          const lines = chunk.split('\n');

          for (const line of lines) {
            if (line.startsWith('data: ')) {
              const data = line.slice(6);
              if (data === '[DONE]') continue;

              try {
                const parsed = JSON.parse(data);
                if (parsed.error) {
                  throw new Error(parsed.error);
                }

                accumulatedMessage += parsed.content;

                setMessages(prev => {
                  if (!currentAssistantMessage) {
                    currentAssistantMessage = {
                      id: Date.now().toString(),
                      content: accumulatedMessage,
                      role: 'assistant',
                      timestamp: new Date()
                    };
                    return [...prev, currentAssistantMessage];
                  }
                  
                  return prev.map(msg => 
                    msg.id === currentAssistantMessage?.id
                      ? { ...msg, content: accumulatedMessage }
                      : msg
                  );
                });
              } catch (e) {
                console.error('Error parsing SSE:', e);
              }
            }
          }
        }
      }

    } catch (error) {
      console.error('Chat error:', error);
      setMessages(prev => [...prev, {
        id: Date.now().toString(),
        content: 'Sorry, I encountered an error. Please try again.',
        role: 'assistant',
        timestamp: new Date()
      }]);
    } finally {
      setIsLoading(false);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="h-[calc(100vh-8rem)] flex flex-col bg-gray-900">
      <div className="flex-1 overflow-y-auto space-y-4 p-4">
        {messages.length === 0 && (
          <div className="text-center text-gray-500 mt-8">
            <p>Start a conversation with your AI co-founder.</p>
            <p className="text-sm mt-2">Ask about business strategy, product development, or any startup-related questions.</p>
          </div>
        )}
        {messages.map((message) => (
          <div
            key={message.id}
            className={`flex ${
              message.role === 'user' ? 'justify-end' : 'justify-start'
            }`}
          >
            <div
              className={`max-w-[80%] rounded-lg p-4 ${
                message.role === 'user'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-800 text-gray-100'
              }`}
            >
              <p className="whitespace-pre-wrap leading-relaxed">{message.content}</p>
              <span className="text-xs opacity-70 mt-2 block">
                {message.timestamp.toLocaleTimeString()}
              </span>
            </div>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

      <div className="p-4 border-t border-gray-800 bg-gray-900">
        <div className="flex space-x-4">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="Ask anything about your startup..."
            className="flex-1 bg-gray-800 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
            disabled={isLoading}
          />
          <button
            onClick={handleSend}
            disabled={isLoading}
            className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center min-w-[40px]"
          >
            {isLoading ? (
              <Loader className="h-5 w-5 animate-spin" />
            ) : (
              <Send className="h-5 w-5" />
            )}
          </button>
        </div>
      </div>
    </div>
  );
}

export default Chat;

================
File: src/components/dashboard/CodeBuilder.tsx
================
import React, { useState, useRef, useEffect } from 'react';
import { Code, Loader, CheckCircle, Copy, Download, Play, Terminal as TerminalIcon } from 'lucide-react';
import { useAuthStore } from '../../store/authStore';
import { Terminal } from './Terminal';
import { Terminal as XTerm } from 'xterm';
import { initWebContainer, writeFiles, installDependencies, startDevServer, createFileTree } from '../../services/webcontainer';

interface Template {
  id: string;
  name: string;
  description: string;
  techStack: string[];
  features: string[];
  type: 'frontend' | 'backend' | 'fullstack';
}

interface CodeOutput {
  code: string;
  dependencies: string[];
  setup: string[];
  documentation: string;
  files?: Record<string, string>;
}

const templates: Template[] = [
  {
    id: 'next-saas',
    name: 'SaaS Platform',
    description: 'Full-stack SaaS application with authentication, payments, and dashboard',
    techStack: ['Next.js', 'TypeScript', 'Tailwind CSS', 'Prisma', 'PostgreSQL'],
    features: ['User authentication', 'Payment integration', 'Dashboard', 'Settings'],
    type: 'fullstack'
  },
  {
    id: 'api-backend',
    name: 'REST API',
    description: 'Backend API with authentication, database, and documentation',
    techStack: ['Node.js', 'Express', 'TypeScript', 'PostgreSQL', 'Swagger'],
    features: ['JWT auth', 'CRUD operations', 'API docs', 'Rate limiting'],
    type: 'backend'
  },
  {
    id: 'react-dashboard',
    name: 'Admin Dashboard',
    description: 'React dashboard with charts, tables, and responsive design',
    techStack: ['React', 'TypeScript', 'Material UI', 'React Query'],
    features: ['Analytics', 'Data tables', 'Charts', 'Theme customization'],
    type: 'frontend'
  }
];

function CodeBuilder() {
  const { token } = useAuthStore();
  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
  const [customFeatures, setCustomFeatures] = useState<string>('');
  const [isGenerating, setIsGenerating] = useState(false);
  const [generatedCode, setGeneratedCode] = useState<CodeOutput | null>(null);
  const [streamedContent, setStreamedContent] = useState<string>('');
  const [activeTab, setActiveTab] = useState<'code' | 'setup' | 'docs' | 'preview'>('code');
  const [copiedSection, setCopiedSection] = useState<string | null>(null);
  const [isRunning, setIsRunning] = useState(false);
  const [previewUrl, setPreviewUrl] = useState<string>('');
  const [previewError, setPreviewError] = useState<string>('');
  const terminalRef = useRef<XTerm | null>(null);
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    // Initialize WebContainer when component mounts
    const init = async () => {
      try {
        await initWebContainer();
      } catch (error) {
        console.error('Failed to initialize WebContainer:', error);
        setPreviewError('Failed to initialize WebContainer. Please ensure your browser supports the required features.');
      }
    };
    init();
  }, []);

  const generateCode = async () => {
    if (!selectedTemplate) return;
    
    setIsGenerating(true);
    setStreamedContent('');
    
    try {
      const response = await fetch('/api/ai/generate-code', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({
          template: selectedTemplate.id,
          specifications: {
            type: selectedTemplate.type,
            techStack: selectedTemplate.techStack
          },
          features: [
            ...selectedTemplate.features,
            ...customFeatures.split('\n').filter(f => f.trim())
          ]
        })
      });

      if (!response.ok) {
        throw new Error('Failed to generate code');
      }

      if (!response.body) {
        throw new Error('No response body');
      }

      // Handle streaming response
      const reader = response.body.getReader();
      const decoder = new TextDecoder();

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value);
        setStreamedContent(prev => prev + chunk);
      }

      // Parse the complete streamed content
      const parsedContent = parseStreamedContent(streamedContent);
      setGeneratedCode(parsedContent);
    } catch (error) {
      console.error('Code generation error:', error);
    } finally {
      setIsGenerating(false);
    }
  };

  const parseStreamedContent = (content: string): CodeOutput => {
    // Split content into sections based on markers in the streamed response
    const sections = content.split('###');
    return {
      code: sections[0] || '',
      dependencies: (sections[1] || '').split('\n').filter(Boolean),
      setup: (sections[2] || '').split('\n').filter(Boolean),
      documentation: sections[3] || ''
    };
  };

  const copyToClipboard = async (text: string, section: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopiedSection(section);
      setTimeout(() => setCopiedSection(null), 2000);
    } catch (error) {
      console.error('Failed to copy to clipboard:', error);
    }
  };

  const downloadCode = () => {
    if (!generatedCode || !selectedTemplate) return;

    const blob = new Blob([generatedCode.code], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${selectedTemplate.id}-generated.zip`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const handleTerminalReady = (terminal: XTerm) => {
    terminalRef.current = terminal;
    terminal.write('\x1b[33mTerminal ready. Click "Run Code" to start the application.\x1b[0m\r\n');
  };

  const runCode = async () => {
    if (!generatedCode || !terminalRef.current) return;
    
    setIsRunning(true);
    setPreviewError('');
    setPreviewUrl('');
    
    try {
      // Create and write files
      const fileTree = createFileTree(generatedCode);
      await writeFiles(fileTree);

      // Install dependencies
      terminalRef.current.write('\x1b[33mInstalling dependencies...\x1b[0m\r\n');
      await installDependencies(terminalRef.current);
      
      // Start dev server
      terminalRef.current.write('\x1b[33mStarting development server...\x1b[0m\r\n');
      const { url } = await startDevServer(terminalRef.current);
      
      setPreviewUrl(url);
      setActiveTab('preview');
    } catch (error) {
      console.error('Error running code:', error);
      setPreviewError('Failed to run the application. Check the terminal for details.');
      if (terminalRef.current) {
        terminalRef.current.write('\r\n\x1b[31mError running code. Check console for details.\x1b[0m\r\n');
      }
    } finally {
      setIsRunning(false);
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">AI Code Builder</h2>
        <div className="flex gap-2">
          {generatedCode && (
            <>
              <button
                onClick={downloadCode}
                className="flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg"
              >
                <Download className="h-5 w-5 mr-2" />
                Download Code
              </button>
              <button
                onClick={runCode}
                disabled={isRunning}
                className="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg disabled:opacity-50"
              >
                {isRunning ? (
                  <Loader className="h-5 w-5 mr-2 animate-spin" />
                ) : (
                  <Play className="h-5 w-5 mr-2" />
                )}
                Run Code
              </button>
            </>
          )}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Template Selection & Configuration */}
        <div className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {templates.map((template) => (
              <button
                key={template.id}
                onClick={() => setSelectedTemplate(template)}
                className={`p-4 rounded-lg text-left transition-all ${
                  selectedTemplate?.id === template.id
                    ? 'bg-blue-600 ring-2 ring-blue-400'
                    : 'bg-gray-800 hover:bg-gray-700'
                }`}
              >
                <h3 className="font-semibold">{template.name}</h3>
                <p className="text-sm text-gray-300 mt-1">{template.description}</p>
                <div className="mt-3 flex flex-wrap gap-2">
                  {template.techStack.map((tech) => (
                    <span
                      key={tech}
                      className="text-xs px-2 py-1 bg-gray-700/50 rounded-full"
                    >
                      {tech}
                    </span>
                  ))}
                </div>
              </button>
            ))}
          </div>

          {selectedTemplate && (
            <div className="bg-gray-800 rounded-lg p-4 space-y-4">
              <h3 className="font-semibold">Customize Features</h3>
              <div>
                <h4 className="text-sm text-gray-400 mb-2">Included Features:</h4>
                <ul className="space-y-1">
                  {selectedTemplate.features.map((feature) => (
                    <li key={feature} className="flex items-center text-sm">
                      <CheckCircle className="h-4 w-4 text-green-500 mr-2" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <h4 className="text-sm text-gray-400 mb-2">Additional Features:</h4>
                <textarea
                  value={customFeatures}
                  onChange={(e) => setCustomFeatures(e.target.value)}
                  placeholder="Add custom features (one per line)"
                  className="w-full bg-gray-700 rounded-lg px-4 py-2 min-h-[100px]"
                />
              </div>
              <button
                onClick={generateCode}
                disabled={isGenerating}
                className="w-full bg-blue-600 hover:bg-blue-700 py-2 rounded-lg flex items-center justify-center space-x-2 disabled:opacity-50"
              >
                {isGenerating ? (
                  <>
                    <Loader className="h-5 w-5 animate-spin" />
                    <span>Generating...</span>
                  </>
                ) : (
                  <>
                    <Code className="h-5 w-5" />
                    <span>Generate Code</span>
                  </>
                )}
              </button>
            </div>
          )}
        </div>

        {/* Generated Code Display */}
        {(generatedCode || streamedContent) && (
          <div className="bg-gray-800 rounded-lg overflow-hidden">
            <div className="border-b border-gray-700">
              <div className="flex">
                <button
                  onClick={() => setActiveTab('code')}
                  className={`px-4 py-2 ${
                    activeTab === 'code' ? 'bg-gray-700 text-white' : 'text-gray-400'
                  }`}
                >
                  Code
                </button>
                <button
                  onClick={() => setActiveTab('setup')}
                  className={`px-4 py-2 ${
                    activeTab === 'setup' ? 'bg-gray-700 text-white' : 'text-gray-400'
                  }`}
                >
                  Setup
                </button>
                <button
                  onClick={() => setActiveTab('docs')}
                  className={`px-4 py-2 ${
                    activeTab === 'docs' ? 'bg-gray-700 text-white' : 'text-gray-400'
                  }`}
                >
                  Documentation
                </button>
                {previewUrl && (
                  <button
                    onClick={() => setActiveTab('preview')}
                    className={`px-4 py-2 ${
                      activeTab === 'preview' ? 'bg-gray-700 text-white' : 'text-gray-400'
                    }`}
                  >
                    Preview
                  </button>
                )}
              </div>
            </div>

            <div className="p-4">
              {activeTab === 'code' && (
                <div className="relative">
                  <button
                    onClick={() => copyToClipboard(generatedCode?.code || streamedContent, 'code')}
                    className="absolute top-2 right-2"
                  >
                    {copiedSection === 'code' ? (
                      <CheckCircle className="h-5 w-5 text-green-500" />
                    ) : (
                      <Copy className="h-5 w-5" />
                    )}
                  </button>
                  <pre className="text-sm overflow-x-auto p-4 bg-gray-900 rounded">
                    <code>{isGenerating ? streamedContent : generatedCode?.code}</code>
                  </pre>
                </div>
              )}

              {activeTab === 'setup' && generatedCode && (
                <div className="space-y-4">
                  <div>
                    <h3 className="font-semibold mb-2">Dependencies</h3>
                    <ul className="space-y-1">
                      {generatedCode.dependencies.map((dep, index) => (
                        <li key={index} className="text-sm">{dep}</li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h3 className="font-semibold mb-2">Setup Instructions</h3>
                    <ol className="list-decimal list-inside space-y-1">
                      {generatedCode.setup.map((step, index) => (
                        <li key={index} className="text-sm">{step}</li>
                      ))}
                    </ol>
                  </div>
                  <Terminal onReady={handleTerminalReady} className="mt-4" />
                </div>
              )}

              {activeTab === 'docs' && generatedCode && (
                <div className="prose prose-invert max-w-none">
                  <div dangerouslySetInnerHTML={{ __html: generatedCode.documentation }} />
                </div>
              )}

              {activeTab === 'preview' && (
                <div className="space-y-4">
                  {previewError && (
                    <div className="bg-red-900/50 border border-red-500 text-red-200 p-4 rounded">
                      {previewError}
                    </div>
                  )}
                  {previewUrl && (
                    <div className="h-[600px] bg-white rounded-lg overflow-hidden">
                      <iframe
                        ref={iframeRef}
                        src={previewUrl}
                        className="w-full h-full border-0"
                        title="Preview"
                        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
                        allow="cross-origin-isolated"
                      />
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default CodeBuilder;

================
File: src/components/dashboard/Documents.tsx
================
import React, { useState } from 'react';
import { FileText, Loader, Plus, Download, Trash2 } from 'lucide-react';
import { useAuthStore } from '../../store/authStore';

type DocumentType = 'pitch_deck' | 'business_plan' | 'marketing_plan' | 'financial_projection' | 'executive_summary';

interface Document {
  id: string;
  type: DocumentType;
  title: string;
  content: string;
  createdAt: Date;
}

interface BusinessInfo {
  name: string;
  industry: string;
  stage: string;
  target: string;
}

interface GenerateDocumentParams {
  type: DocumentType;
  businessInfo: BusinessInfo;
  audience: string;
  purpose: string;
  tone: string;
}

const documentTypes: Record<DocumentType, string> = {
  pitch_deck: 'Pitch Deck',
  business_plan: 'Business Plan',
  marketing_plan: 'Marketing Plan',
  financial_projection: 'Financial Projections',
  executive_summary: 'Executive Summary'
};

const toneOptions = [
  'professional',
  'conversational',
  'technical',
  'persuasive',
  'formal'
] as const;

const stageOptions = [
  { value: 'idea', label: 'Idea Stage' },
  { value: 'mvp', label: 'MVP' },
  { value: 'early', label: 'Early Stage' },
  { value: 'growth', label: 'Growth Stage' },
  { value: 'scale', label: 'Scale-up' }
] as const;

function Documents() {
  const { token } = useAuthStore();
  const [documents, setDocuments] = useState<Document[]>([]);
  const [isGenerating, setIsGenerating] = useState(false);
  const [showNewDocumentForm, setShowNewDocumentForm] = useState(false);
  const [formData, setFormData] = useState<GenerateDocumentParams>({
    type: 'pitch_deck',
    businessInfo: {
      name: '',
      industry: '',
      stage: '',
      target: ''
    },
    audience: '',
    purpose: '',
    tone: 'professional'
  });

  const generateDocument = async () => {
    setIsGenerating(true);
    try {
      const response = await fetch('/api/ai/generate-document', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(formData)
      });

      if (!response.ok) {
        throw new Error('Failed to generate document');
      }

      const data = await response.json();
      const newDocument: Document = {
        id: crypto.randomUUID(),
        type: formData.type,
        title: `${documentTypes[formData.type]} - ${formData.businessInfo.name}`,
        content: data.document,
        createdAt: new Date()
      };

      setDocuments(prev => [newDocument, ...prev]);
      setShowNewDocumentForm(false);
      resetForm();
    } catch (error) {
      console.error('Document generation error:', error);
    } finally {
      setIsGenerating(false);
    }
  };

  const resetForm = () => {
    setFormData({
      type: 'pitch_deck',
      businessInfo: {
        name: '',
        industry: '',
        stage: '',
        target: ''
      },
      audience: '',
      purpose: '',
      tone: 'professional'
    });
  };

  const deleteDocument = (id: string) => {
    setDocuments(prev => prev.filter(doc => doc.id !== id));
  };

  const downloadDocument = (doc: Document) => {
    const blob = new Blob([doc.content], { type: 'text/plain' });
    const url = window.URL.createObjectURL(blob);
    const link = window.document.createElement('a');
    link.href = url;
    link.download = `${doc.title}.txt`;
    window.document.body.appendChild(link);
    link.click();
    window.document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  };

  const updateBusinessInfo = (field: keyof BusinessInfo, value: string) => {
    setFormData(prev => ({
      ...prev,
      businessInfo: {
        ...prev.businessInfo,
        [field]: value
      }
    }));
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">Business Documents</h2>
        <button
          onClick={() => setShowNewDocumentForm(true)}
          className="flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg"
        >
          <Plus className="h-5 w-5 mr-2" />
          New Document
        </button>
      </div>

      {showNewDocumentForm && (
        <div className="bg-gray-800 rounded-lg p-6 space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium mb-2">Document Type</label>
              <select
                value={formData.type}
                onChange={(e) => setFormData(prev => ({ ...prev, type: e.target.value as DocumentType }))}
                className="w-full bg-gray-700 rounded-lg px-4 py-2"
              >
                {Object.entries(documentTypes).map(([value, label]) => (
                  <option key={value} value={value}>{label}</option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Business Name</label>
              <input
                type="text"
                value={formData.businessInfo.name}
                onChange={(e) => updateBusinessInfo('name', e.target.value)}
                className="w-full bg-gray-700 rounded-lg px-4 py-2"
                placeholder="Enter business name"
              />
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Industry</label>
              <input
                type="text"
                value={formData.businessInfo.industry}
                onChange={(e) => updateBusinessInfo('industry', e.target.value)}
                className="w-full bg-gray-700 rounded-lg px-4 py-2"
                placeholder="Enter industry"
              />
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Business Stage</label>
              <select
                value={formData.businessInfo.stage}
                onChange={(e) => updateBusinessInfo('stage', e.target.value)}
                className="w-full bg-gray-700 rounded-lg px-4 py-2"
              >
                <option value="">Select Stage</option>
                {stageOptions.map(option => (
                  <option key={option.value} value={option.value}>{option.label}</option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Target Audience</label>
              <input
                type="text"
                value={formData.audience}
                onChange={(e) => setFormData(prev => ({ ...prev, audience: e.target.value }))}
                className="w-full bg-gray-700 rounded-lg px-4 py-2"
                placeholder="Who is this document for?"
              />
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Document Purpose</label>
              <input
                type="text"
                value={formData.purpose}
                onChange={(e) => setFormData(prev => ({ ...prev, purpose: e.target.value }))}
                className="w-full bg-gray-700 rounded-lg px-4 py-2"
                placeholder="What's the goal of this document?"
              />
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Tone</label>
              <select
                value={formData.tone}
                onChange={(e) => setFormData(prev => ({ ...prev, tone: e.target.value }))}
                className="w-full bg-gray-700 rounded-lg px-4 py-2"
              >
                {toneOptions.map(tone => (
                  <option key={tone} value={tone}>
                    {tone.charAt(0).toUpperCase() + tone.slice(1)}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div className="flex justify-end space-x-4">
            <button
              onClick={() => setShowNewDocumentForm(false)}
              className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg"
            >
              Cancel
            </button>
            <button
              onClick={generateDocument}
              disabled={isGenerating}
              className="flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg disabled:opacity-50"
            >
              {isGenerating ? (
                <>
                  <Loader className="h-5 w-5 animate-spin mr-2" />
                  Generating...
                </>
              ) : (
                <>
                  <FileText className="h-5 w-5 mr-2" />
                  Generate Document
                </>
              )}
            </button>
          </div>
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {documents.map((document) => (
          <div key={document.id} className="bg-gray-800 rounded-lg p-4">
            <div className="flex items-start justify-between">
              <div>
                <span className="text-sm bg-blue-600/30 text-blue-400 px-2 py-1 rounded">
                  {documentTypes[document.type]}
                </span>
                <h3 className="mt-2 font-medium">{document.title}</h3>
                <p className="text-sm text-gray-400 mt-1">
                  {document.createdAt.toLocaleDateString()}
                </p>
              </div>
              <div className="flex space-x-2">
                <button
                  onClick={() => downloadDocument(document)}
                  className="p-1 hover:bg-gray-700 rounded"
                  title="Download"
                >
                  <Download className="h-4 w-4" />
                </button>
                <button
                  onClick={() => deleteDocument(document.id)}
                  className="p-1 hover:bg-gray-700 rounded text-red-400"
                  title="Delete"
                >
                  <Trash2 className="h-4 w-4" />
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {documents.length === 0 && !showNewDocumentForm && (
        <div className="text-center py-12 bg-gray-800 rounded-lg">
          <FileText className="h-12 w-12 text-gray-400 mx-auto mb-4" />
          <p className="text-gray-400">No documents yet. Click "New Document" to get started.</p>
        </div>
      )}
    </div>
  );
}

export default Documents;

================
File: src/components/dashboard/IdeaGenerator.tsx
================
// src/components/dashboard/IdeaGenerator.tsx
import React, { useState } from 'react';
import { Sparkles, Loader, ChevronDown, Check } from 'lucide-react';
import { useAuthStore } from '../../store/authStore';

interface IdeaFormData {
  industry: string;
  targetMarket: string;
  technology: string[];
  problemSpace: string;
}

interface GeneratedIdea {
  name: string;
  pitch: string;
  description: string;
  keyFeatures: string[];
  targetAudience: string;
  revenueModel: string;
  challenges: string[];
  growthStrategy: string;
}

const industries = [
  'Technology', 'Healthcare', 'Education', 'Finance', 
  'E-commerce', 'Sustainability', 'Entertainment'
];

const technologies = [
  'AI/ML', 'Blockchain', 'IoT', 'Mobile', 'Cloud',
  'AR/VR', 'Robotics', 'Web3', '5G', 'Green Tech'
];

const marketSizes = [
  'B2C - Mass Market',
  'B2C - Niche Market',
  'B2B - Enterprise',
  'B2B - SMB',
  'B2B2C'
];

function IdeaGenerator() {
  const { token } = useAuthStore();
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [formData, setFormData] = useState<IdeaFormData>({
    industry: '',
    targetMarket: '',
    technology: [],
    problemSpace: ''
  });
  const [generatedIdea, setGeneratedIdea] = useState<GeneratedIdea | null>(null);

  const handleTechnologyToggle = (tech: string) => {
    setFormData(prev => ({
      ...prev,
      technology: prev.technology.includes(tech)
        ? prev.technology.filter(t => t !== tech)
        : [...prev.technology, tech]
    }));
  };

  const generateIdea = async () => {
    if (!token) {
      setError('Authentication required');
      return;
    }

    setIsGenerating(true);
    setError(null);

    try {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 60000); // 1 minute timeout

      const response = await fetch('/api/ai/generate-idea', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(formData),
        signal: controller.signal
      });

      clearTimeout(timeoutId);

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || 'Failed to generate idea');
      }

      const data = await response.json();
      setGeneratedIdea(data);
    } catch (error) {
      console.error('Idea generation error:', error);
      setError(error instanceof Error ? error.message : 'Failed to generate idea');

      if (error instanceof DOMException && error.name === 'AbortError') {
        setError('Request timed out. Please try again.');
      }
    } finally {
      setIsGenerating(false);
    }
  };

  const isFormValid = () => {
    return formData.industry && 
           formData.targetMarket && 
           formData.technology.length > 0 && 
           formData.problemSpace.trim().length > 0;
  };

  return (
    <div className="space-y-8">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">AI Startup Idea Generator</h2>
      </div>

      {error && (
        <div className="bg-red-500/10 border border-red-500/50 text-red-500 px-4 py-2 rounded-lg">
          {error}
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* Input Form */}
        <div className="space-y-6 bg-gray-800/50 p-6 rounded-xl">
          <div>
            <label className="block text-sm font-medium mb-2">Industry</label>
            <select
              value={formData.industry}
              onChange={(e) => setFormData(prev => ({ ...prev, industry: e.target.value }))}
              className="w-full bg-gray-700 rounded-lg px-4 py-2"
            >
              <option value="">Select Industry</option>
              {industries.map(industry => (
                <option key={industry} value={industry}>{industry}</option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Target Market</label>
            <select
              value={formData.targetMarket}
              onChange={(e) => setFormData(prev => ({ ...prev, targetMarket: e.target.value }))}
              className="w-full bg-gray-700 rounded-lg px-4 py-2"
            >
              <option value="">Select Target Market</option>
              {marketSizes.map(market => (
                <option key={market} value={market}>{market}</option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Technologies</label>
            <div className="grid grid-cols-2 gap-2">
              {technologies.map(tech => (
                <button
                  key={tech}
                  onClick={() => handleTechnologyToggle(tech)}
                  type="button"
                  className={`px-3 py-2 rounded-lg text-sm flex items-center justify-between ${
                    formData.technology.includes(tech)
                      ? 'bg-blue-600 hover:bg-blue-700'
                      : 'bg-gray-700 hover:bg-gray-600'
                  }`}
                >
                  {tech}
                  {formData.technology.includes(tech) && (
                    <Check className="h-4 w-4 ml-2" />
                  )}
                </button>
              ))}
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Problem Space</label>
            <textarea
              value={formData.problemSpace}
              onChange={(e) => setFormData(prev => ({ ...prev, problemSpace: e.target.value }))}
              placeholder="Describe the problem your startup should solve..."
              className="w-full bg-gray-700 rounded-lg px-4 py-2 min-h-[100px] resize-y"
            />
          </div>

          <button
            onClick={generateIdea}
            disabled={isGenerating || !isFormValid()}
            className="w-full bg-blue-600 hover:bg-blue-700 py-3 rounded-lg flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isGenerating ? (
              <>
                <Loader className="h-5 w-5 animate-spin" />
                <span>Generating...</span>
              </>
            ) : (
              <>
                <Sparkles className="h-5 w-5" />
                <span>Generate Idea</span>
              </>
            )}
          </button>
        </div>

        {/* Results Display */}
        <div className="bg-gray-800/50 p-6 rounded-xl">
          {generatedIdea ? (
            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-bold mb-2">{generatedIdea.name}</h3>
                <p className="text-blue-400 font-medium">{generatedIdea.pitch}</p>
              </div>

              <div>
                <h4 className="font-medium mb-2">Description</h4>
                <p className="text-gray-300">{generatedIdea.description}</p>
              </div>

              <div>
                <h4 className="font-medium mb-2">Key Features</h4>
                <ul className="list-disc list-inside space-y-1">
                  {generatedIdea.keyFeatures.map((feature, index) => (
                    <li key={index} className="text-gray-300">{feature}</li>
                  ))}
                </ul>
              </div>

              <div>
                <h4 className="font-medium mb-2">Target Audience</h4>
                <p className="text-gray-300">{generatedIdea.targetAudience}</p>
              </div>

              <div>
                <h4 className="font-medium mb-2">Revenue Model</h4>
                <p className="text-gray-300">{generatedIdea.revenueModel}</p>
              </div>

              <div>
                <h4 className="font-medium mb-2">Potential Challenges</h4>
                <ul className="list-disc list-inside space-y-1">
                  {generatedIdea.challenges.map((challenge, index) => (
                    <li key={index} className="text-gray-300">{challenge}</li>
                  ))}
                </ul>
              </div>

              <div>
                <h4 className="font-medium mb-2">Growth Strategy</h4>
                <p className="text-gray-300">{generatedIdea.growthStrategy}</p>
              </div>
            </div>
          ) : (
            <div className="h-full flex items-center justify-center text-gray-400">
              <p>Generated idea will appear here</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default IdeaGenerator;

================
File: src/components/dashboard/Settings.tsx
================
import React from 'react';

function Settings() {
  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <h2 className="text-2xl font-bold">Settings</h2>
      
      <div className="bg-gray-800 rounded-lg p-6">
        <h3 className="text-lg font-medium mb-4">Profile Settings</h3>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Full Name
            </label>
            <input
              type="text"
              className="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="John Doe"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Email
            </label>
            <input
              type="email"
              className="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="john@example.com"
            />
          </div>
        </div>
      </div>

      <div className="bg-gray-800 rounded-lg p-6">
        <h3 className="text-lg font-medium mb-4">AI Preferences</h3>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Communication Style
            </label>
            <select className="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
              <option>Professional</option>
              <option>Casual</option>
              <option>Technical</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-2">
              Industry Focus
            </label>
            <select className="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
              <option>Technology</option>
              <option>Healthcare</option>
              <option>E-commerce</option>
              <option>Finance</option>
            </select>
          </div>
        </div>
      </div>

      <div className="flex justify-end">
        <button className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg transition-colors">
          Save Changes
        </button>
      </div>
    </div>
  );
}

export default Settings;

================
File: src/components/dashboard/Terminal.tsx
================
import React, { useEffect, useRef } from 'react';
import { Terminal as XTerm } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import 'xterm/css/xterm.css';

interface TerminalProps {
  onReady?: (terminal: XTerm) => void;
  className?: string;
}

export function Terminal({ onReady, className = '' }: TerminalProps) {
  const terminalRef = useRef<HTMLDivElement>(null);
  const xtermRef = useRef<XTerm | null>(null);

  useEffect(() => {
    if (!terminalRef.current) return;

    // Initialize xterm.js
    const terminal = new XTerm({
      cursorBlink: true,
      fontSize: 14,
      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
      theme: {
        background: '#1a1b26',
        foreground: '#a9b1d6',
        cursor: '#c0caf5',
        black: '#414868',
        red: '#f7768e',
        green: '#9ece6a',
        yellow: '#e0af68',
        blue: '#7aa2f7',
        magenta: '#bb9af7',
        cyan: '#7dcfff',
        white: '#c0caf5',
        brightBlack: '#414868',
        brightRed: '#f7768e',
        brightGreen: '#9ece6a',
        brightYellow: '#e0af68',
        brightBlue: '#7aa2f7',
        brightMagenta: '#bb9af7',
        brightCyan: '#7dcfff',
        brightWhite: '#c0caf5'
      }
    });

    // Add the fit addon
    const fitAddon = new FitAddon();
    terminal.loadAddon(fitAddon);

    // Open terminal in the container
    terminal.open(terminalRef.current);
    
    // Initial fit
    try {
      fitAddon.fit();
    } catch (error) {
      console.warn('Error fitting terminal:', error);
    }

    // Store the terminal instance
    xtermRef.current = terminal;

    // Call onReady callback with the terminal instance
    if (onReady) {
      onReady(terminal);
    }

    // Handle window resize
    const handleResize = () => {
      try {
        fitAddon.fit();
      } catch (error) {
        console.warn('Error fitting terminal on resize:', error);
      }
    };
    
    window.addEventListener('resize', handleResize);

    // Cleanup
    return () => {
      window.removeEventListener('resize', handleResize);
      terminal.dispose();
    };
  }, [onReady]);

  return (
    <div 
      ref={terminalRef}
      className={`min-h-[300px] bg-gray-900 rounded-lg overflow-hidden ${className}`}
      style={{ padding: '0.5rem' }}
    />
  );
}

================
File: src/components/ErrorBoundary.tsx
================
import React, { Component, ErrorInfo, ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

export default class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false,
    error: null
  };

  public static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Uncaught error:', error, errorInfo);
  }

  public render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen flex items-center justify-center bg-gray-900">
          <div className="text-center p-8 glass-card rounded-lg max-w-lg">
            <h1 className="text-2xl font-bold text-red-500 mb-4">Something went wrong</h1>
            <p className="text-gray-300 mb-4">We apologize for the inconvenience. Please try refreshing the page.</p>
            <button
              onClick={() => window.location.reload()}
              className="button-primary"
            >
              Refresh Page
            </button>
          </div>
        </div>
      );
    }

    return this.props.children;
  }
}

================
File: src/components/Features.tsx
================
import React from 'react';
import { Brain, Rocket, Zap, MessageSquare, Shield, BarChart2, Users, Clock, Globe, Lock, Sparkles } from 'lucide-react';

const features = [
  {
    icon: <Brain className="h-8 w-8 text-blue-500" />,
    title: "Strategic Planning",
    description: "Get data-driven insights and strategic recommendations for your startup's growth"
  },
  {
    icon: <Rocket className="h-8 w-8 text-purple-500" />,
    title: "Execution Support",
    description: "Turn plans into action with AI-powered project management and task automation"
  },
  {
    icon: <BarChart2 className="h-8 w-8 text-blue-500" />,
    title: "Real-time Analytics",
    description: "Monitor your startup's performance with advanced metrics and predictive insights"
  },
  {
    icon: <MessageSquare className="h-8 w-8 text-purple-500" />,
    title: "24/7 Assistance",
    description: "Get answers and support whenever you need it, day or night"
  },
  {
    icon: <Users className="h-8 w-8 text-blue-500" />,
    title: "Team Collaboration",
    description: "Foster seamless communication and alignment across your entire team"
  },
  {
    icon: <Clock className="h-8 w-8 text-purple-500" />,
    title: "Time Management",
    description: "Optimize your schedule and prioritize tasks effectively"
  },
  {
    icon: <Globe className="h-8 w-8 text-blue-500" />,
    title: "Market Analysis",
    description: "Stay ahead with real-time market trends and competitor analysis"
  },
  {
    icon: <Lock className="h-8 w-8 text-purple-500" />,
    title: "Security First",
    description: "Enterprise-grade security to protect your sensitive business data"
  },
  {
    icon: <Sparkles className="h-8 w-8 text-blue-500" />,
    title: "Innovation Hub",
    description: "Generate and validate new ideas with AI-powered brainstorming"
  }
];

export default function Features() {
  return (
    <div id="features" className="relative py-20 px-4 sm:px-6 lg:px-8">
      <div className="absolute inset-0 bg-gradient-to-b from-gray-900 via-gray-900/95 to-gray-900"></div>
      <div className="relative max-w-7xl mx-auto">
        <div className="text-center">
          <h2 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">
            Powerful Features
          </h2>
          <p className="mt-4 text-xl text-gray-400">
            Everything you need to build and scale your startup
          </p>
        </div>
        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div 
              key={index} 
              className="glass-card card-hover-effect rounded-xl p-6 hover-card"
            >
              <div className="relative z-10">
                {feature.icon}
                <h3 className="mt-4 text-xl font-semibold">{feature.title}</h3>
                <p className="mt-2 text-gray-400">{feature.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

================
File: src/components/Footer.tsx
================
import React from 'react';
import { Brain } from 'lucide-react';

export default function Footer() {
  return (
    <footer className="bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <div className="flex items-center">
              <Brain className="h-8 w-8 text-blue-500" />
              <span className="ml-2 text-xl font-bold">AIFounder</span>
            </div>
            <p className="mt-4 text-gray-400">
              Empowering entrepreneurs with AI-powered insights and support.
            </p>
          </div>
          <div>
            <h4 className="text-lg font-semibold mb-4">Product</h4>
            <ul className="space-y-2">
              <li><a href="#features" className="text-gray-400 hover:text-white">Features</a></li>
              <li><a href="#pricing" className="text-gray-400 hover:text-white">Pricing</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white">API</a></li>
            </ul>
          </div>
          <div>
            <h4 className="text-lg font-semibold mb-4">Company</h4>
            <ul className="space-y-2">
              <li><a href="#" className="text-gray-400 hover:text-white">About</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white">Blog</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white">Careers</a></li>
            </ul>
          </div>
          <div>
            <h4 className="text-lg font-semibold mb-4">Legal</h4>
            <ul className="space-y-2">
              <li><a href="#" className="text-gray-400 hover:text-white">Privacy</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white">Terms</a></li>
              <li><a href="#" className="text-gray-400 hover:text-white">Security</a></li>
            </ul>
          </div>
        </div>
        <div className="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400">
          <p>© 2024 AIFounder. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}

================
File: src/components/Hero.tsx
================
import React from 'react';
import { ArrowRight, Sparkles, Bot, Cpu } from 'lucide-react';

interface HeroProps {
  onGetStarted: () => void;
}

export default function Hero({ onGetStarted }: HeroProps) {
  return (
    <div className="relative min-h-screen pt-32 pb-20 px-4 sm:px-6 lg:px-8 overflow-hidden">
      {/* Background Effects */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-1/2 -left-1/2 w-[200%] h-[200%] bg-gradient-conic from-blue-500/20 via-purple-500/20 to-blue-500/20 animate-pulse-slow"></div>
        <div className="absolute inset-0 bg-gray-900/90 backdrop-blur-3xl"></div>
      </div>

      <div className="relative max-w-7xl mx-auto">
        <div className="text-center">
          <div className="flex items-center justify-center space-x-4 mb-6">
            <Bot className="h-12 w-12 text-blue-500 animate-float" />
            <Sparkles className="h-8 w-8 text-purple-500 animate-pulse" />
            <Cpu className="h-12 w-12 text-blue-500 animate-float" style={{ animationDelay: '2s' }} />
          </div>
          
          <h1 className="text-5xl md:text-7xl font-bold">
            Your{' '}
            <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-blue-400 animate-pulse-slow">
              AI Co-Founder
            </span>
          </h1>
          
          <p className="mt-6 text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto">
            Transform your startup journey with an AI partner that never sleeps. 
            Get instant insights, strategic planning, and execution support 24/7.
          </p>

          <div className="mt-10 flex flex-col sm:flex-row justify-center gap-4">
            <button 
              onClick={onGetStarted}
              className="button-primary group flex items-center justify-center"
            >
              Start Building
              <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" />
            </button>
            <button className="button-secondary flex items-center justify-center group">
              Watch Demo
              <Sparkles className="ml-2 group-hover:rotate-12 transition-transform" />
            </button>
          </div>

          <div className="mt-16 relative">
            <div className="absolute inset-0 bg-gradient-radial from-blue-500/20 via-purple-500/10 to-transparent pointer-events-none" />
            <div className="glass-card hover-card rounded-xl overflow-hidden">
              <img
                src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=2070&q=80"
                alt="Team collaboration"
                className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-700"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

================
File: src/components/Navbar.tsx
================
import React from 'react';
import { Brain } from 'lucide-react';

interface NavbarProps {
  onGetStarted: () => void;
}

export default function Navbar({ onGetStarted }: NavbarProps) {
  return (
    <nav className="fixed w-full z-50 nav-blur">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <Brain className="h-8 w-8 text-blue-500" />
            <span className="ml-2 text-xl font-bold">AIFounder</span>
          </div>
          <div className="hidden md:block">
            <div className="flex items-center space-x-8">
              <a href="#features" className="hover:text-blue-400 transition-colors">Features</a>
              <a href="#testimonials" className="hover:text-blue-400 transition-colors">Testimonials</a>
              <a href="#pricing" className="hover:text-blue-400 transition-colors">Pricing</a>
              <button 
                onClick={onGetStarted}
                className="button-primary"
              >
                Get Started
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

================
File: src/components/PaywallModal.tsx
================
import React from 'react';
import { Shield, Check, ArrowRight } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '../store/authStore';

const plans = [
  {
    name: 'Starter',
    price: '49',
    features: [
      'Basic AI insights',
      'Strategic planning',
      '24/7 chat support',
      'Performance analytics',
      '1 project'
    ]
  },
  {
    name: 'Pro',
    price: '149',
    features: [
      'Advanced AI insights',
      'Custom strategy development',
      'Priority support',
      'Advanced analytics',
      '5 projects',
      'Team collaboration',
      'API access'
    ],
    popular: true
  },
  {
    name: 'Enterprise',
    price: '499',
    features: [
      'Full AI capabilities',
      'Dedicated AI instance',
      '24/7 priority support',
      'Custom integrations',
      'Unlimited projects',
      'Advanced security',
      'Custom reporting'
    ]
  }
];

export default function PaywallModal() {
  const navigate = useNavigate();
  const { updateSubscription } = useAuthStore();

  const handleSubscribe = async (plan: string) => {
    try {
      // In production, integrate with Stripe or another payment processor
      const subscription = {
        id: crypto.randomUUID(),
        plan: plan.toLowerCase(),
        status: 'active',
        expiresAt: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString()
      };
      
      updateSubscription(subscription);
      navigate('/dashboard');
    } catch (error) {
      console.error('Subscription error:', error);
    }
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm z-50">
      <div className="max-w-6xl w-full mx-4 bg-gray-900 rounded-2xl p-8">
        <div className="text-center mb-12">
          <Shield className="h-16 w-16 text-blue-500 mx-auto mb-6" />
          <h2 className="text-3xl font-bold mb-4">Choose Your Plan</h2>
          <p className="text-gray-400 max-w-2xl mx-auto">
            Get started with AIFounder and transform your startup journey. 
            Select the plan that best fits your needs.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className={`relative p-6 rounded-xl ${
                plan.popular
                  ? 'bg-gradient-to-b from-blue-600/20 to-purple-600/20 ring-2 ring-blue-500'
                  : 'bg-gray-800/50'
              }`}
            >
              {plan.popular && (
                <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-blue-500 text-sm px-3 py-1 rounded-full">
                  Most Popular
                </span>
              )}

              <div className="mb-6">
                <h3 className="text-2xl font-bold">{plan.name}</h3>
                <div className="mt-2 flex items-baseline">
                  <span className="text-4xl font-bold">${plan.price}</span>
                  <span className="text-gray-400 ml-2">/month</span>
                </div>
              </div>

              <ul className="space-y-4 mb-8">
                {plan.features.map((feature, index) => (
                  <li key={index} className="flex items-center">
                    <Check className="h-5 w-5 text-blue-500 mr-2 flex-shrink-0" />
                    <span className="text-gray-300">{feature}</span>
                  </li>
                ))}
              </ul>

              <button
                onClick={() => handleSubscribe(plan.name)}
                className={`w-full py-3 rounded-lg flex items-center justify-center group ${
                  plan.popular
                    ? 'bg-blue-500 hover:bg-blue-600'
                    : 'bg-blue-600 hover:bg-blue-700'
                }`}
              >
                Get Started
                <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" />
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

================
File: src/components/Pricing.tsx
================
import React from 'react';
import { Check, Zap, Shield, Rocket } from 'lucide-react';

interface PricingProps {
  onGetStarted: () => void;
}

const plans = [
  {
    name: "Starter",
    price: "49",
    icon: <Zap className="h-8 w-8 text-blue-500" />,
    features: [
      "Basic AI insights",
      "Strategic planning",
      "24/7 chat support",
      "Performance analytics",
      "1 project"
    ]
  },
  {
    name: "Pro",
    price: "149",
    icon: <Rocket className="h-8 w-8 text-purple-500" />,
    features: [
      "Advanced AI insights",
      "Custom strategy development",
      "Priority support",
      "Advanced analytics",
      "5 projects",
      "Team collaboration",
      "API access"
    ],
    popular: true
  },
  {
    name: "Enterprise",
    price: "499",
    icon: <Shield className="h-8 w-8 text-blue-500" />,
    features: [
      "Full AI capabilities",
      "Dedicated AI instance",
      "24/7 priority support",
      "Custom integrations",
      "Unlimited projects",
      "Advanced security",
      "Custom reporting"
    ]
  }
];

export default function Pricing({ onGetStarted }: PricingProps) {
  return (
    <div id="pricing" className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900/50">
      <div className="max-w-7xl mx-auto">
        <div className="text-center">
          <h2 className="text-4xl font-bold">Simple Pricing</h2>
          <p className="mt-4 text-xl text-gray-400">Choose the perfect plan for your startup</p>
        </div>
        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {plans.map((plan, index) => (
            <div 
              key={index} 
              className={`relative p-8 rounded-xl ${
                plan.popular 
                  ? 'bg-gradient-to-b from-blue-600/20 to-purple-600/20 ring-2 ring-blue-500' 
                  : 'bg-gray-800/50 hover:bg-gray-800'
              } transition-colors`}
            >
              {plan.popular && (
                <span className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-500 text-sm px-3 py-1 rounded-full">
                  Most Popular
                </span>
              )}
              <div className="flex items-center justify-between">
                <h3 className="text-2xl font-bold">{plan.name}</h3>
                {plan.icon}
              </div>
              <div className="mt-4 flex items-baseline">
                <span className="text-4xl font-bold">${plan.price}</span>
                <span className="ml-2 text-gray-400">/month</span>
              </div>
              <ul className="mt-8 space-y-4">
                {plan.features.map((feature, featureIndex) => (
                  <li key={featureIndex} className="flex items-center">
                    <Check className="h-5 w-5 text-blue-500 mr-2" />
                    {feature}
                  </li>
                ))}
              </ul>
              <button 
                onClick={onGetStarted}
                className={`mt-8 w-full py-3 rounded-lg transition-colors ${
                  plan.popular 
                    ? 'bg-blue-500 hover:bg-blue-600' 
                    : 'bg-blue-600 hover:bg-blue-700'
                }`}
              >
                Get Started
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

================
File: src/components/PrivateRoute.tsx
================
import React, { useEffect } from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useAuthStore } from '../store/authStore';

interface PrivateRouteProps {
  children: React.ReactNode;
}

function PrivateRoute({ children }: PrivateRouteProps) {
  const { isAuthenticated, subscription } = useAuthStore();
  const location = useLocation();

  // Redirect to pricing if no active subscription
  if (isAuthenticated && !subscription) {
    return <Navigate to="/#pricing" state={{ from: location }} replace />;
  }

  // Redirect to login if not authenticated
  if (!isAuthenticated) {
    return <Navigate to="/" state={{ from: location }} replace />;
  }

  return <>{children}</>;
}

export default PrivateRoute;

================
File: src/components/Testimonials.tsx
================
import React from 'react';

const testimonials = [
  {
    quote: "AIFounder has been instrumental in helping us scale our startup. The strategic insights are invaluable.",
    author: "Sarah Chen",
    role: "CEO, TechVision",
    image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&h=150&q=80"
  },
  {
    quote: "Having an AI co-founder means we can move faster and make better decisions. It's like having a genius partner.",
    author: "Michael Rodriguez",
    role: "Founder, DataFlow",
    image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=150&h=150&q=80"
  },
  {
    quote: "The 24/7 support and real-time analysis have transformed how we operate. Couldn't imagine building without it.",
    author: "Emily Zhang",
    role: "CTO, CloudScale",
    image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=150&h=150&q=80"
  }
];

export default function Testimonials() {
  return (
    <div id="testimonials" className="py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center">
          <h2 className="text-4xl font-bold">Trusted by Founders</h2>
          <p className="mt-4 text-xl text-gray-400">See what other entrepreneurs are saying</p>
        </div>
        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <div key={index} className="p-6 rounded-xl bg-gray-800/50">
              <p className="text-lg italic">"{testimonial.quote}"</p>
              <div className="mt-6 flex items-center">
                <img
                  src={testimonial.image}
                  alt={testimonial.author}
                  className="h-12 w-12 rounded-full"
                />
                <div className="ml-4">
                  <p className="font-semibold">{testimonial.author}</p>
                  <p className="text-gray-400">{testimonial.role}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

================
File: src/db/index.ts
================
import { createClient } from '@libsql/client';

const client = createClient({
  url: 'file:local.db',
});

export const db = {
  async query(sql: string, params: any[] = []) {
    return client.execute(sql, params);
  },
  
  async transaction<T>(callback: () => Promise<T>): Promise<T> {
    return client.transaction(callback);
  }
};

================
File: src/db/migrate.ts
================
import { drizzle } from 'drizzle-orm/better-sqlite3';
import { migrate } from 'drizzle-orm/better-sqlite3/migrator';
import Database from 'better-sqlite3';

// Run migrations
const runMigrations = async () => {
  const sqlite = new Database('sqlite.db', { verbose: console.log });
  const db = drizzle(sqlite);

  console.log('Running migrations...');
  
  try {
    await migrate(db, { migrationsFolder: 'drizzle' });
    console.log('Migrations completed successfully');
  } catch (error) {
    console.error('Migration failed:', error);
    process.exit(1);
  } finally {
    sqlite.close();
  }
};

runMigrations();

================
File: src/db/schema.ts
================
import { sql } from 'drizzle-orm';
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core';

export const users = sqliteTable('users', {
  id: text('id').primaryKey(),
  email: text('email').notNull().unique(),
  name: text('name').notNull(),
  passwordHash: text('password_hash').notNull(),
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull().default(sql`CURRENT_TIMESTAMP`),
});

export const ideas = sqliteTable('ideas', {
  id: text('id').primaryKey(),
  userId: text('user_id').notNull().references(() => users.id),
  title: text('title').notNull(),
  description: text('description').notNull(),
  keyFeatures: text('key_features').notNull(), // JSON string
  targetAudience: text('target_audience').notNull(),
  revenueModel: text('revenue_model').notNull(),
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull().default(sql`CURRENT_TIMESTAMP`),
});

export const documents = sqliteTable('documents', {
  id: text('id').primaryKey(),
  userId: text('user_id').notNull().references(() => users.id),
  type: text('type').notNull(), // 'pitch_deck', 'business_plan', etc.
  title: text('title').notNull(),
  content: text('content').notNull(), // JSON string
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull().default(sql`CURRENT_TIMESTAMP`),
});

export const subscriptions = sqliteTable('subscriptions', {
  id: text('id').primaryKey(),
  userId: text('user_id').notNull().references(() => users.id),
  plan: text('plan').notNull(), // 'starter', 'pro', 'enterprise'
  status: text('status').notNull(), // 'active', 'cancelled', 'expired'
  expiresAt: integer('expires_at', { mode: 'timestamp' }).notNull(),
  createdAt: integer('created_at', { mode: 'timestamp' }).notNull().default(sql`CURRENT_TIMESTAMP`),
});

================
File: src/index.css
================
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-gradient-to-b from-gray-900 to-black text-white;
  }
}

@layer utilities {
  .bg-gradient-radial {
    background-image: radial-gradient(circle at center, var(--tw-gradient-stops));
  }
}

@layer components {
  .glass-card {
    @apply bg-gray-800/40 backdrop-blur-md border border-gray-700/30;
  }
  
  .glass-panel {
    @apply bg-gray-800/30 backdrop-blur-md border border-gray-700/20;
  }
  
  .hover-card {
    @apply transition-all duration-300 hover:scale-[1.02] hover:shadow-xl hover:shadow-blue-500/10;
  }

  .button-primary {
    @apply bg-gradient-to-r from-blue-600/90 to-blue-500/90 backdrop-blur-sm
           hover:from-blue-500/90 hover:to-blue-400/90 
           px-6 py-3 rounded-lg font-medium transition-all duration-300
           hover:shadow-lg hover:shadow-blue-500/25 active:scale-95;
  }

  .button-secondary {
    @apply bg-gray-800/50 backdrop-blur-sm hover:bg-gray-700/50 px-6 py-3 rounded-lg font-medium
           transition-all duration-300 border border-gray-700/50
           hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10;
  }

  .input-primary {
    @apply bg-gray-800/30 backdrop-blur-sm border border-gray-700/50 rounded-lg px-4 py-2
           focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50
           transition-all duration-300;
  }

  .nav-blur {
    @apply bg-gray-900/70 backdrop-blur-md border-b border-gray-800/50;
  }

  .sidebar-blur {
    @apply bg-gray-800/50 backdrop-blur-md border-r border-gray-700/30;
  }

  .card-hover-effect {
    @apply relative overflow-hidden transition-all duration-500;
  }

  .card-hover-effect::after {
    @apply content-[''] absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300
           bg-gradient-to-r from-blue-500/10 to-purple-500/10;
  }

  .card-hover-effect:hover::after {
    @apply opacity-100;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
  }
}

================
File: src/main.tsx
================
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from 'react-query';
import App from './App.tsx';
import './index.css';

// Configure QueryClient with optimized settings
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      staleTime: 5 * 60 * 1000,
      cacheTime: 10 * 60 * 1000,
      refetchOnWindowFocus: false,
      suspense: true
    }
  }
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>
);

================
File: src/pages/Dashboard.tsx
================
import React, { useState } from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom';
import { Menu, X, MessageSquare, BarChart2, Settings as SettingsIcon, LogOut, FileText, Sparkles, Code } from 'lucide-react';
import { useAuthStore } from '../store/authStore';
import Chat from '../components/dashboard/Chat';
import Analytics from '../components/dashboard/Analytics';
import Documents from '../components/dashboard/Documents';
import IdeaGenerator from '../components/dashboard/IdeaGenerator';
import CodeBuilder from '../components/dashboard/CodeBuilder';
import SettingsPage from '../components/dashboard/Settings';

function Dashboard() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
  const navigate = useNavigate();
  const logout = useAuthStore((state) => state.logout);

  const handleLogout = () => {
    logout();
    navigate('/');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white flex">
      <div className={`fixed lg:static lg:flex-shrink-0 w-64 sidebar-blur min-h-screen transition-all duration-300 transform ${
        isSidebarOpen ? 'translate-x-0' : '-translate-x-full'
      } lg:translate-x-0`}>
        <div className="p-4">
          <div className="flex items-center justify-between">
            <h1 className="text-xl font-bold">AIFounder</h1>
            <button
              className="lg:hidden"
              onClick={() => setIsSidebarOpen(false)}
            >
              <X className="h-6 w-6" />
            </button>
          </div>
          <nav className="mt-8 space-y-2">
            <button
              onClick={() => navigate('/dashboard')}
              className="flex items-center w-full p-3 rounded-lg hover:bg-gray-700/50 transition-colors"
            >
              <MessageSquare className="h-5 w-5 mr-3" />
              Chat
            </button>
            <button
              onClick={() => navigate('/dashboard/ideas')}
              className="flex items-center w-full p-3 rounded-lg hover:bg-gray-700/50 transition-colors"
            >
              <Sparkles className="h-5 w-5 mr-3" />
              Ideas
            </button>
            <button
              onClick={() => navigate('/dashboard/code-builder')}
              className="flex items-center w-full p-3 rounded-lg hover:bg-gray-700/50 transition-colors"
            >
              <Code className="h-5 w-5 mr-3" />
              Code Builder
            </button>
            <button
              onClick={() => navigate('/dashboard/analytics')}
              className="flex items-center w-full p-3 rounded-lg hover:bg-gray-700/50 transition-colors"
            >
              <BarChart2 className="h-5 w-5 mr-3" />
              Analytics
            </button>
            <button
              onClick={() => navigate('/dashboard/documents')}
              className="flex items-center w-full p-3 rounded-lg hover:bg-gray-700/50 transition-colors"
            >
              <FileText className="h-5 w-5 mr-3" />
              Documents
            </button>
            <button
              onClick={() => navigate('/dashboard/settings')}
              className="flex items-center w-full p-3 rounded-lg hover:bg-gray-700/50 transition-colors"
            >
              <SettingsIcon className="h-5 w-5 mr-3" />
              Settings
            </button>
            <button
              onClick={handleLogout}
              className="flex items-center w-full p-3 rounded-lg hover:bg-gray-700/50 transition-colors text-red-400"
            >
              <LogOut className="h-5 w-5 mr-3" />
              Logout
            </button>
          </nav>
        </div>
      </div>

      <div className="flex-1">
        <header className="bg-gray-800/30 backdrop-blur-sm border-b border-gray-700/30 p-4">
          <button
            className="lg:hidden"
            onClick={() => setIsSidebarOpen(true)}
          >
            <Menu className="h-6 w-6" />
          </button>
        </header>
        <main className="p-6">
          <Routes>
            <Route path="/" element={<Chat />} />
            <Route path="/ideas" element={<IdeaGenerator />} />
            <Route path="/code-builder" element={<CodeBuilder />} />
            <Route path="/analytics" element={<Analytics />} />
            <Route path="/documents" element={<Documents />} />
            <Route path="/settings" element={<SettingsPage />} />
          </Routes>
        </main>
      </div>
    </div>
  );
}

export default Dashboard;

================
File: src/pages/LandingPage.tsx
================
import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import Navbar from '../components/Navbar';
import Hero from '../components/Hero';
import Features from '../components/Features';
import Testimonials from '../components/Testimonials';
import Pricing from '../components/Pricing';
import Footer from '../components/Footer';
import AuthModal from '../components/AuthModal';
import { useAuthStore } from '../store/authStore';

function LandingPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);

  useEffect(() => {
    // Open auth modal if redirected from private route
    if (location.state?.from?.pathname) {
      setIsAuthModalOpen(true);
    }
  }, [location.state]);

  const handleGetStarted = () => {
    if (isAuthenticated) {
      navigate('/dashboard');
    } else {
      setIsAuthModalOpen(true);
    }
  };

  const handleAuthSuccess = () => {
    setIsAuthModalOpen(false);
    navigate('/dashboard');
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-black text-white">
      <Navbar onGetStarted={handleGetStarted} />
      <Hero onGetStarted={handleGetStarted} />
      <Features />
      <Testimonials />
      <Pricing onGetStarted={handleGetStarted} />
      <Footer />
      <AuthModal 
        isOpen={isAuthModalOpen} 
        onClose={() => setIsAuthModalOpen(false)}
        onSuccess={handleAuthSuccess}
      />
    </div>
  );
}

export default LandingPage;

================
File: src/services/api.ts
================
import axios from 'axios';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || '/api',
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 10000
});

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem('auth_token');
      window.location.href = '/';
    }
    return Promise.reject(error);
  }
);

// Auth API
export const authService = {
  login: async (email: string, password: string) => {
    const response = await api.post('/auth/login', { email, password });
    return response.data;
  },
  signup: async (email: string, password: string, name: string) => {
    const response = await api.post('/auth/signup', { email, password, name });
    return response.data;
  },
  refreshToken: async () => {
    const response = await api.post('/auth/refresh-token');
    return response.data;
  }
};

// Chat API
export const chatService = {
  sendMessage: async (message: string) => {
    const response = await api.post('/chat/message', { message });
    return response.data;
  },
  getHistory: async () => {
    const response = await api.get('/chat/history');
    return response.data;
  }
};

// Ideas API
export interface IdeaGenerationParams {
  industry?: string;
  technology?: string[];
  marketSize?: 'small' | 'medium' | 'large';
  timeframe?: 'short' | 'medium' | 'long';
}

export interface BusinessIdea {
  id: string;
  title: string;
  description: string;
  keyFeatures: string[];
  targetAudience: string;
  revenueModel: string;
  timestamp: string;
}

export const ideaService = {
  getAll: async () => {
    const response = await api.get('/ideas');
    return response.data;
  },
  create: async (idea: BusinessIdea) => {
    const response = await api.post('/ideas', idea);
    return response.data;
  },
  update: async (id: string, idea: Partial<BusinessIdea>) => {
    const response = await api.put(`/ideas/${id}`, idea);
    return response.data;
  },
  delete: async (id: string) => {
    const response = await api.delete(`/ideas/${id}`);
    return response.data;
  },
  generate: async (params: IdeaGenerationParams) => {
    const response = await api.post('/ideas/generate', params);
    return response.data;
  }
};

// Documents API
export const documentService = {
  getAll: async () => {
    const response = await api.get('/documents');
    return response.data;
  },
  generate: async (type: string, params: any) => {
    const response = await api.post('/documents/generate', { type, ...params });
    return response.data;
  },
  delete: async (id: string) => {
    const response = await api.delete(`/documents/${id}`);
    return response.data;
  }
};

// Code Builder API
export const codeService = {
  getTemplates: async () => {
    const response = await api.get('/code/templates');
    return response.data;
  },
  generate: async (templateId: string, customization: any) => {
    const response = await api.post('/code/generate', { templateId, customization });
    return response.data;
  },
  preview: async (code: string) => {
    const response = await api.post('/code/preview', { code });
    return response.data;
  }
};

// Analytics API
export const analyticsService = {
  getMetrics: async () => {
    const response = await api.get('/analytics/metrics');
    return response.data;
  },
  getGrowth: async () => {
    const response = await api.get('/analytics/growth');
    return response.data;
  },
  getUserStats: async () => {
    const response = await api.get('/analytics/users');
    return response.data;
  }
};

// Subscription API
export const subscriptionService = {
  create: async (plan: string) => {
    const response = await api.post('/subscriptions/create', { plan });
    return response.data;
  },
  update: async (id: string, data: any) => {
    const response = await api.put(`/subscriptions/${id}`, data);
    return response.data;
  },
  getStatus: async () => {
    const response = await api.get('/subscriptions/status');
    return response.data;
  }
};

================
File: src/services/webcontainer.ts
================
import { WebContainer } from '@webcontainer/api';

let webcontainerInstance: WebContainer;

interface ServerProcess {
  url: string;
  process: any;
}

export async function initWebContainer() {
  if (!webcontainerInstance) {
    webcontainerInstance = await WebContainer.boot();
  }
  return webcontainerInstance;
}

export async function writeFiles(files: Record<string, any>) {
  const instance = await initWebContainer();
  await instance.mount(files);
}

export async function installDependencies(terminal: any) {
  const instance = await initWebContainer();
  const installProcess = await instance.spawn('npm', ['install']);
  
  installProcess.output.pipeTo(
    new WritableStream({
      write(data) {
        terminal.write(data);
      },
    })
  );
  
  return installProcess.exit;
}

export async function startDevServer(terminal: any): Promise<ServerProcess> {
  const instance = await initWebContainer();
  const serverProcess = await instance.spawn('npm', ['run', 'dev']);
  
  serverProcess.output.pipeTo(
    new WritableStream({
      write(data) {
        terminal.write(data);
      },
    })
  );

  // Wait for the dev server URL to appear in the terminal
  return new Promise<ServerProcess>((resolve) => {
    let url = '';
    const checkOutput = new WritableStream({
      write(data) {
        const output = data.toString();
        // Look for both localhost and 0.0.0.0
        const match = output.match(/(?:Local|Network):\s*(http:\/\/(?:localhost|0\.0\.0\.0):\d+)/);
        if (match && !url) {
          url = match[1].replace('0.0.0.0', 'localhost');
          if (url) {
            resolve({ url, process: serverProcess });
          }
        }
      },
    });

    serverProcess.output.tee()[1].pipeTo(checkOutput);
  });
}

export async function executeCommand(command: string, args: string[], terminal: any) {
  const instance = await initWebContainer();
  const process = await instance.spawn(command, args);
  
  process.output.pipeTo(
    new WritableStream({
      write(data) {
        terminal.write(data);
      },
    })
  );
  
  return process.exit;
}

export function createFileTree(generatedCode: any) {
  const files: Record<string, any> = {
    'package.json': {
      file: {
        contents: JSON.stringify({
          name: 'web-app',
          type: 'module',
          scripts: {
            dev: 'vite --port 5173 --host',
            build: 'vite build',
            preview: 'vite preview'
          },
          dependencies: {
            'react': '^18.2.0',
            'react-dom': '^18.2.0'
          },
          devDependencies: {
            '@vitejs/plugin-react': '^4.0.0',
            'vite': '^4.3.9'
          }
        }, null, 2)
      }
    },
    'vite.config.js': {
      file: {
        contents: `
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    strictPort: true,
    port: 5173
  }
});`
      }
    },
    'index.html': {
      file: {
        contents: `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>`
      }
    },
    'src': {
      directory: {
        'main.tsx': {
          file: {
            contents: generatedCode.code
          }
        }
      }
    }
  };

  // Add any additional files from generatedCode
  if (generatedCode.files) {
    for (const [path, content] of Object.entries(generatedCode.files)) {
      const parts = path.split('/');
      let current = files;
      
      for (let i = 0; i < parts.length - 1; i++) {
        const part = parts[i];
        if (!current[part]) {
          current[part] = { directory: {} };
        }
        current = current[part].directory;
      }
      
      const fileName = parts[parts.length - 1];
      current[fileName] = {
        file: {
          contents: content as string
        }
      };
    }
  }

  return files;
}

================
File: src/store/authStore.ts
================
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { authService } from '../services/api';

interface Subscription {
  id: string;
  plan: 'starter' | 'pro' | 'enterprise';
  status: 'active' | 'cancelled' | 'expired';
  expiresAt: string;
}

interface AuthState {
  isAuthenticated: boolean;
  user: {
    id: string;
    email: string;
    name: string;
  } | null;
  subscription: Subscription | null;
  token: string | null;
  login: (email: string, password: string) => Promise<void>;
  signup: (email: string, password: string, name: string) => Promise<void>;
  logout: () => void;
  updateUser: (user: Partial<AuthState['user']>) => void;
  updateSubscription: (subscription: Subscription) => void;
  setToken: (token: string) => void;
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      isAuthenticated: false,
      user: null,
      subscription: null,
      token: null,
      login: async (email: string, password: string) => {
        try {
          const { token, user, subscription } = await authService.login(email, password);
          set({ 
            isAuthenticated: true,
            user,
            subscription,
            token
          });
          localStorage.setItem('auth_token', token);
        } catch (error) {
          throw new Error('Invalid credentials');
        }
      },
      signup: async (email: string, password: string, name: string) => {
        try {
          const { token, user, subscription } = await authService.signup(email, password, name);
          set({ 
            isAuthenticated: true,
            user,
            subscription,
            token
          });
          localStorage.setItem('auth_token', token);
        } catch (error) {
          throw new Error('Signup failed');
        }
      },
      logout: () => {
        localStorage.removeItem('auth_token');
        set({ 
          isAuthenticated: false, 
          user: null,
          subscription: null,
          token: null
        });
      },
      updateUser: (userData) => {
        set((state) => ({
          user: state.user ? { ...state.user, ...userData } : null
        }));
      },
      updateSubscription: (subscription) => {
        set({ subscription });
      },
      setToken: (token) => {
        set({ token });
        localStorage.setItem('auth_token', token);
      }
    }),
    {
      name: 'auth-storage',
      partialize: (state) => ({ 
        isAuthenticated: state.isAuthenticated,
        user: state.user,
        subscription: state.subscription,
        token: state.token
      })
    }
  )
);

// Initialize token from localStorage
const token = localStorage.getItem('auth_token');
if (token) {
  useAuthStore.getState().setToken(token);
}

================
File: src/vite-env.d.ts
================
/// <reference types="vite/client" />

================
File: tailwind.config.js
================
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      animation: {
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      },
      keyframes: {
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-20px)' },
        },
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(circle at center, var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
};

================
File: tsconfig.app.json
================
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

================
File: tsconfig.json
================
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

================
File: tsconfig.node.json
================
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}

================
File: vercel.json
================
{
  "version": 2,
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "functions": {
    "api/ai/generate-code.ts": {
      "maxDuration": 60
    }
  },
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "/api/$1"
    },
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

================
File: vite.config.ts
================
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    target: 'esnext',
    minify: 'terser',
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          'state-vendor': ['zustand', 'react-query'],
          'ui-vendor': ['lucide-react'],
          'terminal-vendor': ['xterm', 'xterm-addon-fit']
        }
      }
    }
  },
  optimizeDeps: {
    include: [
      'react', 
      'react-dom', 
      'react-router-dom', 
      'zustand', 
      'react-query', 
      'lucide-react',
      'xterm',
      'xterm-addon-fit',
      '@webcontainer/api'
    ]
  },
  server: {
    port: 3000,
    strictPort: true,
    host: true
  }
});