feat: redesigned score card (circular gauge), multi-format export dropdown, better loading state, taller results panel

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

@@ -3,7 +3,7 @@
 import { useState, useRef, useEffect } from "react";
 import {
   ScanText, ScanLine, TriangleAlert, CircleAlert, CircleCheck, Info,
-  FileDown, ChevronDown, ChevronUp, Copy, Check, Upload, FileText,
+  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,
@@ -12,6 +12,7 @@ import {
   ShieldOff, CircleSlash, MessageSquareWarning, Construction,
   MessageSquare, Send, Loader2
 } from "lucide-react";
+import { ExportDropdown } from "@/components/export-dropdown";
 
 interface Cat { name: string; severity: string; description?: string; confidence?: number; }
 interface Clause { text: string; categories: Cat[]; }
@@ -233,17 +234,6 @@ export default function AnalyzePage() {
     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` +
@@ -369,41 +359,51 @@ export default function AnalyzePage() {
           <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}%` }} />
+                {/* Score Card — redesigned with circular gauge */}
+                <div className="bg-white border border-zinc-200 rounded-2xl p-5 sm:p-6 shadow-sm">
+                  <div className="flex items-center gap-5 sm:gap-6">
+                    {/* Circular score gauge */}
+                    <div className="relative w-20 h-20 sm:w-24 sm:h-24 shrink-0">
+                      <svg className="w-full h-full -rotate-90" viewBox="0 0 100 100">
+                        <circle cx="50" cy="50" r="42" fill="none" stroke="#f4f4f5" strokeWidth="8" />
+                        <circle cx="50" cy="50" r="42" fill="none"
+                          stroke={results.risk_score >= 60 ? "#ef4444" : results.risk_score >= 30 ? "#f59e0b" : "#22c55e"}
+                          strokeWidth="8" strokeLinecap="round"
+                          strokeDasharray={`${results.risk_score * 2.64} 264`}
+                          className="transition-all duration-1000 ease-out" />
+                      </svg>
+                      <div className="absolute inset-0 flex flex-col items-center justify-center">
+                        <span className="text-xl sm:text-2xl font-bold tracking-tight">{results.risk_score}</span>
+                        <span className="text-[9px] text-zinc-400 -mt-0.5">/ 100</span>
                       </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>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-2">
+                        <span className={`text-sm font-bold px-3 py-1 rounded-lg border ${GRADE_STYLE[results.grade] || GRADE_STYLE.C}`}>
+                          Grade {results.grade}
+                        </span>
+                        <span className="text-xs text-zinc-400">
+                          {results.risk_score < 20 ? "Low Risk" : results.risk_score < 40 ? "Moderate Risk" : results.risk_score < 60 ? "Elevated Risk" : results.risk_score < 80 ? "High Risk" : "Critical Risk"}
+                        </span>
+                      </div>
+
+                      {/* Severity breakdown — compact horizontal */}
+                      <div className="grid grid-cols-4 gap-1.5">
+                        {(["CRITICAL", "HIGH", "MEDIUM", "LOW"] as const).map(sev => {
+                          const c = SEV_CONFIG[sev];
+                          return (
+                            <div key={sev} className={`text-center py-1.5 px-1 rounded-lg ${c.bg} border ${c.border}`}>
+                              <span className={`text-sm font-bold ${c.text}`}>{sevCounts[sev]}</span>
+                              <p className={`text-[9px] ${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>
+                      {/* Meta stats */}
+                      <div className="mt-2.5 flex items-center gap-2 text-[10px] 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" />
@@ -411,9 +411,11 @@ export default function AnalyzePage() {
                     <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>
+                        <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>
                   </div>
                 </div>
 
@@ -433,11 +435,11 @@ export default function AnalyzePage() {
                       </button>
                     ))}
                   </div>
-                  <div className="flex gap-1.5 self-end sm:self-auto">
+                  <div className="flex gap-1.5 self-end sm:self-auto items-center">
                     <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>
+                    <ExportDropdown results={results} />
                   </div>
                 </div>
 
@@ -457,7 +459,7 @@ export default function AnalyzePage() {
                 </div>
 
                 {/* Tab Content */}
-                <div className="max-h-[350px] sm:max-h-[420px] overflow-y-auto pr-1">
+                <div className="max-h-[450px] sm:max-h-[560px] overflow-y-auto pr-1 scroll-smooth">
 
                   {/* Clauses */}
                   {activeTab === "clauses" && (
@@ -847,8 +849,18 @@ export default function AnalyzePage() {
                   )}
                 </div>
               </div>
+            ) : loading ? (
+              <div className="bg-white border border-zinc-200 rounded-2xl h-[300px] sm:h-[420px] flex flex-col items-center justify-center shadow-sm">
+                <div className="relative w-16 h-16 mb-4">
+                  <div className="absolute inset-0 rounded-full border-2 border-zinc-100" />
+                  <div className="absolute inset-0 rounded-full border-2 border-t-zinc-900 animate-spin" />
+                  <ScanLine className="absolute inset-0 m-auto w-6 h-6 text-zinc-400" />
+                </div>
+                <p className="text-sm font-medium text-zinc-700">Analyzing contract...</p>
+                <p className="text-xs text-zinc-400 mt-1">Running 6 ML models · This may take 30-60 seconds</p>
+              </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">
+              <div className="bg-white border border-dashed border-zinc-200 rounded-2xl 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>