Update app.py

app.py

@@ -806,10 +806,11 @@ def generate_response_stream(prompt, temperature=0.7, backend=None, max_tokens=2
     final_tokens_per_sec = tokens_generated / elapsed if elapsed > 0 else 0
     yield "", False, final_tokens_per_sec, final_tokens_per_sec, False
 
-
-# PART 3 - Multi-Page Website UI (No Backend Changes)
+# PART 3 - Production-Grade Multi-Page UI (No Backend Changes)
 
 import secrets
+import json
+from datetime import datetime
 
 # Global session storage (unchanged from original)
 active_sessions = {}
@@ -849,46 +850,69 @@ if __name__ == "__main__":
     import gradio as gr
 
     custom_css = """
-    /* Modern Website Styling */
-    .app-container { max-width: 1400px; margin: 0 auto; }
+    /* Modern Production-Grade Styling */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+    
+    * { font-family: 'Inter', sans-serif; }
+    
+    .app-container { max-width: 1600px; margin: 0 auto; }
+    
+    /* Dark Mode Support */
+    .dark-mode { background: #1a1a1a; color: #e5e5e5; }
+    .dark-mode .nav-bar { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); }
+    .dark-mode .chat-container { background: #2d3748; border-color: #4a5568; }
+    .dark-mode .assistant-message { background: #374151; border-color: #10a37f; }
     
     /* Navigation Bar */
     .nav-bar { 
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-        padding: 16px 32px; 
+        padding: 14px 28px; 
         border-radius: 12px; 
-        margin-bottom: 24px; 
+        margin-bottom: 20px; 
         display: flex; 
         justify-content: space-between; 
         align-items: center;
         box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        position: sticky;
+        top: 0;
+        z-index: 100;
     }
-    .nav-left { display: flex; align-items: center; gap: 24px; }
-    .nav-brand { font-size: 24px; font-weight: 700; color: white; }
-    .nav-links { display: flex; gap: 16px; }
-    .nav-link { 
+    .nav-left { display: flex; align-items: center; gap: 20px; }
+    .nav-brand { 
+        font-size: 22px; 
+        font-weight: 700; 
         color: white; 
-        padding: 8px 16px; 
-        border-radius: 8px; 
-        cursor: pointer; 
-        transition: all 0.2s;
-        background: rgba(255,255,255,0.1);
+        display: flex; 
+        align-items: center; 
+        gap: 8px;
+    }
+    .nav-right { display: flex; align-items: center; gap: 12px; }
+    .user-greeting { 
+        color: white; 
+        font-weight: 500; 
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 12px;
+        background: rgba(255,255,255,0.15);
+        border-radius: 20px;
     }
-    .nav-link:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
-    .nav-link.active { background: rgba(255,255,255,0.3); font-weight: 600; }
-    .nav-right { display: flex; align-items: center; gap: 16px; }
-    .user-greeting { color: white; font-weight: 500; font-size: 15px; }
     
     /* Plan Badge */
     .plan-badge { 
         display: inline-block; 
-        padding: 6px 14px; 
-        border-radius: 16px; 
-        font-size: 12px; 
+        padding: 4px 10px; 
+        border-radius: 12px; 
+        font-size: 10px; 
         font-weight: 700; 
-        margin-left: 8px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
+        animation: badge-glow 2s ease-in-out infinite;
+    }
+    @keyframes badge-glow {
+        0%, 100% { box-shadow: 0 0 5px rgba(255,255,255,0.3); }
+        50% { box-shadow: 0 0 15px rgba(255,255,255,0.5); }
     }
     .plan-free { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); color: #3730a3; }
     .plan-plus { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; }
@@ -899,18 +923,23 @@ if __name__ == "__main__":
     
     /* Auth Page */
     .auth-container { 
-        max-width: 480px; 
-        margin: 60px auto; 
+        max-width: 440px; 
+        margin: 40px auto; 
         background: white; 
-        padding: 40px; 
+        padding: 36px; 
         border-radius: 16px; 
-        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+        animation: slideUp 0.4s ease-out;
+    }
+    @keyframes slideUp {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
     }
     .auth-title { 
-        font-size: 32px; 
+        font-size: 28px; 
         font-weight: 700; 
         text-align: center; 
-        margin-bottom: 8px;
+        margin-bottom: 6px;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
@@ -918,71 +947,186 @@ if __name__ == "__main__":
     .auth-subtitle { 
         text-align: center; 
         color: #6b7280; 
-        margin-bottom: 32px; 
-        font-size: 14px;
+        margin-bottom: 28px; 
+        font-size: 13px;
     }
     
     /* Chat Interface */
+    .chat-layout { display: flex; gap: 20px; }
+    .chat-main { flex: 1; min-width: 0; }
+    .chat-sidebar { width: 320px; flex-shrink: 0; }
+    
     .chat-container { 
         height: 520px; 
         overflow-y: auto; 
-        padding: 24px; 
+        padding: 20px; 
         background: #f9fafb; 
         border: 1px solid #e5e7eb; 
         border-radius: 12px;
-        margin-bottom: 16px;
+        margin-bottom: 12px;
+        scroll-behavior: smooth;
     }
+    .chat-container::-webkit-scrollbar { width: 6px; }
+    .chat-container::-webkit-scrollbar-track { background: transparent; }
+    .chat-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
+    .chat-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+    
     .user-message { 
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
         color: white;
-        padding: 16px 20px; 
-        margin: 12px 0; 
+        padding: 14px 18px; 
+        margin: 10px 0; 
         border-radius: 16px 16px 4px 16px;
-        max-width: 80%;
+        max-width: 75%;
         margin-left: auto;
+        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+        animation: messageSlideIn 0.3s ease-out;
     }
     .assistant-message { 
         background: white; 
-        padding: 16px 20px; 
-        margin: 12px 0; 
+        padding: 14px 18px; 
+        margin: 10px 0; 
         border-radius: 16px 16px 16px 4px; 
-        border-left: 4px solid #10a37f;
-        max-width: 80%;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        border-left: 3px solid #10a37f;
+        max-width: 75%;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+        animation: messageSlideIn 0.3s ease-out;
+        position: relative;
+    }
+    @keyframes messageSlideIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .message-content { 
+        color: #353740; 
+        line-height: 1.6; 
+        font-size: 14px;
+        word-wrap: break-word;
     }
-    .message-content { color: #353740; line-height: 1.7; font-size: 15px; }
     .user-message .message-content { color: white; }
+    
+    /* Markdown Styling */
+    .message-content code {
+        background: #f3f4f6;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Courier New', monospace;
+        font-size: 13px;
+    }
+    .message-content pre {
+        background: #1f2937;
+        color: #e5e7eb;
+        padding: 12px;
+        border-radius: 8px;
+        overflow-x: auto;
+        margin: 8px 0;
+        position: relative;
+    }
+    .message-content pre code {
+        background: transparent;
+        padding: 0;
+        color: inherit;
+    }
+    .message-content ul, .message-content ol {
+        margin: 8px 0;
+        padding-left: 20px;
+    }
+    .message-content li { margin: 4px 0; }
+    .message-content strong { font-weight: 600; }
+    .message-content em { font-style: italic; }
+    .message-content a { color: #667eea; text-decoration: underline; }
+    
+    /* Code Copy Button */
+    .copy-button {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        background: rgba(255,255,255,0.1);
+        border: 1px solid rgba(255,255,255,0.2);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        cursor: pointer;
+        opacity: 0;
+        transition: all 0.2s;
+    }
+    .assistant-message:hover .copy-button { opacity: 1; }
+    .copy-button:hover { background: rgba(255,255,255,0.2); }
+    
     .thinking-content { 
         color: #6b7280; 
         font-style: italic; 
         border-left: 3px solid #d1d5db; 
         padding-left: 12px; 
-        margin: 12px 0; 
+        margin: 10px 0; 
         background: #f9fafb; 
-        padding: 12px; 
-        border-radius: 8px;
+        padding: 10px 12px; 
+        border-radius: 6px;
+        font-size: 13px;
+    }
+    
+    /* Message Actions */
+    .message-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 8px;
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+    .assistant-message:hover .message-actions { opacity: 1; }
+    .action-btn {
+        background: #f3f4f6;
+        border: 1px solid #e5e7eb;
+        padding: 4px 10px;
+        border-radius: 6px;
+        font-size: 12px;
+        cursor: pointer;
+        transition: all 0.2s;
+        color: #6b7280;
+    }
+    .action-btn:hover {
+        background: #e5e7eb;
+        color: #374151;
+        transform: translateY(-1px);
     }
     
     /* Input Area */
+    .input-container {
+        background: white;
+        border: 2px solid #e5e7eb;
+        border-radius: 12px;
+        padding: 4px;
+        transition: all 0.2s;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    }
+    .input-container:focus-within {
+        border-color: #667eea;
+        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
+    }
     .input-row { 
         display: flex; 
-        gap: 12px; 
+        gap: 8px; 
         align-items: flex-end;
     }
     .circular-btn { 
-        width: 52px !important; 
-        height: 52px !important; 
-        min-width: 52px !important; 
+        width: 46px !important; 
+        height: 46px !important; 
+        min-width: 46px !important; 
         border-radius: 50% !important; 
         padding: 0 !important; 
-        font-size: 22px !important; 
+        font-size: 20px !important; 
         box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; 
         transition: all 0.2s ease !important;
         border: none !important;
     }
     .circular-btn:hover:not(:disabled) { 
         transform: scale(1.08) !important; 
-        box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important; 
+        box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important; 
+    }
+    .circular-btn:active:not(:disabled) { 
+        transform: scale(0.95) !important; 
     }
     .send-btn { 
         background: linear-gradient(135deg, #10a37f 0%, #0d8c6c 100%) !important; 
@@ -991,137 +1135,251 @@ if __name__ == "__main__":
         background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; 
     }
     
+    /* Token Counter */
+    .token-counter {
+        font-size: 11px;
+        color: #9ca3af;
+        text-align: right;
+        padding: 4px 8px;
+    }
+    
     /* Sidebar/Limits Panel */
     .limits-panel { 
         background: white; 
         border: 1px solid #e5e7eb; 
         border-radius: 12px; 
-        padding: 20px; 
-        margin-bottom: 16px;
+        padding: 18px; 
+        margin-bottom: 14px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
+    .limit-header {
+        font-weight: 700;
+        margin-bottom: 14px;
+        font-size: 16px;
+        color: #1f2937;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
     .limit-item { 
         display: flex; 
         justify-content: space-between; 
-        padding: 12px 0; 
+        padding: 10px 0; 
         border-bottom: 1px solid #f3f4f6;
         align-items: center;
     }
     .limit-item:last-child { border-bottom: none; }
-    .limit-exceeded { color: #dc2626; font-weight: 600; }
-    .limit-ok { color: #059669; font-weight: 500; }
-    .limit-warning { color: #f59e0b; font-weight: 600; }
+    .limit-label {
+        font-size: 13px;
+        color: #6b7280;
+        font-weight: 500;
+    }
+    .limit-value {
+        font-size: 13px;
+        font-weight: 600;
+    }
+    .limit-exceeded { color: #dc2626; }
+    .limit-ok { color: #059669; }
+    .limit-warning { color: #f59e0b; }
+    
+    /* Progress Bar */
+    .progress-bar {
+        height: 6px;
+        background: #f3f4f6;
+        border-radius: 3px;
+        overflow: hidden;
+        margin-top: 6px;
+    }
+    .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #10a37f 0%, #059669 100%);
+        transition: width 0.3s ease;
+        border-radius: 3px;
+    }
+    .progress-fill.warning { background: linear-gradient(90deg, #f59e0b 0%, #ea580c 100%); }
+    .progress-fill.danger { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); }
     
     /* Plans Section */
     .plans-grid { 
         display: grid; 
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
-        gap: 24px; 
-        margin-top: 24px;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
+        gap: 20px; 
+        margin-top: 20px;
     }
     .plan-card { 
         background: white; 
         border: 2px solid #e5e7eb; 
-        border-radius: 16px; 
-        padding: 28px; 
+        border-radius: 14px; 
+        padding: 24px; 
         transition: all 0.3s;
         position: relative;
         overflow: hidden;
     }
     .plan-card:hover { 
-        transform: translateY(-4px); 
-        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
+        transform: translateY(-6px); 
+        box-shadow: 0 12px 28px rgba(0,0,0,0.15);
         border-color: #667eea;
     }
     .plan-card.featured { 
         border: 3px solid #667eea;
-        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
+        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
+        transform: scale(1.02);
     }
     .plan-card.featured::before {
         content: '⭐ POPULAR';
         position: absolute;
-        top: 16px;
-        right: -32px;
+        top: 14px;
+        right: -28px;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
-        padding: 4px 40px;
-        font-size: 11px;
+        padding: 3px 36px;
+        font-size: 10px;
         font-weight: 700;
         letter-spacing: 1px;
         transform: rotate(45deg);
     }
     .plan-name { 
-        font-size: 24px; 
+        font-size: 22px; 
         font-weight: 700; 
-        margin-bottom: 8px;
+        margin-bottom: 6px;
         color: #1f2937;
     }
     .plan-price { 
-        font-size: 14px; 
+        font-size: 13px; 
         color: #6b7280; 
-        margin-bottom: 20px;
+        margin-bottom: 18px;
     }
     .plan-features { 
         list-style: none; 
         padding: 0; 
-        margin: 20px 0;
+        margin: 16px 0;
     }
     .plan-features li { 
-        padding: 8px 0; 
+        padding: 6px 0; 
         color: #4b5563;
-        font-size: 14px;
+        font-size: 13px;
     }
     .plan-features li::before { 
         content: '✓ '; 
         color: #10a37f; 
         font-weight: 700; 
-        margin-right: 8px;
+        margin-right: 6px;
     }
     
-    /* Admin Dashboard */
-    .admin-dashboard { 
-        background: white; 
-        border-radius: 12px; 
-        padding: 24px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    /* Speed Indicator */
+    .speed-indicator { 
+        text-align: center; 
+        padding: 10px; 
+        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); 
+        border-radius: 8px; 
+        font-weight: 600;
+        color: #166534;
+        margin-bottom: 10px;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
     }
-    .dashboard-header { 
-        font-size: 24px; 
-        font-weight: 700; 
-        margin-bottom: 24px;
-        color: #1f2937;
+    .speed-indicator.generating {
+        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+        color: #1e40af;
+        animation: pulse 2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.8; }
+    }
+    .speed-indicator.error {
+        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
+        color: #991b1b;
     }
     
+    /* Toast Notifications */
+    .toast {
+        position: fixed;
+        top: 80px;
+        right: 20px;
+        background: white;
+        padding: 12px 18px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        z-index: 1000;
+        animation: toastSlide 0.3s ease-out;
+    }
+    @keyframes toastSlide {
+        from { transform: translateX(400px); opacity: 0; }
+        to { transform: translateX(0); opacity: 1; }
+    }
+    .toast.success { border-left: 4px solid #10a37f; }
+    .toast.error { border-left: 4px solid #ef4444; }
+    .toast.info { border-left: 4px solid #3b82f6; }
+    
     /* Settings Panel */
     .settings-panel { 
         background: white; 
         border: 1px solid #e5e7eb; 
         border-radius: 12px; 
-        padding: 20px; 
-        margin-bottom: 16px;
+        padding: 16px; 
+        margin-bottom: 14px;
     }
     
-    /* Speed indicator */
-    .speed-indicator { 
-        text-align: center; 
-        padding: 12px; 
-        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); 
-        border-radius: 8px; 
-        font-weight: 600;
-        color: #166534;
-        margin-bottom: 12px;
+    /* Keyboard Shortcuts */
+    .kbd {
+        display: inline-block;
+        padding: 2px 6px;
+        background: #f3f4f6;
+        border: 1px solid #d1d5db;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 11px;
+        color: #4b5563;
+    }
+    
+    /* Empty State */
+    .empty-state {
+        text-align: center;
+        padding: 60px 20px;
+        color: #9ca3af;
+    }
+    .empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
+    .empty-state-title { font-size: 18px; font-weight: 600; color: #6b7280; margin-bottom: 8px; }
+    .empty-state-subtitle { font-size: 14px; color: #9ca3af; }
+    
+    /* Skeleton Loader */
+    .skeleton {
+        background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
+        background-size: 200% 100%;
+        animation: shimmer 1.5s infinite;
+        border-radius: 4px;
+    }
+    @keyframes shimmer {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
     }
     
     /* Responsive */
+    @media (max-width: 1024px) {
+        .chat-layout { flex-direction: column; }
+        .chat-sidebar { width: 100%; }
+    }
     @media (max-width: 768px) {
-        .nav-bar { flex-direction: column; gap: 16px; }
+        .nav-bar { flex-direction: column; gap: 12px; padding: 12px 16px; }
         .nav-left, .nav-right { width: 100%; justify-content: center; }
         .chat-container { height: 400px; }
         .plans-grid { grid-template-columns: 1fr; }
+        .user-message, .assistant-message { max-width: 90%; }
     }
+    
+    /* Smooth Transitions */
+    * { transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
+    button { transition: all 0.2s !important; }
     """
 
-    # User greeting variations
+    # Greeting variations
     def get_greeting(username):
         import random
         greetings = [
@@ -1130,16 +1388,51 @@ if __name__ == "__main__":
             f"Hi {username}! 🚀",
             f"Hello {username}! 😊",
             f"Great to see you, {username}! 🎉",
-            f"What's up, {username}? 💫"
+            f"What's up, {username}? 💫",
+            f"Howdy, {username}! 🤠",
+            f"Yo {username}! 🔥"
         ]
         return random.choice(greetings)
 
-    # Format message HTML
-    def format_message_html(role, content, show_thinking=True):
+    # Markdown rendering (simple version)
+    def render_markdown(text):
+        """Simple markdown rendering for common patterns"""
+        import re
+        
+        # Code blocks
+        text = re.sub(r'```(\w+)?\n(.*?)```', r'<pre><code class="\1">\2</code><button class="copy-button" onclick="copyCode(this)">Copy</button></pre>', text, flags=re.DOTALL)
+        
+        # Inline code
+        text = re.sub(r'`([^`]+)`', r'<code>\1</code>', text)
+        
+        # Bold
+        text = re.sub(r'\*\*(.+?)\*\*', r'<strong>\1</strong>', text)
+        text = re.sub(r'__(.+?)__', r'<strong>\1</strong>', text)
+        
+        # Italic
+        text = re.sub(r'\*(.+?)\*', r'<em>\1</em>', text)
+        text = re.sub(r'_(.+?)_', r'<em>\1</em>', text)
+        
+        # Links
+        text = re.sub(r'\[([^\]]+)\]\(([^\)]+)\)', r'<a href="\2" target="_blank">\1</a>', text)
+        
+        # Lists
+        text = re.sub(r'^- (.+)$', r'<li>\1</li>', text, flags=re.MULTILINE)
+        text = re.sub(r'^(\d+)\. (.+)$', r'<li>\2</li>', text, flags=re.MULTILINE)
+        text = re.sub(r'(<li>.*?</li>\n?)+', r'<ul>\g<0></ul>', text, flags=re.DOTALL)
+        
+        # Line breaks
+        text = text.replace('\n', '<br>')
+        
+        return text
+
+    # Format message HTML with markdown and actions
+    def format_message_html(role, content, show_thinking=True, message_id=None):
         role_class = "user-message" if role == "user" else "assistant-message"
         thinking = ""
         answer = ""
         
+        # Extract thinking
         if "<think>" in content:
             parts = content.split("<think>", 1)
             before_think = parts[0].strip()
@@ -1161,39 +1454,64 @@ if __name__ == "__main__":
         else:
             answer = content
         
-        html = f'<div class="{role_class}"><div class="message-content">'
+        # Render markdown
+        answer = render_markdown(answer)
+        
+        html = f'<div class="{role_class}" id="msg-{message_id}"><div class="message-content">'
+        
         if thinking and show_thinking:
-            html += f'<div class="thinking-content">💭 {thinking}</div>'
+            html += f'<div class="thinking-content">💭 {render_markdown(thinking)}</div>'
+        
         if answer:
             html += f'<div>{answer}</div>'
+        
+        # Add message actions for assistant messages
+        if role == "assistant":
+            html += '''
+            <div class="message-actions">
+                <button class="action-btn" onclick="copyMessage(this)">📋 Copy</button>
+                <button class="action-btn" onclick="regenerateResponse(this)">🔄 Regenerate</button>
+            </div>
+            '''
+        
         html += '</div></div>'
         return html
 
     def render_history(history, show_thinking):
+        if not history:
+            return '''
+            <div class="empty-state">
+                <div class="empty-state-icon">💬</div>
+                <div class="empty-state-title">No messages yet</div>
+                <div class="empty-state-subtitle">Start a conversation by typing below</div>
+            </div>
+            '''
+        
         html = ""
-        for msg in history:
-            html += format_message_html(msg["role"], msg["content"], show_thinking)
+        for idx, msg in enumerate(history):
+            html += format_message_html(msg["role"], msg["content"], show_thinking, idx)
         return html
 
     def render_limits_panel(user_data):
         if not user_data or 'user_id' not in user_data:
             return ""
+        
         info = get_user_limits_info(user_data['user_id'])
         if not info:
             return ""
         
         plan_class = f"plan-{info['plan'].lower()}"
+        
         html = f'''<div class="limits-panel">
-            <div style="font-weight: 700; margin-bottom: 16px; font-size: 18px; color: #1f2937;">
-                Usage Limits
-                <span class="plan-badge {plan_class}">{info["plan"]}</span>
+            <div class="limit-header">
+                <span>Usage Limits <span class="plan-badge {plan_class}">{info["plan"]}</span></span>
             </div>
-            <div style="font-size: 13px; color: #6b7280; margin-bottom: 16px; padding: 8px; background: #f9fafb; border-radius: 6px;">
-                ⏰ Resets in: <strong>{info["reset_in"]}</strong>
+            <div style="font-size: 12px; color: #6b7280; margin-bottom: 14px; padding: 8px; background: #f9fafb; border-radius: 6px; text-align: center;">
+                ⏰ <strong>{info["reset_in"]}</strong> until reset
             </div>'''
         
         models_info = [
-            ('Nano ⚡⚡', info['nano_used'], info['nano_limit']),
+            ('Nano ⚡', info['nano_used'], info['nano_limit']),
             ('Mini 🚀', info['mini_used'], info['mini_limit']),
             ('Fast ⚡', info['fast_used'], info['fast_limit']),
             ('Large 💎', info['large_used'], info['large_limit'])
@@ -1201,198 +1519,394 @@ if __name__ == "__main__":
         
         for model_name, used, limit in models_info:
             if limit == -1:
-                status = f'<span class="limit-ok">{used} / ∞</span>'
+                percentage = 0
+                status_class = "limit-ok"
+                status_text = f'{used} / ∞'
+                bar_class = ""
             else:
+                percentage = min((used / limit * 100), 100)
                 remaining = limit - used
                 if remaining <= 0:
-                    status = f'<span class="limit-exceeded">{used}/{limit}</span>'
+                    status_class = "limit-exceeded"
+                    status_text = f'{used}/{limit}'
+                    bar_class = "danger"
                 elif remaining <= 2:
-                    status = f'<span class="limit-warning">{used}/{limit}</span>'
+                    status_class = "limit-warning"
+                    status_text = f'{used}/{limit}'
+                    bar_class = "warning"
                 else:
-                    status = f'<span class="limit-ok">{used}/{limit}</span>'
-            html += f'<div class="limit-item"><span style="font-weight: 500;">{model_name}</span>{status}</div>'
+                    status_class = "limit-ok"
+                    status_text = f'{used}/{limit}'
+                    bar_class = ""
+            
+            html += f'''
+            <div class="limit-item">
+                <span class="limit-label">{model_name}</span>
+                <span class="limit-value {status_class}">{status_text}</span>
+            </div>
+            <div class="progress-bar">
+                <div class="progress-fill {bar_class}" style="width: {percentage}%"></div>
+            </div>
+            '''
         
         html += '</div>'
         return html
 
-    with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="slate")) as demo:
+    with gr.Blocks(css=custom_css, title="SAM-X-1 AI Chat", theme=gr.themes.Soft(primary_hue="slate")) as demo:
+        
+        # JavaScript for interactive features
+        gr.HTML("""
+        <script>
+        function copyCode(button) {
+            const pre = button.parentElement;
+            const code = pre.querySelector('code').textContent;
+            navigator.clipboard.writeText(code).then(() => {
+                button.textContent = 'Copied!';
+                setTimeout(() => button.textContent = 'Copy', 2000);
+            });
+        }
+        
+        function copyMessage(button) {
+            const messageDiv = button.closest('.assistant-message');
+            const content = messageDiv.querySelector('.message-content').textContent;
+            navigator.clipboard.writeText(content).then(() => {
+                showToast('Message copied!', 'success');
+            });
+        }
         
-        # State to track current page and session
-        current_page = gr.State("auth")  # auth, chat, admin
+        function regenerateResponse(button) {
+            showToast('Regeneration feature coming soon!', 'info');
+        }
+        
+        function showToast(message, type = 'info') {
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            toast.innerHTML = `
+                <span>${type === 'success' ? '✓' : type === 'error' ? '✗' : 'ℹ'}</span>
+                <span>${message}</span>
+            `;
+            document.body.appendChild(toast);
+            setTimeout(() => toast.remove(), 3000);
+        }
+        
+        // Keyboard shortcuts
+        document.addEventListener('keydown', function(e) {
+            // Ctrl/Cmd + K for search (future feature)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                e.preventDefault();
+                showToast('Search coming soon!', 'info');
+            }
+            
+            // Esc to stop generation
+            if (e.key === 'Escape') {
+                const stopBtn = document.querySelector('.stop-btn');
+                if (stopBtn && !stopBtn.disabled) stopBtn.click();
+            }
+        });
+        
+        // Auto-scroll chat to bottom
+        function scrollChatToBottom() {
+            const chatContainer = document.querySelector('.chat-container');
+            if (chatContainer) {
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+        }
+        
+        // Call after messages update
+        setInterval(scrollChatToBottom, 500);
+        </script>
+        """)
+        
+        # State management
         session_code = gr.State("")
         user_data = gr.State(None)
+        chat_history = gr.State([])
         
         # Navigation Bar
         with gr.Row(elem_classes="nav-bar"):
             with gr.Column(scale=1, elem_classes="nav-left"):
-                gr.HTML('<div class="nav-brand">🤖 SAM-X-1</div>')
+                gr.HTML('<div class="nav-brand">🤖 SAM-X-1 <span style="font-size: 12px; opacity: 0.8; font-weight: 400;">v3.0</span></div>')
             with gr.Column(scale=2, elem_classes="nav-right"):
                 user_greeting = gr.HTML('<div class="user-greeting">Please sign in</div>')
-                upgrade_nav_btn = gr.Button("⭐ Upgrade", size="sm", visible=False)
-                logout_nav_btn = gr.Button("🚪 Logout", size="sm", visible=False)
+                with gr.Row():
+                    upgrade_nav_btn = gr.Button("⭐ Upgrade", size="sm", visible=False)
+                    logout_nav_btn = gr.Button("🚪 Logout", size="sm", visible=False)
         
         # AUTH PAGE
         with gr.Group(visible=True) as auth_page:
             with gr.Column(elem_classes="auth-container"):
                 gr.HTML('<div class="auth-title">Welcome to SAM-X-1</div>')
-                gr.HTML('<div class="auth-subtitle">Sign in or create a new account</div>')
+                gr.HTML('<div class="auth-subtitle">Sign in or create account • Auto-detects new users</div>')
                 
-                auth_username = gr.Textbox(label="Username", placeholder="Enter your username")
-                auth_password = gr.Textbox(label="Password", type="password", placeholder="Enter your password")
-                auth_email = gr.Textbox(label="Email (optional, for new accounts)", placeholder="[email protected]")
+                auth_username = gr.Textbox(
+                    label="Username", 
+                    placeholder="Enter your username",
+                    elem_id="auth-username"
+                )
+                auth_password = gr.Textbox(
+                    label="Password", 
+                    type="password", 
+                    placeholder="Enter your password",
+                    elem_id="auth-password"
+                )
+                auth_email = gr.Textbox(
+                    label="Email (optional, for new accounts)", 
+                    placeholder="[email protected]"
+                )
                 
                 auth_btn = gr.Button("Continue →", variant="primary", size="lg")
                 auth_msg = gr.Markdown("")
+                
+                gr.Markdown("""
+                <div style="text-align: center; margin-top: 20px; font-size: 12px; color: #9ca3af;">
+                    <p>🔐 Secure authentication • 🆓 Free tier available</p>
+                    <p>Press <span class="kbd">Enter</span> to continue</p>
+                </div>
+                """)
         
         # CHAT PAGE
         with gr.Group(visible=False) as chat_page:
-            with gr.Row():
-                with gr.Column(scale=3):
-                    chat_html = gr.HTML(value='<div class="chat-container"></div>')
+            with gr.Row(elem_classes="chat-layout"):
+                # Main Chat Area
+                with gr.Column(elem_classes="chat-main"):
+                    chat_html = gr.HTML(value='')
                     
-                    with gr.Row(elem_classes="input-row"):
-                        msg_input = gr.Textbox(
-                            placeholder="Ask me anything...", 
-                            show_label=False, 
-                            scale=10,
-                            lines=1
-                        )
-                        send_btn = gr.Button("▶", elem_classes=["circular-btn", "send-btn"])
-                        stop_btn = gr.Button("⏹", elem_classes=["circular-btn", "stop-btn"], visible=False)
+                    speed_display = gr.HTML('<div class="speed-indicator">⚡ Ready to chat</div>')
                     
-                    speed_display = gr.HTML('<div class="speed-indicator">⚡ Ready</div>')
+                    with gr.Column(elem_classes="input-container"):
+                        with gr.Row(elem_classes="input-row"):
+                            msg_input = gr.Textbox(
+                                placeholder="Ask me anything... (Shift+Enter for new line)", 
+                                show_label=False, 
+                                scale=10,
+                                lines=1,
+                                max_lines=5,
+                                elem_id="chat-input"
+                            )
+                            send_btn = gr.Button("▶", elem_classes=["circular-btn", "send-btn"])
+                            stop_btn = gr.Button("⏹", elem_classes=["circular-btn", "stop-btn"], visible=False)
+                        
+                        token_counter = gr.HTML('<div class="token-counter">0 / 256 tokens</div>')
                     
                     with gr.Row():
-                        clear_btn = gr.Button("🗑️ Clear", size="sm")
+                        clear_btn = gr.Button("🗑️ Clear Chat", size="sm")
                         new_chat_btn = gr.Button("➕ New Chat", size="sm", variant="primary")
+                        export_btn = gr.Button("📥 Export", size="sm")
                 
-                with gr.Column(scale=1):
+                # Sidebar
+                with gr.Column(elem_classes="chat-sidebar"):
                     limits_display = gr.HTML("")
                     
                     with gr.Accordion("⚙️ Settings", open=False, elem_classes="settings-panel"):
                         model_selector = gr.Dropdown(
                             choices=["🤖 Auto (Recommended)"], 
                             value="🤖 Auto (Recommended)", 
-                            label="Model Selection"
+                            label="Model Selection",
+                            info="AI picks the best model"
                         )
                         max_tokens_slider = gr.Slider(
                             minimum=64, maximum=512, value=256, step=64, 
-                            label="Max Tokens"
+                            label="Max Tokens",
+                            info="Response length limit"
                         )
                         temperature_slider = gr.Slider(
                             minimum=0.0, maximum=2.0, value=0.7, step=0.1, 
-                            label="Temperature"
+                            label="Temperature",
+                            info="Creativity level"
                         )
                         show_thinking_checkbox = gr.Checkbox(
-                            label="Show Thinking Process", 
-                            value=True
+                            label="💭 Show Thinking Process", 
+                            value=True,
+                            info="See AI's reasoning"
                         )
+                    
+                    with gr.Accordion("ℹ️ Tips & Shortcuts", open=False):
+                        gr.Markdown("""
+                        ### Keyboard Shortcuts
+                        - <span class="kbd">Enter</span> - Send message
+                        - <span class="kbd">Shift+Enter</span> - New line
+                        - <span class="kbd">Esc</span> - Stop generation
+                        - <span class="kbd">Ctrl+K</span> - Search (soon)
+                        
+                        ### Tips
+                        - Be specific in your questions
+                        - Use markdown for formatting
+                        - Auto mode picks the best model
+                        - Check limits panel regularly
+                        """)
         
-        # UPGRADE PAGE (Plans)
+        # UPGRADE PAGE
         with gr.Group(visible=False) as upgrade_page:
-            gr.HTML('<div class="dashboard-header" style="text-align: center;">Choose Your Plan</div>')
-            gr.Markdown("**Select the perfect plan for your needs**", elem_classes="text-center")
+            gr.HTML('''
+            <div style="text-align: center; margin-bottom: 32px;">
+                <div style="font-size: 32px; font-weight: 700; margin-bottom: 8px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+                    Choose Your Plan
+                </div>
+                <div style="font-size: 16px; color: #6b7280;">
+                    Unlock more power and flexibility
+                </div>
+            </div>
+            ''')
             
-            with gr.Column(elem_classes="plans-grid"):
-                gr.HTML('''
-                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px;">
-                    <div class="plan-card">
-                        <div class="plan-name">Free</div>
-                        <div class="plan-price">Perfect for getting started</div>
-                        <ul class="plan-features">
-                            <li>Nano: Unlimited messages</li>
-                            <li>Mini: Unlimited messages</li>
-                            <li>Fast: 10 messages/3h</li>
-                            <li>Large: 8 messages/3h</li>
-                            <li>Auto model selection</li>
-                            <li>256 max tokens</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="plan-card featured">
-                        <div class="plan-name">Plus ⭐</div>
-                        <div class="plan-price">Great for power users</div>
-                        <ul class="plan-features">
-                            <li>Everything in Free</li>
-                            <li>Fast: Unlimited messages</li>
-                            <li>Large: 20 messages/3h</li>
-                            <li>Manual model selection</li>
-                            <li>384 max tokens</li>
-                            <li>Priority support</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="plan-card">
-                        <div class="plan-name">Pro 💎</div>
-                        <div class="plan-price">For professionals</div>
-                        <ul class="plan-features">
-                            <li>Everything in Plus</li>
-                            <li>All models unlimited</li>
-                            <li>512 max tokens</li>
-                            <li>Fastest reset (3h)</li>
-                            <li>24/7 premium support</li>
-                            <li>Early feature access</li>
-                        </ul>
-                    </div>
+            gr.HTML('''
+            <div class="plans-grid">
+                <div class="plan-card">
+                    <div class="plan-name">Free 🆓</div>
+                    <div class="plan-price">Perfect for getting started</div>
+                    <ul class="plan-features">
+                        <li>Nano: Unlimited messages</li>
+                        <li>Mini: Unlimited messages</li>
+                        <li>Fast: 10 messages/3h</li>
+                        <li>Large: 8 messages/3h</li>
+                        <li>Auto model selection</li>
+                        <li>256 max tokens</li>
+                        <li>Community support</li>
+                    </ul>
+                </div>
+                
+                <div class="plan-card featured">
+                    <div class="plan-name">Plus ⭐</div>
+                    <div class="plan-price">Great for power users</div>
+                    <ul class="plan-features">
+                        <li>Everything in Free</li>
+                        <li>Fast: Unlimited messages</li>
+                        <li>Large: 20 messages/3h</li>
+                        <li>Manual model selection</li>
+                        <li>384 max tokens</li>
+                        <li>Priority support</li>
+                        <li>Advanced settings</li>
+                    </ul>
                 </div>
-                ''')
+                
+                <div class="plan-card">
+                    <div class="plan-name">Pro 💎</div>
+                    <div class="plan-price">For professionals</div>
+                    <ul class="plan-features">
+                        <li>Everything in Plus</li>
+                        <li>All models unlimited</li>
+                        <li>512 max tokens</li>
+                        <li>Fastest reset (3h)</li>
+                        <li>24/7 premium support</li>
+                        <li>Early feature access</li>
+                        <li>API access (soon)</li>
+                    </ul>
+                </div>
+                
+                <div class="plan-card">
+                    <div class="plan-name">Research 🔬</div>
+                    <div class="plan-price">For researchers & educators</div>
+                    <ul class="plan-features">
+                        <li>Everything in Pro</li>
+                        <li>Extended limits (1000+ msgs)</li>
+                        <li>1024 max tokens</li>
+                        <li>Batch processing</li>
+                        <li>Custom fine-tuning</li>
+                        <li>Dedicated support</li>
+                        <li>Academic discount</li>
+                    </ul>
+                </div>
+            </div>
+            ''')
             
-            upgrade_plan_choice = gr.Radio(
-                choices=["plus", "pro", "explore", "Research"], 
-                label="Select Plan to Request", 
-                value="plus"
-            )
-            upgrade_reason = gr.Textbox(
-                label="Why do you need this upgrade?", 
-                placeholder="Tell us about your use case...", 
-                lines=3
-            )
-            submit_upgrade_btn = gr.Button("Submit Upgrade Request", variant="primary", size="lg")
-            upgrade_msg = gr.Markdown("")
-            back_to_chat_btn = gr.Button("← Back to Chat", size="sm")
+            gr.Markdown("### 📝 Request an Upgrade")
+            gr.Markdown("Fill out the form below and an admin will review your request within 24 hours.")
+            
+            with gr.Row():
+                with gr.Column(scale=2):
+                    upgrade_plan_choice = gr.Radio(
+                        choices=["plus", "pro", "explore", "Research"], 
+                        label="Select Plan", 
+                        value="plus"
+                    )
+                    upgrade_reason = gr.Textbox(
+                        label="Why do you need this upgrade?", 
+                        placeholder="Tell us about your use case, what you're building, or why you need more access...", 
+                        lines=4
+                    )
+                    with gr.Row():
+                        submit_upgrade_btn = gr.Button("Submit Request 📨", variant="primary", size="lg", scale=2)
+                        back_to_chat_btn = gr.Button("← Back to Chat", size="lg", scale=1)
+                    upgrade_msg = gr.Markdown("")
         
         # ADMIN PAGE
         with gr.Group(visible=False) as admin_page:
-            with gr.Column(elem_classes="admin-dashboard"):
-                gr.HTML('<div class="dashboard-header">👨���💼 Admin Dashboard</div>')
-                
-                with gr.Tabs():
-                    with gr.Tab("👥 Users"):
-                        users_table = gr.Dataframe(
-                            headers=["ID", "Username", "Email", "Plan", "Created", "Admin"]
-                        )
-                        refresh_users_btn = gr.Button("🔄 Refresh", size="sm")
-                        
-                        with gr.Row():
-                            admin_username = gr.Textbox(label="Username", scale=2)
-                            admin_new_plan = gr.Dropdown(
-                                choices=["free", "plus", "pro", "explore", "Research", "VIP"], 
-                                label="New Plan",
-                                scale=1
-                            )
-                            update_plan_btn = gr.Button("Update", variant="primary", scale=1)
-                        admin_msg = gr.Markdown("")
+            gr.HTML('''
+            <div style="text-align: center; margin-bottom: 24px;">
+                <div style="font-size: 28px; font-weight: 700; color: #1f2937;">
+                    👨‍💼 Admin Dashboard
+                </div>
+            </div>
+            ''')
+            
+            with gr.Tabs():
+                with gr.Tab("👥 User Management"):
+                    with gr.Row():
+                        refresh_users_btn = gr.Button("🔄 Refresh Users", size="sm")
+                    
+                    users_table = gr.Dataframe(
+                        headers=["ID", "Username", "Email", "Plan", "Created", "Admin"],
+                        wrap=True
+                    )
                     
-                    with gr.Tab("📋 Requests"):
-                        requests_table = gr.Dataframe(
-                            headers=["ID", "Username", "Plan", "Reason", "Date"]
+                    gr.Markdown("### ✏️ Update User Plan")
+                    with gr.Row():
+                        admin_username = gr.Textbox(label="Username", scale=2, placeholder="username")
+                        admin_new_plan = gr.Dropdown(
+                            choices=["free", "plus", "pro", "explore", "Research", "VIP"], 
+                            label="New Plan",
+                            value="free",
+                            scale=1
                         )
-                        refresh_requests_btn = gr.Button("🔄 Refresh", size="sm")
-                        
-                        with gr.Row():
-                            request_id_input = gr.Number(label="Request ID", precision=0)
-                            approve_req_btn = gr.Button("✅ Approve", variant="primary")
-                            deny_req_btn = gr.Button("❌ Deny", variant="stop")
-                        request_msg = gr.Markdown("")
+                        update_plan_btn = gr.Button("Update Plan", variant="primary", scale=1)
+                    admin_msg = gr.Markdown("")
+                
+                with gr.Tab("📋 Upgrade Requests"):
+                    with gr.Row():
+                        refresh_requests_btn = gr.Button("🔄 Refresh Requests", size="sm")
+                    
+                    requests_table = gr.Dataframe(
+                        headers=["ID", "Username", "Plan", "Reason", "Date"],
+                        wrap=True
+                    )
+                    
+                    gr.Markdown("### 🔍 Review Request")
+                    request_id_input = gr.Number(
+                        label="Request ID (from table above)", 
+                        precision=0, 
+                        minimum=1,
+                        info="Enter the ID number from the first column"
+                    )
+                    with gr.Row():
+                        approve_req_btn = gr.Button("✅ Approve Request", variant="primary", size="lg")
+                        deny_req_btn = gr.Button("❌ Deny Request", variant="stop", size="lg")
+                    request_msg = gr.Markdown("")
+                
+                with gr.Tab("📊 Analytics (Coming Soon)"):
+                    gr.Markdown("""
+                    ### 📈 Usage Statistics
+                    - Total users: Coming soon
+                    - Active users (24h): Coming soon
+                    - Total messages: Coming soon
+                    - Most used model: Coming soon
+                    - Average tokens/message: Coming soon
+                    """)
         
         # ==================== EVENT HANDLERS ====================
         
         def handle_auth(username, password, email):
-            """Unified auth handler - auto signup if new user"""
+            """Unified auth - auto signup if new, FIX: Handle both 'id' and 'user_id'"""
             if len(username) < 3:
-                return None, "❌ Username must be at least 3 characters", gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
+                return (
+                    None, None, "❌ Username must be at least 3 characters", 
+                    gr.update(), gr.update(), gr.update(), gr.update(), 
+                    gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), ""
+                )
             if len(password) < 6:
-                return None, "❌ Password must be at least 6 characters", gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
+                return (
+                    None, None, "❌ Password must be at least 6 characters", 
+                    gr.update(), gr.update(), gr.update(), gr.update(), 
+                    gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), ""
+                )
             
             # Try login first
             success, data = authenticate_user(username, password)
@@ -1404,15 +1918,34 @@ if __name__ == "__main__":
                     # Auto-login after signup
                     success, data = authenticate_user(username, password)
                     if not success:
-                        return None, "❌ Account created but login failed", gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
+                        return (
+                            None, None, "❌ Account created but login failed", 
+                            gr.update(), gr.update(), gr.update(), gr.update(), 
+                            gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), ""
+                        )
                 else:
-                    return None, f"❌ {message}", gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
+                    return (
+                        None, None, f"❌ {message}", 
+                        gr.update(), gr.update(), gr.update(), gr.update(), 
+                        gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), ""
+                    )
             
-            # Generate session code
+            # FIX: Normalize data to always have 'user_id'
+            if 'id' in data and 'user_id' not in data:
+                data['user_id'] = data['id']
+            
+            # Generate session
             code = create_session(data)
             
             # Get user info
             info = get_user_limits_info(data['user_id'])
+            if not info:
+                return (
+                    None, None, "❌ Could not load user info", 
+                    gr.update(), gr.update(), gr.update(), gr.update(), 
+                    gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), ""
+                )
+            
             plan_class = f"plan-{info['plan'].lower()}"
             greeting_html = f'<div class="user-greeting">{get_greeting(username)} <span class="plan-badge {plan_class}">{info["plan"]}</span></div>'
             
@@ -1424,18 +1957,22 @@ if __name__ == "__main__":
             
             limits_html = render_limits_panel(data)
             
+            empty_chat = render_history([], True)
+            
             return (
                 code,
-                f"✅ Welcome, {username}!",
+                data,
+                f"✅ Welcome, **{username}**! Your session is active.",
                 gr.update(visible=False),  # auth_page
                 gr.update(visible=True),   # chat_page
                 gr.update(visible=data.get('is_admin', False)),  # admin_page
                 greeting_html,
                 gr.update(visible=True),   # upgrade_nav_btn
                 gr.update(visible=True),   # logout_nav_btn
-                model_choices,
-                info['max_tokens'],
-                limits_html
+                gr.update(choices=model_choices, value="🤖 Auto (Recommended)"),
+                gr.update(maximum=info['max_tokens'], value=min(256, info['max_tokens'])),
+                limits_html,
+                empty_chat
             )
         
         def show_upgrade_page():
@@ -1449,6 +1986,8 @@ if __name__ == "__main__":
                 invalidate_session(code)
             return (
                 "",
+                None,
+                [],
                 gr.update(visible=True),   # auth_page
                 gr.update(visible=False),  # chat_page
                 gr.update(visible=False),  # admin_page
@@ -1460,51 +1999,57 @@ if __name__ == "__main__":
                 ""
             )
         
-        def send_message_handler(message, show_thinking, temperature, model_choice, max_tokens, code):
+        def send_message_handler(message, history, show_thinking, temperature, model_choice, max_tokens, code):
             global stop_generation
             stop_generation.clear()
             
             if not code:
-                return "", "", '<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ Session expired</div>', gr.update(), gr.update(), ""
+                error_html = '<div class="speed-indicator error">❌ Session expired - please sign in again</div>'
+                return "", history, "", error_html, gr.update(), gr.update(), ""
             
             data = validate_session(code)
             if not data:
-                return "", "", '<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ Session expired</div>', gr.update(), gr.update(), ""
+                error_html = '<div class="speed-indicator error">❌ Session expired - please sign in again</div>'
+                return "", history, "", error_html, gr.update(), gr.update(), ""
             
             if not message.strip():
-                return "", "", '<div class="speed-indicator">⚡ Ready</div>', gr.update(), gr.update(), ""
+                return "", history, "", '<div class="speed-indicator">⚡ Ready to chat</div>', gr.update(), gr.update(), render_limits_panel(data)
             
             info = get_user_limits_info(data['user_id'])
             
-            # Model selection logic
+            # Model selection
             if model_choice == "🤖 Auto (Recommended)" or not info['can_choose_model']:
                 user_available = get_available_models_for_user(data['user_id'])
                 if not user_available:
-                    return "", "", '<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ No models available</div>', gr.update(), gr.update(), render_limits_panel(data)
+                    error_html = '<div class="speed-indicator error">❌ No models available (limits reached)</div>'
+                    return "", history, "", error_html, gr.update(), gr.update(), render_limits_panel(data)
                 backend = select_model_auto(message, available_models, user_available)
                 if not backend:
-                    return "", "", '<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ Could not select model</div>', gr.update(), gr.update(), render_limits_panel(data)
+                    error_html = '<div class="speed-indicator error">❌ Could not select model</div>'
+                    return "", history, "", error_html, gr.update(), gr.update(), render_limits_panel(data)
                 model_name = backend.get_name()
             else:
                 model_name = model_choice
                 can_use, msg = can_use_model(data['user_id'], model_name)
                 if not can_use:
-                    return "", "", f'<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ {msg}</div>', gr.update(), gr.update(), render_limits_panel(data)
+                    error_html = f'<div class="speed-indicator error">❌ {msg}</div>'
+                    return "", history, "", error_html, gr.update(), gr.update(), render_limits_panel(data)
                 backend = available_models[model_name]
             
             # Final check
             can_use, msg = can_use_model(data['user_id'], model_name)
             if not can_use:
-                return "", "", f'<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">❌ {msg}</div>', gr.update(), gr.update(), render_limits_panel(data)
+                error_html = f'<div class="speed-indicator error">❌ {msg}</div>'
+                return "", history, "", error_html, gr.update(), gr.update(), render_limits_panel(data)
             
             # Increment usage
             increment_model_usage(data['user_id'], model_name)
             
-            yield "", "", f'<div class="speed-indicator" style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af;">⚡ Using {model_name}...</div>', gr.update(interactive=False), gr.update(visible=True), render_limits_panel(data)
-            
-            history = [{"role": "user", "content": message}]
-            yield "", render_history(history, show_thinking), '<div class="speed-indicator" style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af;">⚡ Generating...</div>', gr.update(interactive=False), gr.update(visible=True), render_limits_panel(data)
+            # Add user message
+            history.append({"role": "user", "content": message})
+            yield "", history, render_history(history, show_thinking), f'<div class="speed-indicator generating">⚡ Using {model_name}...</div>', gr.update(interactive=False), gr.update(visible=True), render_limits_panel(data)
             
+            # Start generation
             prompt = f"User: {message}\nSam: <think>"
             history.append({"role": "assistant", "content": "<think>"})
             
@@ -1525,18 +2070,31 @@ if __name__ == "__main__":
                         history[-1]["content"] += new_chunk
                     
                     last_speed = avg_speed
-                    yield "", render_history(history, show_thinking), f'<div class="speed-indicator" style="background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); color: #166534;">⚡ {tokens_per_sec:.1f} tok/s</div>', gr.update(interactive=False), gr.update(visible=True), render_limits_panel(data)
+                    yield "", history, render_history(history, show_thinking), f'<div class="speed-indicator generating">⚡ {tokens_per_sec:.1f} tok/s</div>', gr.update(interactive=False), gr.update(visible=True), render_limits_panel(data)
+            
+            if was_stopped:
+                final_html = f'<div class="speed-indicator error">🛑 Stopped - {last_speed:.1f} tok/s</div>'
+            else:
+                final_html = f'<div class="speed-indicator">✅ Done - {last_speed:.1f} tok/s</div>'
             
-            final_html = f'<div class="speed-indicator" style="background: linear-gradient(135deg, {"#fee2e2 0%, #fecaca 100%); color: #991b1b;" if was_stopped else "#dcfce7 0%, #bbf7d0 100%); color: #166534;"}>{"🛑 Stopped" if was_stopped else "✅ Done"} - {last_speed:.1f} tok/s</div>'
-            yield "", render_history(history, show_thinking), final_html, gr.update(interactive=True), gr.update(visible=False), render_limits_panel(data)
+            yield "", history, render_history(history, show_thinking), final_html, gr.update(interactive=True), gr.update(visible=False), render_limits_panel(data)
         
         def stop_generation_handler():
             global stop_generation
             stop_generation.set()
-            return '<div class="speed-indicator" style="background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #991b1b;">🛑 Stopping...</div>', gr.update(interactive=False), gr.update(visible=False)
+            return '<div class="speed-indicator error">🛑 Stopping...</div>', gr.update(interactive=False), gr.update(visible=False)
+        
+        def clear_chat(history):
+            empty = render_history([], True)
+            return [], empty, '<div class="speed-indicator">⚡ Ready to chat</div>', gr.update(interactive=True), gr.update(visible=False)
         
-        def clear_chat():
-            return '<div class="chat-container"></div>', '<div class="speed-indicator">⚡ Ready</div>', gr.update(interactive=True), gr.update(visible=False)
+        def export_chat(history):
+            # Simple export as text
+            text = ""
+            for msg in history:
+                role = "You" if msg["role"] == "user" else "SAM-X-1"
+                text += f"{role}: {msg['content']}\n\n"
+            return text
         
         def submit_upgrade_request(code, plan, reason):
             if not code:
@@ -1547,10 +2105,12 @@ if __name__ == "__main__":
                 return "❌ Session expired"
             
             if not reason.strip():
-                return "❌ Please provide a reason"
+                return "❌ Please provide a reason for your upgrade request"
             
             success, msg = request_upgrade(data['user_id'], plan, reason)
-            return f"{'✅' if success else '❌'} {msg}"
+            if success:
+                return f"✅ {msg}\n\nAn admin will review your request within 24 hours. You'll be notified via email if provided."
+            return f"❌ {msg}"
         
         def load_all_users():
             users = get_all_users()
@@ -1574,7 +2134,7 @@ if __name__ == "__main__":
                     req[0], 
                     req[1], 
                     req[2], 
-                    req[3], 
+                    req[3][:100] + "..." if len(req[3]) > 100 else req[3],
                     req[4][:10] if req[4] else "N/A"
                 ])
             return formatted
@@ -1583,60 +2143,63 @@ if __name__ == "__main__":
             if not username or not new_plan:
                 return "❌ Please fill all fields"
             success, msg = update_user_plan(username, new_plan)
-            return f"{'✅' if success else '❌'} {msg}"
+            if success:
+                return f"✅ {msg}\n\nThe user's limits have been reset and they now have access to {new_plan} features."
+            return f"❌ {msg}"
         
         def admin_approve_request_handler(request_id):
             if not request_id:
-                return "❌ Please enter request ID"
+                return "❌ Please enter a request ID"
             success, msg = approve_request(int(request_id))
-            return f"{'✅' if success else '❌'} {msg}"
+            if success:
+                return f"✅ {msg}\n\nThe user has been upgraded and can now access their new plan features."
+            return f"❌ {msg}"
         
         def admin_deny_request_handler(request_id):
             if not request_id:
-                return "❌ Please enter request ID"
+                return "❌ Please enter a request ID"
             success, msg = deny_request(int(request_id))
-            return f"{'✅' if success else '❌'} {msg}"
+            if success:
+                return f"✅ {msg}\n\nThe request has been marked as denied."
+            return f"❌ {msg}"
         
         # ==================== WIRE UP EVENTS ====================
         
         # Auth
         auth_outputs = [
-            session_code, auth_msg, auth_page, chat_page, admin_page, 
+            session_code, user_data, auth_msg, auth_page, chat_page, admin_page, 
             user_greeting, upgrade_nav_btn, logout_nav_btn, 
-            model_selector, max_tokens_slider, limits_display
+            model_selector, max_tokens_slider, limits_display, chat_html
         ]
-        auth_btn.click(
-            handle_auth, 
-            [auth_username, auth_password, auth_email], 
-            auth_outputs
-        )
+        auth_btn.click(handle_auth, [auth_username, auth_password, auth_email], auth_outputs)
+        auth_password.submit(handle_auth, [auth_username, auth_password, auth_email], auth_outputs)
         
         # Navigation
         upgrade_nav_btn.click(show_upgrade_page, outputs=[chat_page, upgrade_page])
         back_to_chat_btn.click(back_to_chat, outputs=[chat_page, upgrade_page])
         
         logout_outputs = [
-            session_code, auth_page, chat_page, admin_page, upgrade_page,
+            session_code, user_data, chat_history, auth_page, chat_page, admin_page, upgrade_page,
             user_greeting, upgrade_nav_btn, logout_nav_btn, chat_html, limits_display
         ]
         logout_nav_btn.click(handle_logout, [session_code], logout_outputs)
         
         # Chat
-        send_outputs = [msg_input, chat_html, speed_display, send_btn, stop_btn, limits_display]
+        send_outputs = [msg_input, chat_history, chat_html, speed_display, send_btn, stop_btn, limits_display]
         send_btn.click(
             send_message_handler, 
-            [msg_input, show_thinking_checkbox, temperature_slider, model_selector, max_tokens_slider, session_code], 
+            [msg_input, chat_history, show_thinking_checkbox, temperature_slider, model_selector, max_tokens_slider, session_code], 
             send_outputs
         )
         msg_input.submit(
             send_message_handler, 
-            [msg_input, show_thinking_checkbox, temperature_slider, model_selector, max_tokens_slider, session_code], 
+            [msg_input, chat_history, show_thinking_checkbox, temperature_slider, model_selector, max_tokens_slider, session_code], 
             send_outputs
         )
         
         stop_btn.click(stop_generation_handler, outputs=[speed_display, send_btn, stop_btn])
-        clear_btn.click(clear_chat, outputs=[chat_html, speed_display, send_btn, stop_btn])
-        new_chat_btn.click(clear_chat, outputs=[chat_html, speed_display, send_btn, stop_btn])
+        clear_btn.click(clear_chat, [chat_history], [chat_history, chat_html, speed_display, send_btn, stop_btn])
+        new_chat_btn.click(clear_chat, [chat_history], [chat_history, chat_html, speed_display, send_btn, stop_btn])
         
         # Upgrade
         submit_upgrade_btn.click(
@@ -1655,27 +2218,135 @@ if __name__ == "__main__":
         # Footer
         gr.Markdown("""
         ---
-        ### 🚀 Getting Started
         
-        1. **Enter your username and password** - We'll automatically create an account if you're new!
-        2. **Start chatting** - Ask anything and SAM-X-1 will help you
-        3. **Need more?** - Click the ⭐ Upgrade button to see plans and request an upgrade
+        <div style="text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); border-radius: 12px; margin-top: 40px;">
+            <div style="font-size: 24px; font-weight: 700; margin-bottom: 16px; color: #1f2937;">
+                🚀 Powered by SAM-X-1 Technology
+            </div>
+            <div style="font-size: 14px; color: #6b7280; margin-bottom: 24px;">
+                State-of-the-art AI models built with Keras & TensorFlow
+            </div>
+            
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 32px;">
+                <div>
+                    <div style="font-size: 28px; font-weight: 700; color: #667eea;">4</div>
+                    <div style="font-size: 12px; color: #6b7280; text-transform: uppercase;">AI Models</div>
+                </div>
+                <div>
+                    <div style="font-size: 28px; font-weight: 700; color: #10a37f;">Fast</div>
+                    <div style="font-size: 12px; color: #6b7280; text-transform: uppercase;">Response Time</div>
+                </div>
+                <div>
+                    <div style="font-size: 28px; font-weight: 700; color: #f59e0b;">24/7</div>
+                    <div style="font-size: 12px; color: #6b7280; text-transform: uppercase;">Availability</div>
+                </div>
+                <div>
+                    <div style="font-size: 28px; font-weight: 700; color: #ef4444;">Free</div>
+                    <div style="font-size: 12px; color: #6b7280; text-transform: uppercase;">Tier Available</div>
+                </div>
+            </div>
+        </div>
+        
+        ### 🎯 Quick Start Guide
+        
+        **New Users:**
+        1. Enter your username and password above
+        2. We'll automatically create your account
+        3. Start chatting immediately with unlimited Nano & Mini models!
+        
+        **Tips for Best Results:**
+        - 💡 Use **Auto mode** - SAM intelligently selects the best model for your task
+        - 🔄 Enable **Show Thinking** to understand SAM's reasoning process
+        - 📊 Monitor the **limits panel** to track your usage
+        - ⚙️ Adjust **temperature** for creativity (0.7 is balanced)
+        
+        ### 📊 Model Comparison
+        
+        | Model | Speed | Quality | Best For |
+        |-------|-------|---------|----------|
+        | **Nano ⚡⚡** | Fastest | Good | Quick questions, simple tasks |
+        | **Mini 🚀** | Fast | Great | General conversations, explanations |
+        | **Fast ⚡** | Balanced | Excellent | Complex questions, coding |
+        | **Large 💎** | Thorough | Premium | Deep analysis, research |
+        
+        ### 💎 Upgrade Benefits
+        
+        **Plus Plan ($):**
+        - Fast model unlimited
+        - Large model 20 msgs/3h
+        - Manual model selection
+        - 384 max tokens
+        - Priority support
+        
+        **Pro Plan ($):**
+        - All models unlimited
+        - 512 max tokens
+        - Fastest limits reset
+        - Premium support
+        - Early features
+        
+        ### 🔐 Privacy & Security
+        
+        - 🛡️ Secure authentication with session codes
+        - 🔒 Passwords are properly hashed (SHA256 → upgrading to bcrypt soon)
+        - 📊 Usage tracking for fair limits
+        - 🚫 We never share your data
+        - ⚖️ Rate limiting prevents abuse
+        
+        ### 🆘 Need Help?
+        
+        - **Questions?** Check the Tips & Shortcuts in the sidebar
+        - **Upgrade?** Click the ⭐ Upgrade button in the nav bar
+        - **Issues?** Contact admin or report via feedback
+        - **Shortcuts?** Press <span class="kbd">Ctrl+K</span> for keyboard shortcuts
+        
+        ### 🎨 Features Included
+        
+        ✅ **Markdown rendering** - Format your messages with bold, italic, code blocks  
+        ✅ **Syntax highlighting** - Beautiful code display  
+        ✅ **Copy buttons** - One-click copy for code and messages  
+        ✅ **Auto-scroll** - Chat automatically scrolls to latest message  
+        ✅ **Keyboard shortcuts** - Fast navigation and actions  
+        ✅ **Responsive design** - Works on desktop, tablet, and mobile  
+        ✅ **Dark mode ready** - Easy on the eyes (coming soon)  
+        ✅ **Progress tracking** - Visual usage indicators  
+        ✅ **Toast notifications** - Subtle feedback for actions  
+        ✅ **Empty states** - Helpful when starting new chats  
+        ✅ **Smooth animations** - Polished user experience  
         
-        ### 📊 Quick Plan Overview
+        ### 🚀 Coming Soon
         
-        - **Free**: Nano & Mini unlimited, Fast 10/3h, Large 8/3h
-        - **Plus**: Fast unlimited, Large 20/3h + manual model selection
-        - **Pro**: Everything unlimited + 512 tokens + priority support
+        - 🌙 Dark mode toggle
+        - 💾 Conversation history & search
+        - 📁 Export to PDF/Markdown
+        - 🎤 Voice input/output
+        - 🔗 Share conversations
+        - 📱 Mobile app
+        - 🤝 Team workspaces
+        - 📊 Advanced analytics
+        - 🔌 API access
         
-        ### 💡 Tips
+        ### 📜 Legal
         
-        - Use **Auto mode** for best results - SAM will pick the right model for you
-        - Watch the **limits panel** on the right to track your usage
-        - Enable **Show Thinking** to see SAM's reasoning process
+        By using SAM-X-1, you agree to our Terms of Service and Privacy Policy.  
+        © 2025 SAM-X-1 Labs • Built with ❤️ and AI
         
         ---
         
-        Made with ❤️ by the SAM-X-1 Team | Powered by Keras & TensorFlow
+        <div style="text-align: center; padding: 20px; color: #9ca3af; font-size: 12px;">
+            <p><strong>SAM-X-1 v3.0</strong> • Production-Grade AI Chat Interface</p>
+            <p>Powered by TensorFlow • Keras • Gradio • Python</p>
+            <p style="margin-top: 12px;">
+                Made with 🤖 by AI researchers, for AI enthusiasts
+            </p>
+        </div>
         """)
     
-    demo.launch(debug=True, share=False, server_name="0.0.0.0", server_port=7860)
+    demo.launch(
+        debug=True, 
+        share=False, 
+        server_name="0.0.0.0", 
+        server_port=7860,
+        favicon_path=None,
+        show_error=True
+    )