Upd proj-spec filter + chat continuity LTM + sidebar

app.py

@@ -1,6 +1,7 @@
 # https://binkhoale1812-edsummariser.hf.space/
 import os, io, re, uuid, json, time, logging
 from typing import List, Dict, Any, Optional
+from datetime import datetime
 
 from fastapi import FastAPI, UploadFile, File, Form, Request, HTTPException, BackgroundTasks
 from fastapi.responses import FileResponse, JSONResponse, HTMLResponse
@@ -46,6 +47,8 @@ embedder = EmbeddingClient(model_name=os.getenv("EMBED_MODEL", "sentence-transfo
 # Mongo / RAG store
 rag = RAGStore(mongo_uri=os.getenv("MONGO_URI"), db_name=os.getenv("MONGO_DB", "studybuddy"))
 ensure_indexes(rag)
+
+
 # ────────────────────────────── Auth Helpers/Routes ───────────────────────────
 import hashlib
 import secrets
@@ -96,6 +99,103 @@ async def login(email: str = Form(...), password: str = Form(...)):
     return {"email": email, "user_id": doc.get("user_id")}
 
 
+# ────────────────────────────── Project Management ───────────────────────────
+@app.post("/projects/create")
+async def create_project(user_id: str = Form(...), name: str = Form(...), description: str = Form("")):
+    """Create a new project for a user"""
+    if not name.strip():
+        raise HTTPException(400, detail="Project name is required")
+    
+    project_id = str(uuid.uuid4())
+    project = {
+        "project_id": project_id,
+        "user_id": user_id,
+        "name": name.strip(),
+        "description": description.strip(),
+        "created_at": datetime.utcnow(),
+        "updated_at": datetime.utcnow()
+    }
+    
+    rag.db["projects"].insert_one(project)
+    logger.info(f"[PROJECT] Created project {name} for user {user_id}")
+    return project
+
+
+@app.get("/projects")
+async def list_projects(user_id: str):
+    """List all projects for a user"""
+    projects = list(rag.db["projects"].find(
+        {"user_id": user_id},
+        {"_id": 0}
+    ).sort("updated_at", -1))
+    return {"projects": projects}
+
+
+@app.get("/projects/{project_id}")
+async def get_project(project_id: str, user_id: str):
+    """Get a specific project (with user ownership check)"""
+    project = rag.db["projects"].find_one(
+        {"project_id": project_id, "user_id": user_id},
+        {"_id": 0}
+    )
+    if not project:
+        raise HTTPException(404, detail="Project not found")
+    return project
+
+
+@app.delete("/projects/{project_id}")
+async def delete_project(project_id: str, user_id: str):
+    """Delete a project and all its associated data"""
+    # Check ownership
+    project = rag.db["projects"].find_one({"project_id": project_id, "user_id": user_id})
+    if not project:
+        raise HTTPException(404, detail="Project not found")
+    
+    # Delete project and all associated data
+    rag.db["projects"].delete_one({"project_id": project_id})
+    rag.db["chunks"].delete_many({"project_id": project_id})
+    rag.db["files"].delete_many({"project_id": project_id})
+    rag.db["chat_sessions"].delete_many({"project_id": project_id})
+    
+    logger.info(f"[PROJECT] Deleted project {project_id} for user {user_id}")
+    return {"message": "Project deleted successfully"}
+
+
+# ────────────────────────────── Chat Sessions ──────────────────────────────
+@app.post("/chat/save")
+async def save_chat_message(
+    user_id: str = Form(...),
+    project_id: str = Form(...),
+    role: str = Form(...),
+    content: str = Form(...),
+    timestamp: Optional[float] = Form(None)
+):
+    """Save a chat message to the session"""
+    if role not in ["user", "assistant"]:
+        raise HTTPException(400, detail="Invalid role")
+    
+    message = {
+        "user_id": user_id,
+        "project_id": project_id,
+        "role": role,
+        "content": content,
+        "timestamp": timestamp or time.time(),
+        "created_at": datetime.utcnow()
+    }
+    
+    rag.db["chat_sessions"].insert_one(message)
+    return {"message": "Chat message saved"}
+
+
+@app.get("/chat/history")
+async def get_chat_history(user_id: str, project_id: str, limit: int = 100):
+    """Get chat history for a project"""
+    messages = list(rag.db["chat_sessions"].find(
+        {"user_id": user_id, "project_id": project_id},
+        {"_id": 0}
+    ).sort("timestamp", 1).limit(limit))
+    return {"messages": messages}
+
 
 # ────────────────────────────── Helpers ──────────────────────────────
 def _infer_mime(filename: str) -> str:
@@ -131,6 +231,7 @@ async def upload_files(
     request: Request,
     background_tasks: BackgroundTasks,
     user_id: str = Form(...),
+    project_id: str = Form(...),
     files: List[UploadFile] = File(...),
 ):
     """
@@ -141,23 +242,27 @@ async def upload_files(
     3) Merge captions into page text
     4) Chunk into semantic cards (topic_name, summary, content + metadata)
     5) Embed with all-MiniLM-L6-v2
-    6) Store in MongoDB with per-user and per-filename metadata
+    6) Store in MongoDB with per-user and per-project metadata
     7) Create a file-level summary
     """
     job_id = str(uuid.uuid4())
+
     # Read file bytes upfront to avoid reading from closed streams in background task
     preloaded_files = []
     for uf in files:
         raw = await uf.read()
         preloaded_files.append((uf.filename, raw))
+
     # Process files in background   
     async def _process():
         total_cards = 0
         file_summaries = []
         for fname, raw in preloaded_files:
             logger.info(f"[{job_id}] Parsing {fname} ({len(raw)} bytes)")
+
             # Extract pages from file
             pages = _extract_pages(fname, raw)
+
             # Caption images per page (if any)
             num_imgs = sum(len(p.get("images", [])) for p in pages)
             captions = []
@@ -173,46 +278,58 @@ async def upload_files(
                     captions.append(caps)
             else:
                 captions = [[] for _ in pages]
+
             # Merge captions into text
             for idx, p in enumerate(pages):
                 if captions[idx]:
                     p["text"] = (p.get("text", "") + "\n\n" + "\n".join([f"[Image] {c}" for c in captions[idx]])).strip()
+
             # Build cards
-            cards = build_cards_from_pages(pages, filename=fname, user_id=user_id)
+            cards = build_cards_from_pages(pages, filename=fname, user_id=user_id, project_id=project_id)
             logger.info(f"[{job_id}] Built {len(cards)} cards for {fname}")
+
             # Embed & store
             embeddings = embedder.embed([c["content"] for c in cards])
             for c, vec in zip(cards, embeddings):
                 c["embedding"] = vec
+
             # Store cards in MongoDB on card
             rag.store_cards(cards)
             total_cards += len(cards)
+
             # File-level summary (cheap extractive)
             full_text = "\n\n".join(p.get("text", "") for p in pages)
             file_summary = cheap_summarize(full_text, max_sentences=6)
-            rag.upsert_file_summary(user_id=user_id, filename=fname, summary=file_summary)
+            rag.upsert_file_summary(user_id=user_id, project_id=project_id, filename=fname, summary=file_summary)
             file_summaries.append({"filename": fname, "summary": file_summary})
+
         logger.info(f"[{job_id}] Ingestion complete. Total cards: {total_cards}")
+
     # Kick off processing in background to keep UI responsive
     background_tasks.add_task(_process)
     return {"job_id": job_id, "status": "processing"}
 
 
 @app.get("/cards")
-def list_cards(user_id: str, filename: Optional[str] = None, limit: int = 50, skip: int = 0):
-    return rag.list_cards(user_id=user_id, filename=filename, limit=limit, skip=skip)
+def list_cards(user_id: str, project_id: str, filename: Optional[str] = None, limit: int = 50, skip: int = 0):
+    return rag.list_cards(user_id=user_id, project_id=project_id, filename=filename, limit=limit, skip=skip)
 
 
 @app.get("/file-summary")
-def get_file_summary(user_id: str, filename: str):
-    doc = rag.get_file_summary(user_id=user_id, filename=filename)
+def get_file_summary(user_id: str, project_id: str, filename: str):
+    doc = rag.get_file_summary(user_id=user_id, project_id=project_id, filename=filename)
     if not doc:
         raise HTTPException(404, detail="No summary found for that file.")
     return {"filename": filename, "summary": doc.get("summary", "")}
 
 
 @app.post("/chat")
-async def chat(user_id: str = Form(...), question: str = Form(...), k: int = Form(6)):
+async def chat(
+    user_id: str = Form(...), 
+    project_id: str = Form(...), 
+    question: str = Form(...), 
+    k: int = Form(6)
+):
     """
     RAG chat that answers ONLY from uploaded materials.
     - Preload all filenames + summaries; use NVIDIA to classify file relevance to question (true/false)
@@ -230,14 +347,14 @@ async def chat(user_id: str = Form(...), question: str = Form(...), k: int = For
     # If the question is about a specific file, return the file summary
     if m:
         fn = m.group(1)
-        doc = rag.get_file_summary(user_id=user_id, filename=fn)
+        doc = rag.get_file_summary(user_id=user_id, project_id=project_id, filename=fn)
         if doc:
             return {"answer": doc.get("summary", ""), "sources": [{"filename": fn, "file_summary": True}]}
         else:
             return {"answer": "I couldn't find a summary for that file in your library.", "sources": []}
-    
+        
     # 1) Preload file list + summaries
-    files_list = rag.list_files(user_id=user_id)  # [{filename, summary}]
+    files_list = rag.list_files(user_id=user_id, project_id=project_id)  # [{filename, summary}]
     # Ask NVIDIA to mark relevance per file
     relevant_map = await files_relevance(question, files_list, nvidia_rotator)
     relevant_files = [fn for fn, ok in relevant_map.items() if ok]
@@ -272,7 +389,7 @@ async def chat(user_id: str = Form(...), question: str = Form(...), k: int = For
 
     # 3) RAG vector search (restricted to relevant files if any)
     q_vec = embedder.embed([question])[0]
-    hits = rag.vector_search(user_id=user_id, query_vector=q_vec, k=k, filenames=relevant_files if relevant_files else None)
+    hits = rag.vector_search(user_id=user_id, project_id=project_id, query_vector=q_vec, k=k, filenames=relevant_files if relevant_files else None)
     if not hits:
         return {
             "answer": "I don't know based on your uploaded materials. Try uploading more sources or rephrasing the question.",

static/auth.js

@@ -20,6 +20,11 @@
       chatSection.style.display = 'block';
       // Hide modal if it was open
       modal.classList.add('hidden');
+      
+      // Trigger project loading after successful auth
+      if (window.__sb_load_projects) {
+        window.__sb_load_projects();
+      }
     } else {
       userInfo.style.display = 'none';
       // Disable app sections for unauthenticated users
@@ -43,6 +48,7 @@
 
   function clearUser() {
     localStorage.removeItem('sb_user');
+    localStorage.removeItem('sb_current_project');
     setAuthUI(null);
   }
 

static/index.html

@@ -8,91 +8,201 @@
   <link rel="stylesheet" href="/static/styles.css">
 </head>
 <body>
-  <div class="container">
-    <header>
-      <div class="logo">
-        <div class="logo-icon">📚</div>
-        <div class="logo-text">
-          <h1>StudyBuddy</h1>
-          <p>AI-powered document analysis & chat</p>
+  <div class="app-container">
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-header">
+        <div class="logo">
+          <div class="logo-icon">📚</div>
+          <div class="logo-text">
+            <h1>StudyBuddy</h1>
+            <p>AI Document Analysis</p>
+          </div>
         </div>
       </div>
-      <div class="auth-controls">
-        <div class="user-info" id="user-info" style="display:none;">
-          <span class="user-avatar">👤</span>
-          <span class="user-email" id="user-email"></span>
-          <button id="logout" class="btn-secondary">Logout</button>
+
+      <!-- Website Menu -->
+      <div class="sidebar-section">
+        <div class="section-header">
+          <h3>Menu</h3>
         </div>
-        <button id="theme-toggle" class="btn-icon" title="Toggle theme">🌙</button>
+        <nav class="website-menu">
+          <a href="#" class="menu-item active" data-section="projects">
+            <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2H5a2 2 0 0 0-2-2z"/>
+              <path d="M8 5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2H8V5z"/>
+            </svg>
+            <span>Projects</span>
+          </a>
+          <a href="#" class="menu-item" data-section="files">
+            <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+              <polyline points="14,2 14,8 20,8"/>
+              <line x1="16" y1="13" x2="8" y2="13"/>
+              <line x1="16" y1="17" x2="8" y2="17"/>
+              <polyline points="10,9 9,9 8,9"/>
+            </svg>
+            <span>Files</span>
+          </a>
+          <a href="#" class="menu-item" data-section="chat">
+            <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+            </svg>
+            <span>Chat</span>
+          </a>
+          <a href="#" class="menu-item" data-section="analytics">
+            <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M3 3v18h18"/>
+              <path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/>
+            </svg>
+            <span>Analytics</span>
+          </a>
+          <a href="#" class="menu-item" data-section="settings">
+            <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="3"/>
+              <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"/>
+            </svg>
+            <span>Settings</span>
+          </a>
+        </nav>
       </div>
-    </header>
 
-    <section class="card reveal" id="upload-section">
-      <div class="card-header">
-        <h2>📁 Upload Documents</h2>
-        <p>Upload your PDFs and DOCX files to start chatting with your materials</p>
+      <!-- Project Management -->
+      <div class="sidebar-section">
+        <div class="section-header">
+          <h3>Projects</h3>
+          <button id="new-project-btn" class="btn-icon" title="Create new project">+</button>
+        </div>
+        <div class="project-list" id="project-list">
+          <!-- Projects will be populated here -->
+        </div>
       </div>
-      <form id="upload-form">
-        <div class="file-drop-zone" id="file-drop-zone">
-          <div class="drop-zone-content">
-            <div class="drop-zone-icon">📄</div>
-            <p>Drag & drop files here or click to browse</p>
-            <span class="file-types">Supports: PDF, DOCX</span>
+
+      <!-- User Controls -->
+      <div class="sidebar-section">
+        <div class="section-header">
+          <h3>Account</h3>
+        </div>
+        <div class="user-info" id="user-info" style="display:none;">
+          <div class="user-avatar">👤</div>
+          <div class="user-details">
+            <span class="user-email" id="user-email"></span>
+            <button id="logout" class="btn-secondary">Logout</button>
           </div>
-          <input type="file" id="files" multiple accept=".pdf,.docx" hidden>
         </div>
-        <div class="file-list" id="file-list" style="display:none;">
-          <h4>Selected Files:</h4>
-          <div class="file-items" id="file-items"></div>
+        <div class="theme-toggle-wrapper">
+          <button id="theme-toggle" class="btn-icon" title="Toggle theme">🌙</button>
         </div>
-        <button type="submit" class="btn-primary" id="upload-btn">
-          <span class="btn-text">Upload Documents</span>
-          <span class="btn-loading" style="display:none;">
-            <div class="spinner"></div>
-            Processing...
-          </span>
+      </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Top Bar with Hamburger Menu -->
+      <div class="top-bar">
+        <button id="sidebar-toggle" class="hamburger-menu" aria-label="Toggle sidebar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="3" y1="6" x2="21" y2="6"/>
+            <line x1="3" y1="12" x2="21" y2="12"/>
+            <line x1="3" y1="18" x2="21" y2="18"/>
+          </svg>
         </button>
-      </form>
-      <div class="upload-progress" id="upload-progress" style="display:none;">
-        <div class="progress-header">
-          <h4>Processing Documents</h4>
-          <span class="progress-status" id="progress-status">Initializing...</span>
-        </div>
-        <div class="progress-bar">
-          <div class="progress-fill" id="progress-fill"></div>
+        <div class="top-bar-title">
+          <h2 id="page-title">StudyBuddy</h2>
         </div>
-        <div class="progress-log" id="progress-log"></div>
       </div>
-    </section>
 
-    <section class="card reveal" id="chat-section">
-      <div class="card-header">
-        <h2>💬 Chat with Documents</h2>
-        <p>Ask questions about your uploaded materials and get AI-powered answers</p>
-      </div>
-      <div id="chat">
-        <div id="messages"></div>
-        <div class="chat-controls" id="chat-controls">
-          <div class="chat-input-wrapper">
-            <input type="text" id="question" placeholder="Ask something about your documents..." disabled>
-            <button id="ask" class="btn-primary" disabled>
-              <span class="btn-text">Ask</span>
-              <span class="btn-loading" style="display:none;">
-                <div class="spinner"></div>
-                Thinking...
-              </span>
-            </button>
+      <div class="content-container">
+        <!-- Project Header -->
+        <header class="project-header" id="project-header" style="display:none;">
+          <div class="project-info">
+            <h2 id="current-project-name">Project Name</h2>
+            <p id="current-project-description">Project description</p>
+          </div>
+          <div class="project-actions">
+            <button id="delete-project-btn" class="btn-secondary" style="display:none;">Delete Project</button>
           </div>
-          <div class="chat-hint" id="chat-hint">
-            Upload documents first to start chatting
+        </header>
+
+        <!-- Welcome Screen (when no project selected) -->
+        <div class="welcome-screen" id="welcome-screen">
+          <div class="welcome-content">
+            <div class="welcome-icon">🚀</div>
+            <h2>Welcome to StudyBuddy</h2>
+            <p>Create a new project to get started with AI-powered document analysis</p>
+            <button id="welcome-new-project" class="btn-primary">Create Your First Project</button>
           </div>
         </div>
-      </div>
-    </section>
 
-    <footer>
-      <small>StudyBuddy RAG • FastAPI on Hugging Face Spaces • MongoDB Vector • BLIP captions</small>
-    </footer>
+        <!-- Project Content (hidden until project selected) -->
+        <div class="project-content" id="project-content" style="display:none;">
+          <!-- Upload Section -->
+          <section class="card reveal" id="upload-section">
+            <div class="card-header">
+              <h2>📁 Upload Documents</h2>
+              <p>Upload your PDFs and DOCX files to start chatting with your materials</p>
+            </div>
+            <form id="upload-form">
+              <div class="file-drop-zone" id="file-drop-zone">
+                <div class="drop-zone-content">
+                  <div class="drop-zone-icon">📄</div>
+                  <p>Drag & drop files here or click to browse</p>
+                  <span class="file-types">Supports: PDF, DOCX</span>
+                </div>
+                <input type="file" id="files" multiple accept=".pdf,.docx" hidden>
+              </div>
+              <div class="file-list" id="file-list" style="display:none;">
+                <h4>Selected Files:</h4>
+                <div class="file-items" id="file-items"></div>
+              </div>
+              <button type="submit" class="btn-primary" id="upload-btn">
+                <span class="btn-text">Upload Documents</span>
+                <span class="btn-loading" style="display:none;">
+                  <div class="spinner"></div>
+                  Processing...
+                </span>
+              </button>
+            </form>
+            <div class="upload-progress" id="upload-progress" style="display:none;">
+              <div class="progress-header">
+                <h4>Processing Documents</h4>
+                <span class="progress-status" id="progress-status">Initializing...</span>
+              </div>
+              <div class="progress-bar">
+                <div class="progress-fill" id="progress-fill"></div>
+              </div>
+              <div class="progress-log" id="progress-log"></div>
+            </div>
+          </section>
+
+          <!-- Chat Section -->
+          <section class="card reveal" id="chat-section">
+            <div class="card-header">
+              <h2>💬 Chat with Documents</h2>
+              <p>Ask questions about your uploaded materials and get AI-powered answers</p>
+            </div>
+            <div id="chat">
+              <div id="messages"></div>
+              <div class="chat-controls" id="chat-controls">
+                <div class="chat-input-wrapper">
+                  <input type="text" id="question" placeholder="Ask something about your documents..." disabled>
+                  <button id="ask" class="btn-primary" disabled>
+                    <span class="btn-text">Ask</span>
+                    <span class="btn-loading" style="display:none;">
+                      <div class="spinner"></div>
+                      Thinking...
+                    </span>
+                  </button>
+                </div>
+                <div class="chat-hint" id="chat-hint">
+                  Upload documents first to start chatting
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
   </div>
 
   <!-- Auth Modal -->
@@ -139,6 +249,30 @@
     </div>
   </div>
 
+  <!-- New Project Modal -->
+  <div id="new-project-modal" class="modal hidden" aria-hidden="true" role="dialog" aria-labelledby="new-project-title">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 id="new-project-title">Create New Project</h2>
+        <p class="modal-subtitle">Organize your documents into projects</p>
+      </div>
+      <form id="new-project-form">
+        <div class="form-group">
+          <label>Project Name</label>
+          <input type="text" id="project-name" placeholder="e.g., Research Paper, Course Notes" required>
+        </div>
+        <div class="form-group">
+          <label>Description (Optional)</label>
+          <textarea id="project-description" placeholder="Brief description of your project" rows="3"></textarea>
+        </div>
+        <div class="form-actions">
+          <button type="button" id="cancel-project" class="btn-secondary">Cancel</button>
+          <button type="submit" class="btn-primary">Create Project</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
   <!-- Loading Overlay -->
   <div id="loading-overlay" class="loading-overlay hidden">
     <div class="loading-content">
@@ -149,6 +283,8 @@
   </div>
 
   <script src="/static/auth.js"></script>
+  <script src="/static/sidebar.js"></script>
+  <script src="/static/projects.js"></script>
   <script src="/static/script.js"></script>
 </body>
 </html>

static/projects.js

@@ -0,0 +1,298 @@
+// ────────────────────────────── static/projects.js ──────────────────────────────
+(function() {
+  // DOM elements
+  const newProjectBtn = document.getElementById('new-project-btn');
+  const projectList = document.getElementById('project-list');
+  const newProjectModal = document.getElementById('new-project-modal');
+  const newProjectForm = document.getElementById('new-project-form');
+  const cancelProjectBtn = document.getElementById('cancel-project');
+  const welcomeNewProjectBtn = document.getElementById('welcome-new-project');
+  const projectHeader = document.getElementById('project-header');
+  const currentProjectName = document.getElementById('current-project-name');
+  const currentProjectDescription = document.getElementById('current-project-description');
+  const deleteProjectBtn = document.getElementById('delete-project-btn');
+  const welcomeScreen = document.getElementById('welcome-screen');
+  const projectContent = document.getElementById('project-content');
+
+  // State
+  let currentProject = null;
+  let projects = [];
+
+  // Initialize
+  init();
+
+  function init() {
+    setupEventListeners();
+    loadProjects();
+  }
+
+  function setupEventListeners() {
+    newProjectBtn.addEventListener('click', showNewProjectModal);
+    welcomeNewProjectBtn.addEventListener('click', showNewProjectModal);
+    cancelProjectBtn.addEventListener('click', hideNewProjectModal);
+    newProjectForm.addEventListener('submit', handleCreateProject);
+    deleteProjectBtn.addEventListener('click', handleDeleteProject);
+  }
+
+  async function loadProjects() {
+    const user = window.__sb_get_user();
+    if (!user) return;
+
+    try {
+      const response = await fetch(`/projects?user_id=${user.user_id}`);
+      if (response.ok) {
+        const data = await response.json();
+        projects = data.projects || [];
+        renderProjectList();
+        
+        // If no projects, show welcome screen
+        if (projects.length === 0) {
+          showWelcomeScreen();
+        } else {
+          // Select first project by default
+          selectProject(projects[0]);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load projects:', error);
+    }
+  }
+
+  function renderProjectList() {
+    projectList.innerHTML = '';
+    
+    projects.forEach(project => {
+      const projectItem = document.createElement('div');
+      projectItem.className = 'project-item';
+      if (currentProject && currentProject.project_id === project.project_id) {
+        projectItem.classList.add('active');
+      }
+      
+      projectItem.innerHTML = `
+        <div class="project-item-icon">📁</div>
+        <div class="project-item-info">
+          <div class="project-item-name">${project.name}</div>
+          <div class="project-item-description">${project.description || 'No description'}</div>
+        </div>
+        <div class="project-item-actions">
+          <button class="project-item-delete" title="Delete project">🗑️</button>
+        </div>
+      `;
+      
+      // Add click handlers
+      projectItem.addEventListener('click', (e) => {
+        if (!e.target.classList.contains('project-item-delete')) {
+          selectProject(project);
+        }
+      });
+      
+      // Delete button handler
+      const deleteBtn = projectItem.querySelector('.project-item-delete');
+      deleteBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (confirm(`Are you sure you want to delete "${project.name}"? This will remove all associated files and chat history.`)) {
+          deleteProject(project.project_id);
+        }
+      });
+      
+      projectList.appendChild(projectItem);
+    });
+  }
+
+  function selectProject(project) {
+    currentProject = project;
+    
+    // Update UI
+    currentProjectName.textContent = project.name;
+    currentProjectDescription.textContent = project.description || 'No description';
+    
+    // Show project content
+    projectHeader.style.display = 'flex';
+    welcomeScreen.style.display = 'none';
+    projectContent.style.display = 'block';
+    
+    // Update project list
+    renderProjectList();
+    
+    // Load chat history
+    loadChatHistory();
+    
+    // Store current project in localStorage
+    localStorage.setItem('sb_current_project', JSON.stringify(project));
+    
+    // Enable chat if user is authenticated
+    const user = window.__sb_get_user();
+    if (user) {
+      enableChat();
+    }
+    
+    // Update page title to show project name
+    if (window.__sb_update_page_title) {
+      window.__sb_update_page_title(`Project: ${project.name}`);
+    }
+  }
+
+  function showWelcomeScreen() {
+    currentProject = null;
+    projectHeader.style.display = 'none';
+    welcomeScreen.style.display = 'flex';
+    projectContent.style.display = 'none';
+    localStorage.removeItem('sb_current_project');
+  }
+
+  function showNewProjectModal() {
+    newProjectModal.classList.remove('hidden');
+    document.getElementById('project-name').focus();
+  }
+
+  function hideNewProjectModal() {
+    newProjectModal.classList.add('hidden');
+    newProjectForm.reset();
+  }
+
+  async function handleCreateProject(e) {
+    e.preventDefault();
+    
+    const user = window.__sb_get_user();
+    if (!user) {
+      alert('Please sign in to create a project');
+      return;
+    }
+    
+    const name = document.getElementById('project-name').value.trim();
+    const description = document.getElementById('project-description').value.trim();
+    
+    if (!name) {
+      alert('Project name is required');
+      return;
+    }
+    
+    try {
+      const formData = new FormData();
+      formData.append('user_id', user.user_id);
+      formData.append('name', name);
+      formData.append('description', description);
+      
+      const response = await fetch('/projects/create', { method: 'POST', body: formData });
+      
+      if (response.ok) {
+        const project = await response.json();
+        projects.unshift(project);
+        renderProjectList();
+        selectProject(project);
+        hideNewProjectModal();
+      } else {
+        const error = await response.json();
+        alert(error.detail || 'Failed to create project');
+      }
+    } catch (error) {
+      alert('Failed to create project. Please try again.');
+    }
+  }
+
+  async function deleteProject(projectId) {
+    const user = window.__sb_get_user();
+    if (!user) return;
+    
+    try {
+      const response = await fetch(`/projects/${projectId}?user_id=${user.user_id}`, {
+        method: 'DELETE'
+      });
+      
+      if (response.ok) {
+        // Remove from local list
+        projects = projects.filter(p => p.project_id !== projectId);
+        
+        // If this was the current project, clear it
+        if (currentProject && currentProject.project_id === projectId) {
+          currentProject = null;
+          if (projects.length > 0) {
+            selectProject(projects[0]);
+          } else {
+            showWelcomeScreen();
+          }
+        }
+        
+        renderProjectList();
+      } else {
+        alert('Failed to delete project');
+      }
+    } catch (error) {
+      alert('Failed to delete project. Please try again.');
+    }
+  }
+
+  async function loadChatHistory() {
+    if (!currentProject) return;
+    
+    const user = window.__sb_get_user();
+    if (!user) return;
+    
+    try {
+      const response = await fetch(`/chat/history?user_id=${user.user_id}&project_id=${currentProject.project_id}`);
+      if (response.ok) {
+        const data = await response.json();
+        const messages = data.messages || [];
+        
+        // Clear existing messages
+        const messagesContainer = document.getElementById('messages');
+        messagesContainer.innerHTML = '';
+        
+        // Load chat history
+        messages.forEach(msg => {
+          appendMessage(msg.role, msg.content);
+        });
+        
+        // Scroll to bottom
+        if (messages.length > 0) {
+          messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+      }
+    } catch (error) {
+      console.error('Failed to load chat history:', error);
+    }
+  }
+
+  function appendMessage(role, content) {
+    const messagesContainer = document.getElementById('messages');
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `msg ${role}`;
+    messageDiv.textContent = content;
+    messagesContainer.appendChild(messageDiv);
+  }
+
+  function enableChat() {
+    const questionInput = document.getElementById('question');
+    const askBtn = document.getElementById('ask');
+    const chatHint = document.getElementById('chat-hint');
+    
+    if (currentProject) {
+      questionInput.disabled = false;
+      askBtn.disabled = false;
+      chatHint.style.display = 'none';
+    }
+  }
+
+  // Public API
+  window.__sb_get_current_project = () => currentProject;
+  window.__sb_load_chat_history = loadChatHistory;
+  window.__sb_enable_chat = enableChat;
+  window.__sb_load_projects = loadProjects;
+  
+  // Load current project from localStorage on page load
+  window.addEventListener('load', () => {
+    const savedProject = localStorage.getItem('sb_current_project');
+    if (savedProject) {
+      try {
+        const project = JSON.parse(savedProject);
+        // Check if project still exists in our list
+        const exists = projects.find(p => p.project_id === project.project_id);
+        if (exists) {
+          selectProject(exists);
+        }
+      } catch (e) {
+        localStorage.removeItem('sb_current_project');
+      }
+    }
+  });
+})();

static/script.js

@@ -137,10 +137,13 @@
 
   function updateUploadButton() {
     const hasFiles = selectedFiles.length > 0;
-    uploadBtn.disabled = !hasFiles || isUploading;
+    const hasProject = window.__sb_get_current_project && window.__sb_get_current_project();
+    uploadBtn.disabled = !hasFiles || !hasProject || isUploading;
     
-    if (hasFiles) {
+    if (hasFiles && hasProject) {
       uploadBtn.querySelector('.btn-text').textContent = `Upload ${selectedFiles.length} Document${selectedFiles.length > 1 ? 's' : ''}`;
+    } else if (!hasProject) {
+      uploadBtn.querySelector('.btn-text').textContent = 'Select a Project First';
     } else {
       uploadBtn.querySelector('.btn-text').textContent = 'Upload Documents';
     }
@@ -169,6 +172,12 @@
       return;
     }
 
+    const currentProject = window.__sb_get_current_project && window.__sb_get_current_project();
+    if (!currentProject) {
+      alert('Please select a project first');
+      return;
+    }
+
     isUploading = true;
     updateUploadButton();
     showUploadProgress();
@@ -176,6 +185,7 @@
     try {
       const formData = new FormData();
       formData.append('user_id', user.user_id);
+      formData.append('project_id', currentProject.project_id);
       selectedFiles.forEach(file => formData.append('files', file));
 
       const response = await fetch('/upload', { method: 'POST', body: formData });
@@ -266,10 +276,19 @@
       return;
     }
 
+    const currentProject = window.__sb_get_current_project && window.__sb_get_current_project();
+    if (!currentProject) {
+      alert('Please select a project first');
+      return;
+    }
+
     // Add user message
     appendMessage('user', question);
     questionInput.value = '';
 
+    // Save user message to chat history
+    await saveChatMessage(user.user_id, currentProject.project_id, 'user', question);
+
     // Add thinking message
     const thinkingMsg = appendMessage('thinking', 'Thinking...');
     
@@ -281,6 +300,7 @@
     try {
       const formData = new FormData();
       formData.append('user_id', user.user_id);
+      formData.append('project_id', currentProject.project_id);
       formData.append('question', question);
       formData.append('k', '6');
 
@@ -294,6 +314,9 @@
         // Add assistant response
         appendMessage('assistant', data.answer || 'No answer received');
         
+        // Save assistant message to chat history
+        await saveChatMessage(user.user_id, currentProject.project_id, 'assistant', data.answer || 'No answer received');
+        
         // Add sources if available
         if (data.sources && data.sources.length > 0) {
           appendSources(data.sources);
@@ -303,7 +326,9 @@
       }
     } catch (error) {
       thinkingMsg.remove();
-      appendMessage('assistant', `⚠️ Error: ${error.message}`);
+      const errorMsg = `⚠️ Error: ${error.message}`;
+      appendMessage('assistant', errorMsg);
+      await saveChatMessage(user.user_id, currentProject.project_id, 'assistant', errorMsg);
     } finally {
       // Re-enable input
       questionInput.disabled = false;
@@ -313,6 +338,21 @@
     }
   }
 
+  async function saveChatMessage(userId, projectId, role, content) {
+    try {
+      const formData = new FormData();
+      formData.append('user_id', userId);
+      formData.append('project_id', projectId);
+      formData.append('role', role);
+      formData.append('content', content);
+      formData.append('timestamp', Date.now() / 1000);
+      
+      await fetch('/chat/save', { method: 'POST', body: formData });
+    } catch (error) {
+      console.error('Failed to save chat message:', error);
+    }
+  }
+
   function appendMessage(role, text) {
     const messageDiv = document.createElement('div');
     messageDiv.className = `msg ${role}`;
@@ -376,10 +416,23 @@
   function checkUserAuth() {
     const user = window.__sb_get_user();
     if (user) {
-      enableChat();
+      // Check if we have a current project
+      const currentProject = window.__sb_get_current_project && window.__sb_get_current_project();
+      if (currentProject) {
+        enableChat();
+      }
     }
   }
 
+  // Listen for project changes
+  window.addEventListener('projectChanged', () => {
+    updateUploadButton();
+    const currentProject = window.__sb_get_current_project && window.__sb_get_current_project();
+    if (currentProject) {
+      enableChat();
+    }
+  });
+
   // Reveal animations
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {

static/sidebar.js

@@ -0,0 +1,174 @@
+// ────────────────────────────── static/sidebar.js ──────────────────────────────
+(function() {
+  // DOM elements
+  const sidebar = document.getElementById('sidebar');
+  const sidebarToggle = document.getElementById('sidebar-toggle');
+  const mainContent = document.querySelector('.main-content');
+  const pageTitle = document.getElementById('page-title');
+  const menuItems = document.querySelectorAll('.menu-item');
+
+  // State
+  let isSidebarOpen = true;
+  let currentSection = 'projects';
+
+  // Initialize
+  init();
+
+  function init() {
+    setupEventListeners();
+    updatePageTitle();
+    
+    // Check if we should start with collapsed sidebar on mobile
+    if (window.innerWidth <= 1024) {
+      collapseSidebar();
+    }
+  }
+
+  function setupEventListeners() {
+    // Sidebar toggle
+    sidebarToggle.addEventListener('click', toggleSidebar);
+    
+    // Menu navigation
+    menuItems.forEach(item => {
+      item.addEventListener('click', (e) => {
+        e.preventDefault();
+        const section = item.dataset.section;
+        navigateToSection(section);
+      });
+    });
+    
+    // Close sidebar when clicking outside on mobile
+    document.addEventListener('click', (e) => {
+      if (window.innerWidth <= 1024 && isSidebarOpen) {
+        if (!sidebar.contains(e.target) && !sidebarToggle.contains(e.target)) {
+          collapseSidebar();
+        }
+      }
+    });
+    
+    // Handle window resize
+    window.addEventListener('resize', handleResize);
+  }
+
+  function toggleSidebar() {
+    if (isSidebarOpen) {
+      collapseSidebar();
+    } else {
+      expandSidebar();
+    }
+  }
+
+  function expandSidebar() {
+    sidebar.classList.remove('collapsed');
+    mainContent.classList.remove('sidebar-collapsed');
+    isSidebarOpen = true;
+    
+    // Update hamburger icon to close icon
+    updateHamburgerIcon();
+  }
+
+  function collapseSidebar() {
+    sidebar.classList.add('collapsed');
+    mainContent.classList.add('sidebar-collapsed');
+    isSidebarOpen = false;
+    
+    // Update hamburger icon to menu icon
+    updateHamburgerIcon();
+  }
+
+  function updateHamburgerIcon() {
+    const svg = sidebarToggle.querySelector('svg');
+    if (isSidebarOpen) {
+      // Show close icon (X)
+      svg.innerHTML = `
+        <line x1="18" y1="6" x2="6" y2="18"/>
+        <line x1="6" y1="6" x2="18" y2="18"/>
+      `;
+    } else {
+      // Show hamburger icon (3 lines)
+      svg.innerHTML = `
+        <line x1="3" y1="6" x2="21" y2="6"/>
+        <line x1="3" y1="12" x2="21" y2="12"/>
+        <line x1="3" y1="18" x2="21" y2="18"/>
+      `;
+    }
+  }
+
+  function navigateToSection(section) {
+    // Update active menu item
+    menuItems.forEach(item => {
+      item.classList.remove('active');
+      if (item.dataset.section === section) {
+        item.classList.add('active');
+      }
+    });
+    
+    currentSection = section;
+    updatePageTitle();
+    
+    // Handle section-specific actions
+    switch (section) {
+      case 'projects':
+        // Projects section is always visible, no action needed
+        break;
+      case 'files':
+        // Could show file browser or file management interface
+        console.log('Navigate to Files section');
+        break;
+      case 'chat':
+        // Could show chat history or chat interface
+        console.log('Navigate to Chat section');
+        break;
+      case 'analytics':
+        // Could show usage analytics or insights
+        console.log('Navigate to Analytics section');
+        break;
+      case 'settings':
+        // Could show user settings or preferences
+        console.log('Navigate to Settings section');
+        break;
+    }
+    
+    // Close sidebar on mobile after navigation
+    if (window.innerWidth <= 1024) {
+      collapseSidebar();
+    }
+  }
+
+  function updatePageTitle() {
+    const titles = {
+      'projects': 'Projects',
+      'files': 'Files',
+      'chat': 'Chat',
+      'analytics': 'Analytics',
+      'settings': 'Settings'
+    };
+    
+    pageTitle.textContent = titles[currentSection] || 'StudyBuddy';
+  }
+
+  function setPageTitle(title) {
+    pageTitle.textContent = title;
+  }
+
+  function handleResize() {
+    if (window.innerWidth <= 1024) {
+      // On mobile/tablet, start with collapsed sidebar
+      if (!sidebar.classList.contains('collapsed')) {
+        collapseSidebar();
+      }
+    } else {
+      // On desktop, ensure sidebar is visible
+      if (sidebar.classList.contains('collapsed')) {
+        expandSidebar();
+      }
+    }
+  }
+
+  // Public API
+  window.__sb_toggle_sidebar = toggleSidebar;
+  window.__sb_collapse_sidebar = collapseSidebar;
+  window.__sb_expand_sidebar = expandSidebar;
+  window.__sb_navigate_to_section = navigateToSection;
+  window.__sb_update_page_title = setPageTitle;
+})();

static/styles.css

@@ -23,6 +23,7 @@
   --radius: 12px;
   --radius-lg: 16px;
   --radius-xl: 20px;
+  --sidebar-width: 280px;
 }
 
 :root.light {
@@ -57,22 +58,37 @@ body {
   background: var(--bg);
   line-height: 1.6;
   transition: background-color 0.3s ease, color 0.3s ease;
+  overflow-x: hidden;
 }
 
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 24px;
+/* App Layout */
+.app-container {
+  display: flex;
   min-height: 100vh;
 }
 
-/* Header */
-header {
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-width);
+  background: var(--card);
+  border-right: 1px solid var(--border);
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 48px;
-  padding: 24px 0;
+  flex-direction: column;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  transition: transform 0.3s ease;
+  overflow-y: auto;
+}
+
+.sidebar.collapsed {
+  transform: translateX(-100%);
+}
+
+.sidebar-header {
+  padding: 24px;
   border-bottom: 1px solid var(--border);
 }
 
@@ -83,7 +99,7 @@ header {
 }
 
 .logo-icon {
-  font-size: 48px;
+  font-size: 32px;
   background: var(--gradient-primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -91,7 +107,7 @@ header {
 }
 
 .logo-text h1 {
-  font-size: 32px;
+  font-size: 20px;
   font-weight: 800;
   background: var(--gradient-primary);
   -webkit-background-clip: text;
@@ -102,33 +118,321 @@ header {
 
 .logo-text p {
   color: var(--muted);
-  font-size: 16px;
-  margin: 4px 0 0 0;
+  font-size: 12px;
+  margin: 2px 0 0 0;
+}
+
+.sidebar-section {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border);
 }
 
-.auth-controls {
+.sidebar-section:last-child {
+  border-bottom: none;
+  margin-top: auto;
+}
+
+.section-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 16px;
+  margin-bottom: 16px;
 }
 
-.user-info {
+.section-header h3 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Website Menu */
+.website-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.menu-item {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 8px 16px;
-  background: var(--card);
+  padding: 12px 16px;
+  background: transparent;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  color: var(--text-secondary);
+}
+
+.menu-item:hover {
+  background: var(--bg-secondary);
+  border-color: var(--border);
+  color: var(--text);
+}
+
+.menu-item.active {
+  background: var(--gradient-accent);
+  border-color: transparent;
+  color: white;
+}
+
+.menu-icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.menu-item span {
+  font-weight: 500;
+  font-size: 14px;
+}
+
+/* Project List */
+.project-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.project-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--bg-secondary);
   border-radius: var(--radius);
   border: 1px solid var(--border);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.project-item:hover {
+  background: var(--card-hover);
+  border-color: var(--border-light);
+}
+
+.project-item.active {
+  background: var(--gradient-accent);
+  border-color: transparent;
+  color: white;
+}
+
+.project-item-icon {
+  font-size: 16px;
+  opacity: 0.7;
+}
+
+.project-item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.project-item-name {
+  font-weight: 500;
+  font-size: 14px;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.project-item-description {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.project-item.active .project-item-description {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.project-item-actions {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.project-item:hover .project-item-actions {
+  opacity: 1;
+}
+
+.project-item-delete {
+  background: none;
+  border: none;
+  color: var(--error);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: background 0.2s ease;
+}
+
+.project-item-delete:hover {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* User Info */
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
 }
 
 .user-avatar {
-  font-size: 20px;
+  font-size: 24px;
+}
+
+.user-details {
+  flex: 1;
+  min-width: 0;
 }
 
 .user-email {
-  color: var(--text-secondary);
+  display: block;
+  color: var(--text);
   font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.theme-toggle-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+/* Top Bar */
+.top-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 24px;
+  background: var(--card);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.hamburger-menu {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 8px;
+  border-radius: var(--radius);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hamburger-menu:hover {
+  background: var(--bg-secondary);
+  color: var(--text);
+}
+
+.hamburger-menu svg {
+  width: 24px;
+  height: 24px;
+}
+
+.top-bar-title h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+
+/* Main Content */
+.main-content {
+  flex: 1;
+  margin-left: var(--sidebar-width);
+  min-height: 100vh;
+  background: var(--bg);
+  transition: margin-left 0.3s ease;
+}
+
+.main-content.sidebar-collapsed {
+  margin-left: 0;
+}
+
+.content-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+/* Project Header */
+.project-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 32px;
+  padding: 24px;
+  background: var(--card);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border);
+}
+
+.project-info h2 {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.project-info p {
+  color: var(--muted);
+  font-size: 16px;
+  margin: 0;
+}
+
+/* Welcome Screen */
+.welcome-screen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  text-align: center;
+}
+
+.welcome-content {
+  max-width: 480px;
+}
+
+.welcome-icon {
+  font-size: 64px;
+  margin-bottom: 24px;
+}
+
+.welcome-content h2 {
+  font-size: 32px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.welcome-content p {
+  color: var(--muted);
+  font-size: 18px;
+  margin-bottom: 32px;
+  line-height: 1.6;
 }
 
 /* Buttons */
@@ -661,7 +965,8 @@ header {
   font-size: 14px;
 }
 
-.form-group input {
+.form-group input,
+.form-group textarea {
   width: 100%;
   padding: 14px 16px;
   border-radius: var(--radius);
@@ -670,14 +975,28 @@ header {
   color: var(--text);
   font-size: 16px;
   transition: all 0.2s ease;
+  font-family: inherit;
 }
 
-.form-group input:focus {
+.form-group input:focus,
+.form-group textarea:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
+.form-group textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 24px;
+}
+
 .modal-footer {
   padding: 24px 32px;
   text-align: center;
@@ -760,26 +1079,32 @@ header {
   transform: none;
 }
 
-/* Footer */
-footer {
-  text-align: center;
-  color: var(--muted);
-  margin-top: 48px;
-  padding: 24px 0;
-  border-top: 1px solid var(--border);
-  font-size: 14px;
-}
-
 /* Responsive */
-@media (max-width: 768px) {
-  .container {
+@media (max-width: 1024px) {
+  .sidebar {
+    transform: translateX(-100%);
+  }
+  
+  .sidebar.open {
+    transform: translateX(0);
+  }
+  
+  .main-content {
+    margin-left: 0;
+  }
+  
+  .content-container {
     padding: 16px;
   }
   
-  header {
-    flex-direction: column;
-    gap: 24px;
-    text-align: center;
+  .top-bar {
+    padding: 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  :root {
+    --sidebar-width: 100vw;
   }
   
   .card {
@@ -794,6 +1119,45 @@ footer {
   .chat-input-wrapper {
     flex-direction: column;
   }
+  
+  .project-header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+  }
+  
+  .top-bar {
+    padding: 12px 16px;
+  }
+  
+  .top-bar-title h2 {
+    font-size: 18px;
+  }
+  
+  .hamburger-menu {
+    padding: 6px;
+  }
+  
+  .hamburger-menu svg {
+    width: 20px;
+    height: 20px;
+  }
+  
+  .sidebar {
+    width: 100vw;
+  }
+  
+  .sidebar-header {
+    padding: 20px;
+  }
+  
+  .sidebar-section {
+    padding: 16px 20px;
+  }
 }
 
 /* Reduced motion */

utils/chunker.py

@@ -32,7 +32,7 @@ def _by_headings(text: str):
     return parts
 
 
-def build_cards_from_pages(pages: List[Dict[str, Any]], filename: str, user_id: str) -> List[Dict[str, Any]]:
+def build_cards_from_pages(pages: List[Dict[str, Any]], filename: str, user_id: str, project_id: str) -> List[Dict[str, Any]]:
     # Concatenate pages but keep page spans for metadata
     full = ""
     page_markers = []
@@ -74,6 +74,7 @@ def build_cards_from_pages(pages: List[Dict[str, Any]], filename: str, user_id:
         last_page = pages[-1]['page_num'] if pages else 1
         out.append({
             "user_id": user_id,
+            "project_id": project_id,
             "filename": filename,
             "topic_name": topic[:120],
             "summary": summary,

utils/rag.py

@@ -6,13 +6,14 @@ from pymongo import MongoClient, ASCENDING, TEXT
 from pymongo.collection import Collection
 from pymongo.errors import PyMongoError
 import numpy as np
+import logging
 from .logger import get_logger
 
 VECTOR_DIM = 384  # all-MiniLM-L6-v2
 INDEX_NAME = os.getenv("MONGO_VECTOR_INDEX", "vector_index")
 USE_ATLAS_VECTOR = os.getenv("ATLAS_VECTOR", "0") == "1"
-logger = get_logger("RAG", __name__)
 
+logger = get_logger("RAG", __name__)
 
 
 class RAGStore:
@@ -34,30 +35,33 @@ class RAGStore:
         self.chunks.insert_many(cards, ordered=False)
         logger.info(f"Inserted {len(cards)} cards into MongoDB")
 
-    def upsert_file_summary(self, user_id: str, filename: str, summary: str):
+    def upsert_file_summary(self, user_id: str, project_id: str, filename: str, summary: str):
         self.files.update_one(
-            {"user_id": user_id, "filename": filename},
+            {"user_id": user_id, "project_id": project_id, "filename": filename},
             {"$set": {"summary": summary}},
             upsert=True
         )
-        logger.info(f"Upserted summary for {filename} (user {user_id})")
+        logger.info(f"Upserted summary for {filename} (user {user_id}, project {project_id})")
 
     # ── Read ────────────────────────────────────────────────────────────────
-    def list_cards(self, user_id: str, filename: Optional[str], limit: int, skip: int):
-        q = {"user_id": user_id}
+    def list_cards(self, user_id: str, project_id: str, filename: Optional[str], limit: int, skip: int):
+        q = {"user_id": user_id, "project_id": project_id}
         if filename:
             q["filename"] = filename
         cur = self.chunks.find(q, {"embedding": 0}).skip(skip).limit(limit).sort([("_id", ASCENDING)])
         return list(cur)
 
-    def list_files(self, user_id: str) -> List[Dict[str, Any]]:
-        cur = self.files.find({"user_id": user_id}, {"_id": 0})
-        return list(cur)
+    def get_file_summary(self, user_id: str, project_id: str, filename: str):
+        return self.files.find_one({"user_id": user_id, "project_id": project_id, "filename": filename})
 
-    def get_file_summary(self, user_id: str, filename: str):
-        return self.files.find_one({"user_id": user_id, "filename": filename})
+    def list_files(self, user_id: str, project_id: str):
+        """List all files for a project with their summaries"""
+        return list(self.files.find(
+            {"user_id": user_id, "project_id": project_id},
+            {"_id": 0, "filename": 1, "summary": 1}
+        ).sort("filename", ASCENDING))
 
-    def vector_search(self, user_id: str, query_vector: List[float], k: int = 6, filenames: Optional[List[str]] = None):
+    def vector_search(self, user_id: str, project_id: str, query_vector: List[float], k: int = 6, filenames: Optional[List[str]] = None):
         if USE_ATLAS_VECTOR:
             # Atlas Vector Search (requires pre-created index on 'embedding')
             pipeline = [
@@ -69,41 +73,39 @@ class RAGStore:
                             "path": "embedding",
                             "k": k,
                         },
-                        "filter": {"equals": {"path": "user_id", "value": user_id}},
+                        "filter": {
+                            "compound": {
+                                "must": [
+                                    {"equals": {"path": "user_id", "value": user_id}},
+                                    {"equals": {"path": "project_id", "value": project_id}}
+                                ]
+                            }
+                        },
                     }
                 },
                 {"$project": {"embedding": 0, "score": {"$meta": "searchScore"}, "doc": "$$ROOT"}},
+                {"$limit": k},
             ]
-            if filenames:
-                pipeline.append({"$match": {"doc.filename": {"$in": filenames}}})
-            pipeline.append({"$limit": k})
+            # Append hit scoring algorithm
             hits = list(self.chunks.aggregate(pipeline))
             return [{"doc": h["doc"], "score": h["score"]} for h in hits]
-        # Fallback: scan limited sample and compute cosine locally
         else:
-            q = {"user_id": user_id}
-            # Apply filename filter if provided
+            # Fallback: scan limited sample and compute cosine locally
+            q = {"user_id": user_id, "project_id": project_id}
             if filenames:
                 q["filename"] = {"$in": filenames}
-            # Scan limited sample and compute cosine locally    
             sample = list(self.chunks.find(q).limit(max(2000, k*10)))
-            # If no sample, return empty list       
             if not sample:
                 return []
-            # Compute cosine similarity for each sample
             qv = np.array(query_vector, dtype="float32")
-            scores = [] 
-            # Compute cosine similarity for each sample
+            scores = []
             for d in sample:
                 v = np.array(d.get("embedding", [0]*VECTOR_DIM), dtype="float32")
                 denom = (np.linalg.norm(qv) * np.linalg.norm(v)) or 1.0
                 sim = float(np.dot(qv, v) / denom)
                 scores.append((sim, d))
-            # Sort scores by cosine similarity in descending order  
             scores.sort(key=lambda x: x[0], reverse=True)
-            # Get top k sc ores
             top = scores[:k]
-            # Log the results
             logger.info(f"Vector search sample={len(sample)} returned top={len(top)}")
             return [{"doc": d, "score": s} for (s, d) in top]
 
@@ -111,9 +113,9 @@ class RAGStore:
 def ensure_indexes(store: RAGStore):
     # Basic text index for fallback keyword search (optional)
     try:
-        store.chunks.create_index([("user_id", ASCENDING), ("filename", ASCENDING)])
+        store.chunks.create_index([("user_id", ASCENDING), ("project_id", ASCENDING), ("filename", ASCENDING)])
         store.chunks.create_index([("content", TEXT), ("topic_name", TEXT), ("summary", TEXT)], name="text_idx")
-        store.files.create_index([("user_id", ASCENDING), ("filename", ASCENDING)], unique=True)
+        store.files.create_index([("user_id", ASCENDING), ("project_id", ASCENDING), ("filename", ASCENDING)], unique=True)
     except PyMongoError as e:
         logger.warning(f"Index creation warning: {e}")
     # Note: For Atlas Vector, create an Atlas Search index named INDEX_NAME on field "embedding" with vector options.