Upload web/app/dashboard-pages/analyze/page.tsx

web/app/dashboard-pages/analyze/page.tsx

@@ -1,18 +1,38 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef } from "react";
 import {
   ScanText, ScanLine, TriangleAlert, CircleAlert, CircleCheck, Info,
   FileDown, ChevronDown, ChevronUp, Copy, Check, Upload, FileText,
   ShieldCheck, ShieldAlert, Scale, Gavel, Ban, Globe, Eye, Stamp, FileX,
-  Lock, Sparkles as SparklesIcon, X
+  Lock, Sparkles as SparklesIcon, X, Layers, Landmark, Briefcase,
+  AlertTriangle, Tag, BookOpen, ClipboardList, FileCompare, DollarSign,
+  Calendar, Building, MapPin, Hash
 } from "lucide-react";
 
 interface Cat { name: string; severity: string; description?: string; confidence?: number; }
 interface Clause { text: string; categories: Cat[]; }
-interface Result { risk_score: number; grade: string; total_clauses: number; flagged_count: number; results: Clause[]; model: string; latency_ms: number; }
+interface Entity { text: string; type: string; }
+interface Contradiction { type: string; explanation: string; severity: string; }
+interface Obligation { type: string; party: string; description: string; deadline: string; }
+interface ComplianceCheck { requirement: string; description: string; severity: string; status: string; matched_keywords: string[]; }
+interface ComplianceReg { description: string; compliance_rate: number; checks: ComplianceCheck[]; overall_status: string; }
+interface AnalysisResult {
+  risk_score: number;
+  grade: string;
+  total_clauses: number;
+  flagged_count: number;
+  results: Clause[];
+  entities: Entity[];
+  contradictions: Contradiction[];
+  obligations: Obligation[];
+  compliance: Record<string, ComplianceReg>;
+  model: string;
+  latency_ms: number;
+}
 
 const SEV_CONFIG: Record<string, { icon: any; label: string; text: string; bg: string; border: string }> = {
+  CRITICAL: { icon: AlertTriangle, label: "Critical", text: "text-red-700", bg: "bg-red-50", border: "border-red-300" },
   HIGH: { icon: TriangleAlert, label: "High", text: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
   MEDIUM: { icon: CircleAlert, label: "Medium", text: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200" },
   LOW: { icon: Info, label: "Low", text: "text-blue-600", bg: "bg-blue-50", border: "border-blue-200" },
@@ -20,16 +40,42 @@ const SEV_CONFIG: Record<string, { icon: any; label: string; text: string; bg: s
 
 const GRADE_STYLE: Record<string, string> = {
   A: "bg-emerald-50 text-emerald-700 border-emerald-200",
-  B: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  B: "bg-emerald-50 text-emerald-600 border-emerald-200",
   C: "bg-amber-50 text-amber-700 border-amber-200",
-  D: "bg-red-50 text-red-700 border-red-200",
+  D: "bg-orange-50 text-orange-700 border-orange-200",
   F: "bg-red-50 text-red-700 border-red-200",
 };
 
 const CATEGORY_ICONS: Record<string, any> = {
   "Arbitration": Scale, "Limitation of liability": ShieldAlert, "Unilateral termination": Ban,
   "Unilateral change": FileX, "Content removal": Eye, "Jurisdiction": Globe,
-  "Choice of law": Gavel, "Contract by using": Stamp,
+  "Choice of law": Gavel, "Contract by using": Stamp, "Uncapped Liability": AlertTriangle,
+  "IP Ownership Assignment": Lock, "Non-Compete": Ban, "Governing Law": Gavel,
+  "Termination for Convenience": Ban, "Indemnification": ShieldCheck, "Confidentiality": Lock,
+};
+
+const ENTITY_COLORS: Record<string, { bg: string; text: string; border: string; icon: any }> = {
+  DATE: { bg: "bg-blue-50", text: "text-blue-700", border: "border-blue-200", icon: Calendar },
+  DATE_REF: { bg: "bg-blue-50", text: "text-blue-600", border: "border-blue-200", icon: Calendar },
+  MONEY: { bg: "bg-emerald-50", text: "text-emerald-700", border: "border-emerald-200", icon: DollarSign },
+  PARTY: { bg: "bg-purple-50", text: "text-purple-700", border: "border-purple-200", icon: Building },
+  PARTY_ROLE: { bg: "bg-purple-50", text: "text-purple-600", border: "border-purple-200", icon: Briefcase },
+  JURISDICTION: { bg: "bg-amber-50", text: "text-amber-700", border: "border-amber-200", icon: MapPin },
+  DEFINED_TERM: { bg: "bg-pink-50", text: "text-pink-700", border: "border-pink-200", icon: Hash },
+};
+
+const OBLIGATION_COLORS: Record<string, { bg: string; text: string; icon: any }> = {
+  monetary: { bg: "bg-emerald-50", text: "text-emerald-700", icon: DollarSign },
+  compliance: { bg: "bg-amber-50", text: "text-amber-700", icon: ShieldCheck },
+  reporting: { bg: "bg-blue-50", text: "text-blue-700", icon: ClipboardList },
+  delivery: { bg: "bg-purple-50", text: "text-purple-700", icon: FileText },
+  termination: { bg: "bg-red-50", text: "text-red-700", icon: Ban },
+};
+
+const COMPLIANCE_STATUS: Record<string, { bg: string; text: string }> = {
+  COMPLIANT: { bg: "bg-emerald-50", text: "text-emerald-700" },
+  PARTIAL: { bg: "bg-amber-50", text: "text-amber-700" },
+  "NON-COMPLIANT": { bg: "bg-red-50", text: "text-red-700" },
 };
 
 const EXAMPLE = `By using the Spotify Service, you agree to be bound by these Terms of Use.
@@ -48,11 +94,12 @@ Any dispute shall be finally settled by arbitration in New York County.`;
 
 export default function AnalyzePage() {
   const [text, setText] = useState("");
-  const [results, setResults] = useState<Result | null>(null);
+  const [results, setResults] = useState<AnalysisResult | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
   const [filter, setFilter] = useState<string>("all");
+  const [activeTab, setActiveTab] = useState<string>("clauses");
   const [copied, setCopied] = useState(false);
   const [scanCount, setScanCount] = useState(0);
   const [userPlan, setUserPlan] = useState("free");
@@ -64,7 +111,6 @@ export default function AnalyzePage() {
 
   async function handleAnalyze() {
     if (!text || text.trim().length < 50) { setError("Enter at least 50 characters."); return; }
-
     if (!canScan) { setShowUpgrade(true); return; }
 
     setLoading(true); setError(""); setResults(null); setExpandedIdx(null);
@@ -81,27 +127,17 @@ export default function AnalyzePage() {
   async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0];
     if (!file) return;
-
     if (userPlan === "free") { setShowUpgrade(true); return; }
 
-    setLoading(true);
-    setError("");
-
+    setLoading(true); setError("");
     try {
       const formData = new FormData();
       formData.append("file", file);
-
       const res = await fetch("/api/parse-upload", { method: "POST", body: formData });
-      if (!res.ok) {
-        const err = await res.json();
-        throw new Error(err.error || "Failed to parse file");
-      }
-
+      if (!res.ok) throw new Error((await res.json()).error || "Failed to parse file");
       const { text: extractedText } = await res.json();
       setText(extractedText);
-    } catch (e: any) {
-      setError(e.message || "Could not read file.");
-    }
+    } catch (e: any) { setError(e.message || "Could not read file."); }
     setLoading(false);
     if (fileInputRef.current) fileInputRef.current.value = "";
   }
@@ -119,7 +155,7 @@ export default function AnalyzePage() {
 
   function handleCopy() {
     if (!results) return;
-    const summary = `ClauseGuard Report\nRisk: ${results.risk_score}/100 (Grade ${results.grade})\n${results.flagged_count} of ${results.total_clauses} clauses flagged\n\n` +
+    const summary = `ClauseGuard Report\nRisk: ${results.risk_score}/100 (Grade ${results.grade})\n${results.flagged_count} of ${results.total_clauses} clauses flagged\nEntities: ${results.entities.length} found\nContradictions: ${results.contradictions.length} detected\n\n` +
       results.results.filter(r => r.categories.length > 0).map((r, i) =>
         `${i+1}. [${r.categories.map(c => c.name).join(", ")}] ${r.text.slice(0, 100)}...`
       ).join("\n");
@@ -130,82 +166,87 @@ export default function AnalyzePage() {
   const flagged = results?.results.filter(r => r.categories.length > 0) || [];
   const filtered = filter === "all" ? flagged : flagged.filter(r => r.categories.some(c => c.severity === filter));
 
-  const sevCounts = { HIGH: 0, MEDIUM: 0, LOW: 0 };
+  const sevCounts = { CRITICAL: 0, HIGH: 0, MEDIUM: 0, LOW: 0 };
   flagged.forEach(r => r.categories.forEach(c => { if (sevCounts[c.severity as keyof typeof sevCounts] !== undefined) sevCounts[c.severity as keyof typeof sevCounts]++; }));
 
+  // Group entities by type
+  const entityGroups: Record<string, string[]> = {};
+  results?.entities.forEach(e => {
+    if (!entityGroups[e.type]) entityGroups[e.type] = [];
+    if (!entityGroups[e.type].includes(e.text)) entityGroups[e.type].push(e.text);
+  });
+
+  // Group obligations by type
+  const obligationGroups: Record<string, Obligation[]> = {};
+  results?.obligations.forEach(o => {
+    if (!obligationGroups[o.type]) obligationGroups[o.type] = [];
+    obligationGroups[o.type].push(o);
+  });
+
+  const tabs = [
+    { key: "clauses", label: "Clauses", icon: Layers },
+    { key: "entities", label: "Entities", icon: Tag },
+    { key: "contradictions", label: "Contradictions", icon: AlertTriangle },
+    { key: "obligations", label: "Obligations", icon: ClipboardList },
+    { key: "compliance", label: "Compliance", icon: ShieldCheck },
+  ];
+
   return (
     <div className="min-h-screen bg-white">
-      {/* Upgrade modal */}
       {showUpgrade && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
           <div className="bg-white rounded-2xl p-6 max-w-sm mx-4 shadow-xl">
             <div className="flex justify-between items-start">
-              <div className="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center">
-                <Lock className="w-5 h-5 text-amber-600" />
-              </div>
+              <div className="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center"><Lock className="w-5 h-5 text-amber-600" /></div>
               <button onClick={() => setShowUpgrade(false)} className="p-1 hover:bg-zinc-100 rounded-md"><X className="w-4 h-4 text-zinc-400" /></button>
             </div>
-            <h3 className="mt-4 text-lg font-semibold">
-              {userPlan === "free" && scanCount >= FREE_LIMIT ? "Free limit reached" : "Pro feature"}
-            </h3>
+            <h3 className="mt-4 text-lg font-semibold">{userPlan === "free" && scanCount >= FREE_LIMIT ? "Free limit reached" : "Pro feature"}</h3>
             <p className="mt-1.5 text-sm text-zinc-500 leading-relaxed">
               {userPlan === "free" && scanCount >= FREE_LIMIT
-                ? `You have used all ${FREE_LIMIT} free scans this month. Upgrade to Pro for unlimited scans, file uploads, and AI explanations.`
+                ? `You have used all ${FREE_LIMIT} free scans. Upgrade to Pro for unlimited scans, file uploads, and full analysis.`
                 : "File upload is available on the Pro plan. Upgrade to scan contracts and leases directly."}
             </p>
             <div className="mt-5 flex gap-2">
-              <a href="/#pricing" className="flex-1 bg-zinc-900 text-white py-2.5 rounded-lg text-sm font-medium text-center hover:bg-zinc-800 transition-colors">
-                View plans
-              </a>
-              <button onClick={() => setShowUpgrade(false)} className="flex-1 border border-zinc-200 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-50 transition-colors">
-                Not now
-              </button>
+              <a href="/#pricing" className="flex-1 bg-zinc-900 text-white py-2.5 rounded-lg text-sm font-medium text-center hover:bg-zinc-800 transition-colors">View plans</a>
+              <button onClick={() => setShowUpgrade(false)} className="flex-1 border border-zinc-200 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-50 transition-colors">Not now</button>
             </div>
           </div>
         </div>
       )}
 
-      <div className="max-w-6xl mx-auto px-5 py-10">
+      <div className="max-w-7xl mx-auto px-5 py-10">
         <div className="mb-8 flex items-start justify-between">
           <div>
             <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
               <ScanText className="w-6 h-6 text-zinc-400" />
               Scan a document
             </h1>
-            <p className="mt-1 text-sm text-zinc-500">Paste text or upload a file (.pdf, .docx, .txt).</p>
+            <p className="mt-1 text-sm text-zinc-500">Paste text or upload a file (.pdf, .docx, .txt). Get 41-category clause detection, risk scoring, NER, compliance, and more.</p>
           </div>
           {userPlan === "free" && (
-            <span className="text-xs text-zinc-400 border border-zinc-200 px-2.5 py-1 rounded-md">
-              {scanCount}/{FREE_LIMIT} free scans
-            </span>
+            <span className="text-xs text-zinc-400 border border-zinc-200 px-2.5 py-1 rounded-md">{scanCount}/{FREE_LIMIT} free scans</span>
           )}
         </div>
 
         <div className="grid lg:grid-cols-5 gap-6">
-          {/* Input — 2 cols */}
+          {/* Input */}
           <div className="lg:col-span-2">
             <textarea value={text} onChange={(e) => setText(e.target.value)}
-              placeholder="Paste your document text here..."
+              placeholder="Paste your contract or terms text here..."
               className="w-full h-[380px] p-4 border border-zinc-200 rounded-xl text-sm leading-relaxed resize-none focus:outline-none focus:ring-2 focus:ring-zinc-900/10 focus:border-zinc-300 placeholder:text-zinc-300 font-mono" />
             <div className="mt-3 flex gap-2">
               <button onClick={handleAnalyze} disabled={loading}
                 className="flex-1 inline-flex items-center justify-center gap-2 bg-zinc-900 text-white py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-800 disabled:opacity-40 transition-colors">
-                {loading ? <><ScanLine className="w-4 h-4 animate-pulse" /> Scanning...</> : <><ScanText className="w-4 h-4" /> Scan</>}
-              </button>
-              <button onClick={() => setText(EXAMPLE)}
-                className="px-3 border border-zinc-200 rounded-lg text-sm text-zinc-500 hover:bg-zinc-50 transition-colors">
-                Example
+                {loading ? <><ScanLine className="w-4 h-4 animate-pulse" /> Analyzing...</> : <><ScanText className="w-4 h-4" /> Analyze</>}
               </button>
+              <button onClick={() => setText(EXAMPLE)} className="px-3 border border-zinc-200 rounded-lg text-sm text-zinc-500 hover:bg-zinc-50 transition-colors">Example</button>
               <input ref={fileInputRef} type="file" accept=".txt,.md,.pdf,.docx" className="hidden" onChange={handleFileUpload} />
-              <button onClick={() => fileInputRef.current?.click()}
-                className="px-3 border border-zinc-200 rounded-lg text-zinc-500 hover:bg-zinc-50 transition-colors" title="Upload file">
-                <Upload className="w-4 h-4" />
-              </button>
+              <button onClick={() => fileInputRef.current?.click()} className="px-3 border border-zinc-200 rounded-lg text-zinc-500 hover:bg-zinc-50 transition-colors" title="Upload file"><Upload className="w-4 h-4" /></button>
             </div>
             {error && <p className="mt-2 text-sm text-red-600 flex items-center gap-1.5"><TriangleAlert className="w-3.5 h-3.5" />{error}</p>}
           </div>
 
-          {/* Results — 3 cols */}
+          {/* Results */}
           <div className="lg:col-span-3">
             {results ? (
               <div className="space-y-4">
@@ -228,32 +269,27 @@ export default function AnalyzePage() {
                     </span>
                   </div>
                   <div className="mt-4 flex items-center gap-4 text-xs text-zinc-400">
-                    <span>{results.total_clauses} clauses</span>
-                    <span className="w-px h-3 bg-zinc-200" />
-                    <span>{results.flagged_count} flagged</span>
-                    <span className="w-px h-3 bg-zinc-200" />
-                    <span>{results.latency_ms}ms</span>
-                    <span className="w-px h-3 bg-zinc-200" />
-                    <span className="flex items-center gap-1">
-                      {results.model === "ml" && <SparklesIcon className="w-3 h-3" />}
-                      {results.model === "ml" ? "Legal-BERT" : "Pattern matching"}
-                    </span>
+                    <span>{results.total_clauses} clauses</span><span className="w-px h-3 bg-zinc-200" />
+                    <span>{results.flagged_count} flagged</span><span className="w-px h-3 bg-zinc-200" />
+                    <span>{results.entities.length} entities</span><span className="w-px h-3 bg-zinc-200" />
+                    <span>{results.contradictions.length} issues</span><span className="w-px h-3 bg-zinc-200" />
+                    <span>{results.latency_ms}ms</span><span className="w-px h-3 bg-zinc-200" />
+                    <span className="flex items-center gap-1">{results.model !== "regex" && <SparklesIcon className="w-3 h-3" />}{results.model !== "regex" ? "Legal-BERT v2" : "Pattern fallback"}</span>
                   </div>
                 </div>
 
-                {/* Actions bar */}
+                {/* Filter + Actions */}
                 <div className="flex items-center justify-between">
                   <div className="flex gap-1">
                     {[
                       { key: "all", label: "All", count: flagged.length },
+                      { key: "CRITICAL", label: "Critical", count: sevCounts.CRITICAL },
                       { key: "HIGH", label: "High", count: sevCounts.HIGH },
                       { key: "MEDIUM", label: "Medium", count: sevCounts.MEDIUM },
                       { key: "LOW", label: "Low", count: sevCounts.LOW },
                     ].map((f) => (
                       <button key={f.key} onClick={() => setFilter(f.key)}
-                        className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
-                          filter === f.key ? "bg-zinc-900 text-white" : "text-zinc-500 hover:bg-zinc-100"
-                        }`}>
+                        className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${filter === f.key ? "bg-zinc-900 text-white" : "text-zinc-500 hover:bg-zinc-100"}`}>
                         {f.label} {f.count > 0 && <span className="ml-1 opacity-60">{f.count}</span>}
                       </button>
                     ))}
@@ -262,74 +298,223 @@ export default function AnalyzePage() {
                     <button onClick={handleCopy} className="p-2 rounded-md hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors" title="Copy summary">
                       {copied ? <Check className="w-4 h-4 text-emerald-500" /> : <Copy className="w-4 h-4" />}
                     </button>
-                    <button onClick={handleDownloadPDF} className="p-2 rounded-md hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors" title="Download PDF">
-                      <FileDown className="w-4 h-4" />
-                    </button>
+                    <button onClick={handleDownloadPDF} className="p-2 rounded-md hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors" title="Download PDF"><FileDown className="w-4 h-4" /></button>
                   </div>
                 </div>
 
-                {/* Clause list */}
-                <div className="space-y-2 max-h-[380px] overflow-y-auto pr-1">
-                  {filtered.length === 0 ? (
-                    <div className="border border-dashed border-zinc-200 rounded-xl p-10 text-center">
-                      <CircleCheck className="w-8 h-8 text-emerald-400 mx-auto mb-2" />
-                      <p className="text-sm text-zinc-500">{filter === "all" ? "No unfair clauses found." : "No clauses at this severity."}</p>
+                {/* Tabs */}
+                <div className="border-b border-zinc-200">
+                  <div className="flex gap-1">
+                    {tabs.map((t) => (
+                      <button key={t.key} onClick={() => setActiveTab(t.key)}
+                        className={`flex items-center gap-1.5 px-3 py-2 text-sm font-medium border-b-2 transition-colors ${
+                          activeTab === t.key ? "border-zinc-900 text-zinc-900" : "border-transparent text-zinc-400 hover:text-zinc-600"
+                        }`}>
+                        <t.icon className="w-4 h-4" />{t.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Tab Content */}
+                <div className="max-h-[420px] overflow-y-auto pr-1">
+                  {/* Clauses Tab */}
+                  {activeTab === "clauses" && (
+                    <div className="space-y-2">
+                      {filtered.length === 0 ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-10 text-center">
+                          <CircleCheck className="w-8 h-8 text-emerald-400 mx-auto mb-2" />
+                          <p className="text-sm text-zinc-500">{filter === "all" ? "No flagged clauses found." : "No clauses at this severity."}</p>
+                        </div>
+                      ) : filtered.map((clause, i) => {
+                        const maxSev = clause.categories.reduce((m, c) => {
+                          const order: Record<string, number> = { CRITICAL: 4, HIGH: 3, MEDIUM: 2, LOW: 1 };
+                          return (order[c.severity] || 0) > (order[m] || 0) ? c.severity : m;
+                        }, "LOW");
+                        const conf = SEV_CONFIG[maxSev] || SEV_CONFIG.MEDIUM;
+                        const isExpanded = expandedIdx === i;
+                        const CatIcon = CATEGORY_ICONS[clause.categories[0]?.name] || Layers;
+                        return (
+                          <div key={i} className={`border rounded-xl overflow-hidden transition-all ${conf.border} ${isExpanded ? "shadow-sm" : ""}`}>
+                            <button onClick={() => setExpandedIdx(isExpanded ? null : i)} className="w-full text-left p-4 flex items-start gap-3 hover:bg-zinc-50/50 transition-colors">
+                              <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${conf.bg}`}>
+                                <CatIcon className={`w-4 h-4 ${conf.text}`} />
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  {clause.categories.map((cat, j) => {
+                                    const s = SEV_CONFIG[cat.severity] || SEV_CONFIG.MEDIUM;
+                                    return (
+                                      <span key={j} className={`text-[11px] font-medium px-2 py-0.5 rounded border ${s.bg} ${s.text} ${s.border}`}>
+                                        {cat.name}{cat.confidence ? ` ${Math.round(cat.confidence * 100)}%` : ""}
+                                      </span>
+                                    );
+                                  })}
+                                </div>
+                                <p className="mt-1.5 text-sm text-zinc-600 leading-relaxed line-clamp-2">{clause.text}</p>
+                              </div>
+                              <div className="shrink-0 mt-1">{isExpanded ? <ChevronUp className="w-4 h-4 text-zinc-400" /> : <ChevronDown className="w-4 h-4 text-zinc-400" />}</div>
+                            </button>
+                            {isExpanded && (
+                              <div className="px-4 pb-4 pt-0 border-t border-zinc-100">
+                                <p className="text-sm text-zinc-700 leading-relaxed mt-3 font-mono bg-zinc-50 rounded-lg p-3">{clause.text}</p>
+                                {clause.categories.map((cat, j) => (
+                                  <div key={j} className="mt-3 flex items-start gap-2">
+                                    <TriangleAlert className={`w-3.5 h-3.5 mt-0.5 shrink-0 ${(SEV_CONFIG[cat.severity] || SEV_CONFIG.MEDIUM).text}`} />
+                                    <p className="text-[13px] text-zinc-500 leading-relaxed">
+                                      <span className="font-medium text-zinc-700">{cat.name}:</span> {cat.description || "This clause may contain risks. Review carefully."}
+                                    </p>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
                     </div>
-                  ) : filtered.map((clause, i) => {
-                    const maxSev = clause.categories.reduce((m, c) => {
-                      const order: Record<string, number> = { HIGH: 3, MEDIUM: 2, LOW: 1 };
-                      return (order[c.severity] || 0) > (order[m] || 0) ? c.severity : m;
-                    }, "LOW");
-                    const conf = SEV_CONFIG[maxSev] || SEV_CONFIG.MEDIUM;
-                    const isExpanded = expandedIdx === i;
-                    const CatIcon = CATEGORY_ICONS[clause.categories[0]?.name] || TriangleAlert;
-
-                    return (
-                      <div key={i} className={`border rounded-xl overflow-hidden transition-all ${conf.border} ${isExpanded ? "shadow-sm" : ""}`}>
-                        <button onClick={() => setExpandedIdx(isExpanded ? null : i)}
-                          className="w-full text-left p-4 flex items-start gap-3 hover:bg-zinc-50/50 transition-colors">
-                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${conf.bg}`}>
-                            <CatIcon className={`w-4 h-4 ${conf.text}`} />
+                  )}
+
+                  {/* Entities Tab */}
+                  {activeTab === "entities" && (
+                    <div className="space-y-4">
+                      {Object.keys(entityGroups).length === 0 ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-10 text-center">
+                          <Tag className="w-8 h-8 text-zinc-300 mx-auto mb-2" />
+                          <p className="text-sm text-zinc-500">No entities detected.</p>
+                        </div>
+                      ) : Object.entries(entityGroups).map(([type, items]) => {
+                        const cfg = ENTITY_COLORS[type] || { bg: "bg-zinc-50", text: "text-zinc-700", border: "border-zinc-200", icon: Tag };
+                        const Icon = cfg.icon;
+                        return (
+                          <div key={type}>
+                            <div className="flex items-center gap-2 mb-2">
+                              <Icon className={`w-4 h-4 ${cfg.text}`} />
+                              <span className="text-sm font-medium text-zinc-700">{type.replace("_", " ")}</span>
+                              <span className="text-xs text-zinc-400">({items.length})</span>
+                            </div>
+                            <div className="flex flex-wrap gap-2">
+                              {items.slice(0, 20).map((item, i) => (
+                                <span key={i} className={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${cfg.bg} ${cfg.text} border ${cfg.border}`}>
+                                  {item}
+                                </span>
+                              ))}
+                            </div>
                           </div>
-                          <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-2 flex-wrap">
-                              {clause.categories.map((cat, j) => {
-                                const s = SEV_CONFIG[cat.severity] || SEV_CONFIG.MEDIUM;
-                                return (
-                                  <span key={j} className={`text-[11px] font-medium px-2 py-0.5 rounded border ${s.bg} ${s.text} ${s.border}`}>
-                                    {cat.name}{cat.confidence ? ` ${Math.round(cat.confidence * 100)}%` : ""}
-                                  </span>
-                                );
-                              })}
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  {/* Contradictions Tab */}
+                  {activeTab === "contradictions" && (
+                    <div className="space-y-2">
+                      {results.contradictions.length === 0 ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-10 text-center">
+                          <CircleCheck className="w-8 h-8 text-emerald-400 mx-auto mb-2" />
+                          <p className="text-sm text-zinc-500">No contradictions or missing clauses detected.</p>
+                        </div>
+                      ) : results.contradictions.map((c, i) => {
+                        const conf = SEV_CONFIG[c.severity] || SEV_CONFIG.MEDIUM;
+                        return (
+                          <div key={i} className={`border rounded-xl p-4 ${conf.border} ${conf.bg}`}>
+                            <div className="flex items-center gap-2 mb-2">
+                              <conf.icon className={`w-4 h-4 ${conf.text}`} />
+                              <span className={`text-xs font-semibold uppercase ${conf.text}`}>{c.type}</span>
                             </div>
-                            <p className="mt-1.5 text-sm text-zinc-600 leading-relaxed line-clamp-2">{clause.text}</p>
+                            <p className="text-sm text-zinc-700">{c.explanation}</p>
                           </div>
-                          <div className="shrink-0 mt-1">
-                            {isExpanded ? <ChevronUp className="w-4 h-4 text-zinc-400" /> : <ChevronDown className="w-4 h-4 text-zinc-400" />}
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  {/* Obligations Tab */}
+                  {activeTab === "obligations" && (
+                    <div className="space-y-4">
+                      {Object.keys(obligationGroups).length === 0 ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-10 text-center">
+                          <ClipboardList className="w-8 h-8 text-zinc-300 mx-auto mb-2" />
+                          <p className="text-sm text-zinc-500">No obligations detected.</p>
+                        </div>
+                      ) : Object.entries(obligationGroups).map(([type, items]) => {
+                        const cfg = OBLIGATION_COLORS[type] || { bg: "bg-zinc-50", text: "text-zinc-700", icon: ClipboardList };
+                        const Icon = cfg.icon;
+                        return (
+                          <div key={type}>
+                            <div className="flex items-center gap-2 mb-2">
+                              <Icon className={`w-4 h-4 ${cfg.text}`} />
+                              <span className="text-sm font-medium capitalize text-zinc-700">{type} Obligations</span>
+                              <span className="text-xs text-zinc-400">({items.length})</span>
+                            </div>
+                            <div className="space-y-2">
+                              {items.map((o, i) => (
+                                <div key={i} className="border border-zinc-200 rounded-lg p-3">
+                                  <div className="flex items-center justify-between mb-1">
+                                    <span className="text-xs font-medium text-zinc-600">{o.party}</span>
+                                    <span className="text-[11px] text-zinc-400 bg-zinc-100 px-2 py-0.5 rounded">{o.deadline}</span>
+                                  </div>
+                                  <p className="text-sm text-zinc-600">{o.description}</p>
+                                </div>
+                              ))}
+                            </div>
                           </div>
-                        </button>
-                        {isExpanded && (
-                          <div className="px-4 pb-4 pt-0 border-t border-zinc-100">
-                            <p className="text-sm text-zinc-700 leading-relaxed mt-3 font-mono bg-zinc-50 rounded-lg p-3">{clause.text}</p>
-                            {clause.categories.map((cat, j) => (
-                              <div key={j} className="mt-3 flex items-start gap-2">
-                                <TriangleAlert className={`w-3.5 h-3.5 mt-0.5 shrink-0 ${(SEV_CONFIG[cat.severity] || SEV_CONFIG.MEDIUM).text}`} />
-                                <p className="text-[13px] text-zinc-500 leading-relaxed">
-                                  <span className="font-medium text-zinc-700">{cat.name}:</span> {cat.description || "This clause may be unfair under consumer protection law."}
-                                </p>
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  {/* Compliance Tab */}
+                  {activeTab === "compliance" && (
+                    <div className="space-y-4">
+                      {Object.keys(results.compliance).length === 0 ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-10 text-center">
+                          <ShieldCheck className="w-8 h-8 text-zinc-300 mx-auto mb-2" />
+                          <p className="text-sm text-zinc-500">No compliance data available.</p>
+                        </div>
+                      ) : Object.entries(results.compliance).map(([regName, reg]) => {
+                        const status = COMPLIANCE_STATUS[reg.overall_status] || COMPLIANCE_STATUS.PARTIAL;
+                        return (
+                          <div key={regName} className="border border-zinc-200 rounded-xl overflow-hidden">
+                            <div className="flex items-center justify-between p-4 border-b border-zinc-100 bg-zinc-50/50">
+                              <div>
+                                <span className="text-sm font-semibold text-zinc-900">{regName}</span>
+                                <p className="text-[11px] text-zinc-500 mt-0.5">{reg.description}</p>
+                              </div>
+                              <div className="text-right">
+                                <span className={`text-lg font-bold ${status.text}`}>{reg.compliance_rate}%</span>
+                                <span className={`text-[11px] font-medium block ${status.text}`}>{reg.overall_status}</span>
                               </div>
-                            ))}
+                            </div>
+                            <div className="p-3 space-y-1">
+                              {reg.checks.map((check, i) => {
+                                const sev = SEV_CONFIG[check.severity] || SEV_CONFIG.MEDIUM;
+                                return (
+                                  <div key={i} className="flex items-center justify-between py-2 px-2 hover:bg-zinc-50 rounded-md">
+                                    <div className="flex-1 min-w-0">
+                                      <p className="text-xs text-zinc-600">{check.description}</p>
+                                      {check.matched_keywords.length > 0 && (
+                                        <p className="text-[10px] text-zinc-400 mt-0.5">Matched: {check.matched_keywords.slice(0, 3).join(", ")}</p>
+                                      )}
+                                    </div>
+                                    <div className="flex items-center gap-2 ml-3">
+                                      <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded ${sev.bg} ${sev.text}`}>{check.severity}</span>
+                                      <span className="text-sm">{check.status === "PASS" ? "✅" : "❌"}</span>
+                                    </div>
+                                  </div>
+                                );
+                              })}
+                            </div>
                           </div>
-                        )}
-                      </div>
-                    );
-                  })}
+                        );
+                      })}
+                    </div>
+                  )}
                 </div>
               </div>
             ) : (
               <div className="border border-dashed border-zinc-200 rounded-xl h-[420px] flex flex-col items-center justify-center">
                 <ScanText className="w-10 h-10 text-zinc-200 mb-3" />
-                <p className="text-sm text-zinc-300">Paste text and scan to see results</p>
+                <p className="text-sm text-zinc-300">Paste text and analyze to see results</p>
               </div>
             )}
           </div>