fixed page state while generating a message

.gitignore

@@ -30,3 +30,5 @@ logs/
 *.njsproj
 *.sln
 *.sw?
+.vercel
+.env*

backend/src/app.js

@@ -17,7 +17,10 @@ import supabaseAuth, { optionalAuth } from "./middleware/supabaseAuth.js";
 dotenv.config();
 
 const app = express();
-const CORS_ORIGIN = process.env.CORS_ORIGIN || "http://localhost:5173";
+const CORS_ORIGINS = (process.env.CORS_ORIGIN || "http://localhost:5173")
+ .split(",")
+ .map((origin) => origin.trim())
+ .filter(Boolean);
 
 // Trust proxy hop count so req.ip (and therefore rate limiting) sees the real
 // client IP behind a reverse proxy. Off by default; set TRUST_PROXY=1 in prod.
@@ -29,7 +32,7 @@ if (process.env.TRUST_PROXY) {
 app.use(securityHeaders);
 app.use(cookieParser());
 app.use(express.json());
-app.use(cors({ origin: CORS_ORIGIN, credentials: true }));
+app.use(cors({ origin: CORS_ORIGINS, credentials: true }));
 
 // Health check
 app.get("/health", (_req, res) => {

frontend/src/App.jsx

@@ -3,12 +3,11 @@
    ======================================== */
 
 import { useState, useRef, useCallback, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useMatch, useNavigate } from "react-router-dom";
 import Sidebar from "./components/sidebar/Sidebar";
 import TopNav from "./components/top-nav/TopNav";
 import ChatHistory from "./components/chat-history/ChatHistory";
 import ChatInput from "./components/chat-input/ChatInput";
-import SelectorFlow from "./components/selector-flow/SelectorFlow";
 import { useAuth } from "./lib/auth/SupabaseAuth";
 import SignInModal from "./lib/auth/SignIn";
 import { resetAppState } from "./appState";
@@ -94,9 +93,10 @@ const chapterData = {
 };
 
 function App() {
-  const { isAuthenticated, user, signIn, signUp, signOut, getToken } = useAuth();
+  const { isAuthenticated, user, signIn, signUp, signOut, getToken } =
+    useAuth();
   const navigate = useNavigate();
-  const { chatId: routeChatId } = useParams();
+  const routeChatId = useMatch("/chat/:chatId")?.params.chatId ?? null;
   // Guards deep-link loading so it only fires once per route/authenticated change.
   const chatLoadHandledRef = useRef(null);
   const [messages, setMessages] = useState([]);
@@ -166,7 +166,7 @@ function App() {
       chatLoadHandledRef.current = null;
       navigate("/");
     }
-  }, [isAuthenticated, navigate, routeChatId]);
+  }, [isAuthenticated, navigate]);
 
   // Deep link: landing on /chat/:chatId loads that conversation (signed-in
   // users only — anonymous trials are in-memory, so a refreshed trial URL
@@ -178,8 +178,6 @@ function App() {
     handleChatSelect(routeChatId);
   }, [routeChatId, isAuthenticated]);
 
-
-
   // ─── Auth handlers ───
   const handleAuthError = (msg) => {
     setMessages((prev) => [
@@ -196,7 +194,10 @@ function App() {
       const headers = {};
       if (token) headers["Authorization"] = `Bearer ${token}`;
 
-      const res = await fetch(`${API_BASE}/api/sessions`, { headers, credentials: "include" });
+      const res = await fetch(`${API_BASE}/api/sessions`, {
+        headers,
+        credentials: "include",
+      });
       if (res.ok) {
         const data = await res.json();
         setSessions(data);
@@ -250,7 +251,10 @@ function App() {
       const headers = {};
       if (token) headers["Authorization"] = `Bearer ${token}`;
 
-      const res = await fetch(`${API_BASE}/api/chat/${sessionId}`, { headers, credentials: "include" });
+      const res = await fetch(`${API_BASE}/api/chat/${sessionId}`, {
+        headers,
+        credentials: "include",
+      });
       if (!res.ok) {
         throw new Error("Session not found");
       }
@@ -338,9 +342,9 @@ function App() {
       const body = {
         text: text.trim(),
         chatId: fetchChatId,
-        grade: activeGrade !== DEFAULTS.grade ? activeGrade : undefined,
+        grade: activeGrade === DEFAULTS.grade ? undefined : activeGrade,
-        subject: activeSubject !== DEFAULTS.subject ? activeSubject : undefined,
+        subject: activeSubject === DEFAULTS.subject ? undefined : activeSubject,
-        chapter: activeChapter !== DEFAULTS.chapter ? activeChapter : undefined,
+        chapter: activeChapter === DEFAULTS.chapter ? undefined : activeChapter,
       };
 
       // Open SSE connection
@@ -406,17 +410,19 @@ function App() {
               try {
                 const data = JSON.parse(jsonStr);
                 if (data.type === "session") {
-                  // Remember which session this conversation belongs to so
-                  // follow-up messages reuse it (history stays together).
-                  // For anonymous users this is the in-memory trial id.
                   setActiveChat(data.id);
-                  // Only reflect signed-in sessions in the URL. An anonymous
+
-                  // trial id is a capability (no server ownership check), so
-                  // baking it into the URL would leak it via history/logs/
-                  // referer — keep it in in-memory state and the POST body only.
                   if (isAuthenticated) {
-                    navigate(`/chat/${data.id}`, { replace: true });
+                    // Persist the deep-link without dispatching a router
+                    // navigation. React Router navigation rerenders the route
+                    // tree during the active stream; history.replaceState only
+                    // updates the address bar, so chat state remains untouched.
                     chatLoadHandledRef.current = data.id;
+                    window.history.replaceState(
+                      window.history.state,
+                      "",
+                      `/chat/${encodeURIComponent(data.id)}`,
+                    );
                   }
                 } else if (data.type === "limit") {
                   // Anonymous free-message budget remaining (server truth).
@@ -425,19 +431,15 @@ function App() {
                   assistantText += data.content;
                   setMessages((prev) =>
                     prev.map((m) =>
-                      m.id === assistantId
+                      m.id === assistantId ? { ...m, text: assistantText } : m,
-                        ? { ...m, text: assistantText }
+                    ),
-                        : m
-                    )
                   );
                 } else if (data.type === "done") {
                   // Mark as non-streaming
                   setMessages((prev) =>
                     prev.map((m) =>
-                      m.id === assistantId
+                      m.id === assistantId ? { ...m, streaming: false } : m,
-                        ? { ...m, streaming: false }
+                    ),
-                        : m
-                    )
                   );
                 } else if (data.type === "error") {
                   setMessages((prev) =>
@@ -448,8 +450,8 @@ function App() {
                             text: `⚠️ Error: ${data.message}`,
                             streaming: false,
                           }
-                        : m
+                        : m,
-                    )
+                    ),
                   );
                 }
               } catch {
@@ -461,7 +463,8 @@ function App() {
           setIsTyping(false);
           abortRef.current = null;
 
-          // Refresh sessions to update timestamps (signed-in users only)
+          // Refresh the sidebar without changing routes. The active session id
+          // already lives in state and is reused by the next message.
           if (isAuthenticated) loadSessions();
         })
         .catch((err) => {
@@ -478,14 +481,23 @@ function App() {
           abortRef.current = null;
         });
     },
-    [isTyping, activeChat, activeGrade, activeSubject, activeChapter, isAnonymous, anonRemaining, isAuthenticated]
+    [
+      isTyping,
+      activeChat,
+      activeGrade,
+      activeSubject,
+      activeChapter,
+      isAnonymous,
+      anonRemaining,
+      isAuthenticated,
+    ],
   );
 
   const handlePromptClick = useCallback(
     (promptText) => {
       handleSend(promptText);
     },
-    [handleSend]
+    [handleSend],
   );
 
   /* ─── Selector step handlers ─── */
@@ -619,7 +631,9 @@ function App() {
               onPromptClick={handlePromptClick}
               isTyping={isTyping}
               selectorStep={selectorStep}
-              selectorData={selectorStep !== "chat" ? selectorData[selectorStep] : null}
+              selectorData={
+                selectorStep === "chat" ? null : selectorData[selectorStep]
+              }
             />
           </div>
 

frontend/src/components/chat-history/ChatHistory.jsx

@@ -2,6 +2,7 @@
    ChatHistory Component — padhle (Refined Workspace)
    ======================================== */
 
+import { useEffect, useRef } from "react";
 import Message from "../message/Message";
 import SelectorFlow from "../selector-flow/SelectorFlow";
 import "./ChatHistory.css";
@@ -62,22 +63,41 @@ const ChatHistory = ({
                 },
         ];
 
-  const fullPromptTexts = suggestions.map((s) => s.text + s.keywords.join(" ") + s.textEnd);
+        const fullPromptTexts = suggestions.map(
+                (s) => s.text + s.keywords.join(" ") + s.textEnd,
+        );
 
         const streamingMsg = messages.find((m) => m.streaming);
+        const historyRef = useRef(null);
+
+        // Scroll only the chat pane, and only when a message is added. Streaming
+        // token updates must not move the page or restart a smooth-scroll animation.
+        useEffect(() => {
+                const history = historyRef.current;
+                if (history) history.scrollTop = history.scrollHeight;
+        }, [messages.length]);
 
         /* ─── Messages mode ─── */
         if (hasMessages) {
                 return (
-      <div className="chat-history">
+                        <div className="chat-history" ref={historyRef}>
                                 <div className="chat-history__list">
                                         {messages.map((message) => (
-            <Message key={message.id} message={message} />
+                                                <Message
+                                                        key={message.id}
+                                                        message={message}
+                                                />
                                         ))}
                                         {isTyping && !streamingMsg && (
-            <Message message={{ id: "typing", role: "assistant", text: "", streaming: true }} />
+                                                <Message
+                                                        message={{
+                                                                id: "typing",
+                                                                role: "assistant",
+                                                                text: "",
+                                                                streaming: true,
+                                                        }}
+                                                />
                                         )}
-          <div ref={(el) => el && el.scrollIntoView({ behavior: "smooth", block: "end" })} />
                                 </div>
                         </div>
                 );
@@ -106,41 +126,103 @@ const ChatHistory = ({
                                 {/* Welcome Header */}
                                 <div className="chat-history__welcome">
                                         <div className="chat-history__welcome-icon">
-            <span className="material-symbols-outlined" style={{ fontWeight: 200 }}>menu_book</span>
+                                                <span
-            <span className="material-symbols-outlined chat-history__welcome-sparkle">auto_awesome</span>
+                                                        className="material-symbols-outlined"
+                                                        style={{
+                                                                fontWeight: 200,
+                                                        }}
+                                                >
+                                                        menu_book
+                                                </span>
+                                                <span className="material-symbols-outlined chat-history__welcome-sparkle">
+                                                        auto_awesome
+                                                </span>
                                         </div>
-          <h2 className="chat-history__welcome-title">Welcome to padhle</h2>
+                                        <h2 className="chat-history__welcome-title">
-          <p className="chat-history__welcome-subtitle">Your AI tutor for grades 6–12. Ask anything!</p>
+                                                Welcome to padhle
+                                        </h2>
+                                        <p className="chat-history__welcome-subtitle">
+                                                Your AI tutor for grades 6–12.
+                                                Ask anything!
+                                        </p>
                                 </div>
 
                                 {/* Bento Grid Suggestions */}
                                 <div className="chat-history__bento">
                                         {suggestions.map((suggestion) => {
-            const colorVar = suggestion.color.replace("--", "var(");
+                                                const colorVar =
-            const bgColorVar = suggestion.colorBg.replace("--", "var(");
+                                                        suggestion.color.replace(
+                                                                "--",
+                                                                "var(",
+                                                        );
+                                                const bgColorVar =
+                                                        suggestion.colorBg.replace(
+                                                                "--",
+                                                                "var(",
+                                                        );
 
                                                 return (
                                                         <button
-                key={suggestion.id}
+                                                                key={
+                                                                        suggestion.id
+                                                                }
                                                                 className="chat-history__bento-card"
                                                                 onClick={() => {
-                  const text = fullPromptTexts[suggestion.id - 1];
+                                                                        const text =
-                  onPromptClick(text);
+                                                                                fullPromptTexts[
+                                                                                        suggestion.id -
+                                                                                                1
+                                                                                ];
+                                                                        onPromptClick(
+                                                                                text,
+                                                                        );
                                                                 }}
                                                         >
-                <div className="chat-history__bento-icon-wrap" style={{ backgroundColor: `var(${bgColorVar})` }}>
+                                                                <div
-                  <span className="material-symbols-outlined" style={{ color: `var(${colorVar})`, fontWeight: suggestion.iconFilled ? 700 : 200 }}>
+                                                                        className="chat-history__bento-icon-wrap"
-                    {suggestion.icon}
+                                                                        style={{
+                                                                                backgroundColor: `var(${bgColorVar})`,
+                                                                        }}
+                                                                >
+                                                                        <span
+                                                                                className="material-symbols-outlined"
+                                                                                style={{
+                                                                                        color: `var(${colorVar})`,
+                                                                                        fontWeight: suggestion.iconFilled
+                                                                                                ? 700
+                                                                                                : 200,
+                                                                                }}
+                                                                        >
+                                                                                {
+                                                                                        suggestion.icon
+                                                                                }
                                                                         </span>
                                                                 </div>
                                                                 <div className="chat-history__bento-text">
-                  <span className="chat-history__bento-text-main">{suggestion.text}</span>
+                                                                        <span className="chat-history__bento-text-main">
-                  <span className="chat-history__bento-text-highlight" style={{ color: `var(${colorVar})`, fontWeight: 600 }}>
+                                                                                {
-                    {suggestion.keywords[0]}
+                                                                                        suggestion.text
+                                                                                }
                                                                         </span>
-                  {suggestion.textEnd}
+                                                                        <span
+                                                                                className="chat-history__bento-text-highlight"
+                                                                                style={{
+                                                                                        color: `var(${colorVar})`,
+                                                                                        fontWeight: 600,
+                                                                                }}
+                                                                        >
+                                                                                {
+                                                                                        suggestion
+                                                                                                .keywords[0]
+                                                                                }
+                                                                        </span>
+                                                                        {
+                                                                                suggestion.textEnd
+                                                                        }
                                                                 </div>
-                <span className="material-symbols-outlined chat-history__bento-arrow">arrow_forward</span>
+                                                                <span className="material-symbols-outlined chat-history__bento-arrow">
+                                                                        arrow_forward
+                                                                </span>
                                                         </button>
                                                 );
                                         })}
@@ -149,14 +231,21 @@ const ChatHistory = ({
                                 {/* Info Panel */}
                                 <div className="chat-history__info">
                                         <div className="chat-history__info-icon-wrap">
-            <span className="material-symbols-outlined">lightbulb</span>
+                                                <span className="material-symbols-outlined">
+                                                        lightbulb
+                                                </span>
                                         </div>
                                         <div className="chat-history__info-content">
-            <h4 className="chat-history__info-title">Focused on your learning</h4>
+                                                <h4 className="chat-history__info-title">
+                                                        Focused on your learning
+                                                </h4>
                                                 <p className="chat-history__info-text">
-              I'll answer questions related to your selected subject and chapter
+                                                        I'll answer questions
+                                                        related to your selected
+                                                        subject and chapter
                                                         <br />
-              using your textbook content.
+                                                        using your textbook
+                                                        content.
                                                 </p>
                                         </div>
                                 </div>

frontend/src/components/message/Message.jsx

@@ -2,7 +2,6 @@
    Message Component — padhle (Refined Workspace)
    ======================================== */
 
-import { useEffect, useRef } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
@@ -12,61 +11,76 @@ import "./Message.css";
 const Message = ({ message }) => {
   const { role, text, streaming } = message;
   const isUser = role === "user";
-  const endRef = useRef(null);
-
-  // Auto-scroll to bottom when text updates
-  useEffect(() => {
-    if (endRef.current) {
-      endRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
-    }
-  }, [text, streaming]);
 
   return (
-    <div className={`message ${isUser ? "message--user" : "message--assistant"}`}>
+    <div
+      className={`message ${isUser ? "message--user" : "message--assistant"}`}
+    >
       {!isUser && (
         <div className="message__avatar">
           <div className="message__avatar-icon">
-            <span className="material-symbols-outlined" style={{ fontWeight: 700 }}>school</span>
+            <span
+              className="material-symbols-outlined"
+              style={{ fontWeight: 700 }}
+            >
+              school
+            </span>
           </div>
         </div>
       )}
       <div className="message__bubble">
-        <div className={`message__text ${!isUser ? "markdown-body" : ""}`}>
+        <div className={`message__text ${isUser ? "" : "markdown-body"}`}>
-          {isUser ? (
+          {isUser
-            text
+            ? text
-          ) : (
+            : text && (
-            text && (
                 <ReactMarkdown
                   remarkPlugins={[remarkMath]}
                   rehypePlugins={[rehypeKatex]}
                 >
                   {text}
                 </ReactMarkdown>
-            )
               )}
-          {streaming && <span className="message__typing-dots">
+          {streaming && (
+            <span className="message__typing-dots">
               <span className="message__typing-dot"></span>
               <span className="message__typing-dot"></span>
               <span className="message__typing-dot"></span>
-          </span>}
+            </span>
+          )}
         </div>
       </div>
 
       {/* Action buttons for assistant messages */}
       {!isUser && text && (
         <div className="message__actions">
-          <button className="message__action" aria-label="Helpful" title="Helpful">
+          <button
+            className="message__action"
+            aria-label="Helpful"
+            title="Helpful"
+          >
             <span className="material-symbols-outlined">thumb_up</span>
           </button>
-          <button className="message__action" aria-label="Save note" title="Save Note">
+          <button
+            className="message__action"
+            aria-label="Save note"
+            title="Save Note"
+          >
             <span className="material-symbols-outlined">bookmark_border</span>
           </button>
-          <button className="message__action message__action--primary" aria-label="Explain deeper" title="Explain Deeper">
+          <button
-            <span className="material-symbols-outlined" style={{ fontWeight: 700 }}>menu_book</span>
+            className="message__action message__action--primary"
+            aria-label="Explain deeper"
+            title="Explain Deeper"
+          >
+            <span
+              className="material-symbols-outlined"
+              style={{ fontWeight: 700 }}
+            >
+              menu_book
+            </span>
           </button>
         </div>
       )}
-      <div ref={endRef} />
     </div>
   );
 };

frontend/src/main.jsx

@@ -14,14 +14,10 @@ ReactDOM.createRoot(document.getElementById("root")).render(
     <AuthProvider>
       <BrowserRouter>
         <Routes>
-          {/* Both paths render the same App shell; the chat id is read via
+          {/* One route owns the app shell so URL changes never remount it. */}
-              useParams() to support deep links like /chat/:chatId. A catch-all
-              keeps unknown paths on the app (Vite SPA fallback serves index.html). */}
-          <Route path="/" element={<App />} />
-          <Route path="/chat/:chatId" element={<App />} />
           <Route path="*" element={<App />} />
         </Routes>
       </BrowserRouter>
     </AuthProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );

supabasev2.md

@@ -0,0 +1,37 @@
+│ 🔧 Development Tools                 │
+├─────────┬────────────────────────────┤
+│ Studio  │ http://http://192.168.50.153/:54323     │
+│ Mailpit │ http://http://192.168.50.153/:54324     │
+│ MCP     │ http://http://192.168.50.153/:54321/mcp │
+╰─────────┴────────────────────────────╯
+
+╭──────────────────────────────────────────────────────╮
+│ 🌐 APIs                                              │
+├────────────────┬─────────────────────────────────────┤
+│ Project URL    │ http://http://192.168.50.153/:54321              │
+│ REST           │ http://http://192.168.50.153/:54321/rest/v1      │
+│ GraphQL        │ http://http://192.168.50.153/:54321/graphql/v1   │
+│ Edge Functions │ http://http://192.168.50.153/:54321/functions/v1 │
+╰────────────────┴─────────────────────────────────────╯
+
+╭───────────────────────────────────────────────────────────────╮
+│ ⛁ Database                                                    │
+├─────┬─────────────────────────────────────────────────────────┤
+│ URL │ postgresql://postgres:postgres@http://192.168.50.153/:54322/postgres │
+╰─────┴─────────────────────────────────────────────────────────╯
+
+╭──────────────────────────────────────────────────────────────╮
+│ 🔑 Authentication Keys                                       │
+├─────────────┬────────────────────────────────────────────────┤
+│ Publishable │ sb_publishable_ACJWlzQHlZjBrEguHvfOxg_3BJgxAaH │
+│ Secret      │ sb_secret_N7UND0UgjKTVK-Uodkm0Hg_xSvEMPvz      │
+╰─────────────┴────────────────────────────────────────────────╯
+
+╭───────────────────────────────────────────────────────────────────────────────╮
+│ 📦 Storage (S3)                                                               │
+├────────────┬──────────────────────────────────────────────────────────────────┤
+│ URL        │ http://http://192.168.50.153/:54321/storage/v1/s3                             │
+│ Access Key │ 625729a08b95bf1b7ff351a663f3a23c                                 │
+│ Secret Key │ 850181e4652dd023b7a98c58ae0d2d34bd487ee0cc3254aed6eda37307425907 │
+│ Region     │ local                                                            │
+╰────────────┴──────────

vercel.json

@@ -0,0 +1,28 @@
+{
+  "services": {
+    "frontend": {
+      "root": ".",
+      "framework": "vite"
+    },
+    "backend": {
+      "root": "backend",
+      "entrypoint": "src/app.js"
+    }
+  },
+  "rewrites": [
+    {
+      "source": "/api(/.*)?",
+      "destination": {
+        "type": "service",
+        "service": "backend"
+      }
+    },
+    {
+      "source": "/(.*)",
+      "destination": {
+        "type": "service",
+        "service": "frontend"
+      }
+    }
+  ]
+}