feat: UI Polish and AI Search Summaries

- Add mobile-responsive navbar with hamburger menu
- Redesign index hero section and empty saved state
- Polish paper cards with year pills and citation icons
- Add AI Overview generation via Groq using llama-3.3-70b-versatile
- Async load AI summaries in search results via HTMX
- Add site footer

app/groq_svc.py

@@ -158,3 +158,69 @@ def _run_rewrite(client, query: str) -> str:
         timeout=2.0,  # Hard 2s timeout — search must not stall
     )
     return response.choices[0].message.content
+
+
+# ── AI Search Summaries ──────────────────────────────────────────────────────
+
+async def generate_search_summary(query: str, papers: list[dict]) -> str | None:
+    """
+    Generate a short 3-4 sentence AI summary synthesizing the top papers.
+    Uses llama-3.3-70b-versatile via Groq.
+    
+    Returns:
+        Summary HTML string, or None if error or not enough papers.
+    """
+    if not papers or len(papers) < 2:
+        return None
+        
+    client = _get_client()
+    if client is None:
+        return None
+        
+    # Build context from top 5 papers max
+    context_lines = []
+    for i, p in enumerate(papers[:5]):
+        context_lines.append(f"Paper {i+1}: {p['title']}\nAbstract: {p['abstract'][:800]}...")
+    context_str = "\n\n".join(context_lines)
+    
+    prompt = f"""You are an expert AI research assistant. 
+The user searched for: "{query}"
+
+Here are the top papers returned for this query:
+{context_str}
+
+Task: Write a concise, synthesized overview (3-4 sentences max) that answers the user's query based ONLY on these papers. 
+Format: Return plain text with basic markdown (bolding key terms is good). DO NOT start with "Here is a summary" or similar filler. DO NOT output bullet points. Be direct, educational, and authoritative."""
+
+    try:
+        import asyncio
+        loop = asyncio.get_event_loop()
+        result = await loop.run_in_executor(None, _run_summary, client, prompt)
+        
+        summary = result.strip()
+        if not summary:
+            return None
+            
+        # Basic markdown to HTML (bolding)
+        import re
+        summary_html = re.sub(r'\*\*(.*?)\*\*', r'<strong>\1</strong>', summary)
+        
+        return summary_html
+        
+    except Exception as e:
+        print(f"[groq_svc] Summary generation failed: {e}")
+        return None
+
+
+def _run_summary(client, prompt: str) -> str:
+    """Sync helper: call Groq chat completion for summaries with 4s timeout."""
+    response = client.chat.completions.create(
+        messages=[
+            {"role": "user", "content": prompt},
+        ],
+        model="llama-3.3-70b-versatile",
+        temperature=0.3,
+        max_tokens=150,
+        timeout=4.0,  # 4s timeout so it doesn't hang indefinitely
+    )
+    return response.choices[0].message.content

app/routers/search.py

@@ -112,3 +112,44 @@ async def search(
 
     resp.set_cookie(COOKIE_NAME, user_id, max_age=365 * 24 * 3600, httponly=True)
     return resp
+
+
+@router.get("/api/search/summary", response_class=HTMLResponse)
+async def search_summary(
+    request: Request,
+    q: str = "",
+    ids: str = "",
+):
+    """
+    Generate an AI Overview for a given search query and set of arXiv IDs.
+    Called asynchronously by HTMX after search results load.
+    """
+    if not q or not ids:
+        return ""
+        
+    arxiv_ids = [aid.strip() for aid in ids.split(",") if aid.strip()]
+    if not arxiv_ids:
+        return ""
+
+    from app import groq_svc
+    
+    # Fetch metadata for the top papers (need abstracts for summary)
+    try:
+        meta = await turso_svc.fetch_metadata_batch(arxiv_ids[:5])
+        papers = [meta[aid] for aid in arxiv_ids[:5] if aid in meta]
+    except Exception as e:
+        print(f"[search] Turso fetch failed for summary: {e}")
+        return ""
+
+    if not papers:
+        return ""
+
+    summary_html = await groq_svc.generate_search_summary(q, papers)
+    if not summary_html:
+        return ""
+
+    return templates.TemplateResponse(
+        request,
+        "partials/ai_summary.html",
+        {"summary_html": summary_html},
+    )

app/static/styles.css

@@ -282,3 +282,102 @@ html {
 .seed-card:hover {
   border-color: rgba(99, 102, 241, 0.3);
 }
+
+/* ── UI Polish Additions ─────────────────────────────────────────────── */
+
+/* Mobile Menu */
+.mobile-menu-toggle:checked ~ .mobile-menu {
+  display: flex;
+}
+.mobile-menu {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: rgba(20, 20, 30, 0.95);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  padding: 1rem;
+  z-index: 50;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+}
+[data-theme="light"] .mobile-menu {
+  background: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+
+/* AI Summary Card */
+.ai-summary-card {
+  position: relative;
+  background: rgba(30, 30, 45, 0.5);
+  border-radius: 12px;
+  padding: 1.25rem;
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+[data-theme="light"] .ai-summary-card {
+  background: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.ai-summary-card::before {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #6366f1, #a78bfa, #6366f1);
+  background-size: 200% auto;
+  animation: shimmer 3s linear infinite;
+}
+.ai-summary-card .typewriter {
+  display: inline;
+}
+
+/* Paper Card Meta */
+.year-pill {
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: rgba(148, 163, 184, 0.15);
+  color: #94a3b8;
+}
+.year-pill.recent {
+  background: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+}
+[data-theme="light"] .year-pill {
+  background: rgba(148, 163, 184, 0.2);
+  color: #475569;
+}
+[data-theme="light"] .year-pill.recent {
+  background: rgba(34, 197, 94, 0.2);
+  color: #16a34a;
+}
+
+.cite-count {
+  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #94a3b8;
+}
+[data-theme="light"] .cite-count {
+  color: #64748b;
+}
+
+/* Footer */
+.app-footer {
+  border-top: 1px solid rgba(255,255,255,0.06);
+  margin-top: 4rem;
+  padding: 2rem 0;
+  text-align: center;
+  color: rgba(255,255,255,0.4);
+  font-size: 0.8rem;
+}
+[data-theme="light"] .app-footer {
+  border-top: 1px solid rgba(0,0,0,0.06);
+  color: rgba(0,0,0,0.4);
+}

app/templates/base.html

@@ -35,30 +35,59 @@
 <body class="bg-base-200 min-h-screen">
 
   <!-- Navbar -->
-  <nav class="navbar navbar-glass sticky top-0 z-50 px-6">
+  <nav class="navbar navbar-glass sticky top-0 z-50 px-4 md:px-6">
     <div class="flex-1">
       <a href="/" class="flex items-center gap-2 text-xl">
         <span class="brand-text">ResearchIT</span>
       </a>
     </div>
-    <div class="flex-none flex items-center gap-1">
+    
+    <!-- Desktop Menu -->
+    <div class="hidden md:flex flex-none items-center gap-1">
       <a href="/" class="btn btn-ghost btn-sm">Home</a>
       <a href="/search" class="btn btn-ghost btn-sm">Search</a>
       <a href="/saved" class="btn btn-ghost btn-sm">Saved</a>
       <!-- Theme toggle -->
-      <button id="theme-toggle" class="btn btn-ghost btn-sm btn-circle" title="Toggle theme"
+      <button id="theme-toggle" class="btn btn-ghost btn-sm btn-circle ml-2" title="Toggle theme"
               onclick="toggleTheme()">
         <span id="theme-icon-dark" class="hidden">☀️</span>
         <span id="theme-icon-light" class="hidden">🌙</span>
       </button>
     </div>
+
+    <!-- Mobile Menu Toggle -->
+    <div class="flex-none md:hidden">
+      <label class="btn btn-ghost btn-sm btn-circle swap swap-rotate">
+        <input type="checkbox" class="mobile-menu-toggle hidden" />
+        <svg class="swap-off fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"/></svg>
+        <svg class="swap-on fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"/></svg>
+      </label>
+      <!-- Mobile Menu Dropdown -->
+      <div class="mobile-menu hidden">
+        <a href="/" class="btn btn-ghost justify-start">Home</a>
+        <a href="/search" class="btn btn-ghost justify-start">Search</a>
+        <a href="/saved" class="btn btn-ghost justify-start">Saved</a>
+        <div class="divider my-1"></div>
+        <button class="btn btn-ghost justify-start" onclick="toggleTheme()">
+          <span class="theme-text-dark hidden">Switch to Light Mode ☀️</span>
+          <span class="theme-text-light hidden">Switch to Dark Mode 🌙</span>
+        </button>
+      </div>
+    </div>
   </nav>
 
   <!-- Main content -->
-  <main class="container mx-auto px-4 py-6 max-w-4xl">
+  <main class="container mx-auto px-4 py-6 md:py-8 max-w-4xl min-h-[70vh]">
     {% block content %}{% endblock %}
   </main>
 
+  <footer class="app-footer">
+    <div class="container mx-auto px-4 max-w-4xl">
+      <p>Built with ❤️ — <span class="brand-text font-semibold">ResearchIT</span></p>
+      <p class="mt-2 text-xs opacity-60">AI-powered arXiv recommendations using Qdrant, Zilliz & Turso.</p>
+    </div>
+  </footer>
+
   <!-- Theme toggle logic -->
   <script>
     function toggleTheme() {
@@ -72,8 +101,16 @@
 
     function updateThemeIcon() {
       const theme = document.documentElement.getAttribute('data-theme');
-      document.getElementById('theme-icon-dark').classList.toggle('hidden', theme !== 'dark');
-      document.getElementById('theme-icon-light').classList.toggle('hidden', theme !== 'light');
+      
+      // Desktop icons
+      const iconDark = document.getElementById('theme-icon-dark');
+      const iconLight = document.getElementById('theme-icon-light');
+      if (iconDark) iconDark.classList.toggle('hidden', theme !== 'dark');
+      if (iconLight) iconLight.classList.toggle('hidden', theme !== 'light');
+      
+      // Mobile menu text
+      document.querySelectorAll('.theme-text-dark').forEach(el => el.classList.toggle('hidden', theme !== 'dark'));
+      document.querySelectorAll('.theme-text-light').forEach(el => el.classList.toggle('hidden', theme !== 'light'));
     }
 
     // Set icon on load

app/templates/index.html

@@ -6,21 +6,35 @@
 <div class="space-y-8 fade-in">
 
   <!-- Hero / search bar -->
-  <div class="card bg-base-100 shadow-md rounded-xl p-6">
-    <h1 class="text-2xl font-bold mb-1">
+  <div class="py-8 md:py-12 text-center">
+    <h1 class="text-4xl md:text-5xl font-extrabold mb-4 tracking-tight">
       <span class="brand-text">Discover Research</span>
     </h1>
-    <p class="text-sm text-base-content/60 mb-4">
-      Search arXiv, save papers you like — get personalised recommendations.
+    <p class="text-base md:text-lg text-base-content/70 mb-8 max-w-xl mx-auto">
+      Search 1.6M+ arXiv papers, get AI summaries, and save papers to build your personalized recommendation feed.
     </p>
-    <form action="/search" method="get" class="flex gap-2">
-      <input type="text"
-             name="q"
-             placeholder="e.g. transformer attention mechanism"
-             class="input input-bordered flex-1"
-             autofocus />
-      <button class="btn btn-primary" type="submit">Search</button>
-    </form>
+    
+    <div class="max-w-2xl mx-auto relative group">
+      <div class="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl blur opacity-20 group-hover:opacity-40 transition duration-500"></div>
+      <div class="card bg-base-100 shadow-xl rounded-xl relative">
+        <form action="/search" method="get" class="flex gap-2 p-2">
+          <input type="text"
+                 name="q"
+                 placeholder="e.g. transformer attention mechanism..."
+                 class="input input-lg w-full bg-transparent border-none focus:outline-none focus:ring-0 text-base md:text-lg px-4"
+                 autofocus />
+          <button class="btn btn-primary btn-lg rounded-lg" type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+            Search
+          </button>
+        </form>
+      </div>
+    </div>
+    
+    <div class="flex justify-center gap-4 mt-6 text-sm text-base-content/50">
+      <span class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> Qdrant Vector Search</span>
+      <span class="flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> Groq AI Summaries</span>
+    </div>
   </div>
 
   <!-- Recommendations section -->

app/templates/partials/ai_summary.html

@@ -0,0 +1,17 @@
+{# Partial: AI Summary Card #}
+{% if summary_html %}
+<div class="ai-summary-card mb-6">
+  <div class="flex items-center gap-2 mb-3">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
+    </svg>
+    <span class="font-semibold text-sm brand-text">AI Overview</span>
+  </div>
+  <div class="text-sm text-base-content/90 leading-relaxed typewriter">
+    {{ summary_html | safe }}
+  </div>
+  <div class="mt-3 flex justify-end">
+    <span class="text-[10px] text-base-content/40 uppercase tracking-wide">Powered by Groq</span>
+  </div>
+</div>
+{% endif %}

app/templates/partials/paper_card.html

@@ -49,12 +49,30 @@
   </div>
 
   <!-- Meta: arXiv ID + year + authors (max 3) + citations -->
-  <div class="text-xs text-base-content/50 mono">
-    [{{ paper.arxiv_id }}]
-    {% if paper.published %} · {{ paper.published[:4] }}{% endif %}
-    {% if authors_list %} · <span class="font-sans">{{ authors_list[:3] | join(", ") }}{% if authors_list | length > 3 %} et al. ({{ authors_list | length }} authors){% endif %}</span>{% endif %}
+  <div class="flex flex-wrap items-center gap-2 mb-1">
+    {% set p_year = (paper.year | string) if paper.year else (paper.published[:4] if paper.published else "") %}
+    {% if p_year %}
+      <span class="year-pill {% if p_year in ['2025', '2026', '2024'] %}recent{% endif %}">{{ p_year }}</span>
+    {% endif %}
+    
+    <span class="text-xs text-base-content/40 mono font-medium">[{{ paper.arxiv_id }}]</span>
+    
+    {% if authors_list %}
+      <span class="text-xs text-base-content/60 mx-1">•</span>
+      <span class="text-xs text-base-content/70">
+        {{ authors_list[:3] | join(", ") }}
+        {% if authors_list | length > 3 %}
+          <span class="opacity-60 italic">et al. ({{ authors_list | length }} authors)</span>
+        {% endif %}
+      </span>
+    {% endif %}
+
     {% if paper.citation_count %}
-    · <span class="font-medium text-base-content/70 font-sans" title="{{ paper.influential_citations|default(0) }} influential">📊 {{ paper.citation_count }} citations</span>
+      <span class="text-xs text-base-content/60 mx-1 hidden sm:inline">•</span>
+      <span class="cite-count" title="{{ paper.influential_citations|default(0) }} influential">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
+        {{ paper.citation_count }} citations
+      </span>
     {% endif %}
   </div>
 

app/templates/partials/search_results.html

@@ -1,7 +1,7 @@
 {# Partial: list of search result cards #}
 {% if papers %}
   <div class="space-y-3">
-    <div class="flex flex-col gap-1 mb-4">
+    <div class="flex flex-col gap-2 mb-4">
       <div class="flex justify-between items-center text-sm text-base-content/50">
         <span>{{ papers | length }} results for "{{ query }}"</span>
         {% if search_meta and search_meta.total_time_ms is defined %}
@@ -9,28 +9,41 @@
         {% endif %}
       </div>
       
-      {# Groq rewrite result — show both rewritten AND skipped cases #}
+      {# Groq rewrite result #}
       {% if search_meta %}
         {% if search_meta.rewritten_query %}
-        <div class="alert bg-base-200 border-l-4 border-primary p-3 text-sm flex gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-primary shrink-0 h-5 w-5" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-          <div class="flex-1">
-            <span class="font-semibold">Groq expanded query:</span> "{{ search_meta.rewritten_query }}"
-            <span class="text-xs text-base-content/50 ml-2">({{ search_meta.groq_time_ms }}ms)</span>
-          </div>
-        </div>
-        {% elif search_meta.groq_status is defined and search_meta.groq_status != 'rewritten' %}
-        <div class="alert bg-base-200/50 border-l-4 border-base-300 p-3 text-sm flex gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-base-content/30 shrink-0 h-5 w-5" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-          <div class="flex-1 text-base-content/50">
-            <span class="font-semibold">Groq rewrite:</span> {{ search_meta.groq_status }}
-            — searching with original query as-is
-          </div>
+        <div class="text-xs text-base-content/60 bg-base-200/50 rounded px-2 py-1 inline-flex w-fit items-center gap-1 border border-base-300/50">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
+          Searched for: <span class="font-medium">"{{ search_meta.rewritten_query }}"</span>
         </div>
         {% endif %}
       {% endif %}
     </div>
 
+    {# AI Summary Slot #}
+    {% if query and papers %}
+    {% set arxiv_ids = papers | map(attribute='arxiv_id') | join(',') %}
+    <div id="ai-summary-container"
+         hx-get="/api/search/summary?q={{ query | urlencode }}&ids={{ arxiv_ids }}"
+         hx-trigger="load"
+         hx-swap="innerHTML">
+      <!-- Skeleton loader for AI summary -->
+      <div class="ai-summary-card">
+        <div class="flex items-center gap-2 mb-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
+          </svg>
+          <span class="font-semibold text-sm brand-text">AI Overview</span>
+        </div>
+        <div class="space-y-2 animate-pulse opacity-60">
+          <div class="h-3 bg-base-content/20 rounded w-full"></div>
+          <div class="h-3 bg-base-content/20 rounded w-5/6"></div>
+          <div class="h-3 bg-base-content/20 rounded w-4/6"></div>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+
     {% for paper in papers %}
       {% set position = loop.index0 %}
       {% set source = "search" %}
@@ -40,48 +53,51 @@
 
   {# Pipeline timing breakdown #}
   {% if search_meta %}
-  <div class="mt-4 p-3 rounded-lg bg-base-200/50 border border-base-300/30">
-    <div class="flex items-center gap-2 mb-2">
-      <span class="text-xs font-semibold text-base-content/60">⚡ Search Pipeline Breakdown</span>
+  <details class="mt-6 group">
+    <summary class="text-xs font-semibold text-base-content/50 cursor-pointer list-none flex items-center gap-1 w-fit">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 transition-transform group-open:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+      Search Pipeline Details
       {% if search_meta.total_time_ms is defined %}
-        <span class="text-xs text-base-content/40">({{ search_meta.total_time_ms }}ms total)</span>
-      {% endif %}
-    </div>
-    <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs font-mono text-base-content/50">
-      {% if search_meta.groq_time_ms is defined %}
-        <span>Groq Rewrite: <span class="text-primary">{{ search_meta.groq_time_ms }}ms</span>
-          {% if search_meta.groq_status is defined and search_meta.groq_status != 'rewritten' %}
-            <span class="text-warning/60">({{ search_meta.groq_status }})</span>
-          {% endif %}
-        </span>
-      {% endif %}
-      {% if search_meta.encode_time_ms is defined %}
-        <span>BGE-M3 Encode: <span class="text-primary">{{ search_meta.encode_time_ms }}ms</span></span>
-      {% endif %}
-      {% if search_meta.retrieval_time_ms is defined %}
-        <span>Qdrant+Zilliz Retrieval: <span class="text-primary">{{ search_meta.retrieval_time_ms }}ms</span>
-          {% if search_meta.n_retrieval_tasks is defined %}
-            <span class="text-base-content/30">({{ search_meta.n_retrieval_tasks }} parallel tasks)</span>
-          {% endif %}
-        </span>
-      {% endif %}
-      {% if search_meta.rrf_time_ms is defined %}
-        <span>RRF Fusion: <span class="text-primary">{{ search_meta.rrf_time_ms }}ms</span></span>
-      {% endif %}
-      {% if search_meta.bge_rerank_time_ms is defined %}
-        <span>BGE Rerank: <span class="text-primary">{{ search_meta.bge_rerank_time_ms }}ms</span></span>
-      {% endif %}
-      {% if search_meta.turso_boost_fetch_ms is defined %}
-        <span>Turso Title Fetch: <span class="text-primary">{{ search_meta.turso_boost_fetch_ms }}ms</span></span>
-        <span>Rerank Compute: <span class="text-primary">{{ search_meta.rerank_compute_ms }}ms</span></span>
-      {% elif search_meta.rerank_time_ms is defined %}
-        <span>Title+Citation Rerank: <span class="text-primary">{{ search_meta.rerank_time_ms }}ms</span></span>
-      {% endif %}
-      {% if search_meta.meta_time_ms is defined %}
-        <span>Final Metadata: <span class="text-primary">{{ search_meta.meta_time_ms }}ms</span></span>
+        <span class="font-normal opacity-70">({{ search_meta.total_time_ms }}ms)</span>
       {% endif %}
+    </summary>
+    <div class="mt-2 p-3 rounded-lg bg-base-200/50 border border-base-300/30">
+      <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs font-mono text-base-content/60">
+        {% if search_meta.groq_time_ms is defined %}
+          <span>Groq Rewrite: <span class="text-primary">{{ search_meta.groq_time_ms }}ms</span>
+            {% if search_meta.groq_status is defined and search_meta.groq_status != 'rewritten' %}
+              <span class="text-warning/60">({{ search_meta.groq_status }})</span>
+            {% endif %}
+          </span>
+        {% endif %}
+        {% if search_meta.encode_time_ms is defined %}
+          <span>BGE-M3 Encode: <span class="text-primary">{{ search_meta.encode_time_ms }}ms</span></span>
+        {% endif %}
+        {% if search_meta.retrieval_time_ms is defined %}
+          <span>Qdrant+Zilliz: <span class="text-primary">{{ search_meta.retrieval_time_ms }}ms</span>
+            {% if search_meta.n_retrieval_tasks is defined %}
+              <span class="text-base-content/30">({{ search_meta.n_retrieval_tasks }} parallel tasks)</span>
+            {% endif %}
+          </span>
+        {% endif %}
+        {% if search_meta.rrf_time_ms is defined %}
+          <span>RRF Fusion: <span class="text-primary">{{ search_meta.rrf_time_ms }}ms</span></span>
+        {% endif %}
+        {% if search_meta.bge_rerank_time_ms is defined %}
+          <span>BGE Rerank: <span class="text-primary">{{ search_meta.bge_rerank_time_ms }}ms</span></span>
+        {% endif %}
+        {% if search_meta.turso_boost_fetch_ms is defined %}
+          <span>Turso Title Fetch: <span class="text-primary">{{ search_meta.turso_boost_fetch_ms }}ms</span></span>
+          <span>Rerank Compute: <span class="text-primary">{{ search_meta.rerank_compute_ms }}ms</span></span>
+        {% elif search_meta.rerank_time_ms is defined %}
+          <span>Title+Citation Rerank: <span class="text-primary">{{ search_meta.rerank_time_ms }}ms</span></span>
+        {% endif %}
+        {% if search_meta.meta_time_ms is defined %}
+          <span>Final Metadata: <span class="text-primary">{{ search_meta.meta_time_ms }}ms</span></span>
+        {% endif %}
+      </div>
     </div>
-  </div>
+  </details>
   {% endif %}
 
 {% elif query %}

app/templates/saved.html

@@ -23,15 +23,17 @@
     </div>
   {% else %}
     <!-- Empty state -->
-    <div class="card bg-base-100 shadow-md rounded-xl p-10 text-center space-y-3">
-      <div class="text-5xl">📚</div>
-      <p class="text-lg font-semibold text-base-content/70">No saved papers yet</p>
-      <p class="text-sm text-base-content/50">
-        Search for papers and click <strong>⭐ Save</strong> on ones you find interesting.
-        Once you save a paper it will appear here.
+    <div class="card bg-base-100/50 border border-base-200/50 shadow-sm rounded-xl p-12 text-center space-y-4 max-w-lg mx-auto mt-10">
+      <div class="text-6xl mb-4 opacity-80">📚</div>
+      <h2 class="text-xl font-semibold brand-text">No saved papers yet</h2>
+      <p class="text-sm text-base-content/60 leading-relaxed">
+        Building your personal research feed starts here. Search for topics you care about and save papers you find interesting to teach the AI your preferences.
       </p>
-      <div class="pt-2">
-        <a href="/search" class="btn btn-primary btn-sm">Start Searching</a>
+      <div class="pt-4">
+        <a href="/search" class="btn btn-primary shadow-lg shadow-primary/20">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+          Start Searching
+        </a>
       </div>
     </div>
   {% endif %}