v3.0: Update compare page — show comparison method (semantic/lexical) indicator

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

@@ -1,283 +1 @@
-"use client";
-
-import { useState } from "react";
-import {
-  GitCompare, ArrowRightLeft, ChevronDown, ChevronUp,
-  TriangleAlert, CircleCheck, AlertTriangle,
-  Loader2
-} from "lucide-react";
-
-interface CompareResult {
-  alignment_score: number;
-  contract_a_clauses: number;
-  contract_b_clauses: number;
-  added_clauses: Array<{ text: string; type: string }>;
-  removed_clauses: Array<{ text: string; type: string }>;
-  modified_clauses: Array<{ type: string; similarity: number; clause_a: string; clause_b: string; clause_type: string }>;
-  risk_delta: string;
-  risk_winner: string;
-  type_map_a: Record<string, number>;
-  type_map_b: Record<string, number>;
-}
-
-const EXAMPLE_A = `This Master Service Agreement ("MSA") is entered into as of March 1, 2024 by and between CloudTech Solutions, Inc. ("Provider") and Global Retail Partners LLC ("Customer").
-
-1. SERVICES. Provider shall provide cloud hosting services as described in Exhibit A.
-
-2. TERM. The initial term is twelve (12) months, automatically renewing for successive one year periods.
-
-3. FEES. Customer shall pay a monthly fee of $25,000 within 30 days of invoice.
-
-4. LIABILITY. Provider's aggregate liability shall not exceed $1,000,000. IN NO EVENT SHALL PROVIDER BE LIABLE FOR LOST PROFITS.
-
-5. TERMINATION. Either party may terminate for convenience with 90 days notice. Provider may terminate immediately for non-payment.
-
-6. GOVERNING LAW. This Agreement is governed by the laws of the State of Delaware.`;
-
-const EXAMPLE_B = `This Master Service Agreement ("MSA") is entered into as of April 15, 2024 by and between CloudTech Solutions, Inc. ("Provider") and Global Retail Partners LLC ("Customer").
-
-1. SERVICES. Provider shall provide cloud hosting and data processing services as described in Exhibit A and B.
-
-2. TERM. The initial term is twenty-four (24) months, automatically renewing for successive one year periods unless terminated in accordance with Section 5.
-
-3. FEES. Customer shall pay a monthly fee of $30,000 within 15 days of invoice. Late payments incur a penalty of 2% per month.
-
-4. LIABILITY. Provider's aggregate liability shall not exceed $500,000. IN NO EVENT SHALL PROVIDER BE LIABLE FOR LOST PROFITS OR CONSEQUENTIAL DAMAGES.
-
-5. TERMINATION. Either party may terminate for convenience with 180 days notice. Provider may terminate immediately for non-payment or material breach.
-
-6. GOVERNING LAW. This Agreement is governed by the laws of the State of New York.`;
-
-export default function ComparePage() {
-  const [textA, setTextA] = useState("");
-  const [textB, setTextB] = useState("");
-  const [result, setResult] = useState<CompareResult | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [expandedIdx, setExpandedIdx] = useState<number | null>(null);
-  const [activeSection, setActiveSection] = useState<string>("summary");
-
-  async function handleCompare() {
-    if (!textA.trim() || textA.trim().length < 50) { setError("Contract A must have at least 50 characters."); return; }
-    if (!textB.trim() || textB.trim().length < 50) { setError("Contract B must have at least 50 characters."); return; }
-
-    setLoading(true); setError(""); setResult(null); setExpandedIdx(null);
-    try {
-      const res = await fetch("/api/compare", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ text_a: textA, text_b: textB }),
-      });
-      if (!res.ok) throw new Error((await res.json()).error || "Failed");
-      const data = await res.json();
-      setResult(data);
-    } catch (e: any) { setError(e.message); }
-    finally { setLoading(false); }
-  }
-
-  function loadExamples() {
-    setTextA(EXAMPLE_A);
-    setTextB(EXAMPLE_B);
-  }
-
-  return (
-    <div className="min-h-screen bg-white">
-      <div className="max-w-7xl mx-auto px-5 py-10">
-        <div className="mb-8">
-          <h1 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
-            <GitCompare className="w-6 h-6 text-zinc-400" />
-            Compare Contracts
-          </h1>
-          <p className="mt-1 text-sm text-zinc-500">Upload or paste two contracts side-by-side. Get clause-level diffs, alignment score, and risk delta.</p>
-        </div>
-
-        {/* Input area */}
-        <div className="grid lg:grid-cols-2 gap-4 mb-6">
-          <div>
-            <label className="text-sm font-medium text-zinc-700 mb-1.5 flex items-center gap-2">
-              <span className="w-6 h-6 rounded bg-zinc-100 flex items-center justify-center text-xs font-bold text-zinc-600">A</span>
-              Contract A
-            </label>
-            <textarea value={textA} onChange={(e) => setTextA(e.target.value)}
-              placeholder="Paste contract A here..."
-              className="w-full h-[280px] 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>
-          <div>
-            <label className="text-sm font-medium text-zinc-700 mb-1.5 flex items-center gap-2">
-              <span className="w-6 h-6 rounded bg-zinc-100 flex items-center justify-center text-xs font-bold text-zinc-600">B</span>
-              Contract B
-            </label>
-            <textarea value={textB} onChange={(e) => setTextB(e.target.value)}
-              placeholder="Paste contract B here..."
-              className="w-full h-[280px] 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>
-        </div>
-
-        <div className="flex gap-2 mb-8">
-          <button onClick={handleCompare} disabled={loading}
-            className="inline-flex items-center gap-2 bg-zinc-900 text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-zinc-800 disabled:opacity-40 transition-colors">
-            {loading ? <><Loader2 className="w-4 h-4 animate-spin" /> Comparing...</> : <><ArrowRightLeft className="w-4 h-4" /> Compare Contracts</>}
-          </button>
-          <button onClick={loadExamples} className="px-4 border border-zinc-200 rounded-lg text-sm text-zinc-500 hover:bg-zinc-50 transition-colors">Load Example</button>
-        </div>
-
-        {error && <p className="mb-6 text-sm text-red-600 flex items-center gap-1.5"><TriangleAlert className="w-3.5 h-3.5" />{error}</p>}
-
-        {/* Results */}
-        {result && (
-          <div className="space-y-6">
-            {/* Summary */}
-            <div className="grid md:grid-cols-4 gap-4">
-              <div className="border border-zinc-200 rounded-xl p-4 text-center">
-                <p className="text-xs text-zinc-400">Alignment</p>
-                <p className="text-2xl font-bold text-zinc-900">{(result.alignment_score * 100).toFixed(1)}%</p>
-              </div>
-              <div className="border border-zinc-200 rounded-xl p-4 text-center">
-                <p className="text-xs text-zinc-400">Clauses in A</p>
-                <p className="text-2xl font-bold text-zinc-900">{result.contract_a_clauses}</p>
-              </div>
-              <div className="border border-zinc-200 rounded-xl p-4 text-center">
-                <p className="text-xs text-zinc-400">Clauses in B</p>
-                <p className="text-2xl font-bold text-zinc-900">{result.contract_b_clauses}</p>
-              </div>
-              <div className={`border rounded-xl p-4 text-center ${result.risk_winner === "tie" ? "border-emerald-200 bg-emerald-50" : "border-red-200 bg-red-50"}`}>
-                <p className="text-xs text-zinc-400">Risk Winner</p>
-                <p className={`text-sm font-bold ${result.risk_winner === "tie" ? "text-emerald-700" : "text-red-700"}`}>{result.risk_delta}</p>
-              </div>
-            </div>
-
-            {/* Section tabs */}
-            <div className="border-b border-zinc-200">
-              <div className="flex gap-1">
-                {[
-                  { key: "summary", label: "Summary", count: 0 },
-                  { key: "modified", label: "Modified", count: result.modified_clauses.length },
-                  { key: "added", label: "Added in B", count: result.added_clauses.length },
-                  { key: "removed", label: "Removed from A", count: result.removed_clauses.length },
-                ].map((s) => (
-                  <button key={s.key} onClick={() => setActiveSection(s.key)}
-                    className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors ${activeSection === s.key ? "border-zinc-900 text-zinc-900" : "border-transparent text-zinc-400 hover:text-zinc-600"}`}>
-                    {s.label} {s.count > 0 && <span className="ml-1 text-zinc-400">({s.count})</span>}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Section content */}
-            <div className="max-h-[500px] overflow-y-auto">
-              {/* Modified clauses */}
-              {activeSection === "modified" && (
-                <div className="space-y-3">
-                  {result.modified_clauses.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 modified clauses detected.</p>
-                    </div>
-                  ) : result.modified_clauses.map((m, i) => {
-                    const isExpanded = expandedIdx === i;
-                    const simColor = m.similarity >= 0.8 ? "text-emerald-600" : m.similarity >= 0.6 ? "text-amber-600" : "text-red-600";
-                    return (
-                      <div key={i} className="border border-zinc-200 rounded-xl overflow-hidden">
-                        <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 bg-amber-50 flex items-center justify-center shrink-0">
-                            <AlertTriangle className="w-4 h-4 text-amber-600" />
-                          </div>
-                          <div className="flex-1 min-w-0">
-                            <div className="flex items-center gap-2">
-                              <span className="text-xs font-medium text-zinc-500 uppercase">{m.clause_type}</span>
-                              <span className={`text-xs font-bold ${simColor}`}>{(m.similarity * 100).toFixed(0)}% similar</span>
-                            </div>
-                            <p className="mt-1 text-sm text-zinc-600 line-clamp-2">{m.clause_a}...</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">
-                            <div className="grid grid-cols-2 gap-3 mt-3">
-                              <div className="bg-red-50 rounded-lg p-3">
-                                <p className="text-[10px] font-semibold text-red-600 uppercase mb-1">Contract A</p>
-                                <p className="text-sm text-zinc-700">{m.clause_a}</p>
-                              </div>
-                              <div className="bg-emerald-50 rounded-lg p-3">
-                                <p className="text-[10px] font-semibold text-emerald-600 uppercase mb-1">Contract B</p>
-                                <p className="text-sm text-zinc-700">{m.clause_b}</p>
-                              </div>
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-
-              {/* Added clauses */}
-              {activeSection === "added" && (
-                <div className="space-y-2">
-                  {result.added_clauses.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 new clauses added in Contract B.</p>
-                    </div>
-                  ) : result.added_clauses.map((c, i) => (
-                    <div key={i} className="border-l-4 border-emerald-400 bg-emerald-50/30 rounded-r-xl p-3">
-                      <span className="text-[10px] font-semibold text-emerald-600 uppercase">{c.type}</span>
-                      <p className="text-sm text-zinc-700 mt-1">{c.text}</p>
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {/* Removed clauses */}
-              {activeSection === "removed" && (
-                <div className="space-y-2">
-                  {result.removed_clauses.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 clauses removed from Contract A.</p>
-                    </div>
-                  ) : result.removed_clauses.map((c, i) => (
-                    <div key={i} className="border-l-4 border-red-400 bg-red-50/30 rounded-r-xl p-3">
-                      <span className="text-[10px] font-semibold text-red-600 uppercase">{c.type}</span>
-                      <p className="text-sm text-zinc-700 mt-1">{c.text}</p>
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {/* Summary */}
-              {activeSection === "summary" && (
-                <div className="space-y-4">
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="border border-zinc-200 rounded-xl p-4">
-                      <p className="text-xs font-medium text-zinc-500 mb-2">Contract A Clause Types</p>
-                      {Object.entries(result.type_map_a).map(([type, count]) => (
-                        <div key={type} className="flex justify-between text-sm py-1">
-                          <span className="text-zinc-600 capitalize">{type}</span>
-                          <span className="font-medium text-zinc-900">{count}</span>
-                        </div>
-                      ))}
-                    </div>
-                    <div className="border border-zinc-200 rounded-xl p-4">
-                      <p className="text-xs font-medium text-zinc-500 mb-2">Contract B Clause Types</p>
-                      {Object.entries(result.type_map_b).map(([type, count]) => (
-                        <div key={type} className="flex justify-between text-sm py-1">
-                          <span className="text-zinc-600 capitalize">{type}</span>
-                          <span className="font-medium text-zinc-900">{count}</span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                  <div className="border border-zinc-200 rounded-xl p-4">
-                    <p className="text-xs font-medium text-zinc-500 mb-2">Raw JSON</p>
-                    <pre className="text-xs text-zinc-600 overflow-x-auto bg-zinc-50 rounded-lg p-3">{JSON.stringify(result, null, 2)}</pre>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+/app/web/compare_page.tsx