Updated frontend UI and backend improvements

README.md

@@ -24,18 +24,21 @@ Legal document analysis web app with authentication, upload, line-level issue de
 ## Active User Flow
 
 1. `index.html` -> Login / Sign up
-2. `upload.html` -> Upload file + run analysis
+2. `upload.html` -> Upload up to 2 reference files + final file, then run cross-verification analysis
 3. `issues.html` -> Line-level issue analysis (duplication, inconsistency, contradiction)
 4. `summary.html` ->
    - Detailed document summary (Page 1, Page 2, ... style)
    - Page-wise summary cards
    - Top findings
-   - Line Error Dashboard (exact page/line)
+5. `dashboard.html` ->
+   - Line error table (exact page/line)
+   - Reference vs Final mismatch explanation + rectify action
 
 ## Features
 
 - Auth endpoints (`register`, `login`) with SQLite
 - Upload support: `PDF`, `DOCX`, `TXT`
+- Cross verification: optional 1-2 reference documents + required final document
 - Detection categories:
   - Duplication
   - Inconsistency

backend/app.py

@@ -87,11 +87,11 @@ def _extract_text_data(file_bytes: bytes, file_ext: str):
     raise ValueError("Unsupported file type. Use PDF, DOCX, or TXT.")
 
 
-def _extract_clauses(text_data):
+def _extract_clauses(text_data, source: str = "final", id_start: int = 0):
     import re
 
     clauses = []
-    clause_id = 0
+    clause_id = id_start
 
     for chunk in text_data:
         raw_text = chunk.get("text", "")
@@ -111,6 +111,7 @@ def _extract_clauses(text_data):
                     "text": cleaned,
                     "page": page_num,
                     "line": line_no,
+                    "source": source,
                 }
             )
             clause_id += 1
@@ -207,6 +208,19 @@ def _threshold_for_mode(scan_mode: str) -> float:
     return 0.60
 
 
+def _is_supported_ext(file_ext: str) -> bool:
+    return file_ext in {"pdf", "docx", "txt"}
+
+
+def _source_label(source: str) -> str:
+    if source == "final":
+        return "Final"
+    if source.startswith("reference_"):
+        idx = source.split("_")[-1]
+        return f"Reference {idx}"
+    return source.title()
+
+
 def _normalized_clause_text(text: str) -> str:
     import re
 
@@ -262,7 +276,7 @@ def _rule_based_category(text_a: str, text_b: str, similarity: float):
     return (None, None, 0.0, "")
 
 
-def _analyze_clauses(clauses, threshold: float):
+def _analyze_clauses(clauses, threshold: float, focus_source: str = "final"):
     if str(PROJECT_ROOT) not in sys.path:
         sys.path.append(str(PROJECT_ROOT))
 
@@ -302,6 +316,14 @@ def _analyze_clauses(clauses, threshold: float):
 
             clause_a = clauses[i]
             clause_b = clauses[j]
+            source_a = str(clause_a.get("source", "final"))
+            source_b = str(clause_b.get("source", "final"))
+            # Compare only pairs involving final/focus doc:
+            # - final vs final
+            # - final vs reference
+            if source_a != focus_source and source_b != focus_source:
+                continue
+
             similarity = _similarity(clause_a["text"], clause_b["text"])
 
             category, label, confidence, reason = _rule_based_category(
@@ -344,6 +366,10 @@ def _analyze_clauses(clauses, threshold: float):
                     "clause2": clause_b["text"],
                     "location1": f"Pg {clause_a['page']}, Ln {clause_a['line']}",
                     "location2": f"Pg {clause_b['page']}, Ln {clause_b['line']}",
+                    "source1": source_a,
+                    "source2": source_b,
+                    "sourceLabel1": _source_label(source_a),
+                    "sourceLabel2": _source_label(source_b),
                     "page1": clause_a["page"],
                     "line1": clause_a["line"],
                     "page2": clause_b["page"],
@@ -352,7 +378,8 @@ def _analyze_clauses(clauses, threshold: float):
             )
             counts[category] += 1
             for clause in (clause_a, clause_b):
-                line_key = (category, clause["page"], clause["line"], label)
+                source = str(clause.get("source", "final"))
+                line_key = (category, source, clause["page"], clause["line"], label)
                 if line_key in seen_line_issues:
                     continue
                 seen_line_issues.add(line_key)
@@ -363,7 +390,9 @@ def _analyze_clauses(clauses, threshold: float):
                         "confidence": round(float(confidence), 4),
                         "page": clause["page"],
                         "line": clause["line"],
-                        "location": f"Pg {clause['page']}, Ln {clause['line']}",
+                        "source": source,
+                        "sourceLabel": _source_label(source),
+                        "location": f"{_source_label(source)} - Pg {clause['page']}, Ln {clause['line']}",
                         "reason": reason,
                     }
                 )
@@ -638,35 +667,56 @@ def login():
 @app.post("/api/analyze")
 def analyze():
     uploaded = request.files.get("file")
+    reference_uploads = request.files.getlist("referenceFiles")
     scan_mode = request.form.get("scanMode", "Standard Scan (Recommended)")
     threshold = _threshold_for_mode(scan_mode)
 
     if uploaded is None or uploaded.filename is None or uploaded.filename.strip() == "":
-        return jsonify({"error": "Please upload a file."}), 400
+        return jsonify({"error": "Please upload the final document file."}), 400
 
     file_ext = uploaded.filename.rsplit(".", 1)[-1].lower() if "." in uploaded.filename else ""
-    if file_ext not in {"pdf", "docx", "txt"}:
+    if not _is_supported_ext(file_ext):
         return jsonify({"error": "Unsupported file type. Use PDF, DOCX, or TXT."}), 400
+    if len(reference_uploads) > 2:
+        return jsonify({"error": "You can upload up to 2 reference documents."}), 400
 
     try:
-        file_bytes = uploaded.read()
-        text_data = _extract_text_data(file_bytes=file_bytes, file_ext=file_ext)
-        if not text_data:
-            return jsonify({"error": "Could not extract text from file."}), 400
-
-        clauses = _extract_clauses(text_data)
-        if len(clauses) < 2:
-            return jsonify({"error": "Not enough clauses found for analysis."}), 400
+        final_file_bytes = uploaded.read()
+        final_text_data = _extract_text_data(file_bytes=final_file_bytes, file_ext=file_ext)
+        if not final_text_data:
+            return jsonify({"error": "Could not extract text from final document."}), 400
+
+        final_clauses = _extract_clauses(final_text_data, source="final", id_start=0)
+        if len(final_clauses) < 2:
+            return jsonify({"error": "Not enough clauses found in final document for analysis."}), 400
+
+        all_clauses = list(final_clauses)
+        for idx, ref in enumerate(reference_uploads, start=1):
+            if ref is None or ref.filename is None or ref.filename.strip() == "":
+                continue
+            ref_ext = ref.filename.rsplit(".", 1)[-1].lower() if "." in ref.filename else ""
+            if not _is_supported_ext(ref_ext):
+                return jsonify({"error": f"Unsupported reference file type for {ref.filename}."}), 400
+            ref_text_data = _extract_text_data(file_bytes=ref.read(), file_ext=ref_ext)
+            if not ref_text_data:
+                continue
+            ref_clauses = _extract_clauses(
+                ref_text_data,
+                source=f"reference_{idx}",
+                id_start=len(all_clauses),
+            )
+            all_clauses.extend(ref_clauses)
 
-        parties = _extract_document_parties(text_data)
+        parties = _extract_document_parties(final_text_data)
         findings, line_issues, counts, compared_pairs = _analyze_clauses(
-            clauses=clauses, threshold=threshold
+            clauses=all_clauses, threshold=threshold, focus_source="final"
         )
+        final_line_issues = [item for item in line_issues if item.get("source") == "final"]
         page_summaries = _build_page_summaries(
-            clauses=clauses, line_issues=line_issues, text_data=text_data
+            clauses=final_clauses, line_issues=final_line_issues, text_data=final_text_data
         )
         detailed_summary = _build_detailed_summary(
-            clauses=clauses,
+            clauses=final_clauses,
             page_summaries=page_summaries,
             findings=findings,
         )
@@ -682,7 +732,8 @@ def analyze():
                     "threshold": threshold,
                     "vendor": parties["vendor"],
                     "vendee": parties["vendee"],
-                    "clauses": len(clauses),
+                    "clauses": len(final_clauses),
+                    "referenceDocs": len([r for r in reference_uploads if r and r.filename]),
                     "pairsCompared": compared_pairs,
                     "issuesFound": len(findings),
                     "duplicationCount": counts["duplication"],
@@ -693,6 +744,7 @@ def analyze():
                 "detailedSummary": detailed_summary,
                 "findings": findings[:50],
                 "lineIssues": line_issues[:200],
+                "finalLineIssues": final_line_issues[:200],
             }
         ),
         200,

frontend/README.md

@@ -0,0 +1,37 @@
+# Frontend (Multi-Page Flow)
+
+This frontend now uses a strict page flow:
+
+1. `index.html` -> Login/Signup
+2. `upload.html` -> Upload 1-2 reference documents (optional) + final document (required), then run analysis
+3. `issues.html` -> Line-level issue page (duplication, inconsistency, contradiction)
+4. `summary.html` -> Final full-document summary
+5. `dashboard.html` -> Final error dashboard (Reference vs Final comparison + line-level table)
+
+## Run
+
+Serve this folder using any static server from `frontend/`:
+
+```bash
+python -m http.server 8080
+```
+
+Open:
+
+- `http://127.0.0.1:8080/index.html`
+
+## Backend dependency
+
+Frontend expects Flask backend endpoints:
+
+- `POST /api/register`
+- `POST /api/login`
+- `POST /api/analyze` (multipart: `file` final doc, optional `referenceFiles[]`, `scanMode`)
+
+Fallback aliases are also supported in client code (`/register`, `/login`, `/analyze`) across ports `5000` and `5001`.
+
+## Notes
+
+- Login state and analysis payload are stored in `sessionStorage`.
+- If user session is missing, `upload.html`, `issues.html`, and `summary.html` redirect to `index.html`.
+- If analysis payload is missing, `issues.html` and `summary.html` redirect to `upload.html`.

frontend/app.js

@@ -0,0 +1,667 @@
+const currentHost = window.location.hostname || "127.0.0.1";
+
+const API_BASES = [
+  `http://${currentHost}:5000/api`,
+  `http://${currentHost}:5001/api`,
+  "http://127.0.0.1:5000/api",
+  "http://localhost:5000/api",
+  "http://127.0.0.1:5001/api",
+  "http://localhost:5001/api",
+];
+
+const ANALYZE_URLS = [
+  `http://${currentHost}:5000/api/analyze`,
+  `http://${currentHost}:5000/analyze`,
+  `http://${currentHost}:5001/api/analyze`,
+  `http://${currentHost}:5001/analyze`,
+  "http://127.0.0.1:5000/api/analyze",
+  "http://127.0.0.1:5000/analyze",
+  "http://localhost:5000/api/analyze",
+  "http://localhost:5000/analyze",
+  "http://127.0.0.1:5001/api/analyze",
+  "http://127.0.0.1:5001/analyze",
+  "http://localhost:5001/api/analyze",
+  "http://localhost:5001/analyze",
+];
+
+const page = (window.location.pathname.split("/").pop() || "index.html").toLowerCase();
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+function setText(el, text, type = null) {
+  if (!el) return;
+  el.textContent = text;
+  el.classList.remove("success", "error");
+  if (type) el.classList.add(type);
+}
+
+function getUser() {
+  const userRaw = sessionStorage.getItem("lsi_user");
+  if (!userRaw) return null;
+  try {
+    return JSON.parse(userRaw);
+  } catch {
+    return null;
+  }
+}
+
+function setUser(user) {
+  sessionStorage.setItem("lsi_user", JSON.stringify(user));
+}
+
+function clearSession() {
+  sessionStorage.removeItem("lsi_user");
+  sessionStorage.removeItem("lsi_analysis_payload");
+}
+
+function getAnalysisPayload() {
+  const raw = sessionStorage.getItem("lsi_analysis_payload");
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+function setAnalysisPayload(payload) {
+  sessionStorage.setItem("lsi_analysis_payload", JSON.stringify(payload));
+}
+
+function normalizeSpaces(text) {
+  return String(text || "").replace(/\s+/g, " ").trim();
+}
+
+function ensureAuth() {
+  const user = getUser();
+  if (!user) {
+    window.location.href = "index.html#home";
+    return null;
+  }
+
+  const badge = document.getElementById("userBadge");
+  if (badge) {
+    badge.textContent = `${user.fullName || user.email || "User"}`;
+  }
+
+  const logoutBtn = document.getElementById("logoutBtn");
+  if (logoutBtn) {
+    logoutBtn.addEventListener("click", () => {
+      clearSession();
+      window.location.href = "index.html#home";
+    });
+  }
+
+  return user;
+}
+
+async function postAuth(endpoint, payload) {
+  let response = null;
+  let data = null;
+  let lastNetworkError = null;
+
+  for (const base of API_BASES) {
+    try {
+      response = await fetch(`${base}${endpoint}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      data = await response.json().catch(() => null);
+      lastNetworkError = null;
+      break;
+    } catch (error) {
+      lastNetworkError = error;
+    }
+  }
+
+  if (lastNetworkError) {
+    throw new Error(`Cannot reach backend at ${API_BASES.join(", ")}.`);
+  }
+
+  return { response, data };
+}
+
+async function runDocumentAnalysis(formData) {
+  let response = null;
+  let data = null;
+  let lastNetworkError = null;
+  let status = null;
+
+  for (const url of ANALYZE_URLS) {
+    try {
+      response = await fetch(url, { method: "POST", body: formData });
+      data = await response.json().catch(() => null);
+      status = response.status;
+      lastNetworkError = null;
+      if (response.status !== 404) break;
+    } catch (error) {
+      lastNetworkError = error;
+    }
+  }
+
+  if (lastNetworkError) {
+    throw new Error("Cannot connect to backend for analysis.");
+  }
+
+  if (!response.ok) {
+    throw new Error(data?.error || `Analysis request failed with HTTP ${status || response.status}.`);
+  }
+
+  return data;
+}
+
+function buildIssueRows(lineIssues, category) {
+  const rows = lineIssues
+    .filter((item) => item.category === category)
+    .slice(0, 80)
+    .map(
+      (item) => `
+      <tr>
+        <td>${escapeHtml(item.location || `Pg ${item.page}, Ln ${item.line}`)}</td>
+        <td>${escapeHtml(item.issueType || "-")}</td>
+        <td>${escapeHtml(item.confidence ?? "-")}</td>
+      </tr>
+    `
+    )
+    .join("");
+
+  if (!rows) {
+    return `<p class="result-muted">No ${category} lines detected.</p>`;
+  }
+
+  return `
+    <div class="table-wrap">
+      <table class="result-table">
+        <thead>
+          <tr>
+            <th>Page/Line</th>
+            <th>Issue Type</th>
+            <th>Confidence</th>
+          </tr>
+        </thead>
+        <tbody>${rows}</tbody>
+      </table>
+    </div>
+  `;
+}
+
+function initIndexPage() {
+  const loginTab = document.getElementById("loginTab");
+  const signupTab = document.getElementById("signupTab");
+  const authForm = document.getElementById("authForm");
+  const nameField = document.getElementById("nameField");
+  const fullNameInput = document.getElementById("fullName");
+  const emailInput = document.getElementById("email");
+  const passwordInput = document.getElementById("password");
+  const submitBtn = document.getElementById("submitBtn");
+  const formSubtitle = document.getElementById("formSubtitle");
+  const message = document.getElementById("message");
+
+  let mode = "login";
+
+  function setMode(nextMode) {
+    mode = nextMode;
+    const isSignup = mode === "signup";
+    signupTab.classList.toggle("active", isSignup);
+    loginTab.classList.toggle("active", !isSignup);
+    nameField.classList.toggle("hidden", !isSignup);
+    submitBtn.textContent = isSignup ? "Create Account" : "Login";
+    formSubtitle.textContent = isSignup
+      ? "Create your account to start securely."
+      : "Enter your credentials to access your account.";
+    fullNameInput.required = isSignup;
+    setText(message, "", null);
+  }
+
+  async function handleAuthSubmit(event) {
+    event.preventDefault();
+    setText(message, "", null);
+
+    const email = emailInput.value.trim();
+    const password = passwordInput.value;
+    const fullName = fullNameInput.value.trim();
+
+    if (!email || !password || (mode === "signup" && !fullName)) {
+      setText(message, "Please fill all required fields.", "error");
+      return;
+    }
+
+    submitBtn.disabled = true;
+
+    try {
+      const endpoint = mode === "signup" ? "/register" : "/login";
+      const payload = mode === "signup" ? { fullName, email, password } : { email, password };
+      const { response, data } = await postAuth(endpoint, payload);
+
+      if (!response.ok) {
+        throw new Error(data?.error || `Request failed with HTTP ${response.status}.`);
+      }
+
+      if (mode === "signup") {
+        setText(message, "Account created. Please login now.", "success");
+        authForm.reset();
+        setMode("login");
+        return;
+      }
+
+      const user = data?.user || { fullName: fullName || email, email };
+      setUser(user);
+      window.location.href = "upload.html";
+    } catch (error) {
+      setText(message, error.message || "Something went wrong.", "error");
+    } finally {
+      submitBtn.disabled = false;
+    }
+  }
+
+  loginTab.addEventListener("click", () => setMode("login"));
+  signupTab.addEventListener("click", () => setMode("signup"));
+  authForm.addEventListener("submit", handleAuthSubmit);
+  setMode("login");
+
+  if (getUser()) {
+    window.location.href = "upload.html";
+  }
+}
+
+function initUploadPage() {
+  if (!ensureAuth()) return;
+
+  const uploadForm = document.getElementById("uploadForm");
+  const legalFile = document.getElementById("legalFile");
+  const referenceFiles = document.getElementById("referenceFiles");
+  const scanMode = document.getElementById("scanMode");
+  const uploadMessage = document.getElementById("uploadMessage");
+  const loadingState = document.getElementById("loadingState");
+  const analysisInputSummary = document.getElementById("analysisInputSummary");
+
+  function renderUploadSummary() {
+    if (!legalFile.files || !legalFile.files[0]) return;
+    const selectedFile = legalFile.files[0];
+    const refs = Array.from((referenceFiles && referenceFiles.files) ? referenceFiles.files : []).slice(0, 2);
+    const refNames = refs.length ? refs.map((f) => escapeHtml(f.name)).join(", ") : "None";
+
+    analysisInputSummary.classList.remove("hidden");
+    analysisInputSummary.innerHTML = `
+      <p><strong>Final File:</strong> ${escapeHtml(selectedFile.name)}</p>
+      <p><strong>Final Type:</strong> ${escapeHtml(selectedFile.type || "unknown")}</p>
+      <p><strong>Final Size:</strong> ${escapeHtml((selectedFile.size / 1024).toFixed(2))} KB</p>
+      <p><strong>Reference Docs:</strong> ${refs.length}</p>
+      <p><strong>Reference Names:</strong> ${refNames}</p>
+      <p><strong>Scan Mode:</strong> ${escapeHtml(scanMode.value)}</p>
+    `;
+    setText(uploadMessage, `Final document selected: ${selectedFile.name}`, "success");
+  }
+
+  legalFile.addEventListener("change", () => {
+    renderUploadSummary();
+  });
+
+  if (referenceFiles) {
+    referenceFiles.addEventListener("change", () => {
+      const refs = Array.from(referenceFiles.files || []);
+      if (refs.length > 2) {
+        setText(uploadMessage, "Please select at most 2 reference documents.", "error");
+        referenceFiles.value = "";
+        return;
+      }
+      renderUploadSummary();
+    });
+  }
+
+  scanMode.addEventListener("change", () => {
+    renderUploadSummary();
+  });
+
+  uploadForm.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    setText(uploadMessage, "", null);
+
+    if (!legalFile.files || legalFile.files.length === 0) {
+      setText(uploadMessage, "Please choose a file to continue.", "error");
+      return;
+    }
+
+    const selectedFile = legalFile.files[0];
+    const selectedScanMode = scanMode.value;
+    const refs = Array.from((referenceFiles && referenceFiles.files) ? referenceFiles.files : []);
+    if (refs.length > 2) {
+      setText(uploadMessage, "You can upload up to 2 reference documents.", "error");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", selectedFile);
+    formData.append("scanMode", selectedScanMode);
+    refs.forEach((file) => formData.append("referenceFiles", file));
+
+    uploadForm.classList.add("hidden");
+    loadingState.classList.remove("hidden");
+
+    try {
+      const payload = await runDocumentAnalysis(formData);
+      payload._meta = {
+        fileName: selectedFile.name,
+        fileType: selectedFile.type || "unknown",
+        fileSizeKb: Number((selectedFile.size / 1024).toFixed(2)),
+        referenceFiles: refs.map((f) => f.name),
+      };
+      setAnalysisPayload(payload);
+      window.location.href = "issues.html";
+    } catch (error) {
+      loadingState.classList.add("hidden");
+      uploadForm.classList.remove("hidden");
+      setText(uploadMessage, error.message || "Analysis failed.", "error");
+    }
+  });
+}
+
+function initIssuesPage() {
+  if (!ensureAuth()) return;
+
+  const payload = getAnalysisPayload();
+  if (!payload) {
+    window.location.href = "upload.html";
+    return;
+  }
+
+  const summary = payload.summary || {};
+  const lineIssues = Array.isArray(payload.finalLineIssues)
+    ? payload.finalLineIssues
+    : Array.isArray(payload.lineIssues)
+      ? payload.lineIssues
+      : [];
+
+  const issueStats = document.getElementById("issueStats");
+  issueStats.innerHTML = `
+    <article class="stat-card stat-dup">
+      <h3>Duplication</h3>
+      <p>${escapeHtml(summary.duplicationCount ?? 0)}</p>
+    </article>
+    <article class="stat-card stat-inc">
+      <h3>Inconsistency</h3>
+      <p>${escapeHtml(summary.inconsistencyCount ?? 0)}</p>
+    </article>
+    <article class="stat-card stat-con">
+      <h3>Contradiction</h3>
+      <p>${escapeHtml(summary.contradictionCount ?? 0)}</p>
+    </article>
+  `;
+
+  const lineIssueTables = document.getElementById("lineIssueTables");
+  lineIssueTables.innerHTML = `
+    <section class="result-card">
+      <h4>Duplication Lines</h4>
+      ${buildIssueRows(lineIssues, "duplication")}
+    </section>
+    <section class="result-card">
+      <h4>Inconsistency Lines</h4>
+      ${buildIssueRows(lineIssues, "inconsistency")}
+    </section>
+    <section class="result-card">
+      <h4>Contradiction Lines</h4>
+      ${buildIssueRows(lineIssues, "contradiction")}
+    </section>
+  `;
+}
+
+function initSummaryPage() {
+  if (!ensureAuth()) return;
+
+  const payload = getAnalysisPayload();
+  if (!payload) {
+    window.location.href = "upload.html";
+    return;
+  }
+
+  const summary = payload.summary || {};
+  const findings = Array.isArray(payload.findings) ? payload.findings : [];
+  const pageSummaries = Array.isArray(payload.pageSummaries) ? payload.pageSummaries : [];
+  const lineIssues = Array.isArray(payload.finalLineIssues)
+    ? payload.finalLineIssues
+    : Array.isArray(payload.lineIssues)
+      ? payload.lineIssues
+      : [];
+  const detailedSummary = String(payload.detailedSummary || "").trim();
+  const meta = payload._meta || {};
+
+  const summaryDetails = document.getElementById("summaryDetails");
+  summaryDetails.innerHTML = `
+    <article class="summary-item"><span>File</span><strong>${escapeHtml(meta.fileName || "-")}</strong></article>
+    <article class="summary-item"><span>Scan Mode</span><strong>${escapeHtml(summary.scanMode || "-")}</strong></article>
+    <article class="summary-item"><span>Threshold</span><strong>${escapeHtml(summary.threshold ?? "-")}</strong></article>
+    <article class="summary-item"><span>Vendor</span><strong>${escapeHtml(summary.vendor || "Not found")}</strong></article>
+    <article class="summary-item"><span>Vendee</span><strong>${escapeHtml(summary.vendee || "Not found")}</strong></article>
+    <article class="summary-item"><span>Clauses</span><strong>${escapeHtml(summary.clauses ?? 0)}</strong></article>
+    <article class="summary-item"><span>Pairs Compared</span><strong>${escapeHtml(summary.pairsCompared ?? 0)}</strong></article>
+    <article class="summary-item"><span>Total Issues</span><strong>${escapeHtml(summary.issuesFound ?? 0)}</strong></article>
+    <article class="summary-item"><span>Reference Docs</span><strong>${escapeHtml(summary.referenceDocs ?? 0)}</strong></article>
+  `;
+
+  const findingsBoard = document.getElementById("findingsBoard");
+  const pageSummaryBoard = document.getElementById("pageSummaryBoard");
+  const detailedSummaryText = document.getElementById("detailedSummaryText");
+
+  if (detailedSummaryText) {
+    detailedSummaryText.textContent = detailedSummary || "Detailed summary is not available for this document.";
+  }
+
+  if (pageSummaryBoard) {
+    if (pageSummaries.length === 0) {
+      pageSummaryBoard.innerHTML =
+        `<article class="result-card"><p class="result-muted">No page-wise summary available for this document.</p></article>`;
+    } else {
+      pageSummaryBoard.innerHTML = pageSummaries
+        .map((item) => {
+          const keyLines = Array.isArray(item.keyLines) ? item.keyLines : [];
+          const keyLineHtml = keyLines.length
+            ? keyLines.map((k) => `<li>${escapeHtml(k)}</li>`).join("")
+            : "<li>No flagged lines on this page.</li>";
+          return `
+          <article class="result-card">
+            <h4>Page ${escapeHtml(item.page)}</h4>
+            <p><strong>Clauses:</strong> ${escapeHtml(item.clauseCount ?? 0)}</p>
+            <p><strong>Issues:</strong> ${escapeHtml(item.issueCount ?? 0)} (Duplication: ${escapeHtml(item.duplicationCount ?? 0)}, Inconsistency: ${escapeHtml(item.inconsistencyCount ?? 0)}, Contradiction: ${escapeHtml(item.contradictionCount ?? 0)})</p>
+            <p><strong>Page Snippet:</strong> ${escapeHtml(item.pageSnippet || "-")}</p>
+            <p><strong>Summary:</strong> ${escapeHtml(item.summaryText || "-")}</p>
+            <p><strong>Key Lines:</strong></p>
+            <ul>${keyLineHtml}</ul>
+          </article>
+        `;
+        })
+        .join("");
+    }
+  }
+
+  if (findings.length === 0) {
+    findingsBoard.innerHTML = `<article class="result-card"><p class="result-muted">No major findings detected for this document.</p></article>`;
+    return;
+  }
+
+  const topFindings = findings.slice(0, 20);
+  findingsBoard.innerHTML = topFindings
+    .map(
+      (item) => `
+      <article class="result-card">
+        <h4>${escapeHtml(item.category || "issue")} - ${escapeHtml(item.issueType || "-")}</h4>
+        <p><strong>Confidence:</strong> ${escapeHtml(item.confidence ?? "-")}</p>
+        <p><strong>Location A:</strong> ${escapeHtml(item.location1 || "-")}</p>
+        <p><strong>Location B:</strong> ${escapeHtml(item.location2 || "-")}</p>
+        <p><strong>Reason:</strong> ${escapeHtml(item.reason || "-")}</p>
+      </article>
+    `
+    )
+    .join("");
+
+}
+
+function initDashboardPage() {
+  if (!ensureAuth()) return;
+
+  const payload = getAnalysisPayload();
+  if (!payload) {
+    window.location.href = "upload.html";
+    return;
+  }
+
+  const findings = Array.isArray(payload.findings) ? payload.findings : [];
+  const lineIssues = Array.isArray(payload.finalLineIssues)
+    ? payload.finalLineIssues
+    : Array.isArray(payload.lineIssues)
+      ? payload.lineIssues
+      : [];
+
+  const lineErrorDashboard = document.getElementById("lineErrorDashboard");
+  const comparisonBoard = document.getElementById("comparisonBoard");
+
+  if (lineErrorDashboard) {
+    if (lineIssues.length === 0) {
+      lineErrorDashboard.innerHTML = `<p class="result-muted">No line-level errors detected.</p>`;
+    } else {
+      const rows = lineIssues
+        .slice(0, 200)
+        .map(
+          (item) => `
+          <tr>
+            <td>${escapeHtml(item.location || `Pg ${item.page}, Ln ${item.line}`)}</td>
+            <td>${escapeHtml(item.category || "-")}</td>
+            <td>${escapeHtml(item.issueType || "-")}</td>
+            <td>${escapeHtml(item.confidence ?? "-")}</td>
+            <td>${escapeHtml(item.reason || "-")}</td>
+          </tr>
+        `
+        )
+        .join("");
+
+      lineErrorDashboard.innerHTML = `
+        <div class="table-wrap">
+          <table class="result-table">
+            <thead>
+              <tr>
+                <th>Page/Line</th>
+                <th>Category</th>
+                <th>Issue Type</th>
+                <th>Confidence</th>
+                <th>Reason</th>
+              </tr>
+            </thead>
+            <tbody>${rows}</tbody>
+          </table>
+        </div>
+      `;
+    }
+  }
+
+  if (comparisonBoard) {
+    const crossFindings = findings
+      .filter((f) => String(f.source1 || "").startsWith("reference_") || String(f.source2 || "").startsWith("reference_"))
+      .slice(0, 80);
+
+    if (!crossFindings.length) {
+      comparisonBoard.innerHTML = `<article class="result-card"><p class="result-muted">Reference vs Final cross-verification mismatches not found.</p></article>`;
+      return;
+    }
+
+    function suggestionFor(category, issueType, refText, finalText) {
+      const c = String(category || "").toLowerCase();
+      const i = String(issueType || "").toLowerCase();
+      if (c === "duplication" || i.includes("duplication")) {
+        return "இந்த clause repeated/near-duplicate. ஒரே legal meaning உள்ள line-ஐ மட்டும் வைத்துக்கொண்டு மற்றதை remove செய்யவும்.";
+      }
+      if (c === "inconsistency" || i.includes("inconsistency") || i.includes("numeric")) {
+        return "Number/term mismatch இருக்கு. Reference document value-ஐ verify பண்ணி final document-ல் same value update செய்யவும்.";
+      }
+      if (c === "contradiction" || i.includes("conflict") || i.includes("contradiction")) {
+        return "இரண்டு lines opposite meaning கொடுக்குது. Reference document intent எது சரி என்று confirm செய்து final document line-ஐ அதற்கு align செய்யவும்.";
+      }
+      if (String(refText || "").trim() && String(finalText || "").trim()) {
+        return "Reference line மற்றும் final line legal intent same ஆக இருக்கிறதா verify செய்து, ambiguous words remove செய்து rewrite செய்யவும்.";
+      }
+      return "Clause wording-ஐ reference document-ஓடு compare செய்து consistent version-ஆ மாற்றவும்.";
+    }
+
+    comparisonBoard.innerHTML = crossFindings
+      .map((item) => {
+        const source1 = String(item.source1 || "");
+        const source2 = String(item.source2 || "");
+        const firstIsFinal = source1 === "final";
+        const finalText = firstIsFinal ? item.clause1 : item.clause2;
+        const refText = firstIsFinal ? item.clause2 : item.clause1;
+        const finalLoc = firstIsFinal ? item.location1 : item.location2;
+        const refLoc = firstIsFinal ? item.location2 : item.location1;
+        const refLabel = firstIsFinal ? item.sourceLabel2 : item.sourceLabel1;
+        const fixSuggestion = suggestionFor(item.category, item.issueType, refText, finalText);
+        return `
+          <article class="result-card comparison-card">
+            <h4>Error at ${escapeHtml(finalLoc || "-")}</h4>
+            <p><strong>Type:</strong> ${escapeHtml(item.category || "issue")} - ${escapeHtml(item.issueType || "-")}</p>
+            <p><strong>What is wrong:</strong> ${escapeHtml(item.reason || "-")}</p>
+            <p><strong>Original (${escapeHtml(refLabel || "Reference")} - ${escapeHtml(refLoc || "-")}):</strong></p>
+            <p class="compare-text">${escapeHtml(refText || "-")}</p>
+            <p><strong>Your Final Document (${escapeHtml(finalLoc || "-")}):</strong></p>
+            <p class="compare-text">${escapeHtml(finalText || "-")}</p>
+            <p><strong>How to rectify:</strong> ${escapeHtml(fixSuggestion)}</p>
+            <div class="workflow-actions">
+              <button
+                type="button"
+                class="secondary-btn rectify-btn"
+                data-ref-text="${escapeHtml(normalizeSpaces(refText || ""))}"
+                data-final-text="${escapeHtml(normalizeSpaces(finalText || ""))}"
+              >
+                Rectify this line
+              </button>
+              <span class="rectify-hint">Suggested corrected line will be copied.</span>
+            </div>
+          </article>
+        `;
+      })
+      .join("");
+
+    const rectifyButtons = comparisonBoard.querySelectorAll(".rectify-btn");
+    rectifyButtons.forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        const refLine = normalizeSpaces(btn.getAttribute("data-ref-text") || "");
+        const finalLine = normalizeSpaces(btn.getAttribute("data-final-text") || "");
+        const suggestion = refLine || finalLine || "Review this clause with reference document and update wording for consistency.";
+
+        try {
+          if (navigator.clipboard && navigator.clipboard.writeText) {
+            await navigator.clipboard.writeText(suggestion);
+          }
+          const hint = btn.parentElement && btn.parentElement.querySelector(".rectify-hint");
+          if (hint) {
+            hint.textContent = "Corrected line copied. Paste into your final document.";
+          }
+          btn.textContent = "Copied";
+        } catch {
+          const hint = btn.parentElement && btn.parentElement.querySelector(".rectify-hint");
+          if (hint) {
+            hint.textContent = `Suggested line: ${suggestion}`;
+          }
+        }
+      });
+    });
+  }
+}
+
+if (page === "index.html" || page === "") {
+  initIndexPage();
+} else if (page === "upload.html") {
+  initUploadPage();
+} else if (page === "issues.html") {
+  initIssuesPage();
+} else if (page === "summary.html") {
+  initSummaryPage();
+} else if (page === "dashboard.html") {
+  initDashboardPage();
+} else if (page === "workflow.html") {
+  window.location.href = "upload.html";
+}

frontend/dashboard.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard | LegalSI</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="container topbar-inner">
+        <a class="brand" href="index.html#home">LegalSI</a>
+        <div class="page-links">
+          <a class="page-link" href="upload.html">Upload</a>
+          <a class="page-link" href="issues.html">Analysis</a>
+          <a class="page-link" href="summary.html">Summary</a>
+          <a class="page-link active" href="dashboard.html">Dashboard</a>
+          <button id="logoutBtn" class="logout-btn" type="button">Logout</button>
+        </div>
+      </div>
+    </header>
+
+    <main class="flow-main">
+      <section class="container flow-card">
+        <div class="upload-header">
+          <h1>Final Error Dashboard</h1>
+          <span id="userBadge" class="user-badge"></span>
+        </div>
+        <p class="upload-subtitle">Each error is shown in simple format: what is wrong, original line, your final line, and how to rectify.</p>
+
+        <h3 class="section-subtitle">Line Error Table</h3>
+        <article class="result-card">
+          <div id="lineErrorDashboard"></div>
+        </article>
+
+        <h3 class="section-subtitle">Reference vs Final Comparison</h3>
+        <div id="comparisonBoard" class="result-list"></div>
+
+        <div class="workflow-actions">
+          <a class="secondary-btn as-link" href="summary.html">Back to Summary</a>
+          <a class="submit-btn as-link submit-link" href="upload.html">Analyze New Document</a>
+        </div>
+      </section>
+    </main>
+
+    <script src="app.js"></script>
+  </body>
+</html>

frontend/issues.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Analysis | LegalSI</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="container topbar-inner">
+        <a class="brand" href="index.html#home">LegalSI</a>
+        <div class="page-links">
+          <a class="page-link" href="upload.html">Upload</a>
+          <a class="page-link active" href="issues.html">Analysis</a>
+          <a class="page-link" href="summary.html">Summary</a>
+          <a class="page-link" href="dashboard.html">Dashboard</a>
+          <button id="logoutBtn" class="logout-btn" type="button">Logout</button>
+        </div>
+      </div>
+    </header>
+
+    <main class="flow-main">
+      <section class="container flow-card">
+        <div class="upload-header">
+          <h1>Line-Level Analysis</h1>
+          <span id="userBadge" class="user-badge"></span>
+        </div>
+        <p class="upload-subtitle">Inconsistencies, contradictions, and duplications with page and line references.</p>
+
+        <div id="issueStats" class="stats-grid"></div>
+        <div id="lineIssueTables"></div>
+
+        <div class="workflow-actions">
+          <a class="secondary-btn as-link" href="upload.html">Back to Upload</a>
+          <a class="submit-btn as-link submit-link" href="summary.html">Next: Summary</a>
+        </div>
+      </section>
+    </main>
+
+    <script src="app.js"></script>
+  </body>
+</html>

frontend/styles.css

@@ -0,0 +1,981 @@
+:root {
+  --bg: #f3f5f8;
+  --surface: #ffffff;
+  --surface-soft: #f8fafc;
+  --ink: #0e2238;
+  --muted: #5b6f85;
+  --border: #d3dee9;
+  --navy: #12385f;
+  --navy-2: #1f4d79;
+  --gold: #b78a28;
+  --primary: #1f5fa6;
+  --primary-2: #2e79c8;
+  --teal: #1f8a75;
+  --danger: #b93f4f;
+  --ok: #166a47;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  font-family: "Manrope", sans-serif;
+  color: var(--ink);
+  background:
+    radial-gradient(1000px 450px at -10% -8%, #dfe9f5 0%, rgba(223, 233, 245, 0) 60%),
+    radial-gradient(900px 420px at 110% -10%, #ece5d5 0%, rgba(236, 229, 213, 0) 58%),
+    linear-gradient(180deg, #eff3f7 0%, #f8fafd 42%, #ffffff 100%);
+  line-height: 1.45;
+}
+
+.container {
+  width: min(1180px, 92%);
+  margin: 0 auto;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: rgba(249, 251, 253, 0.94);
+  backdrop-filter: blur(6px);
+  border-bottom: 1px solid #cfd9e4;
+  box-shadow: 0 4px 18px rgba(14, 34, 56, 0.06);
+}
+
+.topbar-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 68px;
+}
+
+.brand {
+  font-family: "Space Grotesk", sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--navy);
+  text-decoration: none;
+}
+
+.nav-links {
+  display: flex;
+  gap: 20px;
+}
+
+.nav-links a {
+  color: #264868;
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 14px;
+  padding: 6px 8px;
+  border-radius: 8px;
+}
+
+.nav-links a:hover {
+  background: #e9f0f8;
+  color: var(--navy);
+}
+
+.hero {
+  position: relative;
+  padding: 48px 0 42px;
+  overflow: hidden;
+}
+
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(120deg, rgba(18, 56, 95, 0.1), rgba(183, 138, 40, 0.09)),
+    url("assets/legal-tech-bg.svg") right center / cover no-repeat;
+  opacity: 0.95;
+  pointer-events: none;
+}
+
+.hero-grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1.1fr 0.95fr;
+  gap: 24px;
+  align-items: start;
+}
+
+.hero-copy {
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 24px;
+  box-shadow: 0 14px 34px rgba(15, 38, 66, 0.11);
+  animation: fadeInUp 0.45s ease-out;
+}
+
+.eyebrow {
+  margin: 0 0 10px;
+  font-size: 13px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--navy-2);
+  font-weight: 800;
+}
+
+.hero-copy h1 {
+  margin: 0;
+  font-size: clamp(30px, 4.6vw, 50px);
+  line-height: 1.08;
+  font-family: "Space Grotesk", sans-serif;
+}
+
+.hero-text {
+  margin: 14px 0 18px;
+  color: var(--muted);
+  line-height: 1.6;
+  max-width: 66ch;
+}
+
+.hero-cta-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin: 8px 0 14px;
+}
+
+.hero-cta-primary,
+.hero-cta-secondary {
+  text-decoration: none;
+  border-radius: 11px;
+  font-size: 14px;
+  font-weight: 800;
+  padding: 10px 14px;
+}
+
+.hero-cta-primary {
+  color: #ffffff;
+  background: linear-gradient(92deg, var(--navy), var(--primary-2) 58%, var(--teal));
+  box-shadow: 0 10px 18px rgba(17, 62, 110, 0.22);
+}
+
+.hero-cta-secondary {
+  color: #1c446b;
+  background: #ecf4ff;
+  border: 1px solid #bfd6f2;
+}
+
+.trust-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 14px;
+}
+
+.trust-strip span {
+  border: 1px solid #d0dded;
+  border-radius: 999px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #315579;
+  background: #f5f9ff;
+}
+
+.hero-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.hero-metrics > div {
+  border: 1px solid #d5e2f0;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 12px;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.hero-metrics > div:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 18px rgba(16, 43, 74, 0.09);
+}
+
+.hero-metrics h3 {
+  margin: 0;
+  font-size: 14px;
+}
+
+.hero-metrics p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.preview-card {
+  margin-top: 12px;
+  border: 1px solid #ccdaea;
+  border-radius: 14px;
+  padding: 12px;
+  background: linear-gradient(160deg, #f7fbff 0%, #edf5ff 100%);
+}
+
+.preview-card h3 {
+  margin: 0 0 10px;
+  font-size: 14px;
+  color: #163a60;
+}
+
+.preview-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.preview-grid div {
+  border: 1px solid #c8d9ec;
+  border-radius: 10px;
+  background: #ffffff;
+  padding: 8px;
+  display: grid;
+  gap: 3px;
+}
+
+.preview-grid span {
+  font-size: 11px;
+  color: #5a7090;
+}
+
+.preview-grid strong {
+  font-size: 19px;
+  color: #15395e;
+}
+
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: 0 14px 30px rgba(12, 31, 53, 0.12);
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.auth-panel {
+  padding: 22px;
+}
+
+.form-header {
+  margin-bottom: 18px;
+}
+
+.switcher {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background: #e9eff7;
+  border-radius: 12px;
+  padding: 4px;
+  margin-bottom: 12px;
+}
+
+.switcher button {
+  border: 0;
+  background: transparent;
+  border-radius: 9px;
+  padding: 10px;
+  font-weight: 800;
+  cursor: pointer;
+  color: #315579;
+  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
+}
+
+.switcher button.active {
+  color: #112a48;
+  background: #ffffff;
+  box-shadow: 0 6px 14px rgba(8, 26, 49, 0.08);
+}
+
+.switcher button:active {
+  transform: scale(0.98);
+}
+
+#formSubtitle {
+  margin: 0;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.auth-form {
+  display: grid;
+  gap: 14px;
+}
+
+.field {
+  display: grid;
+  gap: 7px;
+}
+
+.field label {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.field input,
+.control {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 13px;
+  font: inherit;
+  background: #ffffff;
+  outline: none;
+  width: 100%;
+}
+
+.field input:focus,
+.control:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 4px rgba(31, 95, 166, 0.16);
+}
+
+.hidden {
+  display: none;
+}
+
+.submit-btn {
+  margin-top: 8px;
+  border: 0;
+  border-radius: 12px;
+  padding: 12px;
+  background: linear-gradient(92deg, var(--navy), var(--primary-2) 58%, var(--teal));
+  color: #ffffff;
+  font-weight: 800;
+  font-size: 15px;
+  cursor: pointer;
+  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
+}
+
+.submit-btn:hover {
+  filter: brightness(1.03);
+  transform: translateY(-1px);
+  box-shadow: 0 10px 18px rgba(17, 62, 110, 0.22);
+}
+
+.message {
+  min-height: 22px;
+  margin: 14px 0 0;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.message.success {
+  color: var(--ok);
+}
+
+.message.error {
+  color: var(--danger);
+}
+
+.upload-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.upload-header h2 {
+  margin: 0;
+  font-family: "Space Grotesk", sans-serif;
+}
+
+.upload-subtitle {
+  margin: 10px 0 18px;
+  color: var(--muted);
+}
+
+.stepper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  margin: 10px 0 16px;
+}
+
+.step-chip {
+  text-align: center;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px 10px;
+  font-size: 13px;
+  font-weight: 800;
+  color: #5d7190;
+  background: #f3f6fb;
+  transition: all 0.2s ease;
+}
+
+.step-chip.active {
+  color: #0f2d4e;
+  border-color: #b7cde7;
+  background: #e8f1fc;
+  box-shadow: inset 0 0 0 1px rgba(38, 97, 166, 0.15);
+}
+
+.workflow-step {
+  margin-top: 6px;
+}
+
+.summary-box {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface-soft);
+  padding: 12px;
+  color: #25496f;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
+}
+
+.summary-box p {
+  margin: 5px 0;
+  font-size: 14px;
+}
+
+.workflow-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.upload-zone-wrap {
+  margin-top: 2px;
+}
+
+.upload-zone {
+  border: 1.5px dashed #b8cbe0;
+  border-radius: 14px;
+  background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
+  min-height: 132px;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  gap: 6px;
+  cursor: pointer;
+  padding: 14px;
+  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
+}
+
+.upload-zone:hover {
+  border-color: #7ca4cf;
+  background: linear-gradient(180deg, #fafdff 0%, #eef5ff 100%);
+  transform: translateY(-1px);
+}
+
+.upload-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  margin: 0 auto;
+  display: grid;
+  place-content: center;
+  font-size: 22px;
+  font-weight: 700;
+  color: #21507f;
+  background: #e5eef9;
+}
+
+.upload-title {
+  font-size: 14px;
+  font-weight: 800;
+  color: #1f4469;
+}
+
+.upload-hint {
+  font-size: 12px;
+  color: #5f7691;
+}
+
+.file-input-hidden {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+.chat-panel {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: #f7fbff;
+  padding: 12px;
+  margin-top: 10px;
+  display: grid;
+  gap: 10px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.chat-bubble {
+  padding: 10px 12px;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.chat-bubble.user {
+  justify-self: end;
+  max-width: 92%;
+  background: #e8f1ff;
+  border: 1px solid #bfd6f4;
+  color: #1f4268;
+}
+
+.chat-bubble.bot {
+  justify-self: start;
+  max-width: 96%;
+  background: #ffffff;
+  border: 1px solid #d4e0ee;
+  color: #274968;
+}
+
+.logout-btn {
+  border: 1px solid var(--border);
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.secondary-btn {
+  border: 1px solid #b8cbe0;
+  background: #f1f6fc;
+  color: #1f4469;
+  border-radius: 12px;
+  padding: 12px 14px;
+  font-weight: 800;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.18s ease, transform 0.14s ease;
+}
+
+.secondary-btn:hover {
+  background: #e7f0fa;
+}
+
+.secondary-btn:active {
+  transform: scale(0.98);
+}
+
+.section {
+  padding: 20px 0 26px;
+}
+
+.section-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 24px;
+  box-shadow: 0 10px 24px rgba(12, 34, 58, 0.09);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.section-card:hover {
+  box-shadow: 0 14px 26px rgba(12, 34, 58, 0.13);
+  transform: translateY(-1px);
+}
+
+.section-card h2 {
+  margin: 0 0 10px;
+  font-family: "Space Grotesk", sans-serif;
+}
+
+.section-card p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.7;
+}
+
+.service-grid {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.service-grid article {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 14px;
+  background: var(--surface-soft);
+}
+
+.service-grid h3 {
+  margin: 0 0 8px;
+  font-size: 16px;
+}
+
+.contact-grid {
+  margin-top: 14px;
+  display: grid;
+  gap: 8px;
+  color: #193b61;
+}
+
+.analysis-result {
+  margin-top: 16px;
+  border-top: 1px solid var(--border);
+  padding-top: 14px;
+}
+
+.result-summary h3 {
+  margin: 0 0 8px;
+  font-family: "Space Grotesk", sans-serif;
+}
+
+.result-summary p {
+  margin: 4px 0;
+  color: #1d3352;
+}
+
+.result-visual {
+  margin-top: 12px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px;
+  background: linear-gradient(180deg, #f8fbff 0%, #f4f8fd 100%);
+}
+
+.result-visual h3 {
+  margin: 0 0 10px;
+}
+
+.bar-row {
+  display: grid;
+  grid-template-columns: 170px 1fr 52px;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.bar-label,
+.bar-value {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.bar-track {
+  width: 100%;
+  height: 12px;
+  border-radius: 999px;
+  background: #dde5f1;
+  overflow: hidden;
+}
+
+.bar-fill {
+  height: 100%;
+  border-radius: 999px;
+}
+
+.bar-fill.dup {
+  background: #2d6ec8;
+}
+
+.bar-fill.inc {
+  background: #d08f28;
+}
+
+.bar-fill.con {
+  background: #bd4b58;
+}
+
+.result-list {
+  margin-top: 12px;
+  display: grid;
+  gap: 10px;
+}
+
+.result-card {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: #f9fbfe;
+  transition: box-shadow 0.16s ease;
+}
+
+.result-card:hover {
+  box-shadow: 0 10px 20px rgba(12, 34, 58, 0.09);
+}
+
+.result-card h4 {
+  margin: 0 0 6px;
+}
+
+.result-muted {
+  color: var(--muted);
+}
+
+.table-wrap {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.result-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 8px;
+}
+
+.result-table th,
+.result-table td {
+  border: 1px solid var(--border);
+  padding: 8px;
+  text-align: left;
+  font-size: 13px;
+  vertical-align: top;
+}
+
+.result-table th {
+  background: #eef4ff;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 980px) {
+  .hero-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .preview-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .service-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .bar-row {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
+
+  .nav-links {
+    gap: 12px;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  .topbar-inner {
+    padding-block: 8px;
+  }
+}
+
+.page-links {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.page-link {
+  border: 1px solid #bfd0e3;
+  border-radius: 10px;
+  padding: 6px 10px;
+  font-size: 13px;
+  font-weight: 700;
+  color: #23496f;
+  text-decoration: none;
+  background: #f4f8fd;
+}
+
+.page-link.active {
+  background: #e7f1ff;
+  border-color: #98b9dc;
+  color: #14395f;
+}
+
+.flow-main {
+  padding: 28px 0 36px;
+}
+
+.flow-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: 0 14px 30px rgba(12, 31, 53, 0.12);
+  padding: 22px;
+}
+
+.flow-card h1 {
+  margin: 0;
+  font-family: "Space Grotesk", sans-serif;
+  font-size: clamp(28px, 4vw, 40px);
+}
+
+.user-badge {
+  border: 1px solid #c6d9ee;
+  border-radius: 999px;
+  padding: 8px 12px;
+  background: #f2f8ff;
+  color: #24486d;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.loading-panel {
+  margin-top: 16px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 18px;
+  background: #f5f9ff;
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+}
+
+.spinner {
+  width: 30px;
+  height: 30px;
+  border: 3px solid #c8d8eb;
+  border-top-color: #1f5fa6;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin: 12px 0 14px;
+}
+
+.stat-card {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px;
+  background: #f9fbfe;
+}
+
+.stat-card h3 {
+  margin: 0;
+  font-size: 14px;
+}
+
+.stat-card p {
+  margin: 6px 0 0;
+  font-size: 28px;
+  font-weight: 800;
+}
+
+.stat-dup p {
+  color: #2d6ec8;
+}
+
+.stat-inc p {
+  color: #d08f28;
+}
+
+.stat-con p {
+  color: #bd4b58;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.summary-item {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px;
+  background: #f9fbfe;
+  display: grid;
+  gap: 4px;
+}
+
+.summary-item span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.summary-item strong {
+  color: #1b3d63;
+  font-size: 14px;
+}
+
+.section-subtitle {
+  margin: 6px 0 10px;
+  font-family: "Space Grotesk", sans-serif;
+  font-size: 20px;
+  color: #183d62;
+}
+
+.detailed-summary-text {
+  white-space: pre-wrap;
+  line-height: 1.65;
+  color: #1d3552;
+  font-size: 14px;
+}
+
+.comparison-card {
+  border-left: 4px solid #2d6ec8;
+}
+
+.compare-text {
+  border: 1px solid #d2e2f2;
+  border-radius: 10px;
+  padding: 8px;
+  background: #ffffff;
+  white-space: pre-wrap;
+  line-height: 1.55;
+  color: #1a3d61;
+}
+
+.rectify-btn {
+  min-width: 170px;
+}
+
+.rectify-hint {
+  font-size: 12px;
+  color: #496787;
+  align-self: center;
+}
+
+.as-link {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.submit-link {
+  min-width: 220px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 980px) {
+  .page-links {
+    gap: 6px;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  .stats-grid,
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+}

frontend/summary.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Summary | LegalSI</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="container topbar-inner">
+        <a class="brand" href="index.html#home">LegalSI</a>
+        <div class="page-links">
+          <a class="page-link" href="upload.html">Upload</a>
+          <a class="page-link" href="issues.html">Analysis</a>
+          <a class="page-link active" href="summary.html">Summary</a>
+          <a class="page-link" href="dashboard.html">Dashboard</a>
+          <button id="logoutBtn" class="logout-btn" type="button">Logout</button>
+        </div>
+      </div>
+    </header>
+
+    <main class="flow-main">
+      <section class="container flow-card">
+        <div class="upload-header">
+          <h1>Document Summary</h1>
+          <span id="userBadge" class="user-badge"></span>
+        </div>
+        <p class="upload-subtitle">Overall analysis result for the entire uploaded legal document.</p>
+
+        <div id="summaryDetails" class="summary-grid"></div>
+        <h3 class="section-subtitle">Detailed Document Summary</h3>
+        <article class="result-card">
+          <div id="detailedSummaryText" class="detailed-summary-text"></div>
+        </article>
+        <h3 class="section-subtitle">Page-wise Summary</h3>
+        <div id="pageSummaryBoard" class="result-list"></div>
+        <h3 class="section-subtitle">Top Findings</h3>
+        <div id="findingsBoard" class="result-list"></div>
+
+        <div class="workflow-actions">
+          <a class="secondary-btn as-link" href="issues.html">Back to Analysis</a>
+          <a class="submit-btn as-link submit-link" href="dashboard.html">Next: Dashboard</a>
+        </div>
+      </section>
+    </main>
+
+    <script src="app.js"></script>
+  </body>
+</html>

frontend/upload.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Upload Document | LegalSI</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Space+Grotesk:wght@500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="container topbar-inner">
+        <a class="brand" href="index.html#home">LegalSI</a>
+        <div class="page-links">
+          <a class="page-link active" href="upload.html">Upload</a>
+          <a class="page-link" href="issues.html">Analysis</a>
+          <a class="page-link" href="summary.html">Summary</a>
+          <a class="page-link" href="dashboard.html">Dashboard</a>
+          <button id="logoutBtn" class="logout-btn" type="button">Logout</button>
+        </div>
+      </div>
+    </header>
+
+    <main class="flow-main">
+      <section class="container flow-card">
+        <div class="upload-header">
+          <h1>Upload Document</h1>
+          <span id="userBadge" class="user-badge"></span>
+        </div>
+        <p class="upload-subtitle">Upload 1-2 reference documents for cross verification, then upload the final document for analysis.</p>
+
+        <form id="uploadForm" class="auth-form" novalidate>
+          <div class="field">
+            <label for="scanMode">Scan Mode</label>
+            <select id="scanMode" class="control">
+              <option>Standard Scan (Recommended)</option>
+              <option>Deep Search (Fuzzy)</option>
+              <option>Strict (Duplicates Only)</option>
+            </select>
+          </div>
+
+          <div class="field upload-zone-wrap">
+            <label for="referenceFiles">Reference Documents</label>
+            <label class="upload-zone" for="referenceFiles">
+              <span class="upload-icon">+</span>
+              <span class="upload-title">Upload 1 or 2 reference documents for cross verification</span>
+              <span class="upload-hint">Supported: PDF, DOCX, TXT</span>
+            </label>
+            <input id="referenceFiles" class="control file-input-hidden" type="file" accept=".pdf,.docx,.txt" multiple />
+          </div>
+
+          <div class="field upload-zone-wrap">
+            <label for="legalFile">Final Document (Required)</label>
+            <label class="upload-zone" for="legalFile">
+              <span class="upload-icon">+</span>
+              <span class="upload-title">Drop the final document or click to browse</span>
+              <span class="upload-hint">Supported: PDF, DOCX, TXT</span>
+            </label>
+            <input id="legalFile" class="control file-input-hidden" type="file" accept=".pdf,.docx,.txt" required />
+          </div>
+
+          <div id="analysisInputSummary" class="summary-box hidden"></div>
+
+          <div class="workflow-actions">
+            <a class="secondary-btn as-link" href="index.html#home">Back to Home</a>
+            <button id="runUploadBtn" class="submit-btn" type="submit">Upload and Analyze</button>
+          </div>
+        </form>
+
+        <div id="loadingState" class="loading-panel hidden" aria-live="polite">
+          <div class="spinner"></div>
+          <p>Analyzing document. Please wait...</p>
+        </div>
+
+        <p id="uploadMessage" class="message" aria-live="polite"></p>
+      </section>
+    </main>
+
+    <script src="app.js"></script>
+  </body>
+</html>