fixes & improvements..

app.py

@@ -18,7 +18,7 @@ import guard
 import retriever
 import auth as auth_module
 from config import EXPORT_SECRET, REDIS_URI, GOOGLE_CLIENT_ID
-from graph import chatbot, DEFAULT_MODEL
+from graph import chatbot, TEXT_MODEL, VISION_MODEL
 
 
 app = FastAPI()
@@ -276,6 +276,8 @@ def chat(request: ChatRequest, req: Request):
 
         # Step 5: Stream LLM response via LangGraph
         yield sse_status("Preparing the explanation...")
+        has_image = bool(request.image)
+        model_used = VISION_MODEL if has_image else TEXT_MODEL
         config = {
             "configurable": {
                 "thread_id":       request.thread_id,
@@ -285,6 +287,7 @@ def chat(request: ChatRequest, req: Request):
                 "username":        request.username,
                 "student_profile": student_profile,
                 "user_api_key":    user_api_key,
+                "has_image":       has_image,
             }
         }
 
@@ -305,6 +308,11 @@ def chat(request: ChatRequest, req: Request):
                     "I'm getting a lot of questions right now. "
                     "Please try again in a few seconds."
                 )
+            elif "402" in str(e) or "payment" in error_str or "credits" in error_str:
+                yield sse_error(
+                    "Free credits exhausted. Please add credits at openrouter.ai/settings/credits "
+                    "or update your API key in Settings."
+                )
             elif "401" in str(e) or "unauthorized" in error_str or "invalid" in error_str:
                 yield sse_error(
                     "API key issue. Please check your OpenRouter API key in Settings."
@@ -337,7 +345,7 @@ def chat(request: ChatRequest, req: Request):
             persona=request.persona, language=request.language,
             username=request.username, user_agent=user_agent,
             sources=sources, user_id=request.user_id,
-            model_used=DEFAULT_MODEL,
+            model_used=model_used,
         )
 
     return StreamingResponse(stream(), media_type="text/event-stream")

graph.py

@@ -1,8 +1,9 @@
 """
-LangGraph definition — single chat node with dynamic OpenRouter model selection.
-Checkpointer: SQLite via official LangGraph SqliteSaver.from_conn_string().
+LangGraph definition — single chat node with free OpenRouter model selection.
+Checkpointer: SQLite via official LangGraph SqliteSaver.
 
-Ref: https://docs.langchain.com/oss/python/langgraph/add-memory
+Text model:  nvidia/llama-3.1-nemotron-ultra-253b-v1:free
+Vision model: nex-agi/nex-n2-pro:free
 """
 
 from langgraph.graph import StateGraph, START, END
@@ -23,22 +24,31 @@ _conn = sqlite3.connect(DB_PATH, check_same_thread=False)
 checkpointer = SqliteSaver(conn=_conn)
 
 
-# --- Model config ---
-DEFAULT_MODEL = "google/gemini-2.5-flash"
+# --- Free model config ---
+TEXT_MODEL   = "nvidia/llama-3.1-nemotron-ultra-253b-v1:free"
+VISION_MODEL = "nex-agi/nex-n2-pro:free"
 
 
-def _get_llm(api_key: str = "", model: str = ""):
-    """Create an LLM instance with the user's API key (BYOK) or shared fallback."""
+def _get_llm(api_key: str = "", model: str = "", has_image: bool = False):
+    """Create an LLM instance. Picks vision model if image is attached."""
     key = api_key or OPENROUTER_API_KEY
     if not key:
         raise ValueError("No API key available. Please add your OpenRouter key in Settings.")
-    mdl = model or DEFAULT_MODEL
+
+    # Model priority: explicit override > auto-select based on image
+    if model:
+        mdl = model
+    elif has_image:
+        mdl = VISION_MODEL
+    else:
+        mdl = TEXT_MODEL
+
     return ChatOpenRouter(
         model=mdl,
         openrouter_api_key=key,
         temperature=0.5,
-        max_tokens=8192,
-        max_retries=2,
+        max_tokens=4096,
+        max_retries=3,
         streaming=True,
     )
 
@@ -60,12 +70,13 @@ def chat_node(state: ChatState, config: RunnableConfig):
     student_profile = cfg.get("student_profile", "")
     user_api_key = cfg.get("user_api_key", "")
     model_name = cfg.get("model", "")
+    has_image = cfg.get("has_image", False)
 
     system_msg = SystemMessage(
         content=prompts.build(persona, context, language, username, student_profile)
     )
 
-    llm = _get_llm(api_key=user_api_key, model=model_name)
+    llm = _get_llm(api_key=user_api_key, model=model_name, has_image=has_image)
     all_msgs = [system_msg] + state["messages"]
     response = llm.invoke(all_msgs)
 

static/app.js

@@ -32,44 +32,79 @@ const chatContainer     = document.getElementById('chatContainer');
 const welcomeScreen     = document.getElementById('welcomeScreen');
 const bottomInputContainer = document.getElementById('bottomInputContainer');
 
-// Bottom input bar
 const userInput         = document.getElementById('userInput');
 const sendBtn           = document.getElementById('sendBtn');
 const newChatBtn        = document.getElementById('newChatBtn');
 const stopBtn           = document.getElementById('stopBtn');
 
-// Hero input bar
 const heroInput         = document.getElementById('heroInput');
 const heroSendBtn       = document.getElementById('heroSendBtn');
 const heroUploadBtn     = document.getElementById('heroUploadBtn');
 const heroImageInput    = document.getElementById('heroImageInput');
 
-// Auth
 const byokInput         = document.getElementById('byokInput');
 const byokSubmitBtn     = document.getElementById('byokSubmitBtn');
 
-// User menu
 const userProfileBtn    = document.getElementById('userProfileBtn');
 const userMenu          = document.getElementById('userMenu');
 const userAvatar        = document.getElementById('userAvatar');
 const userDisplayName   = document.getElementById('userDisplayName');
 const logoutBtn         = document.getElementById('logoutBtn');
 
-// Rail
 const railExpandBtn     = document.getElementById('railExpandBtn');
 const railNewChatBtn    = document.getElementById('railNewChatBtn');
 const railProfileBtn    = document.getElementById('railProfileBtn');
 const railAvatar        = document.getElementById('railAvatar');
 
-// Settings
 const settingsOverlay   = document.getElementById('settingsOverlay');
 const openSettingsBtn   = document.getElementById('openSettingsBtn');
 const settingsCloseBtn  = document.getElementById('settingsCloseBtn');
 const settingsModal     = document.getElementById('settingsModal');
-
 const feedbackMenuBtn   = document.getElementById('feedbackMenuBtn');
 
-// Feedback button in sidebar — opens Settings modal at the Feedback tab
+const usernameInput     = document.getElementById('usernameInput');
+const languageSelect    = document.getElementById('languageSelect');
+const profileInput      = document.getElementById('profileInput');
+const saveProfileBtn    = document.getElementById('saveProfileBtn');
+const settingsApiKeyInput = document.getElementById('settingsApiKeyInput');
+const saveApiKeyBtn     = document.getElementById('saveApiKeyBtn');
+
+const uploadBtn         = document.getElementById('uploadBtn');
+const imageInput        = document.getElementById('imageInput');
+const imagePreviewBar   = document.getElementById('imagePreviewBar');
+const imagePreviewThumb = document.getElementById('imagePreviewThumb');
+const imagePreviewRemove= document.getElementById('imagePreviewRemove');
+
+const installBanner     = document.getElementById('installBanner');
+const installBtn        = document.getElementById('installBtn');
+const installDismiss    = document.getElementById('installDismiss');
+
+
+/* ============================================================
+   TOAST NOTIFICATION
+   ============================================================ */
+function showToast(msg, type = 'info') {
+    const t = document.createElement('div');
+    t.textContent = msg;
+    Object.assign(t.style, {
+        position: 'fixed', bottom: '80px', left: '50%', transform: 'translateX(-50%)',
+        background: type === 'error' ? '#ff4a4a' : type === 'success' ? '#2ea44f' : '#333',
+        color: '#fff', padding: '10px 20px', borderRadius: '10px', fontSize: '13px',
+        fontFamily: 'inherit', zIndex: '9999', boxShadow: '0 4px 20px rgba(0,0,0,0.5)',
+        transition: 'opacity 0.3s', opacity: '0', maxWidth: '90vw', textAlign: 'center',
+    });
+    document.body.appendChild(t);
+    requestAnimationFrame(() => t.style.opacity = '1');
+    setTimeout(() => {
+        t.style.opacity = '0';
+        setTimeout(() => t.remove(), 300);
+    }, 2500);
+}
+
+
+/* ============================================================
+   FEEDBACK
+   ============================================================ */
 function openFeedbackInSettings() {
     userMenu.classList.remove('show');
     document.querySelectorAll('.settings-nav-btn').forEach(b => b.classList.remove('active'));
@@ -80,10 +115,7 @@ function openFeedbackInSettings() {
     if (fbTab) fbTab.classList.add('active');
     settingsOverlay.classList.add('show');
 }
-
-if (feedbackMenuBtn) {
-    feedbackMenuBtn.addEventListener('click', openFeedbackInSettings);
-}
+if (feedbackMenuBtn) feedbackMenuBtn.addEventListener('click', openFeedbackInSettings);
 
 function _bindFeedbackSubmit() {
     const submitFeedbackBtn = document.getElementById('submitFeedbackBtn');
@@ -92,51 +124,31 @@ function _bindFeedbackSubmit() {
         const cat = document.getElementById('feedbackCategory').value;
         const msg = document.getElementById('feedbackMessage').value;
         if (!msg.trim()) { document.getElementById('feedbackMessage').focus(); return; }
-
         submitFeedbackBtn.disabled = true;
         submitFeedbackBtn.textContent = 'Submitting...';
-
         fetch('/feedback', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
                 user_id: currentUser ? currentUser.google_id : 'anonymous',
-                category: cat,
-                message: msg
+                category: cat, message: msg
             })
-        }).then(r => r.json()).then(() => {
+        }).then(r => {
+            if (!r.ok) throw new Error('Server error');
+            return r.json();
+        }).then(() => {
             settingsOverlay.classList.remove('show');
             document.getElementById('feedbackMessage').value = '';
-            submitFeedbackBtn.disabled = false;
-            submitFeedbackBtn.textContent = 'Submit Securely';
-            alert('Feedback submitted. Thank you!');
+            showToast('Feedback submitted. Thank you!', 'success');
         }).catch(() => {
+            showToast('Could not submit feedback. Please try again.', 'error');
+        }).finally(() => {
             submitFeedbackBtn.disabled = false;
             submitFeedbackBtn.textContent = 'Submit Securely';
-            alert('Could not submit feedback. Please try again.');
         });
     });
 }
 
-const usernameInput     = document.getElementById('usernameInput');
-const languageSelect    = document.getElementById('languageSelect');
-const profileInput      = document.getElementById('profileInput');
-const saveProfileBtn    = document.getElementById('saveProfileBtn');
-const settingsApiKeyInput = document.getElementById('settingsApiKeyInput');
-const saveApiKeyBtn     = document.getElementById('saveApiKeyBtn');
-
-// Image upload (bottom bar)
-const uploadBtn         = document.getElementById('uploadBtn');
-const imageInput        = document.getElementById('imageInput');
-const imagePreviewBar   = document.getElementById('imagePreviewBar');
-const imagePreviewThumb = document.getElementById('imagePreviewThumb');
-const imagePreviewRemove= document.getElementById('imagePreviewRemove');
-
-// PWA
-const installBanner     = document.getElementById('installBanner');
-const installBtn        = document.getElementById('installBtn');
-const installDismiss    = document.getElementById('installDismiss');
-
 
 /* ============================================================
    AUTH — Google Sign-In
@@ -145,38 +157,26 @@ const installDismiss    = document.getElementById('installDismiss');
 let _gsiInitialized = false;
 
 function initGoogleAuth() {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
         if (_gsiInitialized) { resolve(); return; }
-
         fetch('/auth/client_id')
             .then(r => r.json())
             .then(data => {
-                if (!data.client_id) {
-                    showApp();
-                    resolve();
-                    return;
-                }
-
+                if (!data.client_id) { showApp(); resolve(); return; }
                 const script = document.createElement('script');
                 script.src = 'https://accounts.google.com/gsi/client';
-                script.async = true;
-                script.defer = true;
+                script.async = true; script.defer = true;
                 script.onload = () => {
                     google.accounts.id.initialize({
                         client_id: data.client_id,
                         callback: handleGoogleCredential,
-                        auto_select: false,
-                        cancel_on_tap_outside: false,
+                        auto_select: false, cancel_on_tap_outside: false,
                     });
                     _renderHiddenGoogleBtn();
                     _gsiInitialized = true;
                     resolve();
                 };
-                script.onerror = () => {
-                    console.error('[AUTH] Failed to load Google Identity Services');
-                    showApp();
-                    resolve();
-                };
+                script.onerror = () => { showApp(); resolve(); };
                 document.head.appendChild(script);
             })
             .catch(() => { showApp(); resolve(); });
@@ -188,37 +188,23 @@ function _renderHiddenGoogleBtn(cb) {
     if (!container) return;
     container.innerHTML = '';
     google.accounts.id.renderButton(container, {
-        type: 'standard',
-        theme: 'filled_black',
-        size: 'large',
-        text: 'signin_with',
-        shape: 'pill',
-        width: 240,
+        type: 'standard', theme: 'filled_black', size: 'large',
+        text: 'signin_with', shape: 'pill', width: 240,
     });
-    setTimeout(() => {
-        container.style.pointerEvents = 'auto';
-        if (cb) cb();
-    }, 150);
+    setTimeout(() => { container.style.pointerEvents = 'auto'; if (cb) cb(); }, 150);
 }
 
 function triggerGoogleSignIn() {
     const tryClick = () => {
         const realBtn = document.querySelector('#gsi-hidden-btn [role="button"]');
-        if (realBtn) {
-            realBtn.click();
-        } else {
-            _renderHiddenGoogleBtn(() => {
-                const btn = document.querySelector('#gsi-hidden-btn [role="button"]');
-                if (btn) btn.click();
-            });
-        }
+        if (realBtn) { realBtn.click(); }
+        else { _renderHiddenGoogleBtn(() => {
+            const btn = document.querySelector('#gsi-hidden-btn [role="button"]');
+            if (btn) btn.click();
+        }); }
     };
-
-    if (_gsiInitialized) {
-        tryClick();
-    } else {
-        initGoogleAuth().then(tryClick);
-    }
+    if (_gsiInitialized) tryClick();
+    else initGoogleAuth().then(tryClick);
 }
 
 function handleGoogleCredential(response) {
@@ -227,16 +213,19 @@ function handleGoogleCredential(response) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ token: response.credential }),
     })
-    .then(r => r.json())
+    .then(r => {
+        if (!r.ok) throw new Error('Auth failed');
+        return r.json();
+    })
     .then(data => {
-        if (data.error) { alert('Login failed: ' + data.error); return; }
+        if (data.error) { showToast('Login failed: ' + data.error, 'error'); return; }
         currentUser = data.user;
         localStorage.setItem('stemcopilot_user', JSON.stringify(currentUser));
         currentUsername = currentUser.name;
         localStorage.setItem('stemcopilot_username', currentUsername);
-        if (!data.has_api_key) { showByok(); } else { showApp(); }
+        if (!data.has_api_key) showByok(); else showApp();
     })
-    .catch(() => alert('Login failed. Please try again.'));
+    .catch(() => showToast('Login failed. Check your connection and try again.', 'error'));
 }
 
 function checkExistingSession() {
@@ -254,7 +243,7 @@ function checkExistingSession() {
                     return;
                 }
                 currentUser = data.user;
-                if (!data.has_api_key) { showByok(); } else { showApp(); }
+                if (!data.has_api_key) showByok(); else showApp();
             })
             .catch(() => initGoogleAuth());
     } else {
@@ -281,9 +270,9 @@ if (byokSubmitBtn) byokSubmitBtn.addEventListener('click', () => {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ user_id: currentUser.google_id, key: key }),
     })
-    .then(r => r.json())
+    .then(r => { if (!r.ok) throw new Error(); return r.json(); })
     .then(() => showApp())
-    .catch(() => alert('Failed to save key. Try again.'));
+    .catch(() => showToast('Failed to save key. Try again.', 'error'));
 });
 
 
@@ -315,12 +304,10 @@ function showApp() {
     if (usernameInput) usernameInput.value = currentUsername;
     if (languageSelect) languageSelect.value = currentLanguage;
 
-    // Set active persona
     document.querySelectorAll('.persona-option').forEach(opt => {
         opt.classList.toggle('active', opt.dataset.persona === currentPersona);
     });
 
-    // Load thread history
     const userId = currentUser ? currentUser.google_id : '';
     fetch('/threads?user_id=' + encodeURIComponent(userId))
         .then(r => r.json())
@@ -330,10 +317,8 @@ function showApp() {
         })
         .catch(() => {});
 
-    // On mobile, ensure sidebar starts collapsed
-    if (window.innerWidth <= 768) {
-        collapseSidebar();
-    }
+    // Ensure sidebar starts collapsed on mobile
+    if (window.innerWidth <= 768) closeSidebar();
 
     enterHeroMode();
 }
@@ -363,13 +348,12 @@ function exitHeroMode() {
 
 
 /* ============================================================
-   SIDEBAR — Simplified, no drag (button + overlay only)
+   SIDEBAR
    ============================================================ */
 
 let sidebarOpen = false;
 
 function _cleanSidebarStyles() {
-    // Remove ANY leftover inline styles from old drag system
     sidebar.style.transition = '';
     sidebar.style.transform  = '';
     sidebar.style.opacity    = '';
@@ -385,9 +369,7 @@ function openSidebar() {
     sidebarOpen = true;
     _cleanSidebarStyles();
     sidebar.classList.remove('collapsed');
-    if (sidebarOverlay && window.innerWidth <= 768) {
-        sidebarOverlay.classList.add('visible');
-    }
+    if (sidebarOverlay && window.innerWidth <= 768) sidebarOverlay.classList.add('visible');
     if (sidebarRail) sidebarRail.classList.remove('visible');
 }
 
@@ -396,34 +378,24 @@ function closeSidebar() {
     _cleanSidebarStyles();
     sidebar.classList.add('collapsed');
     if (sidebarOverlay) sidebarOverlay.classList.remove('visible');
-    // Show rail on desktop only
-    if (sidebarRail && window.innerWidth > 768) {
-        sidebarRail.classList.add('visible');
-    }
+    if (sidebarRail && window.innerWidth > 768) sidebarRail.classList.add('visible');
 }
 
 function toggleSidebar() {
-    if (sidebarOpen) closeSidebar();
-    else openSidebar();
+    if (sidebarOpen) closeSidebar(); else openSidebar();
 }
 
-// Toggle button in header
-if (toggleSidebarBtn) {
-    toggleSidebarBtn.addEventListener('click', toggleSidebar);
-}
+if (toggleSidebarBtn) toggleSidebarBtn.addEventListener('click', toggleSidebar);
 
-// Overlay tap closes sidebar
 if (sidebarOverlay) {
     sidebarOverlay.addEventListener('click', closeSidebar);
     sidebarOverlay.addEventListener('touchstart', (e) => {
-        e.preventDefault();
-        closeSidebar();
+        e.preventDefault(); closeSidebar();
     }, { passive: false });
 }
 
-// Simple edge-swipe: swipe from left edge opens, swipe left on overlay closes
-let _touchStartX = 0;
-let _touchStartY = 0;
+// Edge swipe — 60px zone, mid-screen horizontal swipe
+let _touchStartX = 0, _touchStartY = 0;
 document.addEventListener('touchstart', (e) => {
     if (window.innerWidth > 768) return;
     _touchStartX = e.changedTouches[0].clientX;
@@ -434,19 +406,13 @@ document.addEventListener('touchend', (e) => {
     if (window.innerWidth > 768) return;
     const dx = e.changedTouches[0].clientX - _touchStartX;
     const dy = Math.abs(e.changedTouches[0].clientY - _touchStartY);
-    // Must be more horizontal than vertical
-    if (dy > Math.abs(dx) * 0.8) return;
-    // Swipe right from left edge → open
-    if (!sidebarOpen && _touchStartX < 30 && dx > 60) {
-        openSidebar();
-    }
-    // Swipe left → close
-    if (sidebarOpen && dx < -60) {
-        closeSidebar();
-    }
+    if (dy > Math.abs(dx) * 0.8) return; // too vertical
+    // Swipe right from left 60px edge → open
+    if (!sidebarOpen && _touchStartX < 60 && dx > 50) openSidebar();
+    // Swipe left anywhere → close
+    if (sidebarOpen && dx < -50) closeSidebar();
 }, { passive: true });
 
-// Rail buttons
 if (railExpandBtn) railExpandBtn.addEventListener('click', openSidebar);
 if (railNewChatBtn) railNewChatBtn.addEventListener('click', () => startNewChat());
 if (railProfileBtn) railProfileBtn.addEventListener('click', () => {
@@ -454,13 +420,8 @@ if (railProfileBtn) railProfileBtn.addEventListener('click', () => {
     setTimeout(() => { if (userProfileBtn) userProfileBtn.click(); }, 150);
 });
 
-// Mobile FAB toggle
 const mobileFabToggle = document.getElementById('mobileFabToggle');
-if (mobileFabToggle) {
-    mobileFabToggle.addEventListener('click', toggleSidebar);
-}
-
-// New chat button
+if (mobileFabToggle) mobileFabToggle.addEventListener('click', toggleSidebar);
 if (newChatBtn) newChatBtn.addEventListener('click', startNewChat);
 
 function startNewChat() {
@@ -469,7 +430,6 @@ function startNewChat() {
     chatContainer.appendChild(createWelcomeScreen());
     enterHeroMode();
     renderHistory();
-    // Close sidebar on mobile after starting new chat
     if (window.innerWidth <= 768) closeSidebar();
 }
 
@@ -506,36 +466,19 @@ function createWelcomeScreen() {
     const dynFileInput = div.querySelector('#heroImageInputDynamic');
 
     dynInput.addEventListener('input', function() {
-        this.style.height = '54px';
-        this.style.height = this.scrollHeight + 'px';
+        this.style.height = '54px'; this.style.height = this.scrollHeight + 'px';
     });
-
     dynInput.addEventListener('keydown', function(e) {
         if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            userInput.value = dynInput.value;
-            sendMessage();
+            e.preventDefault(); userInput.value = dynInput.value; sendMessage();
         }
     });
-
-    dynSend.addEventListener('click', () => {
-        userInput.value = dynInput.value;
-        sendMessage();
-    });
-
+    dynSend.addEventListener('click', () => { userInput.value = dynInput.value; sendMessage(); });
     dynUpload.addEventListener('click', () => dynFileInput.click());
-    dynFileInput.addEventListener('change', () => {
-        const file = dynFileInput.files[0];
-        if (file) handleImageFile(file);
-    });
-
+    dynFileInput.addEventListener('change', () => { if (dynFileInput.files[0]) handleImageFile(dynFileInput.files[0]); });
     div.querySelectorAll('.hero-pill').forEach(p => {
-        p.addEventListener('click', () => {
-            userInput.value = p.dataset.query;
-            sendMessage();
-        });
+        p.addEventListener('click', () => { userInput.value = p.dataset.query; sendMessage(); });
     });
-
     return div;
 }
 
@@ -578,8 +521,6 @@ function loadThread(threadId) {
     renderHistory();
     chatContainer.innerHTML = '';
     exitHeroMode();
-
-    // Close sidebar on mobile
     if (window.innerWidth <= 768) closeSidebar();
 
     fetch('/history/' + threadId)
@@ -589,10 +530,7 @@ function loadThread(threadId) {
                 const sender = msg.role === 'user' ? 'user' : 'ai';
                 let textContent = msg.content;
                 if (Array.isArray(msg.content)) {
-                    textContent = msg.content
-                        .filter(part => part.type === 'text')
-                        .map(part => part.text)
-                        .join('');
+                    textContent = msg.content.filter(p => p.type === 'text').map(p => p.text).join('');
                 }
                 const el = appendMessage(sender, textContent);
                 if (sender === 'ai') renderFinalContent(el, textContent);
@@ -606,12 +544,10 @@ function loadThread(threadId) {
    ============================================================ */
 
 function toggleMenu(e, btn) {
-    e.stopPropagation();
-    closeAllMenus();
+    e.stopPropagation(); closeAllMenus();
     btn.nextElementSibling.classList.add('show');
     btn.classList.add('menu-open');
 }
-
 document.addEventListener('click', closeAllMenus);
 
 function closeAllMenus() {
@@ -637,29 +573,20 @@ function renameChat(e, optionEl) {
     const titleSpan = item.querySelector('.chat-title');
     const threadId = item.getAttribute('data-thread-id');
     closeAllMenus();
-
     const currentTitle = titleSpan.innerText;
     const input = document.createElement('input');
-    input.type = 'text';
-    input.value = currentTitle;
-    input.className = 'rename-input';
-    titleSpan.replaceWith(input);
-    input.focus();
+    input.type = 'text'; input.value = currentTitle; input.className = 'rename-input';
+    titleSpan.replaceWith(input); input.focus();
     input.selectionStart = input.selectionEnd = input.value.length;
 
     function saveRename() {
         const newTitle = input.value.trim() || 'Untitled Chat';
-        titleSpan.innerText = newTitle;
-        input.replaceWith(titleSpan);
+        titleSpan.innerText = newTitle; input.replaceWith(titleSpan);
         const thread = threads.find(t => t.id === threadId);
         if (thread) thread.title = newTitle;
-        fetch('/rename', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ thread_id: threadId, title: newTitle })
-        });
+        fetch('/rename', { method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ thread_id: threadId, title: newTitle }) });
     }
-
     input.addEventListener('blur', saveRename);
     input.addEventListener('keydown', evt => {
         if (evt.key === 'Enter') saveRename();
@@ -674,28 +601,21 @@ function renameChat(e, optionEl) {
    ============================================================ */
 
 if (userProfileBtn) userProfileBtn.addEventListener('click', (e) => {
-    e.stopPropagation();
-    userMenu.classList.toggle('show');
+    e.stopPropagation(); userMenu.classList.toggle('show');
 });
-
 if (openSettingsBtn) openSettingsBtn.addEventListener('click', () => {
-    userMenu.classList.remove('show');
-    settingsOverlay.classList.add('show');
+    userMenu.classList.remove('show'); settingsOverlay.classList.add('show');
 });
-
 if (settingsCloseBtn) settingsCloseBtn.addEventListener('click', () => settingsOverlay.classList.remove('show'));
 if (settingsOverlay) settingsOverlay.addEventListener('click', (e) => {
     if (e.target === settingsOverlay) settingsOverlay.classList.remove('show');
 });
-
 if (logoutBtn) logoutBtn.addEventListener('click', () => {
     localStorage.removeItem('stemcopilot_user');
     localStorage.removeItem('stemcopilot_username');
-    currentUser = null;
-    location.reload();
+    currentUser = null; location.reload();
 });
 
-// Settings tabs
 document.querySelectorAll('.settings-nav-btn').forEach(btn => {
     btn.addEventListener('click', () => {
         document.querySelectorAll('.settings-nav-btn').forEach(b => b.classList.remove('active'));
@@ -706,19 +626,15 @@ document.querySelectorAll('.settings-nav-btn').forEach(btn => {
     });
 });
 
-// Username
 if (usernameInput) usernameInput.addEventListener('input', () => {
     currentUsername = usernameInput.value.trim();
     localStorage.setItem('stemcopilot_username', currentUsername);
 });
-
-// Language
 if (languageSelect) languageSelect.addEventListener('change', () => {
     currentLanguage = languageSelect.value;
     localStorage.setItem('stemcopilot_language', currentLanguage);
 });
 
-// Persona selection
 document.querySelectorAll('.persona-option').forEach(opt => {
     opt.addEventListener('click', () => {
         document.querySelectorAll('.persona-option').forEach(o => o.classList.remove('active'));
@@ -728,26 +644,41 @@ document.querySelectorAll('.persona-option').forEach(opt => {
     });
 });
 
-// Save API key
+// Save API key — with success/error feedback
 if (saveApiKeyBtn) saveApiKeyBtn.addEventListener('click', () => {
     const key = settingsApiKeyInput.value.trim();
     if (!key || key.startsWith('••')) return;
     if (!currentUser) return;
+    saveApiKeyBtn.disabled = true;
+    saveApiKeyBtn.textContent = 'Saving...';
     fetch('/user/apikey', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ user_id: currentUser.google_id, key: key }),
-    }).then(() => { settingsApiKeyInput.value = '••••••••••••'; });
+    }).then(r => {
+        if (!r.ok) throw new Error();
+        return r.json();
+    }).then(() => {
+        settingsApiKeyInput.value = '••••••••••••';
+        showToast('API key saved successfully!', 'success');
+    }).catch(() => {
+        showToast('Failed to save API key. Please try again.', 'error');
+    }).finally(() => {
+        saveApiKeyBtn.disabled = false;
+        saveApiKeyBtn.textContent = 'Save Key';
+    });
 });
 
-// Save student profile
 if (saveProfileBtn) saveProfileBtn.addEventListener('click', () => {
     if (!currentUser) return;
     fetch('/user/profile', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ user_id: currentUser.google_id, profile: profileInput.value }),
-    });
+    }).then(r => {
+        if (!r.ok) throw new Error();
+        showToast('Profile saved!', 'success');
+    }).catch(() => showToast('Failed to save profile.', 'error'));
 });
 
 
@@ -756,27 +687,16 @@ if (saveProfileBtn) saveProfileBtn.addEventListener('click', () => {
    ============================================================ */
 
 if (uploadBtn) uploadBtn.addEventListener('click', () => imageInput.click());
-
-if (imageInput) imageInput.addEventListener('change', () => {
-    const file = imageInput.files[0];
-    if (file) handleImageFile(file);
-});
-
+if (imageInput) imageInput.addEventListener('change', () => { if (imageInput.files[0]) handleImageFile(imageInput.files[0]); });
 if (heroUploadBtn) heroUploadBtn.addEventListener('click', () => heroImageInput.click());
-if (heroImageInput) heroImageInput.addEventListener('change', () => {
-    const file = heroImageInput.files[0];
-    if (file) handleImageFile(file);
-});
+if (heroImageInput) heroImageInput.addEventListener('change', () => { if (heroImageInput.files[0]) handleImageFile(heroImageInput.files[0]); });
 
-// Paste
 document.addEventListener('paste', (e) => {
     const items = e.clipboardData?.items;
     if (!items) return;
     for (const item of items) {
         if (item.type.startsWith('image/')) {
-            e.preventDefault();
-            handleImageFile(item.getAsFile());
-            return;
+            e.preventDefault(); handleImageFile(item.getAsFile()); return;
         }
     }
 });
@@ -800,81 +720,69 @@ if (imagePreviewRemove) imagePreviewRemove.addEventListener('click', () => {
 
 
 /* ============================================================
-   CHAT & STREAMING WITH LIVE MARKDOWN RENDERING
+   CHAT & STREAMING — with REAL stop button
    ============================================================ */
 
 let currentAbortController = null;
+let currentStreamReader    = null;   // ← key: we keep a ref to cancel it
 
 function _showStopBtn() {
     if (sendBtn) sendBtn.style.display = 'none';
-    if (stopBtn) {
-        stopBtn.style.display = 'flex';
-        stopBtn.classList.add('visible');
-    }
+    if (stopBtn) { stopBtn.style.display = 'flex'; stopBtn.classList.add('visible'); }
 }
-
 function _showSendBtn() {
-    if (stopBtn) {
-        stopBtn.style.display = 'none';
-        stopBtn.classList.remove('visible');
-    }
+    if (stopBtn) { stopBtn.style.display = 'none'; stopBtn.classList.remove('visible'); }
     if (sendBtn) sendBtn.style.display = 'flex';
 }
 
 if (stopBtn) {
     stopBtn.addEventListener('click', () => {
+        // 1) Cancel the stream reader so no more tokens arrive
+        if (currentStreamReader) {
+            try { currentStreamReader.cancel(); } catch(_) {}
+            currentStreamReader = null;
+        }
+        // 2) Abort the fetch connection so server detects disconnect
         if (currentAbortController) {
             currentAbortController.abort();
             currentAbortController = null;
         }
+        // 3) Reset UI state
         isSending = false;
         _showSendBtn();
         const currentThinking = document.getElementById('currentThinking');
         if (currentThinking) currentThinking.style.display = 'none';
         document.querySelectorAll('.ai-avatar.pulsing').forEach(el => el.classList.remove('pulsing'));
+        // 4) Remove the typing cursor from partial response
+        document.querySelectorAll('.message-content.cursor').forEach(el => el.classList.remove('cursor'));
     });
 }
 
 if (userInput) {
     userInput.addEventListener('input', function () {
-        this.style.height = '54px';
-        this.style.height = this.scrollHeight + 'px';
+        this.style.height = '54px'; this.style.height = this.scrollHeight + 'px';
     });
-
     userInput.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            sendMessage();
-        }
+        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
     });
 }
 
 if (sendBtn) sendBtn.addEventListener('click', sendMessage);
 
-// Hero pills (static)
 document.querySelectorAll('.hero-pill').forEach(p => {
-    p.addEventListener('click', () => {
-        userInput.value = p.dataset.query;
-        sendMessage();
-    });
+    p.addEventListener('click', () => { userInput.value = p.dataset.query; sendMessage(); });
 });
 
-// Hero send (static)
 if (heroSendBtn) heroSendBtn.addEventListener('click', () => {
-    userInput.value = heroInput.value;
-    sendMessage();
+    userInput.value = heroInput.value; sendMessage();
 });
-
 if (heroInput) {
     heroInput.addEventListener('input', function() {
-        this.style.height = '54px';
-        this.style.height = this.scrollHeight + 'px';
+        this.style.height = '54px'; this.style.height = this.scrollHeight + 'px';
     });
     heroInput.addEventListener('keydown', function(e) {
         if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            userInput.value = heroInput.value;
-            sendMessage();
+            e.preventDefault(); userInput.value = heroInput.value; sendMessage();
         }
     });
 }
@@ -882,9 +790,7 @@ if (heroInput) {
 function sendMessage() {
     const text = userInput.value.trim();
     if (!text || isSending) return;
-
     if (isHeroMode) exitHeroMode();
-
     isSending = true;
 
     if (pendingImage) {
@@ -899,8 +805,7 @@ function sendMessage() {
         appendMessage('user', text);
     }
 
-    userInput.value = '';
-    userInput.style.height = '54px';
+    userInput.value = ''; userInput.style.height = '54px';
 
     const exists = threads.find(t => t.id === currentThreadId);
     if (!exists) {
@@ -908,11 +813,8 @@ function sendMessage() {
         addThreadToSidebar(currentThreadId, title);
     } else {
         const idx = threads.indexOf(exists);
-        threads.splice(idx, 1);
-        threads.unshift(exists);
-        renderHistory();
+        threads.splice(idx, 1); threads.unshift(exists); renderHistory();
     }
-
     streamResponse(text);
 }
 
@@ -935,7 +837,6 @@ function streamResponse(text) {
     `;
     chatContainer.appendChild(rowDiv);
     scrollToBottom();
-
     _showStopBtn();
 
     const thinkingEl = rowDiv.querySelector('#currentThinking');
@@ -943,24 +844,21 @@ function streamResponse(text) {
     const contentEl = rowDiv.querySelector('.message-content');
     let rawText = '';
     let firstToken = true;
+    let stopped = false;
 
     let renderTimer = null;
     const RENDER_INTERVAL = 120;
-
     function scheduleRender() {
-        if (renderTimer) return;
+        if (renderTimer || stopped) return;
         renderTimer = setTimeout(() => {
             renderTimer = null;
-            renderFinalContent(contentEl, rawText);
-            scrollToBottom();
+            if (!stopped) { renderFinalContent(contentEl, rawText); scrollToBottom(); }
         }, RENDER_INTERVAL);
     }
 
     const payload = {
-        message: text,
-        thread_id: currentThreadId,
-        persona: currentPersona,
-        language: currentLanguage,
+        message: text, thread_id: currentThreadId,
+        persona: currentPersona, language: currentLanguage,
         username: currentUsername,
         user_id: currentUser ? currentUser.google_id : '',
         image: imageData,
@@ -975,13 +873,14 @@ function streamResponse(text) {
         signal: currentAbortController.signal,
     }).then(response => {
         const reader = response.body.getReader();
+        currentStreamReader = reader;  // ← store so stop button can cancel it
         const decoder = new TextDecoder();
         let buffer = '';
 
         function read() {
             reader.read().then(({ done, value }) => {
-                if (done) {
-                    finishStream(thinkingEl, contentEl, rawText, renderTimer);
+                if (done || stopped) {
+                    if (!stopped) finishStream(thinkingEl, contentEl, rawText, renderTimer);
                     return;
                 }
 
@@ -990,31 +889,22 @@ function streamResponse(text) {
                 buffer = lines.pop();
 
                 lines.forEach(line => {
+                    if (stopped) return;
                     if (!line.startsWith('data: ')) return;
-                    const payload = line.substring(6);
-
-                    if (payload === '[DONE]') {
+                    const pl = line.substring(6);
+                    if (pl === '[DONE]') {
                         finishStream(thinkingEl, contentEl, rawText, renderTimer);
-                        return;
+                        stopped = true; return;
                     }
-
                     try {
-                        const data = JSON.parse(payload);
-
-                        if (data.status === 'thinking') {
-                            thinkingText.textContent = data.message;
-                            return;
-                        }
-
+                        const data = JSON.parse(pl);
+                        if (data.status === 'thinking') { thinkingText.textContent = data.message; return; }
                         if (data.error) {
                             thinkingEl.style.display = 'none';
                             contentEl.style.display = 'block';
                             contentEl.innerHTML = `<div class="error-message">${escapeHtml(data.error)}</div>`;
-                            isSending = false;
-                            _showSendBtn();
-                            return;
+                            isSending = false; _showSendBtn(); stopped = true; return;
                         }
-
                         if (data.token !== undefined) {
                             if (firstToken) {
                                 thinkingEl.style.display = 'none';
@@ -1025,29 +915,36 @@ function streamResponse(text) {
                             rawText += data.token;
                             scheduleRender();
                         }
-                    } catch (e) { /* ignore parse errors */ }
+                    } catch (_) {}
                 });
 
-                read();
+                if (!stopped) read();
+            }).catch(err => {
+                // reader.read() rejected — happens on abort/cancel
+                if (err.name === 'AbortError' || stopped) return;
+                // Genuine error
+                thinkingEl.style.display = 'none';
+                contentEl.style.display = 'block';
+                if (!rawText) contentEl.innerHTML = '<div class="error-message">Connection lost. Please try again.</div>';
+                isSending = false; _showSendBtn();
             });
         }
-
         read();
-    }).catch((err) => {
+    }).catch(err => {
         if (err.name === 'AbortError') {
+            // User clicked stop before any response — that's fine
             thinkingEl.style.display = 'none';
             contentEl.style.display = 'block';
-            isSending = false;
-            _showSendBtn();
+            isSending = false; _showSendBtn();
             return;
         }
         thinkingEl.style.display = 'none';
         contentEl.style.display = 'block';
         contentEl.innerHTML = '<div class="error-message">Could not connect to the server. Please try again.</div>';
-        isSending = false;
-        _showSendBtn();
+        isSending = false; _showSendBtn();
     }).finally(() => {
         currentAbortController = null;
+        currentStreamReader = null;
         const avatar = rowDiv.querySelector('#avatarThinking');
         if (avatar) avatar.classList.remove('pulsing');
     });
@@ -1085,9 +982,7 @@ function appendMessage(sender, text) {
     return rowDiv.querySelector('.message-content');
 }
 
-function scrollToBottom() {
-    chatContainer.scrollTop = chatContainer.scrollHeight;
-}
+function scrollToBottom() { chatContainer.scrollTop = chatContainer.scrollHeight; }
 
 function escapeHtml(text) {
     if (typeof text !== 'string') return '';
@@ -1103,37 +998,15 @@ function escapeHtml(text) {
 
 function renderFinalContent(element, rawText) {
     if (!rawText) return;
-
     const blocks = [];
     let safeText = rawText;
-
-    safeText = safeText.replace(/\$\$[\s\S]*?\$\$/g, match => {
-        blocks.push(match);
-        return `%%LATEX_${blocks.length - 1}%%`;
-    });
-
-    safeText = safeText.replace(/\$[^\$\n]+?\$/g, match => {
-        blocks.push(match);
-        return `%%LATEX_${blocks.length - 1}%%`;
-    });
-
-    safeText = safeText.replace(/\\\[[\s\S]*?\\\]/g, match => {
-        blocks.push(match);
-        return `%%LATEX_${blocks.length - 1}%%`;
-    });
-    safeText = safeText.replace(/\\\([\s\S]*?\\\)/g, match => {
-        blocks.push(match);
-        return `%%LATEX_${blocks.length - 1}%%`;
-    });
-
+    safeText = safeText.replace(/\$\$[\s\S]*?\$\$/g, m => { blocks.push(m); return `%%LATEX_${blocks.length-1}%%`; });
+    safeText = safeText.replace(/\$[^\$\n]+?\$/g, m => { blocks.push(m); return `%%LATEX_${blocks.length-1}%%`; });
+    safeText = safeText.replace(/\\\[[\s\S]*?\\\]/g, m => { blocks.push(m); return `%%LATEX_${blocks.length-1}%%`; });
+    safeText = safeText.replace(/\\\([\s\S]*?\\\)/g, m => { blocks.push(m); return `%%LATEX_${blocks.length-1}%%`; });
     let html = typeof marked !== 'undefined' ? marked.parse(safeText) : safeText;
-
-    blocks.forEach((block, i) => {
-        html = html.replace(`%%LATEX_${i}%%`, block);
-    });
-
+    blocks.forEach((block, i) => { html = html.replace(`%%LATEX_${i}%%`, block); });
     element.innerHTML = html;
-
     if (typeof renderMathInElement !== 'undefined') {
         renderMathInElement(element, {
             delimiters: [
@@ -1161,7 +1034,7 @@ let deferredPrompt = null;
 window.addEventListener('beforeinstallprompt', (e) => {
     e.preventDefault();
     deferredPrompt = e;
-    // Show install banner (mobile + desktop, unless dismissed)
+    // Show install banner immediately — works on login screen too
     const dismissed = localStorage.getItem('stemcopilot_install_dismissed');
     if (!dismissed && installBanner) {
         installBanner.style.display = 'flex';
@@ -1188,6 +1061,9 @@ if (installDismiss) installDismiss.addEventListener('click', () => {
    INIT
    ============================================================ */
 
+// Ensure sidebar starts collapsed in DOM (matches CSS default)
+if (sidebar) sidebar.classList.add('collapsed');
+
 window.addEventListener('load', () => {
     checkExistingSession();
     _bindFeedbackSubmit();

static/index.html

@@ -81,7 +81,7 @@
     <div class="app-container" id="appContainer" style="display:none;">
 
         <!-- Sidebar (full) -->
-        <aside class="sidebar" id="sidebar">
+        <aside class="sidebar collapsed" id="sidebar">
             <div class="sidebar-top">
                 <div class="sidebar-logo-row">
                     <img src="/assets/stembotix.png" alt="STEMbotix" class="sidebar-logo">