feat: implement ChatGPT style UI, streaming generation, math/code blocks, citations & multi-model fallback

.env.example

@@ -1 +1,2 @@
 GROQ_API_KEY=your_groq_api_key_here
+HF_API_KEY=your_key_here

config/settings.py

@@ -80,6 +80,7 @@ TOP_K_RERANK = 5                                    # Keep top 5 after reranking
 # LLM SETTINGS
 # ------------------------------------------
 GROQ_API_KEY = os.getenv('GROQ_API_KEY')            # Loaded from .env
+HF_API_KEY = os.getenv('HF_API_KEY')
 LLM_MODEL_NAME = 'llama-3.3-70b-versatile'          # Groq model ID
 LLM_TEMPERATURE = 0.1                               # Low = More factual/consistent 
 LLM_MAX_TOKENS = 2048                               # Max response tokens

frontend-next/app/globals.css

@@ -926,3 +926,46 @@ select {
     color: var(--accent);
     transform: translateY(-2px);
 }
+
+/* -- UI Redesign -- */
+.layout-wrapper { display: flex; height: 100vh; width: 100vw; overflow: hidden; }
+.sidebar { width: 260px; background: rgba(5, 7, 10, 0.95); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; padding: 10px; z-index: 100; flex-shrink: 0; transition: transform 0.3s ease; }
+@media (max-width: 768px) { .sidebar { position: fixed; height: 100vh; transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } }
+.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; }
+.new-chat-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border-radius: 8px; background: rgba(255,255,255,0.05); color: #fff; font-weight: 500; font-size: 0.9rem; margin-bottom: 20px; transition: 0.2s; border: 1px solid rgba(255,255,255,0.1); }
+.new-chat-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
+.history-item { padding: 10px; border-radius: 6px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.2s; }
+.history-item:hover, .history-item.active { background: rgba(255,255,255,0.05); color: #fff; }
+
+.main-chat-area { flex: 1; display: flex; flex-direction: column; position: relative; height: 100vh; }
+.chat-container { flex: 1; overflow-y: auto; padding: 80px 20px 140px 20px; display: flex; flex-direction: column; gap: 24px; max-width: 900px; margin: 0 auto; width: 100%; }
+
+.message-user { align-self: flex-end; background: rgba(255,255,255,0.1); color: #fff; padding: 12px 18px; border-radius: 20px; border-bottom-right-radius: 4px; max-width: 80%; }
+.message-ai { align-self: flex-start; background: transparent; color: #e2e8f0; border-radius: 12px; width: 100%; }
+
+.bottom-input-bar { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(3,5,8,0.9) 20%); padding: 20px; display: flex; justify-content: center; z-index: 50; pointer-events: none; }
+@media (min-width: 769px) { .bottom-input-bar { left: 260px; } }
+.bottom-input-bar-inner { width: 100%; max-width: 800px; display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
+
+.hamburger { display: none; }
+@media (max-width: 768px) { .hamburger { display: flex; z-index: 200; position: fixed; top: 16px; left: 16px; width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,0.1); align-items: center; justify-content: center; backdrop-filter: blur(10px); } }
+
+/* Code Block */
+.code-header { display: flex; justify-content: space-between; align-items: center; background: #282c34; padding: 4px 12px; border-top-left-radius: 8px; border-top-right-radius: 8px; font-family: monospace; font-size: 0.8rem; color: #abb2bf; }
+.code-wrapper { border-radius: 8px; overflow: hidden; margin: 12px 0; border: 1px solid rgba(255,255,255,0.1); }
+.code-wrapper pre { margin: 0 !important; border-radius: 0 !important; }
+
+/* Citations Pill */
+.citation-badge { display: inline-flex; align-items: center; justify-content: center; background: #3b82f6; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 12px; font-weight: 600; cursor: pointer; text-decoration: none; vertical-align: super; line-height: 1; margin: 0 2px; }
+.citation-badge:hover { background: #2563eb; }
+
+/* Feedback row */
+.feedback-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
+.star-btn { color: #4b5563; transition: 0.2s; cursor: pointer; }
+.star-btn:hover, .star-btn.active { color: #f59e0b; }
+.feedback-input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; color: #fff; flex: 1; }
+.feedback-submit { background: var(--accent); color: #000; padding: 6px 16px; border-radius: 6px; font-weight: 600; font-size: 0.85rem; }
+
+.blinking-cursor { display: inline-block; width: 8px; height: 16px; background: #fff; animation: blink 1s step-end infinite; }
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+

frontend-next/app/layout.tsx

@@ -2,6 +2,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import 'katex/dist/katex.min.css';
 
 const inter = Inter({ subsets: ["latin"] });
 

frontend-next/app/page.tsx

@@ -1,30 +1,19 @@
-"use client";
+'use client';
 
 import { useState, useRef, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { InlineMath, BlockMath } from 'react-katex';
-import 'katex/dist/katex.min.css';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import {
-    BookOpen,
-    Clock,
-    Zap,
-    AlertCircle,
-    CheckCircle,
-    ExternalLink,
-    Sparkles,
-    Brain,
-    ArrowRight,
-    Layers,
-    Fingerprint,
-    Send,
-    Info,
-    X,
-    Server,
-    Activity,
-    Rocket,
+    Brain, Search, PanelLeftClose, PanelLeft, Plus,
+    Send, Settings2, Trash2, Copy, Check, Star, ThumbsUp, ThumbsDown
 } from "lucide-react";
 
-// ── Types ─────────────────────────────────────────────────
+// Config
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+
+// --- Types ---
 interface Citation {
     paper_id: string;
     title: string;
@@ -33,840 +22,522 @@ interface Citation {
     arxiv_url: string;
 }
 
-interface QueryResult {
-    answer: string;
-    citations: Citation[];
-    query: string;
-    chunks_used: number;
-    retrieval_time_ms: number;
-    generation_time_ms: number;
-    total_time_ms: number;
-    has_context: boolean;
+interface MessageTiming {
+    retrieval_time_ms?: number;
+    generation_time_ms?: number;
+    total_time_ms?: number;
+    chunks_used?: number;
 }
 
-// ── Config ────────────────────────────────────────────────
-const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+interface ChatMessage {
+    id: string;
+    role: "user" | "assistant";
+    content: string;
+    citations?: Citation[];
+    timing?: MessageTiming;
+    model_used?: string;
+    timestamp: number;
+}
 
-const EXAMPLE_QUERIES = [
-    "How does LoRA reduce trainable parameters?",
-    "What are challenges in multi-agent RL?",
-    "Explain diffusion models for images",
-];
-
-const CATEGORY_OPTIONS = [
-    { value: "All", label: "All Topics" },
-    { value: "cs.LG", label: "cs.LG", indexed: true },
-    { value: "cs.AI", label: "cs.AI", indexed: true },
-    { value: "stat.ML", label: "stat.ML", indexed: true },
-    { value: "cs.CV", label: "cs.CV", indexed: false, disabled: true },
-    { value: "cs.CL", label: "cs.CL", indexed: false, disabled: true },
-    { value: "cs.RO", label: "cs.RO", indexed: false, disabled: true },
-];
-
-// ── Custom Dropdown Component ─────────────────────────────
-function CustomSelect({
-    options,
-    value,
-    onChange,
-    width = '140px',
-}: {
-    options: { value: string | number; label: string; disabled?: boolean; indexed?: boolean }[];
-    value: string | number;
-    onChange: (val: string | number) => void;
-    width?: string;
-}) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [placement, setPlacement] = useState<"top" | "bottom">("bottom");
-    const ref = useRef<HTMLDivElement>(null);
+interface ChatSession {
+    id: string;
+    title: string;
+    messages: ChatMessage[];
+    timestamp: number;
+}
 
-    useEffect(() => {
-        const handleClickOutside = (e: MouseEvent) => {
-            if (ref.current && !ref.current.contains(e.target as Node)) setIsOpen(false);
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, []);
+// --- Message Renderer Component ---
+const CodeBlock = ({ language, code }: { language: string, code: string }) => {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = () => {
+        navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    return (
+        <div className="code-wrapper">
+            <div className="code-header">
+                <span>{language || 'text'}</span>
+                <button onClick={handleCopy} style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                    {copied ? <><Check size={14} /> Copied!</> : <><Copy size={14} /> Copy</>}
+                </button>
+            </div>
+            <SyntaxHighlighter language={language || 'text'} style={oneDark} customStyle={{ margin: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0 }}>
+                {code}
+            </SyntaxHighlighter>
+        </div>
+    );
+};
 
-    const toggleOpen = () => {
-        if (!isOpen && ref.current) {
-            const rect = ref.current.getBoundingClientRect();
-            // Need ~240px for full menu, pop up if space is tight below
-            if (window.innerHeight - rect.bottom < 240) {
-                setPlacement('top');
-            } else {
-                setPlacement('bottom');
-            }
+const CitationBadge = ({ id }: { id: string }) => {
+    return (
+        <a 
+            href={`https://arxiv.org/abs/${id}`} 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="citation-badge"
+            title={`View paper ${id} on ArXiv`}
+        >
+            {id}
+        </a>
+    );
+};
+
+// Safe rendering to avoid KaTeX crashing
+const SafeMathBlock = ({ math }: { math: string }) => {
+    try { return <BlockMath math={math} />; } catch (e) { return <pre>{`$$${math}$$`}</pre>; }
+};
+const SafeMathInline = ({ math }: { math: string }) => {
+    try { return <InlineMath math={math} />; } catch (e) { return <span>{`$${math}$`}</span>; }
+};
+
+const renderTextWithMathAndCitations = (text: string) => {
+    // 1. Block Math
+    const blockSplit = text.split(/(\$\$[\s\S]+?\$\$)/g);
+    return blockSplit.map((bPart, i) => {
+        if (bPart.startsWith("$$") && bPart.endsWith("$$")) {
+            return <SafeMathBlock key={i} math={bPart.slice(2, -2)} />;
         }
-        setIsOpen(!isOpen);
-    };
+        
+        // 2. Inline Math
+        const inlineSplit = bPart.split(/(\$[^\$\n]+?\$)/g);
+        return inlineSplit.map((iPart, j) => {
+            if (iPart.startsWith("$") && iPart.endsWith("$")) {
+                return <SafeMathInline key={`${i}-${j}`} math={iPart.slice(1, -1)} />;
+            }
 
-    const activeLabel = options.find((o) => o.value === value)?.label || value;
+            // 3. Citations
+            const citeSplit = iPart.split(/\[(\d{4}\.\d{4,5})\]/g);
+            return citeSplit.map((cPart, k) => {
+                if (/^\d{4}\.\d{4,5}$/.test(cPart)) {
+                    return <CitationBadge key={`${i}-${j}-${k}`} id={cPart} />;
+                }
+                return <span key={`${i}-${j}-${k}`} style={{ whiteSpace: "pre-wrap" }}>{cPart}</span>;
+            });
+        });
+    });
+};
 
+const MessageRenderer = ({ content }: { content: string }) => {
+    // Split by code blocks first
+    const parts = content.split(/(```[\s\S]*?```)/g);
     return (
-        <div ref={ref} style={{ position: 'relative', width }}>
-            <button
-                onClick={toggleOpen}
-                className="cyber-select"
-                style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
-            >
-                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{activeLabel}</span>
-                <span style={{ fontSize: '0.7em', opacity: 0.5, marginLeft: '8px' }}>{isOpen ? '▲' : '▼'}</span>
-            </button>
-            <AnimatePresence>
-                {isOpen && (
-                    <motion.div
-                        initial={{ opacity: 0, y: placement === 'top' ? 10 : -10, scale: 0.95 }}
-                        animate={{ opacity: 1, y: 0, scale: 1 }}
-                        exit={{ opacity: 0, y: placement === 'top' ? 5 : -5, scale: 0.95 }}
-                        transition={{ duration: 0.15, ease: 'easeOut' }}
-                        className="custom-dropdown-menu"
-                        style={{
-                            top: placement === 'bottom' ? 'calc(100% + 8px)' : 'auto',
-                            bottom: placement === 'top' ? 'calc(100% + 8px)' : 'auto'
-                        }}
-                    >
-                        {options.map((opt) => (
-                            <button
-                                key={opt.value}
-                                onClick={() => {
-                                    if (opt.disabled) return;
-                                    onChange(opt.value);
-                                    setIsOpen(false);
-                                }}
-                                disabled={opt.disabled}
-                                className={`custom-dropdown-item ${value === opt.value ? 'active' : ''}`}
-                                style={opt.disabled ? { opacity: 0.4, cursor: 'not-allowed' } : {}}
-                            >
-                                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
-                                    <span>{opt.label}</span>
-                                    {opt.indexed !== undefined && (
-                                        <div style={{
-                                            fontSize: "0.65em",
-                                            fontWeight: 600,
-                                            padding: "2px 6px",
-                                            borderRadius: "12px",
-                                            backgroundColor: opt.indexed ? "rgba(16, 185, 129, 0.15)" : "rgba(156, 163, 175, 0.1)",
-                                            color: opt.indexed ? "var(--success)" : "var(--text-muted)",
-                                            marginLeft: "8px"
-                                        }}>
-                                            {opt.indexed ? "INDEXED" : "UNAVAILABLE"}
-                                        </div>
-                                    )}
-                                </div>
-                            </button>
-                        ))}
-                    </motion.div>
-                )}
-            </AnimatePresence>
+        <div style={{ lineHeight: 1.6 }}>
+            {parts.map((part, i) => {
+                if (part.startsWith('```') && part.endsWith('```')) {
+                    const match = part.match(/```(\w+)?\n([\s\S]*?)```/);
+                    if (match) {
+                        return <CodeBlock key={i} language={match[1]} code={match[2]} />;
+                    }
+                }
+                return <div key={i}>{renderTextWithMathAndCitations(part)}</div>;
+            })}
         </div>
     );
-}
+};
 
-function renderLaTeX(text: string) {
-    const blockSplit = text.split(/(\$\$[\s\S]+?\$\$)/g);
-    return blockSplit.map((blockPart, i) => {
-        if (blockPart.startsWith("$$") && blockPart.endsWith("$$")) {
-            const math = blockPart.slice(2, -2);
-            return <BlockMath key={i} math={math} />;
+// --- Feedback Component ---
+const FeedbackRow = ({ query, time, citationsCount, model }: { query: string, time: number, citationsCount: number, model: string }) => {
+    const [rating, setRating] = useState(0);
+    const [hoverRating, setHoverRating] = useState(0);
+    const [thumbs, setThumbs] = useState<"up"|"down"|null>(null);
+    const [comment, setComment] = useState("");
+    const [submitted, setSubmitted] = useState(false);
+
+    const handleSubmit = async () => {
+        try {
+            await fetch(`${API_URL}/feedback`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ query, rating, thumbs, comment, model_used: model, citations_count: citationsCount, total_time_ms: time })
+            });
+        } catch (e) {
+            console.error(e);
         }
-        const inlineSplit = blockPart.split(/(\$[\s\S]+?\$)/g);
-        return (
-            <span key={i}>
-                {inlineSplit.map((inlinePart, j) => {
-                    if (inlinePart.startsWith("$") && inlinePart.endsWith("$")) {
-                        const math = inlinePart.slice(1, -1);
-                        return <InlineMath key={j} math={math} />;
-                    }
-                    return (
-                        <span key={j} style={{ whiteSpace: "pre-wrap" }}>
-                            {inlinePart}
-                        </span>
-                    );
-                })}
-            </span>
-        );
-    });
-}
+        setSubmitted(true);
+    };
 
-// ── Main Page ─────────────────────────────────────────────
-export default function Home() {
-    const [question, setQuestion] = useState("");
-    const [result, setResult] = useState<QueryResult | null>(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState("");
+    if (submitted) return <div style={{ fontSize: "0.85rem", color: "var(--success)", marginTop: "12px" }}><Check size={14} style={{ display: 'inline', marginRight: '4px' }} />Thank you for your feedback!</div>;
 
-    // Settings
+    return (
+        <div className="feedback-row">
+            <div style={{ display: "flex", gap: "4px" }}>
+                {[1,2,3,4,5].map(star => (
+                    <Star 
+                        key={star} 
+                        size={18} 
+                        className={`star-btn ${(hoverRating || rating) >= star ? 'active' : ''}`}
+                        onMouseEnter={() => setHoverRating(star)}
+                        onMouseLeave={() => setHoverRating(0)}
+                        onClick={() => setRating(star)}
+                        fill={(hoverRating || rating) >= star ? "#f59e0b" : "transparent"}
+                    />
+                ))}
+            </div>
+            <div style={{ display: "flex", gap: "8px", borderLeft: "1px solid rgba(255,255,255,0.1)", paddingLeft: "12px" }}>
+                <ThumbsUp size={18} className={`star-btn ${thumbs === 'up' ? 'active' : ''}`} onClick={() => setThumbs('up')} />
+                <ThumbsDown size={18} className={`star-btn ${thumbs === 'down' ? 'active' : ''}`} onClick={() => setThumbs('down')} />
+            </div>
+            {(rating > 0 || thumbs) && (
+                <>
+                    <input 
+                        type="text" 
+                        className="feedback-input" 
+                        placeholder="Tell us more (optional)" 
+                        value={comment} 
+                        onChange={(e) => setComment(e.target.value)} 
+                    />
+                    <button className="feedback-submit" onClick={handleSubmit}>Submit</button>
+                </>
+            )}
+        </div>
+    );
+};
+
+export default function App() {
+    const [sessions, setSessions] = useState<ChatSession[]>([]);
+    const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+    const [query, setQuery] = useState("");
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+    const [isStreaming, setIsStreaming] = useState(false);
+    const [settingsOpen, setSettingsOpen] = useState(false);
     const [topK, setTopK] = useState(5);
     const [category, setCategory] = useState("All");
-    const [yearFilter, setYearFilter] = useState(false);
-    const [yearFrom, setYearFrom] = useState(2024);
-    const [showSettings, setShowSettings] = useState(false);
-
-    // System state
-    const [apiStatus, setApiStatus] = useState<
-        "unknown" | "online" | "offline"
-    >("unknown");
-    const [showInfo, setShowInfo] = useState(false);
-    const [showStatusDetails, setShowStatusDetails] = useState(false);
 
+    const chatEndRef = useRef<HTMLDivElement>(null);
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+    // Load from local storage
     useEffect(() => {
-        if (textareaRef.current) {
-            textareaRef.current.style.height = "auto";
-            textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 120)}px`;
+        const stored = localStorage.getItem("rp_history");
+        if (stored) {
+            setSessions(JSON.parse(stored));
         }
-    }, [question]);
+    }, []);
 
+    // Save to local storage
     useEffect(() => {
-        checkHealth();
-    }, []);
+        if (sessions.length > 0) {
+            localStorage.setItem("rp_history", JSON.stringify(sessions));
+        }
+    }, [sessions]);
 
-    const checkHealth = async () => {
-        try {
-            const r = await fetch(`${API_URL}/health`, {
-                signal: AbortSignal.timeout(5000),
-            });
-            setApiStatus(r.ok ? "online" : "offline");
-        } catch {
-            setApiStatus("offline");
+    // Auto resize textarea
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = "auto";
+            textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 200)}px`;
         }
+    }, [query]);
+
+    // Scroll to bottom
+    const scrollToBottom = () => {
+        chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
     };
 
-    const handleSearch = async () => {
-        if (!question.trim()) return;
-        setLoading(true);
-        setError("");
-        setResult(null);
+    useEffect(() => {
+        scrollToBottom();
+    }, [sessions, activeSessionId, isStreaming]);
+
+    const activeSession = sessions.find(s => s.id === activeSessionId);
+    const currentMessages = activeSession?.messages || [];
 
-        try {
-            const payload: Record<string, unknown> = {
-                question: question.trim(),
-                top_k: topK,
+    const handleNewChat = () => {
+        setActiveSessionId(null);
+        setSidebarOpen(false);
+    };
+
+    const handleSend = async () => {
+        if (!query.trim() || isStreaming) return;
+        
+        let sessionId = activeSessionId;
+        if (!sessionId) {
+            sessionId = Date.now().toString();
+            const newSession: ChatSession = {
+                id: sessionId,
+                title: query.trim().substring(0, 50) + (query.length > 50 ? "..." : ""),
+                messages: [],
+                timestamp: Date.now()
             };
-            if (category !== "All") payload.filter_category = category;
-            if (yearFilter) payload.filter_year_gte = yearFrom;
+            setSessions(prev => [newSession, ...prev]);
+            setActiveSessionId(sessionId);
+        }
+
+        const userMessage: ChatMessage = {
+            id: Date.now().toString(),
+            role: "user",
+            content: query.trim(),
+            timestamp: Date.now()
+        };
+
+        const aiMessageId = (Date.now() + 1).toString();
+        const placeholderAiMessage: ChatMessage = {
+            id: aiMessageId,
+            role: "assistant",
+            content: "",
+            timestamp: Date.now() + 1
+        };
+
+        setSessions(prev => prev.map(s => {
+            if (s.id === sessionId) {
+                return { ...s, messages: [...s.messages, userMessage, placeholderAiMessage] };
+            }
+            return s;
+        }));
+
+        const originalQuery = query;
+        setQuery("");
+        setIsStreaming(true);
 
-            const response = await fetch(`${API_URL}/query`, {
+        try {
+            const res = await fetch(`${API_URL}/query/stream`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(payload),
+                body: JSON.stringify({ 
+                    question: originalQuery, 
+                    top_k: topK, 
+                    filter_category: category === "All" ? undefined : category 
+                })
             });
 
-            if (!response.ok)
-                throw new Error(`API returned ${response.status}`);
-            const data: QueryResult = await response.json();
-            setResult(data);
-        } catch (err) {
-            setError(
-                err instanceof Error
-                    ? err.message
-                    : "Failed to connect to API.",
-            );
+            if (!res.ok || !res.body) throw new Error("Stream failed");
+
+            const reader = res.body.getReader();
+            const decoder = new TextDecoder();
+            
+            let accumulatedContent = "";
+
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+
+                const chunk = decoder.decode(value, { stream: true });
+                const lines = chunk.split("\n");
+
+                for (const line of lines) {
+                    if (line.startsWith("data: ")) {
+                        try {
+                            const data = JSON.parse(line.slice(6));
+                            if (data.done) {
+                                // Final update with citations + timing
+                                setSessions(prev => prev.map(s => {
+                                    if (s.id === sessionId) {
+                                        return {
+                                            ...s,
+                                            messages: s.messages.map(m => 
+                                                m.id === aiMessageId 
+                                                ? { ...m, citations: data.citations, timing: data.timing, model_used: data.model_used }
+                                                : m
+                                            )
+                                        };
+                                    }
+                                    return s;
+                                }));
+                            } else if (data.token) {
+                                accumulatedContent += data.token;
+                                // Update streaming content
+                                setSessions(prev => prev.map(s => {
+                                    if (s.id === sessionId) {
+                                        return {
+                                            ...s,
+                                            messages: s.messages.map(m => 
+                                                m.id === aiMessageId 
+                                                ? { ...m, content: accumulatedContent }
+                                                : m
+                                            )
+                                        };
+                                    }
+                                    return s;
+                                }));
+                                // scrollToBottom immediately inside the stream
+                                chatEndRef.current?.scrollIntoView();
+                            }
+                        } catch (e) {
+                            console.error("Parse error:", e);
+                        }
+                    }
+                }
+            }
+        } catch (error) {
+            console.error(error);
+            setSessions(prev => prev.map(s => {
+                if (s.id === sessionId) {
+                    return {
+                        ...s,
+                        messages: s.messages.map(m => 
+                            m.id === aiMessageId 
+                            ? { ...m, content: "Error: Could not connect to API or request failed." }
+                            : m
+                        )
+                    };
+                }
+                return s;
+            }));
         } finally {
-            setLoading(false);
+            setIsStreaming(false);
         }
     };
 
-    const resetApp = () => {
-        setQuestion("");
-        setResult(null);
-        setError("");
-        setLoading(false);
-    };
-
-    const hasSearched = result || loading || error;
-
     return (
-        <>
-            <div className="luminous-grid" />
-            <div className="orb orb-cyan" />
-            <div className="orb orb-purple" />
-
-            <AnimatePresence>
-                {showInfo && (
-                    <div className="info-modal-backdrop" onClick={() => setShowInfo(false)}>
-                        <motion.div
-                            initial={{ opacity: 0, scale: 0.95, y: 20 }}
-                            animate={{ opacity: 1, scale: 1, y: 0 }}
-                            exit={{ opacity: 0, scale: 0.95, y: 20 }}
-                            onClick={(e) => e.stopPropagation()}
-                            className="cyber-panel info-modal"
-                        >
-                            <button className="modal-close" onClick={() => setShowInfo(false)}>
-                                <X size={18} />
-                            </button>
-                            <h2>ResearchPilot Console</h2>
-                            <div style={{ display: "flex", alignItems: "center", gap: "12px", marginTop: "16px" }}>
-                                <div style={{ background: "rgba(138, 43, 226, 0.15)", border: "1px solid rgba(138, 43, 226, 0.4)", padding: "6px 14px", borderRadius: "99px", fontSize: "0.75rem", color: "var(--accent-2)", fontWeight: 700, letterSpacing: "0.05em", textTransform: "uppercase" }}>
-                                    Lead Architect
-                                </div>
-                                <span style={{ fontFamily: "'Dancing Script', cursive", fontSize: "1.8rem", fontWeight: 700, background: "linear-gradient(135deg, #fff 20%, var(--accent-2) 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", letterSpacing: "0.05em", transform: "translateY(-2px)" }}>Subhadip Hensh</span>
-                            </div>
-                            
-                            <hr />
-                            
-                            <h3><Server size={18} /> System Overview</h3>
-                            <p style={{ fontSize: "1rem", lineHeight: 1.7, marginBottom: "16px" }}>ResearchPilot is a high-performance RAG (Retrieval-Augmented Generation) engine tailored for Machine Learning literature. It features hybrid sparse-dense searching, advanced cross-encoder reranking, and GPU-driven vector indexing via Qdrant.</p>
-                            
-                            <h3><Activity size={18} /> Current Operational Capacity</h3>
-                            <ul>
-                                <li><strong>Current Index</strong> Synthesizing 51,019 dense embeddings isolated from ~700 major AI & ML papers.</li>
-                                <li><strong>Data Categories</strong> Fully indexed on core Machine Learning (cs.LG) and AI (cs.AI).</li>
-                            </ul>
-
-                            <h3><Layers size={18} /> Core Technology Stack</h3>
-                            <ul>
-                                <li><strong>Frontend Application</strong> Next.js 16 (App Router), React, Framer Motion, Vanilla CSS (Glassmorphism).</li>
-                                <li><strong>Backend Environment</strong> Python, FastAPI, Uvicorn, Pydantic.</li>
-                                <li><strong>Vector Database Engine</strong> Qdrant (GPU Accelerated Dense Vectors).</li>
-                                <li><strong>RAG Processing Pipeline</strong> SentenceTransformers (BGE-base), BM25 Sparse Search, Cross-Encoder Reranking, Groq LLM (LLaMA 3.3).</li>
-                                <li><strong>Mathematics Engine</strong> KaTeX & React-KaTeX for fully dynamic native LaTeX equations.</li>
-                            </ul>
-
-                            <h3><Rocket size={18} /> Phase 2: In-Progress Architecture</h3>
-                            <ul>
-                                <li><strong>Massive Data Expansion</strong> Scaling dataset soon to 10,000+ — 20,000+ ML papers spanning NLP, Computer Vision, and Robotics.</li>
-                                <li><strong>Distributed Hardware Execution</strong> Scaling ingestion logic to cloud-based GPU clusters for extreme speed.</li>
-                                <li><strong>Multi-modal Analysis</strong> Soon integrating visual graph and chart processing abilities into the synthesis engine.</li>
-                            </ul>
-                        </motion.div>
+        <div className="layout-wrapper" style={{ background: "var(--bg)", color: "var(--text-main)" }}>
+            {/* Mobile Header Menu */}
+            <div className="hamburger" onClick={() => setSidebarOpen(true)}>
+                <PanelLeft size={24} color="#fff" />
+            </div>
+
+            {/* Sidebar */}
+            <div className={`sidebar ${sidebarOpen ? 'open' : ''}`}>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '24px' }}>
+                    <div className="brand" style={{ fontSize: '1.1rem', gap: '8px' }}>
+                        <Brain size={20} color="var(--accent)" /> ResearchPilot
                     </div>
-                )}
-            </AnimatePresence>
-
-            {/* ── Top Nav ── */}
-            <header className="top-nav">
-                    <div className="brand" onClick={resetApp} style={{ cursor: "pointer" }}>
-                        <div className="brand-icon">
-                            <Brain size={22} />
+                    {sidebarOpen && (
+                        <PanelLeftClose size={20} color="#fff" onClick={() => setSidebarOpen(false)} style={{ cursor: 'pointer' }} />
+                    )}
+                </div>
+
+                <button className="new-chat-btn" onClick={handleNewChat}>
+                    <Plus size={16} /> New Chat
+                </button>
+
+                <div style={{ flex: 1, overflowY: 'auto' }}>
+                    <div style={{ fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-muted)', marginBottom: '12px', textTransform: 'uppercase' }}>Recent</div>
+                    {sessions.map(s => (
+                        <div 
+                            key={s.id} 
+                            className={`history-item ${activeSessionId === s.id ? 'active' : ''}`}
+                            onClick={() => { setActiveSessionId(s.id); setSidebarOpen(false); }}
+                        >
+                            {s.title}
                         </div>
-                        <span>ResearchPilot</span>
-                    </div>
-                    <div className="nav-right">
-                        <button onClick={() => setShowInfo(true)} className="nav-icon-btn" aria-label="Project Info">
-                            <Info size={16} />
-                        </button>
-                        <div style={{ position: "relative" }}>
-                            <button 
-                                onClick={async () => {
-                                    await checkHealth();
-                                    setShowStatusDetails(!showStatusDetails);
-                                }} 
-                                className="nav-status"
-                            >
-                                <div
-                                    className={`status-dot ${apiStatus === "online" ? "status-online" : apiStatus === "offline" ? "status-offline" : ""}`}
-                                />
-                                {apiStatus === "online"
-                                    ? "Systems Nominal"
-                                    : apiStatus === "offline"
-                                      ? "Offline"
-                                      : "Checking..."}
-                            </button>
+                    ))}
+                </div>
+            </div>
+
+            {/* Overlay for mobile sidebar */}
+            {sidebarOpen && <div className="sidebar-overlay" onClick={() => setSidebarOpen(false)} />}
+
+            {/* Main Area */}
+            <div className="main-chat-area">
+                <div className="chat-container">
+                    {currentMessages.length === 0 ? (
+                        <div style={{ margin: 'auto', textAlign: 'center', opacity: 0.5, maxWidth: '400px' }}>
+                            <Brain size={48} style={{ margin: '0 auto 16px auto', display: 'block' }} />
+                            <h2>How can I help you with ML research?</h2>
+                        </div>
+                    ) : (
+                        currentMessages.map((msg, i) => (
+                            <div key={msg.id} className={msg.role === 'user' ? 'message-user' : 'message-ai'}>
+                                {msg.role === 'user' ? (
+                                    <div style={{ whiteSpace: 'pre-wrap' }}>{msg.content}</div>
+                                ) : (
+                                    <div style={{ width: '100%' }}>
+                                        {/* Name header for AI */}
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', fontSize: '0.85rem', color: 'var(--accent)', fontWeight: 600 }}>
+                                            <Brain size={16} /> ResearchPilot {msg.model_used && <span style={{fontSize: '0.7rem', color: '#666', background: '#222', padding: '2px 6px', borderRadius: '4px'}}>{msg.model_used}</span>}
+                                        </div>
 
-                            <AnimatePresence>
-                                {showStatusDetails && (
-                                    <motion.div
-                                        initial={{ opacity: 0, y: 10, scale: 0.95 }}
-                                        animate={{ opacity: 1, y: 0, scale: 1 }}
-                                        exit={{ opacity: 0, y: 10, scale: 0.95 }}
-                                        className="cyber-panel custom-dropdown-menu"
-                                        style={{
-                                            position: "absolute",
-                                            top: "calc(100% + 12px)",
-                                            right: "-40px",
-                                            left: "auto",
-                                            width: "260px",
-                                            padding: "16px",
-                                            zIndex: 100,
-                                            display: "flex",
-                                            flexDirection: "column",
-                                            gap: "8px",
-                                            cursor: "default"
-                                        }}
-                                        onClick={(e) => e.stopPropagation()}
-                                    >
-                                        <h4 style={{ fontSize: "0.85rem", color: "#fff", marginBottom: "4px" }}>System Connection Status</h4>
-                                        <p style={{ fontSize: "0.75rem", color: "var(--text-muted)", lineHeight: 1.5 }}>
-                                            {apiStatus === "online" 
-                                                ? "🟢 Backend API and Qdrant Vector Database are connected and responding correctly. The system is ready for inference."
-                                                : "🔴 Backend API is unreachable. You need to run 'python run_api.py' in your backend directory to enable RAG functionality."}
-                                        </p>
-                                        <button 
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                checkHealth();
-                                            }}
-                                            style={{
-                                                marginTop: "8px",
-                                                fontSize: "0.75rem",
-                                                color: "var(--accent)",
-                                                background: "rgba(0, 240, 255, 0.1)",
-                                                padding: "6px 12px",
-                                                borderRadius: "8px",
-                                                border: "1px solid rgba(0, 240, 255, 0.3)",
-                                                textAlign: "center",
-                                                display: "block",
-                                                width: "100%",
-                                                cursor: "pointer",
-                                                transition: "0.2s"
-                                            }}
-                                            onMouseEnter={(e) => {
-                                                e.currentTarget.style.background = "rgba(0, 240, 255, 0.2)";
-                                            }}
-                                            onMouseLeave={(e) => {
-                                                e.currentTarget.style.background = "rgba(0, 240, 255, 0.1)";
-                                            }}
-                                        >
-                                            Re-verify Connection
-                                        </button>
-                                    </motion.div>
+                                        { /* Stream logic vs Final logic */
+                                            isStreaming && i === currentMessages.length - 1 ? (
+                                                <div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
+                                                    {msg.content}
+                                                    <span className="blinking-cursor"></span>
+                                                </div>
+                                            ) : (
+                                                <>
+                                                    <MessageRenderer content={msg.content} />
+                                                    {/* Citations section if present */}
+                                                    {msg.citations && msg.citations.length > 0 && (
+                                                        <div style={{ marginTop: '16px', paddingTop: '16px', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
+                                                            <div style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--text-muted)', marginBottom: '8px' }}>SOURCES</div>
+                                                            <div className="citations-grid">
+                                                                {msg.citations.map(c => (
+                                                                    <div key={c.paper_id} className="citation-card">
+                                                                        <div className="citation-meta">
+                                                                            <span className="citation-id">{c.paper_id}</span>
+                                                                        </div>
+                                                                        <div className="citation-title">{c.title}</div>
+                                                                        <a href={c.arxiv_url} target="_blank" rel="noopener noreferrer" className="citation-open" title="Open ArXiv PDF">
+                                                                            <Search size={16} />
+                                                                        </a>
+                                                                    </div>
+                                                                ))}
+                                                            </div>
+                                                        </div>
+                                                    )}
+                                                    {/* Feedback Row */}
+                                                    {!isStreaming && msg.role === 'assistant' && msg.content && (
+                                                        <FeedbackRow 
+                                                            query={currentMessages[i-1]?.content || ""} 
+                                                            time={msg.timing?.total_time_ms || 0} 
+                                                            citationsCount={msg.citations?.length || 0}
+                                                            model={msg.model_used || "unknown"}
+                                                        />
+                                                    )}
+                                                </>
+                                            )
+                                        }
+                                    </div>
                                 )}
-                            </AnimatePresence>
-                        </div>
-                        <a 
-                            href="https://github.com/07subhadip" 
-                            target="_blank" 
-                            rel="noopener noreferrer" 
-                            className="github-link"
-                            aria-label="GitHub Profile"
-                        >
-                            <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
-                                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
-                            </svg>
-                        </a>
-                    </div>
-                </header>
-
-            <main className="app-container">
-                {/* ── Central Hero Block ── */}
-                <motion.div
-                    layout
-                    className="search-wrapper"
-                    style={{ marginTop: hasSearched ? "130px" : "15vh" }}
-                    transition={{ type: "spring", bounce: 0.2, duration: 0.8 }}
-                >
-                    <AnimatePresence>
-                        {!hasSearched && (
-                            <motion.div
-                                layout
-                                initial={{ opacity: 0, scale: 0.95 }}
-                                animate={{ opacity: 1, scale: 1 }}
-                                exit={{ opacity: 0, scale: 0.95 }}
-                                transition={{ duration: 0.5 }}
-                                style={{ width: "100%" }}
-                            >
-                                <h1 className="hero-title">
-                                    Decipher the latest
-                                    <br />
-                                    <span className="text-gradient-2">
-                                        ML Research
-                                    </span>
-                                </h1>
-                                <p className="hero-subtitle">
-                                    Neural hybrid search across ArXiv. <br />
-                                    Cross-encoder reranked. LLM synthesized.
-                                </p>
-                                <div style={{ height: "64px" }} />
-                            </motion.div>
-                        )}
-                    </AnimatePresence>
-
-                    {/* ── ChatGPT Style Search Box ── */}
-                    <motion.div
-                        layout
-                        style={{
-                            width: "100%",
-                            margin: "0 auto",
-                            zIndex: 20,
-                        }}
-                    >
+                            </div>
+                        ))
+                    )}
+                    <div ref={chatEndRef} style={{ height: "1px" }} />
+                </div>
+
+                {/* Bottom Input Area */}
+                <div className="bottom-input-bar">
+                    <div className="bottom-input-bar-inner">
+                        {/* Settings Popup inline */}
+                        <AnimatePresence>
+                            {settingsOpen && (
+                                <motion.div 
+                                    initial={{ opacity: 0, y: 10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    exit={{ opacity: 0, y: 10 }}
+                                    style={{ background: 'rgba(20,25,35,0.95)', border: '1px solid rgba(255,255,255,0.1)', padding: '12px', borderRadius: '12px', display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '8px' }}
+                                >
+                                    <select style={{ background: '#000', border: '1px solid #333', color: '#fff', padding: '6px 12px', borderRadius: '6px' }} value={topK} onChange={(e) => setTopK(Number(e.target.value))}>
+                                        <option value={3}>Top 3</option>
+                                        <option value={5}>Top 5</option>
+                                        <option value={10}>Top 10</option>
+                                    </select>
+                                    <select style={{ background: '#000', border: '1px solid #333', color: '#fff', padding: '6px 12px', borderRadius: '6px' }} value={category} onChange={(e) => setCategory(e.target.value)}>
+                                        <option value="All">All Topics</option>
+                                        <option value="cs.LG">cs.LG</option>
+                                        <option value="cs.AI">cs.AI</option>
+                                    </select>
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+
                         <div className="chat-input-wrapper">
-                            <textarea
+                            <button onClick={() => setSettingsOpen(!settingsOpen)} style={{ color: settingsOpen ? 'var(--accent)' : 'var(--text-muted)' }}>
+                                <Settings2 size={20} />
+                            </button>
+                            <textarea 
                                 ref={textareaRef}
-                                value={question}
-                                onChange={(e) => setQuestion(e.target.value)}
-                                placeholder="Message ResearchPilot..."
-                                rows={1}
-                                className="chat-input"
-                                style={{
-                                    minHeight: hasSearched ? "20px" : "28px",
-                                    maxHeight: "120px",
-                                    overflowY: "auto",
-                                }}
+                                value={query}
+                                onChange={(e) => setQuery(e.target.value)}
                                 onKeyDown={(e) => {
-                                    if (e.key === "Enter" && !e.shiftKey) {
+                                    if (e.key === 'Enter' && !e.shiftKey) {
                                         e.preventDefault();
-                                        handleSearch();
+                                        handleSend();
                                     }
                                 }}
+                                placeholder="Message ResearchPilot..."
+                                className="chat-input"
+                                rows={1}
                             />
-                            <button
-                                onClick={handleSearch}
-                                disabled={loading || !question.trim()}
-                                className="send-btn"
-                            >
-                                {loading ? (
-                                    <div className="spinner-micro" />
-                                ) : (
-                                    <Send
-                                        size={18}
-                                        strokeWidth={2.5}
-                                        style={{ marginLeft: "-2px" }}
-                                    />
-                                )}
+                            <button onClick={handleSend} disabled={!query.trim() || isStreaming} className="send-btn">
+                                <Send size={18} />
                             </button>
                         </div>
-
-                        <div className="search-controls">
-                            <button
-                                onClick={() => setShowSettings(!showSettings)}
-                                className="controls-group"
-                                style={{
-                                    color: "var(--text-muted)",
-                                    fontSize: "0.8rem",
-                                    fontWeight: 600,
-                                    padding: "4px",
-                                    cursor: "pointer",
-                                }}
-                            >
-                                <Layers size={14} />
-                                CONFIGURE {showSettings ? "▲" : "▼"}
-                            </button>
-
-                            <div className="controls-group">
-                                <AnimatePresence>
-                                    {showSettings && (
-                                        <motion.div
-                                            initial={{ opacity: 0, height: 0 }}
-                                            animate={{
-                                                opacity: 1,
-                                                height: "auto",
-                                            }}
-                                            exit={{ opacity: 0, height: 0 }}
-                                            style={{
-                                                overflow: "visible",
-                                                display: "flex",
-                                                gap: "12px",
-                                                flexWrap: "wrap",
-                                                alignItems: "center",
-                                            }}
-                                        >
-                                            <CustomSelect
-                                                value={topK}
-                                                onChange={(val) => setTopK(Number(val))}
-                                                options={[
-                                                    { value: 3, label: 'Top 3 Results' },
-                                                    { value: 5, label: 'Top 5 Results' },
-                                                    { value: 10, label: 'Top 10 Results' },
-                                                ]}
-                                            />
-                                            <CustomSelect
-                                                value={category}
-                                                onChange={(val) => setCategory(String(val))}
-                                                options={CATEGORY_OPTIONS}
-                                                width="160px"
-                                            />
-                                            <button
-                                                onClick={() =>
-                                                    setYearFilter(!yearFilter)
-                                                }
-                                                className={`cyber-btn-outline ${yearFilter ? "active" : ""}`}
-                                            >
-                                                YEAR FILTER{" "}
-                                                {yearFilter ? "ON" : "OFF"}
-                                            </button>
-                                            {yearFilter && (
-                                                <div className="year-stepper">
-                                                    <button onClick={() => setYearFrom(y => Math.max(2000, y - 1))} className="stepper-btn">-</button>
-                                                    <input
-                                                        type="number"
-                                                        value={yearFrom}
-                                                        readOnly
-                                                        className="stepper-input"
-                                                    />
-                                                    <button onClick={() => setYearFrom(y => Math.min(2026, y + 1))} className="stepper-btn">+</button>
-                                                </div>
-                                            )}
-                                        </motion.div>
-                                    )}
-                                </AnimatePresence>
-                            </div>
-                        </div>
-                    </motion.div>
-
-                    {/* ── Example Queries ── */}
-                    <AnimatePresence>
-                        {!hasSearched && (
-                            <motion.div
-                                layout
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                                exit={{ opacity: 0, filter: "blur(5px)" }}
-                                className="example-chips"
-                            >
-                                {EXAMPLE_QUERIES.map((q, i) => (
-                                    <motion.button
-                                        key={q}
-                                        initial={{ opacity: 0, y: 10 }}
-                                        animate={{ opacity: 1, y: 0 }}
-                                        transition={{ delay: 0.1 * i + 0.3 }}
-                                        onClick={() => {
-                                            setQuestion(q);
-                                            setTimeout(
-                                                () => handleSearch(),
-                                                50,
-                                            );
-                                        }}
-                                        className="chip"
-                                    >
-                                        {q}
-                                    </motion.button>
-                                ))}
-                            </motion.div>
-                        )}
-                    </AnimatePresence>
-                </motion.div>
-
-                {/* ── Error State ── */}
-                <AnimatePresence>
-                    {error && (
-                        <motion.div
-                            initial={{ opacity: 0, y: 10 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            className="cyber-panel"
-                            style={{
-                                width: "100%",
-                                padding: "24px",
-                                borderColor: "var(--danger)",
-                                marginTop: "24px",
-                            }}
-                        >
-                            <div
-                                style={{
-                                    display: "flex",
-                                    gap: "16px",
-                                    alignItems: "center",
-                                }}
-                            >
-                                <AlertCircle size={32} color="var(--danger)" />
-                                <div>
-                                    <h3
-                                        style={{
-                                            color: "var(--danger)",
-                                            fontSize: "1.2rem",
-                                            marginBottom: "4px",
-                                        }}
-                                    >
-                                        Critical Exception
-                                    </h3>
-                                    <p style={{ color: "var(--text-muted)" }}>
-                                        {error}
-                                    </p>
-                                </div>
-                            </div>
-                        </motion.div>
-                    )}
-                </AnimatePresence>
-
-                {/* ── Loading View ── */}
-                <AnimatePresence>
-                    {loading && (
-                        <motion.div
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            className="loader-view"
-                            style={{ width: "100%" }}
-                        >
-                            <div className="ring-spinner">
-                                <div className="ring ring-1" />
-                                <div className="ring ring-2" />
-                                <Brain
-                                    size={22}
-                                    style={{
-                                        position: "absolute",
-                                        top: "24px",
-                                        left: "24px",
-                                        color: "var(--text-main)",
-                                    }}
-                                />
-                            </div>
-                            <div>
-                                <h2
-                                    style={{
-                                        fontSize: "1.4rem",
-                                        fontWeight: 600,
-                                        color: "#fff",
-                                        marginBottom: "8px",
-                                    }}
-                                >
-                                    Synthesizing Knowledge
-                                </h2>
-                                <p
-                                    style={{
-                                        color: "var(--text-muted)",
-                                        fontSize: "0.95rem",
-                                    }}
-                                >
-                                    Running Vector Search & LLM Inference
-                                </p>
-                            </div>
-                        </motion.div>
-                    )}
-                </AnimatePresence>
-
-                {/* ── Results Output ── */}
-                {result && !loading && (
-                    <motion.div
-                        initial={{ opacity: 0, y: 20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ staggerChildren: 0.1 }}
-                        className="results-area"
-                    >
-                        <motion.div
-                            className="cyber-panel answer-box"
-                            initial={{ opacity: 0, y: 20 }}
-                            animate={{ opacity: 1, y: 0 }}
-                        >
-                            <div className="answer-header">
-                                <div className="answer-label">
-                                    <Sparkles size={20} /> AI Synthesis
-                                </div>
-                                {result.has_context ? (
-                                    <div className="badge-grounded">
-                                        <CheckCircle size={14} /> Grounded
-                                        Sources
-                                    </div>
-                                ) : (
-                                    <div
-                                        className="badge-grounded"
-                                        style={{
-                                            color: "var(--danger)",
-                                            borderColor:
-                                                "rgba(239, 68, 68, 0.3)",
-                                            background:
-                                                "rgba(239, 68, 68, 0.1)",
-                                        }}
-                                    >
-                                        <AlertCircle size={14} /> Hallucination
-                                        Risk
-                                    </div>
-                                )}
-                            </div>
-                            <div className="answer-text">{renderLaTeX(result.answer)}</div>
-                        </motion.div>
-
-                        <motion.div
-                            className="stats-grid"
-                            initial={{ opacity: 0, y: 20 }}
-                            animate={{ opacity: 1, y: 0 }}
-                        >
-                            {[
-                                {
-                                    l: "Execution Time",
-                                    v: `${(result.total_time_ms / 1000).toFixed(1)}s`,
-                                    i: Clock,
-                                    c: "var(--accent)",
-                                },
-                                {
-                                    l: "Vector Data",
-                                    v: `${(result.retrieval_time_ms / 1000).toFixed(1)}s`,
-                                    i: ArrowRight,
-                                    c: "#fff",
-                                },
-                                {
-                                    l: "LLM Generation",
-                                    v: `${(result.generation_time_ms / 1000).toFixed(1)}s`,
-                                    i: Zap,
-                                    c: "var(--accent-2)",
-                                },
-                                {
-                                    l: "Paper Chunks",
-                                    v: result.chunks_used,
-                                    i: Fingerprint,
-                                    c: "var(--success)",
-                                },
-                            ].map((s, i) => (
-                                <div key={i} className="cyber-panel stat-card">
-                                    <div
-                                        className="stat-header"
-                                        style={{ width: "100%" }}
-                                    >
-                                        <span className="stat-label">
-                                            {s.l}
-                                        </span>
-                                        <s.i
-                                            size={16}
-                                            color={s.c}
-                                            style={{ opacity: 0.8 }}
-                                        />
-                                    </div>
-                                    <div
-                                        className="stat-value"
-                                        style={{
-                                            width: "100%",
-                                            textAlign: "left",
-                                            color: s.c,
-                                        }}
-                                    >
-                                        {s.v}
-                                    </div>
-                                </div>
-                            ))}
-                        </motion.div>
-
-                        {result.citations.length > 0 && (
-                            <motion.div
-                                initial={{ opacity: 0, y: 20 }}
-                                animate={{ opacity: 1, y: 0 }}
-                            >
-                                <div className="section-title">
-                                    <BookOpen
-                                        size={18}
-                                        color="var(--accent-2)"
-                                    />
-                                    Extracted Literature
-                                </div>
-                                <div className="citations-grid">
-                                    {result.citations.map((cite, i) => (
-                                        <a
-                                            href={cite.arxiv_url}
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            key={i}
-                                            className="cyber-panel citation-card"
-                                        >
-                                            <div className="citation-open">
-                                                <ExternalLink size={16} />
-                                            </div>
-                                            <div className="citation-meta">
-                                                <span className="citation-id">
-                                                    {cite.paper_id}
-                                                </span>
-                                                <span className="citation-date">
-                                                    {cite.published_date}
-                                                </span>
-                                            </div>
-                                            <h4 className="citation-title">
-                                                {cite.title}
-                                            </h4>
-                                            <div className="citation-authors">
-                                                {cite.authors
-                                                    .slice(0, 3)
-                                                    .join(", ")}
-                                                {cite.authors.length > 3 &&
-                                                    ` +${cite.authors.length - 3} more`}
-                                            </div>
-                                        </a>
-                                    ))}
-                                </div>
-                            </motion.div>
-                        )}
-                    </motion.div>
-                )}
-            </main>
-        </>
+                    </div>
+                </div>
+            </div>
+            
+            <div className="luminous-grid" />
+        </div>
     );
 }

frontend-next/package-lock.json

@@ -16,6 +16,7 @@
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "react-katex": "^3.1.0",
+        "react-syntax-highlighter": "^16.1.1",
         "tailwind-merge": "^3.5.0"
       },
       "devDependencies": {
@@ -25,6 +26,7 @@
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "@types/react-katex": "^3.0.4",
+        "@types/react-syntax-highlighter": "^15.5.13",
         "eslint": "^9",
         "eslint-config-next": "16.2.2",
         "tailwindcss": "^4",
@@ -236,6 +238,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -1611,6 +1622,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1642,6 +1662,12 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -1672,6 +1698,22 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.13",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
+      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.58.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.58.0.tgz",
@@ -2720,6 +2762,36 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2755,6 +2827,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -2879,6 +2961,19 @@
         }
       }
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3656,6 +3751,19 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "license": "MIT",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3736,6 +3844,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "12.38.0",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.38.0.tgz",
@@ -4051,6 +4167,36 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hermes-estree": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -4068,6 +4214,21 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+      "license": "CC0-1.0"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4120,6 +4281,30 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -4278,6 +4463,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4337,6 +4532,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -5027,6 +5232,20 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "license": "MIT",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -5486,6 +5705,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5581,6 +5825,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5592,6 +5845,16 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5663,6 +5926,26 @@
         "react": ">=15.3.2 <20"
       }
     },
+    "node_modules/react-syntax-highlighter": {
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz",
+      "integrity": "sha512-PjVawBGy80C6YbC5DDZJeUjBmC7skaoEUdvfFQediQHgCL7aKyVHe57SaJGfQsloGDac+gCpTfRdtxzWWKmCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.30.0",
+        "refractor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 16.20.2"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5686,6 +5969,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/refractor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-5.0.0.tgz",
+      "integrity": "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -6072,6 +6371,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",

frontend-next/package.json

@@ -17,6 +17,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-katex": "^3.1.0",
+    "react-syntax-highlighter": "^16.1.1",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
@@ -26,6 +27,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-katex": "^3.0.4",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "eslint": "^9",
     "eslint-config-next": "16.2.2",
     "tailwindcss": "^4",

src/api/main.py

@@ -26,7 +26,10 @@ from contextlib import asynccontextmanager
 
 from fastapi import FastAPI, HTTPException, Request
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import JSONResponse
+from fastapi.responses import JSONResponse, StreamingResponse
+from pydantic import BaseModel
+import json
+import os
 
 from src.api.schemas import (
     QueryRequest,
@@ -35,6 +38,15 @@ from src.api.schemas import (
     HealthResponse,
     ErrorResponse,
 )
+
+class FeedbackRequest(BaseModel):
+    query: str
+    rating: int
+    thumbs: str | None = None
+    comment: str
+    model_used: str
+    citations_count: int
+    total_time_ms: float
 from src.rag.pipeline import RAGPipeline
 from src.utils.logger import setup_logger, get_logger
 
@@ -149,6 +161,36 @@ async def health_check(request: Request) -> HealthResponse:
         version          = "1.0.0",
     )
 
+@app.post(
+    "/query/stream",
+    summary        = "Stream query research papers",
+    tags           = ["RAG"],
+)
+async def stream_query_papers(
+    request:     Request,
+    query_input: QueryRequest,
+):
+    pipeline = request.app.state.rag_pipeline
+    return StreamingResponse(
+        pipeline.stream_query(
+            question        = query_input.question,
+            top_k           = query_input.top_k,
+            filter_category = query_input.filter_category,
+            filter_year_gte = query_input.filter_year_gte,
+        ),
+        media_type="text/event-stream"
+    )
+
+@app.post(
+    "/feedback",
+    summary        = "Submit feedback",
+    tags           = ["System"],
+)
+async def submit_feedback(feedback: FeedbackRequest):
+    os.makedirs("logs", exist_ok=True)
+    with open("logs/feedback.jsonl", "a", encoding="utf-8") as f:
+        f.write(json.dumps(feedback.model_dump()) + "\n")
+    return {"status": "ok"}
 
 @app.post(
     "/query",

src/rag/llm_client.py

@@ -1,103 +1,141 @@
-"""
-Groq API client for LLM inference.
-
-WHY GROQ:
-    - Free tier: 14,400 requests/day with Llama3
-    - Speed: ~500 tokens/second (vs 10 tokens/second local CPU)
-    - No GPU needed on our machine
-    - Production-quality latency for demos
-
-WHY LLAMA3-8B:
-    - Free on Groq
-    - 8B parameters: strong reasoning for research QA
-    - 8192 token context window: fits our 5 retrieved chunks
-    - Fast: ~1-2 seconds for a full response
-"""
-
 import os
+import json
+import requests
 from groq import Groq
 from src.utils.logger import get_logger
 from config.settings import (
     GROQ_API_KEY,
-    LLM_MODEL_NAME,
+    HF_API_KEY,
     LLM_TEMPERATURE,
     LLM_MAX_TOKENS,
 )
 
 logger = get_logger(__name__)
 
-
-class LLMClient:
+class MultiModelClient:
     """
-    Wrapper around Groq API for LLM inference.
-
-    Designed as a simple interface so we can swap
-    to any other LLM provider (OpenAI, Anthropic, local)
-    by changing only this file.
+    Multi-model LLM client with Qwen primary and Groq backup.
+    Supports code routing based on keywords.
     """
 
-
     def __init__(self):
-        if not GROQ_API_KEY:
-            raise ValueError(
-                "GROQ_API_KEY not found. "
-                "Add it to your .env file: GROQ_API_KEY=gsk_..."
-            )
-        self.client = Groq(api_key = GROQ_API_KEY)
-        self.model  = LLM_MODEL_NAME
-        logger.info(f"LLMClient initialized with model: {self.model}")
-
+        if GROQ_API_KEY:
+            self.groq_client = Groq(api_key=GROQ_API_KEY)
+        else:
+            self.groq_client = None
+
+        self.hf_api_key = HF_API_KEY
+
+        self.primary_model = "Qwen/Qwen2.5-72B-Instruct"
+        self.secondary_model = "llama-3.3-70b-versatile"
+        self.code_model = "Qwen/Qwen2.5-Coder-7B-Instruct"
+
+        self.code_keywords = ["code", "implement", "function", "class", "python", "algorithm", "write a", "script"]
+
+    def get_model_for_query(self, question: str):
+        q_lower = question.lower()
+        if any(kw in q_lower for kw in self.code_keywords):
+            return [self.code_model, self.primary_model, self.secondary_model]
+        return [self.primary_model, self.secondary_model]
+
+    def _call_hf(self, model_id, messages, temperature, max_tokens, stream=False):
+        if not self.hf_api_key:
+            raise ValueError("HF_API_KEY not configured")
+
+        url = f"https://api-inference.huggingface.co/models/{model_id}/v1/chat/completions"
+        headers = {
+            "Authorization": f"Bearer {self.hf_api_key}",
+            "Content-Type": "application/json"
+        }
+        payload = {
+            "model": model_id,
+            "messages": messages,
+            "max_tokens": max_tokens,
+            "temperature": temperature,
+            "stream": stream
+        }
+
+        response = requests.post(url, headers=headers, json=payload, stream=stream)
+        if response.status_code == 429:
+            raise Exception("Rate limit (HTTP 429)")
+        if not response.ok:
+            raise Exception(f"HF Error: {response.text}")
+
+        if stream:
+            def generator():
+                for line in response.iter_lines():
+                    if line:
+                        line = line.decode('utf-8')
+                        if line.startswith("data: "):
+                            data_str = line[6:]
+                            if data_str.strip() == "[DONE]":
+                                break
+                            try:
+                                data = json.loads(data_str)
+                                token = data["choices"][0]["delta"].get("content", "")
+                                if token:
+                                    yield token
+                            except:
+                                pass
+            return generator()
+        else:
+            return response.json()["choices"][0]["message"]["content"]
+
+    def _call_groq(self, model_id, messages, temperature, max_tokens, stream=False):
+        if not self.groq_client:
+            raise ValueError("GROQ_API_KEY not configured")
+
+        response = self.groq_client.chat.completions.create(
+            model=model_id,
+            messages=messages,
+            temperature=temperature,
+            max_tokens=max_tokens,
+            stream=stream
+        )
+        if stream:
+            def generator():
+                for chunk in response:
+                    token = chunk.choices[0].delta.content
+                    if token:
+                        yield token
+            return generator()
+        else:
+            return response.choices[0].message.content
 
     def generate(
         self,
         system_prompt: str,
-        user_prompt:   str,
-        temperature:   float = LLM_TEMPERATURE,
-        max_tokens:    int   = LLM_MAX_TOKENS,
-    ) -> str:
+        user_prompt: str,
+        original_query: str = "",
+        temperature: float = LLM_TEMPERATURE,
+        max_tokens: int = LLM_MAX_TOKENS,
+        stream: bool = False
+    ):
         """
-        Generate a response from the LLM.
-
-        Args:
-            system_prompt: Instructions for the LLM's behavior
-            user_prompt:   The actual question + context
-            temperature:   0.0 = deterministic, 1.0 = creative
-                          We use 0.1 for factual research QA
-            max_tokens:    Maximum response length
-
-        Returns:
-            Generated text string
-
-        GROQ API STRUCTURE:
-            Uses OpenAI-compatible chat format:
-            [{"role": "system", "content": "..."}, 
-             {"role": "user",   "content": "..."}]
+        Generate response trying models in priority order.
+        Returns a tuple of (result, model_used).
+        If stream=True, result is a generator.
+        Otherwise, result is a string.
         """
-
-        try:
-            response = self.client.chat.completions.create(
-                model       = self.model,
-                messages    = [
-                    {"role": "system", "content": system_prompt},
-                    {"role": "user", "content": user_prompt}
-                ],
-                temperature = temperature,
-                max_tokens  = max_tokens,
-            )
-
-            answer = response.choices[0].message.content
-
-            # Log token usage for monitoring
-            usage = response.usage
-            logger.debug(
-                f"LLM usage - "
-                f"prompt: {usage.prompt_tokens} tokens, "
-                f"completion: {usage.completion_tokens} tokens, "
-                f"total: {usage.total_tokens} tokens"
-            )
-
-            return answer
-
-        except Exception as e:
-            logger.error(f"LLM generation failed: {e}")
-            raise
+        models_to_try = self.get_model_for_query(original_query)
+        messages = [
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": user_prompt}
+        ]
+
+        for model in models_to_try:
+            try:
+                is_hf = "Qwen" in model
+                logger.info(f"Attempting model: {model}")
+                if is_hf:
+                    out = self._call_hf(model, messages, temperature, max_tokens, stream)
+                else:
+                    out = self._call_groq(model, messages, temperature, max_tokens, stream)
+                
+                logger.info(f"Model {model} selected successfully.")
+                return out, model
+            except Exception as e:
+                logger.warning(f"Model {model} failed: {e}")
+                continue
+
+        raise Exception("All models failed.")

src/rag/pipeline.py

@@ -13,11 +13,12 @@ PIPELINE FLOW:
 """
 
 import time
+import json
 from dataclasses import dataclass, field
 from typing import Optional
 
 from src.retrieval.retrieval_pipeline import RetrievalPipeline
-from src.rag.llm_client import LLMClient
+from src.rag.llm_client import MultiModelClient
 from src.rag.prompt_templates import (
     SYSTEM_PROMPT,
     build_rag_prompt,
@@ -31,32 +32,15 @@ logger = get_logger(__name__)
 
 @dataclass
 class RAGResponse:
-    """
-    Structured response from the RAG pipeline.
-
-    WHY A DATACLASS INSTEAD OF A DICT:
-        Dicts can have any keys - you never know what's in them.
-        A dataclass defines the exact contract. The FastAPI layer
-        (Phase 11) and frontend (Phase 12) can rely on these
-        fields always being present.
-    """
-    # The generated answer
     answer:     str
-
-    # Source papers used to generate the answer
     citations:  list[dict]
-
-    # Raw retrieved chunks (for debugging / evaluation)
     retrieved_chunks: list[dict]
-
-    # Performance metadata
     query:      str
     retrieval_time_ms: float
     generation_time_ms: float
     total_time_ms:  float
-
-    # Whether retrieval found retrieval content
     has_context:    bool
+    model_used:     str = ""
 
 
     def to_dict(self) -> dict:
@@ -69,29 +53,14 @@ class RAGResponse:
             "total_time_ms":      round(self.total_time_ms, 1),
             "has_context":        self.has_context,
             "chunks_used":        len(self.retrieved_chunks),
+            "model_used":         self.model_used,
         }
 
-
-
-
 class RAGPipeline:
-    """
-    End-to-end RAG pipeline: query -> retrieve -> generate -> respond.
-
-    Usage:
-        pipeline = RAGPipeline()
-        response = pipeline.query("How does LoRA reduce training parameters?")
-        print(response.answer)
-        for cite in response.citations:
-            print(cite["title"], cite["arxiv_url"])
-    """
-
     def __init__(self):
         logger.info("Initializing RAGPipeline...")
-
         self.retriever  = RetrievalPipeline()
-        self.llm        = LLMClient()
-
+        self.llm        = MultiModelClient()
         logger.info("RAGPipeline ready")
 
     def query(
@@ -101,26 +70,11 @@ class RAGPipeline:
         filter_category: Optional[str] = None,
         filter_year_gte: Optional[int] = None,
     ) -> RAGResponse:
-        """
-        Process a user question through the full RAG pipeline.
-
-        Args:
-            question:        User's natural language question
-            top_k:           Number of chunks to retrieve
-            filter_category: Optional ArXiv category filter
-            filter_year_gte: Optional year filter
-
-        Returns:
-            RAGResponse with answer, citations, and timing metadata
-        """
         question = question.strip()
-
         if not question:
             raise ValueError("Question cannot be empty")
 
         total_start = time.time()
-
-        # ------------ Stage 1: Retrieval ------------
         retrieval_start = time.time()
 
         chunks = self.retriever.retrieve(
@@ -129,20 +83,12 @@ class RAGPipeline:
             filter_category = filter_category,
             filter_year_gte = filter_year_gte,
         )
-
         retrieval_ms = (time.time() - retrieval_start) * 1000
-
-        logger.info(
-            f"Retrieved: {len(chunks)} chunks in {retrieval_ms:.0f}ms"
-        )
-
         has_context = len(chunks) > 0
 
-        # ------------ Stage 2: Prompt Construction ------------
         if has_context:
             user_prompt = build_rag_prompt(question, chunks)
         else:
-            # Fallback prompt when no relevant context found
             user_prompt = (
                 f"The user asked: {question}\n\n"
                 f"No relevant research papers were found in the database. "
@@ -150,23 +96,16 @@ class RAGPipeline:
                 f"or broadening their query."
             )
 
-        # ------------ Stage 3: LLM Generation ------------
         generation_start = time.time()
-
-        answer = self.llm.generate(
+        answer, model_used = self.llm.generate(
             system_prompt = SYSTEM_PROMPT,
             user_prompt   = user_prompt,
+            original_query = question,
+            stream=False
         )
 
         generation_ms   = (time.time() - generation_start) * 1000
         total_ms        = (time.time() - total_start) * 1000
-
-        logger.info(
-            f"Generated answer in {generation_ms:.0f}ms | "
-            f"Total: {total_ms:.0f}ms"
-        )
-
-        # ------------ Stage 4: Build Citations ------------
         citations = build_citation_list(chunks)
 
         return RAGResponse(
@@ -178,4 +117,65 @@ class RAGPipeline:
             generation_time_ms = generation_ms,
             total_time_ms      = total_ms,
             has_context        = has_context,
-        )
+            model_used         = model_used
+        )
+
+    def stream_query(
+        self,
+        question:        str,
+        top_k:           int = TOP_K_RERANK,
+        filter_category: Optional[str] = None,
+        filter_year_gte: Optional[int] = None,
+    ):
+        question = question.strip()
+        if not question:
+            raise ValueError("Question cannot be empty")
+
+        total_start = time.time()
+        retrieval_start = time.time()
+        chunks = self.retriever.retrieve(
+            query           =  question,
+            top_k_final     = top_k,
+            filter_category = filter_category,
+            filter_year_gte = filter_year_gte,
+        )
+        retrieval_ms = (time.time() - retrieval_start) * 1000
+        has_context = len(chunks) > 0
+
+        if has_context:
+            user_prompt = build_rag_prompt(question, chunks)
+        else:
+            user_prompt = (
+                f"The user asked: {question}\n\n"
+                f"No relevant research papers were found in the database. "
+                f"Politely inform the user and suggest they try rephrasing "
+                f"or broadening their query."
+            )
+
+        generation_start = time.time()
+        generator, model_used = self.llm.generate(
+            system_prompt = SYSTEM_PROMPT,
+            user_prompt   = user_prompt,
+            original_query = question,
+            stream=True
+        )
+
+        for token in generator:
+            yield f"data: {json.dumps({'token': token})}\n\n"
+
+        generation_ms = (time.time() - generation_start) * 1000
+        total_ms = (time.time() - total_start) * 1000
+        citations = build_citation_list(chunks)
+
+        metadata = {
+            "done": True,
+            "citations": citations,
+            "model_used": model_used,
+            "timing": {
+                "retrieval_time_ms": round(retrieval_ms, 1),
+                "generation_time_ms": round(generation_ms, 1),
+                "total_time_ms": round(total_ms, 1),
+                "chunks_used": len(chunks)
+            }
+        }
+        yield f"data: {json.dumps(metadata)}\n\n"