rollback - safe changes

app.py

@@ -5,7 +5,6 @@ FastAPI application — routes for chat (SSE streaming), auth, settings, and sta
 import os
 import json
 import time
-import base64
 import io
 from typing import Optional
 from fastapi import FastAPI, Request, UploadFile, File
@@ -51,8 +50,8 @@ class ChatRequest(BaseModel):
     language: str = "auto"
     username: str = ""
     user_id: str = ""
-    image: str = ""        # base64 encoded image
-    doc_text: str = ""    # extracted text from an uploaded document
+    image: str = ""        # base64 encoded image data
+    doc_text: str = ""     # extracted text from attached document
 
 
 class RenameRequest(BaseModel):
@@ -82,6 +81,7 @@ class FeedbackRequest(BaseModel):
     message: str
     attachments: Optional[list[dict]] = None   # [{filename, content (b64), content_type}]
 
+
 @app.post("/feedback")
 async def submit_feedback(req: FeedbackRequest):
     ok = feed_module.send_feedback(
@@ -204,6 +204,7 @@ async def upload_doc(file: UploadFile = File(...)):
 
 APP_DIR = os.path.dirname(os.path.abspath(__file__))
 
+
 @app.get("/sw.js")
 def serve_sw():
     """Service worker must be served from root for PWA scope."""
@@ -262,9 +263,13 @@ def chat(request: ChatRequest, req: Request):
             yield sse_done()
             return
 
-        # Step 2: Retrieve context from Pinecone
-        results = retriever.search(request.message)
-        context = retriever.format_context(results)
+        # Step 2: Retrieve context from Pinecone (resilient to connection/latencies)
+        try:
+            results = retriever.search(request.message)
+            context = retriever.format_context(results)
+        except Exception as exc:
+            print(f"[PINECONE ERROR] Failed to retrieve context: {exc}")
+            context = "No relevant context found due to a temporary search error."
 
         # Step 3: Build message (text or multimodal with image / document)
         extra_context = ""
@@ -325,6 +330,7 @@ def chat(request: ChatRequest, req: Request):
                 # Regular AI text token
                 elif isinstance(chunk, AIMessage) and chunk.content:
                     yield sse_token(chunk.content)
+
         except Exception as e:
             error_str = str(e).lower()
             if "429" in str(e) or "rate" in error_str:

graph.py

@@ -1,16 +1,9 @@
 """
 LangGraph — Intelligent Model Router for STEM Copilot.
 
-Routes queries to the best free OpenRouter model based on intent:
-  - Math / derivation / proofs    → top reasoning models (rotated)
-  - Physics / chemistry concepts  → strong general models (rotated)
-  - Casual greetings ("hi", "ok") → lightweight models
-  - Image understanding           → vision-capable models (verified)
-
-Model pools are fetched from the OpenRouter API, cached for 10 min,
-and rotated per-category to avoid per-model rate limits.
-On 429 errors, the failed model is skipped and the next model in the
-pool is tried automatically (up to 2 retries).
+Routes queries to the best free OpenRouter model based on intent.
+Uses static model pools (excluding Venice) to ensure stability and low latency.
+Supports tool-calling (web search, YouTube transcript) inside a ReAct loop.
 """
 
 from langgraph.graph import StateGraph, START, END
@@ -24,9 +17,6 @@ from typing import TypedDict, Annotated
 
 import sqlite3
 import time
-import json
-import urllib.request
-import threading
 from langgraph.checkpoint.sqlite import SqliteSaver  # type:ignore
 from config import OPENROUTER_API_KEY, DB_PATH, LLM_TIMEOUT
 import prompts
@@ -38,26 +28,30 @@ _conn = sqlite3.connect(DB_PATH, check_same_thread=False)
 checkpointer = SqliteSaver(conn=_conn)
 
 
-# ── Constants ─────────────────────────────────────────────────
-DEFAULT_MODEL = "openai/gpt-oss-120b:free"
-MODELS_TTL    = 10 * 60   # seconds
-
-
-# ── Hard model blocklist (Venice-served / known bad actors) ──
-# These models are temporarily rate-limited upstream on Venice and cause
-# 429 storms or routing errors.  They are blocked regardless of the
-# OpenRouter API model list.  Update as OpenRouter stabilises them.
-_BLOCKED_MODELS: frozenset[str] = frozenset([
-    "meta-llama/llama-3.3-70b-instruct:free",
-    "nousresearch/hermes-3-llama-3.1-405b:free",
-    "qwen/qwen3-coder:free",
-])
-
-
-def _is_guardrail(model_id: str) -> bool:
-    """Auto-filter safety classifiers / guardrail models."""
-    base = model_id.lower().split(":")[0]
-    return any(kw in base for kw in ("guard", "shield", "safety", "moderation"))
+# ── Static Model Pools (excluding Venice provider) ──
+_STATIC_POOLS = {
+    "reasoning": [
+        "nvidia/nemotron-3-ultra-550b-a55b:free",
+        "nex-agi/nex-n2-pro:free",
+        "google/gemma-4-31b-it:free",
+    ],
+    "science": [
+        "nvidia/nemotron-nano-9b-v2:free",
+        "nvidia/nemotron-3-nano-30b-a3b:free",
+    ],
+    "general": [
+        "nvidia/nemotron-nano-9b-v2:free",
+        "nvidia/nemotron-3-nano-30b-a3b:free",
+    ],
+    "casual": [
+        "openai/gpt-oss-20b:free",
+        "nvidia/nemotron-3-nano-30b-a3b:free",
+    ],
+    "vision": [
+        "nvidia/nemotron-3-nano-omni-30b-a3b-reasoning:free",
+        "google/gemma-4-31b-it:free",
+    ]
+}
 
 
 # ── Query Classification ─────────────────────────────────────
@@ -123,144 +117,35 @@ def _classify(text: str) -> str:
     return "general"
 
 
-# ── Model Scoring ─────────────────────────────────────────────
-
-def _score(model_id: str) -> int:
-    """Higher score ≈ better for hard reasoning tasks."""
-    m = model_id.lower()
-    s = 50
-    for tag, pts in [
-        ("253b", 100), ("250b", 100), ("200b", 95),
-        ("120b", 90), ("110b", 88), ("100b", 85),
-        ("70b", 70), ("72b", 70), ("65b", 68),
-        ("49b", 55), ("46b", 55), ("40b", 55),
-        ("27b", 40), ("32b", 42), ("34b", 42),
-        ("13b", 20), ("14b", 20), ("8b", 15),
-        ("3b", -20), ("1b", -40), ("0.5b", -50),
-    ]:
-        if tag in m:
-            s += pts
-            break
-    if "nemotron" in m: s += 15
-    if "gpt"      in m: s += 10
-    if "llama"    in m: s += 5
-    if "qwen"     in m: s += 5
-    if "deepseek" in m: s += 8
-    return s
-
-
-# ── Model Pool Fetching & Caching ─────────────────────────────
-
-_cache: dict | None = None
-_cache_at = 0.0
-_lock = threading.Lock()
-_counters: dict[str, int] = {}
-
-
-def _fetch_pools() -> dict:
-    """Fetch free models, detect vision support, build sorted pools."""
-    global _cache, _cache_at
-
-    with _lock:
-        if _cache and (time.time() - _cache_at) < MODELS_TTL:
-            return _cache
-
-    try:
-        req = urllib.request.Request(
-            "https://openrouter.ai/api/v1/models",
-            headers={
-                "HTTP-Referer": "https://stemcopilot.app",
-                "User-Agent": "STEMCopilot/1.0",
-            },
-        )
-        with urllib.request.urlopen(req, timeout=10) as resp:
-            raw = json.loads(resp.read().decode())
-
-        text_all, vision_all = [], []
-
-        for m in raw.get("data", []):
-            mid = m.get("id", "")
-            if not mid.endswith(":free"):
-                continue
-            if _is_guardrail(mid):
-                continue
-            if mid in _BLOCKED_MODELS:
-                continue
-
-            arch = m.get("architecture", {})
-            modality   = arch.get("modality", "")
-            input_mods = arch.get("input_modalities", [])
-            # Vision pool: any model accepting image, video, or audio input
-            # Covers nemotron-omni (video+audio) and standard vision models
-            has_vision = (
-                "image" in modality
-                or "image" in input_mods
-                or "video" in input_mods
-                or "audio" in input_mods
-            )
-
-            entry = {"id": mid, "score": _score(mid), "vision": has_vision}
-            text_all.append(entry)
-            if has_vision:
-                vision_all.append(entry)
-
-        text_all.sort(key=lambda x: x["score"], reverse=True)
-        vision_all.sort(key=lambda x: x["score"], reverse=True)
-
-        pools = {
-            "reasoning": text_all[:6],
-            "science":   text_all[:8],
-            "general":   text_all[:10],
-            "casual":    text_all[-5:][::-1] if len(text_all) >= 5 else text_all[:3],
-            "vision":    vision_all,
-        }
-
-        with _lock:
-            _cache = pools
-            _cache_at = time.time()
-
-        print(f"[ROUTER] {len(text_all)} free models, {len(vision_all)} vision-capable")
-        for cat in ("reasoning", "casual", "vision"):
-            ids = [e["id"] for e in pools[cat][:3]]
-            if ids:
-                print(f"[ROUTER]  {cat}: {ids}")
-
-        return pools
-
-    except Exception as exc:
-        print(f"[ROUTER] Fetch failed: {exc}")
-        fallback_entry = {"id": DEFAULT_MODEL, "score": 50, "vision": False}
-        return _cache or {
-            k: [fallback_entry]
-            for k in ("reasoning", "science", "general", "casual", "vision")
-        }
+# ── Model Picker (round-robin) ────────────────────────────────
 
+_counters: dict[str, int] = {}
 
-# ── Model Picker (round-robin) ────────────────────────────────
 
 def _pick(category: str, has_image: bool = False, skip_models: set | None = None) -> tuple[str, str]:
     """
-    Return (model_id, actual_category).
-    If has_image but no vision model exists, falls back to text category.
-    skip_models: set of model IDs to skip (e.g. after a 429).
+    Return (model_id, actual_category) from static pools.
     """
-    pools = _fetch_pools()
     skip = skip_models or set()
 
     if has_image:
-        v = [m for m in pools.get("vision", []) if m["id"] not in skip]
+        v = [m for m in _STATIC_POOLS["vision"] if m not in skip]
         if v:
             idx = _counters.get("vision", 0) % len(v)
             _counters["vision"] = idx + 1
-            return v[idx]["id"], "vision"
+            return v[idx], "vision"
 
-    pool = [m for m in (pools.get(category) or pools.get("general") or []) if m["id"] not in skip]
+    pool = [m for m in (_STATIC_POOLS.get(category) or _STATIC_POOLS["general"]) if m not in skip]
     if not pool:
-        return DEFAULT_MODEL, category
+        # Fallback to general list if no model is left in active pool
+        fallback_list = _STATIC_POOLS["casual"] + _STATIC_POOLS["general"]
+        pool = [m for m in fallback_list if m not in skip]
+        if not pool:
+            return "nvidia/nemotron-3-nano-30b-a3b:free", category
 
     idx = _counters.get(category, 0) % len(pool)
     _counters[category] = idx + 1
-    return pool[idx]["id"], category
+    return pool[idx], category
 
 
 # ── Message helpers ────────────────────────────────────────────
@@ -300,9 +185,6 @@ def _strip_images(messages: list) -> list:
 # ── LLM factory ───────────────────────────────────────────────
 
 def _make_llm(api_key: str, model_id: str, bind_tools: bool = False):
-    # Strip whitespace — hard refresh can leave a stale/empty string in config
-    # which would be truthy enough to skip the fallback but empty for OpenRouter,
-    # causing a 401 "User not found" error.
     key = (api_key or "").strip() or (OPENROUTER_API_KEY or "").strip()
     if not key:
         raise ValueError("No API key. Add your OpenRouter key in Settings.")
@@ -313,8 +195,7 @@ def _make_llm(api_key: str, model_id: str, bind_tools: bool = False):
         max_tokens=4096,
         max_retries=0,
         streaming=True,
-        # Ignore Venice as a backend provider — it is temporarily rate-limited
-        # upstream for several free models, causing 429 storms in the interface.
+        timeout=60,  # 60 seconds timeout per request
         openrouter_provider={"ignore": ["Venice"]},
     )
     if bind_tools:
@@ -375,7 +256,7 @@ def chat_node(state: ChatState, config: RunnableConfig):
 
     sys = SystemMessage(content=base_prompt)
 
-    # Try up to 3 models on 429/auth errors
+    # Try up to 3 models on failures / rate limits
     skip_models: set[str] = set()
     last_error = None
 
@@ -396,18 +277,18 @@ def chat_node(state: ChatState, config: RunnableConfig):
             for _iter in range(5):
                 resp = llm.invoke([sys] + loop_msgs, config=config)
 
-                # No tool calls → final answer, break out
+                # No tool calls → final answer
                 if not getattr(resp, "tool_calls", None):
                     return {"messages": [resp]}
 
-                # Execute each requested tool and collect results
+                # Execute requested tools and collect results
                 print(f"[TOOLS] iter={_iter+1} calls={[tc['name'] for tc in resp.tool_calls]}")
                 loop_msgs.append(resp)
                 for tc in resp.tool_calls:
                     tool_msg = _run_tool(tc)
                     loop_msgs.append(tool_msg)
 
-            # Exceeded iterations → final invoke without tools to force an answer
+            # Exceeded iterations → final invoke without tools to force answer
             final_llm = _make_llm(api_key, model_id, bind_tools=False)
             resp = final_llm.invoke([sys] + loop_msgs, config=config)
             return {"messages": [resp]}
@@ -415,17 +296,17 @@ def chat_node(state: ChatState, config: RunnableConfig):
         except Exception as e:
             err_str = str(e)
             last_error = e
-            # Rotate on rate-limit (429) OR provider-level auth errors (401)
-            # A 401 "User not found" can occur when OpenRouter routes to a
-            # provider that does not recognise the key; rotating to another
-            # model / provider resolves it without crashing the session.
-            is_rate     = "429" in err_str or "TooManyRequests" in err_str or "rate" in err_str.lower()
+
+            # Rotate on rate-limits, provider auth, timeout, or provider failure
+            is_rate = "429" in err_str or "TooManyRequests" in err_str or "rate" in err_str.lower()
             is_auth_err = "401" in err_str or "User not found" in err_str or "Unauthorized" in err_str
-            is_ignored  = "404" in err_str and "ignored" in err_str.lower()
-            
-            if is_rate or is_auth_err or is_ignored:
-                reason = "429/rate-limit" if is_rate else ("401/provider-auth" if is_auth_err else "404/providers-ignored")
-                print(f"[ROUTER] {reason} on {model_id}, rotating...")
+            is_ignored = "ignored" in err_str.lower() or "no provider" in err_str.lower() or "404" in err_str
+            is_timeout = "timeout" in err_str.lower() or "timed out" in err_str.lower()
+            is_connection = "connection" in err_str.lower() or "connect" in err_str.lower()
+
+            if is_rate or is_auth_err or is_ignored or is_timeout or is_connection:
+                reason = "rate-limit" if is_rate else ("auth" if is_auth_err else ("ignored" if is_ignored else "timeout/connection"))
+                print(f"[ROUTER] Error ({reason}) on {model_id}, rotating...")
                 skip_models.add(model_id)
                 continue
             raise
@@ -434,7 +315,6 @@ def chat_node(state: ChatState, config: RunnableConfig):
 
 
 # ── Compile graph ─────────────────────────────────────────────
-
 _g = StateGraph(ChatState)
 _g.add_node("chat_node", chat_node)
 _g.add_edge(START, "chat_node")

requirements.txt

@@ -12,6 +12,7 @@ torch --index-url https://download.pytorch.org/whl/cpu
 google-auth
 langsmith
 langchain-community
-ddgs
+duckduckgo-search
+youtube-transcript-api
 pdfplumber
 python-docx

static/app.js

@@ -16,6 +16,10 @@ let pendingImage = null;
 let pendingImageDataUrl = null;
 let isHeroMode = true;
 
+let isWebSearchEnabled = false;
+let isYtSearchEnabled = false;
+let pendingDocText = '';
+
 let currentPersona = localStorage.getItem('stemcopilot_persona') || 'vidyut';
 let currentLanguage = localStorage.getItem('stemcopilot_language') || 'auto';
 let currentUsername = localStorage.getItem('stemcopilot_username') || '';
@@ -52,7 +56,6 @@ const heroAttachFileBtn = document.getElementById('heroAttachFileBtn');
 const heroImageInput = document.getElementById('heroImageInput');
 const heroDocInput = document.getElementById('heroDocInput');
 const heroToolProgressBar = document.getElementById('heroToolProgressBar');
-const heroToolProgressLabel = document.getElementById('heroToolProgressLabel');
 const heroTitle = document.getElementById('heroTitle');
 
 const byokInput = document.getElementById('byokInput');
@@ -85,10 +88,8 @@ const attachMenu = document.getElementById('attachMenu');
 const webSearchToggle = document.getElementById('webSearchToggle');
 const ytSearchToggle = document.getElementById('ytSearchToggle');
 const attachFileBtn = document.getElementById('attachFileBtn');
-const imageInput = document.getElementById('imageInput');
 const docInput = document.getElementById('docInput');
 const toolProgressBar = document.getElementById('toolProgressBar');
-const toolProgressLabel = document.getElementById('toolProgressLabel');
 
 const imagePreviewBar = document.getElementById('imagePreviewBar');
 const imagePreviewThumb = document.getElementById('imagePreviewThumb');
@@ -741,7 +742,7 @@ function createWelcomeScreen() {
     const name = currentUsername || (currentUser ? currentUser.name : '');
     const greeting = _HERO_GREETINGS[Math.floor(Math.random() * _HERO_GREETINGS.length)];
     const titleHtml = name ? `${greeting}, <span class="hero-name">${escapeHtml(name)}</span>?` : `${greeting}?`;
-    const styleLabel = _PERSONA_LABELS[currentPersona] || 'Vidyut';
+    const styleLabel = _PERSONA_LABELS[currentPersona] || 'Guru';
 
     div.innerHTML = `
         <img src="/assets/bot.png" alt="STEM Copilot" class="hero-bot-icon">
@@ -749,10 +750,8 @@ function createWelcomeScreen() {
         <div class="hero-input-wrap">
             <div class="hero-image-preview" id="heroImagePreviewDynamic">
                 <div class="hero-image-preview-thumb" id="heroImagePreviewThumbDynamic"></div>
-                <span class="image-preview-name" id="heroImagePreviewNameDynamic"></span>
                 <button class="hero-image-preview-remove" id="heroImagePreviewRemoveDynamic">&times;</button>
             </div>
-            <!-- Tool progress bar (hero dynamic) -->
             <div class="tool-progress-bar" id="heroToolProgressBarDynamic" style="display:none; padding: 0 16px;">
                 <div class="tool-progress-label" id="heroToolProgressLabelDynamic">Searching...</div>
                 <div class="tool-progress-track"><div class="tool-progress-fill" id="heroToolProgressFillDynamic"></div></div>
@@ -760,14 +759,17 @@ function createWelcomeScreen() {
             <div class="hero-input-box" id="heroInputBoxDynamic">
                 <div class="attach-wrap" id="heroAttachWrapDynamic">
                     <button class="attach-plus-btn" id="heroAttachPlusBtnDynamic" title="Attach or search">
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+                        </svg>
                     </button>
                     <div class="attach-menu" id="heroAttachMenuDynamic">
-                        <button class="attach-menu-item" id="heroWebSearchToggleDynamic" data-active="${isWebSearchEnabled}">
+                        <button class="attach-menu-item" id="heroWebSearchToggleDynamic" data-active="false">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                             Web Search
                         </button>
-                        <button class="attach-menu-item" id="heroYtSearchToggleDynamic" data-active="${isYtSearchEnabled}">
+                        <button class="attach-menu-item" id="heroYtSearchToggleDynamic" data-active="false">
                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                             YouTube Video
                         </button>
@@ -778,8 +780,8 @@ function createWelcomeScreen() {
                     </div>
                 </div>
                 <input type="file" id="heroImageInputDynamic" accept="image/*" style="display:none;">
-                <input type="file" id="heroDocInputDynamic" accept="image/*,.pdf,.doc,.docx,.txt,.md,.py,.js,.ts,.csv" style="display:none;">
-                <textarea id="heroInputDynamic" placeholder="${isWebSearchEnabled ? 'Search the web...' : (isYtSearchEnabled ? 'Paste a YouTube link...' : 'Ask STEM Copilot...')}" rows="1"></textarea>
+                <input type="file" id="heroDocInputDynamic" accept=".pdf,.doc,.docx,.txt,.md,.py,.js,.ts,.csv" style="display:none;">
+                <textarea id="heroInputDynamic" placeholder="Ask STEM Copilot..." rows="1"></textarea>
                 <div class="style-selector-wrap" id="heroStyleSelectorWrapDynamic">
                     <button class="style-selector-btn" id="heroStyleSelectorBtnDynamic" title="Teaching style">
                         <span id="heroStyleSelectorLabelDynamic">${styleLabel}</span>
@@ -803,22 +805,19 @@ function createWelcomeScreen() {
 
     const dynInput = div.querySelector('#heroInputDynamic');
     const dynAdaptive = div.querySelector('#heroAdaptiveBtnDynamic');
-    const dynPlusBtn = div.querySelector('#heroAttachPlusBtnDynamic');
-    const dynMenu = div.querySelector('#heroAttachMenuDynamic');
-    const dynWebToggle = div.querySelector('#heroWebSearchToggleDynamic');
-    const dynYtToggle = div.querySelector('#heroYtSearchToggleDynamic');
-    const dynFileBtn = div.querySelector('#heroAttachFileBtnDynamic');
-    const dynDocInput = div.querySelector('#heroDocInputDynamic');
-    const dynImgInput = div.querySelector('#heroImageInputDynamic');
-    
     const dynImgPreview = div.querySelector('#heroImagePreviewDynamic');
-    const dynImgThumb = div.querySelector('#heroImagePreviewThumbDynamic');
-    const dynImgName = div.querySelector('#heroImagePreviewNameDynamic');
-    const dynImgRemove = div.querySelector('#heroImagePreviewRemoveDynamic');
     const dynStyleBtn = div.querySelector('#heroStyleSelectorBtnDynamic');
     const dynStyleDropdown = div.querySelector('#heroStyleDropdownDynamic');
     const dynStyleLabel = div.querySelector('#heroStyleSelectorLabelDynamic');
 
+    // Dynamic attach elements
+    const dynPlusBtn = div.querySelector('#heroAttachPlusBtnDynamic');
+    const dynMenu = div.querySelector('#heroAttachMenuDynamic');
+    const dynWebSearchToggle = div.querySelector('#heroWebSearchToggleDynamic');
+    const dynYtSearchToggle = div.querySelector('#heroYtSearchToggleDynamic');
+    const dynAttachFileBtn = div.querySelector('#heroAttachFileBtnDynamic');
+    const dynDocInput = div.querySelector('#heroDocInputDynamic');
+
     // Auto-resize
     dynInput.addEventListener('input', function () {
         this.style.height = '54px';
@@ -832,14 +831,23 @@ function createWelcomeScreen() {
         if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); userInput.value = dynInput.value; sendMessage(); }
     });
 
-    setupAttachMenu(dynPlusBtn, dynMenu, dynWebToggle, dynYtToggle, dynFileBtn, dynDocInput);
-    
-    dynDocInput.addEventListener('change', () => _handleCombinedFile(dynDocInput.files[0], true));
-
-    dynImgRemove.addEventListener('click', () => {
-        clearAttachments();
-        dynImgPreview.classList.remove('visible');
-    });
+    // Setup dynamic attach menu
+    setupAttachMenu(
+        dynPlusBtn,
+        dynMenu,
+        dynWebSearchToggle,
+        dynYtSearchToggle,
+        dynAttachFileBtn,
+        null,
+        dynDocInput,
+        dynImgPreview
+    );
+
+    // Sync toggle visual states immediately
+    setTimeout(() => {
+        _syncToggles();
+        _updateInputPlaceholder();
+    }, 0);
 
     // Style selector
     if (dynStyleBtn) {
@@ -852,7 +860,7 @@ function createWelcomeScreen() {
                 _setPersona(opt.dataset.persona);
                 dynStyleDropdown.classList.remove('show');
                 dynStyleBtn.classList.remove('open');
-                dynStyleLabel.textContent = _PERSONA_LABELS[currentPersona] || 'Vidyut';
+                dynStyleLabel.textContent = _PERSONA_LABELS[currentPersona] || 'Guru';
                 dynStyleDropdown.querySelectorAll('.style-option').forEach(o => o.classList.toggle('active', o.dataset.persona === currentPersona));
             });
         });
@@ -1111,8 +1119,6 @@ function _bindAdaptiveBtn(btn, inputEl) {
         // Act as mic
         if (!SpeechRecognition) { showToast('Voice input not supported in this browser.', 'error'); return; }
 
-        if (!SpeechRecognition) { showToast('Voice input not supported in this browser.', 'error'); return; }
-
         if (btn.classList.contains('listening')) {
             if (recognition) recognition.stop();
             btn.classList.remove('listening');
@@ -1138,159 +1144,6 @@ function _bindAdaptiveBtn(btn, inputEl) {
     });
 }
 
-// --- Attach Menu Logic ---
-let isWebSearchEnabled = false;
-let isYtSearchEnabled = false;
-let pendingDocText = '';
-
-function setupAttachMenu(plusBtn, menu, webToggle, ytToggle, fileBtn, fileInput) {
-    if (!plusBtn) return;
-    plusBtn.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const isOpen = menu.classList.contains('show');
-        document.querySelectorAll('.attach-menu').forEach(m => m.classList.remove('show'));
-        document.querySelectorAll('.attach-plus-btn').forEach(b => b.classList.remove('open'));
-        if (!isOpen) {
-            menu.classList.add('show');
-            plusBtn.classList.add('open');
-        }
-    });
-
-    webToggle.addEventListener('click', () => {
-        isWebSearchEnabled = !isWebSearchEnabled;
-        webSearchToggle.dataset.active = isWebSearchEnabled;
-        if (heroWebSearchToggle) heroWebSearchToggle.dataset.active = isWebSearchEnabled;
-        if (isWebSearchEnabled) { isYtSearchEnabled = false; _syncToggles(); }
-        _updateInputPlaceholder();
-        menu.classList.remove('show'); plusBtn.classList.remove('open');
-    });
-
-    ytToggle.addEventListener('click', () => {
-        isYtSearchEnabled = !isYtSearchEnabled;
-        ytSearchToggle.dataset.active = isYtSearchEnabled;
-        if (heroYtSearchToggle) heroYtSearchToggle.dataset.active = isYtSearchEnabled;
-        if (isYtSearchEnabled) { isWebSearchEnabled = false; _syncToggles(); }
-        _updateInputPlaceholder();
-        menu.classList.remove('show'); plusBtn.classList.remove('open');
-    });
-
-    fileBtn.addEventListener('click', () => {
-        menu.classList.remove('show'); plusBtn.classList.remove('open');
-        fileInput.click();
-    });
-}
-
-function _syncToggles() {
-    if (webSearchToggle) webSearchToggle.dataset.active = isWebSearchEnabled;
-    if (heroWebSearchToggle) heroWebSearchToggle.dataset.active = isWebSearchEnabled;
-    if (ytSearchToggle) ytSearchToggle.dataset.active = isYtSearchEnabled;
-    if (heroYtSearchToggle) heroYtSearchToggle.dataset.active = isYtSearchEnabled;
-}
-
-function _updateInputPlaceholder() {
-    let ph = "Ask STEM Copilot...";
-    if (isWebSearchEnabled) ph = "Search the web...";
-    if (isYtSearchEnabled) ph = "Paste a YouTube link...";
-    if (userInput) userInput.placeholder = ph;
-    if (heroInput) heroInput.placeholder = ph;
-}
-
-document.addEventListener('click', (e) => {
-    if (!e.target.closest('.attach-wrap')) {
-        document.querySelectorAll('.attach-menu').forEach(m => m.classList.remove('show'));
-        document.querySelectorAll('.attach-plus-btn').forEach(b => b.classList.remove('open'));
-    }
-});
-
-setupAttachMenu(attachPlusBtn, attachMenu, webSearchToggle, ytSearchToggle, attachFileBtn, docInput);
-if (heroAttachPlusBtn) {
-    setupAttachMenu(heroAttachPlusBtn, heroAttachMenu, heroWebSearchToggle, heroYtSearchToggle, heroAttachFileBtn, heroDocInput);
-}
-
-if (docInput) docInput.setAttribute('accept', 'image/*,.pdf,.doc,.docx,.txt,.md,.py,.js,.ts,.csv');
-if (heroDocInput) heroDocInput.setAttribute('accept', 'image/*,.pdf,.doc,.docx,.txt,.md,.py,.js,.ts,.csv');
-
-function _handleCombinedFile(file) {
-    if (!file) return;
-    if (file.type.startsWith('image/')) {
-        handleImageFile(file);
-    } else {
-        handleDocFile(file);
-    }
-}
-
-if (docInput) docInput.addEventListener('change', () => _handleCombinedFile(docInput.files[0]));
-if (heroDocInput) heroDocInput.addEventListener('change', () => _handleCombinedFile(heroDocInput.files[0]));
-
-async function handleDocFile(file) {
-    if (file.size > 10 * 1024 * 1024) { showToast('File too large (Max 10MB)', 'error'); return; }
-    
-    const filename = file.name;
-    const heroElem = document.getElementById('heroImagePreviewDynamic') || document.getElementById('heroImagePreview');
-    const isHero = isHeroMode && heroElem;
-    const pBar = isHero ? heroElem : imagePreviewBar;
-
-    if (pBar) {
-        pBar.innerHTML = `
-            <div class="${isHero ? 'hero-image-preview-thumb' : 'image-preview-thumb'}" style="background-color: var(--brand); display:flex; align-items:center; justify-content:center;">
-                <svg style="width:16px;height:16px;color:#fff;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
-            </div>
-            <span class="image-preview-name" id="docPreviewName">Extracting text...</span>
-            <button class="${isHero ? 'hero-image-preview-remove' : 'image-preview-remove'}">&times;</button>
-        `;
-        
-        const removeBtn = pBar.querySelector(isHero ? '.hero-image-preview-remove' : '.image-preview-remove');
-        if (removeBtn) {
-            removeBtn.addEventListener('click', () => {
-                clearAttachments();
-                pBar.style.display = 'none';
-                if (isHero) pBar.classList.remove('visible');
-            });
-        }
-        
-        if (isHero) pBar.classList.add('visible');
-        else pBar.style.display = 'flex';
-    }
-    
-    const fd = new FormData();
-    fd.append("file", file);
-    try {
-        const res = await fetch("/upload-doc", { method: "POST", body: fd });
-        const data = await res.json();
-        if (res.ok) {
-            pendingDocText = data.text;
-            const pName = pBar ? pBar.querySelector('#docPreviewName') : null;
-            if (pName) pName.textContent = data.filename || filename;
-            showToast('Document attached!', 'success');
-        } else {
-            clearAttachments();
-            if (pBar) {
-                pBar.style.display = 'none';
-                if (isHero) pBar.classList.remove('visible');
-            }
-            showToast(data.error || 'Failed to extract text', 'error');
-        }
-    } catch(e) {
-        clearAttachments();
-        if (pBar) {
-            pBar.style.display = 'none';
-            if (isHero) pBar.classList.remove('visible');
-        }
-        showToast('Upload failed', 'error');
-    }
-}
-
-function clearAttachments() {
-    pendingImage = null;
-    pendingImageDataUrl = null;
-    pendingDocText = '';
-    if (imageInput) imageInput.value = '';
-    if (docInput) docInput.value = '';
-    if (heroImageInput) heroImageInput.value = '';
-    if (heroDocInput) heroDocInput.value = '';
-}
-
 // Bind bottom input adaptive button
 _bindAdaptiveBtn(adaptiveBtn, userInput);
 
@@ -1298,7 +1151,7 @@ _bindAdaptiveBtn(adaptiveBtn, userInput);
 _bindAdaptiveBtn(heroAdaptiveBtn, heroInput);
 
 
-/* ── Image Upload ───────────────────────────────────────────── */
+/* ── Image & Document Upload & Attach Menu ──────────────────────────────── */
 
 function _makeChip(dataUrl, filename, onRemove) {
     const chip = document.createElement('div');
@@ -1316,22 +1169,53 @@ function _makeChip(dataUrl, filename, onRemove) {
     return chip;
 }
 
-if (uploadBtn) uploadBtn.addEventListener('click', () => imageInput.click());
-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', () => {
-    if (heroImageInput.files[0]) handleImageFile(heroImageInput.files[0]);
-});
+function _makeDocChip(filename, onRemove, statusText = '') {
+    const chip = document.createElement('div');
+    chip.className = 'image-chip doc-chip';
+    const docIcon = `
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin: auto; display: block; color: var(--brand);">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+            <line x1="16" y1="13" x2="8" y2="13"/>
+            <line x1="16" y1="17" x2="8" y2="17"/>
+        </svg>
+    `;
+    chip.innerHTML = `
+        <div class="image-chip-thumb" style="display: flex; align-items: center; justify-content: center; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); flex-shrink: 0; width: 32px; height: 32px; border-radius: 5px;">
+            ${docIcon}
+        </div>
+        <div style="display: flex; flex-direction: column; min-width: 0; justify-content: center; margin-left: 6px; margin-right: 6px;">
+            <span class="image-chip-name" style="max-width: 110px;">${escapeHtml(filename)}</span>
+            ${statusText ? `<span style="font-size: 8px; color: var(--text-muted); line-height: 1.1;">${escapeHtml(statusText)}</span>` : ''}
+        </div>
+        <button class="image-chip-remove" title="Remove" style="background: none; border: none; color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; display: flex; align-items: center;">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+    `;
+    chip.querySelector('.image-chip-remove').addEventListener('click', (e) => {
+        e.stopPropagation(); onRemove();
+    });
+    return chip;
+}
 
-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; }
-    }
-});
+function _clearImage() {
+    pendingImage = null;
+    pendingImageDataUrl = null;
+    if (imageInput) imageInput.value = '';
+    if (heroImageInput) heroImageInput.value = '';
+    const dynImgInput = document.getElementById('heroImageInputDynamic');
+    if (dynImgInput) dynImgInput.value = '';
+}
+
+function _clearDoc() {
+    pendingDocText = '';
+    if (docInput) docInput.value = '';
+    const dynDocInput = document.getElementById('heroDocInputDynamic');
+    if (dynDocInput) dynDocInput.value = '';
+}
 
 function handleImageFile(file, targetPreviewEl) {
+    _clearDoc();
     const reader = new FileReader();
     reader.onload = (e) => {
         const dataUrl = e.target.result;
@@ -1343,7 +1227,7 @@ function handleImageFile(file, targetPreviewEl) {
         if (imagePreviewBar) {
             imagePreviewBar.innerHTML = '';
             imagePreviewBar.appendChild(_makeChip(dataUrl, filename, () => {
-                clearAttachments();
+                _clearImage();
                 imagePreviewBar.innerHTML = '';
                 imagePreviewBar.style.display = 'none';
             }));
@@ -1356,7 +1240,7 @@ function handleImageFile(file, targetPreviewEl) {
         if (heroPreview) {
             heroPreview.innerHTML = '';
             heroPreview.appendChild(_makeChip(dataUrl, filename, () => {
-                clearAttachments();
+                _clearImage();
                 heroPreview.innerHTML = '';
                 heroPreview.classList.remove('visible');
             }));
@@ -1366,15 +1250,220 @@ function handleImageFile(file, targetPreviewEl) {
     reader.readAsDataURL(file);
 }
 
-// Legacy remove buttons (static HTML fallbacks)
-if (imagePreviewRemove) imagePreviewRemove.addEventListener('click', () => {
-    clearAttachments();
-    if (imagePreviewBar) imagePreviewBar.style.display = 'none';
-});
-if (heroImagePreviewRemove) heroImagePreviewRemove.addEventListener('click', () => {
-    clearAttachments();
-    if (heroImagePreview) heroImagePreview.classList.remove('visible');
-});
+function handleDocFile(file, targetPreviewEl) {
+    _clearImage();
+    pendingDocText = '';
+
+    const container = targetPreviewEl || (isHeroMode ? (document.getElementById('heroImagePreviewDynamic') || heroImagePreview) : imagePreviewBar);
+    if (!container) return;
+
+    // Clear sibling container
+    if (container === imagePreviewBar) {
+        const heroPrev = document.getElementById('heroImagePreviewDynamic') || heroImagePreview;
+        if (heroPrev) {
+            heroPrev.innerHTML = '';
+            heroPrev.classList.remove('visible');
+        }
+    } else {
+        if (imagePreviewBar) {
+            imagePreviewBar.innerHTML = '';
+            imagePreviewBar.style.display = 'none';
+        }
+    }
+
+    const ext = file.name.split('.').pop().toLowerCase();
+    const isText = ['txt', 'md', 'py', 'js', 'ts', 'csv', 'json', 'html', 'css'].includes(ext) || file.type.startsWith('text/');
+
+    if (isText) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            pendingDocText = e.target.result;
+            container.innerHTML = '';
+            container.appendChild(_makeDocChip(file.name, () => {
+                _clearDoc();
+                container.innerHTML = '';
+                if (container === imagePreviewBar) {
+                    container.style.display = 'none';
+                } else {
+                    container.classList.remove('visible');
+                }
+            }, 'Attached locally'));
+
+            if (container === imagePreviewBar) {
+                container.style.display = 'flex';
+            } else {
+                container.classList.add('visible');
+            }
+        };
+        reader.readAsText(file);
+    } else {
+        // PDF/DOCX/DOC requiring backend extraction
+        container.innerHTML = '';
+        container.appendChild(_makeDocChip(file.name, () => {
+            _clearDoc();
+            container.innerHTML = '';
+            if (container === imagePreviewBar) {
+                container.style.display = 'none';
+            } else {
+                container.classList.remove('visible');
+            }
+        }, 'Extracting text...'));
+
+        if (container === imagePreviewBar) {
+            container.style.display = 'flex';
+        } else {
+            container.classList.add('visible');
+        }
+
+        const formData = new FormData();
+        formData.append('file', file);
+
+        fetch('/upload-doc', {
+            method: 'POST',
+            body: formData
+        })
+        .then(res => {
+            if (!res.ok) throw new Error('Failed to parse file');
+            return res.json();
+        })
+        .then(data => {
+            if (data.error) throw new Error(data.error);
+            pendingDocText = data.text;
+
+            container.innerHTML = '';
+            container.appendChild(_makeDocChip(file.name, () => {
+                _clearDoc();
+                container.innerHTML = '';
+                if (container === imagePreviewBar) {
+                    container.style.display = 'none';
+                } else {
+                    container.classList.remove('visible');
+                }
+            }, 'Extracted successfully'));
+        })
+        .catch(err => {
+            showToast(err.message || 'Failed to extract text from document.', 'error');
+            container.innerHTML = '';
+            container.appendChild(_makeDocChip(file.name, () => {
+                _clearDoc();
+                container.innerHTML = '';
+                if (container === imagePreviewBar) {
+                    container.style.display = 'none';
+                } else {
+                    container.classList.remove('visible');
+                }
+            }, 'Extraction failed'));
+        });
+    }
+}
+
+function handleAttachedFile(file, targetPreviewEl) {
+    if (!file) return;
+    if (file.type.startsWith('image/')) {
+        handleImageFile(file, targetPreviewEl);
+    } else {
+        handleDocFile(file, targetPreviewEl);
+    }
+}
+
+function _syncToggles() {
+    const list = [
+        { web: webSearchToggle, yt: ytSearchToggle },
+        { web: document.getElementById('heroWebSearchToggleDynamic'), yt: document.getElementById('heroYtSearchToggleDynamic') }
+    ];
+    list.forEach(item => {
+        if (item.web) {
+            item.web.classList.toggle('active', isWebSearchEnabled);
+            item.web.setAttribute('data-active', isWebSearchEnabled ? 'true' : 'false');
+        }
+        if (item.yt) {
+            item.yt.classList.toggle('active', isYtSearchEnabled);
+            item.yt.setAttribute('data-active', isYtSearchEnabled ? 'true' : 'false');
+        }
+    });
+}
+
+function _updateInputPlaceholder() {
+    let placeholder = 'Ask STEM Copilot...';
+    if (isWebSearchEnabled) {
+        placeholder = 'Search the web and ask...';
+    } else if (isYtSearchEnabled) {
+        placeholder = 'Paste YouTube URL or ask about video...';
+    }
+
+    const inputs = [userInput, document.getElementById('heroInputDynamic')];
+    inputs.forEach(inp => {
+        if (inp) inp.placeholder = placeholder;
+    });
+}
+
+function setupAttachMenu(plusBtn, menuEl, webSearchToggleEl, ytSearchToggleEl, attachFileBtnEl, imageInputEl, docInputEl, previewEl) {
+    if (!plusBtn || !menuEl) return;
+
+    plusBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const isOpen = menuEl.classList.contains('show');
+        closeAllMenus();
+        if (!isOpen) {
+            menuEl.classList.add('show');
+            plusBtn.classList.add('open');
+        }
+    });
+
+    if (webSearchToggleEl) {
+        webSearchToggleEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            isWebSearchEnabled = !isWebSearchEnabled;
+            if (isWebSearchEnabled) isYtSearchEnabled = false;
+            _syncToggles();
+            _updateInputPlaceholder();
+            menuEl.classList.remove('show');
+            plusBtn.classList.remove('open');
+        });
+    }
+
+    if (ytSearchToggleEl) {
+        ytSearchToggleEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            isYtSearchEnabled = !isYtSearchEnabled;
+            if (isYtSearchEnabled) isWebSearchEnabled = false;
+            _syncToggles();
+            _updateInputPlaceholder();
+            menuEl.classList.remove('show');
+            plusBtn.classList.remove('open');
+        });
+    }
+
+    if (attachFileBtnEl && docInputEl) {
+        attachFileBtnEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            menuEl.classList.remove('show');
+            plusBtn.classList.remove('open');
+            docInputEl.accept = "image/*,.pdf,.doc,.docx,.txt,.md,.py,.js,.ts,.csv";
+            docInputEl.click();
+        });
+    }
+
+    if (docInputEl) {
+        docInputEl.addEventListener('change', () => {
+            if (docInputEl.files[0]) {
+                handleAttachedFile(docInputEl.files[0], previewEl);
+            }
+        });
+    }
+}
+
+// Bind bottom static attach elements
+setupAttachMenu(
+    attachPlusBtn,
+    attachMenu,
+    webSearchToggle,
+    ytSearchToggle,
+    attachFileBtn,
+    null,
+    docInput,
+    imagePreviewBar
+);
 
 
 /* ── Chat & Streaming ───────────────────────────────────────── */
@@ -1402,8 +1491,7 @@ if (stopBtn) {
         if (currentAbortController) { currentAbortController.abort(); currentAbortController = null; }
         isSending = false;
         _showAdaptiveBtn();
-        const ct = document.getElementById('currentThinking');
-        if (ct) ct.style.display = 'none';
+        document.querySelectorAll('.thinking-indicator').forEach(el => el.style.display = 'none');
         document.querySelectorAll('.ai-avatar.pulsing').forEach(el => el.classList.remove('pulsing'));
         document.querySelectorAll('.message-content.cursor').forEach(el => el.classList.remove('cursor'));
     });
@@ -1428,6 +1516,17 @@ function sendMessage() {
             <div>${escapeHtml(text)}</div>
         </div>`;
         chatContainer.appendChild(rowDiv);
+    } else if (pendingDocText) {
+        const rowDiv = document.createElement('div');
+        rowDiv.classList.add('message-row', 'user');
+        rowDiv.innerHTML = `<div class="message-content">
+            <div style="display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.06); padding:6px 10px; border-radius:8px; margin-bottom:6px; font-size:11px; width:fit-content; border: 1px solid rgba(255,255,255,0.1);">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--brand);"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                <span>Document Attached</span>
+            </div>
+            <div>${escapeHtml(text)}</div>
+        </div>`;
+        chatContainer.appendChild(rowDiv);
     } else appendMessage('user', text);
 
     userInput.value = '';
@@ -1448,14 +1547,36 @@ function sendMessage() {
 function streamResponse(text) {
     const imageData = pendingImage || '';
     const docData = pendingDocText || '';
-    
-    // Add prefix to message if tools are active
-    let finalMessage = text;
-    if (isWebSearchEnabled) finalMessage = `[Please use web search to answer this] ${finalMessage}`;
-    if (isYtSearchEnabled) finalMessage = `[Please check this YouTube video] ${finalMessage}`;
-    
-    clearAttachments();
-    if (imagePreviewBar) imagePreviewBar.style.display = 'none';
+
+    // Clear attachment states
+    pendingImage = null;
+    pendingImageDataUrl = null;
+    pendingDocText = '';
+
+    if (imagePreviewBar) {
+        imagePreviewBar.innerHTML = '';
+        imagePreviewBar.style.display = 'none';
+    }
+    const heroPreview = document.getElementById('heroImagePreviewDynamic') || heroImagePreview;
+    if (heroPreview) {
+        heroPreview.innerHTML = '';
+        heroPreview.classList.remove('visible');
+    }
+    if (imageInput) imageInput.value = '';
+    if (heroImageInput) heroImageInput.value = '';
+    if (docInput) docInput.value = '';
+    const dynDocInput = document.getElementById('heroDocInputDynamic');
+    if (dynDocInput) dynDocInput.value = '';
+
+    // Set up progress bars
+    const pBar = isHeroMode ? document.getElementById('heroToolProgressBarDynamic') : toolProgressBar;
+    const pLabel = isHeroMode ? document.getElementById('heroToolProgressLabelDynamic') : toolProgressLabel;
+    const pFill = isHeroMode ? document.getElementById('heroToolProgressFillDynamic') : toolProgressFill;
+
+    if (pBar) {
+        pBar.style.display = 'none';
+        if (pFill) pFill.style.width = '0%';
+    }
 
     const rowDiv = document.createElement('div');
     rowDiv.classList.add('message-row', 'ai');
@@ -1490,12 +1611,27 @@ function streamResponse(text) {
         }, RENDER_INTERVAL);
     }
 
+    // Build the final message with search instructions if toggled
+    let finalMessage = text;
+    if (isWebSearchEnabled) {
+        finalMessage = `[System Instruction: Web Search is enabled. Please search the web using the web_search tool if needed to answer the user's query.]\nUser Query: ${text}`;
+    } else if (isYtSearchEnabled) {
+        finalMessage = `[System Instruction: YouTube Video Search is enabled. Please extract the YouTube URL or ID from the user's query and retrieve its transcript using the yt_transcript tool before responding.]\nUser Query: ${text}`;
+    }
+
+    // Clear search toggle states
+    isWebSearchEnabled = false;
+    isYtSearchEnabled = false;
+    _syncToggles();
+    _updateInputPlaceholder();
+
     const payload = {
-        message: text, thread_id: currentThreadId,
+        message: finalMessage, thread_id: currentThreadId,
         persona: currentPersona, language: currentLanguage,
         username: currentUsername,
         user_id: currentUser ? currentUser.google_id : '',
         image: imageData,
+        doc_text: docData,
     };
 
     currentAbortController = new AbortController();
@@ -1534,6 +1670,26 @@ function streamResponse(text) {
                             _showActionsBar(actionsEl, contentEl);
                             isSending = false; _showAdaptiveBtn(); currentStreamStopped = true; return;
                         }
+                        if (data.tool_event) {
+                            if (data.tool_event === 'tool_start') {
+                                if (pLabel) pLabel.textContent = data.tool === 'web_search' ? 'Searching the web...' : 'Fetching YouTube transcript...';
+                                if (pFill) pFill.style.width = '40%';
+                                if (pBar) pBar.style.display = 'block';
+                                let w = 40;
+                                const iv = setInterval(() => {
+                                    if (!pBar || pBar.style.display === 'none' || w >= 90) { clearInterval(iv); return; }
+                                    w += 5;
+                                    if (pFill) pFill.style.width = w + '%';
+                                }, 300);
+                            } else if (data.tool_event === 'tool_end') {
+                                if (pFill) pFill.style.width = '100%';
+                                setTimeout(() => {
+                                    if (pBar) pBar.style.display = 'none';
+                                    if (pFill) pFill.style.width = '0%';
+                                    if (pLabel) pLabel.textContent = 'Searching...';
+                                }, 500);
+                            }
+                        }
                         if (data.token !== undefined) {
                             if (currentStreamStopped) return;
                             if (firstToken) { thinkingEl.style.display = 'none'; contentEl.style.display = 'block'; contentEl.classList.add('cursor'); firstToken = false; }

static/index.html

@@ -269,7 +269,7 @@
                     <img src="/assets/bot.png" alt="STEM Copilot" class="hero-bot-icon">
                     <h1 class="hero-title" id="heroTitle">What should we study today?</h1>
                     <div class="hero-input-wrap">
-                        <!-- Image preview in hero -->
+                        <!-- Image / Doc preview in hero -->
                         <div class="hero-image-preview" id="heroImagePreview">
                             <div class="hero-image-preview-thumb" id="heroImagePreviewThumb"></div>
                             <span class="image-preview-name" id="heroImagePreviewName"></span>
@@ -344,7 +344,6 @@
                             </button>
                         </div>
                     </div>
-                    <!-- Hero pills REMOVED per todo item 3 -->
                 </div>
             </div>
 
@@ -355,7 +354,7 @@
                     <div class="tool-progress-label" id="toolProgressLabel">Searching...</div>
                     <div class="tool-progress-track"><div class="tool-progress-fill" id="toolProgressFill"></div></div>
                 </div>
-                <!-- Image preview -->
+                <!-- Image/Doc preview -->
                 <div class="image-preview-bar" id="imagePreviewBar" style="display:none;">
                     <div class="image-preview-thumb" id="imagePreviewThumb"></div>
                     <span class="image-preview-name" id="imagePreviewName"></span>
@@ -389,7 +388,6 @@
                     <input type="file" id="imageInput" accept="image/*" style="display:none;">
                     <input type="file" id="docInput" accept=".pdf,.doc,.docx,.txt,.md,.py,.js,.ts,.csv" style="display:none;">
                     <textarea id="userInput" placeholder="Ask STEM Copilot..." rows="1"></textarea>
-
                     <!-- Teaching style selector -->
                     <div class="style-selector-wrap" id="styleSelectorWrap">
                         <button class="style-selector-btn" id="styleSelectorBtn" title="Teaching style">

static/style.css

@@ -1480,13 +1480,11 @@ textarea, input, select {
     box-shadow: 0 0 0 3px var(--brand-glow), 0 4px 20px rgba(0, 0, 0, 0.2);
 }
 
-/* ── + Attach button & menu ──────────────────────────────── */
-
 .attach-wrap {
     position: relative;
     display: flex;
     align-items: center;
-    flex-shrink: 0;
+    justify-content: center;
 }
 
 .attach-plus-btn {
@@ -1497,58 +1495,60 @@ textarea, input, select {
     padding: 16px 4px 16px 16px;
     display: flex;
     align-items: center;
-    transition: color 0.2s;
+    justify-content: center;
+    transition: color 0.2s, transform 0.2s;
+    height: 100%;
+}
+
+.attach-plus-btn:hover {
+    color: var(--text-primary);
 }
 
 .attach-plus-btn svg {
-    transition: transform 0.2s;
+    transition: transform 0.25s ease-in-out;
+    transform-origin: center;
 }
 
-.attach-plus-btn:hover { color: var(--brand); }
-.attach-plus-btn:hover svg { transform: rotate(45deg); }
-.attach-plus-btn.open { color: var(--brand); }
-.attach-plus-btn.open svg { transform: rotate(45deg); }
+.attach-plus-btn.open svg {
+    transform: rotate(45deg);
+    transform-origin: center;
+}
 
 .attach-menu {
+    display: none;
     position: absolute;
-    bottom: calc(100% + 8px);
-    left: 0;
-    background: var(--bg-card);
+    bottom: 52px;
+    left: 8px;
+    background: var(--bg-elevated);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     padding: 6px;
-    display: none;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    z-index: 101;
+    min-width: 170px;
     flex-direction: column;
     gap: 2px;
-    min-width: 180px;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
-    z-index: 200;
-    animation: fadeIn 0.15s ease-out;
 }
 
-.attach-menu.show { display: flex; }
+.attach-menu.show {
+    display: flex;
+}
 
 .attach-menu-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
     background: none;
     border: none;
-    border-radius: 8px;
-    padding: 9px 12px;
-    font-size: 13px;
+    text-align: left;
+    padding: 10px 12px;
+    font-size: 12px;
     font-family: inherit;
     color: var(--text-secondary);
+    border-radius: var(--radius-sm);
     cursor: pointer;
-    text-align: left;
-    transition: background 0.15s, color 0.15s;
-}
-
-.attach-menu-item svg {
-    width: 15px;
-    height: 15px;
-    flex-shrink: 0;
-    opacity: 0.7;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: background 0.2s, color 0.2s;
+    width: 100%;
 }
 
 .attach-menu-item:hover {
@@ -1556,79 +1556,35 @@ textarea, input, select {
     color: var(--text-primary);
 }
 
-.attach-menu-item[data-active="true"] {
-    color: var(--brand);
-    background: var(--brand-glow);
+.attach-menu-item svg {
+    width: 14px;
+    height: 14px;
+    stroke-width: 2.2;
+    color: var(--text-secondary);
+    transition: color 0.2s;
 }
 
-.attach-menu-item[data-active="true"] svg { opacity: 1; }
-
-/* Active search mode chips shown near input */
-.search-mode-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 11px;
-    font-weight: 600;
+.attach-menu-item[data-active="true"] {
     color: var(--brand);
-    background: var(--brand-glow);
-    border: 1px solid var(--brand);
-    border-radius: 20px;
-    padding: 3px 10px 3px 8px;
-    cursor: pointer;
-    transition: opacity 0.2s;
-}
-
-.search-mode-chip:hover { opacity: 0.7; }
-
-/* ── Tool progress bar ──────────────────────────────────── */
-
-.tool-progress-bar {
-    max-width: 800px;
-    width: 100%;
-    margin-bottom: 6px;
+    font-weight: 500;
 }
 
-.tool-progress-label {
-    font-size: 11px;
+.attach-menu-item[data-active="true"] svg {
     color: var(--brand);
-    font-weight: 600;
-    margin-bottom: 4px;
-    letter-spacing: 0.03em;
-}
-
-.tool-progress-track {
-    height: 2px;
-    background: var(--border-color);
-    border-radius: 2px;
-    overflow: hidden;
-}
-
-.tool-progress-fill {
-    height: 100%;
-    width: 0%;
-    background: linear-gradient(90deg, var(--brand), #f5a623);
-    border-radius: 2px;
-    animation: toolProgressAnim 1.8s ease-in-out infinite;
 }
 
-@keyframes toolProgressAnim {
-    0%   { width: 5%;  margin-left: 0%; }
-    50%  { width: 60%; margin-left: 20%; }
-    100% { width: 5%;  margin-left: 90%; }
-}
-
-/* image-preview-name (filename label in preview bar) */
-.image-preview-name {
-    font-size: 11px;
+.upload-btn {
+    background: none;
+    border: none;
     color: var(--text-secondary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 140px;
-    flex: 1;
+    cursor: pointer;
+    padding: 16px 4px 16px 16px;
+    display: flex;
+    align-items: center;
+    transition: color 0.2s;
 }
 
+.upload-btn:hover { color: var(--text-primary); }
 
 /* Teaching style selector */
 .style-selector-wrap {

tools.py

@@ -1,21 +1,9 @@
-"""
-tools.py — LangChain tools for STEM Copilot agent.
-
-Provides:
-  - web_search:  DuckDuckGo full-text search  (text only, no API key needed)
-  - yt_transcript: YouTube video transcript via youtube-transcript-api
-                   (works on HF Spaces without custom URL endpoints)
-"""
-
 from __future__ import annotations
-
 import re
 from langchain_community.tools import DuckDuckGoSearchRun
 from langchain_core.tools import tool
 
-
-# ── Web search ────────────────────────────────────────────────
-
+# DuckDuckGo Search Run tool
 web_search = DuckDuckGoSearchRun(
     name="web_search",
     description=(
@@ -26,11 +14,8 @@ web_search = DuckDuckGoSearchRun(
     ),
 )
 
-
-# ── YouTube transcript ────────────────────────────────────────
-
 def _extract_video_id(url_or_id: str) -> str | None:
-    """Extract YouTube video ID from a URL or bare ID."""
+    """Extract YouTube 11-character video ID from URL or bare ID."""
     patterns = [
         r"(?:v=|youtu\.be/|embed/|shorts/)([A-Za-z0-9_-]{11})",
         r"^([A-Za-z0-9_-]{11})$",
@@ -41,7 +26,6 @@ def _extract_video_id(url_or_id: str) -> str | None:
             return m.group(1)
     return None
 
-
 @tool
 def yt_transcript(youtube_url: str) -> str:
     """
@@ -59,7 +43,7 @@ def yt_transcript(youtube_url: str) -> str:
         return f"Could not extract a valid YouTube video ID from: {youtube_url}"
 
     try:
-        from youtube_transcript_api import YouTubeTranscriptApi  # type: ignore
+        from youtube_transcript_api import YouTubeTranscriptApi
         transcript_list = YouTubeTranscriptApi.get_transcript(video_id)
         transcript = " ".join(seg["text"] for seg in transcript_list)
         if not transcript.strip():
@@ -75,7 +59,5 @@ def yt_transcript(youtube_url: str) -> str:
             )
         return f"Error fetching transcript: {exc}"
 
-
-# ── Exported tool list ─────────────────────────────────────────
-
+# Exported tools list for LangGraph
 TOOLS = [web_search, yt_transcript]