ready for demo

.env.example

@@ -0,0 +1,29 @@
+
+# Instructions:
+# 1. Rename this file to `.env`
+# 2. Fill in the required values below.
+# 3. Keep the .env file private and do not commit it to version control.
+# -----------------------------------------------------------------------------
+
+# --- Primary AI Model (Gemini) ---
+# Your Google AI Studio (Gemini) API keys.
+# You can provide multiple keys separated by commas for automatic rotation and fallback.
+# Example: GEMINI_API_KEYS=key1,key2,key3
+GEMINI_API_KEYS="YOUR_GEMINI_API_KEY_HERE"
+
+# The name of the primary Gemini model to use.
+# Defaults to "gemini-1.5-flash-latest" if not set.
+PRIMARY_AI_MODEL_NAME="gemini-1.5-flash-latest"
+
+
+# --- Fallback AI Model (Requesty Router) ---
+# This model is used if all Gemini keys fail.
+# You MUST provide a Requesty API key. Get one from requesty.ai
+REQUESTY_API_KEY="YOUR_REQUESTY_API_KEY_HERE"
+
+# The name of the fallback AI model to use via the Requesty router.
+# Defaults to "gemini-1.5-pro-latest" if not set.
+AI_MODEL_NAME="coding/gemini-2.5-flash"
+
+
+CORS_ALLOW_ORIGINS="*"

.gitignore

@@ -0,0 +1,5 @@
+__pycache__
+env
+.env
+static/script.js.txt
+test*

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

config.py

@@ -0,0 +1,124 @@
+"""
+Configuration management for the AI Web Visualization Generator.
+
+This module handles all application settings using Pydantic for validation
+and type safety. Settings are loaded from environment variables and .env files.
+"""
+
+from pathlib import Path
+from typing import List
+
+from pydantic import Field, field_validator
+from pydantic_settings import BaseSettings, SettingsConfigDict
+
+
+class AppSettings(BaseSettings):
+    """
+    Manages application settings using Pydantic for validation.
+    
+    All settings can be configured via environment variables or a .env file.
+    Settings are validated at startup to ensure proper configuration.
+    
+    Attributes:
+        primary_model_name: Name of the primary AI model (default: Gemini Flash)
+        gemini_api_keys: Comma-separated list of Gemini API keys
+        fallback_model_name: Name of the fallback AI model (default: Gemini Pro)
+        requesty_api_key: API key for Requesty service (required)
+        requesty_site_url: URL of the site using Requesty
+        requesty_site_name: Name of the site for Requesty headers
+        cors_allow_origins: Comma-separated list of allowed CORS origins
+        static_dir: Directory containing static frontend files
+    """
+    
+    model_config = SettingsConfigDict(
+        env_file='.env',
+        env_file_encoding='utf-8',
+        extra='ignore'
+    )
+    
+    # AI Model Configuration
+    primary_model_name: str = Field(
+        default="gemini-1.5-flash-latest",
+        alias="PRIMARY_AI_MODEL_NAME",
+        description="Primary AI model to use for generation"
+    )
+    
+    gemini_api_keys: str = Field(
+        default="",
+        alias="GEMINI_API_KEYS",
+        description="Comma-separated list of Gemini API keys"
+    )
+    
+    fallback_model_name: str = Field(
+        default="gemini-1.5-pro-latest",
+        alias="AI_MODEL_NAME",
+        description="Fallback AI model name"
+    )
+    
+    # Requesty Configuration
+    requesty_api_key: str = Field(
+        ...,
+        alias="REQUESTY_API_KEY",
+        description="API key for Requesty service (required)"
+    )
+    
+    requesty_site_url: str = Field(
+        default="",
+        alias="REQUESTY_SITE_URL",
+        description="Site URL for Requesty headers"
+    )
+    
+    requesty_site_name: str = Field(
+        default="AI Visualization Generator",
+        alias="REQUESTY_SITE_NAME",
+        description="Site name for Requesty headers"
+    )
+    
+    # Server Configuration
+    cors_allow_origins: str = Field(
+        default="*",
+        alias="CORS_ALLOW_ORIGINS",
+        description="Comma-separated list of allowed CORS origins"
+    )
+    
+    static_dir: Path = Field(
+        default=Path("static"),
+        alias="STATIC_DIR",
+        description="Directory containing static frontend files"
+    )
+    
+    @property
+    def index_file(self) -> Path:
+        """Path to the main index.html file."""
+        return self.static_dir / "index.html"
+    
+    @property
+    def gemini_api_keys_list(self) -> List[str]:
+        """
+        Parse comma-separated Gemini API keys into a list.
+        
+        Returns:
+            List of API keys, empty list if none provided
+        """
+        if isinstance(self.gemini_api_keys, str):
+            return [key.strip() for key in self.gemini_api_keys.split(',') if key.strip()]
+        return []
+
+
+def load_settings() -> AppSettings:
+    """
+    Load and validate application settings.
+    
+    Returns:
+        AppSettings: Validated application settings
+        
+    Raises:
+        RuntimeError: If configuration is invalid or missing required values
+    """
+    try:
+        return AppSettings()
+    except Exception as e:
+        raise RuntimeError(
+            f"FATAL: Configuration error. Is your .env file set up correctly? "
+            f"Details: {e}"
+        )

file_processor.py

@@ -0,0 +1,199 @@
+"""
+File processing utilities for the AI Web Visualization Generator.
+
+This module handles the processing of various file types (text, PDF, CSV, Excel)
+uploaded by users and converts them into text descriptions suitable for LLM prompts.
+"""
+
+import io
+from pathlib import Path
+from typing import List
+
+import pandas as pd
+from fastapi import UploadFile
+from pypdf import PdfReader
+
+
+class FileProcessor:
+    """
+    Processes uploaded files and extracts their content for LLM prompts.
+    
+    Supports multiple file formats including text files, PDFs, CSVs, and Excel files.
+    Binary files (images, audio, etc.) are identified but not processed.
+    """
+    
+    # Maximum content length to include in prompt (to avoid huge prompts)
+    MAX_CONTENT_LENGTH = 4000
+    
+    # Supported text-based file extensions
+    TEXT_EXTENSIONS = {'.txt', '.md', '.py', '.js', '.html', '.css', '.json'}
+    
+    # Supported spreadsheet extensions
+    EXCEL_EXTENSIONS = {'.xlsx', '.xls'}
+    
+    async def process_uploaded_files(self, files: List[UploadFile]) -> str:
+        """
+        Process multiple uploaded files and create a comprehensive text description.
+        
+        Args:
+            files: List of uploaded files to process
+            
+        Returns:
+            str: Formatted text description of all file contents
+        """
+        if not files:
+            return "No files were provided."
+        
+        file_contexts = []
+        
+        for file in files:
+            context = await self._process_single_file(file)
+            file_contexts.append(context)
+        
+        return (
+            "The user has provided the following files. "
+            "Use their content as context for your response:\n\n"
+            + "\n\n".join(file_contexts)
+        )
+    
+    async def _process_single_file(self, file: UploadFile) -> str:
+        """
+        Process a single uploaded file.
+        
+        Args:
+            file: The file to process
+            
+        Returns:
+            str: Formatted description of the file content
+        """
+        file_description = f"--- START OF FILE: {file.filename} ---"
+        content_summary = (
+            "Content: This is a binary file (e.g., image, audio). "
+            "It cannot be displayed as text but should be referenced in the "
+            "code by its filename."
+        )
+        
+        file_extension = Path(file.filename).suffix.lower()
+        
+        try:
+            content_bytes = await file.read()
+            content_summary = await self._extract_content(
+                content_bytes, 
+                file_extension,
+                file.filename
+            )
+        except Exception as e:
+            print(f"Could not process file {file.filename}: {e}")
+            # Keep the default binary file message
+        finally:
+            await file.seek(0)  # Reset file pointer for potential reuse
+        
+        return (
+            f"{file_description}\n"
+            f"{content_summary}\n"
+            f"--- END OF FILE: {file.filename} ---"
+        )
+    
+    async def _extract_content(
+        self, 
+        content_bytes: bytes, 
+        file_extension: str,
+        filename: str
+    ) -> str:
+        """
+        Extract text content from file bytes based on file type.
+        
+        Args:
+            content_bytes: Raw file content
+            file_extension: File extension (e.g., '.pdf', '.csv')
+            filename: Original filename
+            
+        Returns:
+            str: Extracted and possibly truncated content
+        """
+        content = None
+        
+        # Text-based files
+        if file_extension in self.TEXT_EXTENSIONS:
+            content = content_bytes.decode('utf-8', errors='replace')
+        
+        # CSV files
+        elif file_extension == '.csv':
+            content = self._process_csv(content_bytes)
+        
+        # PDF files
+        elif file_extension == '.pdf':
+            content = self._process_pdf(content_bytes)
+        
+        # Excel files
+        elif file_extension in self.EXCEL_EXTENSIONS:
+            content = self._process_excel(content_bytes)
+        
+        # If no specific handler, return default message
+        if content is None:
+            return (
+                "Content: This is a binary file (e.g., image, audio). "
+                "It cannot be displayed as text but should be referenced in the "
+                "code by its filename."
+            )
+        
+        # Truncate if necessary
+        if len(content) > self.MAX_CONTENT_LENGTH:
+            content = content[:self.MAX_CONTENT_LENGTH] + "\n... (content truncated)"
+        
+        return content
+    
+    def _process_csv(self, content_bytes: bytes) -> str:
+        """
+        Process CSV file content.
+        
+        Args:
+            content_bytes: Raw CSV file bytes
+            
+        Returns:
+            str: CSV content as text
+        """
+        df = pd.read_csv(io.BytesIO(content_bytes))
+        return "File content represented as CSV:\n" + df.to_csv(index=False)
+    
+    def _process_pdf(self, content_bytes: bytes) -> str:
+        """
+        Process PDF file content and extract text.
+        
+        Args:
+            content_bytes: Raw PDF file bytes
+            
+        Returns:
+            str: Extracted text from all PDF pages
+        """
+        reader = PdfReader(io.BytesIO(content_bytes))
+        text_parts = [
+            page.extract_text() 
+            for page in reader.pages 
+            if page.extract_text()
+        ]
+        return "Extracted text from PDF:\n" + "\n".join(text_parts)
+    
+    def _process_excel(self, content_bytes: bytes) -> str:
+        """
+        Process Excel file content.
+        
+        Args:
+            content_bytes: Raw Excel file bytes
+            
+        Returns:
+            str: Content from all sheets as CSV format
+        """
+        xls = pd.ExcelFile(io.BytesIO(content_bytes))
+        text_parts = []
+        
+        for sheet_name in xls.sheet_names:
+            df = pd.read_excel(xls, sheet_name=sheet_name)
+            text_parts.append(
+                f"Sheet: '{sheet_name}'\n{df.to_csv(index=False)}"
+            )
+        
+        return (
+            "File content represented as CSV for each sheet:\n"
+            + "\n\n".join(text_parts)
+        )

main.py

@@ -0,0 +1,283 @@
+"""
+Main application entry point for the AI Web Visualization Generator.
+
+This FastAPI application provides endpoints for generating, modifying, and
+explaining HTML visualizations using AI models. It supports file uploads,
+streaming responses, and automatic fallback between AI providers.
+"""
+
+import io
+import zipfile
+from typing import List
+
+from fastapi import FastAPI, Request, Form, UploadFile, File
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import HTMLResponse, StreamingResponse, PlainTextResponse
+from fastapi.staticfiles import StaticFiles
+
+from config import load_settings
+from file_processor import FileProcessor
+from model_managers import MultiModelManager
+from models import ExplainRequest
+from prompts import (
+    INSTRUCTIONS_FORMAT,
+    PROMPT_GENERATE,
+    PROMPT_MODIFY,
+    PROMPT_FOLLOW_UP
+)
+
+
+# --- Application Setup ---
+
+# Load configuration
+settings = load_settings()
+
+# Initialize FastAPI application
+app = FastAPI(
+    title="AI Web Visualization Generator",
+    version="3.3.0",
+    description="Generate and modify HTML visualizations using AI"
+)
+
+# Configure CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=settings.cors_allow_origins.split(","),
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Initialize services
+model_manager = MultiModelManager(settings)
+file_processor = FileProcessor()
+
+# Mount static files if directory exists
+if settings.static_dir.exists() and settings.static_dir.is_dir():
+    app.mount(
+        "/static",
+        StaticFiles(directory=str(settings.static_dir)),
+        name="static"
+    )
+
+
+# --- API Endpoints ---
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root():
+    """
+    Serve the main frontend page.
+    
+    Returns the index.html file if it exists, otherwise returns
+    a basic HTML page indicating the static frontend is missing.
+    """
+    if settings.index_file.exists():
+        return HTMLResponse(
+            content=settings.index_file.read_text(encoding="utf-8")
+        )
+    
+    return HTMLResponse(
+        "<h1>AI Visualization Generator Backend</h1>"
+        "<p>Static frontend not found.</p>"
+    )
+
+
+@app.get("/healthz", response_class=PlainTextResponse)
+async def healthz():
+    """
+    Health check endpoint.
+    
+    Returns a simple "ok" response to indicate the service is running.
+    Used by container orchestration systems and load balancers.
+    """
+    return PlainTextResponse("ok")
+
+
+@app.post("/generate")
+async def generate_visualization(
+    request: Request,
+    prompt: str = Form(..., description="User's request for visualization"),
+    files: List[UploadFile] = File(
+        default=[],
+        description="Optional files to include as context"
+    )
+):
+    """
+    Generate a new HTML visualization from a user prompt.
+    
+    This endpoint processes the user's request and any uploaded files,
+    then streams back an AI-generated HTML visualization.
+    
+    Args:
+        request: FastAPI request object
+        prompt: User's description of what to generate
+        files: Optional files to use as context (images, data, etc.)
+        
+    Returns:
+        StreamingResponse: AI-generated HTML code with metadata
+    """
+    # Process uploaded files into context
+    file_context = await file_processor.process_uploaded_files(files)
+    
+    # Build the complete prompt
+    final_prompt = PROMPT_GENERATE.format(
+        INSTRUCTIONS_FORMAT=INSTRUCTIONS_FORMAT,
+        user_prompt=prompt,
+        file_context=file_context
+    )
+    
+    # Stream the response
+    return StreamingResponse(
+        model_manager.generate_content_streaming(final_prompt, request),
+        media_type="text/plain; charset=utf-8"
+    )
+
+
+@app.post("/modify")
+async def modify_visualization(
+    request: Request,
+    prompt: str = Form(..., description="Modification request"),
+    current_code: str = Form(..., description="Current HTML code"),
+    console_logs: str = Form(default="", description="Browser console logs"),
+    prompt_history: List[str] = Form(
+        default=[],
+        description="Previous prompts in conversation"
+    ),
+    files: List[UploadFile] = File(
+        default=[],
+        description="Optional new files to include"
+    )
+):
+    """
+    Modify an existing HTML visualization based on user feedback.
+    
+    This endpoint takes the current code and a modification request,
+    along with conversation history and optional new files, then
+    streams back an updated version.
+    
+    Args:
+        request: FastAPI request object
+        prompt: User's modification request
+        current_code: The current HTML code to modify
+        console_logs: Browser console logs for debugging context
+        prompt_history: List of previous prompts in the conversation
+        files: Optional new files to add to the project
+        
+    Returns:
+        StreamingResponse: Modified HTML code with metadata
+    """
+    # Format conversation history
+    history_str = (
+        "\n".join(f"- {p}" for p in prompt_history)
+        if prompt_history
+        else "No history provided."
+    )
+    
+    # Process uploaded files
+    file_context = await file_processor.process_uploaded_files(files)
+    
+    # Build the complete prompt
+    final_prompt = PROMPT_MODIFY.format(
+        user_prompt=prompt,
+        current_code=current_code,
+        console_logs=console_logs or "No console logs provided.",
+        prompt_history=history_str,
+        file_context=file_context,
+        INSTRUCTIONS_FORMAT=INSTRUCTIONS_FORMAT,
+    )
+    
+    # Stream the response
+    return StreamingResponse(
+        model_manager.generate_content_streaming(final_prompt, request),
+        media_type="text/plain; charset=utf-8"
+    )
+
+
+@app.post("/explain")
+async def explain_code(req: ExplainRequest, request: Request):
+    """
+    Explain or answer questions about existing code.
+    
+    This endpoint allows users to ask questions about their visualization
+    without modifying it. The AI provides explanations and guidance based
+    on the current code.
+    
+    Args:
+        req: Request containing the question and current code
+        request: FastAPI request object
+        
+    Returns:
+        StreamingResponse: AI explanation in Markdown format
+    """
+    final_prompt = PROMPT_FOLLOW_UP.format(
+        user_question=req.question,
+        code_to_explain=req.current_code
+    )
+    
+    return StreamingResponse(
+        model_manager.generate_content_streaming(final_prompt, request),
+        media_type="text/plain; charset=utf-8"
+    )
+
+
+@app.post("/download_zip")
+async def download_zip(
+    html_content: str = Form(..., description="HTML code to package"),
+    files: List[UploadFile] = File(
+        default=[],
+        description="Assets to include in the zip"
+    )
+):
+    """
+    Package HTML code and assets into a downloadable ZIP file.
+    
+    Creates a ZIP archive containing the HTML file as index.html and
+    all uploaded assets in an 'assets' subdirectory, ready for deployment.
+    
+    Args:
+        html_content: The complete HTML code
+        files: Asset files to include (images, data files, etc.)
+        
+    Returns:
+        StreamingResponse: ZIP file download
+    """
+    # Create ZIP file in memory
+    zip_buffer = io.BytesIO()
+    
+    with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zip_file:
+        # Add HTML file
+        zip_file.writestr("index.html", html_content)
+        
+        # Add asset files if provided
+        if files:
+            assets_dir_in_zip = "assets"
+            for file in files:
+                file_content = await file.read()
+                zip_file.writestr(
+                    f"{assets_dir_in_zip}/{file.filename}",
+                    file_content
+                )
+    
+    # Reset buffer position for reading
+    zip_buffer.seek(0)
+    
+    return StreamingResponse(
+        zip_buffer,
+        media_type="application/zip",
+        headers={
+            "Content-Disposition": "attachment; filename=prompt-lab-project.zip"
+        }
+    )
+
+
+# --- Application Entry Point ---
+
+if __name__ == "__main__":
+    import uvicorn
+    
+    uvicorn.run(
+        "main:app",
+        host="0.0.0.0",
+        port=8000,
+        reload=True
+    )

model_managers.py

@@ -0,0 +1,307 @@
+"""
+AI model management for the AI Web Visualization Generator.
+
+This module handles interactions with multiple AI providers (Gemini and Requesty),
+including API key rotation, fallback mechanisms, and streaming response generation.
+"""
+
+import itertools
+from typing import AsyncGenerator, List, Optional
+
+import openai
+import google.generativeai as genai
+from fastapi import Request
+
+from config import AppSettings
+
+
+class GeminiModelManager:
+    """
+    Manages Gemini API interactions with support for multiple API keys.
+    
+    This class handles API key rotation and provides streaming content generation
+    using Google's Generative AI models. If one API key fails, it automatically
+    tries the next available key.
+    
+    Attributes:
+        model_name: Name of the Gemini model to use
+        keys: List of Gemini API keys for rotation
+        generation_config: Configuration for text generation
+    """
+    
+    def __init__(self, config: AppSettings):
+        """
+        Initialize the Gemini model manager.
+        
+        Args:
+            config: Application settings containing API keys and model name
+            
+        Raises:
+            ValueError: If no Gemini API keys are provided
+        """
+        self.model_name = config.primary_model_name
+        self.keys = config.gemini_api_keys_list
+        
+        if not self.keys:
+            raise ValueError(
+                "GeminiModelManager initialized but no GEMINI_API_KEYS were provided."
+            )
+        
+        self.key_cycler = itertools.cycle(self.keys)
+        self.generation_config = genai.GenerationConfig(
+            temperature=0.7,
+            top_p=1,
+            top_k=1
+        )
+        
+        print(
+            f"Gemini Manager initialized for model: {self.model_name} "
+            f"with {len(self.keys)} API key(s)."
+        )
+    
+    async def generate_content_streaming_with_key(
+        self, 
+        prompt: str, 
+        api_key: str
+    ) -> AsyncGenerator[str, None]:
+        """
+        Generate streaming content using a specific API key.
+        
+        Args:
+            prompt: The prompt to send to the model
+            api_key: The Gemini API key to use
+            
+        Yields:
+            str: Chunks of generated text
+            
+        Raises:
+            Exception: If the API call fails
+        """
+        genai.configure(api_key=api_key)
+        model = genai.GenerativeModel(self.model_name)
+        
+        print(
+            f"[Gemini] Attempting generation with model {self.model_name} "
+            f"using key ending in ...{api_key[-4:]}"
+        )
+        
+        stream = await model.generate_content_async(
+            prompt,
+            stream=True,
+            generation_config=self.generation_config
+        )
+        
+        async for chunk in stream:
+            if chunk.text:
+                yield chunk.text
+        
+        print(
+            f"[Gemini] Successfully generated response "
+            f"with key ending in ...{api_key[-4:]}"
+        )
+    
+    async def try_all_keys_streaming(
+        self, 
+        prompt: str
+    ) -> AsyncGenerator[str, None]:
+        """
+        Attempt to generate content using all available API keys.
+        
+        Tries each API key in sequence until one succeeds. If all keys fail,
+        raises the last exception encountered.
+        
+        Args:
+            prompt: The prompt to send to the model
+            
+        Yields:
+            str: Chunks of generated text
+            
+        Raises:
+            Exception: If all API keys fail
+        """
+        last_exception = None
+        
+        for i, api_key in enumerate(self.keys):
+            try:
+                print(
+                    f"[Gemini] Trying key {i+1}/{len(self.keys)} "
+                    f"(ending in ...{api_key[-4:]})"
+                )
+                
+                async for chunk in self.generate_content_streaming_with_key(
+                    prompt, 
+                    api_key
+                ):
+                    yield chunk
+                
+                # If we got here, generation succeeded
+                return
+                
+            except Exception as e:
+                last_exception = e
+                print(f"[Gemini] Key {i+1}/{len(self.keys)} failed: {str(e)}")
+                continue
+        
+        # All keys failed
+        print(
+            f"[Gemini] All {len(self.keys)} API keys failed. "
+            f"Last error: {last_exception}"
+        )
+        raise last_exception or Exception("All Gemini API keys failed")
+
+
+class RequestyModelManager:
+    """
+    Manages Requesty API interactions as a fallback provider.
+    
+    This class provides a fallback mechanism when Gemini API is unavailable
+    or all API keys have been exhausted. It uses the Requesty router service
+    with OpenAI-compatible API.
+    
+    Attributes:
+        model_name: Name of the model to use via Requesty
+        client: Async OpenAI client configured for Requesty
+    """
+    
+    def __init__(self, config: AppSettings):
+        """
+        Initialize the Requesty model manager.
+        
+        Args:
+            config: Application settings containing API key and site info
+        """
+        self.model_name = config.fallback_model_name
+        
+        # Build headers for Requesty service
+        headers = {
+            "HTTP-Referer": config.requesty_site_url,
+            "X-Title": config.requesty_site_name
+        }
+        
+        # Filter out empty header values
+        headers = {k: v for k, v in headers.items() if v}
+        
+        self.client = openai.AsyncOpenAI(
+            api_key=config.requesty_api_key,
+            base_url="https://router.requesty.ai/v1",
+            default_headers=headers
+        )
+        
+        print(f"Requesty Fallback Manager initialized for model: {self.model_name}")
+    
+    async def generate_content_streaming(
+        self, 
+        prompt: str, 
+        request: Request
+    ) -> AsyncGenerator[str, None]:
+        """
+        Generate streaming content using Requesty API.
+        
+        Args:
+            prompt: The prompt to send to the model
+            request: FastAPI request object (for disconnect detection)
+            
+        Yields:
+            str: Chunks of generated text
+        """
+        print(f"[Requesty] Attempting generation with model {self.model_name}")
+        
+        stream = await self.client.chat.completions.create(
+            model=self.model_name,
+            messages=[{"role": "user", "content": prompt}],
+            stream=True
+        )
+        
+        async for chunk in stream:
+            # Check if client disconnected
+            if await request.is_disconnected():
+                print("[Requesty] Client disconnected. Cancelling stream.")
+                break
+            
+            content = chunk.choices[0].delta.content
+            if content:
+                yield content
+        
+        print("[Requesty] Successfully generated response.")
+
+
+class MultiModelManager:
+    """
+    Orchestrates multiple AI model providers with fallback logic.
+    
+    This class manages the coordination between primary (Gemini) and fallback
+    (Requesty) AI providers. It attempts to use Gemini first with all available
+    API keys, then falls back to Requesty if all Gemini attempts fail.
+    
+    Attributes:
+        gemini_manager: Optional Gemini model manager
+        requesty_manager: Requesty model manager (always available)
+    """
+    
+    def __init__(self, config: AppSettings):
+        """
+        Initialize the multi-model manager.
+        
+        Args:
+            config: Application settings for all providers
+        """
+        self.gemini_manager: Optional[GeminiModelManager] = None
+        
+        # Try to initialize Gemini manager if API keys are available
+        if config.gemini_api_keys_list:
+            try:
+                self.gemini_manager = GeminiModelManager(config)
+            except ValueError as e:
+                print(f"Warning: Could not initialize Gemini Manager. {e}")
+        
+        # Always initialize Requesty as fallback
+        self.requesty_manager = RequestyModelManager(config)
+    
+    async def generate_content_streaming(
+        self, 
+        prompt: str, 
+        request: Request
+    ) -> AsyncGenerator[str, None]:
+        """
+        Generate content with automatic fallback between providers.
+        
+        First attempts to use Gemini with all available API keys. If all fail
+        or Gemini is not available, falls back to Requesty. Sends a special
+        [STREAM_RESTART] marker when switching providers.
+        
+        Args:
+            prompt: The prompt to send to the model
+            request: FastAPI request object
+            
+        Yields:
+            str: Chunks of generated text
+        """
+        # Try Gemini first if available
+        if self.gemini_manager:
+            try:
+                print(
+                    "[Orchestrator] Attempting generation with all "
+                    "available Gemini keys..."
+                )
+                
+                async for chunk in self.gemini_manager.try_all_keys_streaming(prompt):
+                    yield chunk
+                
+                # If we got here, generation succeeded
+                return
+                
+            except Exception as e:
+                print(
+                    f"[Orchestrator] All Gemini keys failed with final error: {e}. "
+                    f"Falling back to Requesty."
+                )
+                # Send restart marker to indicate provider switch
+                yield "[STREAM_RESTART]\n"
+        
+        # Use Requesty fallback
+        print("[Orchestrator] Using fallback: Requesty.")
+        async for chunk in self.requesty_manager.generate_content_streaming(
+            prompt, 
+            request
+        ):
+            yield chunk

models.py

@@ -0,0 +1,35 @@
+"""
+Pydantic models for API request/response validation.
+
+This module defines the data models used for API endpoints, ensuring
+proper validation and documentation of request/response formats.
+"""
+
+from pydantic import BaseModel, Field
+
+
+class ExplainRequest(BaseModel):
+    """
+    Request model for the /explain endpoint.
+    
+    Used when users ask questions about existing code.
+    
+    Attributes:
+        question: The user's question about the code
+        current_code: The HTML code to explain or discuss
+    """
+    
+    question: str = Field(
+        ...,
+        min_length=1,
+        max_length=1000,
+        description="User's question about the code",
+        examples=["How does the animation work?"]
+    )
+    
+    current_code: str = Field(
+        ...,
+        min_length=1,
+        description="The current HTML code for context",
+        examples=["<!DOCTYPE html><html>...</html>"]
+    )

prompts.py

@@ -0,0 +1,99 @@
+"""
+Prompt templates for the AI Web Visualization Generator.
+
+This module contains all prompt templates used for generating, modifying,
+and explaining code. Templates are formatted as immutable strings to ensure
+consistency across the application.
+"""
+
+
+INSTRUCTIONS_FORMAT = """
+**YOU ARE A CODE GENERATOR. YOUR SOLE TASK IS TO GENERATE A COMPLETE HTML FILE IN THE FORMAT SPECIFIED BELOW. DO NOT DEVIATE.**
+
+**CRITICAL: Response Format**
+Your entire response MUST strictly follow this structure. Do not add any extra text or explanations outside of these sections.
+
+1.  **[ANALYSIS]...[END_ANALYSIS]**: Explain your game idea and highlevel overview of how it will be implemented.
+2.  **[CHANGES]...[END_CHANGES]**: List changes made. For the first generation, write "Initial generation."
+3.  **[INSTRUCTIONS]...[END_INSTRUCTIONS]**: Write user-facing notes about how to *interact with the final webpage*.
+4.  **HTML Code**: Immediately after `[END_INSTRUCTIONS]`, the complete HTML code MUST begin, starting with `<!DOCTYPE html>`.
+
+**CRITICAL: Asset Handling**
+- If the user provides assets (e.g., `heart.png`), you MUST reference them in your HTML using a relative path like `assets/heart.png`.
+- **DO NOT** write instructions on how to save the file or create folders. The user's environment handles this automatically. Assume the `assets` folder exists.
+
+**Here is a short example of a perfect response:**
+
+[ANALYSIS]
+The user wants a simple red square. I will create a div and style it with CSS inside the HTML file.
+[END_ANALYSIS]
+[CHANGES]
+Initial generation.
+[END_CHANGES]
+[INSTRUCTIONS]
+This is a simple red square. There is no interaction.
+[END_INSTRUCTIONS]
+<!DOCTYPE html>
+<html>
+<head><title>Red Square</title><style>div{width:100px;height:100px;background:red;}</style></head>
+<body><div></div></body>
+</html>
+""".strip()
+
+
+PROMPT_GENERATE = """
+You are an expert web developer tasked with generating a complete, single-file HTML web page.
+You must adhere to the formatting rules and instructions provided below.
+You have creative freedom while designing and developing so make it functional, logical and maitaning asthetics but stick on to the format of response.
+
+
+User's Request: "{user_prompt}"
+
+File Context (assets provided by the user):
+{file_context}
+{INSTRUCTIONS_FORMAT}
+
+Generate the complete response now.
+""".strip()
+
+
+PROMPT_MODIFY = """
+You are an expert web developer tasked with modifying an existing HTML file based on the user's new request.
+You must adhere to the formatting rules and instructions provided below.
+You have creative freedom while designing and developing so make it functional, logical and maitaning asthetics but stick on to the format of response.
+
+Conversation History:
+{prompt_history}
+
+Current Project Code:
+```html
+{current_code}
+```
+
+User's New Request:
+"{user_prompt}"
+
+File Context (new or existing assets provided by the user):
+{file_context}
+{INSTRUCTIONS_FORMAT}
+
+Generate the complete and updated response now.
+""".strip()
+
+
+PROMPT_FOLLOW_UP = """
+You are a versatile AI assistant and expert web developer. The user has an existing web application/visualization and is asking a follow-up question about it.
+User's Question: "{user_question}"
+The Current Code for Context:
+```html
+{code_to_explain}
+```
+
+Your Task:
+- Analyze the user's question.
+- Provide a concise answer without markdown format.
+- Refer to specific parts of the code to make your answer concrete and helpful.
+- Maintain a helpful, collaborative tone.
+
+Generate your helpful response now.
+""".strip()

requirements.txt

@@ -0,0 +1,10 @@
+fastapi
+uvicorn
+python-dotenv
+openai
+pydantic-settings
+google-generativeai
+python-multipart
+pypdf
+openpyxl
+pandas

static/index.html

@@ -0,0 +1,549 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CodeCanvas - AI Code Generation Studio</title>
+    <link rel="stylesheet" href="static/style.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <script type="module" src="https://md-block.verou.me/md-block.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+    <!-- Removed Prism.js and added Monaco Editor -->
+     <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs/loader.js"></script>
+  </head>
+  <body>
+    <!-- Particle Background -->
+    <div class="particle-background">
+      <canvas id="particle-canvas"></canvas>
+    </div>
+
+    <!-- Header -->
+    <header class="header">
+      <div class="header-content">
+        <!-- Added hamburger menu for mobile -->
+        <button class="hamburger-btn" id="hamburger-btn">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+
+        <div class="logo">
+          <i class="fas fa-palette"></i>
+          <span>CodeCanvas</span>
+        </div>
+        <div class="header-actions">
+          <!-- Separated load and save session buttons -->
+          <button class="session-btn" id="load-session-btn">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+              />
+              <polyline points="14,2 14,8 20,8" />
+              <line x1="16" y1="13" x2="8" y2="13" />
+              <line x1="16" y1="17" x2="8" y2="17" />
+              <polyline points="10,9 9,9 8,9" />
+            </svg>
+            <span>Load</span>
+          </button>
+          <button class="session-btn" id="save-session-btn">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"
+              />
+              <polyline points="17,21 17,13 7,13 7,21" />
+              <polyline points="7,3 7,8 15,8" />
+            </svg>
+            <span>Save</span>
+          </button>
+          <button class="theme-toggle" id="theme-toggle">
+            <i class="fas fa-moon"></i>
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <!-- ... existing popups ... -->
+    <!-- Separate Load Session Popup -->
+    <div class="session-popup hidden" id="load-session-popup">
+      <div class="popup-overlay"></div>
+      <div class="popup-content">
+        <div class="popup-header">
+          <h3>
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+              />
+              <polyline points="14,2 14,8 20,8" />
+            </svg>
+            Load Session
+          </h3>
+          <button class="popup-close" id="load-session-popup-close">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <div class="popup-body">
+          <select id="session-select" class="select-input">
+            <option value="">No sessions found</option>
+          </select>
+          <div class="button-row">
+            <button id="load-session-action-btn" class="btn btn-primary">
+              <i class="fas fa-upload"></i> Load Session
+            </button>
+            <button id="delete-session-btn" class="btn btn-destructive">
+              <i class="fas fa-trash"></i> Delete
+            </button>
+          </div>
+          <button id="new-session-btn" class="btn btn-outline">
+            <i class="fas fa-plus"></i> New Session
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Separate Save Session Popup -->
+    <div class="session-popup hidden" id="save-session-popup">
+      <div class="popup-overlay"></div>
+      <div class="popup-content">
+        <div class="popup-header">
+          <h3>
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"
+              />
+              <polyline points="17,21 17,13 7,13 7,21" />
+              <polyline points="7,3 7,8 15,8" />
+            </svg>
+            Save Session
+          </h3>
+          <button class="popup-close" id="save-session-popup-close">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <div class="popup-body">
+          <div class="input-group">
+            <input
+              type="text"
+              id="session-name-input"
+              class="text-input"
+              placeholder="Enter session name..."
+            />
+            <button id="save-session-action-btn" class="btn btn-accent">
+              <i class="fas fa-save"></i> Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Container -->
+    <div class="main-container">
+      <!-- Added mobile overlay for sidebar -->
+      <div class="sidebar-overlay" id="sidebar-overlay"></div>
+
+      <!-- Redesigned sidebar with better organization -->
+      <aside class="sidebar" id="sidebar">
+        <div class="sidebar-content">
+          <!-- Info Panels moved to top -->
+          <div class="info-panels">
+            <details
+              id="analysis-container"
+              class="info-panel info-panel-dull glass-effect hidden"
+            >
+              <summary class="info-header">
+                <i class="fas fa-brain"></i>
+                <span>AI Thoughts</span>
+                <i class="fas fa-chevron-down"></i>
+              </summary>
+              <div id="ai-analysis" class="info-content auto-scroll"></div>
+            </details>
+
+            <details
+              id="changes-container"
+              class="info-panel info-panel-dull glass-effect hidden"
+            >
+              <summary class="info-header">
+                <i class="fas fa-list-ul"></i>
+                <span>Changes Summary</span>
+                <i class="fas fa-chevron-down"></i>
+              </summary>
+              <div
+                id="summary-of-changes"
+                class="info-content auto-scroll"
+              ></div>
+            </details>
+
+            <details
+              id="instructions-container"
+              class="info-panel glass-effect hidden"
+            >
+              <summary class="info-header">
+                <i class="fas fa-lightbulb"></i>
+                <span>Instructions</span>
+                <i class="fas fa-chevron-down"></i>
+              </summary>
+              <div
+                id="game-instructions"
+                class="info-content auto-scroll"
+              ></div>
+            </details>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div class="spinner-container hidden">
+            <div class="spinner">
+              <div class="spinner-ring"></div>
+              <div class="spinner-ring"></div>
+              <div class="spinner-ring"></div>
+            </div>
+            <p class="spinner-text" style="width: 100%; text-align: center">
+              Summoning ideas
+            </p>
+          </div>
+
+          <!-- Initial Generation moved down -->
+          <div
+            id="initial-generation"
+            class="panel generation-panel glass-effect"
+          >
+            <div class="panel-header">
+              <h3><i class="fas fa-magic"></i> Create</h3>
+            </div>
+            <div class="panel-content">
+              <textarea
+                id="prompt-input"
+                class="textarea-input"
+                placeholder="Describe your idea... e.g., A bouncing ball simulation, interactive data visualization, animated landing page..."
+              ></textarea>
+
+              <!-- Redesigned file upload with smaller button -->
+              <div class="file-upload-container">
+                <label
+                  for="generate-file-input"
+                  class="file-upload-label-small"
+                >
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.64 16.2a2 2 0 0 1-2.83-2.83l8.49-8.48"
+                    />
+                  </svg>
+                  Attach Files
+                </label>
+                <input
+                  type="file"
+                  id="generate-file-input"
+                  multiple
+                  class="file-upload-input"
+                />
+                <div id="generate-file-list" class="file-list"></div>
+              </div>
+
+              <button
+                id="generate-btn"
+                class="btn btn-primary btn-large pulse-on-hover"
+              >
+                <i class="fas fa-wand-magic-sparkles"></i>
+                Generate Code
+              </button>
+            </div>
+          </div>
+
+          <!-- Modification Panel moved down -->
+          <div
+            id="modification-panel"
+            class="panel modification-panel glass-effect hidden"
+          >
+            <div class="panel-header">
+              <h3><i class="fas fa-edit"></i> Modify</h3>
+            </div>
+            <div class="panel-content">
+              <textarea
+                id="modification-input"
+                class="textarea-input"
+                placeholder="Describe your changes... e.g., Make it more colorful, add animations, change the layout..."
+              ></textarea>
+
+              <!-- Redesigned file upload with smaller button -->
+              <div class="file-upload-container">
+                <label for="modify-file-input" class="file-upload-label-small">
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.64 16.2a2 2 0 0 1-2.83-2.83l8.49-8.48"
+                    />
+                  </svg>
+                  Attach Files
+                </label>
+                <input
+                  type="file"
+                  id="modify-file-input"
+                  multiple
+                  class="file-upload-input"
+                />
+                <div id="modify-file-list" class="file-list"></div>
+              </div>
+
+              <!-- Console Output -->
+              <div id="console-container" class="console-container hidden">
+                <label class="console-label">
+                  <i class="fas fa-terminal"></i> Console Output
+                </label>
+                <textarea
+                  id="console-output"
+                  class="console-output"
+                  readonly
+                ></textarea>
+              </div>
+
+              <div class="button-grid">
+                <button id="modify-btn" class="btn btn-primary pulse-on-hover">
+                  <i class="fas fa-sync-alt"></i> Apply Changes
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <!-- Main Content -->
+      <main class="main-content">
+        <div class="content-header glass-effect">
+          <div class="view-tabs">
+            <button id="toggle-preview-btn" class="tab-btn active">
+              <i class="fas fa-eye"></i>
+              <span>Live Preview</span>
+            </button>
+            <button id="toggle-code-btn" class="tab-btn">
+              <i class="fas fa-code"></i>
+              <span>Source Code</span>
+            </button>
+          </div>
+          <!-- Moved download and open buttons to content header with SVG icons -->
+          <div class="content-actions">
+            <!-- Version History moved from sidebar -->
+            <div
+              id="version-history-controls"
+              class="version-history-header-compact hidden"
+            >
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M3 3v5h5" />
+                <path d="M3.05 13A9 9 0 1 0 6 5.3L3 8" />
+                <path d="M12 7v5l4 2" />
+              </svg>
+              <select
+                id="version-history-select"
+                class="select-input-header"
+              ></select>
+            </div>
+
+            <button id="copy-code-btn" class="action-btn" title="Copy Code">
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                <path
+                  d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+                />
+              </svg>
+            </button>
+            <!-- Moved download button from sidebar to header -->
+            <button id="download-btn" class="action-btn" title="Download Code">
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="7,10 12,15 17,10" />
+                <line x1="12" y1="15" x2="12" y2="3" />
+              </svg>
+            </button>
+            <!-- Moved open tab button from sidebar to header -->
+            <button
+              id="open-tab-btn"
+              class="action-btn"
+              title="Open in New Window"
+            >
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path
+                  d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+                />
+                <polyline points="15,3 21,3 21,9" />
+                <line x1="10" y1="14" x2="21" y2="3" />
+              </svg>
+            </button>
+            <button
+              id="refresh-preview-btn"
+              class="action-btn hidden"
+              title="Refresh Preview"
+            >
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <polyline points="23,4 23,10 17,10" />
+                <polyline points="1,20 1,14 7,14" />
+                <path
+                  d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div class="content-body">
+          <!-- Enhanced code editor with Monaco Editor -->
+          <div class="code-container hidden">
+            <div class="code-editor-wrapper glass-effect">
+              <!-- Replaced overlapping textarea/pre with single Monaco container -->
+              <div id="monaco-editor" class="monaco-editor-container"></div>
+            </div>
+          </div>
+
+          <!-- Enhanced preview with better scrolling -->
+          <div class="preview-container">
+            <div class="preview-wrapper glass-effect">
+              <iframe
+                id="game-iframe"
+                class="preview-iframe"
+                sandbox="allow-scripts allow-pointer-lock allow-same-origin"
+                title="Generated Visualization"
+              >
+              </iframe>
+              <div class="preview-placeholder">
+                <div class="placeholder-content">
+                  <i class="fas fa-palette floating-icon"></i>
+                  <h3>Ready to Create</h3>
+                  <p>
+                    Describe your idea in the sidebar to get started with AI
+                    code generation
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <!-- Fixed follow-up floating button -->
+    <div class="followup-float" id="followup-float">
+      <button class="followup-btn" id="followup-btn">
+        <i class="fas fa-question-circle"></i>
+      </button>
+      <div class="followup-tooltip">Ask AI</div>
+    </div>
+
+    <div class="followup-popup hidden" id="followup-popup">
+      <div class="popup-overlay"></div>
+      <div class="popup-content">
+        <div class="popup-header">
+          <h3><i class="fas fa-question-circle"></i> Ask AI</h3>
+          <button class="popup-close" id="followup-popup-close">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <div class="popup-body">
+          <textarea
+            id="follow-up-input"
+            class="textarea-input"
+            placeholder="Ask about the code... e.g., How does this work? Can you explain this function?"
+          ></textarea>
+          <button id="follow-up-btn" class="btn btn-accent pulse-on-hover">
+            <i class="fas fa-paper-plane"></i> Ask Question
+          </button>
+
+          <div id="follow-up-spinner" class="spinner-container hidden">
+            <div class="spinner-small">
+              <div class="spinner-ring"></div>
+            </div>
+            <p class="spinner-text">Thinking...</p>
+          </div>
+
+          <div id="follow-up-output-container" class="follow-up-output hidden">
+            <div class="output-header">
+              <i class="fas fa-robot"></i> AI Response
+            </div>
+            <div id="follow-up-output" class="output-content"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="static/script.js"></script>
+  </body>
+</html>

static/script.js

@@ -0,0 +1,1084 @@
+document.addEventListener("DOMContentLoaded", () => {
+  // --- Element Selectors ---
+  const promptInput = document.getElementById("prompt-input");
+  const generateBtn = document.getElementById("generate-btn");
+  const modificationInput = document.getElementById("modification-input");
+  const modifyBtn = document.getElementById("modify-btn");
+  const downloadBtn = document.getElementById("download-btn");
+  const openTabBtn = document.getElementById("open-tab-btn");
+  const copyCodeBtn = document.getElementById("copy-code-btn");
+
+  const togglePreviewBtn = document.getElementById("toggle-preview-btn");
+  const toggleCodeBtn = document.getElementById("toggle-code-btn");
+  const refreshPreviewBtn = document.getElementById("refresh-preview-btn");
+
+  const codeContainer = document.querySelector(".code-container");
+  const previewContainer = document.querySelector(".preview-container");
+  const monacoContainer = document.getElementById("monaco-editor");
+  const gameIframe = document.getElementById("game-iframe");
+
+  const initialGenerationPanel = document.getElementById("initial-generation");
+  const modificationPanel = document.getElementById("modification-panel");
+  const spinner = document.querySelector(".spinner-container");
+
+  const analysisContainer = document.getElementById("analysis-container");
+  const aiAnalysis = document.getElementById("ai-analysis");
+  const changesContainer = document.getElementById("changes-container");
+  const summaryOfChanges = document.getElementById("summary-of-changes");
+  const instructionsContainer = document.getElementById(
+    "instructions-container"
+  );
+  const gameInstructions = document.getElementById("game-instructions");
+
+  const consoleContainer = document.getElementById("console-container");
+  const consoleOutput = document.getElementById("console-output");
+
+  const followUpInput = document.getElementById("follow-up-input");
+  const followUpBtn = document.getElementById("follow-up-btn");
+  const followUpSpinner = document.getElementById("follow-up-spinner");
+  const followUpOutputContainer = document.getElementById(
+    "follow-up-output-container"
+  );
+  const followUpOutput = document.getElementById("follow-up-output");
+
+  const versionHistoryControls = document.getElementById(
+    "version-history-controls"
+  );
+  const versionHistorySelect = document.getElementById(
+    "version-history-select"
+  );
+
+  const loadSessionBtn = document.getElementById("load-session-btn");
+  const saveSessionBtn = document.getElementById("save-session-btn");
+  const loadSessionPopup = document.getElementById("load-session-popup");
+  const saveSessionPopup = document.getElementById("save-session-popup");
+  const loadSessionPopupClose = document.getElementById(
+    "load-session-popup-close"
+  );
+  const saveSessionPopupClose = document.getElementById(
+    "save-session-popup-close"
+  );
+
+  const followupFloat = document.getElementById("followup-float");
+  const followupBtn = document.getElementById("followup-btn");
+  const followupPopup = document.getElementById("followup-popup");
+  const followupPopupClose = document.getElementById("followup-popup-close");
+
+  const sessionSelect = document.getElementById("session-select");
+  const sessionNameInput = document.getElementById("session-name-input");
+  const loadSessionActionBtn = document.getElementById(
+    "load-session-action-btn"
+  );
+  const saveSessionActionBtn = document.getElementById(
+    "save-session-action-btn"
+  );
+  const deleteSessionBtn = document.getElementById("delete-session-btn");
+  const newSessionBtn = document.getElementById("new-session-btn");
+
+  const hamburgerBtn = document.getElementById("hamburger-btn");
+  const sidebar = document.getElementById("sidebar");
+  const sidebarOverlay = document.getElementById("sidebar-overlay");
+  const themeToggle = document.getElementById("theme-toggle");
+
+  const generateFileInput = document.getElementById("generate-file-input");
+  const generateFileList = document.getElementById("generate-file-list");
+  const modifyFileInput = document.getElementById("modify-file-input");
+  const modifyFileList = document.getElementById("modify-file-list");
+
+  // --- State Variables ---
+  let promptHistory = [];
+  let consoleLogs = [];
+  let abortController = null;
+  let versionHistory = [];
+  let currentSessionId = null;
+  const clientSideAssets = new Map();
+  const DB_NAME = "CodeCanvasDB";
+  const DB_VERSION = 1;
+  const STORE_NAME = "sessions";
+  let marked = null;
+  let db = null;
+  let monacoEditor = null;
+  let monaco = null;
+  let lastScrollPosition = { lineNumber: 1, column: 1 };
+  let hasGeneratedContent = false;
+  const mainContainer = document.querySelector(".main-container");
+
+  let autoScrollEnabled = true;
+
+  // --- IndexedDB Functions ---
+  function initDB() {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(DB_NAME, DB_VERSION);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        db = request.result;
+        resolve(db);
+      };
+      request.onupgradeneeded = (event) => {
+        db = event.target.result;
+        if (!db.objectStoreNames.contains(STORE_NAME)) {
+          const store = db.createObjectStore(STORE_NAME, { keyPath: "id" });
+          store.createIndex("name", "name", { unique: false });
+          store.createIndex("savedAt", "savedAt", { unique: false });
+        }
+      };
+    });
+  }
+
+  async function saveSessionToDB(sessionData) {
+    if (!db) await initDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([STORE_NAME], "readwrite");
+      const store = transaction.objectStore(STORE_NAME);
+      const request = store.put(sessionData);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async function getSessionsFromDB() {
+    if (!db) await initDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([STORE_NAME], "readonly");
+      const store = transaction.objectStore(STORE_NAME);
+      const request = store.getAll();
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async function deleteSessionFromDB(sessionId) {
+    if (!db) await initDB();
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction([STORE_NAME], "readwrite");
+      const store = transaction.objectStore(STORE_NAME);
+      const request = store.delete(sessionId);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // --- Core Application Logic ---
+
+  class StreamParser {
+    constructor() {
+      this.reset();
+    }
+
+    reset() {
+      this.analysis = "";
+      this.changes = "";
+      this.instructions = "";
+      this.html = "";
+      this.currentSection = null;
+      this.buffer = "";
+    }
+
+    processChunk(chunk) {
+      this.buffer += chunk;
+      const lines = this.buffer.split("\n");
+      this.buffer = lines.pop();
+
+      for (const line of lines) {
+        const trimmedLine = line.trim();
+
+        if (trimmedLine === "[ANALYSIS]") {
+          this.currentSection = "ANALYSIS";
+          continue;
+        }
+        if (trimmedLine === "[END_ANALYSIS]") {
+          this.currentSection = null;
+          continue;
+        }
+        if (trimmedLine === "[CHANGES]") {
+          this.currentSection = "CHANGES";
+          continue;
+        }
+        if (trimmedLine === "[END_CHANGES]") {
+          this.currentSection = null;
+          continue;
+        }
+        if (trimmedLine === "[INSTRUCTIONS]") {
+          this.currentSection = "INSTRUCTIONS";
+          continue;
+        }
+        if (trimmedLine === "[END_INSTRUCTIONS]") {
+          this.currentSection = "HTML";
+          continue;
+        }
+
+        switch (this.currentSection) {
+          case "ANALYSIS":
+            this.analysis += line + "\n";
+            break;
+          case "CHANGES":
+            this.changes += line + "\n";
+            break;
+          case "INSTRUCTIONS":
+            this.instructions += line + "\n";
+            break;
+          case "HTML":
+            this.html += line + "\n";
+            break;
+          default:
+            if (
+              trimmedLine.startsWith("<!DOCTYPE html>") ||
+              this.currentSection === "HTML"
+            ) {
+              this.currentSection = "HTML";
+              this.html += line + "\n";
+            }
+            break;
+        }
+      }
+    }
+
+    /**
+     * BUGFIX: Returns the current state NON-DESTRUCTIVELY for live UI updates.
+     * It does NOT process the buffer, preventing duplication errors.
+     */
+    getCurrentState() {
+      return {
+        analysis: this.analysis.trim(),
+        changes: this.changes.trim(),
+        instructions: this.instructions.trim(),
+        html: this.cleanHtml(this.html),
+      };
+    }
+
+    /**
+     * BUGFIX: Finalizes the stream by processing the remaining buffer.
+     * This should ONLY be called once at the very end.
+     */
+    finalize() {
+      if (this.buffer) {
+        // Assume any remaining buffer content belongs to the last active section, defaulting to HTML
+        const targetSection = this.currentSection || "HTML";
+        switch (targetSection) {
+          case "ANALYSIS":
+            this.analysis += this.buffer;
+            break;
+          case "CHANGES":
+            this.changes += this.buffer;
+            break;
+          case "INSTRUCTIONS":
+            this.instructions += this.buffer;
+            break;
+          case "HTML":
+          default:
+            this.html += this.buffer;
+            break;
+        }
+        this.buffer = ""; // Clear the buffer after finalizing
+      }
+      return this.getCurrentState();
+    }
+
+    cleanHtml(htmlString) {
+      return htmlString.replace(/^```html\s*|\s*```$/g, "").trim();
+    }
+  }
+
+  async function streamResponse(url, body, targetElement) {
+    setLoading(true, url);
+    const parser = new StreamParser();
+
+    if (!targetElement) {
+      setView("code");
+      if (monacoEditor) monacoEditor.setValue("");
+      clearInfoPanels();
+    }
+
+    if (abortController) abortController.abort();
+    abortController = new AbortController();
+
+    try {
+      const isFormData = body instanceof FormData;
+      const response = await fetch(url, {
+        method: "POST",
+        body: isFormData ? body : JSON.stringify(body),
+        headers: isFormData ? {} : { "Content-Type": "application/json" },
+        signal: abortController.signal,
+      });
+
+      if (!response.ok)
+        throw new Error(`HTTP error! status: ${response.status}`);
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        let chunk = decoder.decode(value, { stream: true });
+
+        if (chunk.includes("[STREAM_RESTART]")) {
+          console.warn("Stream restart signal received.");
+          showNotification(
+            "Primary model failed; switching to fallback.",
+            "warning"
+          );
+          parser.reset();
+          clearInfoPanels();
+          if (monacoEditor) monacoEditor.setValue("");
+          chunk = chunk.replace(/\[STREAM_RESTART\]\s*\n?/, "");
+        }
+
+        if (targetElement) {
+          targetElement.textContent += chunk;
+          targetElement.scrollTop = targetElement.scrollHeight;
+        } else {
+          parser.processChunk(chunk);
+          // BUGFIX: Use the non-destructive getter for live updates
+          const currentData = parser.getCurrentState();
+          updateUIFromStream(currentData);
+        }
+      }
+
+      if (!targetElement) {
+        const prompt = isFormData ? body.get("prompt") : body.prompt;
+        // BUGFIX: Call finalize() only once at the end of the stream
+        const finalData = parser.finalize();
+
+        // Final UI update with the fully parsed data
+        updateUIFromStream(finalData);
+        if (monacoEditor) {
+          const totalLines = monacoEditor.getModel().getLineCount();
+          monacoEditor.revealLineNearTop(
+            totalLines,
+            monaco.editor.ScrollType.Smooth
+          );
+        }
+
+        // Update iframe and save version with the final, clean data
+        updateIframe(finalData.html);
+        saveVersion({ ...finalData, prompt });
+        showModificationPanel();
+        setTimeout(minimizeInfoPanels, 2000);
+      }
+    } catch (error) {
+      if (error.name !== "AbortError") {
+        console.error("Streaming failed:", error);
+        const errorMessage = `Error: Failed to get response. Details: ${error.message}`;
+        if (targetElement) {
+          targetElement.textContent = "Error: Could not get response.";
+        } else if (monacoEditor) {
+          monacoEditor.setValue(errorMessage);
+          setView("code");
+        }
+      }
+    } finally {
+      setLoading(false, url);
+      abortController = null;
+    }
+  }
+
+  function updateUIFromStream({ analysis, changes, instructions, html }) {
+    if (analysis) {
+      analysisContainer.classList.remove("hidden");
+      aiAnalysis.innerHTML = marked ? marked.parse(analysis) : analysis;
+      aiAnalysis.scrollTop = aiAnalysis.scrollHeight;
+    }
+
+    if (changes) {
+      changesContainer.classList.remove("hidden");
+      summaryOfChanges.innerHTML = marked ? marked.parse(changes) : changes;
+      summaryOfChanges.scrollTop = summaryOfChanges.scrollHeight;
+    }
+
+    if (instructions) {
+      instructionsContainer.classList.remove("hidden");
+      gameInstructions.innerHTML = marked
+        ? marked.parse(instructions)
+        : instructions;
+      gameInstructions.scrollTop = gameInstructions.scrollHeight;
+    }
+
+    if (html && monacoEditor) {
+      const currentContent = monacoEditor.getValue();
+      if (html !== currentContent) {
+        const model = monacoEditor.getModel();
+
+        monacoEditor.executeEdits(null, [
+          { range: model.getFullModelRange(), text: html },
+        ]);
+
+        // --- Force scroll to bottom every time ---
+        const scrollHeight = monacoEditor.getScrollHeight();
+        monacoEditor.setScrollTop(scrollHeight);
+      }
+    }
+  }
+
+  // --- Client-Side Asset Handling ---
+  function handleFileSelection(event, fileListElement) {
+    for (const file of event.target.files) {
+      if (!clientSideAssets.has(file.name)) {
+        clientSideAssets.set(file.name, {
+          file: file,
+          blobUrl: URL.createObjectURL(file),
+        });
+      }
+    }
+    renderSelectedFiles(fileListElement);
+    event.target.value = "";
+  }
+
+  function renderSelectedFiles(fileListElement) {
+    fileListElement.innerHTML = "";
+    fileListElement.classList.toggle("hidden", clientSideAssets.size === 0);
+    clientSideAssets.forEach((asset, fileName) => {
+      const fileItem = document.createElement("div");
+      fileItem.className = "file-item";
+      const nameSpan = document.createElement("span");
+      nameSpan.textContent = fileName;
+      const removeBtn = document.createElement("button");
+      removeBtn.innerHTML = "&times;";
+      removeBtn.className = "file-remove-btn";
+      removeBtn.onclick = () => {
+        URL.revokeObjectURL(asset.blobUrl);
+        clientSideAssets.delete(fileName);
+        renderSelectedFiles(generateFileList);
+        renderSelectedFiles(modifyFileList);
+      };
+      fileItem.appendChild(nameSpan);
+      fileItem.appendChild(removeBtn);
+      fileListElement.appendChild(fileItem);
+    });
+  }
+
+  async function deserializeAssets(assets) {
+    clientSideAssets.clear();
+    for (const assetData of assets) {
+      try {
+        const blob = new Blob([assetData.data], { type: assetData.type });
+        const file = new File([blob], assetData.fileName, {
+          type: assetData.type,
+        });
+        clientSideAssets.set(assetData.fileName, {
+          file: file,
+          blobUrl: URL.createObjectURL(blob),
+        });
+      } catch (error) {
+        console.error(`Failed to restore asset ${assetData.fileName}:`, error);
+      }
+    }
+    renderSelectedFiles(generateFileList);
+    renderSelectedFiles(modifyFileList);
+  }
+
+  // --- Event Handlers ---
+  loadSessionBtn.addEventListener("click", () => {
+    populateSessionDropdown();
+    openPopup(loadSessionPopup);
+  });
+
+  saveSessionBtn.addEventListener("click", () => {
+    openPopup(saveSessionPopup);
+  });
+
+  generateFileInput.addEventListener("change", (e) =>
+    handleFileSelection(e, generateFileList)
+  );
+  modifyFileInput.addEventListener("change", (e) =>
+    handleFileSelection(e, modifyFileList)
+  );
+
+  generateBtn.addEventListener("click", async () => {
+    const prompt = promptInput.value.trim();
+    if (!prompt) {
+      showNotification("Please enter a prompt", "error");
+      return;
+    }
+    hasGeneratedContent = true;
+    updateLayoutState();
+    versionHistory = [];
+    promptHistory = [];
+    currentSessionId = null;
+    sessionNameInput.value = prompt.substring(0, 50);
+    const formData = new FormData();
+    formData.append("prompt", prompt);
+    clientSideAssets.forEach((asset) =>
+      formData.append("files", asset.file, asset.file.name)
+    );
+    streamResponse("/generate", formData);
+    if (window.innerWidth <= 768) closeSidebar();
+  });
+
+  modifyBtn.addEventListener("click", async () => {
+    const modification = modificationInput.value.trim();
+    if (!modification) {
+      showNotification("Please enter a modification request", "error");
+      return;
+    }
+    hasGeneratedContent = true;
+    updateLayoutState();
+    const currentHtml = monacoEditor ? monacoEditor.getValue() : "";
+    if (!currentHtml) return alert("There is no code to modify!");
+    const formData = new FormData();
+    formData.append("prompt", modification);
+    formData.append("current_code", currentHtml);
+    formData.append("console_logs", consoleLogs.join("\n"));
+    promptHistory.forEach((p) => formData.append("prompt_history", p));
+    clientSideAssets.forEach((asset) =>
+      formData.append("files", asset.file, asset.file.name)
+    );
+    streamResponse("/modify", formData);
+    if (window.innerWidth <= 768) closeSidebar();
+  });
+
+async function streamResponseMarkdown(url, body, targetElement) {
+  setLoading(true, url);
+  if (abortController) abortController.abort();
+  abortController = new AbortController();
+  
+  let accumulatedText = "";
+  
+  try {
+    const isFormData = body instanceof FormData;
+    const response = await fetch(url, {
+      method: "POST",
+      body: isFormData ? body : JSON.stringify(body),
+      headers: isFormData ? {} : { "Content-Type": "application/json" },
+      signal: abortController.signal,
+    });
+    if (!response.ok)
+      throw new Error(`HTTP error! status: ${response.status}`);
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    
+    // Show loading indicator while streaming
+    targetElement.innerHTML = '<div class="streaming-indicator">Receiving response...</div>';
+    
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      let chunk = decoder.decode(value, { stream: true });
+      accumulatedText += chunk;
+    }
+    
+    // Render markdown only once after all text is received
+    const md = window.markdownit();
+    targetElement.innerHTML = md.render(accumulatedText);
+    targetElement.scrollTop = targetElement.scrollHeight;
+    
+  } catch (error) {
+    if (error.name !== "AbortError") {
+      console.error("Streaming failed:", error);
+      targetElement.textContent = "Error: Could not get response.";
+    }
+  } finally {
+    setLoading(false, url);
+    abortController = null;
+  }
+}
+
+  followUpBtn.addEventListener("click", () => {
+    const question = followUpInput.value.trim();
+    if (!question) return alert("Please ask a question!");
+    const currentHtml = monacoEditor ? monacoEditor.getValue() : "";
+    if (!currentHtml) return alert("There is no code to ask about!");
+    followUpOutputContainer.classList.remove("hidden");
+    followUpOutput.innerHTML = "";
+    streamResponseMarkdown(
+      "/explain",
+      { question, current_code: currentHtml },
+      followUpOutput
+    );
+  });
+
+  downloadBtn.addEventListener("click", async () => {
+    const html = monacoEditor ? monacoEditor.getValue() : "";
+    if (!html) return alert("No code to download!");
+    if (clientSideAssets.size === 0) {
+      const blob = new Blob([html], { type: "text/html" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "creation.html";
+      a.click();
+      URL.revokeObjectURL(url);
+      return;
+    }
+    const formData = new FormData();
+    formData.append("html_content", html);
+    clientSideAssets.forEach((asset) =>
+      formData.append("files", asset.file, asset.file.name)
+    );
+    try {
+      const response = await fetch("/download_zip", {
+        method: "POST",
+        body: formData,
+      });
+      if (!response.ok)
+        throw new Error(`Failed to create zip file: ${response.statusText}`);
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "promptlab-project.zip";
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Download failed:", error);
+      alert("Failed to download project as a zip. Check the console.");
+    }
+  });
+
+  openTabBtn.addEventListener("click", () => {
+    const html = monacoEditor ? monacoEditor.getValue() : "";
+    if (!html) return alert("No code to open!");
+    const processedHtml = replaceAssetPathsWithBlobs(html);
+    const blob = new Blob([processedHtml], { type: "text/html" });
+    const url = URL.createObjectURL(blob);
+    window.open(url, "_blank");
+  });
+
+  copyCodeBtn.addEventListener("click", async () => {
+    const code = monacoEditor ? monacoEditor.getValue() : "";
+    if (!code) return;
+    try {
+      await navigator.clipboard.writeText(code);
+      const originalContent = copyCodeBtn.innerHTML;
+      copyCodeBtn.innerHTML =
+        '<i class="fas fa-check"></i> <span>Copied!</span>';
+      setTimeout(() => {
+        copyCodeBtn.innerHTML = originalContent;
+      }, 2000);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  });
+
+  refreshPreviewBtn.addEventListener("click", () => {
+    const code = monacoEditor ? monacoEditor.getValue() : "";
+    updateIframe(code);
+    setView("preview");
+  });
+
+  togglePreviewBtn.addEventListener("click", () => setView("preview"));
+  toggleCodeBtn.addEventListener("click", () => setView("code"));
+
+  // --- UI and State Management Functions ---
+  function replaceAssetPathsWithBlobs(htmlContent) {
+    if (clientSideAssets.size === 0) return htmlContent;
+    let processedHtml = htmlContent;
+    clientSideAssets.forEach((asset, fileName) => {
+      const safeFileName = fileName.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+      const regex = new RegExp(`(['"])assets/${safeFileName}\\1`, "g");
+      processedHtml = processedHtml.replace(regex, `$1${asset.blobUrl}$1`);
+    });
+    return processedHtml;
+  }
+
+  function updateIframe(htmlContent) {
+    const consoleLoggerScript = `<script>
+        const originalConsole = { ...window.console };
+        const postLog = (type, args) => { try { const message = args.map(arg => (typeof arg === 'object' && arg !== null) ? JSON.stringify(arg) : String(arg)).join(' '); window.parent.postMessage({ type: 'console', level: type, message }, '*'); } catch (e) {} };
+        window.console.log = (...args) => { postLog('log', args); originalConsole.log(...args); };
+        window.console.error = (...args) => { postLog('error', args); originalConsole.error(...args); };
+        window.console.warn = (...args) => { postLog('warn', args); originalConsole.warn(...args); };
+        window.addEventListener('error', e => postLog('error', [e.message, 'at', e.filename + ':' + e.lineno]));
+    </script>`;
+    consoleLogs = [];
+    updateConsoleDisplay();
+    const processedHtml = replaceAssetPathsWithBlobs(htmlContent);
+    const enhancedHtml = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>html, body { margin: 0; padding: 0; overflow: auto; min-height: 100vh; box-sizing: border-box; } * { box-sizing: border-box; }</style>${consoleLoggerScript}</head><body>${processedHtml}</body></html>`;
+    gameIframe.srcdoc = enhancedHtml;
+  }
+
+  window.addEventListener("message", (event) => {
+    if (event.data && event.data.type === "console") {
+      const { level, message } = event.data;
+      consoleLogs.push(`[${level.toUpperCase()}] ${message}`);
+      updateConsoleDisplay();
+    }
+  });
+
+  function updateConsoleDisplay() {
+    consoleContainer.classList.toggle("hidden", consoleLogs.length === 0);
+    if (consoleLogs.length > 0) {
+      consoleOutput.value = consoleLogs.join("\n");
+      consoleOutput.scrollTop = consoleOutput.scrollHeight;
+    }
+  }
+
+  function setView(view) {
+    if (view === "code" && monacoEditor) {
+      lastScrollPosition = monacoEditor.getPosition() || {
+        lineNumber: 1,
+        column: 1,
+      };
+    }
+    previewContainer.classList.toggle("hidden", view !== "preview");
+    codeContainer.classList.toggle("hidden", view === "preview");
+    togglePreviewBtn.classList.toggle("active", view === "preview");
+    toggleCodeBtn.classList.toggle("active", view !== "preview");
+    refreshPreviewBtn.classList.toggle("hidden", view === "preview");
+
+    if (view === "code" && monacoEditor) {
+      setTimeout(() => {
+        monacoEditor.layout();
+        monacoEditor.setPosition(lastScrollPosition);
+        monacoEditor.revealPosition(lastScrollPosition);
+      }, 100);
+    }
+  }
+
+  function setLoading(isLoading, url) {
+    if (url === "/explain") {
+      followUpSpinner.classList.toggle("hidden", !isLoading);
+      followUpBtn.disabled = isLoading;
+    } else {
+      spinner.classList.toggle("hidden", !isLoading);
+      generateBtn.disabled = isLoading;
+      modifyBtn.disabled = isLoading;
+    }
+  }
+
+  function showModificationPanel() {
+    initialGenerationPanel.classList.add("hidden");
+    modificationPanel.classList.remove("hidden");
+    followupFloat.classList.add("show");
+    renderSelectedFiles(generateFileList);
+    renderSelectedFiles(modifyFileList);
+  }
+
+  function clearInfoPanels() {
+    analysisContainer.classList.add("hidden");
+    changesContainer.classList.add("hidden");
+    instructionsContainer.classList.add("hidden");
+    aiAnalysis.innerHTML = "";
+    summaryOfChanges.innerHTML = "";
+    gameInstructions.innerHTML = "";
+  }
+
+  function minimizeInfoPanels() {
+    [analysisContainer, changesContainer, instructionsContainer].forEach(
+      (panel) => {
+        if (!panel.classList.contains("hidden")) {
+          panel.open = false;
+        }
+      }
+    );
+  }
+
+  function updateLayoutState() {
+    mainContainer.classList.toggle("centered", !hasGeneratedContent);
+  }
+
+  // --- Session, Version, and UI Initialization ---
+  function saveVersion(versionData) {
+    versionHistory.push(versionData);
+    promptHistory = versionHistory.map((v) => v.prompt);
+    updateVersionHistoryUI();
+  }
+
+  function updateVersionHistoryUI() {
+    versionHistoryControls.classList.toggle(
+      "hidden",
+      versionHistory.length === 0
+    );
+    versionHistorySelect.innerHTML = versionHistory
+      .map(
+        (version, index) =>
+          `<option value="${index}">V${index + 1}: ${version.prompt.substring(
+            0,
+            50
+          )}...</option>`
+      )
+      .reverse()
+      .join("");
+    versionHistorySelect.value = versionHistory.length - 1;
+  }
+
+  function loadVersion(index) {
+    const version = versionHistory[index];
+    if (!version) return;
+    if (monacoEditor) {
+      monacoEditor.setValue(version.html || "");
+    }
+    updateIframe(version.html || "");
+    clearInfoPanels();
+    if (version.analysis) {
+      analysisContainer.classList.remove("hidden");
+      aiAnalysis.innerHTML = marked.parse(version.analysis);
+    }
+    if (version.changes) {
+      changesContainer.classList.remove("hidden");
+      summaryOfChanges.innerHTML = marked.parse(version.changes);
+    }
+    if (version.instructions) {
+      instructionsContainer.classList.remove("hidden");
+      gameInstructions.innerHTML = marked.parse(version.instructions);
+    }
+    promptHistory = versionHistory.slice(0, index + 1).map((v) => v.prompt);
+  }
+
+  versionHistorySelect.addEventListener("change", (e) =>
+    loadVersion(Number(e.target.value))
+  );
+
+  async function populateSessionDropdown() {
+    try {
+      const sessions = await getSessionsFromDB();
+      if (sessions.length === 0) {
+        sessionSelect.innerHTML = '<option value="">No sessions found</option>';
+        return;
+      }
+      sessionSelect.innerHTML = sessions
+        .sort((a, b) => new Date(b.savedAt) - new Date(a.savedAt))
+        .map(
+          (s) =>
+            `<option value="${s.id}">${s.name} - ${new Date(
+              s.savedAt
+            ).toLocaleDateString()}</option>`
+        )
+        .join("");
+    } catch (error) {
+      console.error("Error loading sessions:", error);
+      sessionSelect.innerHTML =
+        '<option value="">Error loading sessions</option>';
+    }
+  }
+
+  async function saveCurrentSession() {
+    const sessionName = sessionNameInput.value.trim();
+    if (!sessionName) return alert("Please enter a session name.");
+    if (versionHistory.length === 0) return alert("Nothing to save.");
+
+    try {
+      saveSessionActionBtn.disabled = true;
+      saveSessionActionBtn.innerHTML =
+        '<i class="fas fa-spinner fa-spin"></i> Saving...';
+
+      const assets = [];
+      for (const [fileName, asset] of clientSideAssets.entries()) {
+        const arrayBuffer = await asset.file.arrayBuffer();
+        assets.push({ fileName, data: arrayBuffer, type: asset.file.type });
+      }
+
+      const sessionData = {
+        id: currentSessionId || Date.now(),
+        name: sessionName,
+        history: versionHistory,
+        assets,
+        savedAt: new Date().toISOString(),
+      };
+
+      await saveSessionToDB(sessionData);
+      currentSessionId = sessionData.id;
+
+      saveSessionActionBtn.innerHTML = '<i class="fas fa-check"></i> Saved!';
+      setTimeout(() => {
+        closePopup(saveSessionPopup);
+        saveSessionActionBtn.disabled = false;
+        saveSessionActionBtn.innerHTML = '<i class="fas fa-save"></i> Save';
+      }, 1500);
+    } catch (error) {
+      console.error("Error saving session:", error);
+      alert(`Failed to save session: ${error.message}`);
+      saveSessionActionBtn.disabled = false;
+      saveSessionActionBtn.innerHTML = '<i class="fas fa-save"></i> Save';
+    }
+  }
+
+  async function loadSelectedSession() {
+    const sessionId = sessionSelect.value;
+    if (!sessionId) return alert("Please select a session to load.");
+    try {
+      const sessions = await getSessionsFromDB();
+      const session = sessions.find((s) => s.id === Number(sessionId));
+      if (!session) return alert("Session not found.");
+
+      versionHistory = session.history || [];
+      currentSessionId = session.id;
+      sessionNameInput.value = session.name;
+
+      clientSideAssets.forEach((asset) => URL.revokeObjectURL(asset.blobUrl));
+      clientSideAssets.clear();
+      if (session.assets) {
+        await deserializeAssets(session.assets);
+      }
+
+      updateVersionHistoryUI();
+      if (versionHistory.length > 0) {
+        loadVersion(versionHistory.length - 1);
+      }
+      showModificationPanel();
+      hasGeneratedContent = true;
+      updateLayoutState();
+      closePopup(loadSessionPopup);
+    } catch (error) {
+      console.error("Failed to load session:", error);
+      alert(`Failed to load session: ${error.message}`);
+    }
+  }
+
+  async function deleteSelectedSession() {
+    const sessionId = sessionSelect.value;
+    if (
+      !sessionId ||
+      !confirm(
+        "Are you sure you want to delete this session? This cannot be undone."
+      )
+    )
+      return;
+    try {
+      await deleteSessionFromDB(Number(sessionId));
+      if (currentSessionId === Number(sessionId)) {
+        startNewSession();
+      }
+      await populateSessionDropdown();
+    } catch (error) {
+      console.error("Error deleting session:", error);
+      alert(`Failed to delete session: ${error.message}`);
+    }
+  }
+
+  function startNewSession() {
+    versionHistory = [];
+    promptHistory = [];
+    currentSessionId = null;
+    sessionNameInput.value = "";
+    promptInput.value = "";
+    modificationInput.value = "";
+    clientSideAssets.forEach((asset) => URL.revokeObjectURL(asset.blobUrl));
+    clientSideAssets.clear();
+    renderSelectedFiles(generateFileList);
+    renderSelectedFiles(modifyFileList);
+    if (monacoEditor) monacoEditor.setValue("");
+    updateIframe("");
+    clearInfoPanels();
+    initialGenerationPanel.classList.remove("hidden");
+    modificationPanel.classList.add("hidden");
+    followupFloat.classList.remove("show");
+    versionHistoryControls.classList.add("hidden");
+    hasGeneratedContent = false;
+    updateLayoutState();
+    closePopup(loadSessionPopup);
+  }
+
+  saveSessionActionBtn.addEventListener("click", saveCurrentSession);
+  loadSessionActionBtn.addEventListener("click", loadSelectedSession);
+  deleteSessionBtn.addEventListener("click", deleteSelectedSession);
+  newSessionBtn.addEventListener("click", startNewSession);
+
+  // --- Popups and Mobile Menu ---
+  function openPopup(popup) {
+    popup.classList.remove("hidden");
+  }
+  function closePopup(popup) {
+    popup.classList.add("hidden");
+  }
+
+  loadSessionPopupClose.addEventListener("click", () =>
+    closePopup(loadSessionPopup)
+  );
+  saveSessionPopupClose.addEventListener("click", () =>
+    closePopup(saveSessionPopup)
+  );
+  followupPopupClose.addEventListener("click", () => closePopup(followupPopup));
+
+  [loadSessionPopup, saveSessionPopup, followupPopup].forEach((popup) => {
+    popup.addEventListener("click", (e) => {
+      if (e.target.classList.contains("popup-overlay")) closePopup(popup);
+    });
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      [loadSessionPopup, saveSessionPopup, followupPopup].forEach(closePopup);
+    }
+  });
+
+  hamburgerBtn.addEventListener("click", () => {
+    sidebar.classList.toggle("open");
+    sidebarOverlay.classList.toggle("show");
+  });
+  sidebarOverlay.addEventListener("click", () => {
+    sidebar.classList.remove("open");
+    sidebarOverlay.classList.remove("show");
+  });
+
+  // --- Theme ---
+  function initTheme() {
+    const theme = localStorage.getItem("theme") || "dark";
+    document.documentElement.setAttribute("data-theme", theme);
+    updateThemeIcon(theme);
+    updateMonacoTheme(theme);
+  }
+
+  function toggleTheme() {
+    const current = document.documentElement.getAttribute("data-theme");
+    const next = current === "dark" ? "light" : "dark";
+    document.documentElement.setAttribute("data-theme", next);
+    localStorage.setItem("theme", next);
+    updateThemeIcon(next);
+    updateMonacoTheme(next);
+  }
+
+  function updateThemeIcon(theme) {
+    themeToggle.querySelector("i").className =
+      theme === "dark" ? "fas fa-sun" : "fas fa-moon";
+  }
+
+  function updateMonacoTheme(theme) {
+    if (monaco && monaco.editor) {
+      monaco.editor.setTheme(theme === "dark" ? "vs-dark" : "vs");
+    }
+  }
+
+  themeToggle.addEventListener("click", toggleTheme);
+
+  // --- Initialization ---
+  function initializeMonacoEditor() {
+    if (typeof require === "undefined") {
+      console.error("Monaco Editor loader not available.");
+      return;
+    }
+    require.config({
+      paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs" },
+    });
+    require(["vs/editor/editor.main"], () => {
+      monaco = window.monaco;
+      const theme = localStorage.getItem("theme") || "dark";
+      monacoEditor = monaco.editor.create(monacoContainer, {
+        value:
+          "// AI code will appear here. Describe your idea to get started!",
+        language: "html",
+        theme: theme === "dark" ? "vs-dark" : "vs",
+        automaticLayout: true,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        wordWrap: "on",
+      });
+
+      monacoEditor.onDidScrollChange((e) => {
+        const { scrollTop, scrollHeight, height } = e;
+        autoScrollEnabled = scrollTop + height >= scrollHeight - 50;
+      });
+    });
+  }
+
+  async function initializeApp() {
+    if (window.marked) {
+      marked = window.marked;
+    } else {
+      console.warn("Marked.js not loaded. AI thoughts will be unformatted.");
+    }
+    await initDB();
+    initTheme();
+    initializeMonacoEditor();
+    updateLayoutState();
+    populateSessionDropdown();
+  }
+
+  followupBtn.addEventListener("click", () => openPopup(followupPopup));
+
+  function showNotification(message, type) {
+    // A simple alert, can be replaced with a more sophisticated notification system
+    alert(`[${type.toUpperCase()}] ${message}`);
+  }
+
+  initializeApp();
+});

static/style.css

@@ -0,0 +1,1371 @@
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  /* Design System Colors */
+  --bg-primary: #f9fafb;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f3f4f6;
+  --text-primary: #1f2937;
+  --text-secondary: #6b7280;
+  --text-muted: #9ca3af;
+  --primary: #0891b2;
+  --primary-hover: #0e7490;
+  --accent: #f59e0b;
+  --accent-hover: #d97706;
+  --success: #10b981;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --border: #e5e7eb;
+  --border-light: #f3f4f6;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --radius: 8px;
+  --radius-sm: 4px;
+  --radius-lg: 12px;
+  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --muted-foreground: #9ca3af;
+  --foreground: #1f2937;
+  --card: #ffffff;
+}
+
+[data-theme="dark"] {
+  --bg-primary: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-tertiary: #334155;
+  --text-primary: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --primary: #0ea5e9;
+  --primary-hover: #0284c7;
+  --accent: #fbbf24;
+  --accent-hover: #f59e0b;
+  --border: #334155;
+  --border-light: #475569;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3),
+    0 4px 6px -4px rgb(0 0 0 / 0.3);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3),
+    0 8px 10px -6px rgb(0 0 0 / 0.3);
+  --radius: 8px;
+  --radius-sm: 4px;
+  --radius-lg: 12px;
+  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --muted-foreground: #94a3b8;
+  --foreground: #f1f5f9;
+  --card: #1e293b;
+}
+
+body {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+
+/* Header */
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+  transition: var(--transition);
+}
+
+[data-theme="dark"] .header {
+  background: rgba(15, 23, 42, 0.8);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  max-width: 100%;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-family: "Work Sans", sans-serif;
+  font-weight: 700;
+  font-size: 1.5rem;
+  color: var(--primary);
+}
+
+.logo i {
+  font-size: 1.75rem;
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.theme-toggle {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.5rem;
+  cursor: pointer;
+  transition: var(--transition);
+  color: var(--text-secondary);
+}
+
+.theme-toggle:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  transform: translateY(-1px);
+}
+
+.session-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.session-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-1px);
+}
+
+.session-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+[data-theme="dark"] .session-btn {
+  background: rgba(30, 41, 59, 0.3);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+[data-theme="dark"] .session-btn:hover {
+  background: rgba(30, 41, 59, 0.5);
+}
+
+/* Main Layout */
+.main-container {
+  display: grid;
+  grid-template-columns: 400px 1fr;
+  height: calc(100vh - 73px);
+  gap: 0;
+  transition: grid-template-columns 0.3s ease;
+}
+
+.main-container.centered {
+  grid-template-columns: 1fr;
+  justify-items: center;
+}
+
+.main-container.centered .main-content {
+  display: none;
+}
+
+.main-container.centered .sidebar {
+  max-width: 500px;
+  width: 100%;
+  border-right: none;
+  border-radius: var(--radius-lg);
+  margin: 2rem;
+}
+
+/* Sidebar */
+.sidebar {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+[data-theme="dark"] .sidebar {
+  background: rgba(30, 41, 59, 0.1);
+  border-right: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+.sidebar-content {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* Panels */
+.panel {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: var(--transition);
+  box-shadow: var(--shadow-sm);
+  animation: fadeIn 0.3s ease-out;
+  transform: translateY(0);
+}
+
+[data-theme="dark"] .panel {
+  background: var(--bg-tertiary);
+}
+
+.panel:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.panel-header {
+  background: var(--bg-tertiary);
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.panel-header h3 {
+  font-family: "Work Sans", sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.panel-header i {
+  color: var(--primary);
+  font-size: 0.875rem;
+}
+
+.panel-content {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Form Elements */
+.text-input,
+.textarea-input,
+.select-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  transition: var(--transition);
+  font-family: inherit;
+}
+
+.text-input:focus,
+.textarea-input:focus,
+.select-input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
+}
+
+.textarea-input {
+  resize: vertical;
+  min-height: 100px;
+  line-height: 1.5;
+}
+
+.select-input {
+  cursor: pointer;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+  text-decoration: none;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--primary-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--border);
+  transform: translateY(-1px);
+}
+
+.btn-accent {
+  background: var(--accent);
+  color: white;
+}
+
+.btn-accent:hover:not(:disabled) {
+  background: var(--accent-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-destructive {
+  background: var(--danger);
+  color: white;
+}
+
+.btn-destructive:hover:not(:disabled) {
+  background: #dc2626;
+  transform: translateY(-1px);
+}
+
+.btn-outline {
+  background: transparent;
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+.btn-outline:hover:not(:disabled) {
+  background: var(--bg-tertiary);
+  transform: translateY(-1px);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border: none;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.btn-large {
+  padding: 1rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+/* Button Layouts */
+.button-row {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.button-row .btn {
+  flex: 1;
+}
+
+.button-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.button-grid .btn:first-child {
+  grid-column: 1 / -1;
+}
+
+.input-group {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.input-group .text-input {
+  flex: 1;
+}
+
+/* Console */
+.console-container {
+  margin-top: 0.5rem;
+}
+
+.console-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.console-output {
+  width: 100%;
+  height: 120px;
+  padding: 0.75rem;
+  background: #1a1a1a;
+  color: #00ff00;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  resize: vertical;
+}
+
+/* Version History */
+.version-history {
+  margin-bottom: 1rem;
+}
+
+.version-history-compact {
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.5rem;
+  backdrop-filter: blur(10px);
+}
+
+.version-history-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--muted-foreground);
+}
+
+.version-history-header svg {
+  color: var(--primary);
+}
+
+.select-input-compact {
+  width: 100%;
+  padding: 0.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.375rem;
+  color: var(--foreground);
+  font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.select-input-compact:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(var(--primary), 0.2);
+}
+
+/* Info Panels */
+.info-panels {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.info-panel {
+  border-radius: var(--radius);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.info-panel.minimized {
+  opacity: 0.7;
+}
+
+.info-panel.minimized:not([open]) {
+  transform: scale(0.98);
+}
+
+.info-panel-dull {
+  opacity: 0.8;
+}
+
+.info-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--text-primary);
+  transition: all 0.2s ease;
+}
+
+.info-header:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--primary);
+}
+
+.info-header i:last-child {
+  margin-left: auto;
+  transition: transform 0.2s ease;
+}
+
+.info-panel[open] .info-header i:last-child {
+  transform: rotate(180deg);
+}
+
+.info-content {
+  padding: 1rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-top: none;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  padding-left: 2rem;
+}
+
+/* Auto-scroll styles for info panels */
+.auto-scroll {
+  max-height: 200px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+.auto-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+
+.auto-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.auto-scroll::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 2px;
+}
+
+/* Main Content */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+  overflow: hidden;
+}
+
+.content-header {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+}
+
+[data-theme="dark"] .content-header {
+  background: rgba(30, 41, 59, 0.3);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.view-tabs {
+  display: flex;
+  background: var(--bg-primary);
+  border-radius: var(--radius);
+  padding: 0.25rem;
+  gap: 0.25rem;
+}
+
+.tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+  font-family: inherit;
+}
+
+.tab-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.tab-btn.active {
+  background: var(--primary);
+  color: white;
+  box-shadow: var(--shadow-sm);
+}
+
+.content-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--text-primary);
+  transform: translateY(-1px);
+}
+
+.action-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+[data-theme="dark"] .action-btn {
+  background: rgba(30, 41, 59, 0.3);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+[data-theme="dark"] .action-btn:hover {
+  background: rgba(30, 41, 59, 0.5);
+}
+
+.content-body {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Code Editor */
+.code-container {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.code-editor-wrapper {
+  flex: 1;
+  position: relative;
+  background: #1e1e1e;
+  border-radius: var(--radius);
+  margin: 1rem;
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+  min-height: 0;
+  height: 100%;
+  min-height: 500px;
+  max-height: calc(100vh - 200px);
+}
+
+.monaco-editor-container {
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+  max-height: calc(100vh - 200px);
+  overflow: hidden;
+}
+
+/* Preview */
+.preview-container {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.preview-wrapper {
+  flex: 1;
+  position: relative;
+  background: white;
+  border-radius: var(--radius);
+  margin: 1rem;
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+  min-height: 0;
+  height: 100%;
+  min-height: 500px;
+  max-height: calc(100vh - 200px);
+}
+
+.preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: white;
+  overflow: auto;
+  min-height: 500px;
+  max-height: calc(100vh - 200px);
+  display: block;
+  scrollbar-width: thin;
+  scrollbar-color: #888 #f1f1f1;
+}
+
+.preview-iframe::-webkit-scrollbar {
+  width: 8px;
+}
+
+.preview-iframe::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.preview-iframe::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+.preview-iframe::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+.preview-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-secondary);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.preview-iframe:not([src=""]) + .preview-placeholder,
+.preview-iframe[srcdoc]:not([srcdoc=""]) + .preview-placeholder {
+  display: none;
+}
+
+.placeholder-content {
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.placeholder-content i {
+  font-size: 3rem;
+  color: var(--primary);
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.placeholder-content h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.placeholder-content p {
+  font-size: 0.875rem;
+  max-width: 300px;
+}
+
+/* Utility Classes */
+.hidden {
+  display: none !important;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .main-container {
+    grid-template-columns: 350px 1fr;
+  }
+
+  .header-content {
+    padding: 1rem;
+  }
+
+  .content-header {
+    padding: 1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  /* Show hamburger menu on mobile */
+  .hamburger-btn {
+    display: flex;
+  }
+
+  .main-container {
+    grid-template-columns: 1fr;
+  }
+
+  /* Mobile sidebar as overlay */
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: -100%;
+    width: 320px;
+    height: 100vh;
+    z-index: 200;
+    transition: left 0.3s ease;
+    border-right: 1px solid var(--border);
+    border-bottom: none;
+    max-height: none;
+  }
+
+  .sidebar.open {
+    left: 0;
+  }
+
+  .sidebar-overlay.show {
+    display: block;
+  }
+
+  .content-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+
+  .view-tabs {
+    justify-content: center;
+  }
+
+  .content-actions {
+    justify-content: center;
+  }
+
+  /* Hide text labels on mobile for session buttons */
+  .session-btn span {
+    display: none;
+  }
+
+  .session-btn {
+    padding: 0.5rem;
+    min-width: 40px;
+  }
+
+  .followup-float {
+    bottom: 1rem;
+    right: 1rem;
+  }
+
+  .followup-btn {
+    width: 48px;
+    height: 48px;
+    font-size: 1.1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-content {
+    padding: 0.75rem 1rem;
+  }
+
+  .logo span {
+    display: none;
+  }
+
+  .sidebar {
+    width: 280px;
+  }
+
+  .action-btn {
+    width: 36px;
+    height: 36px;
+  }
+
+  .action-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+/* Focus Styles */
+.btn:focus-visible,
+.text-input:focus,
+.textarea-input:focus,
+.select-input:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  :root {
+    --border: #000000;
+    --text-secondary: #000000;
+  }
+
+  [data-theme="dark"] {
+    --border: #ffffff;
+    --text-secondary: #ffffff;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Particle Background Styles */
+.particle-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: none;
+}
+
+#particle-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+/* Glassmorphism Effect */
+.glass-effect {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+
+[data-theme="dark"] .glass-effect {
+  background: rgba(30, 41, 59, 0.3);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+/* Session Popup Styles */
+.session-popup,
+.followup-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.popup-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
+}
+
+.popup-content {
+  position: relative;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  max-width: 500px;
+  width: 90%;
+  max-height: 80vh;
+  overflow: hidden;
+  animation: slideInUp 0.3s ease-out;
+}
+
+.popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border);
+}
+
+.popup-header h3 {
+  font-family: "Work Sans", sans-serif;
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.popup-close {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: var(--radius);
+  transition: var(--transition);
+}
+
+.popup-close:hover {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.popup-body {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+/* Floating Follow-up Button */
+.followup-float {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 100;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(20px);
+  transition: all 0.3s ease;
+}
+
+.followup-float.show {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.followup-btn {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--primary);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  box-shadow: var(--shadow-lg);
+  transition: all 0.2s ease;
+}
+
+.followup-btn:hover {
+  transform: scale(1.1);
+  box-shadow: var(--shadow-xl);
+}
+
+.followup-tooltip {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(10px);
+  transition: all 0.2s ease;
+}
+
+.followup-float:hover .followup-tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+/* Sidebar Overlay for Mobile */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 150;
+}
+
+/* Hamburger Menu Styles */
+.hamburger-btn {
+  display: none;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 10;
+}
+
+.hamburger-btn span {
+  display: block;
+  height: 2px;
+  width: 100%;
+  background: var(--text-primary);
+  border-radius: 1px;
+  transition: var(--transition);
+}
+
+.hamburger-btn.active span:nth-child(1) {
+  transform: rotate(45deg) translate(5px, 5px);
+}
+
+.hamburger-btn.active span:nth-child(2) {
+  opacity: 0;
+}
+
+.hamburger-btn.active span:nth-child(3) {
+  transform: rotate(-45deg) translate(7px, -6px);
+}
+
+/* Added version history styling for content header */
+.version-history-header-compact {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-right: 1rem;
+}
+
+.version-history-header-compact svg {
+  color: var(--primary);
+}
+
+.select-input-header {
+  padding: 0.375rem 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius);
+  color: var(--foreground);
+  font-size: 0.875rem;
+  min-width: 120px;
+  transition: all 0.2s ease;
+}
+
+.select-input-header:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+[data-theme="dark"] .select-input-header {
+  background: rgba(30, 41, 59, 0.3);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+[data-theme="dark"] .select-input-header:hover {
+  background: rgba(30, 41, 59, 0.5);
+}
+
+/* File Upload Styles */
+.file-upload-container {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.file-upload-input {
+  display: none;
+}
+
+.file-upload-label {
+  width: 100%;
+  text-align: center;
+}
+
+.file-upload-label-small {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+}
+
+.file-upload-label-small:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+.file-upload-label-small svg {
+  width: 16px;
+  height: 16px;
+}
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 150px;
+  overflow-y: auto;
+  padding-right: 5px; /* for scrollbar */
+}
+
+.file-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  animation: fadeIn 0.2s ease-out;
+}
+
+.file-item span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 0.5rem;
+}
+
+.file-remove-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0 0.25rem;
+  line-height: 1;
+}
+
+.file-remove-btn:hover {
+  color: var(--danger);
+}