v3.0: Update analyze page — source indicators (🤖/📝), NLI confidence, negation badges, priority, new entity types

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

@@ -1,525 +1 @@
-"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
-} 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; }
-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" },
-};
-
-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,
-};
-
-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.
-
-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");
-      const data = await res.json();
-      setResults(data);
-      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");
-      const { text: extractedText } = await res.json();
-      setText(extractedText);
-    } 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} 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");
-    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]++; }));
-
-  // 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">
-      {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>
-              <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, 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>
-            </div>
-          </div>
-        </div>
-      )}
-
-      <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). 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>
-          )}
-        </div>
-
-        <div className="grid lg:grid-cols-5 gap-6">
-          {/* Input */}
-          <div className="lg:col-span-2">
-            <textarea value={text} onChange={(e) => setText(e.target.value)}
-              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" /> 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>
-            {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 */}
-          <div className="lg:col-span-3">
-            {results ? (
-              <div className="space-y-4">
-                {/* Score card */}
-                <div className="border border-zinc-200 rounded-xl p-5">
-                  <div className="flex items-start justify-between">
-                    <div>
-                      <div className="flex items-baseline gap-2">
-                        <span className="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-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={`text-sm font-semibold px-3 py-1 rounded-lg border ${GRADE_STYLE[results.grade] || GRADE_STYLE.C}`}>
-                      Grade {results.grade}
-                    </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.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>
-
-                {/* 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"}`}>
-                        {f.label} {f.count > 0 && <span className="ml-1 opacity-60">{f.count}</span>}
-                      </button>
-                    ))}
-                  </div>
-                  <div className="flex gap-1.5">
-                    <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">
-                  <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>
-                  )}
-
-                  {/* 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>
-                  )}
-
-                  {/* 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="text-sm text-zinc-700">{c.explanation}</p>
-                          </div>
-                        );
-                      })}
-                    </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>
-                        );
-                      })}
-                    </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 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 analyze to see results</p>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+/app/web/analyze_page.tsx