Major upgrade: comprehensive document analysis

.gitignore

@@ -1,6 +1,6 @@
 node_modules/
-.env
 dist/
+.env
 .DS_Store
-uploads/*.pdf
-uploads/*.txt
+backend/uploads/*
+!backend/uploads/.gitkeep

README-hf.md

@@ -0,0 +1,11 @@
+---
+title: Smart Document Search
+emoji: 🔍
+colorFrom: yellow
+colorTo: green
+sdk: docker
+pinned: false
+---
+
+# Smart Document Search
+Upload PDFs and text files, then ask questions in natural language. AI finds answers with source citations.

README.md

@@ -1,11 +1,43 @@
----
-title: Smart Document Search
-emoji: "\U0001F50D"
-colorFrom: yellow
-colorTo: green
-sdk: docker
-pinned: false
----
-
 # Smart Document Search
-Upload PDFs and text files, then ask questions in natural language. AI finds answers with source citations.
+
+Upload PDFs and text files, then ask questions in natural language. AI finds answers from your documents with source citations.
+
+## Features
+
+- **Upload PDF/TXT** - Drag-and-drop document upload
+- **Auto-summarization** - AI summarizes each uploaded document
+- **Natural language Q&A** - Ask anything about your documents
+- **Source citations** - Every answer references which document it came from
+- **Conversation memory** - Follow-up questions understand context
+- **Multi-document** - Search across all uploaded documents simultaneously
+
+## Quick Start
+
+```bash
+# Backend
+cd backend
+cp .env.example .env
+npm install
+npm start            # Port 3004
+
+# Frontend
+cd frontend
+npm install
+npm run dev          # Port 5177
+```
+
+### AI Setup (choose one - both are FREE)
+
+| Provider | Best For | Setup |
+|----------|----------|-------|
+| **Groq** (cloud) | Deployment, sharing | Get free key at [console.groq.com/keys](https://console.groq.com/keys), add `GROQ_API_KEY` to `.env` |
+| **Ollama** (local) | Development, offline | Install from [ollama.com](https://ollama.com), run `ollama pull llama3.2:3b` |
+
+If both are configured, Groq is used first with Ollama as fallback.
+
+## Tech Stack
+
+- **Frontend**: React 19 + Vite + react-dropzone
+- **Backend**: Express.js + pdf-parse
+- **AI**: Groq (cloud) / Ollama (local) - both free, no paid API needed
+- **Search**: Text chunking with keyword-based retrieval (RAG pattern)

backend/services/ai.js

@@ -8,7 +8,15 @@ async function callAI(prompt) {
     const res = await fetch('https://api.groq.com/openai/v1/chat/completions', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${GROQ_API_KEY}` },
-      body: JSON.stringify({ model: GROQ_MODEL, messages: [{ role: 'user', content: prompt }], temperature: 0.7 }),
+      body: JSON.stringify({
+        model: GROQ_MODEL,
+        messages: [
+          { role: 'system', content: 'You are an expert document analyst. Always return valid JSON when asked. Never wrap JSON in markdown code blocks.' },
+          { role: 'user', content: prompt }
+        ],
+        temperature: 0.3,
+        max_tokens: 4096,
+      }),
     });
     if (res.ok) { const data = await res.json(); return data.choices[0].message.content; }
     console.warn('Groq failed, falling back to Ollama...');
@@ -23,39 +31,47 @@ async function callAI(prompt) {
 }
 
 function parseJSON(text) {
-  try { return JSON.parse(text.trim()); }
-  catch { const m = text.match(/\{[\s\S]*\}/); if (m) return JSON.parse(m[0]); throw new Error('Failed to parse AI response'); }
+  try {
+    return JSON.parse(text.trim());
+  } catch {
+    const stripped = text.replace(/```(?:json)?\s*/gi, "").replace(/```/g, "").trim();
+    try { return JSON.parse(stripped); } catch {}
+    const m = stripped.match(/\{[\s\S]*\}/);
+    if (m) return JSON.parse(m[0]);
+    throw new Error("Failed to parse AI response as JSON");
+  }
 }
 
-async function answerQuestion(question, relevantChunks) {
+async function answerQuestion(question, relevantChunks, history = []) {
   const context = relevantChunks.map((c, i) =>
     `[Source ${i + 1} - ${c.filename}]:\n${c.text}`
   ).join('\n\n---\n\n');
 
-  const answer = await callAI(`You are a helpful document research assistant. Answer based on the provided documents only. Cite sources. Be honest when info is not available.
+  const answer = await callAI(`You are a highly skilled document research assistant. Answer questions based ONLY on the provided documents. Always cite your sources using [Source N] notation. If the information is not available, say so honestly.
 
 DOCUMENT CONTEXT:
 ${context}
 
 QUESTION: ${question}
 
-Provide a clear answer.`);
+Provide a thorough, well-structured answer. Use bullet points or numbered lists when appropriate. Cite specific sources.`);
 
   return {
     answer,
-    sourcesUsed: relevantChunks.map(c => ({ filename: c.filename, preview: c.text.substring(0, 100) + '...' })),
+    sourcesUsed: relevantChunks.map(c => ({ filename: c.filename, preview: c.text.substring(0, 120) + '...' })),
   };
 }
 
 async function summarizeDocument(text, filename) {
-  const truncated = text.substring(0, 10000);
-  const responseText = await callAI(`Summarize this document. Return ONLY valid JSON:
-{"title":"<title>","summary":"<3-5 sentences>","keyTopics":["<t1>","<t2>","<t3>"],"documentType":"<report|article|manual|contract|research|other>","keyFacts":["<f1>","<f2>","<f3>"]}
+  const truncated = text.substring(0, 12000);
+  const wordCount = text.split(/\s+/).length;
+  const schemaPath = require("path").join(__dirname, "analysis_schema.json");
+  const schema = require("fs").readFileSync(schemaPath, "utf8");
 
-DOCUMENT (${filename}):
-${truncated}
+  const preamble = "You are an expert document analyst. Perform a comprehensive analysis of this document and return ONLY valid JSON (no markdown, no code fences).\n\nReturn this exact JSON structure:\n";
+  const suffix = "\n\nDOCUMENT (" + filename + ", ~" + wordCount + " words):\n" + truncated + "\n\nReturn ONLY the JSON object. No explanation, no markdown.";
+  const responseText = await callAI(preamble + schema + suffix);
 
-Return ONLY JSON, no markdown.`);
   return parseJSON(responseText);
 }
 

backend/services/analysis_schema.json

@@ -0,0 +1,107 @@
+{
+  "title": "<extracted or inferred document title>",
+  "documentType": "<report|article|manual|contract|research|legal|email|memo|presentation|other>",
+  "summary": {
+    "oneSentence": "<concise 1-sentence TL;DR>",
+    "oneParagraph": "<3-5 sentence summary covering main points>",
+    "detailed": "<comprehensive 6-10 sentence summary with all key details>"
+  },
+  "keyTopics": [
+    "<topic1>",
+    "<topic2>",
+    "<topic3>",
+    "<topic4>",
+    "<topic5>"
+  ],
+  "keyInsights": [
+    {
+      "insight": "<key finding or insight>",
+      "confidence": 0.9,
+      "section": "<where found>"
+    },
+    {
+      "insight": "<key finding or insight>",
+      "confidence": 0.8,
+      "section": "<where found>"
+    },
+    {
+      "insight": "<key finding or insight>",
+      "confidence": 0.7,
+      "section": "<where found>"
+    }
+  ],
+  "entities": {
+    "people": [
+      "<person names mentioned>"
+    ],
+    "organizations": [
+      "<org names mentioned>"
+    ],
+    "dates": [
+      "<important dates mentioned>"
+    ],
+    "amounts": [
+      "<monetary amounts, statistics, quantities>"
+    ],
+    "locations": [
+      "<places mentioned>"
+    ]
+  },
+  "structureAnalysis": {
+    "hasHeadings": true,
+    "estimatedSections": 5,
+    "sectionNames": [
+      "<section1>",
+      "<section2>"
+    ],
+    "organizationQuality": "<excellent|good|fair|poor>",
+    "organizationNotes": "<brief note on document structure>"
+  },
+  "readability": {
+    "level": "<elementary|middle_school|high_school|college|graduate|professional>",
+    "fleschKincaidGrade": 10,
+    "notes": "<brief readability assessment>"
+  },
+  "sentimentAnalysis": {
+    "overall": "<positive|negative|neutral|mixed>",
+    "tone": "<formal|informal|technical|persuasive|informative|emotional>",
+    "sectionSentiments": [
+      {
+        "section": "<section name or area>",
+        "sentiment": "<positive|negative|neutral>",
+        "note": "<why>"
+      }
+    ]
+  },
+  "factsVsOpinions": {
+    "factStatements": [
+      "<verifiable factual claim from doc>",
+      "<another fact>"
+    ],
+    "opinionStatements": [
+      "<subjective opinion from doc>",
+      "<another opinion>"
+    ],
+    "ratio": "<mostly_factual|balanced|mostly_opinion>"
+  },
+  "relatedQuestions": [
+    "<question this document can answer 1>",
+    "<question this document can answer 2>",
+    "<question this document can answer 3>",
+    "<question this document can answer 4>",
+    "<question this document can answer 5>"
+  ],
+  "citationsCheck": {
+    "hasCitations": false,
+    "citationCount": 0,
+    "quality": "<strong|adequate|weak|none>",
+    "notes": "<assessment of references or citations>"
+  },
+  "keyFacts": [
+    "<fact1>",
+    "<fact2>",
+    "<fact3>",
+    "<fact4>",
+    "<fact5>"
+  ]
+}

frontend/src/App.jsx

@@ -2,12 +2,298 @@ import React, { useState, useRef, useEffect } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { uploadDocument, deleteDocument, askQuestion } from './utils/api';
 
+function ConfidenceBar({ value }) {
+  const pct = Math.round((value || 0) * 100);
+  const color = pct >= 80 ? '#34d399' : pct >= 60 ? '#fbbf24' : '#f87171';
+  return (
+    <div className="confidence-bar">
+      <div className="confidence-fill" style={{ width: pct + '%', backgroundColor: color }} />
+      <span>{pct}%</span>
+    </div>
+  );
+}
+
+function Badge({ text, color }) {
+  return <span className={"badge badge-" + color}>{text}</span>;
+}
+
+function Section({ title, children, defaultOpen = false }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className="analysis-section">
+      <div className="section-header" onClick={() => setOpen(!open)}>
+        <span>{open ? '▼' : '▶'} {title}</span>
+      </div>
+      {open && <div className="section-body">{children}</div>}
+    </div>
+  );
+}
+
+function AnalysisPanel({ summary }) {
+  const [activeTab, setActiveTab] = useState('overview');
+  if (!summary) return null;
+  const s = summary;
+
+  const tabs = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'insights', label: 'Key Insights' },
+    { id: 'entities', label: 'Entities' },
+    { id: 'structure', label: 'Structure' },
+    { id: 'sentiment', label: 'Sentiment' },
+    { id: 'facts', label: 'Facts/Opinions' },
+    { id: 'questions', label: 'Questions' },
+    { id: 'citations', label: 'Citations' },
+  ];
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'overview':
+        return (
+          <div>
+            <Section title="TL;DR (1 sentence)" defaultOpen={true}>
+              <p className="summary-text">{s.summary?.oneSentence || (typeof s.summary === 'string' ? s.summary : '')}</p>
+            </Section>
+            <Section title="Summary (1 paragraph)">
+              <p className="summary-text">{s.summary?.oneParagraph}</p>
+            </Section>
+            <Section title="Detailed Summary">
+              <p className="summary-text">{s.summary?.detailed}</p>
+            </Section>
+            <Section title="Key Topics" defaultOpen={true}>
+              <div className="tag-list">
+                {(s.keyTopics || []).map((t, i) => <Badge key={i} text={t} color="blue" />)}
+              </div>
+            </Section>
+            <Section title="Key Facts">
+              <ul className="fact-list">
+                {(s.keyFacts || []).map((f, i) => <li key={i}>{f}</li>)}
+              </ul>
+            </Section>
+            {s.readability && (
+              <Section title="Readability">
+                <div className="readability-info">
+                  <Badge text={'Level: ' + (s.readability.level || 'N/A')} color="purple" />
+                  <Badge text={'Grade: ' + (s.readability.fleschKincaidGrade || 'N/A')} color="green" />
+                  <p>{s.readability.notes}</p>
+                </div>
+              </Section>
+            )}
+            <div className="doc-meta">
+              <Badge text={'Type: ' + (s.documentType || 'unknown')} color="gray" />
+              {s.title && <Badge text={s.title} color="blue" />}
+            </div>
+          </div>
+        );
+
+      case 'insights':
+        return (
+          <div>
+            {(s.keyInsights || []).map((ins, i) => (
+              <div key={i} className="insight-card">
+                <p className="insight-text">{ins.insight}</p>
+                <div className="insight-meta">
+                  <ConfidenceBar value={ins.confidence} />
+                  {ins.section && <Badge text={ins.section} color="gray" />}
+                </div>
+              </div>
+            ))}
+            {(!s.keyInsights || s.keyInsights.length === 0) && <p className="empty-note">No insights extracted</p>}
+          </div>
+        );
+
+      case 'entities':
+        return (
+          <div>
+            {s.entities ? (
+              <div className="entity-grid">
+                {s.entities.people?.length > 0 && (
+                  <div className="entity-group">
+                    <h4>People</h4>
+                    <div className="tag-list">{s.entities.people.map((e, i) => <Badge key={i} text={e} color="blue" />)}</div>
+                  </div>
+                )}
+                {s.entities.organizations?.length > 0 && (
+                  <div className="entity-group">
+                    <h4>Organizations</h4>
+                    <div className="tag-list">{s.entities.organizations.map((e, i) => <Badge key={i} text={e} color="purple" />)}</div>
+                  </div>
+                )}
+                {s.entities.dates?.length > 0 && (
+                  <div className="entity-group">
+                    <h4>Dates</h4>
+                    <div className="tag-list">{s.entities.dates.map((e, i) => <Badge key={i} text={e} color="green" />)}</div>
+                  </div>
+                )}
+                {s.entities.amounts?.length > 0 && (
+                  <div className="entity-group">
+                    <h4>Amounts/Statistics</h4>
+                    <div className="tag-list">{s.entities.amounts.map((e, i) => <Badge key={i} text={e} color="yellow" />)}</div>
+                  </div>
+                )}
+                {s.entities.locations?.length > 0 && (
+                  <div className="entity-group">
+                    <h4>Locations</h4>
+                    <div className="tag-list">{s.entities.locations.map((e, i) => <Badge key={i} text={e} color="red" />)}</div>
+                  </div>
+                )}
+              </div>
+            ) : <p className="empty-note">No entities extracted</p>}
+          </div>
+        );
+
+      case 'structure':
+        return (
+          <div>
+            {s.structureAnalysis ? (
+              <div>
+                <div className="structure-badges">
+                  <Badge text={'Headings: ' + (s.structureAnalysis.hasHeadings ? 'Yes' : 'No')} color={s.structureAnalysis.hasHeadings ? 'green' : 'red'} />
+                  <Badge text={'Sections: ~' + (s.structureAnalysis.estimatedSections || '?')} color="blue" />
+                  <Badge text={'Quality: ' + (s.structureAnalysis.organizationQuality || 'N/A')} color={
+                    s.structureAnalysis.organizationQuality === 'excellent' ? 'green' :
+                    s.structureAnalysis.organizationQuality === 'good' ? 'blue' :
+                    s.structureAnalysis.organizationQuality === 'fair' ? 'yellow' : 'red'
+                  } />
+                </div>
+                {s.structureAnalysis.sectionNames?.length > 0 && (
+                  <div className="section-names">
+                    <h4>Sections Found:</h4>
+                    <ul>{s.structureAnalysis.sectionNames.map((n, i) => <li key={i}>{n}</li>)}</ul>
+                  </div>
+                )}
+                {s.structureAnalysis.organizationNotes && <p className="structure-notes">{s.structureAnalysis.organizationNotes}</p>}
+              </div>
+            ) : <p className="empty-note">No structure analysis available</p>}
+          </div>
+        );
+
+      case 'sentiment':
+        return (
+          <div>
+            {s.sentimentAnalysis ? (
+              <div>
+                <div className="sentiment-overview">
+                  <Badge text={'Overall: ' + (s.sentimentAnalysis.overall || 'N/A')} color={
+                    s.sentimentAnalysis.overall === 'positive' ? 'green' :
+                    s.sentimentAnalysis.overall === 'negative' ? 'red' :
+                    s.sentimentAnalysis.overall === 'mixed' ? 'yellow' : 'gray'
+                  } />
+                  <Badge text={'Tone: ' + (s.sentimentAnalysis.tone || 'N/A')} color="purple" />
+                </div>
+                {s.sentimentAnalysis.sectionSentiments?.length > 0 && (
+                  <div className="section-sentiments">
+                    <h4>By Section:</h4>
+                    {s.sentimentAnalysis.sectionSentiments.map((ss, i) => (
+                      <div key={i} className="sentiment-item">
+                        <Badge text={ss.section} color="gray" />
+                        <Badge text={ss.sentiment} color={ss.sentiment === 'positive' ? 'green' : ss.sentiment === 'negative' ? 'red' : 'gray'} />
+                        {ss.note && <span className="sentiment-note">{ss.note}</span>}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ) : <p className="empty-note">No sentiment analysis available</p>}
+          </div>
+        );
+
+      case 'facts':
+        return (
+          <div>
+            {s.factsVsOpinions ? (
+              <div>
+                <div className="facts-ratio">
+                  <Badge text={'Ratio: ' + (s.factsVsOpinions.ratio || 'N/A')} color={
+                    s.factsVsOpinions.ratio === 'mostly_factual' ? 'green' :
+                    s.factsVsOpinions.ratio === 'balanced' ? 'blue' : 'yellow'
+                  } />
+                </div>
+                {s.factsVsOpinions.factStatements?.length > 0 && (
+                  <div className="facts-section">
+                    <h4>Factual Statements:</h4>
+                    <ul className="fact-list">{s.factsVsOpinions.factStatements.map((f, i) => <li key={i} className="fact-item">{f}</li>)}</ul>
+                  </div>
+                )}
+                {s.factsVsOpinions.opinionStatements?.length > 0 && (
+                  <div className="opinions-section">
+                    <h4>Opinion Statements:</h4>
+                    <ul className="opinion-list">{s.factsVsOpinions.opinionStatements.map((o, i) => <li key={i} className="opinion-item">{o}</li>)}</ul>
+                  </div>
+                )}
+              </div>
+            ) : <p className="empty-note">No fact/opinion analysis available</p>}
+          </div>
+        );
+
+      case 'questions':
+        return (
+          <div>
+            {s.relatedQuestions?.length > 0 ? (
+              <div className="questions-list">
+                <p className="questions-intro">This document can help answer:</p>
+                {s.relatedQuestions.map((q, i) => (
+                  <div key={i} className="question-item">
+                    <span className="q-number">{i + 1}</span>
+                    <span>{q}</span>
+                  </div>
+                ))}
+              </div>
+            ) : <p className="empty-note">No related questions identified</p>}
+          </div>
+        );
+
+      case 'citations':
+        return (
+          <div>
+            {s.citationsCheck ? (
+              <div>
+                <div className="citations-overview">
+                  <Badge text={'Has Citations: ' + (s.citationsCheck.hasCitations ? 'Yes' : 'No')} color={s.citationsCheck.hasCitations ? 'green' : 'red'} />
+                  <Badge text={'Count: ' + (s.citationsCheck.citationCount || 0)} color="blue" />
+                  <Badge text={'Quality: ' + (s.citationsCheck.quality || 'N/A')} color={
+                    s.citationsCheck.quality === 'strong' ? 'green' :
+                    s.citationsCheck.quality === 'adequate' ? 'blue' :
+                    s.citationsCheck.quality === 'weak' ? 'yellow' : 'red'
+                  } />
+                </div>
+                {s.citationsCheck.notes && <p className="citations-notes">{s.citationsCheck.notes}</p>}
+              </div>
+            ) : <p className="empty-note">No citation analysis available</p>}
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="analysis-panel">
+      <div className="tab-bar">
+        {tabs.map(tab => (
+          <button
+            key={tab.id}
+            className={'tab-btn' + (activeTab === tab.id ? ' active' : '')}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="tab-content">
+        {renderContent()}
+      </div>
+    </div>
+  );
+}
+
 export default function App() {
   const [documents, setDocuments] = useState([]);
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState('');
   const [loading, setLoading] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const [selectedDoc, setSelectedDoc] = useState(null);
   const [sessionId] = useState(() => crypto.randomUUID());
   const messagesEnd = useRef(null);
 
@@ -21,19 +307,22 @@ export default function App() {
         setUploading(true);
         try {
           const data = await uploadDocument(file);
-          setDocuments(prev => [...prev, {
+          const doc = {
             id: data.document.id,
             filename: data.document.filename,
             summary: data.document.summary,
-          }]);
+          };
+          setDocuments(prev => [...prev, doc]);
+          setSelectedDoc(doc);
+          const tldr = data.document.summary?.summary?.oneSentence || data.document.summary?.summary || '';
           setMessages(prev => [...prev, {
             role: 'assistant',
-            content: `Uploaded "${data.document.filename}" (${data.document.chunkCount} chunks). ${data.document.summary?.summary || ''}`,
+            content: 'Uploaded "' + data.document.filename + '" (' + data.document.chunkCount + ' chunks). ' + tldr,
           }]);
         } catch (err) {
           setMessages(prev => [...prev, {
             role: 'assistant',
-            content: `Failed to upload ${file.name}: ${err.message}`,
+            content: 'Failed to upload ' + file.name + ': ' + err.message,
           }]);
         }
         setUploading(false);
@@ -46,16 +335,15 @@ export default function App() {
   const handleRemoveDoc = async (id) => {
     await deleteDocument(id);
     setDocuments(prev => prev.filter(d => d.id !== id));
+    if (selectedDoc?.id === id) setSelectedDoc(null);
   };
 
   const handleAsk = async () => {
     if (!input.trim() || loading) return;
-
     const question = input.trim();
     setInput('');
     setMessages(prev => [...prev, { role: 'user', content: question }]);
     setLoading(true);
-
     try {
       const docIds = documents.map(d => d.id);
       const data = await askQuestion(question, docIds, sessionId);
@@ -67,7 +355,7 @@ export default function App() {
     } catch (err) {
       setMessages(prev => [...prev, {
         role: 'assistant',
-        content: `Error: ${err.message}`,
+        content: 'Error: ' + err.message,
       }]);
     }
     setLoading(false);
@@ -84,7 +372,7 @@ export default function App() {
     <div className="app">
       <header className="header">
         <h1>Smart Document Search</h1>
-        <p>Upload documents. Ask questions. Get answers.</p>
+        <p>Upload documents. Get comprehensive AI analysis. Ask questions.</p>
       </header>
 
       <div className="layout">
@@ -104,26 +392,34 @@ export default function App() {
             {documents.length > 0 && (
               <ul className="doc-list">
                 {documents.map(d => (
-                  <li key={d.id} className="doc-item">
-                    <span className="doc-name" title={d.filename}>{d.filename}</span>
+                  <li key={d.id} className={'doc-item' + (selectedDoc?.id === d.id ? ' selected' : '')}>
+                    <span className="doc-name" title={d.filename} onClick={() => setSelectedDoc(d)}>{d.filename}</span>
                     <button className="doc-remove" onClick={() => handleRemoveDoc(d.id)}>x</button>
                   </li>
                 ))}
               </ul>
             )}
           </div>
+
+          {selectedDoc?.summary && (
+            <div className="sidebar-card analysis-card">
+              <h3>Analysis: {selectedDoc.filename}</h3>
+              <AnalysisPanel summary={selectedDoc.summary} />
+            </div>
+          )}
         </div>
 
         <div className="chat-area">
           <div className="messages">
             {messages.length === 0 && (
               <div className="empty-state">
-                <div className="icon">📄</div>
+                <div className="icon">&#128196;</div>
                 <p>Upload documents and start asking questions</p>
+                <p className="empty-sub">AI will analyze structure, entities, sentiment, readability, and more</p>
               </div>
             )}
             {messages.map((m, i) => (
-              <div key={i} className={`message ${m.role}`}>
+              <div key={i} className={'message ' + m.role}>
                 <div className="bubble">{m.content}</div>
                 {m.sources && m.sources.length > 0 && (
                   <div className="sources">

frontend/src/styles/global.css

@@ -3,13 +3,16 @@
 :root {
   --bg: #0f172a;
   --bg-card: #1e293b;
+  --bg-hover: #253348;
   --accent: #38bdf8;
   --accent2: #818cf8;
   --success: #34d399;
+  --warning: #fbbf24;
   --danger: #f87171;
   --text: #e2e8f0;
   --text-dim: #94a3b8;
   --border: #334155;
+  --border-light: #475569;
 }
 
 body {
@@ -19,37 +22,40 @@ body {
   min-height: 100vh;
 }
 
-.app { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; }
+.app { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
 
-.header { text-align: center; margin-bottom: 2rem; }
+.header { text-align: center; margin-bottom: 1.5rem; }
 .header h1 {
   font-size: 2.2rem; font-weight: 800;
   background: linear-gradient(135deg, #38bdf8, #818cf8);
   -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
 }
-.header p { color: var(--text-dim); margin-top: 0.4rem; }
+.header p { color: var(--text-dim); margin-top: 0.3rem; font-size: 0.95rem; }
 
 /* Layout */
-.layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; }
+.layout { display: grid; grid-template-columns: 380px 1fr; gap: 1.5rem; }
 
 /* Sidebar */
-.sidebar { }
+.sidebar { max-height: calc(100vh - 120px); overflow-y: auto; }
 .sidebar-card { background: var(--bg-card); border-radius: 12px; padding: 1.2rem; margin-bottom: 1rem; }
-.sidebar-card h3 { font-size: 0.95rem; margin-bottom: 0.8rem; }
+.sidebar-card h3 { font-size: 0.95rem; margin-bottom: 0.8rem; color: var(--accent); }
+.analysis-card { max-height: 600px; overflow-y: auto; }
 
 .dropzone {
-  border: 2px dashed var(--border); border-radius: 8px; padding: 1.5rem 1rem;
+  border: 2px dashed var(--border); border-radius: 8px; padding: 1.2rem 1rem;
   text-align: center; cursor: pointer; transition: all 0.3s;
 }
-.dropzone:hover { border-color: var(--accent); }
+.dropzone:hover { border-color: var(--accent); background: rgba(56,189,248,0.05); }
 .dropzone p { color: var(--text-dim); font-size: 0.85rem; }
 
-.doc-list { list-style: none; padding: 0; }
+.doc-list { list-style: none; padding: 0; margin-top: 0.5rem; }
 .doc-item {
   display: flex; justify-content: space-between; align-items: center;
-  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
-  font-size: 0.85rem;
+  padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border);
+  font-size: 0.85rem; cursor: pointer; border-radius: 6px; transition: background 0.2s;
 }
+.doc-item:hover { background: var(--bg-hover); }
+.doc-item.selected { background: rgba(56,189,248,0.1); border-left: 3px solid var(--accent); }
 .doc-item:last-child { border-bottom: none; }
 .doc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .doc-remove {
@@ -57,12 +63,134 @@ body {
   cursor: pointer; font-size: 0.9rem; margin-left: 0.5rem;
 }
 
+/* Analysis Panel */
+.analysis-panel { }
+
+.tab-bar {
+  display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.8rem;
+  border-bottom: 1px solid var(--border); padding-bottom: 0.5rem;
+}
+.tab-btn {
+  background: none; border: none; color: var(--text-dim); font-size: 0.75rem;
+  padding: 0.35rem 0.6rem; cursor: pointer; border-radius: 6px; transition: all 0.2s;
+  white-space: nowrap;
+}
+.tab-btn:hover { color: var(--text); background: var(--bg-hover); }
+.tab-btn.active { color: var(--accent); background: rgba(56,189,248,0.15); font-weight: 600; }
+.tab-content { }
+
+/* Sections */
+.analysis-section { margin-bottom: 0.5rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+.section-header {
+  padding: 0.5rem 0.7rem; cursor: pointer; font-size: 0.82rem; font-weight: 600;
+  background: rgba(255,255,255,0.03); transition: background 0.2s; user-select: none;
+}
+.section-header:hover { background: var(--bg-hover); }
+.section-body { padding: 0.6rem 0.7rem; font-size: 0.82rem; line-height: 1.5; }
+
+/* Summary text */
+.summary-text { color: var(--text); line-height: 1.6; }
+
+/* Tags / Badges */
+.tag-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
+.badge {
+  display: inline-block; padding: 0.2rem 0.5rem; border-radius: 999px;
+  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
+}
+.badge-blue { background: rgba(56,189,248,0.15); color: #38bdf8; }
+.badge-purple { background: rgba(129,140,248,0.15); color: #818cf8; }
+.badge-green { background: rgba(52,211,153,0.15); color: #34d399; }
+.badge-yellow { background: rgba(251,191,36,0.15); color: #fbbf24; }
+.badge-red { background: rgba(248,113,113,0.15); color: #f87171; }
+.badge-gray { background: rgba(148,163,184,0.15); color: #94a3b8; }
+
+/* Confidence bar */
+.confidence-bar {
+  display: flex; align-items: center; gap: 0.5rem;
+  background: var(--bg); border-radius: 999px; height: 18px;
+  overflow: hidden; position: relative; flex: 1; max-width: 120px;
+}
+.confidence-fill {
+  height: 100%; border-radius: 999px; transition: width 0.5s ease;
+  min-width: 2px;
+}
+.confidence-bar span {
+  position: absolute; right: 6px; font-size: 0.65rem; font-weight: 700; color: white;
+}
+
+/* Insights */
+.insight-card {
+  background: var(--bg); border-radius: 8px; padding: 0.6rem;
+  margin-bottom: 0.5rem; border-left: 3px solid var(--accent);
+}
+.insight-text { font-size: 0.82rem; margin-bottom: 0.4rem; }
+.insight-meta { display: flex; align-items: center; gap: 0.5rem; }
+
+/* Entities */
+.entity-grid { display: flex; flex-direction: column; gap: 0.6rem; }
+.entity-group h4 { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 0.3rem; }
+
+/* Structure */
+.structure-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
+.section-names h4 { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 0.3rem; }
+.section-names ul { list-style: disc; padding-left: 1.2rem; font-size: 0.8rem; }
+.section-names li { margin-bottom: 0.2rem; }
+.structure-notes { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.4rem; font-style: italic; }
+
+/* Sentiment */
+.sentiment-overview { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
+.section-sentiments h4 { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 0.3rem; }
+.sentiment-item {
+  display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0;
+  border-bottom: 1px solid var(--border); font-size: 0.8rem;
+}
+.sentiment-item:last-child { border-bottom: none; }
+.sentiment-note { color: var(--text-dim); font-size: 0.75rem; font-style: italic; }
+
+/* Facts vs Opinions */
+.facts-ratio { margin-bottom: 0.6rem; }
+.facts-section h4, .opinions-section h4 { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 0.3rem; }
+.fact-list, .opinion-list { list-style: none; padding: 0; }
+.fact-list li, .opinion-list li {
+  padding: 0.3rem 0.5rem; margin-bottom: 0.3rem; border-radius: 6px;
+  font-size: 0.8rem; line-height: 1.4;
+}
+.fact-item { background: rgba(52,211,153,0.08); border-left: 3px solid var(--success); }
+.opinion-item { background: rgba(251,191,36,0.08); border-left: 3px solid var(--warning); }
+
+/* Questions */
+.questions-intro { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 0.5rem; }
+.question-item {
+  display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0;
+  border-bottom: 1px solid var(--border); font-size: 0.82rem;
+}
+.question-item:last-child { border-bottom: none; }
+.q-number {
+  background: var(--accent); color: var(--bg); border-radius: 50%;
+  width: 20px; height: 20px; display: flex; align-items: center;
+  justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
+}
+
+/* Citations */
+.citations-overview { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
+.citations-notes { font-size: 0.8rem; color: var(--text-dim); font-style: italic; }
+
+/* Readability */
+.readability-info { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
+.readability-info p { width: 100%; margin-top: 0.3rem; font-size: 0.8rem; color: var(--text-dim); }
+
+/* Doc meta */
+.doc-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
+
+/* Empty note */
+.empty-note { color: var(--text-dim); font-size: 0.82rem; font-style: italic; text-align: center; padding: 1rem; }
+
 /* Chat */
 .chat-area { display: flex; flex-direction: column; min-height: 500px; }
 
 .messages {
   flex: 1; background: var(--bg-card); border-radius: 12px; padding: 1rem;
-  overflow-y: auto; max-height: 500px; margin-bottom: 1rem;
+  overflow-y: auto; max-height: 600px; margin-bottom: 1rem;
 }
 
 .message { margin-bottom: 1rem; }
@@ -73,7 +201,7 @@ body {
 }
 .message.assistant .bubble {
   background: var(--bg); padding: 0.7rem 1rem; border-radius: 12px 12px 12px 0;
-  line-height: 1.6; max-width: 90%;
+  line-height: 1.6; max-width: 90%; white-space: pre-wrap;
 }
 .message .sources {
   font-size: 0.8rem; color: var(--text-dim); margin-top: 0.4rem; font-style: italic;
@@ -93,6 +221,7 @@ body {
 
 .empty-state { text-align: center; padding: 3rem; color: var(--text-dim); }
 .empty-state .icon { font-size: 3rem; margin-bottom: 1rem; }
+.empty-sub { font-size: 0.85rem; margin-top: 0.5rem; opacity: 0.7; }
 
 .uploading { text-align: center; padding: 1rem; color: var(--text-dim); font-size: 0.9rem; }
 
@@ -102,7 +231,15 @@ body {
 }
 @keyframes spin { to { transform: rotate(360deg); } }
 
-@media (max-width: 700px) {
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
+
+@media (max-width: 800px) {
   .layout { grid-template-columns: 1fr; }
   .header h1 { font-size: 1.6rem; }
+  .sidebar { max-height: none; }
+  .analysis-card { max-height: 400px; }
 }