feat: working pipeline, PDF export, progress bar, structured UI

agent/agent.py

@@ -51,21 +51,19 @@ def run_literature_scout(queries):
     all_papers = {}
     def fetch_one(q):
         return fetch_pubmed(q, max_results=5)
-    with ThreadPoolExecutor(max_workers=5) as executor:
-        futures = {executor.submit(fetch_one, q): q for q in queries}
-        for future in as_completed(futures):
-            results = future.result()
-            for r in results:
-                pmid = r["pmid"]
-                if pmid not in all_papers:
-                    all_papers[pmid] = r
+    import time
+    for q in queries:
+        time.sleep(0.4)
+        for r in fetch_one(q):
+            if r["pmid"] not in all_papers:
+                all_papers[r["pmid"]] = r
     return all_papers
 
 
 def run_evidence_synthesiser(user_question, papers):
     llm = get_llm()
     parts = []
-    for pmid, p in list(papers.items())[:20]:
+    for pmid, p in list(papers.items())[:6]:
         title = p.get("title", "N/A")
         abstract = p["abstract"]
         parts.append("[PMID " + pmid + "]\nTitle: " + title + "\n" + abstract)

app.py

@@ -1,17 +1,16 @@
 import sys, os
 sys.path.append(os.path.dirname(os.path.abspath(__file__)))
-
-from flask import Flask, render_template, request, jsonify
-from agent.agent import build_agent
+from flask import Flask, render_template, request, jsonify, send_file
+from agent.agent import run_pipeline
+from reportlab.lib.pagesizes import A4
+from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
+from reportlab.lib.units import mm
+from reportlab.lib import colors
+from reportlab.platypus import SimpleDocTemplate, Paragraph, Spacer, HRFlowable
+from reportlab.lib.enums import TA_LEFT
+import io
 
 app = Flask(__name__)
-agent_executor = None
-
-def get_agent():
-    global agent_executor
-    if agent_executor is None:
-        agent_executor = build_agent()
-    return agent_executor
 
 @app.route("/")
 def index():
@@ -24,12 +23,102 @@ def query():
     if not user_query:
         return jsonify({"error": "Empty query"}), 400
     try:
-        agent = get_agent()
-        result = agent.invoke({"messages": [{"role": "user", "content": user_query}]})
-        response = result["messages"][-1].content
-        return jsonify({"response": response})
+        result = run_pipeline(user_query)
+        return jsonify({
+            "synthesis": result["synthesis"],
+            "citations": result["citations"],
+            "paper_count": result["paper_count"],
+            "queries": result["queries"]
+        })
     except Exception as e:
         return jsonify({"error": str(e)}), 500
 
+@app.route("/export-pdf", methods=["POST"])
+def export_pdf():
+    data = request.get_json()
+    synthesis = data.get("synthesis", "")
+    citations = data.get("citations", "")
+    query = data.get("query", "Biomedical Research Query")
+    paper_count = data.get("paper_count", 0)
+
+    buf = io.BytesIO()
+    doc = SimpleDocTemplate(buf, pagesize=A4,
+        leftMargin=20*mm, rightMargin=20*mm,
+        topMargin=20*mm, bottomMargin=20*mm)
+
+    accent = colors.HexColor("#00e5a0")
+    dark = colors.HexColor("#111827")
+
+    title_style = ParagraphStyle("title",
+        fontName="Helvetica-Bold", fontSize=18,
+        textColor=dark, spaceAfter=4)
+    meta_style = ParagraphStyle("meta",
+        fontName="Helvetica", fontSize=9,
+        textColor=colors.HexColor("#5a6a7a"), spaceAfter=16)
+    section_label_style = ParagraphStyle("sec_label",
+        fontName="Helvetica-Bold", fontSize=10,
+        textColor=accent, spaceBefore=14, spaceAfter=4)
+    body_style = ParagraphStyle("body",
+        fontName="Helvetica", fontSize=10,
+        leading=16, textColor=dark, spaceAfter=6)
+    cite_style = ParagraphStyle("cite",
+        fontName="Helvetica", fontSize=8,
+        leading=13, textColor=colors.HexColor("#444444"),
+        spaceAfter=4)
+
+    story = []
+    story.append(Paragraph("ARIA — Autonomous Research Intelligence Agent", title_style))
+    story.append(Paragraph(
+        f"Query: {query}  |  {paper_count} papers retrieved  |  Groq LLaMA-3.1",
+        meta_style))
+    story.append(HRFlowable(width="100%", thickness=1,
+        color=colors.HexColor("#1e2936"), spaceAfter=16))
+
+    SECTIONS = [
+        ("## Background", "Background"),
+        ("## Key Findings", "Key Findings"),
+        ("## Level of Evidence", "Level of Evidence"),
+        ("## Conflicting Evidence", "Conflicting Evidence"),
+        ("## Research Gaps", "Research Gaps"),
+        ("## Clinical Implications", "Clinical Implications"),
+    ]
+    for marker, label in SECTIONS:
+        start = synthesis.find(marker)
+        if start == -1:
+            continue
+        content_start = start + len(marker)
+        next_markers = [synthesis.find(m) for m, _ in SECTIONS if synthesis.find(m) > start]
+        end = min(next_markers) if next_markers else len(synthesis)
+        text = synthesis[content_start:end].strip()
+        if not text:
+            continue
+        story.append(Paragraph(label.upper(), section_label_style))
+        for para in text.split("\n"):
+            para = para.strip()
+            if para:
+                story.append(Paragraph(para, body_style))
+
+    story.append(Spacer(1, 8*mm))
+    story.append(HRFlowable(width="100%", thickness=1,
+        color=colors.HexColor("#1e2936"), spaceAfter=8))
+    story.append(Paragraph("REFERENCES", section_label_style))
+    for line in citations.split("\n"):
+        line = line.strip()
+        if line:
+            story.append(Paragraph(line, cite_style))
+
+    story.append(Spacer(1, 6*mm))
+    story.append(Paragraph(
+        "AI-generated synthesis — verify against primary sources before clinical use.",
+        ParagraphStyle("disclaimer", fontName="Helvetica-Oblique",
+            fontSize=8, textColor=colors.HexColor("#999999"))))
+
+    doc.build(story)
+    buf.seek(0)
+    safe_query = "".join(c for c in query[:40] if c.isalnum() or c in " -_").strip()
+    filename = f"ARIA_{safe_query}.pdf".replace(" ", "_")
+    return send_file(buf, mimetype="application/pdf",
+        as_attachment=True, download_name=filename)
+
 if __name__ == "__main__":
     app.run(debug=True, port=5000)

retrieval/pubmed.py

@@ -1,21 +1,88 @@
+import re
 from Bio import Entrez
 
 Entrez.email = "azlaanmohammad66@gmail.com"
 
-def fetch_pubmed(query: str, max_results: int = 5) -> list[dict]:
+
+def parse_abstract_block(pmid, block):
+    title = "Title unavailable"
+    authors = "Authors unavailable"
+    journal = "Journal unavailable"
+    year = "n.d."
+
+    lines = block.split("\n")
+
+    # Journal is line 0 (may wrap to line 1 before first blank line)
+    # Title is the first non-empty line AFTER the first blank line
+    # Authors is the first non-empty line AFTER the second blank line
+
+    # Collect journal lines (everything up to first blank)
+    journal_lines = []
+    i = 0
+    while i < len(lines) and lines[i].strip():
+        journal_lines.append(lines[i].strip())
+        i += 1
+
+    journal_raw = " ".join(journal_lines)
+    journal_raw = re.sub(r"^\d+\.\s*", "", journal_raw)
+    year_match = re.search(r"\b(19|20)\d{2}\b", journal_raw)
+    if year_match:
+        year = year_match.group(0)
+    journal = re.split(r"\.\s+\d{4}", journal_raw)[0].strip().rstrip(".")
+
+    # Skip blank lines, collect title (next non-empty block)
+    while i < len(lines) and not lines[i].strip():
+        i += 1
+    title_lines = []
+    while i < len(lines) and lines[i].strip():
+        title_lines.append(lines[i].strip())
+        i += 1
+    if title_lines:
+        title = " ".join(title_lines).rstrip(".")
+
+    # Skip blank lines, collect authors (next non-empty block)
+    while i < len(lines) and not lines[i].strip():
+        i += 1
+    author_lines = []
+    while i < len(lines) and lines[i].strip():
+        author_lines.append(lines[i].strip())
+        i += 1
+    if author_lines:
+        raw_authors = re.sub(r"\(\d+\)", "", " ".join(author_lines)).strip().rstrip(".,")
+        author_list = [a.strip() for a in raw_authors.split(",") if a.strip()]
+        if len(author_list) > 3:
+            authors = ", ".join(author_list[:3]) + " et al."
+        else:
+            authors = ", ".join(author_list)
+
+    return {
+        "pmid": pmid,
+        "title": title,
+        "authors": authors,
+        "journal": journal,
+        "year": year,
+        "abstract": block
+    }
+
+
+def fetch_pubmed(query: str, max_results: int = 5) -> list:
     handle = Entrez.esearch(db="pubmed", term=query, retmax=max_results)
     record = Entrez.read(handle)
     ids = record["IdList"]
     if not ids:
         return []
-
     handle = Entrez.efetch(db="pubmed", id=ids, rettype="abstract", retmode="text")
     raw = handle.read()
-
     abstracts = [a.strip() for a in raw.strip().split("\n\n\n") if a.strip()]
-    return [{"pmid": pmid, "abstract": ab} for pmid, ab in zip(ids, abstracts)]
+    return [parse_abstract_block(pmid, ab) for pmid, ab in zip(ids, abstracts)]
+
 
 if __name__ == "__main__":
-    results = fetch_pubmed("epilepsy seizure detection machine learning")
+    results = fetch_pubmed("epilepsy seizure detection machine learning", max_results=2)
     for r in results:
-        print(f"PMID: {r['pmid']}\n{r['abstract']}\n{'-'*60}")
+        print(f"PMID:    {r['pmid']}")
+        print(f"Title:   {r['title']}")
+        print(f"Authors: {r['authors']}")
+        print(f"Journal: {r['journal']}")
+        print(f"Year:    {r['year']}")
+        print("-" * 60)

run.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+cd ~/glitch-squad-biomedical-assistant
+source venv/bin/activate
+pkill -f "python app.py" 2>/dev/null
+pkill -f "python3 app.py" 2>/dev/null
+fuser -k 5000/tcp 2>/dev/null
+sleep 1
+python app.py

templates/index.html

@@ -3,38 +3,623 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Glitch Squad Biomedical Assistant</title>
-    <link rel="stylesheet" href="/static/style.css">
+    <title>ARIA — Biomedical Research Intelligence</title>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600&family=IBM+Plex+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg: #090c10;
+            --surface: #0d1117;
+            --border: #1e2936;
+            --accent: #00e5a0;
+            --accent-dim: #00e5a020;
+            --text: #c9d1d9;
+            --text-dim: #5a6a7a;
+            --text-bright: #e6edf3;
+            --red: #ff4d6d;
+            --yellow: #f0b429;
+            --mono: 'IBM Plex Mono', monospace;
+            --sans: 'IBM Plex Sans', sans-serif;
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: var(--sans);
+            font-size: 15px;
+            line-height: 1.6;
+            min-height: 100vh;
+        }
+
+        /* Grid background */
+        body::before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            background-image:
+                linear-gradient(var(--border) 1px, transparent 1px),
+                linear-gradient(90deg, var(--border) 1px, transparent 1px);
+            background-size: 40px 40px;
+            opacity: 0.3;
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 40px 24px 80px;
+            position: relative;
+            z-index: 1;
+        }
+
+        /* Header */
+        header {
+            margin-bottom: 48px;
+            border-bottom: 1px solid var(--border);
+            padding-bottom: 24px;
+        }
+
+        .logo {
+            font-family: var(--mono);
+            font-size: 11px;
+            letter-spacing: 0.2em;
+            color: var(--accent);
+            text-transform: uppercase;
+            margin-bottom: 8px;
+        }
+
+        h1 {
+            font-family: var(--mono);
+            font-size: 32px;
+            font-weight: 600;
+            color: var(--text-bright);
+            letter-spacing: -0.02em;
+        }
+
+        h1 span { color: var(--accent); }
+
+        .subtitle {
+            font-size: 13px;
+            color: var(--text-dim);
+            font-family: var(--mono);
+            margin-top: 6px;
+        }
+
+        /* Search */
+        .search-section { margin-bottom: 32px; }
+
+        .input-wrapper {
+            position: relative;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            background: var(--surface);
+            transition: border-color 0.2s;
+        }
+
+        .input-wrapper:focus-within {
+            border-color: var(--accent);
+            box-shadow: 0 0 0 1px var(--accent)40;
+        }
+
+        .input-label {
+            font-family: var(--mono);
+            font-size: 10px;
+            letter-spacing: 0.15em;
+            color: var(--accent);
+            padding: 12px 16px 0;
+            text-transform: uppercase;
+        }
+
+        textarea {
+            width: 100%;
+            background: transparent;
+            border: none;
+            color: var(--text-bright);
+            font-family: var(--sans);
+            font-size: 15px;
+            line-height: 1.6;
+            padding: 8px 16px 12px;
+            resize: none;
+            outline: none;
+        }
+
+        textarea::placeholder { color: var(--text-dim); }
+
+        .search-actions {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 12px;
+            border-top: 1px solid var(--border);
+        }
+
+        .hint {
+            font-family: var(--mono);
+            font-size: 11px;
+            color: var(--text-dim);
+        }
+
+        button#submitBtn {
+            background: var(--accent);
+            color: #000;
+            border: none;
+            border-radius: 3px;
+            padding: 8px 20px;
+            font-family: var(--mono);
+            font-size: 12px;
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            cursor: pointer;
+            transition: opacity 0.2s;
+        }
+
+        button#submitBtn:hover { opacity: 0.85; }
+        button#submitBtn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+        /* Status pipeline */
+        .pipeline {
+            display: none;
+            margin-bottom: 32px;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .pipeline.visible { display: block; }
+
+        .pipeline-header {
+            background: var(--surface);
+            padding: 10px 16px;
+            font-family: var(--mono);
+            font-size: 11px;
+            color: var(--text-dim);
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .progress-wrap {
+            width: 160px;
+            height: 4px;
+            background: var(--border);
+            border-radius: 2px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            width: 0%;
+            background: var(--accent);
+            border-radius: 2px;
+            transition: width 0.6s ease;
+            box-shadow: 0 0 8px var(--accent);
+        }
+        .progress-pct {
+            font-family: var(--mono);
+            font-size: 11px;
+            color: var(--accent);
+            min-width: 36px;
+            text-align: right;
+        }
+
+        .stage {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px 16px;
+            border-bottom: 1px solid var(--border);
+            font-family: var(--mono);
+            font-size: 12px;
+            color: var(--text-dim);
+            transition: color 0.3s;
+        }
+
+        .stage:last-child { border-bottom: none; }
+
+        .stage.active { color: var(--accent); }
+        .stage.done { color: var(--text); }
+
+        .stage-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: var(--border);
+            flex-shrink: 0;
+            transition: background 0.3s;
+        }
+
+        .stage.active .stage-dot {
+            background: var(--accent);
+            box-shadow: 0 0 8px var(--accent);
+            animation: pulse 1s infinite;
+        }
+
+        .stage.done .stage-dot { background: var(--text-dim); }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+
+        /* Results */
+        .results { display: none; }
+        .results.visible { display: block; }
+
+        .meta-bar {
+            display: flex;
+            gap: 16px;
+            margin-bottom: 24px;
+            flex-wrap: wrap;
+        }
+
+        .badge {
+            font-family: var(--mono);
+            font-size: 11px;
+            padding: 4px 10px;
+            border-radius: 2px;
+            border: 1px solid var(--border);
+            color: var(--text-dim);
+        }
+
+        .badge.green {
+            border-color: var(--accent);
+            color: var(--accent);
+            background: var(--accent-dim);
+        }
+
+        /* Synthesis sections */
+        .synthesis { margin-bottom: 32px; }
+
+        .section {
+            margin-bottom: 2px;
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .section-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 12px 16px;
+            background: var(--surface);
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .section-header:hover { background: #111820; }
+
+        .section-tag {
+            font-family: var(--mono);
+            font-size: 10px;
+            letter-spacing: 0.15em;
+            text-transform: uppercase;
+            color: var(--accent);
+            min-width: 180px;
+        }
+
+        .section-chevron {
+            margin-left: auto;
+            font-size: 10px;
+            color: var(--text-dim);
+            transition: transform 0.2s;
+        }
+
+        .section.open .section-chevron { transform: rotate(180deg); }
+
+        .section-body {
+            display: none;
+            padding: 16px;
+            border-top: 1px solid var(--border);
+            font-size: 14px;
+            line-height: 1.75;
+            color: var(--text);
+        }
+
+        .section.open .section-body { display: block; }
+
+        /* Citations */
+        .citations-block {
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .citations-header {
+            padding: 12px 16px;
+            background: var(--surface);
+            font-family: var(--mono);
+            font-size: 11px;
+            letter-spacing: 0.15em;
+            text-transform: uppercase;
+            color: var(--text-dim);
+            border-bottom: 1px solid var(--border);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .citations-list {
+            display: none;
+            padding: 16px;
+        }
+
+        .citations-list.open { display: block; }
+
+        .citation-item {
+            font-family: var(--mono);
+            font-size: 12px;
+            color: var(--text-dim);
+            padding: 8px 0;
+            border-bottom: 1px solid var(--border);
+            line-height: 1.6;
+        }
+
+        .citation-item:last-child { border-bottom: none; }
+
+        .citation-pmid {
+            color: var(--accent);
+            font-weight: 600;
+        }
+
+        /* Error */
+        .error-box {
+            display: none;
+            padding: 16px;
+            border: 1px solid var(--red);
+            border-radius: 4px;
+            background: #ff4d6d10;
+            font-family: var(--mono);
+            font-size: 13px;
+            color: var(--red);
+            margin-bottom: 24px;
+        }
+
+        .error-box.visible { display: block; }
+
+        /* Footer */
+        footer {
+            margin-top: 64px;
+            padding-top: 24px;
+            border-top: 1px solid var(--border);
+            font-family: var(--mono);
+            font-size: 11px;
+            color: var(--text-dim);
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+    </style>
 </head>
 <body>
-    <div class="container">
-        <header>
-            <h1>Glitch Squad</h1>
-            <p class="subtitle">Biomedical AI Research Assistant</p>
-        </header>
-
-        <main>
-            <div class="search-box">
-                <textarea id="queryInput" placeholder="Ask a biomedical research question..." rows="3"></textarea>
-                <button id="submitBtn" onclick="submitQuery()">Search Literature</button>
-            </div>
+<div class="container">
+    <header>
+        <div class="logo">AMD Developer Hackathon 2026 &mdash; Glitch Squad</div>
+        <h1>ARIA <span>//</span> Autonomous Research Intelligence Agent</h1>
+        <div class="subtitle">Multi-agent biomedical literature synthesis &middot; PubMed &middot; Groq LLaMA-3.1</div>
+    </header>
 
-            <div id="statusBar" class="status-bar hidden">
-                <span class="spinner"></span>
-                <span id="statusText">Retrieving PubMed literature...</span>
+    <div class="search-section">
+        <div class="input-wrapper">
+            <div class="input-label">Clinical Question</div>
+            <textarea id="queryInput" rows="3" placeholder="e.g. What machine learning methods are most effective for epilepsy detection from EEG signals?"></textarea>
+            <div class="search-actions">
+                <span class="hint">Enter to submit &middot; Shift+Enter for new line</span>
+                <button id="submitBtn" onclick="submitQuery()">Run Pipeline</button>
             </div>
+        </div>
+    </div>
 
-            <div id="responseBox" class="response-box hidden">
-                <h2>Research Summary</h2>
-                <div id="responseText"></div>
+    <div class="pipeline" id="pipeline">
+        <div class="pipeline-header">
+            <span>Pipeline Status</span>
+            <div style="display:flex;align-items:center;gap:10px;">
+                <div class="progress-wrap"><div class="progress-fill" id="progressFill"></div></div>
+                <span class="progress-pct" id="progressPct">0%</span>
             </div>
-        </main>
+        </div>
+        <div class="stage" id="stage1"><div class="stage-dot"></div>Query Architect &mdash; generating MeSH-optimised PubMed queries</div>
+        <div class="stage" id="stage2"><div class="stage-dot"></div>Literature Scout &mdash; fetching and deduplicating papers</div>
+        <div class="stage" id="stage3"><div class="stage-dot"></div>Evidence Synthesiser &mdash; building structured synthesis</div>
+        <div class="stage" id="stage4"><div class="stage-dot"></div>Citation Builder &mdash; formatting references</div>
+    </div>
 
-        <footer>
-            <p>Powered by LangGraph + Llama 3.2 + PubMed &mdash; AMD Developer Hackathon 2026</p>
-            <p class="disclaimer">This is an AI model and may make mistakes. Always verify responses against primary sources.</p>
-        </footer>
+    <div class="error-box" id="errorBox"></div>
+
+    <div class="results" id="results">
+        <div class="meta-bar" id="metaBar"></div>
+        <div class="synthesis" id="synthesis"></div>
+        <div style="display:flex;justify-content:flex-end;margin-bottom:12px;">
+    <button id="exportBtn" onclick="exportPDF()" style="background:transparent;border:1px solid var(--accent);color:var(--accent);padding:7px 18px;font-family:var(--mono);font-size:11px;border-radius:3px;cursor:pointer;letter-spacing:0.08em;">Export PDF</button>
+</div>
+<div style="display:flex;justify-content:flex-end;margin-bottom:12px;">
+    <button id="exportBtn" onclick="exportPDF()" style="background:transparent;border:1px solid var(--accent);color:var(--accent);padding:7px 18px;font-family:var(--mono);font-size:11px;border-radius:3px;cursor:pointer;letter-spacing:0.08em;">Export PDF</button>
+</div>
+<div class="citations-block">
+            <div class="citations-header" onclick="toggleCitations()">
+                <span>References</span><span id="citChevron">&#9660;</span>
+            </div>
+            <div class="citations-list" id="citationsList"></div>
+        </div>
     </div>
-    <script src="/static/script.js"></script>
+
+    <footer>
+        <span>Powered by LangGraph &middot; Groq LLaMA-3.1 &middot; PubMed NCBI</span>
+        <span>AI-generated synthesis &mdash; verify against primary sources</span>
+    </footer>
+</div>
+
+<script>
+const SECTIONS = [
+    { key: "## Background", label: "Background" },
+    { key: "## Key Findings", label: "Key Findings" },
+    { key: "## Level of Evidence", label: "Level of Evidence" },
+    { key: "## Conflicting Evidence", label: "Conflicting Evidence" },
+    { key: "## Research Gaps", label: "Research Gaps" },
+    { key: "## Clinical Implications", label: "Clinical Implications" },
+];
+
+function parseSynthesis(text) {
+    const result = {};
+    for (let i = 0; i < SECTIONS.length; i++) {
+        const start = text.indexOf(SECTIONS[i].key);
+        if (start === -1) continue;
+        const contentStart = start + SECTIONS[i].key.length;
+        const nextSection = i + 1 < SECTIONS.length ? text.indexOf(SECTIONS[i + 1].key) : -1;
+        result[SECTIONS[i].label] = nextSection === -1
+            ? text.slice(contentStart).trim()
+            : text.slice(contentStart, nextSection).trim();
+    }
+    return result;
+}
+
+const STAGE_PCT = { 1: 10, 2: 35, 3: 70, 4: 90, 5: 100 };
+
+function setStage(n) {
+    for (let i = 1; i <= 4; i++) {
+        const el = document.getElementById("stage" + i);
+        el.classList.remove("active", "done");
+        if (i < n) el.classList.add("done");
+        else if (i === n) el.classList.add("active");
+    }
+    const pct = STAGE_PCT[n] || 0;
+    document.getElementById("progressFill").style.width = pct + "%";
+    document.getElementById("progressPct").textContent = pct + "%";
+}
+
+function toggleSection(el) {
+    el.classList.toggle("open");
+}
+
+function toggleCitations() {
+    document.getElementById("citationsList").classList.toggle("open");
+    document.getElementById("citChevron").textContent =
+        document.getElementById("citationsList").classList.contains("open") ? "▲" : "▼";
+}
+
+async function submitQuery() {
+    const q = document.getElementById("queryInput").value.trim();
+    if (!q) return;
+
+    const btn = document.getElementById("submitBtn");
+    btn.disabled = true;
+
+    document.getElementById("results").classList.remove("visible");
+    document.getElementById("errorBox").classList.remove("visible");
+    document.getElementById("pipeline").classList.add("visible");
+    setStage(1);
+
+    // Simulate stage progression while waiting
+    const delays = [0, 3000, 8000, 14000];
+    delays.forEach((d, i) => setTimeout(() => setStage(i + 1), d));
+
+    try {
+        const res = await fetch("/query", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ query: q })
+        });
+        const data = await res.json();
+        lastResult = data;
+        lastQuery = q;
+
+        setStage(5); // all done
+
+        if (data.error) {
+            document.getElementById("errorBox").textContent = "Error: " + data.error;
+            document.getElementById("errorBox").classList.add("visible");
+            return;
+        }
+
+        // Meta bar
+        const meta = document.getElementById("metaBar");
+        meta.innerHTML = `
+            <div class="badge green">${data.paper_count} papers retrieved</div>
+            <div class="badge">${data.queries ? data.queries.length : 0} PubMed queries</div>
+            <div class="badge">LLaMA-3.1-8B via Groq</div>
+        `;
+
+        // Synthesis sections
+        const sections = parseSynthesis(data.synthesis);
+        const synthEl = document.getElementById("synthesis");
+        synthEl.innerHTML = "";
+        SECTIONS.forEach(s => {
+            if (!sections[s.label]) return;
+            const div = document.createElement("div");
+            div.className = "section open";
+            div.innerHTML = `
+                <div class="section-header" onclick="toggleSection(this.parentElement)">
+                    <span class="section-tag">${s.label}</span>
+                    <span class="section-chevron">▲</span>
+                </div>
+                <div class="section-body">${sections[s.label].replace(/\n/g, '<br>')}</div>
+            `;
+            synthEl.appendChild(div);
+        });
+
+        // Citations
+        const citList = document.getElementById("citationsList");
+        citList.innerHTML = "";
+        citList.classList.add("open");
+        data.citations.split("\n").forEach(line => {
+            if (!line.trim()) return;
+            const pmidMatch = line.match(/PMID:\s*(\d+)/);
+            const pmid = pmidMatch ? pmidMatch[1] : null;
+            const div = document.createElement("div");
+            div.className = "citation-item";
+            div.innerHTML = pmid
+                ? line.replace(/PMID:\s*\d+/, `<span class="citation-pmid">PMID: ${pmid}</span>`)
+                : line;
+            citList.appendChild(div);
+        });
+
+        document.getElementById("results").classList.add("visible");
+
+    } catch (err) {
+        document.getElementById("errorBox").textContent = "Network error: " + err.message;
+        document.getElementById("errorBox").classList.add("visible");
+    } finally {
+        btn.disabled = false;
+    }
+}
+
+document.getElementById("queryInput").addEventListener("keydown", e => {
+    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submitQuery(); }
+});
+
+let lastResult = null;
+let lastQuery = '';
+
+async function exportPDF() {
+    const btn = document.getElementById('exportBtn');
+    btn.textContent = 'Generating...';
+    btn.disabled = true;
+    try {
+        const res = await fetch('/export-pdf', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                synthesis: lastResult.synthesis,
+                citations: lastResult.citations,
+                query: lastQuery,
+                paper_count: lastResult.paper_count
+            })
+        });
+        const blob = await res.blob();
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url; a.download = 'ARIA_report.pdf'; a.click();
+        URL.revokeObjectURL(url);
+    } finally {
+        btn.textContent = 'Export PDF';
+        btn.disabled = false;
+    }
+}
+</script>
 </body>
-</html>
+</html>