ada-web

commit 3ebd911f6a68498c1c0da0c0280dfda504215293
parent aaa0b2e9af5c49c20387aeaf2910f17c307ccafe
Author: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Date:   Sat, 17 Jan 2026 16:40:44 +0000

Add comprehensive docs.html, health endpoint, and Render deployment configs

Co-authored-by: notamitgamer <199483577+notamitgamer@users.noreply.github.com>

Diffstat:
A
Procfile
 | 
1
+
M
README.md
 | 
51
+++++++++++++++++++++++++++++++++++++++++++--------
M
backend.py
 | 
20
++++++++++++++++++--
A
docs.html
 | 
897
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
index.html
 | 
3
+++
A
render.yaml
 | 
19
+++++++++++++++++++

6 files changed, 981 insertions(+), 10 deletions(-)
diff --git a/Procfile b/Procfile
@@ -0,0 +1 @@
+web: gunicorn backend:app --workers 2 --threads 2 --timeout 120
diff --git a/README.md b/README.md
@@ -153,14 +153,49 @@ Content-Type: application/json
 
 ## Deployment
 
-### Render.com
-
-1. Create a new Web Service
-2. Connect your GitHub repository
-3. Set environment variables:
-   - `GEMINI_API_KEY`
-   - `FIREBASE_CREDENTIALS` (full JSON string)
-4. Deploy!
+### Backend: Render.com
+
+#### Quick Deploy
+
+1. **Create a new Web Service** on [Render.com](https://render.com)
+2. **Connect your GitHub repository**: `notamitgamer/ada-web`
+3. **Configure the service**:
+   - **Name**: `ada-web-backend` (or your preferred name)
+   - **Region**: Choose closest to your users
+   - **Branch**: `main`
+   - **Build Command**: `pip install -r requirements.txt`
+   - **Start Command**: `gunicorn backend:app --workers 2 --threads 2 --timeout 120`
+   - **Plan**: Free (or paid for better performance)
+
+4. **Set Environment Variables**:
+   - `GEMINI_API_KEY`: Your Gemini API key (get from https://aistudio.google.com/app/apikey)
+   - `FIREBASE_CREDENTIALS`: Full JSON string from Firebase service account
+   - `FLASK_DEBUG`: `False` (for production)
+   - `PYTHON_VERSION`: `3.11.0` (optional, auto-detected)
+
+5. **Deploy!** Render will automatically deploy your backend.
+
+#### Alternative: Using render.yaml
+
+The repository includes a `render.yaml` file for automatic configuration. Simply connect your repo and Render will use this file for setup.
+
+#### Health Check Endpoint
+
+The backend provides a `/health` endpoint for monitoring:
+- **URL**: `https://your-app.onrender.com/health`
+- **Response**: `{"status": "healthy", "timestamp": "..."}`
+
+#### Keep Backend Alive with UptimeRobot
+
+Render's free tier spins down after 15 minutes of inactivity. Use [UptimeRobot](https://uptimerobot.com) to keep it alive:
+
+1. **Create a free UptimeRobot account**
+2. **Add New Monitor**:
+   - Monitor Type: `HTTP(s)`
+   - Friendly Name: `Ada Web Backend`
+   - URL: `https://ada-web.onrender.com/health`
+   - Monitoring Interval: `5 minutes` (free tier)
+3. **Save** - UptimeRobot will ping your backend every 5 minutes to keep it alive!
 
 ### Frontend (Static Hosting)
 
diff --git a/backend.py b/backend.py
@@ -127,7 +127,20 @@ def verify_token(auth_header):
 
 @app.route('/')
 def home():
-    return "Ada AI Coding Backend is Online & Secured."
+    return jsonify({
+        "status": "online",
+        "service": "Ada AI Coding Backend",
+        "version": "1.0.0",
+        "model": "gemini-2.5-flash-preview-09-2025"
+    })
+
+@app.route('/health')
+def health():
+    """Health check endpoint for UptimeRobot and monitoring services"""
+    return jsonify({
+        "status": "healthy",
+        "timestamp": datetime.datetime.now(datetime.timezone.utc).isoformat()
+    })
 
 @app.route('/api/generate-title', methods=['POST'])
 def generate_title():
@@ -260,4 +273,7 @@ def chat():
 
 if __name__ == '__main__':
     port = int(os.environ.get('PORT', 5000))
-    app.run(host='0.0.0.0', port=port, debug=True)
+    # Use debug=False in production (Render)
+    # Gunicorn will be used for production: gunicorn backend:app
+    debug_mode = os.environ.get('FLASK_DEBUG', 'False').lower() == 'true'
+    app.run(host='0.0.0.0', port=port, debug=debug_mode)
diff --git a/docs.html b/docs.html
@@ -0,0 +1,897 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <title>Ada // Documentation</title>
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
+    
+    <style>
+        :root { 
+            --bg-main: #050505; 
+            --accent: #bef264; /* Lime 300 */
+            --border: rgba(255,255,255,0.1); 
+            --glass: rgba(20, 20, 20, 0.8);
+        }
+        body { 
+            background: var(--bg-main); 
+            color: #e5e5e5; 
+            font-family: 'Inter', sans-serif; 
+            overflow-x: hidden;
+        }
+        .font-mono { font-family: 'JetBrains Mono', monospace; }
+        
+        /* Scrollbar */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: var(--bg-main); }
+        ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
+
+        /* Typography */
+        .doc-section h1 { 
+            color: var(--accent); 
+            font-weight: bold; 
+            font-size: 2rem; 
+            margin-bottom: 1rem;
+            font-family: 'Space Grotesk', sans-serif;
+        }
+        .doc-section h2 { 
+            color: var(--accent); 
+            font-weight: 600; 
+            font-size: 1.5rem; 
+            margin-top: 2rem;
+            margin-bottom: 0.75rem;
+            font-family: 'Space Grotesk', sans-serif;
+        }
+        .doc-section h3 { 
+            color: #fff; 
+            font-weight: 600; 
+            font-size: 1.25rem; 
+            margin-top: 1.5rem;
+            margin-bottom: 0.5rem;
+        }
+        .doc-section p { 
+            margin-bottom: 1rem; 
+            line-height: 1.7; 
+            color: #ccc;
+        }
+        .doc-section ul, .doc-section ol { 
+            margin-bottom: 1rem; 
+            padding-left: 2rem; 
+            line-height: 1.8;
+        }
+        .doc-section ul { list-style-type: disc; }
+        .doc-section ol { list-style-type: decimal; }
+        .doc-section li { margin-bottom: 0.5rem; color: #ccc; }
+        
+        .doc-section code { 
+            color: var(--accent); 
+            background: rgba(190, 242, 100, 0.1); 
+            padding: 2px 6px; 
+            border-radius: 4px; 
+            font-family: 'JetBrains Mono', monospace; 
+            font-size: 0.9em;
+        }
+        
+        .doc-section pre { 
+            background: #0a0a0a; 
+            border: 1px solid var(--border); 
+            border-radius: 8px; 
+            padding: 1.5rem; 
+            overflow-x: auto; 
+            margin-bottom: 1.5rem;
+            line-height: 1.5;
+        }
+        .doc-section pre code { 
+            background: transparent; 
+            padding: 0; 
+            color: #aaa; 
+            font-size: 0.85rem;
+        }
+
+        /* Cards */
+        .feature-card {
+            background: rgba(20, 20, 20, 0.6);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 1.5rem;
+            transition: all 0.3s ease;
+        }
+        .feature-card:hover {
+            border-color: var(--accent);
+            background: rgba(30, 30, 30, 0.8);
+        }
+
+        /* Badges */
+        .badge {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            font-family: 'JetBrains Mono', monospace;
+            text-transform: uppercase;
+        }
+        .badge-primary { background: var(--accent); color: #000; }
+        .badge-secondary { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid var(--border); }
+
+        /* Navigation */
+        .nav-link {
+            color: #999;
+            transition: color 0.2s;
+            padding: 0.5rem 0;
+            display: block;
+            border-left: 2px solid transparent;
+            padding-left: 1rem;
+        }
+        .nav-link:hover, .nav-link.active {
+            color: var(--accent);
+            border-left-color: var(--accent);
+        }
+
+        /* Animations */
+        @keyframes pulse-slow {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .pulse-slow { animation: pulse-slow 2s infinite; }
+
+        /* Table */
+        .doc-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 1.5rem;
+        }
+        .doc-table th {
+            background: rgba(190, 242, 100, 0.1);
+            color: var(--accent);
+            padding: 0.75rem;
+            text-align: left;
+            font-weight: 600;
+            border: 1px solid var(--border);
+        }
+        .doc-table td {
+            padding: 0.75rem;
+            border: 1px solid var(--border);
+            color: #ccc;
+        }
+        .doc-table tr:hover {
+            background: rgba(255,255,255,0.02);
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+
+    <!-- Header -->
+    <header class="border-b border-white/10 bg-neutral-900/50 sticky top-0 z-50 backdrop-blur-sm">
+        <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <a href="index.html" class="flex items-center gap-2">
+                    <div class="w-2 h-2 bg-lime-300 rounded-full pulse-slow"></div>
+                    <span class="font-mono font-bold text-lime-300 tracking-wider text-lg">ADA // AI</span>
+                </a>
+            </div>
+            <nav class="flex items-center gap-6">
+                <a href="index.html" class="text-sm text-neutral-400 hover:text-white transition-colors font-mono">← Back to App</a>
+                <a href="https://github.com/notamitgamer/ada-web" target="_blank" class="text-sm text-neutral-400 hover:text-lime-300 transition-colors font-mono">GitHub</a>
+            </nav>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <div class="max-w-7xl mx-auto px-4 py-12 flex flex-col md:flex-row gap-8">
+        
+        <!-- Sidebar Navigation -->
+        <aside class="w-full md:w-64 md:sticky md:top-24 md:h-fit">
+            <div class="bg-neutral-900/50 border border-white/10 rounded-lg p-6">
+                <h3 class="text-sm font-mono text-lime-300 uppercase tracking-wider mb-4">Documentation</h3>
+                <nav class="space-y-1">
+                    <a href="#overview" class="nav-link active text-sm font-mono">Overview</a>
+                    <a href="#features" class="nav-link text-sm font-mono">Features</a>
+                    <a href="#getting-started" class="nav-link text-sm font-mono">Getting Started</a>
+                    <a href="#how-it-works" class="nav-link text-sm font-mono">How It Works</a>
+                    <a href="#authentication" class="nav-link text-sm font-mono">Authentication</a>
+                    <a href="#chat-interface" class="nav-link text-sm font-mono">Chat Interface</a>
+                    <a href="#code-editor" class="nav-link text-sm font-mono">Code Editor</a>
+                    <a href="#special-features" class="nav-link text-sm font-mono">Special Features</a>
+                    <a href="#api-reference" class="nav-link text-sm font-mono">API Reference</a>
+                    <a href="#troubleshooting" class="nav-link text-sm font-mono">Troubleshooting</a>
+                    <a href="#tech-stack" class="nav-link text-sm font-mono">Tech Stack</a>
+                </nav>
+            </div>
+        </aside>
+
+        <!-- Documentation Content -->
+        <main class="flex-1 doc-section">
+            
+            <!-- Overview -->
+            <section id="overview" class="mb-16">
+                <h1>Ada AI Coding Environment</h1>
+                <p class="text-xl text-neutral-300 mb-6">A specialized AI coding assistant powered by Google's Gemini 2.5 Flash Preview model, designed exclusively for code analysis, debugging, and generation.</p>
+                
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+                    <div class="feature-card text-center">
+                        <div class="text-3xl mb-2">🤖</div>
+                        <h3 class="text-lg font-semibold mb-1">AI-Powered</h3>
+                        <p class="text-sm text-neutral-400">Gemini 2.5 Flash Preview</p>
+                    </div>
+                    <div class="feature-card text-center">
+                        <div class="text-3xl mb-2">🔐</div>
+                        <h3 class="text-lg font-semibold mb-1">Secure</h3>
+                        <p class="text-sm text-neutral-400">Firebase Authentication</p>
+                    </div>
+                    <div class="feature-card text-center">
+                        <div class="text-3xl mb-2">💾</div>
+                        <h3 class="text-lg font-semibold mb-1">Persistent</h3>
+                        <p class="text-sm text-neutral-400">Cloud-based History</p>
+                    </div>
+                </div>
+
+                <div class="bg-lime-300/10 border border-lime-300/30 rounded-lg p-4">
+                    <p class="text-sm text-lime-300 font-mono">
+                        <strong>⚡ Quick Note:</strong> Ada is specialized for coding tasks only. It will politely refuse non-coding questions.
+                    </p>
+                </div>
+            </section>
+
+            <!-- Features -->
+            <section id="features" class="mb-16">
+                <h2>✨ Key Features</h2>
+                
+                <div class="space-y-4">
+                    <div class="feature-card">
+                        <h3 class="flex items-center gap-2">
+                            <span class="text-2xl">💬</span> Real-time Streaming Chat
+                        </h3>
+                        <p>Stream AI responses in real-time with beautiful markdown rendering. See code explanations as they're generated.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h3 class="flex items-center gap-2">
+                            <span class="text-2xl">📝</span> Integrated Code Editor
+                        </h3>
+                        <p>Built-in CodeMirror editor with syntax highlighting for Python, JavaScript, C/C++, and Java. Code suggestions automatically populate the editor.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h3 class="flex items-center gap-2">
+                            <span class="text-2xl">📂</span> File Upload Support
+                        </h3>
+                        <p>Upload code files for context. Ada will analyze your file and provide targeted assistance.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h3 class="flex items-center gap-2">
+                            <span class="text-2xl">🔗</span> LZString Code Sharing
+                        </h3>
+                        <p>Load code directly from URL parameters using LZString compression. Perfect for sharing code snippets.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h3 class="flex items-center gap-2">
+                            <span class="text-2xl">🚀</span> One-Click Compilation
+                        </h3>
+                        <p>Run code directly in an external compiler with automatic compression and language detection.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <h3 class="flex items-center gap-2">
+                            <span class="text-2xl">💾</span> Chat History
+                        </h3>
+                        <p>All conversations are saved to Firebase Firestore. Access your previous sessions anytime.</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Getting Started -->
+            <section id="getting-started" class="mb-16">
+                <h2>🚀 Getting Started</h2>
+                
+                <h3>1. Sign In</h3>
+                <p>Ada supports two authentication methods:</p>
+                <ul>
+                    <li><strong>Google OAuth:</strong> Click "Sign in with Google" for instant access</li>
+                    <li><strong>Email/Password:</strong> Create an account or login with your email</li>
+                </ul>
+
+                <h3>2. Start a Conversation</h3>
+                <p>Once logged in, you can immediately start asking coding questions:</p>
+                <pre><code>// Example questions:
+- "Write a Python function to sort a list using bubble sort"
+- "Debug this JavaScript code: [paste your code]"
+- "Explain how async/await works in JavaScript"
+- "Convert this Python code to Java"</code></pre>
+
+                <h3>3. Use the Code Editor</h3>
+                <p>The right pane contains a full-featured code editor where:</p>
+                <ul>
+                    <li>AI-generated code automatically appears</li>
+                    <li>You can edit and modify code</li>
+                    <li>Click "Run/Compile" to test in an external compiler</li>
+                </ul>
+
+                <h3>4. Upload Files (Optional)</h3>
+                <p>Click the paperclip icon to upload a code file. This provides Ada with additional context about your code.</p>
+            </section>
+
+            <!-- How It Works -->
+            <section id="how-it-works" class="mb-16">
+                <h2>⚙️ How It Works</h2>
+                
+                <div class="feature-card mb-6">
+                    <h3>Architecture Overview</h3>
+                    <p class="mb-4">Ada follows a client-server architecture with three main components:</p>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                        <div class="bg-neutral-900 border border-white/5 rounded p-4">
+                            <div class="text-lime-300 font-mono text-sm mb-2">Frontend</div>
+                            <div class="text-xs text-neutral-400">Vanilla JS, Tailwind CSS, CodeMirror</div>
+                        </div>
+                        <div class="bg-neutral-900 border border-white/5 rounded p-4">
+                            <div class="text-lime-300 font-mono text-sm mb-2">Backend</div>
+                            <div class="text-xs text-neutral-400">Python Flask, Gemini API</div>
+                        </div>
+                        <div class="bg-neutral-900 border border-white/5 rounded p-4">
+                            <div class="text-lime-300 font-mono text-sm mb-2">Database</div>
+                            <div class="text-xs text-neutral-400">Firebase Firestore</div>
+                        </div>
+                    </div>
+                </div>
+
+                <h3>Request Flow</h3>
+                <ol>
+                    <li><strong>User Input:</strong> You type a message or upload a file</li>
+                    <li><strong>Token Generation:</strong> Firebase generates a secure ID token</li>
+                    <li><strong>API Request:</strong> Frontend sends request to backend with token</li>
+                    <li><strong>Token Verification:</strong> Backend verifies token using Firebase Admin SDK</li>
+                    <li><strong>Gemini Processing:</strong> Backend sends your query to Gemini AI</li>
+                    <li><strong>Streaming Response:</strong> AI response streams back in real-time</li>
+                    <li><strong>Code Extraction:</strong> Frontend extracts code blocks and updates editor</li>
+                    <li><strong>Firestore Save:</strong> Conversation saved to your personal chat history</li>
+                </ol>
+            </section>
+
+            <!-- Authentication -->
+            <section id="authentication" class="mb-16">
+                <h2>🔐 Authentication</h2>
+                
+                <p>Ada uses Firebase Authentication for secure, industry-standard user management.</p>
+
+                <h3>Security Features</h3>
+                <ul>
+                    <li><strong>Server-Side Verification:</strong> All requests are validated using Firebase ID tokens</li>
+                    <li><strong>Automatic Token Refresh:</strong> Frontend automatically refreshes expired tokens</li>
+                    <li><strong>Protected API:</strong> Backend rejects unauthorized requests with 401 errors</li>
+                    <li><strong>Secure Storage:</strong> User data isolated in Firestore using UID-based paths</li>
+                </ul>
+
+                <h3>Login Methods</h3>
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Method</th>
+                            <th>Description</th>
+                            <th>Benefits</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><span class="badge badge-primary">Google OAuth</span></td>
+                            <td>One-click sign-in with Google account</td>
+                            <td>Fast, secure, no password needed</td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge badge-secondary">Email/Password</span></td>
+                            <td>Traditional email and password</td>
+                            <td>Works without Google account</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <div class="bg-neutral-900 border border-white/5 rounded-lg p-4 mt-4">
+                    <p class="text-sm font-mono text-neutral-400 mb-2">🔒 Your Security Matters</p>
+                    <p class="text-sm text-neutral-300">All communication uses HTTPS. Passwords are hashed. API keys never exposed to frontend. Firebase handles all sensitive operations.</p>
+                </div>
+            </section>
+
+            <!-- Chat Interface -->
+            <section id="chat-interface" class="mb-16">
+                <h2>💬 Chat Interface</h2>
+                
+                <h3>Message Types</h3>
+                <div class="space-y-3 mb-6">
+                    <div class="feature-card">
+                        <div class="flex items-start gap-3">
+                            <div class="w-8 h-8 rounded-full bg-neutral-700 flex items-center justify-center text-sm">U</div>
+                            <div>
+                                <div class="text-sm text-neutral-400 mb-1">Your Messages</div>
+                                <div class="text-sm">Appear on the right with your profile picture</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="feature-card">
+                        <div class="flex items-start gap-3">
+                            <div class="w-8 h-8 rounded bg-lime-300/10 border border-lime-300/20 flex items-center justify-center text-lime-300 text-xs font-mono">AI</div>
+                            <div>
+                                <div class="text-sm text-neutral-400 mb-1">Ada's Responses</div>
+                                <div class="text-sm">Markdown-formatted explanations with code blocks</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <h3>Markdown Support</h3>
+                <p>Ada's responses support full markdown formatting:</p>
+                <ul>
+                    <li><strong>Bold text:</strong> <code>**bold**</code></li>
+                    <li><em>Italic text:</em> <code>*italic*</code></li>
+                    <li>Code snippets: <code>`code`</code></li>
+                    <li>Lists (ordered and unordered)</li>
+                    <li>Headers (H1, H2, H3)</li>
+                    <li>Code blocks with syntax highlighting</li>
+                </ul>
+
+                <h3>Typing Indicator</h3>
+                <p>While Ada is processing your request, you'll see an animated typing indicator:</p>
+                <div class="flex gap-1 mb-6">
+                    <div class="w-2 h-2 bg-lime-300 rounded-full" style="animation: typing 1.4s infinite;"></div>
+                    <div class="w-2 h-2 bg-lime-300 rounded-full" style="animation: typing 1.4s infinite 0.2s;"></div>
+                    <div class="w-2 h-2 bg-lime-300 rounded-full" style="animation: typing 1.4s infinite 0.4s;"></div>
+                </div>
+
+                <style>
+                    @keyframes typing {
+                        0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
+                        30% { transform: translateY(-10px); opacity: 1; }
+                    }
+                </style>
+            </section>
+
+            <!-- Code Editor -->
+            <section id="code-editor" class="mb-16">
+                <h2>📝 Code Editor</h2>
+                
+                <h3>Features</h3>
+                <ul>
+                    <li><strong>Syntax Highlighting:</strong> Automatic color coding for Python, JavaScript, C/C++, Java</li>
+                    <li><strong>Line Numbers:</strong> Easy reference and debugging</li>
+                    <li><strong>Dark Theme:</strong> Eye-friendly Dracula theme</li>
+                    <li><strong>Auto-Update:</strong> Code from Ada automatically populates the editor</li>
+                    <li><strong>Editable:</strong> Modify code before running</li>
+                </ul>
+
+                <h3>Language Selection</h3>
+                <p>Use the dropdown in the editor header to switch between languages:</p>
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Language</th>
+                            <th>Mode</th>
+                            <th>Auto-Detected From</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>Python</td>
+                            <td><code>python</code></td>
+                            <td>.py files, AI context</td>
+                        </tr>
+                        <tr>
+                            <td>JavaScript</td>
+                            <td><code>javascript</code></td>
+                            <td>.js files, AI context</td>
+                        </tr>
+                        <tr>
+                            <td>C/C++/Java</td>
+                            <td><code>clike</code></td>
+                            <td>.c, .cpp, .java files</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <h3>Run/Compile Button</h3>
+                <p>Click the "Run/Compile" button to:</p>
+                <ol>
+                    <li>Compress current editor content using LZString</li>
+                    <li>Open external compiler (compiler.amit.is-a.dev)</li>
+                    <li>Code automatically loaded and ready to execute</li>
+                </ol>
+
+                <pre><code>// URL Format:
+https://compiler.amit.is-a.dev/{language}?code={compressed_code}
+
+// Example:
+https://compiler.amit.is-a.dev/python?code=N4IgbgpgTgzg...</code></pre>
+            </section>
+
+            <!-- Special Features -->
+            <section id="special-features" class="mb-16">
+                <h2>🎯 Special Features</h2>
+                
+                <h3>1. LZString URL Loading</h3>
+                <p>Load code directly from URL parameters:</p>
+                <pre><code>// Share code with others:
+https://ada.amit.is-a.dev/?code={compressed_code}
+
+// Code automatically loads into editor
+// Shows "temp_code loaded" badge</code></pre>
+
+                <h3>2. File Upload</h3>
+                <p>Upload code files for context-aware assistance:</p>
+                <ul>
+                    <li>Click the paperclip icon</li>
+                    <li>Select a code file (.py, .js, .c, .cpp, .java, etc.)</li>
+                    <li>File content sent as context to Ada</li>
+                    <li>Language auto-detected from extension</li>
+                    <li>Clear file with the × button</li>
+                </ul>
+
+                <h3>3. Code Block Extraction</h3>
+                <p>Ada uses special markers to separate code from explanation:</p>
+                <pre><code>// Ada's Response Format:
+Here's the fixed code:
+
+<<<CODE_START>>>
+def bubble_sort(arr):
+    n = len(arr)
+    for i in range(n):
+        for j in range(0, n-i-1):
+            if arr[j] > arr[j+1]:
+                arr[j], arr[j+1] = arr[j+1], arr[j]
+    return arr
+<<<CODE_END>>>
+
+This algorithm has O(n²) time complexity.</code></pre>
+
+                <p>The frontend automatically:</p>
+                <ul>
+                    <li>Extracts code between markers</li>
+                    <li>Updates the Code Editor</li>
+                    <li>Renders explanation as markdown in chat</li>
+                </ul>
+
+                <h3>4. Mobile Responsive</h3>
+                <p>On mobile devices:</p>
+                <ul>
+                    <li>Tab-based navigation (Chat ↔ Code Canvas)</li>
+                    <li>Swipe-friendly interface</li>
+                    <li>Full feature parity with desktop</li>
+                    <li>Optimized touch targets</li>
+                </ul>
+            </section>
+
+            <!-- API Reference -->
+            <section id="api-reference" class="mb-16">
+                <h2>📡 API Reference</h2>
+                
+                <h3>Base URL</h3>
+                <pre><code>https://ada-web.onrender.com</code></pre>
+
+                <h3>Endpoints</h3>
+                
+                <div class="feature-card mb-4">
+                    <h4 class="text-lime-300 font-mono mb-2">GET /</h4>
+                    <p class="text-sm mb-2">Health check and service info</p>
+                    <div class="bg-neutral-900 rounded p-3 text-xs">
+                        <div class="text-neutral-500 mb-1">Response:</div>
+                        <pre><code>{
+  "status": "online",
+  "service": "Ada AI Coding Backend",
+  "version": "1.0.0",
+  "model": "gemini-2.5-flash-preview-09-2025"
+}</code></pre>
+                    </div>
+                </div>
+
+                <div class="feature-card mb-4">
+                    <h4 class="text-lime-300 font-mono mb-2">GET /health</h4>
+                    <p class="text-sm mb-2">Health check for monitoring (UptimeRobot)</p>
+                    <div class="bg-neutral-900 rounded p-3 text-xs">
+                        <div class="text-neutral-500 mb-1">Response:</div>
+                        <pre><code>{
+  "status": "healthy",
+  "timestamp": "2024-01-17T16:30:00.000Z"
+}</code></pre>
+                    </div>
+                </div>
+
+                <div class="feature-card mb-4">
+                    <h4 class="text-lime-300 font-mono mb-2">POST /api/chat</h4>
+                    <p class="text-sm mb-2">Main chat endpoint (streaming response)</p>
+                    <div class="bg-neutral-900 rounded p-3 text-xs mb-3">
+                        <div class="text-neutral-500 mb-1">Headers:</div>
+                        <pre><code>Authorization: Bearer {firebase_id_token}
+Content-Type: application/json</code></pre>
+                    </div>
+                    <div class="bg-neutral-900 rounded p-3 text-xs mb-3">
+                        <div class="text-neutral-500 mb-1">Request Body:</div>
+                        <pre><code>{
+  "message": "Write a Python function to reverse a string",
+  "history": [
+    {
+      "user": "Previous question",
+      "model": "Previous response"
+    }
+  ],
+  "codeContext": "# Current editor content",
+  "fileContext": "# Uploaded file content",
+  "sessionId": "uuid-v4-string"
+}</code></pre>
+                    </div>
+                    <div class="bg-neutral-900 rounded p-3 text-xs">
+                        <div class="text-neutral-500 mb-1">Response:</div>
+                        <pre><code>// Streaming text/plain response
+Here's a function to reverse a string:
+
+<<<CODE_START>>>
+def reverse_string(s):
+    return s[::-1]
+<<<CODE_END>>>
+
+This uses Python's slice notation...</code></pre>
+                    </div>
+                </div>
+
+                <div class="feature-card mb-4">
+                    <h4 class="text-lime-300 font-mono mb-2">POST /api/generate-title</h4>
+                    <p class="text-sm mb-2">Generate short title for chat session</p>
+                    <div class="bg-neutral-900 rounded p-3 text-xs mb-3">
+                        <div class="text-neutral-500 mb-1">Headers:</div>
+                        <pre><code>Authorization: Bearer {firebase_id_token}
+Content-Type: application/json</code></pre>
+                    </div>
+                    <div class="bg-neutral-900 rounded p-3 text-xs mb-3">
+                        <div class="text-neutral-500 mb-1">Request Body:</div>
+                        <pre><code>{
+  "message": "How do I sort an array in Python?"
+}</code></pre>
+                    </div>
+                    <div class="bg-neutral-900 rounded p-3 text-xs">
+                        <div class="text-neutral-500 mb-1">Response:</div>
+                        <pre><code>{
+  "title": "Python Array Sorting"
+}</code></pre>
+                    </div>
+                </div>
+
+                <h3>Error Responses</h3>
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Status Code</th>
+                            <th>Meaning</th>
+                            <th>Response</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><span class="badge badge-secondary">401</span></td>
+                            <td>Unauthorized</td>
+                            <td><code>{"error": "Unauthorized", "message": "..."}</code></td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge badge-secondary">400</span></td>
+                            <td>Bad Request</td>
+                            <td><code>{"error": "Bad Request", "message": "..."}</code></td>
+                        </tr>
+                        <tr>
+                            <td><span class="badge badge-secondary">500</span></td>
+                            <td>Server Error</td>
+                            <td><code>{"error": "Internal Server Error", "message": "..."}</code></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+
+            <!-- Troubleshooting -->
+            <section id="troubleshooting" class="mb-16">
+                <h2>🔧 Troubleshooting</h2>
+                
+                <div class="space-y-4">
+                    <div class="feature-card">
+                        <h3 class="text-white">❌ "Unauthorized" Error (401)</h3>
+                        <p><strong>Cause:</strong> Token expired or invalid</p>
+                        <p><strong>Solution:</strong></p>
+                        <ul>
+                            <li>Sign out and sign in again</li>
+                            <li>Clear browser cache and cookies</li>
+                            <li>Token auto-refreshes on retry</li>
+                        </ul>
+                    </div>
+
+                    <div class="feature-card">
+                        <h3 class="text-white">⏳ Backend Slow to Respond</h3>
+                        <p><strong>Cause:</strong> Render.com free tier spins down after inactivity</p>
+                        <p><strong>Solution:</strong></p>
+                        <ul>
+                            <li>First request may take 30-60 seconds (cold start)</li>
+                            <li>Subsequent requests are fast</li>
+                            <li>Set up UptimeRobot to keep backend alive</li>
+                        </ul>
+                    </div>
+
+                    <div class="feature-card">
+                        <h3 class="text-white">📝 Code Not Appearing in Editor</h3>
+                        <p><strong>Cause:</strong> AI didn't include code markers or network issue</p>
+                        <p><strong>Solution:</strong></p>
+                        <ul>
+                            <li>Check if response includes code in chat</li>
+                            <li>Manually copy code to editor</li>
+                            <li>Refresh page and try again</li>
+                        </ul>
+                    </div>
+
+                    <div class="feature-card">
+                        <h3 class="text-white">🚫 "I am designed only for coding tasks"</h3>
+                        <p><strong>Cause:</strong> Asked a non-coding question</p>
+                        <p><strong>Solution:</strong></p>
+                        <ul>
+                            <li>Ada only answers coding-related questions</li>
+                            <li>Rephrase question to be code-specific</li>
+                            <li>This is expected behavior</li>
+                        </ul>
+                    </div>
+
+                    <div class="feature-card">
+                        <h3 class="text-white">📱 Mobile Tab Not Switching</h3>
+                        <p><strong>Cause:</strong> JavaScript error or browser issue</p>
+                        <p><strong>Solution:</strong></p>
+                        <ul>
+                            <li>Refresh the page</li>
+                            <li>Clear browser cache</li>
+                            <li>Try a different mobile browser</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Tech Stack -->
+            <section id="tech-stack" class="mb-16">
+                <h2>🛠️ Tech Stack</h2>
+                
+                <h3>Frontend Technologies</h3>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-3 mb-6">
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">JavaScript ES6+</div>
+                        <div class="text-xs text-neutral-500">Core Logic</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Tailwind CSS</div>
+                        <div class="text-xs text-neutral-500">Styling</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">CodeMirror</div>
+                        <div class="text-xs text-neutral-500">Code Editor</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Marked.js</div>
+                        <div class="text-xs text-neutral-500">Markdown</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">LZString</div>
+                        <div class="text-xs text-neutral-500">Compression</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Firebase SDK</div>
+                        <div class="text-xs text-neutral-500">Auth & DB</div>
+                    </div>
+                </div>
+
+                <h3>Backend Technologies</h3>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-3 mb-6">
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Python 3.11</div>
+                        <div class="text-xs text-neutral-500">Runtime</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Flask</div>
+                        <div class="text-xs text-neutral-500">Web Framework</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Gunicorn</div>
+                        <div class="text-xs text-neutral-500">WSGI Server</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Gemini API</div>
+                        <div class="text-xs text-neutral-500">AI Model</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Firebase Admin</div>
+                        <div class="text-xs text-neutral-500">Auth Verify</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Flask-CORS</div>
+                        <div class="text-xs text-neutral-500">Security</div>
+                    </div>
+                </div>
+
+                <h3>Infrastructure</h3>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Render.com</div>
+                        <div class="text-xs text-neutral-500">Backend Host</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Firebase Firestore</div>
+                        <div class="text-xs text-neutral-500">Database</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">UptimeRobot</div>
+                        <div class="text-xs text-neutral-500">Monitoring</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">GitHub</div>
+                        <div class="text-xs text-neutral-500">Version Control</div>
+                    </div>
+                    <div class="bg-neutral-900 border border-white/5 rounded p-3 text-center">
+                        <div class="font-mono text-lime-300 text-sm mb-1">Firebase Auth</div>
+                        <div class="text-xs text-neutral-500">Authentication</div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Footer -->
+            <section class="border-t border-white/10 pt-8 mt-16">
+                <div class="text-center">
+                    <p class="text-neutral-400 mb-2">Built with ❤️ by <a href="https://amit.is-a.dev" class="text-lime-300 hover:underline">Amit Dutta</a></p>
+                    <p class="text-sm text-neutral-600 font-mono">Ada AI Coding Environment v1.0.0</p>
+                </div>
+            </section>
+
+        </main>
+    </div>
+
+    <!-- Smooth Scroll Script -->
+    <script>
+        // Smooth scroll for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    
+                    // Update active nav link
+                    document.querySelectorAll('.nav-link').forEach(link => {
+                        link.classList.remove('active');
+                    });
+                    this.classList.add('active');
+                }
+            });
+        });
+
+        // Intersection observer for active nav state
+        const sections = document.querySelectorAll('section[id]');
+        const navLinks = document.querySelectorAll('.nav-link');
+
+        const observerOptions = {
+            root: null,
+            rootMargin: '-20% 0px -80% 0px',
+            threshold: 0
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const id = entry.target.getAttribute('id');
+                    navLinks.forEach(link => {
+                        link.classList.remove('active');
+                        if (link.getAttribute('href') === `#${id}`) {
+                            link.classList.add('active');
+                        }
+                    });
+                }
+            });
+        }, observerOptions);
+
+        sections.forEach(section => observer.observe(section));
+    </script>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -172,6 +172,9 @@
                 <span class="font-mono font-bold text-lime-300 tracking-wider">ADA // AI</span>
             </div>
             <div class="flex items-center gap-3">
+                <a href="docs.html" class="hidden md:block text-xs text-neutral-400 hover:text-lime-300 transition-colors font-mono" title="Documentation">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                </a>
                 <button onclick="toggleSidebar()" class="md:hidden text-neutral-400 hover:text-white">
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                 </button>
diff --git a/render.yaml b/render.yaml
@@ -0,0 +1,19 @@
+services:
+  - type: web
+    name: ada-web-backend
+    env: python
+    region: oregon
+    plan: free
+    branch: main
+    buildCommand: pip install -r requirements.txt
+    startCommand: gunicorn backend:app --workers 2 --threads 2 --timeout 120 --bind 0.0.0.0:$PORT
+    envVars:
+      - key: PYTHON_VERSION
+        value: 3.11.0
+      - key: GEMINI_API_KEY
+        sync: false
+      - key: FIREBASE_CREDENTIALS
+        sync: false
+      - key: FLASK_DEBUG
+        value: False
+    healthCheckPath: /health