v3.0: Upload web/app/dashboard-pages/analyze/page.tsx — zero emojis, Lucide icons, responsive

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

@@ -1 +1,667 @@
-/app/web_final/analyze_page.tsx
+"use client";
+
+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, Layers, Landmark, Briefcase,
+  AlertTriangle, Tag, BookOpen, ClipboardList, DollarSign,
+  Calendar, Building, MapPin, Hash, Bot, FileSearch, Percent, Clock,
+  User, BookMarked, ShieldX, HelpCircle, Cpu, PenTool, Zap,
+  ShieldOff, CircleSlash, MessageSquareWarning, Construction
+} from "lucide-react";
+
+interface Cat { name: string; severity: string; description?: string; confidence?: number; }
+interface Clause { text: string; categories: Cat[]; }
+interface Entity { text: string; type: string; score?: number; source?: string; }
+interface Contradiction { type: string; explanation: string; severity: string; confidence?: number; source?: string; }
+interface Obligation { type: string; party: string; description: string; deadline: string; priority?: number; }
+interface ComplianceCheck { requirement: string; description: string; severity: string; status: string; matched_keywords: string[]; context?: string[]; }
+interface ComplianceReg { description: string; compliance_rate: number; checks: ComplianceCheck[]; overall_status: string; negated_count?: number; ambiguous_count?: number; }
+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; ring: string }> = {
+  CRITICAL: { icon: AlertTriangle, label: "Critical", text: "text-red-700", bg: "bg-red-50", border: "border-red-300", ring: "ring-red-200" },
+  HIGH: { icon: TriangleAlert, label: "High", text: "text-red-600", bg: "bg-red-50", border: "border-red-200", ring: "ring-red-100" },
+  MEDIUM: { icon: CircleAlert, label: "Medium", text: "text-amber-600", bg: "bg-amber-50", border: "border-amber-200", ring: "ring-amber-100" },
+  LOW: { icon: Info, label: "Low", text: "text-blue-600", bg: "bg-blue-50", border: "border-blue-200", ring: "ring-blue-100" },
+};
+
+const GRADE_STYLE: Record<string, string> = {
+  A: "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-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, "Uncapped Liability": AlertTriangle,
+  "IP Ownership Assignment": Lock, "Non-Compete": Ban, "Governing Law": Gavel,
+  "Termination for Convenience": Ban, "Indemnification": ShieldCheck, "Confidentiality": Lock,
+  "Notice Period to Terminate Renewal": Clock, "Cap on Liability": ShieldCheck,
+  "Liquidated Damages": DollarSign, "Force Majeure": Zap,
+};
+
+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 },
+  PERCENTAGE: { bg: "bg-teal-50", text: "text-teal-700", border: "border-teal-200", icon: Percent },
+  DURATION: { bg: "bg-indigo-50", text: "text-indigo-700", border: "border-indigo-200", icon: Clock },
+  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 },
+  PERSON: { bg: "bg-pink-50", text: "text-pink-700", border: "border-pink-200", icon: User },
+  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 },
+  LEGAL_REF: { bg: "bg-zinc-100", text: "text-zinc-700", border: "border-zinc-200", icon: BookMarked },
+  MISC: { bg: "bg-zinc-50", text: "text-zinc-600", border: "border-zinc-200", icon: Tag },
+};
+
+const OBLIGATION_COLORS: Record<string, { bg: string; text: string; border: string; icon: any }> = {
+  monetary: { bg: "bg-emerald-50", text: "text-emerald-700", border: "border-emerald-200", icon: DollarSign },
+  compliance: { bg: "bg-amber-50", text: "text-amber-700", border: "border-amber-200", icon: ShieldCheck },
+  reporting: { bg: "bg-blue-50", text: "text-blue-700", border: "border-blue-200", icon: ClipboardList },
+  delivery: { bg: "bg-purple-50", text: "text-purple-700", border: "border-purple-200", icon: FileText },
+  termination: { bg: "bg-red-50", text: "text-red-700", border: "border-red-200", icon: Ban },
+};
+
+const COMPLIANCE_STATUS: Record<string, { bg: string; text: string; border: string }> = {
+  COMPLIANT: { bg: "bg-emerald-50", text: "text-emerald-700", border: "border-emerald-200" },
+  PARTIAL: { bg: "bg-amber-50", text: "text-amber-700", border: "border-amber-200" },
+  "NON-COMPLIANT": { bg: "bg-red-50", text: "text-red-700", border: "border-red-200" },
+  WARNING: { bg: "bg-orange-50", text: "text-orange-700", border: "border-orange-200" },
+};
+
+function SourceBadge({ isML, confidence }: { isML: boolean; confidence?: number | null }) {
+  if (isML) {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] font-medium bg-indigo-50 text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded">
+        <Cpu className="w-2.5 h-2.5" />
+        ML {confidence != null ? `${Math.round(confidence * 100)}%` : ""}
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1 text-[10px] font-medium bg-zinc-50 text-zinc-500 border border-zinc-200 px-1.5 py-0.5 rounded">
+      <PenTool className="w-2.5 h-2.5" />
+      Pattern
+    </span>
+  );
+}
+
+function CheckStatusIcon({ status }: { status: string }) {
+  switch (status) {
+    case "PASS": return <CircleCheck className="w-4 h-4 text-emerald-500" />;
+    case "MISSING": return <X className="w-4 h-4 text-red-500" />;
+    case "NEGATED": return <ShieldOff className="w-4 h-4 text-orange-500" />;
+    case "AMBIGUOUS": return <HelpCircle className="w-4 h-4 text-amber-500" />;
+    default: return <CircleAlert className="w-4 h-4 text-zinc-400" />;
+  }
+}
+
+function ContradictionSourceBadge({ source, confidence }: { source?: string; confidence?: number }) {
+  if (source === "nli_model") {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] font-medium bg-indigo-50 text-indigo-600 border border-indigo-200 px-1.5 py-0.5 rounded">
+        <Cpu className="w-2.5 h-2.5" />NLI {confidence != null ? `${Math.round(confidence * 100)}%` : ""}
+      </span>
+    );
+  }
+  if (source === "heuristic") {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] font-medium bg-amber-50 text-amber-600 border border-amber-200 px-1.5 py-0.5 rounded">
+        <PenTool className="w-2.5 h-2.5" />Heuristic
+      </span>
+    );
+  }
+  if (source === "structural") {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] font-medium bg-zinc-50 text-zinc-500 border border-zinc-200 px-1.5 py-0.5 rounded">
+        <Construction className="w-2.5 h-2.5" />Structural
+      </span>
+    );
+  }
+  return null;
+}
+
+const EXAMPLE = `By using the Spotify Service, you agree to be bound by these Terms of Use.
+
+Spotify may, in its sole discretion, modify or update these Terms of Service at any time without prior notice. Your continued use of the Service after any such changes constitutes your acceptance of the new Terms of Service.
+
+In no event will Spotify be liable for any indirect, incidental, special, consequential, or punitive damages, or any loss of profits or revenues, whether incurred directly or indirectly.
+
+Spotify reserves the right to remove or disable access to any User Content for any reason, without prior notice.
+
+Spotify may terminate your account or suspend your access at any time, with or without cause, with or without notice, effective immediately.
+
+These Terms will be governed by and construed in accordance with the laws of the State of New York.
+
+Any dispute shall be finally settled by arbitration in New York County.`;
+
+export default function AnalyzePage() {
+  const [text, setText] = useState("");
+  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");
+  const [showUpgrade, setShowUpgrade] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const FREE_LIMIT = 10;
+  const canScan = userPlan !== "free" || scanCount < FREE_LIMIT;
+
+  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);
+    try {
+      const res = await fetch("/api/analyze", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }) });
+      if (!res.ok) throw new Error((await res.json()).error || "Failed");
+      setResults(await res.json());
+      setScanCount(prev => prev + 1);
+    } catch (e: any) { setError(e.message); }
+    finally { setLoading(false); }
+  }
+
+  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("");
+    try {
+      const formData = new FormData(); formData.append("file", file);
+      const res = await fetch("/api/parse-upload", { method: "POST", body: formData });
+      if (!res.ok) throw new Error((await res.json()).error || "Failed to parse file");
+      setText((await res.json()).text);
+    } catch (e: any) { setError(e.message || "Could not read file."); }
+    setLoading(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }
+
+  async function handleDownloadPDF() {
+    if (!results) return;
+    try {
+      const res = await fetch("/api/pdf/report", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(results) });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a"); a.href = url; a.download = "clauseguard-report.pdf"; a.click();
+      URL.revokeObjectURL(url);
+    } catch {}
+  }
+
+  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\nEntities: ${results.entities.length}\nContradictions: ${results.contradictions.length}\nObligations: ${results.obligations.length}\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");
+    navigator.clipboard.writeText(summary);
+    setCopied(true); setTimeout(() => setCopied(false), 2000);
+  }
+
+  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 = { 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]++; }));
+
+  const entityGroups: Record<string, Entity[]> = {};
+  results?.entities.forEach(e => {
+    if (!entityGroups[e.type]) entityGroups[e.type] = [];
+    if (!entityGroups[e.type].find(x => x.text === e.text)) entityGroups[e.type].push(e);
+  });
+
+  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, count: flagged.length },
+    { key: "entities", label: "Entities", icon: Tag, count: results?.entities.length || 0 },
+    { key: "contradictions", label: "Issues", icon: AlertTriangle, count: results?.contradictions.length || 0 },
+    { key: "obligations", label: "Obligations", icon: ClipboardList, count: results?.obligations.length || 0 },
+    { key: "compliance", label: "Compliance", icon: ShieldCheck, count: Object.keys(results?.compliance || {}).length },
+  ];
+
+  return (
+    <div className="min-h-screen bg-zinc-50/30">
+      {/* Upgrade Modal */}
+      {showUpgrade && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4">
+          <div className="bg-white rounded-2xl p-6 max-w-sm w-full shadow-2xl">
+            <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>
+              <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>
+            <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. Upgrade to Pro for unlimited scans and full analysis.`
+                : "File upload is available on the Pro plan."}
+            </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>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10">
+        {/* Header */}
+        <div className="mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
+          <div>
+            <h1 className="text-xl sm:text-2xl font-semibold tracking-tight flex items-center gap-2">
+              <ScanText className="w-5 h-5 sm:w-6 sm:h-6 text-zinc-400" />
+              Scan a document
+            </h1>
+            <p className="mt-1 text-xs sm:text-sm text-zinc-500 max-w-xl">Paste text or upload a file. Get 41-category clause detection, risk scoring, ML NER, NLI contradictions, compliance checks, and obligation tracking.</p>
+          </div>
+          {userPlan === "free" && (
+            <span className="self-start text-xs text-zinc-400 border border-zinc-200 px-2.5 py-1 rounded-md whitespace-nowrap">{scanCount}/{FREE_LIMIT} free scans</span>
+          )}
+        </div>
+
+        <div className="grid lg:grid-cols-5 gap-4 sm:gap-6">
+          {/* Input Panel */}
+          <div className="lg:col-span-2">
+            <div className="bg-white border border-zinc-200 rounded-xl p-3 sm:p-4">
+              <textarea value={text} onChange={(e) => setText(e.target.value)}
+                placeholder="Paste your contract or terms text here..."
+                className="w-full h-[260px] sm:h-[360px] p-3 border border-zinc-100 rounded-lg 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 bg-zinc-50/50" />
+              <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" /> 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>
+              </div>
+            </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 Panel */}
+          <div className="lg:col-span-3">
+            {results ? (
+              <div className="space-y-3 sm:space-y-4">
+                {/* Score Card */}
+                <div className="bg-white border border-zinc-200 rounded-xl p-4 sm:p-5">
+                  <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
+                    <div>
+                      <div className="flex items-baseline gap-2">
+                        <span className="text-3xl sm:text-4xl font-semibold tracking-tight">{results.risk_score}</span>
+                        <span className="text-sm text-zinc-400">/100 risk</span>
+                      </div>
+                      <div className="mt-2 h-1.5 w-full sm:w-48 bg-zinc-100 rounded-full overflow-hidden">
+                        <div className={`h-full rounded-full transition-all duration-700 ${
+                          results.risk_score >= 60 ? "bg-red-500" : results.risk_score >= 30 ? "bg-amber-400" : "bg-emerald-500"
+                        }`} style={{ width: `${results.risk_score}%` }} />
+                      </div>
+                    </div>
+                    <span className={`self-start text-sm font-semibold px-3 py-1 rounded-lg border ${GRADE_STYLE[results.grade] || GRADE_STYLE.C}`}>
+                      Grade {results.grade}
+                    </span>
+                  </div>
+
+                  {/* Severity breakdown grid */}
+                  <div className="mt-4 grid grid-cols-4 gap-2">
+                    {(["CRITICAL", "HIGH", "MEDIUM", "LOW"] as const).map(sev => {
+                      const c = SEV_CONFIG[sev];
+                      return (
+                        <div key={sev} className={`text-center p-2 rounded-lg ${c.bg} border ${c.border}`}>
+                          <span className={`text-lg font-bold ${c.text}`}>{sevCounts[sev]}</span>
+                          <p className={`text-[10px] ${c.text} opacity-70`}>{c.label}</p>
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  {/* Meta stats */}
+                  <div className="mt-3 flex items-center gap-2 sm:gap-3 text-[11px] text-zinc-400 flex-wrap">
+                    <span className="flex items-center gap-1"><Layers className="w-3 h-3" />{results.total_clauses} clauses</span>
+                    <span className="w-px h-3 bg-zinc-200" />
+                    <span className="flex items-center gap-1"><Tag className="w-3 h-3" />{results.entities.length} entities</span>
+                    <span className="w-px h-3 bg-zinc-200" />
+                    <span className="flex items-center gap-1"><ClipboardList className="w-3 h-3" />{results.obligations.length} obligations</span>
+                    <span className="w-px h-3 bg-zinc-200" />
+                    <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{results.latency_ms}ms</span>
+                    <span className="w-px h-3 bg-zinc-200" />
+                    <span className="flex items-center gap-1">
+                      {results.model !== "regex" ? <><Cpu className="w-3 h-3" /> ML Models</> : <><FileSearch className="w-3 h-3" /> Pattern fallback</>}
+                    </span>
+                  </div>
+                </div>
+
+                {/* Filter + Actions bar */}
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                  <div className="flex gap-1 overflow-x-auto pb-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 whitespace-nowrap ${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>
+                    ))}
+                  </div>
+                  <div className="flex gap-1.5 self-end sm:self-auto">
+                    <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>
+                  </div>
+                </div>
+
+                {/* Tabs */}
+                <div className="border-b border-zinc-200 overflow-x-auto">
+                  <div className="flex gap-0.5 min-w-max">
+                    {tabs.map((t) => (
+                      <button key={t.key} onClick={() => setActiveTab(t.key)}
+                        className={`flex items-center gap-1.5 px-3 py-2 text-xs sm:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
+                          activeTab === t.key ? "border-zinc-900 text-zinc-900" : "border-transparent text-zinc-400 hover:text-zinc-600"
+                        }`}>
+                        <t.icon className="w-3.5 h-3.5" />{t.label}
+                        {t.count > 0 && <span className="text-[10px] bg-zinc-100 text-zinc-500 px-1.5 py-0.5 rounded-full">{t.count}</span>}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Tab Content */}
+                <div className="max-h-[350px] sm:max-h-[420px] overflow-y-auto pr-1">
+
+                  {/* Clauses */}
+                  {activeTab === "clauses" && (
+                    <div className="space-y-2">
+                      {filtered.length === 0 ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-8 sm:p-10 text-center bg-white">
+                          <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={`bg-white border rounded-xl overflow-hidden transition-all ${conf.border} ${isExpanded ? "shadow-md ring-1 " + conf.ring : "hover:shadow-sm"}`}>
+                            <button onClick={() => setExpandedIdx(isExpanded ? null : i)} className="w-full text-left p-3 sm: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-1.5 flex-wrap">
+                                  {clause.categories.map((cat, j) => {
+                                    const s = SEV_CONFIG[cat.severity] || SEV_CONFIG.MEDIUM;
+                                    return (
+                                      <span key={j} className={`inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded border ${s.bg} ${s.text} ${s.border}`}>
+                                        {cat.name}
+                                      </span>
+                                    );
+                                  })}
+                                  <SourceBadge isML={clause.categories[0]?.confidence != null} confidence={clause.categories[0]?.confidence} />
+                                </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-3 sm: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 break-words">{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}`} />
+                                    <div 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."}
+                                      <div className="mt-1">
+                                        <SourceBadge isML={cat.confidence != null} confidence={cat.confidence} />
+                                      </div>
+                                    </div>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  {/* Entities */}
+                  {activeTab === "entities" && (
+                    <div className="space-y-4">
+                      {Object.keys(entityGroups).length === 0 ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-8 sm:p-10 text-center bg-white">
+                          <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] || ENTITY_COLORS.MISC;
+                        const Icon = cfg.icon;
+                        const hasML = items.some(e => e.source === "ml");
+                        return (
+                          <div key={type} className="bg-white border border-zinc-200 rounded-xl p-3 sm:p-4">
+                            <div className="flex items-center gap-2 mb-2.5">
+                              <div className={`w-6 h-6 rounded flex items-center justify-center ${cfg.bg}`}>
+                                <Icon className={`w-3.5 h-3.5 ${cfg.text}`} />
+                              </div>
+                              <span className="text-sm font-medium text-zinc-700">{type.replace(/_/g, " ")}</span>
+                              <span className="text-[11px] text-zinc-400 bg-zinc-100 px-1.5 py-0.5 rounded">{items.length}</span>
+                              {hasML && <SourceBadge isML={true} />}
+                            </div>
+                            <div className="flex flex-wrap gap-1.5">
+                              {items.slice(0, 25).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}`}
+                                  title={item.score ? `Confidence: ${Math.round(item.score * 100)}%` : item.source || ""}>
+                                  {item.text}
+                                </span>
+                              ))}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  {/* Contradictions */}
+                  {activeTab === "contradictions" && (
+                    <div className="space-y-2">
+                      {results.contradictions.length === 0 ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-8 sm:p-10 text-center bg-white">
+                          <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={`bg-white border rounded-xl p-3 sm:p-4 ${conf.border}`}>
+                            <div className="flex items-center gap-2 mb-2 flex-wrap">
+                              <conf.icon className={`w-4 h-4 ${conf.text}`} />
+                              <span className={`text-xs font-semibold uppercase ${conf.text}`}>{c.type}</span>
+                              <ContradictionSourceBadge source={c.source} confidence={c.confidence} />
+                            </div>
+                            <p className="text-sm text-zinc-700 leading-relaxed">{c.explanation}</p>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  {/* Obligations */}
+                  {activeTab === "obligations" && (
+                    <div className="space-y-4">
+                      {Object.keys(obligationGroups).length === 0 ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-8 sm:p-10 text-center bg-white">
+                          <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>
+                      ) : (
+                        <>
+                          {/* Summary cards */}
+                          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2">
+                            {Object.entries(obligationGroups).map(([type, items]) => {
+                              const cfg = OBLIGATION_COLORS[type] || OBLIGATION_COLORS.compliance;
+                              const Icon = cfg.icon;
+                              return (
+                                <div key={type} className={`text-center p-3 rounded-xl ${cfg.bg} border ${cfg.border}`}>
+                                  <Icon className={`w-5 h-5 mx-auto ${cfg.text}`} />
+                                  <span className={`text-lg font-bold ${cfg.text}`}>{items.length}</span>
+                                  <p className={`text-[10px] capitalize ${cfg.text} opacity-70`}>{type}</p>
+                                </div>
+                              );
+                            })}
+                          </div>
+                          {/* Individual obligations */}
+                          {Object.entries(obligationGroups).map(([type, items]) => {
+                            const cfg = OBLIGATION_COLORS[type] || OBLIGATION_COLORS.compliance;
+                            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}</span>
+                                  <span className="text-[11px] text-zinc-400 bg-zinc-100 px-1.5 py-0.5 rounded">{items.length}</span>
+                                </div>
+                                <div className="space-y-2">
+                                  {items.map((o, i) => (
+                                    <div key={i} className="bg-white border border-zinc-200 rounded-lg p-3">
+                                      <div className="flex items-center justify-between mb-1 gap-2 flex-wrap">
+                                        <div className="flex items-center gap-2">
+                                          <span className="text-xs font-medium text-zinc-600">{o.party}</span>
+                                          {o.priority != null && o.priority >= 3 && (
+                                            <span className="inline-flex items-center gap-1 text-[9px] bg-red-50 text-red-600 border border-red-200 px-1.5 py-0.5 rounded font-semibold">
+                                              <AlertTriangle className="w-2.5 h-2.5" />HIGH
+                                            </span>
+                                          )}
+                                          {o.priority != null && o.priority === 2 && (
+                                            <span className="inline-flex items-center gap-1 text-[9px] bg-amber-50 text-amber-600 border border-amber-200 px-1.5 py-0.5 rounded font-semibold">
+                                              <CircleAlert className="w-2.5 h-2.5" />MED
+                                            </span>
+                                          )}
+                                        </div>
+                                        <span className="text-[11px] text-zinc-400 bg-zinc-100 px-2 py-0.5 rounded flex items-center gap-1">
+                                          <Clock className="w-3 h-3" />{o.deadline}
+                                        </span>
+                                      </div>
+                                      <p className="text-sm text-zinc-600 leading-relaxed">{o.description}</p>
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Compliance */}
+                  {activeTab === "compliance" && (
+                    <div className="space-y-4">
+                      {Object.keys(results.compliance).length === 0 ? (
+                        <div className="border border-dashed border-zinc-200 rounded-xl p-8 sm:p-10 text-center bg-white">
+                          <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="bg-white border border-zinc-200 rounded-xl overflow-hidden">
+                            <div className={`flex flex-col sm:flex-row sm:items-center justify-between p-4 border-b ${status.bg} ${status.border}`}>
+                              <div>
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  <span className="text-sm font-semibold text-zinc-900">{regName}</span>
+                                  {(reg.negated_count ?? 0) > 0 && (
+                                    <span className="inline-flex items-center gap-1 text-[9px] bg-orange-50 text-orange-600 border border-orange-200 px-1.5 py-0.5 rounded font-medium">
+                                      <ShieldOff className="w-2.5 h-2.5" />{reg.negated_count} negated
+                                    </span>
+                                  )}
+                                  {(reg.ambiguous_count ?? 0) > 0 && (
+                                    <span className="inline-flex items-center gap-1 text-[9px] bg-amber-50 text-amber-600 border border-amber-200 px-1.5 py-0.5 rounded font-medium">
+                                      <HelpCircle className="w-2.5 h-2.5" />{reg.ambiguous_count} ambiguous
+                                    </span>
+                                  )}
+                                </div>
+                                <p className="text-[11px] text-zinc-500 mt-0.5">{reg.description}</p>
+                              </div>
+                              <div className="text-left sm:text-right mt-2 sm:mt-0">
+                                <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-0.5">
+                              {reg.checks.map((check, i) => {
+                                const sev = SEV_CONFIG[check.severity] || SEV_CONFIG.MEDIUM;
+                                return (
+                                  <div key={i} className="py-2.5 px-2 hover:bg-zinc-50 rounded-lg transition-colors">
+                                    <div className="flex items-start justify-between gap-2">
+                                      <div className="flex-1 min-w-0">
+                                        <p className="text-xs text-zinc-600 leading-relaxed">{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>
+                                        )}
+                                        {check.context && check.context.length > 0 && (
+                                          <p className="text-[10px] text-zinc-400 mt-1 italic border-l-2 border-zinc-200 pl-2 line-clamp-2">
+                                            {check.context[0].slice(0, 120)}
+                                          </p>
+                                        )}
+                                      </div>
+                                      <div className="flex items-center gap-2 ml-2 shrink-0">
+                                        <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded ${sev.bg} ${sev.text}`}>{check.severity}</span>
+                                        <CheckStatusIcon status={check.status} />
+                                      </div>
+                                    </div>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <div className="bg-white border border-dashed border-zinc-200 rounded-xl h-[300px] sm: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 analyze to see results</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}