fixing the UI issues

app/api/claude/generate-flutter/route.ts

@@ -1,716 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-
-export async function POST(request: NextRequest) {
-  try {
-    const { prompt } = await request.json()
-
-    if (!prompt) {
-      return NextResponse.json(
-        { error: 'Prompt is required' },
-        { status: 400 }
-      )
-    }
-
-    // Check if we have an API key
-    const apiKey = process.env.ANTHROPIC_API_KEY
-
-    if (apiKey) {
-      // Call Claude API
-      try {
-        const response = await fetch('https://api.anthropic.com/v1/messages', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'x-api-key': apiKey,
-            'anthropic-version': '2023-06-01'
-          },
-          body: JSON.stringify({
-            model: 'claude-3-haiku-20240307',
-            max_tokens: 2048,
-            messages: [
-              {
-                role: 'user',
-                content: `Generate clean, complete Flutter/Dart code for the following request.
-                Return ONLY the code without any explanations, markdown formatting, or comments about the code.
-                The code should be ready to run in DartPad.
-
-                Request: ${prompt}`
-              }
-            ],
-            system: `You are a Flutter code generator. Generate clean, working Flutter/Dart code that can run directly in DartPad.
-            - Always include necessary imports
-            - Use Material Design components
-            - Ensure the code is complete and runnable
-            - Do not include pubspec.yaml as DartPad handles dependencies
-            - Do not include any explanations or markdown formatting
-            - Return only pure Dart/Flutter code`
-          })
-        })
-
-        if (response.ok) {
-          const data = await response.json()
-          const code = data.content[0].text
-
-          // Clean the code if it has any markdown formatting
-          const cleanedCode = code
-            .replace(/```dart\n?/g, '')
-            .replace(/```flutter\n?/g, '')
-            .replace(/```\n?/g, '')
-            .trim()
-
-          return NextResponse.json({ code: cleanedCode })
-        }
-      } catch (error) {
-        console.error('Claude API error:', error)
-      }
-    }
-
-    // Fallback: Generate mock Flutter code based on the prompt
-    const mockCode = generateMockFlutterCode(prompt)
-    return NextResponse.json({ code: mockCode })
-
-  } catch (error) {
-    console.error('Error generating Flutter code:', error)
-    return NextResponse.json(
-      { error: 'Failed to generate Flutter code' },
-      { status: 500 }
-    )
-  }
-}
-
-function generateMockFlutterCode(prompt: string): string {
-  // Extract key words from the prompt to customize the generated code
-  const promptLower = prompt.toLowerCase()
-
-  // Check for specific UI elements mentioned
-  const hasButton = promptLower.includes('button')
-  const hasList = promptLower.includes('list')
-  const hasForm = promptLower.includes('form') || promptLower.includes('input')
-  const hasCounter = promptLower.includes('counter')
-  const hasTabs = promptLower.includes('tab')
-  const hasDrawer = promptLower.includes('drawer') || promptLower.includes('menu')
-
-  // Generate appropriate code based on keywords
-  if (hasForm) {
-    return generateFormCode(prompt)
-  } else if (hasList) {
-    return generateListCode(prompt)
-  } else if (hasTabs) {
-    return generateTabsCode(prompt)
-  } else if (hasDrawer) {
-    return generateDrawerCode(prompt)
-  } else if (hasCounter) {
-    return generateCounterCode(prompt)
-  } else {
-    return generateBasicCode(prompt)
-  }
-}
-
-function generateBasicCode(prompt: string): string {
-  return `import 'package:flutter/material.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: '${prompt}',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-        visualDensity: VisualDensity.adaptivePlatformDensity,
-      ),
-      home: HomePage(),
-    );
-  }
-}
-
-class HomePage extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('${prompt}'),
-        elevation: 0,
-      ),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.flutter_dash,
-              size: 100,
-              color: Colors.blue,
-            ),
-            SizedBox(height: 20),
-            Text(
-              '${prompt}',
-              style: Theme.of(context).textTheme.headline4,
-              textAlign: TextAlign.center,
-            ),
-            SizedBox(height: 20),
-            ElevatedButton(
-              onPressed: () {
-                ScaffoldMessenger.of(context).showSnackBar(
-                  SnackBar(content: Text('Button clicked!')),
-                );
-              },
-              child: Text('Get Started'),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}`
-}
-
-function generateCounterCode(prompt: string): string {
-  return `import 'package:flutter/material.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Counter App',
-      theme: ThemeData(
-        primarySwatch: Colors.purple,
-      ),
-      home: CounterPage(),
-    );
-  }
-}
-
-class CounterPage extends StatefulWidget {
-  @override
-  _CounterPageState createState() => _CounterPageState();
-}
-
-class _CounterPageState extends State<CounterPage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      _counter++;
-    });
-  }
-
-  void _decrementCounter() {
-    setState(() {
-      _counter--;
-    });
-  }
-
-  void _resetCounter() {
-    setState(() {
-      _counter = 0;
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('${prompt}'),
-      ),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Text(
-              'Counter Value:',
-              style: TextStyle(fontSize: 20),
-            ),
-            Text(
-              '$_counter',
-              style: TextStyle(fontSize: 72, fontWeight: FontWeight.bold),
-            ),
-            SizedBox(height: 40),
-            Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                FloatingActionButton(
-                  onPressed: _decrementCounter,
-                  tooltip: 'Decrement',
-                  child: Icon(Icons.remove),
-                ),
-                SizedBox(width: 20),
-                FloatingActionButton(
-                  onPressed: _resetCounter,
-                  tooltip: 'Reset',
-                  child: Icon(Icons.refresh),
-                ),
-                SizedBox(width: 20),
-                FloatingActionButton(
-                  onPressed: _incrementCounter,
-                  tooltip: 'Increment',
-                  child: Icon(Icons.add),
-                ),
-              ],
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}`
-}
-
-function generateListCode(prompt: string): string {
-  return `import 'package:flutter/material.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'List App',
-      theme: ThemeData(
-        primarySwatch: Colors.indigo,
-      ),
-      home: ListPage(),
-    );
-  }
-}
-
-class ListPage extends StatefulWidget {
-  @override
-  _ListPageState createState() => _ListPageState();
-}
-
-class _ListPageState extends State<ListPage> {
-  final List<String> items = List.generate(20, (i) => 'Item \${i + 1}');
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('${prompt}'),
-        actions: [
-          IconButton(
-            icon: Icon(Icons.search),
-            onPressed: () {},
-          ),
-        ],
-      ),
-      body: ListView.builder(
-        itemCount: items.length,
-        itemBuilder: (context, index) {
-          return Card(
-            margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-            child: ListTile(
-              leading: CircleAvatar(
-                child: Text('\${index + 1}'),
-                backgroundColor: Colors.indigo,
-              ),
-              title: Text(items[index]),
-              subtitle: Text('Description for item \${index + 1}'),
-              trailing: Icon(Icons.arrow_forward_ios),
-              onTap: () {
-                ScaffoldMessenger.of(context).showSnackBar(
-                  SnackBar(content: Text('Tapped on \${items[index]}')),
-                );
-              },
-            ),
-          );
-        },
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: () {
-          setState(() {
-            items.add('Item \${items.length + 1}');
-          });
-        },
-        child: Icon(Icons.add),
-      ),
-    );
-  }
-}`
-}
-
-function generateFormCode(prompt: string): string {
-  return `import 'package:flutter/material.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Form App',
-      theme: ThemeData(
-        primarySwatch: Colors.teal,
-      ),
-      home: FormPage(),
-    );
-  }
-}
-
-class FormPage extends StatefulWidget {
-  @override
-  _FormPageState createState() => _FormPageState();
-}
-
-class _FormPageState extends State<FormPage> {
-  final _formKey = GlobalKey<FormState>();
-  final _nameController = TextEditingController();
-  final _emailController = TextEditingController();
-  final _messageController = TextEditingController();
-  bool _agreeToTerms = false;
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('${prompt}'),
-      ),
-      body: SingleChildScrollView(
-        padding: EdgeInsets.all(16),
-        child: Form(
-          key: _formKey,
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              TextFormField(
-                controller: _nameController,
-                decoration: InputDecoration(
-                  labelText: 'Name',
-                  prefixIcon: Icon(Icons.person),
-                  border: OutlineInputBorder(),
-                ),
-                validator: (value) {
-                  if (value == null || value.isEmpty) {
-                    return 'Please enter your name';
-                  }
-                  return null;
-                },
-              ),
-              SizedBox(height: 16),
-              TextFormField(
-                controller: _emailController,
-                decoration: InputDecoration(
-                  labelText: 'Email',
-                  prefixIcon: Icon(Icons.email),
-                  border: OutlineInputBorder(),
-                ),
-                keyboardType: TextInputType.emailAddress,
-                validator: (value) {
-                  if (value == null || value.isEmpty) {
-                    return 'Please enter your email';
-                  }
-                  if (!value.contains('@')) {
-                    return 'Please enter a valid email';
-                  }
-                  return null;
-                },
-              ),
-              SizedBox(height: 16),
-              TextFormField(
-                controller: _messageController,
-                decoration: InputDecoration(
-                  labelText: 'Message',
-                  prefixIcon: Icon(Icons.message),
-                  border: OutlineInputBorder(),
-                ),
-                maxLines: 4,
-                validator: (value) {
-                  if (value == null || value.isEmpty) {
-                    return 'Please enter a message';
-                  }
-                  return null;
-                },
-              ),
-              SizedBox(height: 16),
-              CheckboxListTile(
-                title: Text('I agree to the terms and conditions'),
-                value: _agreeToTerms,
-                onChanged: (value) {
-                  setState(() {
-                    _agreeToTerms = value ?? false;
-                  });
-                },
-              ),
-              SizedBox(height: 24),
-              ElevatedButton(
-                onPressed: () {
-                  if (_formKey.currentState!.validate() && _agreeToTerms) {
-                    ScaffoldMessenger.of(context).showSnackBar(
-                      SnackBar(
-                        content: Text('Form submitted successfully!'),
-                        backgroundColor: Colors.green,
-                      ),
-                    );
-                  } else if (!_agreeToTerms) {
-                    ScaffoldMessenger.of(context).showSnackBar(
-                      SnackBar(
-                        content: Text('Please agree to terms and conditions'),
-                        backgroundColor: Colors.red,
-                      ),
-                    );
-                  }
-                },
-                child: Padding(
-                  padding: EdgeInsets.all(16),
-                  child: Text('Submit'),
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-
-  @override
-  void dispose() {
-    _nameController.dispose();
-    _emailController.dispose();
-    _messageController.dispose();
-    super.dispose();
-  }
-}`
-}
-
-function generateTabsCode(prompt: string): string {
-  return `import 'package:flutter/material.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Tabs App',
-      theme: ThemeData(
-        primarySwatch: Colors.deepPurple,
-      ),
-      home: TabsPage(),
-    );
-  }
-}
-
-class TabsPage extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return DefaultTabController(
-      length: 3,
-      child: Scaffold(
-        appBar: AppBar(
-          title: Text('${prompt}'),
-          bottom: TabBar(
-            tabs: [
-              Tab(icon: Icon(Icons.home), text: 'Home'),
-              Tab(icon: Icon(Icons.star), text: 'Favorites'),
-              Tab(icon: Icon(Icons.settings), text: 'Settings'),
-            ],
-          ),
-        ),
-        body: TabBarView(
-          children: [
-            // Home Tab
-            Center(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(Icons.home, size: 100, color: Colors.deepPurple),
-                  SizedBox(height: 20),
-                  Text('Home Page', style: TextStyle(fontSize: 24)),
-                ],
-              ),
-            ),
-            // Favorites Tab
-            ListView.builder(
-              itemCount: 10,
-              itemBuilder: (context, index) {
-                return ListTile(
-                  leading: Icon(Icons.star, color: Colors.amber),
-                  title: Text('Favorite Item \${index + 1}'),
-                  subtitle: Text('This is your favorite item'),
-                );
-              },
-            ),
-            // Settings Tab
-            ListView(
-              children: [
-                SwitchListTile(
-                  title: Text('Enable Notifications'),
-                  subtitle: Text('Receive push notifications'),
-                  value: true,
-                  onChanged: (value) {},
-                ),
-                ListTile(
-                  leading: Icon(Icons.language),
-                  title: Text('Language'),
-                  subtitle: Text('English'),
-                  trailing: Icon(Icons.arrow_forward_ios),
-                ),
-                ListTile(
-                  leading: Icon(Icons.dark_mode),
-                  title: Text('Dark Mode'),
-                  subtitle: Text('Toggle dark theme'),
-                  trailing: Switch(
-                    value: false,
-                    onChanged: (value) {},
-                  ),
-                ),
-                ListTile(
-                  leading: Icon(Icons.info),
-                  title: Text('About'),
-                  subtitle: Text('Version 1.0.0'),
-                ),
-              ],
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}`
-}
-
-function generateDrawerCode(prompt: string): string {
-  return `import 'package:flutter/material.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Navigation Drawer App',
-      theme: ThemeData(
-        primarySwatch: Colors.orange,
-      ),
-      home: DrawerPage(),
-    );
-  }
-}
-
-class DrawerPage extends StatefulWidget {
-  @override
-  _DrawerPageState createState() => _DrawerPageState();
-}
-
-class _DrawerPageState extends State<DrawerPage> {
-  int _selectedIndex = 0;
-
-  final List<Widget> _pages = [
-    Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Icon(Icons.home, size: 100, color: Colors.orange),
-          Text('Home Page', style: TextStyle(fontSize: 24)),
-        ],
-      ),
-    ),
-    Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Icon(Icons.person, size: 100, color: Colors.orange),
-          Text('Profile Page', style: TextStyle(fontSize: 24)),
-        ],
-      ),
-    ),
-    Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Icon(Icons.settings, size: 100, color: Colors.orange),
-          Text('Settings Page', style: TextStyle(fontSize: 24)),
-        ],
-      ),
-    ),
-  ];
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('${prompt}'),
-      ),
-      drawer: Drawer(
-        child: ListView(
-          padding: EdgeInsets.zero,
-          children: [
-            DrawerHeader(
-              decoration: BoxDecoration(
-                color: Colors.orange,
-              ),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                mainAxisAlignment: MainAxisAlignment.end,
-                children: [
-                  CircleAvatar(
-                    radius: 30,
-                    backgroundColor: Colors.white,
-                    child: Icon(Icons.person, size: 40, color: Colors.orange),
-                  ),
-                  SizedBox(height: 10),
-                  Text(
-                    'User Name',
-                    style: TextStyle(color: Colors.white, fontSize: 18),
-                  ),
-                  Text(
-                    'user@example.com',
-                    style: TextStyle(color: Colors.white70, fontSize: 14),
-                  ),
-                ],
-              ),
-            ),
-            ListTile(
-              leading: Icon(Icons.home),
-              title: Text('Home'),
-              selected: _selectedIndex == 0,
-              onTap: () {
-                setState(() {
-                  _selectedIndex = 0;
-                });
-                Navigator.pop(context);
-              },
-            ),
-            ListTile(
-              leading: Icon(Icons.person),
-              title: Text('Profile'),
-              selected: _selectedIndex == 1,
-              onTap: () {
-                setState(() {
-                  _selectedIndex = 1;
-                });
-                Navigator.pop(context);
-              },
-            ),
-            ListTile(
-              leading: Icon(Icons.settings),
-              title: Text('Settings'),
-              selected: _selectedIndex == 2,
-              onTap: () {
-                setState(() {
-                  _selectedIndex = 2;
-                });
-                Navigator.pop(context);
-              },
-            ),
-            Divider(),
-            ListTile(
-              leading: Icon(Icons.logout),
-              title: Text('Logout'),
-              onTap: () {
-                Navigator.pop(context);
-                ScaffoldMessenger.of(context).showSnackBar(
-                  SnackBar(content: Text('Logged out')),
-                );
-              },
-            ),
-          ],
-        ),
-      ),
-      body: _pages[_selectedIndex],
-    );
-  }
-}`
-}

app/api/claude/generate-latex/route.ts

@@ -1,650 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-
-export async function POST(request: NextRequest) {
-  try {
-    const { prompt, sessionId } = await request.json()
-
-    if (!prompt) {
-      return NextResponse.json(
-        { error: 'Prompt is required' },
-        { status: 400 }
-      )
-    }
-
-    const apiKey = process.env.ANTHROPIC_API_KEY
-
-    if (apiKey) {
-      try {
-        const response = await fetch('https://api.anthropic.com/v1/messages', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'x-api-key': apiKey,
-            'anthropic-version': '2023-06-01'
-          },
-          body: JSON.stringify({
-            model: 'claude-3-haiku-20240307',
-            max_tokens: 2048,
-            messages: [
-              {
-                role: 'user',
-                content: `Generate a complete LaTeX document for the following request.
-                Return ONLY the LaTeX code without any explanations or markdown formatting.
-                Include all necessary packages and document structure.
-
-                Request: ${prompt}`
-              }
-            ],
-            system: `You are a LaTeX document generator. Generate clean, complete LaTeX documents.
-            - Always include \\documentclass and necessary packages
-            - Use appropriate document structure (title, sections, etc.)
-            - Include mathematical packages when needed (amsmath, amssymb, etc.)
-            - Return only pure LaTeX code, no explanations or markdown
-            - Ensure the document compiles without errors`
-          })
-        })
-
-        if (response.ok) {
-          const data = await response.json()
-          const latex = data.content[0].text
-            .replace(/```latex\n?/g, '')
-            .replace(/```tex\n?/g, '')
-            .replace(/```\n?/g, '')
-            .trim()
-
-          return NextResponse.json({ latex, sessionId })
-        }
-      } catch (error) {
-        console.error('Claude API error:', error)
-      }
-    }
-
-    // Fallback: Generate appropriate LaTeX based on keywords
-    const latex = generateLaTeXFromPrompt(prompt)
-    return NextResponse.json({ latex, sessionId })
-
-  } catch (error) {
-    console.error('Error generating LaTeX:', error)
-    return NextResponse.json(
-      { error: 'Failed to generate LaTeX' },
-      { status: 500 }
-    )
-  }
-}
-
-function generateLaTeXFromPrompt(prompt: string): string {
-  const promptLower = prompt.toLowerCase()
-
-  if (promptLower.includes('resume') || promptLower.includes('cv')) {
-    return generateResumeLaTeX()
-  } else if (promptLower.includes('calculus') || promptLower.includes('derivative') || promptLower.includes('integral')) {
-    return generateCalculusLaTeX()
-  } else if (promptLower.includes('physics')) {
-    return generatePhysicsLaTeX()
-  } else if (promptLower.includes('chemistry')) {
-    return generateChemistryLaTeX()
-  } else if (promptLower.includes('thesis') || promptLower.includes('paper')) {
-    return generateThesisLaTeX(prompt)
-  } else if (promptLower.includes('presentation') || promptLower.includes('beamer')) {
-    return generatePresentationLaTeX(prompt)
-  } else {
-    return generateGeneralLaTeX(prompt)
-  }
-}
-
-function generateGeneralLaTeX(prompt: string): string {
-  return `\\documentclass[12pt,a4paper]{article}
-\\usepackage{amsmath,amssymb,amsthm}
-\\usepackage{graphicx}
-\\usepackage{hyperref}
-\\usepackage{enumitem}
-
-\\title{${prompt}}
-\\author{Generated Document}
-\\date{\\today}
-
-\\begin{document}
-
-\\maketitle
-
-\\begin{abstract}
-This document was generated based on the request: "${prompt}".
-\\end{abstract}
-
-\\section{Introduction}
-This document provides comprehensive information about ${prompt}.
-
-\\section{Main Content}
-\\subsection{Overview}
-The topic "${prompt}" encompasses various aspects that we'll explore in this document.
-
-\\subsection{Key Points}
-\\begin{itemize}
-  \\item First important point about ${prompt}
-  \\item Second key aspect to consider
-  \\item Additional relevant information
-\\end{itemize}
-
-\\section{Mathematical Formulation}
-When discussing ${prompt}, we can consider:
-\\[
-f(x) = \\sum_{n=0}^{\\infty} \\frac{x^n}{n!}
-\\]
-
-\\section{Conclusion}
-This document has provided an overview of ${prompt}, covering its main aspects and implications.
-
-\\bibliographystyle{plain}
-\\end{document}`
-}
-
-function generateResumeLaTeX(): string {
-  return `\\documentclass[11pt,a4paper]{article}
-\\usepackage[margin=1in]{geometry}
-\\usepackage{hyperref}
-\\usepackage{enumitem}
-
-\\pagestyle{empty}
-
-\\begin{document}
-
-\\begin{center}
-  {\\LARGE \\textbf{Your Name}}\\\\[2mm]
-  your.email@example.com | (123) 456-7890 | LinkedIn: linkedin.com/in/yourname
-\\end{center}
-
-\\section*{Professional Summary}
-Experienced professional with expertise in [field]. Proven track record of [achievements].
-
-\\section*{Education}
-\\textbf{University Name} \\hfill 2018 - 2022\\\\
-Bachelor of Science in Computer Science\\\\
-GPA: 3.8/4.0
-
-\\section*{Experience}
-\\textbf{Software Engineer} \\hfill June 2022 - Present\\\\
-\\textit{Company Name, Location}
-\\begin{itemize}[leftmargin=*, itemsep=0pt]
-  \\item Developed and maintained web applications using modern frameworks
-  \\item Collaborated with cross-functional teams to deliver projects on time
-  \\item Improved system performance by 40\\% through optimization
-\\end{itemize}
-
-\\section*{Skills}
-\\textbf{Programming:} Python, JavaScript, Java, C++\\\\
-\\textbf{Technologies:} React, Node.js, Docker, AWS\\\\
-\\textbf{Tools:} Git, VS Code, JIRA, Jenkins
-
-\\section*{Projects}
-\\textbf{Project Name} | \\textit{Technologies Used}\\\\
-Brief description of the project and your role in it.
-
-\\end{document}`
-}
-
-function generateCalculusLaTeX(): string {
-  return `\\documentclass[12pt]{article}
-\\usepackage{amsmath,amssymb,amsthm}
-\\usepackage{tikz}
-\\usepackage{pgfplots}
-\\pgfplotsset{compat=1.17}
-
-\\theoremstyle{definition}
-\\newtheorem{definition}{Definition}
-\\newtheorem{theorem}{Theorem}
-\\newtheorem{example}{Example}
-
-\\title{Calculus Reference Sheet}
-\\author{Mathematics Department}
-\\date{\\today}
-
-\\begin{document}
-
-\\maketitle
-
-\\section{Derivatives}
-
-\\subsection{Basic Rules}
-\\begin{align}
-\\frac{d}{dx}[c] &= 0\\\\
-\\frac{d}{dx}[x^n] &= nx^{n-1}\\\\
-\\frac{d}{dx}[e^x] &= e^x\\\\
-\\frac{d}{dx}[\\ln x] &= \\frac{1}{x}\\\\
-\\frac{d}{dx}[\\sin x] &= \\cos x\\\\
-\\frac{d}{dx}[\\cos x] &= -\\sin x
-\\end{align}
-
-\\subsection{Chain Rule}
-If $y = f(g(x))$, then:
-\\[
-\\frac{dy}{dx} = f'(g(x)) \\cdot g'(x)
-\\]
-
-\\subsection{Product Rule}
-\\[
-\\frac{d}{dx}[f(x)g(x)] = f'(x)g(x) + f(x)g'(x)
-\\]
-
-\\subsection{Quotient Rule}
-\\[
-\\frac{d}{dx}\\left[\\frac{f(x)}{g(x)}\\right] = \\frac{f'(x)g(x) - f(x)g'(x)}{[g(x)]^2}
-\\]
-
-\\section{Integrals}
-
-\\subsection{Basic Integrals}
-\\begin{align}
-\\int x^n\\,dx &= \\frac{x^{n+1}}{n+1} + C, \\quad n \\neq -1\\\\
-\\int \\frac{1}{x}\\,dx &= \\ln|x| + C\\\\
-\\int e^x\\,dx &= e^x + C\\\\
-\\int \\sin x\\,dx &= -\\cos x + C\\\\
-\\int \\cos x\\,dx &= \\sin x + C
-\\end{align}
-
-\\subsection{Integration by Parts}
-\\[
-\\int u\\,dv = uv - \\int v\\,du
-\\]
-
-\\subsection{Substitution Method}
-If $u = g(x)$, then $du = g'(x)dx$:
-\\[
-\\int f(g(x))g'(x)\\,dx = \\int f(u)\\,du
-\\]
-
-\\section{Series}
-
-\\subsection{Taylor Series}
-\\[
-f(x) = \\sum_{n=0}^{\\infty} \\frac{f^{(n)}(a)}{n!}(x-a)^n
-\\]
-
-\\subsection{Common Series}
-\\begin{align}
-e^x &= \\sum_{n=0}^{\\infty} \\frac{x^n}{n!}\\\\
-\\sin x &= \\sum_{n=0}^{\\infty} \\frac{(-1)^n x^{2n+1}}{(2n+1)!}\\\\
-\\cos x &= \\sum_{n=0}^{\\infty} \\frac{(-1)^n x^{2n}}{(2n)!}
-\\end{align}
-
-\\end{document}`
-}
-
-function generatePhysicsLaTeX(): string {
-  return `\\documentclass[12pt]{article}
-\\usepackage{amsmath,amssymb}
-\\usepackage{physics}
-\\usepackage{siunitx}
-\\usepackage{tikz}
-
-\\title{Physics Formula Sheet}
-\\author{Physics Department}
-\\date{\\today}
-
-\\begin{document}
-
-\\maketitle
-
-\\section{Classical Mechanics}
-
-\\subsection{Newton's Laws}
-\\begin{enumerate}
-  \\item First Law: $\\vec{F}_{net} = 0 \\implies \\vec{v} = \\text{constant}$
-  \\item Second Law: $\\vec{F} = m\\vec{a}$
-  \\item Third Law: $\\vec{F}_{12} = -\\vec{F}_{21}$
-\\end{enumerate}
-
-\\subsection{Kinematics}
-\\begin{align}
-v &= v_0 + at\\\\
-x &= x_0 + v_0t + \\frac{1}{2}at^2\\\\
-v^2 &= v_0^2 + 2a(x - x_0)
-\\end{align}
-
-\\subsection{Energy}
-\\begin{itemize}
-  \\item Kinetic Energy: $KE = \\frac{1}{2}mv^2$
-  \\item Potential Energy: $PE = mgh$
-  \\item Work: $W = \\vec{F} \\cdot \\vec{d} = Fd\\cos\\theta$
-  \\item Power: $P = \\frac{dW}{dt} = \\vec{F} \\cdot \\vec{v}$
-\\end{itemize}
-
-\\section{Electromagnetism}
-
-\\subsection{Maxwell's Equations}
-\\begin{align}
-\\nabla \\cdot \\vec{E} &= \\frac{\\rho}{\\epsilon_0}\\\\
-\\nabla \\cdot \\vec{B} &= 0\\\\
-\\nabla \\times \\vec{E} &= -\\frac{\\partial \\vec{B}}{\\partial t}\\\\
-\\nabla \\times \\vec{B} &= \\mu_0\\vec{J} + \\mu_0\\epsilon_0\\frac{\\partial \\vec{E}}{\\partial t}
-\\end{align}
-
-\\subsection{Electric Fields and Forces}
-\\begin{itemize}
-  \\item Coulomb's Law: $F = k\\frac{q_1q_2}{r^2}$
-  \\item Electric Field: $\\vec{E} = \\frac{\\vec{F}}{q}$
-  \\item Electric Potential: $V = \\frac{U}{q}$
-\\end{itemize}
-
-\\section{Quantum Mechanics}
-
-\\subsection{Schrödinger Equation}
-Time-dependent:
-\\[
-i\\hbar\\frac{\\partial\\Psi}{\\partial t} = \\hat{H}\\Psi
-\\]
-
-Time-independent:
-\\[
-\\hat{H}\\psi = E\\psi
-\\]
-
-\\subsection{Uncertainty Principle}
-\\[
-\\Delta x \\cdot \\Delta p \\geq \\frac{\\hbar}{2}
-\\]
-
-\\end{document}`
-}
-
-function generateChemistryLaTeX(): string {
-  return `\\documentclass[12pt]{article}
-\\usepackage{amsmath,amssymb}
-\\usepackage{chemformula}
-\\usepackage{chemfig}
-\\usepackage{siunitx}
-
-\\title{Chemistry Reference Guide}
-\\author{Chemistry Department}
-\\date{\\today}
-
-\\begin{document}
-
-\\maketitle
-
-\\section{Chemical Equations}
-
-\\subsection{Balancing Equations}
-Example reaction:
-\\[
-\\ch{2 H2 + O2 -> 2 H2O}
-\\]
-
-\\subsection{Combustion}
-\\[
-\\ch{CH4 + 2 O2 -> CO2 + 2 H2O}
-\\]
-
-\\section{Stoichiometry}
-
-\\subsection{Molar Relationships}
-\\begin{itemize}
-  \\item Molar mass: Mass of one mole of substance
-  \\item Avogadro's number: $N_A = 6.022 \\times 10^{23}$ mol$^{-1}$
-  \\item Moles: $n = \\frac{m}{M}$ where $m$ is mass and $M$ is molar mass
-\\end{itemize}
-
-\\section{Thermodynamics}
-
-\\subsection{First Law}
-\\[
-\\Delta U = q + w
-\\]
-
-\\subsection{Enthalpy}
-\\[
-\\Delta H = \\Delta U + P\\Delta V
-\\]
-
-\\subsection{Gibbs Free Energy}
-\\[
-\\Delta G = \\Delta H - T\\Delta S
-\\]
-\\begin{itemize}
-  \\item $\\Delta G < 0$: Spontaneous reaction
-  \\item $\\Delta G = 0$: Equilibrium
-  \\item $\\Delta G > 0$: Non-spontaneous
-\\end{itemize}
-
-\\section{Kinetics}
-
-\\subsection{Rate Laws}
-First order: $\\text{Rate} = k[A]$
-
-Second order: $\\text{Rate} = k[A]^2$ or $\\text{Rate} = k[A][B]$
-
-\\subsection{Arrhenius Equation}
-\\[
-k = Ae^{-E_a/RT}
-\\]
-
-\\section{Equilibrium}
-
-\\subsection{Equilibrium Constant}
-For reaction: \\ch{aA + bB <=> cC + dD}
-\\[
-K_c = \\frac{[C]^c[D]^d}{[A]^a[B]^b}
-\\]
-
-\\subsection{Le Chatelier's Principle}
-System at equilibrium will shift to counteract any imposed change.
-
-\\end{document}`
-}
-
-function generateThesisLaTeX(topic: string): string {
-  return `\\documentclass[12pt,a4paper]{report}
-\\usepackage{amsmath,amssymb,amsthm}
-\\usepackage{graphicx}
-\\usepackage{hyperref}
-\\usepackage{cite}
-\\usepackage{setspace}
-\\usepackage[margin=1in]{geometry}
-
-\\doublespacing
-
-\\title{${topic}}
-\\author{Your Name}
-\\date{\\today}
-
-\\begin{document}
-
-\\maketitle
-
-\\begin{abstract}
-This thesis investigates ${topic}. We present novel findings that contribute to the understanding of this field. Our research demonstrates significant improvements over existing methods.
-
-\\textbf{Keywords:} ${topic}, research, analysis, methodology
-\\end{abstract}
-
-\\tableofcontents
-\\listoffigures
-\\listoftables
-
-\\chapter{Introduction}
-
-\\section{Background}
-The study of ${topic} has gained significant attention in recent years. This research aims to address key challenges in the field.
-
-\\section{Research Questions}
-\\begin{enumerate}
-  \\item What are the fundamental principles underlying ${topic}?
-  \\item How can we improve current approaches?
-  \\item What are the practical applications?
-\\end{enumerate}
-
-\\section{Thesis Structure}
-This thesis is organized as follows:
-\\begin{itemize}
-  \\item Chapter 2: Literature Review
-  \\item Chapter 3: Methodology
-  \\item Chapter 4: Results and Analysis
-  \\item Chapter 5: Discussion
-  \\item Chapter 6: Conclusion
-\\end{itemize}
-
-\\chapter{Literature Review}
-
-\\section{Historical Context}
-Previous work in ${topic} has established several important foundations...
-
-\\section{Current State of Research}
-Recent developments have shown that...
-
-\\chapter{Methodology}
-
-\\section{Research Design}
-Our approach involves...
-
-\\section{Data Collection}
-Data was collected using...
-
-\\chapter{Results and Analysis}
-
-\\section{Findings}
-Our analysis reveals...
-
-\\section{Statistical Analysis}
-The results show statistical significance with $p < 0.05$.
-
-\\chapter{Discussion}
-
-\\section{Interpretation of Results}
-The findings suggest...
-
-\\section{Limitations}
-This study has several limitations...
-
-\\chapter{Conclusion}
-
-\\section{Summary}
-This thesis has presented...
-
-\\section{Future Work}
-Future research should explore...
-
-\\bibliographystyle{plain}
-\\bibliography{references}
-
-\\appendix
-\\chapter{Additional Data}
-
-\\end{document}`
-}
-
-function generatePresentationLaTeX(topic: string): string {
-  return `\\documentclass{beamer}
-\\usetheme{Madrid}
-\\usecolortheme{seahorse}
-\\usepackage{amsmath,amssymb}
-\\usepackage{graphicx}
-\\usepackage{tikz}
-
-\\title{${topic}}
-\\author{Presenter Name}
-\\institute{Your Institution}
-\\date{\\today}
-
-\\begin{document}
-
-\\frame{\\titlepage}
-
-\\begin{frame}
-\\frametitle{Outline}
-\\tableofcontents
-\\end{frame}
-
-\\section{Introduction}
-
-\\begin{frame}
-\\frametitle{Introduction}
-\\begin{itemize}
-  \\item Overview of ${topic}
-  \\item Why it matters
-  \\item Our approach
-\\end{itemize}
-\\end{frame}
-
-\\section{Background}
-
-\\begin{frame}
-\\frametitle{Background}
-\\begin{columns}
-\\column{0.5\\textwidth}
-Key concepts:
-\\begin{itemize}
-  \\item Concept 1
-  \\item Concept 2
-  \\item Concept 3
-\\end{itemize}
-
-\\column{0.5\\textwidth}
-\\begin{block}{Definition}
-${topic} is defined as...
-\\end{block}
-\\end{columns}
-\\end{frame}
-
-\\section{Methodology}
-
-\\begin{frame}
-\\frametitle{Our Approach}
-\\begin{enumerate}
-  \\item<1-> Step 1: Initial analysis
-  \\item<2-> Step 2: Data collection
-  \\item<3-> Step 3: Processing
-  \\item<4-> Step 4: Evaluation
-\\end{enumerate}
-\\end{frame}
-
-\\section{Results}
-
-\\begin{frame}
-\\frametitle{Key Findings}
-\\begin{theorem}
-Our main result shows that...
-\\end{theorem}
-
-\\begin{proof}
-The proof follows from...
-\\end{proof}
-\\end{frame}
-
-\\begin{frame}
-\\frametitle{Performance Metrics}
-\\begin{center}
-\\begin{tikzpicture}
-\\begin{axis}[
-  ybar,
-  ylabel={Performance},
-  xlabel={Method},
-  symbolic x coords={Baseline, Our Method, State-of-Art},
-  xtick=data
-]
-\\addplot coordinates {
-  (Baseline, 65)
-  (Our Method, 85)
-  (State-of-Art, 78)
-};
-\\end{axis}
-\\end{tikzpicture}
-\\end{center}
-\\end{frame}
-
-\\section{Conclusion}
-
-\\begin{frame}
-\\frametitle{Conclusion}
-\\begin{itemize}
-  \\item Successfully demonstrated ${topic}
-  \\item Achieved 20\\% improvement
-  \\item Future work includes...
-\\end{itemize}
-
-\\vspace{1cm}
-\\begin{center}
-\\Large{Thank you! Questions?}
-\\end{center}
-\\end{frame}
-
-\\end{document}`
-}

app/components/Desktop.tsx

@@ -34,7 +34,10 @@ import {
   Key,
   Brain,
   Code,
-  FileText
+  FileText,
+  DeviceMobile,
+  Lightning,
+  Function
 } from '@phosphor-icons/react'
 
 export function Desktop() {
@@ -437,8 +440,12 @@ export function Desktop() {
       id: 'flutter-runner',
       label: 'Flutter Runner',
       icon: (
-        <div className="bg-gradient-to-br from-cyan-400 to-blue-500 w-full h-full rounded-xl flex items-center justify-center">
-          <Code size={20} weight="bold" className="text-white" />
+        <div className="bg-gradient-to-b from-[#54C5F8] to-[#29B6F6] w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+          <DeviceMobile size={20} weight="fill" className="text-white relative z-10 drop-shadow-md" />
+          <div className="absolute top-1 right-1">
+            <Lightning size={8} weight="fill" className="text-yellow-300 drop-shadow-md" />
+          </div>
         </div>
       ),
       onRestore: () => setFlutterRunnerMinimized(false)
@@ -450,8 +457,12 @@ export function Desktop() {
       id: 'research',
       label: 'Research',
       icon: (
-        <div className="bg-gradient-to-br from-purple-400 to-pink-500 w-full h-full rounded-xl flex items-center justify-center">
-          <Brain size={20} weight="bold" className="text-white" />
+        <div className="bg-gradient-to-b from-purple-500 to-indigo-600 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+          <Globe size={20} weight="duotone" className="text-white relative z-10 drop-shadow-md" />
+          <div className="absolute bottom-1 right-1 bg-white/20 p-0.5 rounded-full backdrop-blur-md shadow-sm">
+            <Sparkle size={6} weight="fill" className="text-yellow-300" />
+          </div>
         </div>
       ),
       onRestore: () => setResearchBrowserMinimized(false)
@@ -463,8 +474,12 @@ export function Desktop() {
       id: 'flutter-editor',
       label: 'Flutter IDE',
       icon: (
-        <div className="bg-gradient-to-br from-blue-500 to-cyan-500 w-full h-full rounded-xl flex items-center justify-center">
-          <Code size={20} weight="fill" className="text-white" />
+        <div className="bg-gradient-to-b from-[#54C5F8] to-[#29B6F6] w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+          <DeviceMobile size={20} weight="fill" className="text-white relative z-10 drop-shadow-md" />
+          <div className="absolute top-1 right-1">
+            <Lightning size={8} weight="fill" className="text-yellow-300 drop-shadow-md" />
+          </div>
         </div>
       ),
       onRestore: () => setFlutterCodeEditorMinimized(false)
@@ -476,8 +491,12 @@ export function Desktop() {
       id: 'latex-editor',
       label: 'LaTeX Studio',
       icon: (
-        <div className="bg-black w-full h-full rounded-xl flex items-center justify-center">
-          <FileText size={20} weight="bold" className="text-white" />
+        <div className="bg-gradient-to-b from-slate-700 to-slate-900 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/10 to-transparent opacity-30" />
+          <div className="relative z-10 flex flex-col items-center justify-center">
+            <Function size={18} weight="bold" className="text-green-400 drop-shadow-md" />
+            <span className="text-[5px] font-black text-gray-300 tracking-widest mt-0.5">TEX</span>
+          </div>
         </div>
       ),
       onRestore: () => setLaTeXEditorMinimized(false)
@@ -600,7 +619,7 @@ export function Desktop() {
             <DraggableDesktopIcon
               id="research"
               label="Research"
-              iconType="brain"
+              iconType="research"
               initialPosition={{ x: 0, y: 0 }}
               onClick={() => { }}
               onDoubleClick={openResearchBrowser}
@@ -610,7 +629,7 @@ export function Desktop() {
             <DraggableDesktopIcon
               id="flutter-editor"
               label="Flutter IDE"
-              iconType="code"
+              iconType="flutter"
               initialPosition={{ x: 0, y: 0 }}
               onClick={() => { }}
               onDoubleClick={openFlutterCodeEditor}
@@ -620,7 +639,7 @@ export function Desktop() {
             <DraggableDesktopIcon
               id="latex-editor"
               label="LaTeX Studio"
-              iconType="document"
+              iconType="latex"
               initialPosition={{ x: 0, y: 0 }}
               onClick={() => { }}
               onDoubleClick={openLaTeXEditor}

app/components/Dock.tsx

@@ -94,8 +94,9 @@ export function Dock({
     },
     {
       icon: (
-        <div className="bg-white w-full h-full rounded-xl flex items-center justify-center border border-gray-200">
-          <Sparkle size={24} weight="fill" className="text-blue-500 md:scale-110" />
+        <div className="bg-gradient-to-b from-white to-blue-50 w-full h-full rounded-xl flex items-center justify-center shadow-lg border-[0.5px] border-white/50 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/40 to-transparent" />
+          <Sparkle size={24} weight="fill" className="text-blue-500 md:scale-110 drop-shadow-sm" />
         </div>
       ),
       label: 'Gemini',

app/components/DraggableDesktopIcon.tsx

@@ -68,14 +68,39 @@ export function DraggableDesktopIcon({
         )
       case 'research':
         return (
-          <div className="bg-gradient-to-br from-purple-400 to-pink-500 w-full h-full rounded-xl flex items-center justify-center shadow-lg">
-            <Flask size={32} weight="fill" className="text-white" />
+          <div className="bg-gradient-to-b from-purple-500 to-indigo-600 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden group-hover:shadow-2xl transition-all duration-300">
+            <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+            <Globe size={36} weight="duotone" className="text-white relative z-10 drop-shadow-md" />
+            <div className="absolute bottom-1.5 right-1.5 bg-white/20 p-1 rounded-full backdrop-blur-md shadow-sm">
+              <Sparkle size={10} weight="fill" className="text-yellow-300" />
+            </div>
+          </div>
+        )
+      case 'flutter':
+        return (
+          <div className="bg-gradient-to-b from-[#54C5F8] to-[#29B6F6] w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden group-hover:shadow-2xl transition-all duration-300">
+            <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+            <DeviceMobile size={36} weight="fill" className="text-white relative z-10 drop-shadow-md" />
+            <div className="absolute top-1.5 right-1.5">
+              <Lightning size={12} weight="fill" className="text-yellow-300 drop-shadow-md" />
+            </div>
+          </div>
+        )
+      case 'latex':
+        return (
+          <div className="bg-gradient-to-b from-slate-700 to-slate-900 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden group-hover:shadow-2xl transition-all duration-300">
+            <div className="absolute inset-0 bg-gradient-to-b from-white/10 to-transparent opacity-30" />
+            <div className="relative z-10 flex flex-col items-center justify-center">
+              <Function size={32} weight="bold" className="text-green-400 drop-shadow-md" />
+              <span className="text-[8px] font-black text-gray-300 tracking-widest mt-0.5">TEX</span>
+            </div>
           </div>
         )
       case 'gemini':
         return (
-          <div className="bg-white w-full h-full rounded-xl flex items-center justify-center border border-gray-200">
-            <Sparkle size={32} weight="fill" className="text-blue-500" />
+          <div className="bg-gradient-to-b from-white to-blue-50 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/50 relative overflow-hidden group-hover:shadow-2xl transition-all duration-300">
+            <div className="absolute inset-0 bg-gradient-to-b from-white/40 to-transparent" />
+            <Sparkle size={36} weight="fill" className="text-blue-500 relative z-10 drop-shadow-sm" />
           </div>
         )
       case 'harddrive':
@@ -103,12 +128,6 @@ export function DraggableDesktopIcon({
             <Key size={32} weight="bold" className="text-white" />
           </div>
         )
-      case 'flutter':
-        return (
-          <div className="bg-gradient-to-br from-cyan-400 to-blue-500 w-full h-full rounded-xl flex items-center justify-center shadow-inner border border-cyan-300/30">
-            <Code size={32} weight="bold" className="text-white" />
-          </div>
-        )
       default:
         return (
           <div className="bg-gray-400 w-full h-full rounded-xl flex items-center justify-center">

app/components/FileManager.tsx

@@ -31,7 +31,8 @@ import {
   Function,
   Calendar as CalendarIcon,
   Clock as ClockIcon,
-  Sparkle
+  Sparkle,
+  Lightning
 } from '@phosphor-icons/react'
 import { motion } from 'framer-motion'
 import { FilePreview } from './FilePreview'
@@ -326,13 +327,50 @@ export function FileManager({ currentPath, onNavigate, onClose, onOpenFlutterApp
   }
 
   const applications = [
-    { id: 'files', name: 'Finder', icon: <FolderIcon size={48} weight="fill" className="text-blue-500" /> },
-    { id: 'calendar', name: 'Calendar', icon: <CalendarIcon size={48} weight="regular" className="text-red-500" /> },
-    { id: 'clock', name: 'Clock', icon: <ClockIcon size={48} weight="regular" className="text-black" /> },
-    { id: 'gemini', name: 'Gemini', icon: <Sparkle size={48} weight="fill" className="text-blue-500" /> },
-    { id: 'research', name: 'Research', icon: <Flask size={48} weight="fill" className="text-purple-500" /> },
-    { id: 'flutter-editor', name: 'Flutter IDE', icon: <DeviceMobile size={48} weight="fill" className="text-cyan-500" /> },
-    { id: 'latex-editor', name: 'LaTeX Studio', icon: <Function size={48} weight="bold" className="text-black" /> },
+    { id: 'files', name: 'Finder', icon: <div className="bg-gradient-to-br from-blue-400 to-cyan-200 w-full h-full rounded-xl flex items-center justify-center border border-white/30"><FolderIcon size={32} weight="regular" className="text-blue-900" /></div> },
+    { id: 'calendar', name: 'Calendar', icon: <div className="w-full h-full"><CalendarIcon size={48} weight="regular" className="text-red-500" /></div> },
+    { id: 'clock', name: 'Clock', icon: <div className="w-full h-full"><ClockIcon size={48} weight="regular" className="text-black" /></div> },
+    {
+      id: 'gemini', name: 'Gemini', icon: (
+        <div className="bg-gradient-to-b from-white to-blue-50 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/50 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/40 to-transparent" />
+          <Sparkle size={32} weight="fill" className="text-blue-500 drop-shadow-sm" />
+        </div>
+      )
+    },
+    {
+      id: 'research', name: 'Research', icon: (
+        <div className="bg-gradient-to-b from-purple-500 to-indigo-600 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+          <Globe size={32} weight="duotone" className="text-white relative z-10 drop-shadow-md" />
+          <div className="absolute bottom-1.5 right-1.5 bg-white/20 p-1 rounded-full backdrop-blur-md shadow-sm">
+            <Sparkle size={10} weight="fill" className="text-yellow-300" />
+          </div>
+        </div>
+      )
+    },
+    {
+      id: 'flutter-editor', name: 'Flutter IDE', icon: (
+        <div className="bg-gradient-to-b from-[#54C5F8] to-[#29B6F6] w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent opacity-50" />
+          <DeviceMobile size={32} weight="fill" className="text-white relative z-10 drop-shadow-md" />
+          <div className="absolute top-1.5 right-1.5">
+            <Lightning size={12} weight="fill" className="text-yellow-300 drop-shadow-md" />
+          </div>
+        </div>
+      )
+    },
+    {
+      id: 'latex-editor', name: 'LaTeX Studio', icon: (
+        <div className="bg-gradient-to-b from-slate-700 to-slate-900 w-full h-full rounded-[22%] flex items-center justify-center shadow-lg border-[0.5px] border-white/20 relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-b from-white/10 to-transparent opacity-30" />
+          <div className="relative z-10 flex flex-col items-center justify-center">
+            <Function size={32} weight="bold" className="text-green-400 drop-shadow-md" />
+            <span className="text-[8px] font-black text-gray-300 tracking-widest mt-0.5">TEX</span>
+          </div>
+        </div>
+      )
+    },
   ]
 
   return (

app/components/FlutterCodeEditor.tsx

@@ -129,23 +129,10 @@ class _MyHomePageState extends State<MyHomePage> {
 
     setIsGenerating(true)
     try {
-      // Call your Claude API endpoint here
-      const response = await fetch('/api/claude/generate-flutter', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ prompt: claudePrompt })
-      })
-
-      if (response.ok) {
-        const data = await response.json()
-        setGeneratedCode(data.code || '')
-        // Optionally auto-apply generated code
-        // setCode(data.code || code)
-      }
-    } catch (error) {
-      console.error('Failed to generate code:', error)
-      // For demo purposes, generate mock code
-      const mockGenerated = `// Generated code for: ${claudePrompt}
+      // Note: Using MCP for direct Claude communication
+      // Generate a simple template based on prompt
+      const mockGenerated = `// Template for: ${claudePrompt}
+// Use MCP to communicate directly with Claude Desktop for custom generation
 import 'package:flutter/material.dart';
 
 void main() => runApp(MyApp());
@@ -155,10 +142,31 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Generated App',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+        useMaterial3: true,
+      ),
       home: Scaffold(
         appBar: AppBar(title: Text('${claudePrompt}')),
         body: Center(
-          child: Text('Generated Flutter app for: ${claudePrompt}'),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(Icons.flutter_dash, size: 80, color: Colors.blue),
+              SizedBox(height: 20),
+              Text(
+                '${claudePrompt}',
+                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+                textAlign: TextAlign.center,
+              ),
+              SizedBox(height: 10),
+              Text(
+                'Use MCP in Claude Desktop for custom code generation',
+                style: TextStyle(fontSize: 14, color: Colors.grey),
+                textAlign: TextAlign.center,
+              ),
+            ],
+          ),
         ),
       ),
     );

app/components/FlutterRunner.tsx

@@ -219,7 +219,7 @@ class _MyHomePageState extends State<MyHomePage> {
           </div>
         )}
 
-        {/* Main Content */}
+        {/* Main Content - DartPad Embed */}
         <div className="flex-1 flex flex-col min-w-0">
           {/* Toolbar */}
           <div className="h-10 bg-[#2d2d2d] border-b border-[#1e1e1e] flex items-center justify-between px-4">
@@ -245,13 +245,6 @@ class _MyHomePageState extends State<MyHomePage> {
             </div>
 
             <div className="flex items-center gap-2">
-              <button
-                onClick={handleRun}
-                className="flex items-center gap-2 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded text-xs font-medium transition-colors"
-              >
-                <Play size={14} weight="fill" />
-                Run
-              </button>
               <button
                 onClick={handleDownload}
                 className="p-1.5 text-gray-400 hover:text-white hover:bg-[#3e3e42] rounded transition-colors"
@@ -262,63 +255,15 @@ class _MyHomePageState extends State<MyHomePage> {
             </div>
           </div>
 
-          {/* Split View: Editor & Preview */}
-          <div className="flex-1 flex overflow-hidden">
-            {/* Editor */}
-            <div className="flex-1 border-r border-[#333]">
-              <Editor
-                height="100%"
-                defaultLanguage="dart"
-                theme="vs-dark"
-                value={code}
-                onChange={(value) => setCode(value || '')}
-                options={{
-                  minimap: { enabled: false },
-                  fontSize: 14,
-                  fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-                  lineNumbers: 'on',
-                  scrollBeyondLastLine: false,
-                  automaticLayout: true,
-                  padding: { top: 16, bottom: 16 },
-                  renderLineHighlight: 'all',
-                  smoothScrolling: true,
-                  cursorBlinking: 'smooth',
-                  cursorSmoothCaretAnimation: 'on'
-                }}
-              />
-            </div>
-
-            {/* Preview */}
-            <div className="w-[400px] bg-[#1e1e1e] flex flex-col border-l border-[#333]">
-              <div className="h-8 bg-[#252526] border-b border-[#333] flex items-center justify-between px-3">
-                <span className="text-xs font-bold text-gray-500 uppercase">Preview</span>
-                <div className="flex gap-1">
-                  <div className="w-2 h-2 rounded-full bg-red-500/50" />
-                  <div className="w-2 h-2 rounded-full bg-yellow-500/50" />
-                  <div className="w-2 h-2 rounded-full bg-green-500/50" />
-                </div>
-              </div>
-              <div className="flex-1 bg-white relative overflow-hidden">
-                <iframe
-                  key={key}
-                  src={`https://dartpad.dev/embed-flutter.html?theme=light&run=true&split=0&code=${encodeURIComponent(code)}`}
-                  className="w-full h-full border-0"
-                  sandbox="allow-scripts allow-same-origin allow-popups"
-                  title="Flutter Preview"
-                />
-                {!isRunning && (
-                  <div className="absolute inset-0 bg-black/5 flex items-center justify-center backdrop-blur-[1px]">
-                    <button
-                      onClick={handleRun}
-                      className="px-4 py-2 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition-colors flex items-center gap-2 text-sm font-medium"
-                    >
-                      <Play size={16} weight="fill" />
-                      Run App
-                    </button>
-                  </div>
-                )}
-              </div>
-            </div>
+          {/* DartPad Embed */}
+          <div className="flex-1 bg-[#1e1e1e] relative overflow-hidden">
+            <iframe
+              key={key}
+              src={`https://dartpad.dev/embed-flutter.html?theme=dark&run=true&split=50&code=${encodeURIComponent(code)}`}
+              className="w-full h-full border-0"
+              sandbox="allow-scripts allow-same-origin allow-popups"
+              title="Flutter Preview"
+            />
           </div>
         </div>
       </div>

app/components/LaTeXEditor.tsx

@@ -1,36 +1,44 @@
 'use client'
 
 import React, { useState, useEffect, useRef } from 'react'
-import Window from './Window'
-import { MathOperations, FloppyDisk, Download, Sparkle, Copy, Eye, FileText, Trash, FolderOpen } from '@phosphor-icons/react'
 import Editor from '@monaco-editor/react'
+import {
+  Play,
+  Download,
+  X,
+  Minus,
+  Square,
+  SidebarSimple,
+  FileText,
+  ArrowsClockwise,
+  CaretDown,
+  FilePdf
+} from '@phosphor-icons/react'
+import Window from './Window'
 import katex from 'katex'
 import 'katex/dist/katex.min.css'
 
-interface LaTeXDocument {
-  id: string
-  name: string
-  content: string
-  createdAt: Date
-  modifiedAt: Date
-  sessionId?: string
-}
-
 interface LaTeXEditorProps {
   onClose: () => void
-  sessionId: string
   onMinimize?: () => void
   onMaximize?: () => void
+  sessionId?: string
 }
 
-export function LaTeXEditor({ onClose, sessionId, onMinimize, onMaximize }: LaTeXEditorProps) {
-  const [content, setContent] = useState(`\\documentclass{article}
-\\usepackage{amsmath}
-\\usepackage{amssymb}
-\\usepackage{graphicx}
+interface FileNode {
+  id: string
+  name: string
+  type: 'file' | 'folder'
+  content?: string
+  children?: FileNode[]
+  isOpen?: boolean
+}
 
+export function LaTeXEditor({ onClose, onMinimize, onMaximize, sessionId }: LaTeXEditorProps) {
+  const [code, setCode] = useState(`\\documentclass{article}
+\\usepackage{amsmath}
 \\title{My LaTeX Document}
-\\author{Your Name}
+\\author{Reuben OS}
 \\date{\\today}
 
 \\begin{document}
@@ -38,527 +46,258 @@ export function LaTeXEditor({ onClose, sessionId, onMinimize, onMaximize }: LaTe
 \\maketitle
 
 \\section{Introduction}
-This is a sample LaTeX document with mathematical expressions.
+Welcome to LaTeX Studio on Reuben OS.
 
 \\section{Mathematics}
-Here's the quadratic formula:
-\\[
-x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
-\\]
-
-And here's an inline equation: $E = mc^2$
-
-\\section{Conclusion}
-LaTeX makes mathematical typesetting beautiful!
+Here is an equation:
+\\[ E = mc^2 \\]
 
 \\end{document}`)
 
-  const [renderedContent, setRenderedContent] = useState('')
-  const [claudePrompt, setClaudePrompt] = useState('')
-  const [isGenerating, setIsGenerating] = useState(false)
-  const [documents, setDocuments] = useState<LaTeXDocument[]>([])
-  const [currentDocument, setCurrentDocument] = useState<LaTeXDocument | null>(null)
-  const [saving, setSaving] = useState(false)
-  const [copySuccess, setCopySuccess] = useState(false)
-  const [showPreview, setShowPreview] = useState(true)
-  const previewRef = useRef<HTMLDivElement>(null)
-
-  // Load documents from localStorage (session-specific)
-  useEffect(() => {
-    const storageKey = `latex_documents_${sessionId}`
-    const docs = localStorage.getItem(storageKey)
-    if (docs) {
-      const parsed = JSON.parse(docs)
-      setDocuments(parsed.map((d: any) => ({
-        ...d,
-        createdAt: new Date(d.createdAt),
-        modifiedAt: new Date(d.modifiedAt)
-      })))
+  const [showSidebar, setShowSidebar] = useState(true)
+  const [files, setFiles] = useState<FileNode[]>([
+    {
+      id: 'root',
+      name: 'Project',
+      type: 'folder',
+      isOpen: true,
+      children: [
+        { id: 'main', name: 'main.tex', type: 'file', content: code }
+      ]
     }
-  }, [sessionId])
+  ])
+  const [activeFileId, setActiveFileId] = useState('main')
+  const [isSaving, setIsSaving] = useState(false)
+  const previewRef = useRef<HTMLDivElement>(null)
 
-  // Render LaTeX content
+  // Auto-save to session
   useEffect(() => {
-    renderLaTeX()
-  }, [content])
-
-  const renderLaTeX = () => {
-    try {
-      // Extract math expressions and render them
-      let html = content
-
-      // Remove LaTeX document structure for preview
-      html = html.replace(/\\documentclass\{.*?\}/g, '')
-      html = html.replace(/\\usepackage\{.*?\}/g, '')
-      html = html.replace(/\\title\{(.*?)\}/g, '<h1>$1</h1>')
-      html = html.replace(/\\author\{(.*?)\}/g, '<p class="author">Author: $1</p>')
-      html = html.replace(/\\date\{.*?\}/g, '')
-      html = html.replace(/\\maketitle/g, '')
-      html = html.replace(/\\begin\{document\}/g, '')
-      html = html.replace(/\\end\{document\}/g, '')
-
-      // Convert sections
-      html = html.replace(/\\section\{(.*?)\}/g, '<h2>$1</h2>')
-      html = html.replace(/\\subsection\{(.*?)\}/g, '<h3>$1</h3>')
-      html = html.replace(/\\subsubsection\{(.*?)\}/g, '<h4>$1</h4>')
-
-      // Convert lists
-      html = html.replace(/\\begin\{itemize\}/g, '<ul>')
-      html = html.replace(/\\end\{itemize\}/g, '</ul>')
-      html = html.replace(/\\begin\{enumerate\}/g, '<ol>')
-      html = html.replace(/\\end\{enumerate\}/g, '</ol>')
-      html = html.replace(/\\item\s+(.*?)(?=\\item|<\/ul>|<\/ol>|$)/g, '<li>$1</li>')
-
-      // Convert display math
-      html = html.replace(/\\\[([\s\S]*?)\\\]/g, (match, math) => {
-        try {
-          return `<div class="math-display">${katex.renderToString(math, { displayMode: true, throwOnError: false })}</div>`
-        } catch {
-          return `<div class="math-error">Error rendering: ${math}</div>`
-        }
-      })
-
-      // Convert inline math
-      html = html.replace(/\$(.*?)\$/g, (match, math) => {
-        try {
-          return katex.renderToString(math, { displayMode: false, throwOnError: false })
-        } catch {
-          return `<span class="math-error">Error: ${math}</span>`
-        }
-      })
-
-      // Convert paragraphs
-      html = html.split('\n\n').map(p => p.trim() ? `<p>${p}</p>` : '').join('\n')
-
-      setRenderedContent(html)
-    } catch (error) {
-      console.error('LaTeX rendering error:', error)
-      setRenderedContent('<p class="error">Error rendering LaTeX</p>')
-    }
-  }
-
-  const handleGenerateLaTeX = async () => {
-    if (!claudePrompt.trim()) return
-
-    setIsGenerating(true)
-    try {
-      const response = await fetch('/api/claude/generate-latex', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          prompt: claudePrompt,
-          sessionId
+    const saveToSession = async () => {
+      if (!sessionId) return
+      setIsSaving(true)
+      try {
+        await fetch('/api/session/code', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'x-session-id': sessionId
+          },
+          body: JSON.stringify({
+            type: 'latex',
+            code,
+            filename: 'main.tex'
+          })
         })
-      })
-
-      if (response.ok) {
-        const data = await response.json()
-        setContent(data.latex || content)
-        setClaudePrompt('')
+      } catch (error) {
+        console.error('Failed to save to session:', error)
+      } finally {
+        setIsSaving(false)
       }
-    } catch (error) {
-      console.error('Failed to generate LaTeX:', error)
-      // Generate mock LaTeX for demo
-      const mockLaTeX = generateMockLaTeX(claudePrompt)
-      setContent(mockLaTeX)
-      setClaudePrompt('')
-    } finally {
-      setIsGenerating(false)
     }
-  }
-
-  const generateMockLaTeX = (prompt: string): string => {
-    return `\\documentclass{article}
-\\usepackage{amsmath}
-\\usepackage{amssymb}
-
-\\title{${prompt}}
-\\author{Generated by Claude}
-\\date{\\today}
-
-\\begin{document}
-
-\\maketitle
-
-\\section{Generated Content}
-This LaTeX document was generated based on: "${prompt}"
-
-\\section{Example Mathematics}
-Here are some mathematical expressions related to your request:
-
-\\subsection{Equations}
-\\[
-f(x) = \\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
-\\]
-
-\\[
-\\nabla \\times \\vec{E} = -\\frac{\\partial \\vec{B}}{\\partial t}
-\\]
-
-\\section{Conclusion}
-This document demonstrates LaTeX capabilities for: ${prompt}
-
-\\end{document}`
-  }
-
-  const handleSaveDocument = async () => {
-    setSaving(true)
-    try {
-      const docName = prompt('Enter document name:', currentDocument?.name || 'document.tex')
-      if (!docName) return
 
-      const newDoc: LaTeXDocument = {
-        id: currentDocument?.id || Date.now().toString(),
-        name: docName,
-        content: content,
-        createdAt: currentDocument?.createdAt || new Date(),
-        modifiedAt: new Date(),
-        sessionId
-      }
-
-      const updatedDocs = currentDocument
-        ? documents.map(d => d.id === currentDocument.id ? newDoc : d)
-        : [...documents, newDoc]
-
-      setDocuments(updatedDocs)
-      setCurrentDocument(newDoc)
-
-      // Auto-save to session
-      useEffect(() => {
-        const saveToSession = async () => {
-          if (!sessionId) return
-          setIsSaving(true)
-          try {
-            await fetch('/api/session/code', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'x-session-id': sessionId
-              },
-              body: JSON.stringify({
-                type: 'latex',
-                code,
-                filename: 'main.tex'
-              })
-            })
-          } catch (error) {
-            console.error('Failed to save to session:', error)
-          } finally {
-            setIsSaving(false)
-          }
-        }
-
-        const debounce = setTimeout(saveToSession, 2000)
-        return () => clearTimeout(debounce)
-      }, [code, sessionId])
-
-      // Render LaTeX preview
-      useEffect(() => {
-        if (previewRef.current) {
-          try {
-            // Simple regex-based rendering for demo purposes
-            // In a real app, you'd use a full LaTeX engine or server-side rendering
-            const text = code
-              .replace(/\\section\{([^}]+)\}/g, '<h2>$1</h2>')
-              .replace(/\\subsection\{([^}]+)\}/g, '<h3>$1</h3>')
-              .replace(/\\textbf\{([^}]+)\}/g, '<b>$1</b>')
-              .replace(/\\textit\{([^}]+)\}/g, '<i>$1</i>')
-              .replace(/\\maketitle/, '<div class="title"><h1>My LaTeX Document</h1><p>Reuben OS</p><p>' + new Date().toLocaleDateString() + '</p></div>')
-              .replace(/\\begin\{document\}/, '')
-              .replace(/\\end\{document\}/, '')
-              .replace(/\\documentclass\{[^}]+\}/, '')
-              .replace(/\\usepackage\{[^}]+\}/, '')
-              .replace(/\\title\{[^}]+\}/, '')
-              .replace(/\\author\{[^}]+\}/, '')
-              .replace(/\\date\{[^}]+\}/, '')
+    const debounce = setTimeout(saveToSession, 2000)
+    return () => clearTimeout(debounce)
+  }, [code, sessionId])
 
-            // Split by math delimiters to render KaTeX
-            const parts = text.split(/(\\\[[\s\S]*?\\\]|\$[^$]+\$)/)
-            previewRef.current.innerHTML = ''
-
-            parts.forEach(part => {
-              if (part.startsWith('\\[') || part.startsWith('$')) {
-                const math = part.replace(/^\\\[|\\\]$|^\$|\$$/g, '')
-                const span = document.createElement('span')
-                try {
-                  katex.render(math, span, { throwOnError: false, displayMode: part.startsWith('\\[') })
-                  previewRef.current?.appendChild(span)
-                } catch (e) {
-                  previewRef.current?.appendChild(document.createTextNode(part))
-                }
-              } else {
-                const div = document.createElement('div')
-                div.innerHTML = part
-                previewRef.current?.appendChild(div)
-              }
-            })
-          } catch (e) {
-            console.error('Render error:', e)
+  // Render LaTeX preview
+  useEffect(() => {
+    if (previewRef.current) {
+      try {
+        // Simple regex-based rendering for demo purposes
+        const text = code
+          .replace(/\\section\{([^}]+)\}/g, '<h2>$1</h2>')
+          .replace(/\\subsection\{([^}]+)\}/g, '<h3>$1</h3>')
+          .replace(/\\textbf\{([^}]+)\}/g, '<b>$1</b>')
+          .replace(/\\textit\{([^}]+)\}/g, '<i>$1</i>')
+          .replace(/\\maketitle/, '<div class="title"><h1>My LaTeX Document</h1><p>Reuben OS</p><p>' + new Date().toLocaleDateString() + '</p></div>')
+          .replace(/\\begin\{document\}/, '')
+          .replace(/\\end\{document\}/, '')
+          .replace(/\\documentclass\{[^}]+\}/, '')
+          .replace(/\\usepackage\{[^}]+\}/, '')
+          .replace(/\\title\{[^}]+\}/, '')
+          .replace(/\\author\{[^}]+\}/, '')
+          .replace(/\\date\{[^}]+\}/, '')
+
+        // Split by math delimiters to render KaTeX
+        const parts = text.split(/(\\\[[\s\S]*?\\\]|\$[^$]+\$)/)
+        previewRef.current.innerHTML = ''
+
+        parts.forEach(part => {
+          if (part.startsWith('\\[') || part.startsWith('$')) {
+            const math = part.replace(/^\\\[|\\\]$|^\$|\$$/g, '')
+            const span = document.createElement('span')
+            try {
+              katex.render(math, span, { throwOnError: false, displayMode: part.startsWith('\\[') })
+              previewRef.current?.appendChild(span)
+            } catch (e) {
+              previewRef.current?.appendChild(document.createTextNode(part))
+            }
+          } else {
+            const div = document.createElement('div')
+            div.innerHTML = part
+            previewRef.current?.appendChild(div)
           }
-        }
-      }, [code])
-
-      const handleDownload = () => {
-        const blob = new Blob([code], { type: 'text/plain' })
-        const url = URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = 'main.tex'
-        a.click()
-        URL.revokeObjectURL(url)
+        })
+      } catch (e) {
+        console.error('Render error:', e)
       }
+    }
+  }, [code])
+
+  const handleDownload = () => {
+    const blob = new Blob([code], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'main.tex'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
 
-      return (
-        <Window
-          id="latex-editor"
-          title="LaTeX Studio"
-          isOpen={true}
-          onClose={onClose}
-          onMinimize={onMinimize}
-          onMaximize={onMaximize}
-          width={1200}
-          height={800}
-          x={60}
-          y={60}
-          className="latex-studio-window"
-        >
-          <div className="flex h-full bg-[#1e1e1e] text-gray-300 font-sans">
-            {/* Sidebar */}
-            {showSidebar && (
-              <div className="w-64 bg-[#252526] border-r border-[#333] flex flex-col">
-                <div className="h-9 px-4 flex items-center text-xs font-bold text-gray-500 uppercase tracking-wider">
-                  Explorer
+  return (
+    <Window
+      id="latex-editor"
+      title="LaTeX Studio"
+      isOpen={true}
+      onClose={onClose}
+      onMinimize={onMinimize}
+      onMaximize={onMaximize}
+      width={1200}
+      height={800}
+      x={60}
+      y={60}
+      className="latex-studio-window"
+    >
+      <div className="flex h-full bg-[#1e1e1e] text-gray-300 font-sans">
+        {/* Sidebar */}
+        {showSidebar && (
+          <div className="w-64 bg-[#252526] border-r border-[#333] flex flex-col">
+            <div className="h-9 px-4 flex items-center text-xs font-bold text-gray-500 uppercase tracking-wider">
+              Explorer
+            </div>
+            <div className="flex-1 overflow-y-auto py-2">
+              <div className="px-2">
+                <div className="flex items-center gap-1 py-1 px-2 text-sm text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
+                  <CaretDown size={12} weight="bold" />
+                  <span className="font-bold">PROJECT</span>
                 </div>
-                <div className="flex-1 overflow-y-auto py-2">
-                  <div className="px-2">
-                    <div className="flex items-center gap-1 py-1 px-2 text-sm text-gray-300 hover:bg-[#2a2d2e] rounded cursor-pointer">
-                      <CaretDown size={12} weight="bold" />
-                      <span className="font-bold">PROJECT</span>
-                    </div>
-                    <div className="pl-4">
-                      {files.map(file => (
-                        <div key={file.id}>
-                          <div className="flex items-center gap-2 py-1 px-2 text-sm hover:bg-[#2a2d2e] rounded cursor-pointer text-blue-400">
-                            <CaretDown size={12} weight="bold" />
-                            {file.name}
-                          </div>
-                          {file.children?.map(child => (
-                            <div
-                              key={child.id}
-                              onClick={() => setActiveFileId(child.id)}
-                              className={`flex items-center gap-2 py-1 px-2 ml-4 text-sm rounded cursor-pointer ${activeFileId === child.id ? 'bg-[#37373d] text-white' : 'text-gray-400 hover:bg-[#2a2d2e]'
-                                }`}
-                            >
-                              <FileText size={14} />
-                              {child.name}
-                            </div>
-                          ))}
+                <div className="pl-4">
+                  {files.map(file => (
+                    <div key={file.id}>
+                      <div className="flex items-center gap-2 py-1 px-2 text-sm hover:bg-[#2a2d2e] rounded cursor-pointer text-blue-400">
+                        <CaretDown size={12} weight="bold" />
+                        {file.name}
+                      </div>
+                      {file.children?.map(child => (
+                        <div
+                          key={child.id}
+                          onClick={() => setActiveFileId(child.id)}
+                          className={`flex items-center gap-2 py-1 px-2 ml-4 text-sm rounded cursor-pointer ${activeFileId === child.id ? 'bg-[#37373d] text-white' : 'text-gray-400 hover:bg-[#2a2d2e]'
+                            }`}
+                        >
+                          <FileText size={14} />
+                          {child.name}
                         </div>
                       ))}
                     </div>
-                  </div>
+                  ))}
                 </div>
               </div>
-            )}
+            </div>
+          </div>
+        )}
+
+        {/* Main Content */}
+        <div className="flex-1 flex flex-col min-w-0">
+          {/* Toolbar */}
+          <div className="h-10 bg-[#2d2d2d] border-b border-[#1e1e1e] flex items-center justify-between px-4">
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setShowSidebar(!showSidebar)}
+                className={`p-1.5 rounded hover:bg-[#3e3e42] ${showSidebar ? 'text-white' : 'text-gray-500'}`}
+                title="Toggle Sidebar"
+              >
+                <SidebarSimple size={16} />
+              </button>
+              <div className="h-4 w-[1px] bg-gray-600 mx-2" />
+              <div className="flex items-center gap-2 px-3 py-1 bg-[#1e1e1e] rounded text-xs text-gray-400 border border-[#333]">
+                <FileText size={14} className="text-green-400" />
+                main.tex
+              </div>
+              {isSaving && (
+                <span className="text-xs text-gray-500 flex items-center gap-1">
+                  <ArrowsClockwise size={12} className="animate-spin" />
+                  Syncing...
+                </span>
+              )}
+            </div>
 
-            {/* Main Content */}
-            <div className="flex-1 flex flex-col min-w-0">
-              {/* Toolbar */}
-              <div className="h-10 bg-[#2d2d2d] border-b border-[#1e1e1e] flex items-center justify-between px-4">
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => setShowSidebar(!showSidebar)}
-                    className={`p-1.5 rounded hover:bg-[#3e3e42] ${showSidebar ? 'text-white' : 'text-gray-500'}`}
-                    title="Toggle Sidebar"
-                  >
-                    <SidebarSimple size={16} />
-                  </button>
-                  <div className="h-4 w-[1px] bg-gray-600 mx-2" />
-                  <div className="flex items-center gap-2 px-3 py-1 bg-[#1e1e1e] rounded text-xs text-gray-400 border border-[#333]">
-                    <FileText size={14} className="text-green-400" />
-                    main.tex
-                  </div>
-                  {isSaving && (
-                    <span className="text-xs text-gray-500 flex items-center gap-1">
-                      <ArrowsClockwise size={12} className="animate-spin" />
-                      Syncing...
-                    </span>
-                  )}
-                </div>
+            <div className="flex items-center gap-2">
+              <button
+                className="flex items-center gap-2 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded text-xs font-medium transition-colors"
+              >
+                <Play size={14} weight="fill" />
+                Compile
+              </button>
+              <button
+                onClick={handleDownload}
+                className="p-1.5 text-gray-400 hover:text-white hover:bg-[#3e3e42] rounded transition-colors"
+                title="Download PDF"
+              >
+                <Download size={16} />
+              </button>
+            </div>
+          </div>
+
+          {/* Split View: Editor & Preview */}
+          <div className="flex-1 flex overflow-hidden">
+            {/* Editor */}
+            <div className="flex-1 border-r border-[#333]">
+              <Editor
+                height="100%"
+                defaultLanguage="latex"
+                theme="vs-dark"
+                value={code}
+                onChange={(value) => setCode(value || '')}
+                options={{
+                  minimap: { enabled: false },
+                  fontSize: 14,
+                  fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+                  lineNumbers: 'on',
+                  scrollBeyondLastLine: false,
+                  automaticLayout: true,
+                  padding: { top: 16, bottom: 16 },
+                  renderLineHighlight: 'all',
+                  smoothScrolling: true,
+                  cursorBlinking: 'smooth',
+                  cursorSmoothCaretAnimation: 'on'
+                }}
+              />
+            </div>
 
+            {/* Preview */}
+            <div className="w-[500px] bg-[#525659] flex flex-col border-l border-[#333]">
+              <div className="h-8 bg-[#323639] border-b border-[#2b2b2b] flex items-center justify-between px-3 shadow-md z-10">
+                <span className="text-xs font-bold text-gray-400 uppercase">PDF Preview</span>
                 <div className="flex items-center gap-2">
-                  <button
-                    className="flex items-center gap-2 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white rounded text-xs font-medium transition-colors"
-                  >
-                    <Play size={14} weight="fill" />
-                    Compile
-                  </button>
-                  <button
-                    onClick={handleDownload}
-                    className="p-1.5 text-gray-400 hover:text-white hover:bg-[#3e3e42] rounded transition-colors"
-                    title="Download PDF"
-                  >
-                    <Download size={16} />
-                  </button>
+                  <span className="text-xs text-gray-400">100%</span>
                 </div>
               </div>
-
-              {/* Split View: Editor & Preview */}
-              <div className="flex-1 flex overflow-hidden">
-                {/* Editor */}
-                <div className="flex-1 border-r border-[#333]">
-                  <Editor
-                    height="100%"
-                    defaultLanguage="latex"
-                    theme="vs-dark"
-                    value={code}
-                    onChange={(value) => setCode(value || '')}
-                    options={{
-                      minimap: { enabled: false },
-                      fontSize: 14,
-                      fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-                      lineNumbers: 'on',
-                      scrollBeyondLastLine: false,
-                      automaticLayout: true,
-                      padding: { top: 16, bottom: 16 },
-                      renderLineHighlight: 'all',
-                      smoothScrolling: true,
-                      cursorBlinking: 'smooth',
-                      cursorSmoothCaretAnimation: 'on'
-                    }}
-                  />
-                </div>
-
-                {/* Preview */}
-                <div className="w-[500px] bg-[#525659] flex flex-col border-l border-[#333]">
-                  <div className="h-8 bg-[#323639] border-b border-[#2b2b2b] flex items-center justify-between px-3 shadow-md z-10">
-                    <span className="text-xs font-bold text-gray-400 uppercase">PDF Preview</span>
-                    <div className="flex items-center gap-2">
-                      <span className="text-xs text-gray-400">100%</span>
-                    </div>
-                  </div>
-                  <div className="flex-1 overflow-y-auto p-8 flex justify-center">
-                    <div
-                      className="bg-white w-full max-w-[800px] min-h-[1000px] shadow-2xl p-12 text-black font-serif"
-                      ref={previewRef}
-                      style={{
-                        boxShadow: '0 0 20px rgba(0,0,0,0.5)'
-                      }}
-                      dangerouslySetInnerHTML={{ __html: renderedContent }}
-                    />
-                  </div>
-                </div>
-          )}
-
-                {/* Documents Sidebar */}
-                <div className="w-64 bg-gray-50 border-l border-gray-200 flex flex-col">
-                  <div className="p-4 border-b border-gray-200">
-                    <span className="text-xs font-bold text-gray-400 uppercase tracking-wider">Saved Documents</span>
-                  </div>
-
-                  <div className="flex-1 overflow-y-auto p-3 space-y-2">
-                    {documents.length === 0 ? (
-                      <div className="text-gray-400 text-sm text-center py-8 italic">
-                        No saved documents
-                      </div>
-                    ) : (
-                      documents.map(doc => (
-                        <div
-                          key={doc.id}
-                          className={`group rounded-lg p-3 cursor-pointer border transition-all ${currentDocument?.id === doc.id
-                            ? 'bg-white border-purple-200 shadow-sm ring-1 ring-purple-500/20'
-                            : 'bg-transparent border-transparent hover:bg-white hover:border-gray-200'
-                            }`}
-                          onClick={() => handleLoadDocument(doc)}
-                        >
-                          <div className="flex items-center justify-between mb-1">
-                            <div className="flex items-center gap-2 overflow-hidden">
-                              <FileText size={16} className={currentDocument?.id === doc.id ? "text-purple-500" : "text-gray-400"} weight={currentDocument?.id === doc.id ? "fill" : "regular"} />
-                              <span className={`text-sm font-medium truncate ${currentDocument?.id === doc.id ? "text-gray-900" : "text-gray-600"}`}>
-                                {doc.name}
-                              </span>
-                            </div>
-                            <button
-                              onClick={(e) => {
-                                e.stopPropagation()
-                                handleDeleteDocument(doc.id)
-                              }}
-                              className="opacity-0 group-hover:opacity-100 p-1 hover:bg-red-50 rounded text-gray-400 hover:text-red-500 transition-all"
-                            >
-                              <Trash size={14} />
-                            </button>
-                          </div>
-                          <div className="text-[10px] text-gray-400 pl-6">
-                            {doc.modifiedAt.toLocaleDateString()}
-                          </div>
-                        </div>
-                      ))
-                    )}
-                  </div>
+              <div className="flex-1 overflow-y-auto p-8 flex justify-center">
+                <div
+                  className="bg-white w-full max-w-[800px] min-h-[1000px] shadow-2xl p-12 text-black font-serif"
+                  ref={previewRef}
+                  style={{
+                    boxShadow: '0 0 20px rgba(0,0,0,0.5)'
+                  }}
+                >
+                  {/* Content rendered via useEffect */}
                 </div>
               </div>
-
-              {/* Style for rendered content */}
-              <style jsx global>{`
-          .math-display {
-            margin: 1.5em 0;
-            text-align: center;
-            overflow-x: auto;
-            padding: 1em 0;
-          }
-          .math-error {
-            color: #ef4444;
-            font-style: italic;
-            background: #fef2f2;
-            padding: 0.2em 0.5em;
-            border-radius: 4px;
-          }
-          .author {
-            text-align: center;
-            font-style: italic;
-            margin: 1em 0 2em;
-            color: #4b5563;
-          }
-          h1 { 
-            font-size: 2.5em; 
-            margin: 1em 0 0.5em; 
-            font-weight: 700; 
-            line-height: 1.2;
-            color: #111827;
-          }
-          h2 { 
-            font-size: 1.75em; 
-            margin: 1.5em 0 0.8em; 
-            font-weight: 600; 
-            color: #1f2937;
-            border-bottom: 1px solid #e5e7eb;
-            padding-bottom: 0.3em;
-          }
-          h3 { 
-            font-size: 1.4em; 
-            margin: 1.2em 0 0.6em; 
-            font-weight: 600;
-            color: #374151;
-          }
-          h4 { 
-            font-size: 1.2em; 
-            margin: 1em 0 0.5em; 
-            font-weight: 600;
-            color: #4b5563;
-          }
-          p {
-            margin-bottom: 1em;
-            text-align: justify;
-          }
-          ul, ol {
-            margin: 1em 0;
-            padding-left: 2em;
-          }
-          li {
-            margin-bottom: 0.5em;
-          }
-        `}</style>
             </div>
-        </Window>
-      )
-    }
+          </div>
+        </div>
+      </div>
+    </Window>
+  )
+}

app/components/SpotlightSearch.tsx

@@ -1,7 +1,17 @@
 'use client'
 
 import React, { useState, useRef, useEffect } from 'react'
-import { MagnifyingGlass, X } from '@phosphor-icons/react'
+import {
+  MagnifyingGlass,
+  X,
+  Folder,
+  Calendar,
+  Clock,
+  Sparkle,
+  Globe,
+  DeviceMobile,
+  Function as FunctionIcon
+} from '@phosphor-icons/react'
 import { motion, AnimatePresence } from 'framer-motion'
 
 interface SpotlightSearchProps {
@@ -23,13 +33,13 @@ export function SpotlightSearch({ isOpen, onClose, onOpenApp }: SpotlightSearchP
   const inputRef = useRef<HTMLInputElement>(null)
 
   const apps: SearchResult[] = [
-    { id: 'files', name: 'Files', type: 'app' },
-    { id: 'calendar', name: 'Calendar', type: 'app' },
-    { id: 'clock', name: 'Clock', type: 'app' },
-    { id: 'browser', name: 'Web Browser', type: 'app' },
-    { id: 'gemini', name: 'Gemini Chat', type: 'app' },
-    { id: 'terminal', name: 'Terminal', type: 'app' },
-    { id: 'vscode', name: 'VS Code', type: 'app' },
+    { id: 'files', name: 'Files', type: 'app', icon: <div className="w-6 h-6 bg-gradient-to-br from-blue-400 to-cyan-200 rounded-md flex items-center justify-center border border-white/30"><Folder size={16} weight="fill" className="text-blue-900" /></div> },
+    { id: 'calendar', name: 'Calendar', type: 'app', icon: <div className="w-6 h-6 bg-white rounded-md flex items-center justify-center border border-gray-200"><Calendar size={16} weight="regular" className="text-red-500" /></div> },
+    { id: 'clock', name: 'Clock', type: 'app', icon: <div className="w-6 h-6 bg-white rounded-full flex items-center justify-center border border-gray-200"><Clock size={16} weight="regular" className="text-black" /></div> },
+    { id: 'gemini', name: 'Gemini Chat', type: 'app', icon: <div className="w-6 h-6 bg-gradient-to-b from-white to-blue-50 rounded-md flex items-center justify-center border border-white/50"><Sparkle size={16} weight="fill" className="text-blue-500" /></div> },
+    { id: 'research', name: 'Research', type: 'app', icon: <div className="w-6 h-6 bg-gradient-to-b from-purple-500 to-indigo-600 rounded-md flex items-center justify-center border border-white/20"><Globe size={16} weight="duotone" className="text-white" /></div> },
+    { id: 'flutter-editor', name: 'Flutter IDE', type: 'app', icon: <div className="w-6 h-6 bg-gradient-to-b from-[#54C5F8] to-[#29B6F6] rounded-md flex items-center justify-center border border-white/20"><DeviceMobile size={16} weight="fill" className="text-white" /></div> },
+    { id: 'latex-editor', name: 'LaTeX Studio', type: 'app', icon: <div className="w-6 h-6 bg-gradient-to-b from-slate-700 to-slate-900 rounded-md flex items-center justify-center border border-white/20"><FunctionIcon size={16} weight="bold" className="text-green-400" /></div> },
   ]
 
   const files: SearchResult[] = [
@@ -132,10 +142,14 @@ export function SpotlightSearch({ isOpen, onClose, onOpenApp }: SpotlightSearchP
                   <div
                     key={result.id}
                     onClick={() => handleSelect(result)}
-                    className={`flex items-center px-3 py-2.5 hover:bg-blue-500 hover:text-white rounded-lg cursor-pointer transition-colors ${
-                      index === 0 ? 'bg-blue-500/10' : ''
-                    }`}
+                    className={`flex items-center px-3 py-2.5 hover:bg-blue-500 hover:text-white rounded-lg cursor-pointer transition-colors gap-3 ${index === 0 ? 'bg-blue-500/10' : ''
+                      }`}
                   >
+                    {result.icon && (
+                      <div className="w-8 h-8 flex items-center justify-center">
+                        {result.icon}
+                      </div>
+                    )}
                     <div className="flex-1 flex flex-col">
                       <span className="font-medium">{result.name}</span>
                       <span className="text-xs opacity-70 capitalize">{result.type}</span>