Upload folder using huggingface_hub

frontend/app.js

@@ -245,10 +245,11 @@ function appendAIBubble(data, scroll = true) {
   // Handle different response structures
   const answer = data.answer || data.response || data.text || JSON.stringify(data);
   const verified = data.verification_status === true || data.verification_status === "verified";
-  const sourceCount = (data.sources || data.source_judgments || []).length;
+  const sources = data.sources || data.source_judgments || [];
+  const sourceCount = sources.length;
   
   const sourcesBtn = sourceCount > 0 ? `
-    <button class="text-[10px] font-bold text-secondary uppercase tracking-wider flex items-center gap-1 hover:underline">
+    <button onclick="showCitationsModal('sources-${Date.now()}')" class="text-[10px] font-bold text-secondary uppercase tracking-wider flex items-center gap-1 hover:underline" data-sources='${JSON.stringify(sources)}'>
       <span class="material-symbols-outlined text-xs">description</span> ${sourceCount} Citation${sourceCount > 1 ? "s" : ""}
     </button>` : "";
 
@@ -265,13 +266,16 @@ function appendAIBubble(data, scroll = true) {
       </div>
       <div class="mt-4 pt-3 border-t border-primary/5 flex gap-3 flex-wrap">
         ${sourcesBtn}
-        <button class="text-[10px] font-bold text-secondary uppercase tracking-wider flex items-center gap-1 hover:underline">
-          <span class="material-symbols-outlined text-xs">picture_as_pdf</span> Export
-        </button>
       </div>
     </div>
   `;
   messagesList.appendChild(div);
+  
+  // Attach click handler to citations button if it exists
+  if (sourceCount > 0) {
+    div.querySelector('button').onclick = () => showCitationsModal(sources);
+  }
+  
   console.log("AI message appended to DOM");
   if (scroll) scrollBottom();
 }
@@ -381,3 +385,44 @@ function loadAnalytics() {
     })
     .catch(err => console.error("Analytics load failed:", err));
 }
+
+function showCitationsModal(sources) {
+  console.log("showCitationsModal called with sources:", sources);
+  if (!sources || sources.length === 0) {
+    alert("No citations available");
+    return;
+  }
+  
+  // Build citations list
+  let citationsHTML = "";
+  sources.forEach((src, idx) => {
+    const title = src.title || src.name || "Unknown Case";
+    const year = src.year || src.date || "";
+    const citation = src.citation || src.ref || "";
+    const court = src.court || "";
+    
+    citationsHTML += `<div class="pb-3 border-b border-primary/5 last:border-0"><p class="text-sm font-medium text-primary">${escHtml(title)}</p><p class="text-xs text-primary/60">${escHtml(citation)} ${year ? `(${year})` : ""}</p>${court ? `<p class="text-xs text-primary/50">${escHtml(court)}</p>` : ""}</div>`;
+  });
+  
+  // Create modal
+  const modal = document.createElement("div");
+  modal.className = "fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50";
+  modal.onclick = () => modal.remove();
+  modal.innerHTML = `
+    <div class="clay-card p-6 max-w-2xl w-full mx-4 max-h-[70vh] overflow-y-auto" onclick="event.stopPropagation()">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="font-headline text-xl font-bold text-primary flex items-center gap-2">
+          <span class="material-symbols-outlined text-secondary">description</span>
+          Citations
+        </h2>
+        <button onclick="this.closest('.fixed').remove()" class="text-primary/40 hover:text-primary">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+      </div>
+      <div class="space-y-3">
+        ${citationsHTML}
+      </div>
+    </div>
+  `;
+  document.body.appendChild(modal);
+}

frontend/court/court.html

@@ -79,60 +79,60 @@
 
   <!-- Nav -->
   <header class="fixed top-0 left-0 right-0 z-50 bg-[#F5F0E8]/90 backdrop-blur-md shadow-[0_8px_20px_rgba(0,0,0,0.08)]">
-    <nav class="flex justify-between items-center w-full px-12 py-4 max-w-[1920px] mx-auto">
-      <div class="flex items-center gap-8">
-        <a href="/static/index.html" class="font-serif text-2xl font-bold text-primary italic">NyayaSetu</a>
-        <div class="hidden md:flex gap-8 items-center">
-          <a href="/static/index.html" class="font-serif font-bold text-lg text-primary/70 hover:text-primary transition-colors">Research</a>
-          <span class="font-serif font-bold text-lg text-secondary border-b-2 border-secondary pb-1">Moot Court</span>
+    <nav class="flex justify-between items-center w-full px-8 py-3 max-w-[1920px] mx-auto">
+      <div class="flex items-center gap-6">
+        <a href="/static/index.html" class="font-serif text-xl font-bold text-primary italic">NyayaSetu</a>
+        <div class="hidden md:flex gap-6 items-center">
+          <a href="/static/index.html" class="font-serif font-bold text-sm text-primary/70 hover:text-primary transition-colors">Research</a>
+          <span class="font-serif font-bold text-sm text-secondary border-b-2 border-secondary pb-0.5">Moot Court</span>
         </div>
       </div>
       <div class="flex items-center gap-4">
-        <span class="font-mono text-xs text-primary/40 bg-surface-container px-3 py-1 rounded-full">Educational Simulation Only</span>
+        <span class="font-mono text-[10px] text-primary/40 bg-surface-container px-2 py-0.5 rounded-full">Educational Simulation Only</span>
       </div>
     </nav>
   </header>
 
-  <main class="relative z-10 pt-32 pb-20 px-12 grid grid-cols-12 gap-12 max-w-7xl mx-auto items-center min-h-screen">
+  <main class="relative z-10 pt-28 pb-12 px-8 grid grid-cols-12 gap-8 max-w-6xl mx-auto items-center min-h-screen">
     <!-- Centre card -->
     <div class="col-span-12 lg:col-span-7 flex justify-center items-center">
-      <div class="clay-card p-12 lg:p-16 rounded-xl w-full max-w-2xl text-center">
+      <div class="clay-card p-8 lg:p-10 rounded-xl w-full max-w-2xl text-center">
         <!-- Gavel icon -->
-        <div class="mb-8 inline-flex items-center justify-center w-20 h-20 rounded-full bg-surface-container clay-puffy">
-          <span class="material-symbols-outlined text-secondary text-4xl" style="font-variation-settings:'FILL' 1">gavel</span>
+        <div class="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full bg-surface-container clay-puffy">
+          <span class="material-symbols-outlined text-secondary text-3xl" style="font-variation-settings:'FILL' 1">gavel</span>
         </div>
-        <h1 class="font-serif text-5xl lg:text-6xl font-bold text-primary tracking-tight mb-4">NYAYASETU MOOT COURT</h1>
-        <p class="font-sans text-lg text-primary/60 mb-12 uppercase tracking-widest">Practice. Argue. Prepare.</p>
+        <h1 class="font-serif text-4xl lg:text-5xl font-bold text-primary tracking-tight mb-3">MOOT COURT</h1>
+        <p class="font-sans text-base text-primary/60 mb-8 uppercase tracking-widest">Practice. Argue. Master.</p>
 
-        <div class="flex flex-col sm:flex-row gap-6 justify-center mb-10">
-          <button onclick="showScreen('setup')" class="clay-btn-primary flex items-center justify-center gap-3 px-8 py-5 rounded-xl font-sans font-bold text-lg text-white">
-            <span class="material-symbols-outlined">scale</span>
-            Start New Case
+        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
+          <button onclick="showScreen('setup')" class="clay-btn-primary flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-sans font-bold text-sm text-white">
+            <span class="material-symbols-outlined text-lg">scale</span>
+            New Case
           </button>
-          <button onclick="showImportFlow()" class="clay-btn-secondary flex items-center justify-center gap-3 border-2 border-secondary/30 px-8 py-5 rounded-xl font-sans font-bold text-lg text-secondary">
-            <span class="material-symbols-outlined">folder_open</span>
-            Continue Research Session
+          <button onclick="showImportFlow()" class="clay-btn-secondary flex items-center justify-center gap-2 border-2 border-secondary/30 px-6 py-3 rounded-lg font-sans font-bold text-sm text-secondary">
+            <span class="material-symbols-outlined text-lg">folder_open</span>
+            Continue
           </button>
         </div>
-        <a onclick="showScreen('sessions')" class="text-secondary font-sans font-bold text-base hover:underline flex items-center justify-center gap-2 mb-12 cursor-pointer">
+        <a onclick="showScreen('sessions')" class="text-secondary font-sans font-bold text-sm hover:underline flex items-center justify-center gap-2 mb-6 cursor-pointer">
           <span class="material-symbols-outlined text-sm">list_alt</span>
-          View Past Sessions
+          Past Sessions
         </a>
-        <div class="pt-8 border-t border-primary/5">
-          <p class="text-primary/40 text-sm font-sans italic">For educational simulation only. Not legal advice.</p>
+        <div class="pt-4 border-t border-primary/5">
+          <p class="text-primary/40 text-xs font-sans italic">For educational simulation only. Not legal advice.</p>
         </div>
       </div>
     </div>
 
     <!-- Recent sessions sidebar -->
-    <div class="col-span-12 lg:col-span-5 flex flex-col gap-6">
-      <div class="flex items-center justify-between px-4">
-        <h3 class="font-serif text-2xl font-bold text-primary">Recent Sessions</h3>
-        <span class="text-xs font-mono text-secondary bg-secondary-fixed/30 px-2 py-1 rounded">LIVE</span>
+    <div class="col-span-12 lg:col-span-5 flex flex-col gap-4">
+      <div class="flex items-center justify-between px-3">
+        <h3 class="font-serif text-lg font-bold text-primary">Recent Sessions</h3>
+        <span class="text-[10px] font-mono text-secondary bg-secondary-fixed/30 px-1.5 py-0.5 rounded">LIVE</span>
       </div>
-      <div id="recent-sessions-list" class="space-y-4">
-        <div class="clay-card p-6 rounded-xl text-center text-primary/40 text-sm font-sans">
-          Loading sessions...
+      <div id="recent-sessions-list" class="space-y-3">
+        <div class="clay-card p-4 rounded-lg text-center text-primary/40 text-xs font-sans">
+          Loading...
         </div>
       </div>
     </div>
@@ -359,9 +359,9 @@
     </div>
   </nav>
 
-  <div class="pt-20 flex h-screen">
+  <div class="pt-16 flex h-screen">
     <!-- Left panel: Bench + Concessions + Precedents -->
-    <aside class="w-72 flex-shrink-0 flex flex-col gap-4 p-4 overflow-y-auto bg-[#F5F0E8] shadow-[inset_-4px_0_8px_rgba(0,0,0,0.04)]">
+    <aside class="w-56 flex-shrink-0 flex flex-col gap-3 p-3 overflow-y-auto bg-primary/5 border-r border-primary/10 shadow-[inset_-4px_0_8px_rgba(0,0,0,0.04)]">
 
       <!-- Judge panel -->
       <div class="clay-card p-5 rounded-xl">