memory, context from langchain; languges; personalization; features; improvement

Dockerfile

@@ -9,4 +9,4 @@ COPY . .
 
 EXPOSE 7860
 
-CMD ["uvicorn", "backend:app", "--host", "0.0.0.0", "--port", "7860"]
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,201 @@
+"""
+FastAPI application — routes for chat (SSE streaming), threads, analytics, and static files.
+"""
+
+import os
+import json
+import time
+from fastapi import FastAPI, Request
+from fastapi.responses import FileResponse, StreamingResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from langchain_core.messages import HumanMessage, AIMessage
+
+import db
+import guard
+import retriever
+from config import EXPORT_SECRET
+from graph import chatbot
+
+
+app = FastAPI()
+
+STATIC_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")
+ASSETS_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "assets")
+
+
+# --- Request models ---
+
+class ChatRequest(BaseModel):
+    message: str
+    thread_id: str
+    persona: str = "noob"
+    language: str = "auto"
+    username: str = ""
+
+
+class RenameRequest(BaseModel):
+    thread_id: str
+    title: str
+
+
+# --- SSE helpers ---
+
+def sse_status(message: str) -> str:
+    return f"data: {json.dumps({'status': 'thinking', 'message': message})}\n\n"
+
+
+def sse_token(token: str) -> str:
+    return f"data: {json.dumps({'token': token})}\n\n"
+
+
+def sse_done() -> str:
+    return "data: [DONE]\n\n"
+
+
+# --- Routes ---
+
+@app.get("/")
+def serve_index():
+    return FileResponse(os.path.join(STATIC_DIR, "index.html"))
+
+
+@app.get("/threads")
+def get_threads():
+    return {"threads": db.get_threads()}
+
+
+@app.get("/history/{thread_id}")
+def get_history(thread_id: str):
+    config = {"configurable": {"thread_id": thread_id}}
+    state = chatbot.get_state(config)
+    messages = state.values.get("messages", [])
+
+    result = []
+    for msg in messages:
+        role = "user" if isinstance(msg, HumanMessage) else "assistant"
+        result.append({"role": role, "content": msg.content})
+
+    return {"messages": result}
+
+
+@app.post("/chat")
+def chat(request: ChatRequest, req: Request):
+    now = time.time()
+    user_agent = req.headers.get("user-agent", "")
+    db.upsert_thread(request.thread_id, request.message, now)
+
+    def stream():
+        # Step 1: Guard check
+        yield sse_status("Reading your question...")
+        is_ok, rejection = guard.check_input(request.message)
+
+        if not is_ok:
+            yield sse_token(rejection)
+            yield sse_done()
+            db.log_exchange(
+                thread_id=request.thread_id,
+                timestamp=now,
+                user_message=request.message,
+                assistant_response=rejection,
+                persona=request.persona,
+                language=request.language,
+                username=request.username,
+                user_agent=user_agent,
+            )
+            return
+
+        # Step 2: Retrieve context from Pinecone
+        yield sse_status("Searching NCERT chapters...")
+        results = retriever.search(request.message)
+        context = retriever.format_context(results)
+
+        # Step 3: Stream LLM response via LangGraph
+        yield sse_status("Preparing the explanation...")
+        config = {
+            "configurable": {
+                "thread_id": request.thread_id,
+                "persona":   request.persona,
+                "context":   context,
+                "language":  request.language,
+                "username":  request.username,
+            }
+        }
+
+        full_response = []
+        for chunk, _metadata in chatbot.stream(
+            {"messages": [HumanMessage(content=request.message)]},
+            config=config,
+            stream_mode="messages",
+        ):
+            if isinstance(chunk, AIMessage) and chunk.content:
+                full_response.append(chunk.content)
+                yield sse_token(chunk.content)
+
+        yield sse_done()
+
+        # Step 4: Log the complete exchange for analytics
+        sources = [
+            {"subject": r["subject"], "class": r["class_level"], "chapter": r["chapter"]}
+            for r in results
+        ]
+        db.log_exchange(
+            thread_id=request.thread_id,
+            timestamp=now,
+            user_message=request.message,
+            assistant_response="".join(full_response),
+            persona=request.persona,
+            language=request.language,
+            username=request.username,
+            user_agent=user_agent,
+            sources=sources,
+        )
+
+    return StreamingResponse(stream(), media_type="text/event-stream")
+
+
+@app.post("/rename")
+def rename_thread(request: RenameRequest):
+    db.rename_thread(request.thread_id, request.title)
+    return {"ok": True}
+
+
+@app.delete("/thread/{thread_id}")
+def delete_thread(thread_id: str):
+    db.delete_thread(thread_id)
+    return {"ok": True}
+
+
+@app.get("/export/logs")
+def export_logs(key: str = ""):
+    """Download chat logs as JSON. Requires EXPORT_SECRET for access."""
+    if not EXPORT_SECRET or key != EXPORT_SECRET:
+        return JSONResponse({"error": "unauthorized"}, status_code=403)
+
+    cursor = db.conn.execute(
+        """SELECT thread_id, timestamp, user_message, assistant_response,
+                  persona, language, username, user_agent, sources
+           FROM chat_logs ORDER BY timestamp DESC"""
+    )
+    columns = [
+        "thread_id", "timestamp", "user_message", "assistant_response",
+        "persona", "language", "username", "user_agent", "sources",
+    ]
+    rows = [dict(zip(columns, row)) for row in cursor]
+    for row in rows:
+        if row["sources"]:
+            row["sources"] = json.loads(row["sources"])
+    return JSONResponse({"count": len(rows), "logs": rows})
+
+
+# --- Static file serving ---
+app.mount("/assets", StaticFiles(directory=ASSETS_DIR), name="assets")
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+
+
+@app.get("/{filepath:path}")
+def serve_static(filepath: str):
+    full_path = os.path.join(STATIC_DIR, filepath)
+    if os.path.isfile(full_path):
+        return FileResponse(full_path)
+    return {"error": "not found"}

backend.py

@@ -1,160 +0,0 @@
-import os
-import json
-import sqlite3
-import time
-from fastapi import FastAPI
-from fastapi.responses import FileResponse, StreamingResponse
-from pydantic import BaseModel
-from langgraph.graph import StateGraph, START, END
-from langgraph.checkpoint.sqlite import SqliteSaver
-from langgraph.graph.message import add_messages
-from langchain_core.messages import BaseMessage, HumanMessage, AIMessage
-from langchain_mistralai import ChatMistralAI
-from typing import TypedDict, Annotated
-
-
-# LangGraph Setup
-llm = ChatMistralAI(model="mistral-small", temperature=0.7)
-
-
-class ChatState(TypedDict):
-    messages: Annotated[list[BaseMessage], add_messages]
-
-
-def chat_node(state: ChatState):
-    response = llm.invoke(state["messages"])
-    return {"messages": [response]}
-
-
-DB_PATH = "/data/chatbot.db" if os.path.isdir("/data") else "chatbot.db"  
-conn = sqlite3.connect(database=DB_PATH, check_same_thread=False)
-
-# Thread titles table (separate from LangGraph's checkpoint tables)
-conn.execute("""
-    CREATE TABLE IF NOT EXISTS thread_titles (
-        thread_id TEXT PRIMARY KEY,
-        title TEXT,
-        last_active REAL
-    )
-""")
-conn.commit()
-
-checkpointer = SqliteSaver(conn=conn)  # using database instead of InMemorySaver()
-
-graph = StateGraph(ChatState)
-graph.add_node("chat_node", chat_node)
-graph.add_edge(START, "chat_node")
-graph.add_edge("chat_node", END)
-
-chatbot = graph.compile(checkpointer=checkpointer)
-
-
-# FastAPI Setup
-app = FastAPI()
-
-STATIC_DIR = os.path.dirname(os.path.abspath(__file__))
-
-
-class ChatRequest(BaseModel):
-    message: str
-    thread_id: str
-
-
-class RenameRequest(BaseModel):
-    thread_id: str
-    title: str
-
-
-@app.get("/")
-def serve_index():
-    return FileResponse(os.path.join(STATIC_DIR, "stem.html"))
-
-
-@app.get("/threads")
-def get_threads():
-    cursor = conn.execute(
-        "SELECT thread_id, title FROM thread_titles ORDER BY last_active DESC"
-    )
-    return {"threads": [{"id": row[0], "title": row[1]} for row in cursor]}
-
-
-@app.get("/history/{thread_id}")
-def get_history(thread_id: str):
-    config = {"configurable": {"thread_id": thread_id}}
-    state = chatbot.get_state(config)
-    messages = state.values.get("messages", [])
-
-    result = []
-    for msg in messages:
-        role = "user" if isinstance(msg, HumanMessage) else "assistant"
-        result.append({"role": role, "content": msg.content})
-
-    return {"messages": result}
-
-
-@app.post("/chat")
-def chat(request: ChatRequest):
-    now = time.time()
-
-    # Check if thread already exists
-    row = conn.execute(
-        "SELECT thread_id FROM thread_titles WHERE thread_id = ?",
-        (request.thread_id,)
-    ).fetchone()
-
-    if row:
-        # Existing thread: just bump last_active
-        conn.execute(
-            "UPDATE thread_titles SET last_active = ? WHERE thread_id = ?",
-            (now, request.thread_id)
-        )
-    else:
-        # New thread: auto-title from first message
-        title = request.message[:30]
-        if len(request.message) > 30:
-            title += "..."
-        conn.execute(
-            "INSERT INTO thread_titles (thread_id, title, last_active) VALUES (?, ?, ?)",
-            (request.thread_id, title, now)
-        )
-    conn.commit()
-
-    config = {"configurable": {"thread_id": request.thread_id}}
-
-    def stream_tokens():
-        for chunk, metadata in chatbot.stream(
-            {"messages": [HumanMessage(content=request.message)]},
-            config=config,
-            stream_mode="messages",
-        ):
-            if isinstance(chunk, AIMessage) and chunk.content:
-                yield f"data: {json.dumps({'token': chunk.content})}\n\n"
-        yield "data: [DONE]\n\n"
-
-    return StreamingResponse(stream_tokens(), media_type="text/event-stream")
-
-
-@app.post("/rename")
-def rename_thread(request: RenameRequest):
-    conn.execute(
-        "UPDATE thread_titles SET title = ? WHERE thread_id = ?",
-        (request.title, request.thread_id)
-    )
-    conn.commit()
-    return {"ok": True}
-
-
-@app.delete("/thread/{thread_id}")
-def delete_thread(thread_id: str):
-    conn.execute("DELETE FROM thread_titles WHERE thread_id = ?", (thread_id,))
-    conn.commit()
-    return {"ok": True}
-
-
-# Static file serving for assets (logos, etc.)
-@app.get("/{filepath:path}")
-def serve_static(filepath: str):
-    full_path = os.path.join(STATIC_DIR, filepath)
-    if os.path.isfile(full_path):
-        return FileResponse(full_path)
-    return {"error": "not found"}

config.py

@@ -0,0 +1,22 @@
+import os
+
+
+# --- API Keys ---
+GOOGLE_API_KEY   = os.environ.get("GOOGLE_API_KEY", "")
+PINECONE_API_KEY = os.environ.get("PINECONE_API_KEY", "")
+EXPORT_SECRET    = os.environ.get("EXPORT_SECRET", "")
+
+# --- Pinecone ---
+PINECONE_INDEX = "stem-embed"
+
+# --- Embedding ---
+EMBED_MODEL_NAME  = "BAAI/bge-large-en-v1.5"
+BGE_QUERY_PREFIX  = "Represent this sentence: "
+
+# --- Database ---
+# HuggingFace Spaces provides /data for persistent storage
+DB_PATH = "/data/stemgraph.db" if os.path.isdir("/data") else "stemgraph.db"
+
+# --- Defaults ---
+DEFAULT_PERSONA = "noob"
+RETRIEVAL_TOP_K = 5

db.py

@@ -0,0 +1,109 @@
+import sqlite3
+import json
+from config import DB_PATH
+
+
+conn = sqlite3.connect(database=DB_PATH, check_same_thread=False)
+
+# Thread titles (existing)
+conn.execute("""
+    CREATE TABLE IF NOT EXISTS thread_titles (
+        thread_id   TEXT PRIMARY KEY,
+        title       TEXT,
+        last_active REAL
+    )
+""")
+
+# Chat logs — analytics dataset for future model training
+conn.execute("""
+    CREATE TABLE IF NOT EXISTS chat_logs (
+        id              INTEGER PRIMARY KEY AUTOINCREMENT,
+        thread_id       TEXT NOT NULL,
+        timestamp       REAL NOT NULL,
+        user_message    TEXT NOT NULL,
+        assistant_response TEXT NOT NULL,
+        persona         TEXT,
+        language        TEXT,
+        username        TEXT,
+        user_agent      TEXT,
+        sources         TEXT
+    )
+""")
+
+conn.commit()
+
+
+# --- Thread operations ---
+
+def get_threads():
+    cursor = conn.execute(
+        "SELECT thread_id, title FROM thread_titles ORDER BY last_active DESC"
+    )
+    return [{"id": row[0], "title": row[1]} for row in cursor]
+
+
+def upsert_thread(thread_id: str, message: str, now: float):
+    row = conn.execute(
+        "SELECT thread_id FROM thread_titles WHERE thread_id = ?",
+        (thread_id,),
+    ).fetchone()
+
+    if row:
+        conn.execute(
+            "UPDATE thread_titles SET last_active = ? WHERE thread_id = ?",
+            (now, thread_id),
+        )
+    else:
+        title = message[:30] + ("..." if len(message) > 30 else "")
+        conn.execute(
+            "INSERT INTO thread_titles (thread_id, title, last_active) VALUES (?, ?, ?)",
+            (thread_id, title, now),
+        )
+    conn.commit()
+
+
+def rename_thread(thread_id: str, title: str):
+    conn.execute(
+        "UPDATE thread_titles SET title = ? WHERE thread_id = ?",
+        (title, thread_id),
+    )
+    conn.commit()
+
+
+def delete_thread(thread_id: str):
+    conn.execute("DELETE FROM thread_titles WHERE thread_id = ?", (thread_id,))
+    conn.commit()
+
+
+# --- Chat log operations ---
+
+def log_exchange(
+    thread_id: str,
+    timestamp: float,
+    user_message: str,
+    assistant_response: str,
+    persona: str,
+    language: str,
+    username: str,
+    user_agent: str,
+    sources: list[dict] | None = None,
+):
+    """Log a complete user-assistant exchange for analytics/training data."""
+    conn.execute(
+        """INSERT INTO chat_logs
+           (thread_id, timestamp, user_message, assistant_response,
+            persona, language, username, user_agent, sources)
+           VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)""",
+        (
+            thread_id,
+            timestamp,
+            user_message,
+            assistant_response,
+            persona,
+            language,
+            username,
+            user_agent,
+            json.dumps(sources) if sources else None,
+        ),
+    )
+    conn.commit()

graph.py

@@ -0,0 +1,58 @@
+"""
+LangGraph definition — single chat node with persona/language-aware system prompt.
+Guard and retrieval happen outside the graph (in the route handler)
+so we can send SSE status events during those steps.
+"""
+
+from langgraph.graph import StateGraph, START, END
+from langgraph.checkpoint.sqlite import SqliteSaver
+from langgraph.graph.message import add_messages
+from langchain_core.messages import BaseMessage, SystemMessage
+from langchain_core.runnables import RunnableConfig
+from langchain_google_genai import ChatGoogleGenerativeAI
+from typing import TypedDict, Annotated
+
+import db
+import prompts
+
+
+llm = ChatGoogleGenerativeAI(
+    model="gemini-2.5-flash-lite",
+    temperature=0.5,
+    max_output_tokens=8192,
+    streaming=True,
+)
+
+
+class ChatState(TypedDict):
+    messages: Annotated[list[BaseMessage], add_messages]
+
+
+def chat_node(state: ChatState, config: RunnableConfig):
+    """
+    Build system prompt from persona + language + context + username,
+    prepend it to conversation history, invoke LLM.
+    """
+    cfg      = config.get("configurable", {})
+    persona  = cfg.get("persona", "noob")
+    context  = cfg.get("context", "")
+    language = cfg.get("language", "auto")
+    username = cfg.get("username", "")
+
+    system_msg = SystemMessage(
+        content=prompts.build(persona, context, language, username)
+    )
+    all_msgs = [system_msg] + state["messages"]
+    response = llm.invoke(all_msgs)
+
+    return {"messages": [response]}
+
+
+# --- Compile graph ---
+_graph = StateGraph(ChatState)
+_graph.add_node("chat_node", chat_node)
+_graph.add_edge(START, "chat_node")
+_graph.add_edge("chat_node", END)
+
+checkpointer = SqliteSaver(conn=db.conn)
+chatbot = _graph.compile(checkpointer=checkpointer)

guard.py

@@ -0,0 +1,22 @@
+"""
+Input guard — lightweight pre-check before LLM call.
+No explicit word lists. Abuse handling is delegated to the system prompt
+(Mistral already has built-in safety training).
+"""
+
+
+def check_input(message: str) -> tuple[bool, str | None]:
+    """
+    Basic pre-checks that don't need an LLM call.
+    Returns (True, None) if OK, or (False, rejection_message) if blocked.
+    Abuse/profanity is handled by the system prompt, not here.
+    """
+    text = message.strip()
+
+    if not text:
+        return False, "Empty message."
+
+    if len(text) > 5000:
+        return False, "Message too long. Keep it under 5000 characters."
+
+    return True, None

prompts.py

@@ -0,0 +1,95 @@
+"""
+System prompts and persona templates for ANStem AI.
+Supports: persona selection, language preference, username addressing, abuse deflection.
+"""
+
+
+_BASE_PROMPT = """You are ANStem AI, a deeply knowledgeable tutor for CBSE Class XI and XII students studying Physics, Chemistry, and Mathematics.
+
+You have access to NCERT textbook material provided as context below. Use this context as your PRIMARY reference.
+
+HOW TO ANSWER:
+1. Read the context carefully. Use it as the foundation of your answer.
+2. If the context contains relevant information, even partially, use it and build a complete, thorough answer around it.
+3. You may use your own knowledge to EXPLAIN, DERIVE, and ELABORATE on concepts found in or related to the context. The context provides the textbook anchor; you provide the expert teaching.
+4. Only say you cannot help if the question is completely outside CBSE XI/XII PCM syllabus (history, politics, entertainment, etc.).
+5. For any question within Physics, Chemistry, or Mathematics scope, always attempt a helpful and complete answer.
+6. Give COMPLETE answers. Never stop mid-sentence or mid-derivation.
+
+FORMAT:
+- Use LaTeX for math: inline $...$ and display $$...$$.
+- Chemical formulas: use \\ce{{...}} notation (e.g. \\ce{{H2SO4}}, \\ce{{2H2 + O2 -> 2H2O}}).
+- Structure your response: direct answer first, then detailed explanation, then formula or derivation if applicable.
+- Cite NCERT source when using context: [Class XI/XII, Subject, Chapter X].
+
+ABUSE POLICY:
+If the user is vulgar, abusive, or trying to provoke you, respond with ONLY:
+"Let's keep it academic. Ask me about Physics, Chemistry, or Maths."
+Do not engage with, repeat, or acknowledge abusive content."""
+
+
+_PERSONAS = {
+    "nerd": (
+        "TEACHING STYLE: You are detail-obsessed and rigorous. "
+        "Derive everything from first principles. Use precise mathematical notation and formal terminology. "
+        "Include step-by-step derivations, proofs, and edge cases. "
+        "Assume the student is sharp, curious, and wants real depth."
+    ),
+    "noob": (
+        "TEACHING STYLE: You are patient, warm, and encouraging. "
+        "Explain like the student is encountering this topic for the very first time. "
+        "Use simple everyday language, relatable analogies, and step-by-step breakdown. "
+        "If you use a technical term, define it immediately with an example."
+    ),
+    "priest": (
+        "TEACHING STYLE: You are a cosmic philosopher who sees the universe as a grand design. "
+        "Explain science as if revealing ancient secrets of existence. "
+        "Use metaphors from nature, astronomy, and the fabric of reality. "
+        "Make learning feel like discovering something sacred, but stay scientifically precise."
+    ),
+}
+
+
+_LANGUAGE_INSTRUCTIONS = {
+    "auto": (
+        "LANGUAGE: Detect the language the student is using from their message and chat history. "
+        "Respond in the same language. You are fluent in English, Hindi, Gujarati, Marathi, and Hinglish. "
+        "Match their tone and style naturally."
+    ),
+    "english": "LANGUAGE: Respond exclusively in English.",
+    "hindi": "LANGUAGE: Respond exclusively in Hindi (Devanagari script).",
+    "hinglish": (
+        "LANGUAGE: Respond in Hinglish — a natural mix of Hindi and English written in Roman script. "
+        "Use the casual conversational style common among Indian students."
+    ),
+    "gujarati": "LANGUAGE: Respond exclusively in Gujarati (Gujarati script).",
+    "marathi": "LANGUAGE: Respond exclusively in Marathi (Devanagari script).",
+}
+
+
+def build(persona: str, context: str, language: str = "auto", username: str = "") -> str:
+    """Build the full system prompt from persona + language + context + username."""
+    persona_instruction = _PERSONAS.get(persona, _PERSONAS["noob"])
+    language_instruction = _LANGUAGE_INSTRUCTIONS.get(language, _LANGUAGE_INSTRUCTIONS["auto"])
+
+    username_line = ""
+    if username.strip():
+        username_line = f"\nADDRESS: Call the student by their name: {username.strip()}.\n"
+
+    context_block = context if context.strip() else "No context retrieved for this query."
+
+    return (
+        f"{_BASE_PROMPT}\n\n"
+        f"{persona_instruction}\n\n"
+        f"{language_instruction}\n"
+        f"{username_line}\n"
+        f"NCERT CONTEXT:\n{context_block}"
+    )
+
+
+def get_persona_names() -> list[str]:
+    return list(_PERSONAS.keys())
+
+
+def get_language_options() -> list[str]:
+    return list(_LANGUAGE_INSTRUCTIONS.keys())

requirements.txt

@@ -1,7 +1,9 @@
+fastapi
+uvicorn
 langgraph
-langchain
 langchain-core
-langchain-mistralai
+langchain-google-genai
 langgraph-checkpoint-sqlite
-fastapi
-uvicorn
+pinecone
+sentence-transformers
+torch --index-url https://download.pytorch.org/whl/cpu

retriever.py

@@ -0,0 +1,59 @@
+"""
+Pinecone retriever — connects to the stem-embed index,
+encodes queries with BGE-large, returns relevant NCERT chunks.
+"""
+
+from sentence_transformers import SentenceTransformer
+from pinecone import Pinecone
+from config import PINECONE_API_KEY, PINECONE_INDEX, EMBED_MODEL_NAME, BGE_QUERY_PREFIX, RETRIEVAL_TOP_K
+
+
+# --- Load embedding model (CPU, ~1.3GB, loads once at startup) ---
+_embed_model = SentenceTransformer(EMBED_MODEL_NAME, device="cpu")
+
+# --- Connect to Pinecone ---
+_pc    = Pinecone(api_key=PINECONE_API_KEY)
+_index = _pc.Index(PINECONE_INDEX)
+
+
+def search(query: str, top_k: int = RETRIEVAL_TOP_K) -> list[dict]:
+    """
+    Encode query with BGE prefix, retrieve top-k chunks from Pinecone.
+    Returns list of dicts: {text, subject, class_level, chapter, source, score}
+    """
+    q_vec = _embed_model.encode(
+        [BGE_QUERY_PREFIX + query],
+        normalize_embeddings=True,
+        convert_to_numpy=True,
+    )[0].tolist()
+
+    response = _index.query(vector=q_vec, top_k=top_k, include_metadata=True)
+
+    results = []
+    for m in response.matches:
+        meta = m.metadata
+        results.append({
+            "text":        meta.get("text", ""),
+            "subject":     meta.get("subject", ""),
+            "class_level": meta.get("class_level", ""),
+            "chapter":     meta.get("chapter", ""),
+            "source":      meta.get("source", ""),
+            "score":       round(m.score, 4),
+        })
+    return results
+
+
+def format_context(results: list[dict]) -> str:
+    """
+    Format search results into a context string
+    suitable for injection into the system prompt.
+    """
+    if not results:
+        return "No relevant context found."
+
+    blocks = []
+    for i, r in enumerate(results, 1):
+        label = f"Class {r['class_level']} {r['subject']} Ch.{r['chapter']}"
+        blocks.append(f"[{i}. {label} | score={r['score']}]\n{r['text']}")
+
+    return "\n\n".join(blocks)

static/app.js

@@ -0,0 +1,427 @@
+/* ============================================================
+   ANStem AI — Application Logic
+   ============================================================ */
+
+/* ----- State ----- */
+let currentThreadId = crypto.randomUUID();
+const threads = [];
+let isSending = false;
+let currentPersona  = localStorage.getItem('anstem_persona')  || 'noob';
+let currentLanguage = localStorage.getItem('anstem_language') || 'auto';
+let currentUsername = localStorage.getItem('anstem_username') || '';
+
+/* ----- DOM References ----- */
+const sidebar         = document.getElementById('sidebar');
+const toggleSidebarBtn = document.getElementById('toggleSidebarBtn');
+const chatHistoryList = document.getElementById('chatHistoryList');
+const chatContainer   = document.getElementById('chatContainer');
+const userInput       = document.getElementById('userInput');
+const sendBtn         = document.getElementById('sendBtn');
+const settingsPanel   = document.getElementById('settingsPanel');
+const settingsOverlay = document.getElementById('settingsOverlay');
+const openSettingsBtn = document.getElementById('openSettingsBtn');
+const newChatBtn      = document.getElementById('newChatBtn');
+const usernameInput   = document.getElementById('usernameInput');
+const languageSelect  = document.getElementById('languageSelect');
+
+
+/* =========================================================
+   Sidebar
+   ========================================================= */
+
+toggleSidebarBtn.addEventListener('click', () => sidebar.classList.toggle('collapsed'));
+
+newChatBtn.addEventListener('click', () => {
+    currentThreadId = crypto.randomUUID();
+    chatContainer.innerHTML = '<div class="welcome-placeholder">Where should we start?</div>';
+    renderHistory();
+});
+
+function addThreadToSidebar(id, title) {
+    threads.unshift({ id, title });
+    renderHistory();
+}
+
+function renderHistory() {
+    chatHistoryList.innerHTML = '';
+    threads.forEach(thread => {
+        const item = document.createElement('div');
+        item.className = `history-item ${thread.id === currentThreadId ? 'active' : ''}`;
+        item.setAttribute('data-thread-id', thread.id);
+        item.innerHTML = `
+            <span class="chat-title">${thread.title}</span>
+            <button class="options-btn" onclick="toggleMenu(event, this)">&#8942;</button>
+            <div class="options-menu">
+                <div class="option-item" onclick="renameChat(event, this)">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                    Rename
+                </div>
+                <div class="option-item delete" onclick="deleteChat(event, this)">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                    Delete
+                </div>
+            </div>
+        `;
+        item.addEventListener('click', () => loadThread(thread.id));
+        chatHistoryList.appendChild(item);
+    });
+}
+
+function loadThread(threadId) {
+    currentThreadId = threadId;
+    renderHistory();
+    chatContainer.innerHTML = '';
+    fetch('/history/' + threadId)
+        .then(res => res.json())
+        .then(data => {
+            data.messages.forEach(msg => {
+                const sender = msg.role === 'user' ? 'user' : 'ai';
+                const el = appendMessage(sender, msg.content);
+                if (sender === 'ai') renderFinalContent(el, msg.content);
+            });
+        });
+}
+
+
+/* =========================================================
+   Options Menu (Rename / Delete)
+   ========================================================= */
+
+function toggleMenu(e, btn) {
+    e.stopPropagation();
+    closeAllMenus();
+    btn.nextElementSibling.classList.add('show');
+    btn.classList.add('menu-open');
+}
+
+document.addEventListener('click', closeAllMenus);
+
+function closeAllMenus() {
+    document.querySelectorAll('.options-menu.show').forEach(m => m.classList.remove('show'));
+    document.querySelectorAll('.options-btn.menu-open').forEach(b => b.classList.remove('menu-open'));
+}
+
+function deleteChat(e, optionEl) {
+    e.stopPropagation();
+    const item = optionEl.closest('.history-item');
+    const threadId = item.getAttribute('data-thread-id');
+    const idx = threads.findIndex(t => t.id === threadId);
+    if (idx !== -1) threads.splice(idx, 1);
+    item.style.opacity = '0';
+    setTimeout(() => item.remove(), 200);
+    fetch('/thread/' + threadId, { method: 'DELETE' });
+}
+
+function renameChat(e, optionEl) {
+    e.stopPropagation();
+    const item = optionEl.closest('.history-item');
+    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.selectionStart = input.selectionEnd = input.value.length;
+
+    function saveRename() {
+        const newTitle = input.value.trim() || 'Untitled Chat';
+        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 })
+        });
+    }
+
+    input.addEventListener('blur', saveRename);
+    input.addEventListener('keydown', evt => {
+        if (evt.key === 'Enter') saveRename();
+        if (evt.key === 'Escape') { titleSpan.innerText = currentTitle; input.replaceWith(titleSpan); }
+    });
+    input.addEventListener('click', evt => evt.stopPropagation());
+}
+
+
+/* =========================================================
+   Settings Panel
+   ========================================================= */
+
+openSettingsBtn.addEventListener('click', () => {
+    settingsPanel.classList.add('open');
+    settingsOverlay.classList.add('show');
+});
+
+settingsOverlay.addEventListener('click', () => {
+    settingsPanel.classList.remove('open');
+    settingsOverlay.classList.remove('show');
+});
+
+// Username
+usernameInput.value = currentUsername;
+usernameInput.addEventListener('input', () => {
+    currentUsername = usernameInput.value.trim();
+    localStorage.setItem('anstem_username', currentUsername);
+});
+
+// Language
+languageSelect.value = currentLanguage;
+languageSelect.addEventListener('change', () => {
+    currentLanguage = languageSelect.value;
+    localStorage.setItem('anstem_language', currentLanguage);
+});
+
+// Persona selection
+document.querySelectorAll('.persona-option').forEach(opt => {
+    if (opt.dataset.persona === currentPersona) {
+        document.querySelectorAll('.persona-option').forEach(o => o.classList.remove('active'));
+        opt.classList.add('active');
+    }
+    opt.addEventListener('click', () => {
+        document.querySelectorAll('.persona-option').forEach(o => o.classList.remove('active'));
+        opt.classList.add('active');
+        currentPersona = opt.dataset.persona;
+        localStorage.setItem('anstem_persona', currentPersona);
+    });
+});
+
+
+/* =========================================================
+   Chat & Streaming
+   ========================================================= */
+
+userInput.addEventListener('input', function () {
+    this.style.height = '56px';
+    this.style.height = this.scrollHeight + 'px';
+    sendBtn.style.color = this.value.trim().length > 0 ? 'var(--text-primary)' : 'var(--text-secondary)';
+});
+
+userInput.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+    }
+});
+
+sendBtn.addEventListener('click', sendMessage);
+
+function sendMessage() {
+    const text = userInput.value.trim();
+    if (!text || isSending) return;
+
+    const placeholder = document.getElementById('welcomePlaceholder');
+    if (placeholder) placeholder.remove();
+
+    isSending = true;
+    appendMessage('user', text);
+    userInput.value = '';
+    userInput.style.height = '56px';
+    sendBtn.style.color = 'var(--text-secondary)';
+
+    const exists = threads.find(t => t.id === currentThreadId);
+    if (!exists) {
+        const title = text.length > 30 ? text.substring(0, 30) + '...' : text;
+        addThreadToSidebar(currentThreadId, title);
+    } else {
+        const idx = threads.indexOf(exists);
+        threads.splice(idx, 1);
+        threads.unshift(exists);
+        renderHistory();
+    }
+
+    streamResponse(text);
+}
+
+function streamResponse(text) {
+    // Create AI message row with thinking indicator
+    const rowDiv = document.createElement('div');
+    rowDiv.classList.add('message-row', 'ai');
+    rowDiv.innerHTML = `
+        <div class="ai-avatar"></div>
+        <div style="flex-grow:1; max-width:80%;">
+            <div class="thinking-indicator" id="currentThinking">
+                <img src="/assets/stem_black.png" class="thinking-logo" />
+                <span class="thinking-text">Reading your question...</span>
+            </div>
+            <div class="message-content" style="display:none;"></div>
+        </div>
+    `;
+    chatContainer.appendChild(rowDiv);
+    scrollToBottom();
+
+    const thinkingEl = rowDiv.querySelector('#currentThinking');
+    const thinkingText = thinkingEl.querySelector('.thinking-text');
+    const contentEl = rowDiv.querySelector('.message-content');
+    let rawText = '';
+    let firstToken = true;
+
+    fetch('/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: text, thread_id: currentThreadId, persona: currentPersona, language: currentLanguage, username: currentUsername })
+    }).then(response => {
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+
+        function read() {
+            reader.read().then(({ done, value }) => {
+                if (done) {
+                    finishStream(thinkingEl, contentEl, rawText);
+                    return;
+                }
+
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop();
+
+                lines.forEach(line => {
+                    if (!line.startsWith('data: ')) return;
+                    const payload = line.substring(6);
+
+                    if (payload === '[DONE]') {
+                        finishStream(thinkingEl, contentEl, rawText);
+                        return;
+                    }
+
+                    const data = JSON.parse(payload);
+
+                    // Status event (thinking phase)
+                    if (data.status === 'thinking') {
+                        thinkingText.textContent = data.message;
+                        return;
+                    }
+
+                    // Token event
+                    if (data.token !== undefined) {
+                        if (firstToken) {
+                            thinkingEl.style.display = 'none';
+                            contentEl.style.display = 'block';
+                            contentEl.classList.add('cursor');
+                            firstToken = false;
+                        }
+                        rawText += data.token;
+                        contentEl.textContent = rawText;
+                        scrollToBottom();
+                    }
+                });
+
+                read();
+            });
+        }
+
+        read();
+    });
+}
+
+function finishStream(thinkingEl, contentEl, rawText) {
+    thinkingEl.style.display = 'none';
+    contentEl.style.display = 'block';
+    contentEl.classList.remove('cursor');
+    renderFinalContent(contentEl, rawText);
+    isSending = false;
+}
+
+
+/* =========================================================
+   Message Helpers
+   ========================================================= */
+
+function appendMessage(sender, text) {
+    const rowDiv = document.createElement('div');
+    rowDiv.classList.add('message-row', sender);
+    let html = '';
+    if (sender === 'ai') html += '<div class="ai-avatar"></div>';
+    html += `<div class="message-content">${escapeHtml(text)}</div>`;
+    rowDiv.innerHTML = html;
+    chatContainer.appendChild(rowDiv);
+    scrollToBottom();
+    return rowDiv.querySelector('.message-content');
+}
+
+function scrollToBottom() {
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+
+/* =========================================================
+   Renderer — Markdown + KaTeX + mhchem
+   ========================================================= */
+
+function renderFinalContent(element, rawText) {
+    if (!rawText) return;
+
+    // Step 1: Protect LaTeX blocks from markdown parser
+    const blocks = [];
+    let safeText = rawText;
+
+    // Display math: $$...$$
+    safeText = safeText.replace(/\$\$[\s\S]*?\$\$/g, match => {
+        blocks.push(match);
+        return `%%LATEX_${blocks.length - 1}%%`;
+    });
+
+    // Inline math: $...$  (not greedy, single line)
+    safeText = safeText.replace(/\$[^\$\n]+?\$/g, match => {
+        blocks.push(match);
+        return `%%LATEX_${blocks.length - 1}%%`;
+    });
+
+    // \[...\] and \(...\)
+    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}%%`;
+    });
+
+    // Step 2: Parse markdown
+    let html = typeof marked !== 'undefined' ? marked.parse(safeText) : safeText;
+
+    // Step 3: Restore LaTeX blocks
+    blocks.forEach((block, i) => {
+        html = html.replace(`%%LATEX_${i}%%`, block);
+    });
+
+    // Step 4: Inject HTML and render KaTeX
+    element.innerHTML = html;
+
+    if (typeof renderMathInElement !== 'undefined') {
+        renderMathInElement(element, {
+            delimiters: [
+                { left: '$$', right: '$$', display: true },
+                { left: '$',  right: '$',  display: false },
+                { left: '\\(', right: '\\)', display: false },
+                { left: '\\[', right: '\\]', display: true },
+            ],
+            throwOnError: false,
+        });
+    }
+}
+
+
+/* =========================================================
+   Init — Load existing threads
+   ========================================================= */
+
+fetch('/threads')
+    .then(res => res.json())
+    .then(data => {
+        data.threads.forEach(t => threads.push({ id: t.id, title: t.title }));
+        renderHistory();
+    });

static/index.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ANStem AI</title>
+    <meta name="description" content="AI-powered NCERT tutor for Class XI and XII Physics, Chemistry, and Mathematics.">
+    <link rel="icon" type="image/png" href="/assets/stem_black.png">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <img src="/assets/stembotix.png" alt="STEMbotix Logo" class="brand-logo">
+        </div>
+
+        <button class="new-chat-btn" id="newChatBtn">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 5v14M5 12h14"/>
+            </svg>
+            New Chat
+        </button>
+
+        <div class="chat-history" id="chatHistoryList"></div>
+
+        <div class="sidebar-footer">
+            <div class="settings-btn" id="openSettingsBtn">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="3"></circle>
+                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+                </svg>
+                Settings
+            </div>
+        </div>
+    </aside>
+
+    <!-- Settings Panel (slide-out) -->
+    <div class="settings-overlay" id="settingsOverlay"></div>
+    <div class="settings-panel" id="settingsPanel">
+        <h3>Your Name</h3>
+        <input type="text" class="settings-input" id="usernameInput" placeholder="What should I call you?" maxlength="30" autocomplete="off" />
+
+        <h3>Language</h3>
+        <select class="settings-select" id="languageSelect">
+            <option value="auto">Auto-detect</option>
+            <option value="english">English</option>
+            <option value="hinglish">Hinglish</option>
+            <option value="hindi">Hindi</option>
+            <option value="gujarati">Gujarati</option>
+            <option value="marathi">Marathi</option>
+        </select>
+
+        <h3>Teaching Style</h3>
+        <div class="persona-option active" data-persona="noob">
+            <div>
+                <div class="persona-name">Noob</div>
+                <div class="persona-desc">Simple, friendly. Explains like you're seeing it for the first time.</div>
+            </div>
+        </div>
+        <div class="persona-option" data-persona="nerd">
+            <div>
+                <div class="persona-name">Nerd</div>
+                <div class="persona-desc">Detail-obsessed. Derives from first principles, formal notation.</div>
+            </div>
+        </div>
+        <div class="persona-option" data-persona="priest">
+            <div>
+                <div class="persona-name">Priest</div>
+                <div class="persona-desc">Cosmic philosopher. Science as secrets of the universe.</div>
+            </div>
+        </div>
+    </div>
+
+    <main class="main-chat">
+        <header class="main-header">
+            <button class="toggle-sidebar-btn" id="toggleSidebarBtn" title="Toggle Sidebar">
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                    <line x1="9" y1="3" x2="9" y2="21"></line>
+                </svg>
+            </button>
+        </header>
+
+        <div class="chat-container" id="chatContainer">
+            <div class="welcome-placeholder" id="welcomePlaceholder">Where should we start?</div>
+        </div>
+
+        <div class="input-container">
+            <div class="input-box">
+                <textarea id="userInput" placeholder="Ask ANStem AI..." rows="1"></textarea>
+                <button class="send-btn" id="sendBtn">
+                    <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
+                </button>
+            </div>
+            <div class="disclaimer-text">
+                ANStem is an AI tutor grounded in NCERT material. It can still make mistakes.
+            </div>
+        </div>
+    </main>
+
+    <!-- Dependencies (KaTeX + Marked) -->
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/mhchem.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script defer src="/static/app.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,554 @@
+/* ============================================================
+   ANStem AI — Stylesheet
+   ============================================================ */
+
+:root {
+    --brand-orange: #EB5A28;
+    --brand-orange-hover: #cf4f22;
+    --bg-main: #000000;
+    --bg-sidebar: #070707;
+    --bg-input: #121212;
+    --bg-hover: #1A1A1A;
+    --text-primary: #EDEDED;
+    --text-secondary: #777777;
+    --border-color: #222222;
+    --msg-user: #141414;
+    --msg-ai: transparent;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    font-family: 'Montserrat', sans-serif;
+    background-color: var(--bg-main);
+    color: var(--text-primary);
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* --- Sidebar --- */
+.sidebar {
+    width: 260px;
+    flex-shrink: 0;
+    background-color: var(--bg-sidebar);
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--border-color);
+    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    z-index: 20;
+}
+
+.sidebar.collapsed { margin-left: -260px; }
+
+.sidebar-header {
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.brand-logo { max-width: 80%; height: auto; object-fit: contain; }
+
+.new-chat-btn {
+    margin: 20px 15px;
+    padding: 12px;
+    background-color: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: 'Montserrat', sans-serif;
+    transition: background-color 0.2s, border-color 0.2s;
+}
+
+.new-chat-btn:hover { background-color: var(--bg-hover); }
+
+/* --- Chat History & Options --- */
+.chat-history {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 0 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.history-item {
+    position: relative;
+    padding: 10px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.history-item:hover, .history-item.active {
+    background-color: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.chat-title {
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 10px;
+}
+
+.options-btn {
+    background: none; border: none;
+    color: var(--text-secondary);
+    font-size: 18px; line-height: 1;
+    cursor: pointer; opacity: 0;
+    padding: 0 4px;
+    transition: opacity 0.2s, color 0.2s;
+}
+
+.history-item:hover .options-btn,
+.options-btn.menu-open { opacity: 1; }
+.options-btn:hover { color: var(--text-primary); }
+
+.options-menu {
+    position: absolute;
+    right: 10px; top: 35px;
+    background-color: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    display: none;
+    flex-direction: column;
+    z-index: 100;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
+    min-width: 120px;
+    overflow: hidden;
+}
+
+.options-menu.show { display: flex; }
+
+.option-item {
+    padding: 10px 15px;
+    font-size: 13px;
+    color: var(--text-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: background-color 0.2s;
+}
+
+.option-item:hover { background-color: var(--bg-hover); }
+.option-item.delete { color: #ff4a4a; }
+
+.rename-input {
+    width: 100%;
+    background: transparent; border: none;
+    color: var(--text-primary);
+    font-family: inherit; font-size: 14px;
+    outline: none;
+    border-bottom: 1px solid var(--brand-orange);
+    padding: 2px 0;
+}
+
+/* --- Sidebar Footer & Settings --- */
+.sidebar-footer {
+    padding: 15px;
+    border-top: 1px solid var(--border-color);
+}
+
+.settings-btn {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.2s;
+}
+
+.settings-btn:hover { background-color: var(--bg-hover); }
+
+/* --- Settings Panel --- */
+.settings-panel {
+    position: fixed;
+    top: 0; right: -340px;
+    width: 320px; height: 100vh;
+    background: var(--bg-sidebar);
+    border-left: 1px solid var(--border-color);
+    z-index: 200;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.settings-panel.open { right: 0; }
+
+.settings-panel h3 {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.persona-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: border-color 0.2s, background-color 0.2s;
+}
+
+.persona-option:hover { background-color: var(--bg-hover); }
+.persona-option.active { border-color: var(--brand-orange); background-color: rgba(235, 90, 40, 0.08); }
+
+.persona-option .persona-name {
+    font-size: 14px; font-weight: 600;
+    color: var(--text-primary);
+}
+
+.persona-option .persona-desc {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 2px;
+}
+
+.settings-input {
+    width: 100%;
+    padding: 10px 14px;
+    background: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-family: 'Montserrat', sans-serif;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+.settings-input:focus { border-color: var(--brand-orange); }
+.settings-input::placeholder { color: var(--text-secondary); }
+
+.settings-select {
+    width: 100%;
+    padding: 10px 14px;
+    background: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-family: 'Montserrat', sans-serif;
+    font-size: 14px;
+    outline: none;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23777' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    transition: border-color 0.2s;
+}
+
+.settings-select:focus { border-color: var(--brand-orange); }
+.settings-select option { background: var(--bg-input); color: var(--text-primary); }
+
+.settings-overlay {
+    display: none;
+    position: fixed;
+    top: 0; left: 0;
+    width: 100vw; height: 100vh;
+    background: rgba(0,0,0,0.5);
+    z-index: 199;
+}
+
+.settings-overlay.show { display: block; }
+
+/* --- Main Chat Area --- */
+.main-chat {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.main-header {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%;
+    padding: 15px 20px;
+    display: flex;
+    align-items: center;
+    z-index: 10;
+}
+
+.toggle-sidebar-btn {
+    background: transparent; border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 8px;
+    border-radius: 8px;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.toggle-sidebar-btn:hover {
+    background-color: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.chat-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 70px 20px 40px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    scroll-behavior: smooth;
+}
+
+/* --- Messages --- */
+.message-row {
+    display: flex;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    animation: fadeIn 0.4s ease-out forwards;
+}
+
+.message-row.user { justify-content: flex-end; }
+.message-row.ai   { justify-content: flex-start; }
+
+.message-content {
+    max-width: 80%;
+    padding: 14px 18px;
+    border-radius: 12px;
+    font-size: 15px;
+    line-height: 1.7;
+    word-wrap: break-word;
+}
+
+.user .message-content {
+    background-color: var(--msg-user);
+    border-bottom-right-radius: 4px;
+}
+
+.ai .message-content { background-color: var(--msg-ai); }
+
+.ai-avatar {
+    width: 30px; height: 30px;
+    border-radius: 50%;
+    background-image: url('/assets/stem_black.png');
+    background-size: cover;
+    background-position: center;
+    margin-right: 15px;
+    flex-shrink: 0;
+    margin-top: 5px;
+}
+
+/* --- Thinking Indicator --- */
+.thinking-indicator {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 0;
+    animation: fadeIn 0.3s ease-out;
+}
+
+.thinking-indicator.hidden { display: none; }
+
+.thinking-logo {
+    width: 22px; height: 22px;
+    border-radius: 50%;
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
+.thinking-text {
+    font-size: 13px;
+    color: var(--text-secondary);
+    font-style: italic;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 0.5; transform: scale(1); }
+    50%      { opacity: 1;   transform: scale(1.08); }
+}
+
+/* --- Rendered Markdown in AI messages --- */
+.message-content h1, .message-content h2, .message-content h3 {
+    margin-top: 16px; margin-bottom: 8px;
+    font-weight: 600;
+}
+.message-content h1 { font-size: 1.3em; }
+.message-content h2 { font-size: 1.15em; }
+.message-content h3 { font-size: 1.05em; }
+
+.message-content p { margin-bottom: 10px; }
+
+.message-content ul, .message-content ol {
+    margin: 8px 0 8px 20px;
+}
+
+.message-content li { margin-bottom: 4px; }
+
+.message-content code {
+    background: #1a1a1a;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9em;
+}
+
+.message-content pre {
+    background: #0d0d0d;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 14px;
+    overflow-x: auto;
+    margin: 10px 0;
+}
+
+.message-content pre code {
+    background: none;
+    padding: 0;
+}
+
+.message-content table {
+    border-collapse: collapse;
+    margin: 10px 0;
+    width: 100%;
+}
+
+.message-content th, .message-content td {
+    border: 1px solid var(--border-color);
+    padding: 8px 12px;
+    text-align: left;
+    font-size: 14px;
+}
+
+.message-content th {
+    background: var(--bg-input);
+    font-weight: 600;
+}
+
+.message-content blockquote {
+    border-left: 3px solid var(--brand-orange);
+    padding-left: 12px;
+    margin: 10px 0;
+    color: var(--text-secondary);
+}
+
+/* KaTeX overrides for dark mode */
+.katex { color: var(--text-primary); }
+.katex-display { margin: 14px 0; overflow-x: auto; }
+
+/* --- Input Area --- */
+.input-container {
+    padding: 20px 20px 10px 20px;
+    background: linear-gradient(180deg, transparent, var(--bg-main) 20%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 10;
+}
+
+.input-box {
+    width: 100%; max-width: 800px;
+    position: relative;
+    background-color: var(--bg-input);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    transition: border-color 0.3s;
+}
+
+.input-box:focus-within { border-color: var(--brand-orange); }
+
+textarea {
+    width: 100%;
+    background: transparent; border: none;
+    color: var(--text-primary);
+    padding: 16px 50px 16px 20px;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 15px;
+    resize: none; outline: none;
+    height: 56px; max-height: 200px;
+    line-height: 1.5;
+    overflow-y: hidden;
+}
+
+textarea::placeholder { color: var(--text-secondary); }
+
+.send-btn {
+    position: absolute;
+    right: 10px; bottom: 10px;
+    width: 36px; height: 36px;
+    border-radius: 10px;
+    background-color: transparent; border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: color 0.2s, transform 0.1s;
+}
+
+.send-btn:hover { color: var(--text-primary); }
+.send-btn:active { transform: scale(0.95); }
+.send-btn svg { width: 20px; height: 20px; fill: currentColor; }
+
+.disclaimer-text {
+    font-size: 12px;
+    color: #555555;
+    margin-top: 12px;
+    text-align: center;
+}
+
+.welcome-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    user-select: none;
+}
+
+/* --- Animations --- */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+/* --- Scrollbar --- */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: #555; }
+
+/* --- Streaming cursor --- */
+.cursor::after {
+    content: '\25CB';
+    animation: blink 1s step-start infinite;
+    color: var(--text-secondary);
+    margin-left: 2px;
+}
+
+@keyframes blink { 50% { opacity: 0; } }

stem.html

@@ -1,796 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>STEMbotix AI Chat</title>
-    <link rel="icon" type="image/png" href="assets/stem_black.png">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
-    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
-    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"></script>
-    
-    <style>
-        :root {
-            /* Branding colors */
-            --brand-orange: #EB5A28;
-            --brand-orange-hover: #cf4f22;
-            
-            /* Lights Out Dark Mode Palette */
-            --bg-main: #000000;         
-            --bg-sidebar: #070707;      
-            --bg-input: #121212;        
-            --bg-hover: #1A1A1A;
-            --text-primary: #EDEDED;
-            --text-secondary: #777777;
-            --border-color: #222222;
-            --msg-user: #141414;
-            --msg-ai: transparent;
-        }
-
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            font-family: 'Montserrat', sans-serif;
-            background-color: var(--bg-main);
-            color: var(--text-primary);
-            display: flex;
-            height: 100vh;
-            overflow: hidden;
-        }
-
-        /* --- Sidebar Styles --- */
-        .sidebar {
-            width: 260px;
-            flex-shrink: 0;
-            background-color: var(--bg-sidebar);
-            display: flex;
-            flex-direction: column;
-            border-right: 1px solid var(--border-color);
-            transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-            z-index: 20;
-        }
-
-        .sidebar.collapsed {
-            margin-left: -260px;
-        }
-
-        .sidebar-header {
-            padding: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        .brand-logo {
-            max-width: 80%;
-            height: auto;
-            object-fit: contain;
-        }
-
-        .new-chat-btn {
-            margin: 20px 15px;
-            padding: 12px;
-            background-color: transparent;
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            border-radius: 8px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            font-size: 14px;
-            font-weight: 500;
-            font-family: 'Montserrat', sans-serif;
-            transition: background-color 0.2s, border-color 0.2s;
-        }
-
-        .new-chat-btn:hover {
-            background-color: var(--bg-hover);
-        }
-
-        /* --- Chat History & Options Menu --- */
-        .chat-history {
-            flex-grow: 1;
-            overflow-y: auto;
-            padding: 0 15px;
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-        }
-
-        .history-item {
-            position: relative;
-            padding: 10px 12px;
-            border-radius: 8px;
-            cursor: pointer;
-            color: var(--text-secondary);
-            font-size: 14px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            transition: background-color 0.2s, color 0.2s;
-        }
-
-        .history-item:hover, .history-item.active {
-            background-color: var(--bg-hover);
-            color: var(--text-primary);
-        }
-
-        .chat-title {
-            flex-grow: 1;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            padding-right: 10px;
-        }
-
-        .options-btn {
-            background: none;
-            border: none;
-            color: var(--text-secondary);
-            font-size: 18px;
-            line-height: 1;
-            cursor: pointer;
-            opacity: 0;
-            padding: 0 4px;
-            transition: opacity 0.2s, color 0.2s;
-        }
-
-        .history-item:hover .options-btn,
-        .options-btn.menu-open {
-            opacity: 1;
-        }
-
-        .options-btn:hover {
-            color: var(--text-primary);
-        }
-
-        .options-menu {
-            position: absolute;
-            right: 10px;
-            top: 35px;
-            background-color: var(--bg-input);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            display: none;
-            flex-direction: column;
-            z-index: 100;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
-            min-width: 120px;
-            overflow: hidden;
-        }
-
-        .options-menu.show {
-            display: flex;
-        }
-
-        .option-item {
-            padding: 10px 15px;
-            font-size: 13px;
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            transition: background-color 0.2s;
-        }
-
-        .option-item:hover {
-            background-color: var(--bg-hover);
-        }
-
-        .option-item.delete {
-            color: #ff4a4a;
-        }
-
-        .rename-input {
-            width: 100%;
-            background: transparent;
-            border: none;
-            color: var(--text-primary);
-            font-family: inherit;
-            font-size: 14px;
-            outline: none;
-            border-bottom: 1px solid var(--brand-orange);
-            padding: 2px 0;
-        }
-
-        .sidebar-footer {
-            padding: 15px;
-            border-top: 1px solid var(--border-color);
-        }
-
-        .settings-btn {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            color: var(--text-primary);
-            cursor: pointer;
-            padding: 10px;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 500;
-            transition: background-color 0.2s;
-        }
-
-        .settings-btn:hover {
-            background-color: var(--bg-hover);
-        }
-
-        /* --- Main Chat Area Styles --- */
-        .main-chat {
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-        }
-
-        /* Header for Sidebar Toggle */
-        .main-header {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            padding: 15px 20px;
-            display: flex;
-            align-items: center;
-            z-index: 10;
-        }
-
-        .toggle-sidebar-btn {
-            background: transparent;
-            border: none;
-            color: var(--text-secondary);
-            cursor: pointer;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 8px;
-            border-radius: 8px;
-            transition: background-color 0.2s, color 0.2s;
-        }
-
-        .toggle-sidebar-btn:hover {
-            background-color: var(--bg-hover);
-            color: var(--text-primary);
-        }
-
-        .chat-container {
-            flex-grow: 1;
-            overflow-y: auto;
-            padding: 70px 20px 40px 20px; /* Top padding accommodates the header */
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-            scroll-behavior: smooth;
-        }
-
-        .message-row {
-            display: flex;
-            width: 100%;
-            max-width: 800px;
-            margin: 0 auto;
-            animation: fadeIn 0.4s ease-out forwards;
-        }
-
-        .message-row.user {
-            justify-content: flex-end;
-        }
-
-        .message-row.ai {
-            justify-content: flex-start;
-        }
-
-        .message-content {
-            max-width: 80%;
-            padding: 14px 18px;
-            border-radius: 12px;
-            font-size: 15px;
-            line-height: 1.6;
-            word-wrap: break-word;
-        }
-
-        .user .message-content {
-            background-color: var(--msg-user);
-            border-bottom-right-radius: 4px;
-        }
-
-        .ai .message-content {
-            background-color: var(--msg-ai);
-        }
-
-        .ai-avatar {
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-            background-image: url('assets/stem_black.png');
-            background-size: cover;
-            background-position: center;
-            margin-right: 15px;
-            flex-shrink: 0;
-            margin-top: 5px;
-        }
-
-        /* --- Input Area Styles --- */
-        .input-container {
-            padding: 20px 20px 10px 20px;
-            background: linear-gradient(180deg, transparent, var(--bg-main) 20%);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            z-index: 10;
-        }
-
-        .input-box {
-            width: 100%;
-            max-width: 800px;
-            position: relative;
-            background-color: var(--bg-input);
-            border: 1px solid var(--border-color);
-            border-radius: 16px;
-            transition: border-color 0.3s;
-        }
-
-        .input-box:focus-within {
-            border-color: var(--brand-orange);
-        }
-
-        textarea {
-            width: 100%;
-            background: transparent;
-            border: none;
-            color: var(--text-primary);
-            padding: 16px 50px 16px 20px;
-            font-family: 'Montserrat', sans-serif;
-            font-size: 15px;
-            resize: none;
-            outline: none;
-            height: 56px;
-            max-height: 200px;
-            line-height: 1.5;
-            overflow-y: hidden;
-        }
-
-        textarea::placeholder {
-            color: var(--text-secondary);
-        }
-
-        .send-btn {
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-            width: 36px;
-            height: 36px;
-            border-radius: 10px;
-            background-color: transparent;
-            border: none;
-            color: var(--text-secondary);
-            cursor: pointer;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            transition: color 0.2s, transform 0.1s;
-        }
-
-        .send-btn:hover {
-            color: var(--text-primary);
-        }
-
-        .send-btn:active {
-            transform: scale(0.95);
-        }
-
-        .send-btn svg {
-            width: 20px;
-            height: 20px;
-            fill: currentColor;
-        }
-
-        .disclaimer-text {
-            font-size: 12px;
-            color: #555555;
-            margin-top: 12px;
-            text-align: center;
-        }
-
-        .welcome-placeholder {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-grow: 1;
-            font-family: 'Montserrat', sans-serif;
-            font-size: 28px;
-            font-weight: 600;
-            color: var(--text-secondary);
-            user-select: none;
-        }
-
-        /* Animations */
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        /* Scrollbar Styling */
-        ::-webkit-scrollbar { width: 6px; }
-        ::-webkit-scrollbar-track { background: transparent; }
-        ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
-        ::-webkit-scrollbar-thumb:hover { background: #555; }
-
-        .cursor::after {
-            content: '▋';
-            animation: blink 1s step-start infinite;
-            color: var(--text-secondary);
-            margin-left: 2px;
-        }
-        @keyframes blink { 50% { opacity: 0; } }
-    </style>
-</head>
-<body>
-
-    <aside class="sidebar" id="sidebar">
-        <div class="sidebar-header">
-            <img src="assets/stembotix.png" alt="STEMbotix Logo" class="brand-logo">
-        </div>
-        
-        <button class="new-chat-btn">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M12 5v14M5 12h14"/>
-            </svg>
-            New Chat
-        </button>
-
-        <div class="chat-history" id="chatHistoryList">
-            </div>
-
-        <div class="sidebar-footer">
-            <div class="settings-btn">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="3"></circle>
-                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
-                </svg>
-                Settings
-            </div>
-        </div>
-    </aside>
-
-    <main class="main-chat">
-        
-        <header class="main-header">
-            <button class="toggle-sidebar-btn" id="toggleSidebarBtn" title="Toggle Sidebar">
-                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                    <line x1="9" y1="3" x2="9" y2="21"></line>
-                </svg>
-            </button>
-        </header>
-
-        <div class="chat-container" id="chatContainer">
-            <div class="welcome-placeholder" id="welcomePlaceholder">Where should we start?</div>
-        </div>
-
-        <div class="input-container">
-            <div class="input-box">
-                <textarea id="userInput" placeholder="Ask StemGraph AI..." rows="1"></textarea>
-                <button class="send-btn" id="sendBtn">
-                    <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
-                </button>
-            </div>
-            <div class="disclaimer-text">
-                StemGraph is an AI agent and can make mistakes.
-            </div>
-        </div>
-    </main>
-
-    <script>
-        /* =========================================
-           State
-        ========================================= */
-        let currentThreadId = crypto.randomUUID();
-        const threads = [];  // {id, title}
-        let isSending = false;
-
-        /* =========================================
-           Sidebar Toggle Logic
-        ========================================= */
-        const sidebar = document.getElementById('sidebar');
-        const toggleSidebarBtn = document.getElementById('toggleSidebarBtn');
-
-        toggleSidebarBtn.addEventListener('click', () => {
-            sidebar.classList.toggle('collapsed');
-        });
-
-        /* =========================================
-           Chat History Sidebar
-        ========================================= */
-        const chatHistoryList = document.getElementById('chatHistoryList');
-
-        function addThreadToSidebar(id, title) {
-            threads.unshift({id: id, title: title});
-            renderHistory();
-        }
-
-        function renderHistory() {
-            chatHistoryList.innerHTML = '';
-            threads.forEach((thread) => {
-                const item = document.createElement('div');
-                item.className = `history-item ${thread.id === currentThreadId ? 'active' : ''}`;
-                item.setAttribute('data-thread-id', thread.id);
-                item.innerHTML = `
-                    <span class="chat-title">${thread.title}</span>
-                    <button class="options-btn" onclick="toggleMenu(event, this)">&#8942;</button>
-                    <div class="options-menu">
-                        <div class="option-item" onclick="renameChat(event, this)">
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                            Rename
-                        </div>
-                        <div class="option-item delete" onclick="deleteChat(event, this)">
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
-                            Delete
-                        </div>
-                    </div>
-                `;
-                item.addEventListener('click', () => loadThread(thread.id));
-                chatHistoryList.appendChild(item);
-            });
-        }
-
-        function loadThread(threadId) {
-            currentThreadId = threadId;
-            renderHistory();
-            chatContainer.innerHTML = '';
-
-            fetch('/history/' + threadId)
-                .then(res => res.json())
-                .then(data => {
-                    data.messages.forEach(msg => {
-                        const sender = msg.role === 'user' ? 'user' : 'ai';
-                        const el = appendMessage(sender, msg.content);
-                        if (sender === 'ai') renderMath(el);
-                    });
-                });
-        }
-
-        /* =========================================
-           New Chat
-        ========================================= */
-        document.querySelector('.new-chat-btn').addEventListener('click', () => {
-            currentThreadId = crypto.randomUUID();
-            chatContainer.innerHTML = '<div class="welcome-placeholder" id="welcomePlaceholder">Where should we start?</div>';
-            renderHistory();
-        });
-
-        /* =========================================
-           Options Menu (Rename / Delete)
-        ========================================= */
-        function toggleMenu(e, btn) {
-            e.stopPropagation();
-            closeAllMenus();
-            const menu = btn.nextElementSibling;
-            menu.classList.add('show');
-            btn.classList.add('menu-open');
-        }
-
-        document.addEventListener('click', closeAllMenus);
-
-        function closeAllMenus() {
-            document.querySelectorAll('.options-menu.show').forEach(menu => {
-                menu.classList.remove('show');
-            });
-            document.querySelectorAll('.options-btn.menu-open').forEach(btn => {
-                btn.classList.remove('menu-open');
-            });
-        }
-
-        function deleteChat(e, optionEl) {
-            e.stopPropagation();
-            const item = optionEl.closest('.history-item');
-            const threadId = item.getAttribute('data-thread-id');
-            const idx = threads.findIndex(t => t.id === threadId);
-            if (idx !== -1) threads.splice(idx, 1);
-            item.style.opacity = '0';
-            setTimeout(() => { item.remove(); }, 200);
-            fetch('/thread/' + threadId, {method: 'DELETE'});
-        }
-
-        function renameChat(e, optionEl) {
-            e.stopPropagation();
-            const item = optionEl.closest('.history-item');
-            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.selectionStart = input.selectionEnd = input.value.length;
-
-            function saveRename() {
-                const newTitle = input.value.trim() || 'Untitled Chat';
-                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})
-                });
-            }
-
-            input.addEventListener('blur', saveRename);
-            input.addEventListener('keydown', (evt) => {
-                if (evt.key === 'Enter') saveRename();
-                if (evt.key === 'Escape') {
-                    titleSpan.innerText = currentTitle;
-                    input.replaceWith(titleSpan);
-                }
-            });
-            input.addEventListener('click', (evt) => evt.stopPropagation());
-        }
-
-        /* =========================================
-           Chat Messaging Logic
-        ========================================= */
-        const chatContainer = document.getElementById('chatContainer');
-        const userInput = document.getElementById('userInput');
-        const sendBtn = document.getElementById('sendBtn');
-
-        userInput.addEventListener('input', function() {
-            this.style.height = '56px';
-            this.style.height = (this.scrollHeight) + 'px';
-
-            if (this.value.trim().length > 0) {
-                sendBtn.style.color = 'var(--text-primary)';
-            } else {
-                sendBtn.style.color = 'var(--text-secondary)';
-            }
-        });
-
-        userInput.addEventListener('keydown', function(e) {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                sendMessage();
-            }
-        });
-
-        sendBtn.addEventListener('click', sendMessage);
-
-        function sendMessage() {
-            const text = userInput.value.trim();
-            if (!text || isSending) return;
-
-            // Remove welcome placeholder if present
-            const placeholder = document.getElementById('welcomePlaceholder');
-            if (placeholder) placeholder.remove();
-
-            isSending = true;
-            appendMessage('user', text);
-            userInput.value = '';
-            userInput.style.height = '56px';
-            sendBtn.style.color = 'var(--text-secondary)';
-
-            // Add thread to sidebar or move existing to top
-            const exists = threads.find(t => t.id === currentThreadId);
-            if (!exists) {
-                const title = text.length > 30 ? text.substring(0, 30) + '...' : text;
-                addThreadToSidebar(currentThreadId, title);
-            } else {
-                const idx = threads.indexOf(exists);
-                threads.splice(idx, 1);
-                threads.unshift(exists);
-                renderHistory();
-            }
-
-            streamResponse(text);
-        }
-
-        function streamResponse(text) {
-            const contentElement = appendMessage('ai', '');
-            contentElement.classList.add('cursor');
-
-            fetch('/chat', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify({message: text, thread_id: currentThreadId})
-            }).then(response => {
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                let buffer = '';
-
-                function read() {
-                    reader.read().then(({done, value}) => {
-                        if (done) {
-                            contentElement.classList.remove('cursor');
-                            renderMath(contentElement);
-                            isSending = false;
-                            return;
-                        }
-
-                        buffer += decoder.decode(value, {stream: true});
-                        const lines = buffer.split('\n');
-                        buffer = lines.pop();
-
-                        lines.forEach(line => {
-                            if (!line.startsWith('data: ')) return;
-                            const payload = line.substring(6);
-                            if (payload === '[DONE]') {
-                                contentElement.classList.remove('cursor');
-                                renderMath(contentElement);
-                                isSending = false;
-                                return;
-                            }
-                            const data = JSON.parse(payload);
-                            contentElement.textContent += data.token;
-                            scrollToBottom();
-                        });
-
-                        read();
-                    });
-                }
-
-                read();
-            });
-        }
-
-        function appendMessage(sender, text) {
-            const rowDiv = document.createElement('div');
-            rowDiv.classList.add('message-row', sender);
-
-            let contentHTML = '';
-            if (sender === 'ai') contentHTML += `<div class="ai-avatar"></div>`;
-            contentHTML += `<div class="message-content">${text}</div>`;
-
-            rowDiv.innerHTML = contentHTML;
-            chatContainer.appendChild(rowDiv);
-            scrollToBottom();
-
-            return rowDiv.querySelector('.message-content');
-        }
-
-        function scrollToBottom() {
-            chatContainer.scrollTop = chatContainer.scrollHeight;
-        }
-
-        /* =========================================
-           Math Rendering (KaTeX)
-        ========================================= */
-        function renderMath(element) {
-            if (typeof renderMathInElement === 'undefined') return;
-            renderMathInElement(element, {
-                delimiters: [
-                    {left: '$$', right: '$$', display: true},
-                    {left: '$', right: '$', display: false},
-                    {left: '\\(', right: '\\)', display: false},
-                    {left: '\\[', right: '\\]', display: true}
-                ],
-                throwOnError: false
-            });
-        }
-
-        /* =========================================
-           Init: Load existing threads
-        ========================================= */
-        fetch('/threads')
-            .then(res => res.json())
-            .then(data => {
-                data.threads.forEach(t => {
-                    threads.push({id: t.id, title: t.title});
-                });
-                renderHistory();
-            });
-    </script>
-</body>
-</html>