smartcomply-web-sdk 1.0.45 → 1.0.48

package/dist/esm/flow/SmartComplyFlow.js

@@ -7,22 +7,25 @@ const STEP_ORDER = [
     "welcome",
     "country",
     "id_type",
-    "id_input", // or document_capture
+    "id_input",
+    "confirm_identity",
     "document_capture",
-    "processing",
+    "ocr_gate",
+    "document_confirm",
     "liveness",
+    "done",
     "result",
 ];
 const COUNTRY_LABELS = {
-    nigeria: "🇳🇬  Nigeria",
-    global: "🌍  Other Countries",
-    ghana: "🇬🇭  Ghana",
-    kenya: "🇰🇪  Kenya",
-    south_africa: "🇿🇦  South Africa",
-    united_states: "🇺🇸  United States",
-    united_kingdom: "🇬🇧  United Kingdom",
+    nigeria: "🇳🇬  Nigeria",
+    global: "🌍  Other Countries",
+    ghana: "🇬🇭  Ghana",
+    kenya: "🇰🇪  Kenya",
+    south_africa: "🇿🇦  South Africa",
+    united_states: "🇺🇸  United States",
+    united_kingdom: "🇬🇧  United Kingdom",
 };
-// Backend/admin data tags document-capture fields inconsistently — the field
+// Backend/admin data tags document-capture fields inconsistently — the field
 // renderer (below) already treats "image" and "file" as file inputs alongside
 // "upload", so flow-routing decisions must recognize the same set or a channel
 // tagged "image"/"file" silently falls back to the number-entry screen.
@@ -32,7 +35,7 @@ function isUploadFieldType(type) {
 function resolveIdTypeInfo(typeName, isDocumentFlow) {
     const u = typeName.toUpperCase();
     const advanced = u.includes("ADVANCED");
-    // Strip UI noise from display labels — users don't need "with face" or "(NIN)" suffixes
+    // Strip UI noise from display labels — users don't need "with face" or "(NIN)" suffixes
     const cleanName = typeName
         .replace(/\s*with\s+face\s*/gi, ' ')
         .replace(/\s*\(NIN\)\s*/gi, ' ')
@@ -47,41 +50,41 @@ function resolveIdTypeInfo(typeName, isDocumentFlow) {
             t.includes("license") ||
             t.includes("national id") ||
             t.includes("national id card");
-        // Note: NIN document (nin_with_face, nin_slip) does NOT require back side —
+        // Note: NIN document (nin_with_face, nin_slip) does NOT require back side —
         // the NIN card is single-sided. Only the physical NIN slip has a back but
         // the OCR pipeline only needs the front.
     };
-    // BVN — always 11 digits
+    // BVN — always 11 digits
     if (u.includes("BVN") || u.includes("BANK VERIFICATION")) {
-        return { icon: "🏦", desc: "Enter your 11-digit Bank Verification Number (BVN)", requiresBack: false };
+        return { icon: "🏦", desc: "Enter your 11-digit Bank Verification Number (BVN)", requiresBack: false };
     }
-    // NIN — always 11 digits (covers nin_with_face, NIN slip, etc.)
+    // NIN — always 11 digits (covers nin_with_face, NIN slip, etc.)
     if (u.includes("NIN") || u.includes("NATIONAL IDENTITY NUMBER")) {
-        return { icon: "🆔", desc: "Enter your 11-digit National Identification Number (NIN)", requiresBack: false };
+        return { icon: "🆔", desc: "Enter your 11-digit National Identification Number (NIN)", requiresBack: false };
     }
     // Ghana Card / Ghana National ID
     if (u.includes("GHANA")) {
         if (isDocumentFlow)
-            return { icon: "🪪", desc: "Capture or upload your Ghana Card", requiresBack: true };
-        return { icon: "🪪", desc: "Enter your Ghana Card number", requiresBack: false };
+            return { icon: "🪪", desc: "Capture or upload your Ghana Card", requiresBack: true };
+        return { icon: "🪪", desc: "Enter your Ghana Card number", requiresBack: false };
     }
     // SSNIT (Ghana social security)
     if (u.includes("SSNIT"))
-        return { icon: "🏛️", desc: "Enter your SSNIT number", requiresBack: false };
+        return { icon: "🏛️", desc: "Enter your SSNIT number", requiresBack: false };
     // Kenya National ID
     if (u.includes("KENYA") || (u.includes("NATIONAL") && u.includes("KENYA")))
-        return { icon: "🆔", desc: "Enter your Kenya National ID number", requiresBack: false };
+        return { icon: "🆔", desc: "Enter your Kenya National ID number", requiresBack: false };
     // TIN
     if (u.includes("TIN") || u.includes("TAX IDENTIFICATION"))
-        return { icon: "🧾", desc: "Enter your Tax Identification Number (TIN)", requiresBack: false };
+        return { icon: "🧾", desc: "Enter your Tax Identification Number (TIN)", requiresBack: false };
     // CAC / Company registration
     if (u.includes("CAC") || u.includes("CORPORATE AFFAIRS") || u.includes("COMPANY"))
-        return { icon: "🏢", desc: advanced ? "Enter RC number, company name & type" : "Enter your company registration number", requiresBack: false };
+        return { icon: "🏢", desc: advanced ? "Enter RC number, company name & type" : "Enter your company registration number", requiresBack: false };
     // Voter / PVC
     if (u.includes("VOTER") || u.includes("PVC")) {
         const requiresBack = requiresBackSide(typeName);
         return {
-            icon: "🗳️",
+            icon: "🗳️",
             desc: isDocumentFlow
                 ? `Capture or upload your voter's card${requiresBack ? " (front & back)" : ""}`
                 : "Enter your voter ID number",
@@ -90,12 +93,12 @@ function resolveIdTypeInfo(typeName, isDocumentFlow) {
     }
     // Passport
     if (u.includes("PASSPORT"))
-        return { icon: "📘", desc: isDocumentFlow ? "Capture or upload your passport" : "Enter your passport number", requiresBack: false };
+        return { icon: "📘", desc: isDocumentFlow ? "Capture or upload your passport" : "Enter your passport number", requiresBack: false };
     // Driver's license
     if (u.includes("DRIVER") || u.includes("LICENSE") || u.includes("LICENCE")) {
         const requiresBack = requiresBackSide(typeName);
         return {
-            icon: "🚗",
+            icon: "🚗",
             desc: isDocumentFlow
                 ? `Capture or upload your driver's license${requiresBack ? " (front & back)" : ""}`
                 : "Enter your driver's license number",
@@ -106,7 +109,7 @@ function resolveIdTypeInfo(typeName, isDocumentFlow) {
     if (u.includes("NATIONAL ID") || (u.includes("NATIONAL") && u.includes("CARD"))) {
         const requiresBack = requiresBackSide(typeName);
         return {
-            icon: "🪪",
+            icon: "🪪",
             desc: isDocumentFlow
                 ? `Capture or upload your ID card${requiresBack ? " (front & back)" : ""}`
                 : "Enter your National ID number",
@@ -115,15 +118,15 @@ function resolveIdTypeInfo(typeName, isDocumentFlow) {
     }
     // Face liveness / comparison
     if (u.includes("LIVENESS") || u.includes("FACE COMPARISON") || u.includes("FACE MATCH"))
-        return { icon: "🤳", desc: "We'll capture a short selfie video to verify you", requiresBack: false };
+        return { icon: "🤳", desc: "We'll capture a short selfie video to verify you", requiresBack: false };
     return {
-        icon: isDocumentFlow ? "📄" : "🆔",
+        icon: isDocumentFlow ? "📄" : "🆔",
         desc: isDocumentFlow ? "Capture or upload your document" : "Enter your ID number",
         requiresBack: false,
     };
 }
-// ─────────────────────────────────────────────────────────────────────
-// ── Widget-side message sanitizer ─────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────
+// ── Widget-side message sanitizer ─────────────────────────────────────────────
 // Strips anything technical before showing text to the end user.
 // Keeps messages that are already written plainly in natural language.
 function _sanitizeUserMessage(raw) {
@@ -152,7 +155,56 @@ function _sanitizeUserMessage(raw) {
         return null;
     return raw.trim();
 }
-// ── Document type code → human label ─────────────────────────────────────────
+// ── B8: OCR date string normaliser ───────────────────────────────────────────
+// OCR providers return dates in wildly different formats. new Date(str) is
+// locale-dependent for anything other than ISO 8601 (YYYY-MM-DD), so we
+// attempt a set of known patterns before falling back to the native parser.
+function _parseOcrDate(raw) {
+    if (!raw)
+        return null;
+    const s = raw.trim();
+    // ISO 8601 or near-ISO  — try first, always unambiguous
+    if (/^\d{4}-\d{2}-\d{2}/.test(s))
+        return new Date(s.slice(0, 10));
+    // DD/MM/YYYY  or  DD-MM-YYYY
+    const dmy = s.match(/^(\d{2})[\/\-](\d{2})[\/\-](\d{4})/);
+    if (dmy)
+        return new Date(`${dmy[3]}-${dmy[2]}-${dmy[1]}`);
+    // MM/DD/YYYY  (US format — less common from OCR but possible)
+    const mdy = s.match(/^(\d{2})\/(\d{2})\/(\d{4})/);
+    if (mdy) {
+        // Heuristic: if "month" > 12 it must be day-first
+        if (parseInt(mdy[1], 10) > 12)
+            return new Date(`${mdy[3]}-${mdy[2]}-${mdy[1]}`);
+        return new Date(`${mdy[3]}-${mdy[1]}-${mdy[2]}`);
+    }
+    // DD Mon YYYY  e.g. "12 May 2029"  or  "12 MAY 2029"
+    const dMonY = s.match(/^(\d{1,2})\s+([A-Za-z]{3,})\s+(\d{4})/);
+    if (dMonY)
+        return new Date(`${dMonY[2]} ${dMonY[1]} ${dMonY[3]}`);
+    // Last resort: native parser
+    const d = new Date(s);
+    return isNaN(d.getTime()) ? null : d;
+}
+// ── W12: Image compression before document upload ────────────────────────────
+async function _compressImage(blob, maxWidth = 1600, quality = 0.85) {
+    try {
+        const bmp = await createImageBitmap(blob);
+        const scale = Math.min(1, maxWidth / bmp.width);
+        const w = Math.round(bmp.width * scale);
+        const h = Math.round(bmp.height * scale);
+        const canvas = document.createElement("canvas");
+        canvas.width = w;
+        canvas.height = h;
+        canvas.getContext("2d").drawImage(bmp, 0, 0, w, h);
+        bmp.close();
+        return await new Promise((res, rej) => canvas.toBlob(b => b ? res(b) : rej(new Error("Compression failed")), "image/jpeg", quality));
+    }
+    catch {
+        return blob; // fallback to original on any error
+    }
+}
+// ── Document type code → human label ─────────────────────────────────────────
 function _formatDocType(code) {
     const map = {
         passport: "Passport",
@@ -173,7 +225,7 @@ function _formatDocType(code) {
     return code.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
 }
 // SmartComplyFlow
-// ─────────────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────
 // Add CSS animation keyframes for spin animations
 const style = document.createElement('style');
 style.textContent = `
@@ -195,6 +247,7 @@ export class SmartComplyFlow {
         this.contentArea = null;
         this.progressBar = null;
         this.stepLabel = null;
+        this.stageDots = null;
         this.brandLabel = null;
         // State
         this.sdkConfig = null;
@@ -214,13 +267,31 @@ export class SmartComplyFlow {
         this.livenessEntryId = null;
         this.isDestroyed = false;
         this.headerBackBtn = null;
+        // Retry safety — max 3 confirmation rejections or liveness failures per session
+        this._confirmRetries = 0;
+        this._livenessFailures = 0;
+        // IVS result stored for confirm_identity screen
+        this._ivsName = "";
+        this._ivsGender = "";
+        // OCR result stored for document_confirm screen
+        this._ocrName = "";
+        this._ocrDocNumber = "";
+        this._ocrExpiry = "";
+        this._ocrFaceImageUrl = "";
+        this._ocrIsExpired = false;
+        this._ocrExpirySoon = false;
+        // Camera pre-warm stream (created during confirmation screen, used in liveness)
+        this._prewarmedStream = null;
+        // OCR gate poll timer — stored so it can be cancelled on navigation or close
+        this._ocrPollTimer = null;
+        // UI timeout from _startStatusPolling — stored so close() can cancel it
+        this._uiTimeoutId = null;
         // Session expiry
         this.sessionExpiryTimer = null;
         // Status polling (result screen)
         this._pollStatusTimer = null;
         // Components
         this.docCapture = null;
-        this._livenessSubmitResult = null;
         this.options = options;
         this.sdk = new SmartComply({
             apiKey: options.apiKey,
@@ -254,6 +325,11 @@ export class SmartComplyFlow {
     close() {
         this.isDestroyed = true;
         this.docCapture?.destroy();
+        // Release any pre-warmed camera stream
+        if (this._prewarmedStream) {
+            this._prewarmedStream.getTracks().forEach(t => t.stop());
+            this._prewarmedStream = null;
+        }
         if (this.sessionExpiryTimer) {
             clearTimeout(this.sessionExpiryTimer);
             this.sessionExpiryTimer = null;
@@ -262,13 +338,23 @@ export class SmartComplyFlow {
             clearTimeout(this._pollStatusTimer);
             this._pollStatusTimer = null;
         }
+        // B6: cancel OCR gate poll timer
+        if (this._ocrPollTimer) {
+            clearTimeout(this._ocrPollTimer);
+            this._ocrPollTimer = null;
+        }
+        // P4: cancel result-screen UI timeout
+        if (this._uiTimeoutId) {
+            clearTimeout(this._uiTimeoutId);
+            this._uiTimeoutId = null;
+        }
         if (this.overlay) {
             this.overlay.style.opacity = "0";
             setTimeout(() => {
                 try {
                     this.overlay?.remove();
                 }
-                catch (_) { /* extension interference — safe to ignore */ }
+                catch (_) { /* extension interference — safe to ignore */ }
                 this.overlay = null;
                 this.modal = null;
                 this.contentArea = null;
@@ -276,9 +362,9 @@ export class SmartComplyFlow {
         }
         this.options.onClose?.();
     }
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     // Initialization
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     mount() {
         // Inject keyframes
         this.injectStyles();
@@ -363,12 +449,12 @@ export class SmartComplyFlow {
             }
             // Load config
             this.sdkConfig = await this.sdk.initializeConfig();
-            // Apply theme from config
+            // Apply theme from config — use theme_hex to override primary colour if set
             if (this.sdkConfig.theme) {
-                this.theme = getTheme(this.sdkConfig.theme);
+                this.theme = getTheme(this.sdkConfig.theme, this.sdkConfig.theme_hex || null);
                 this.applyTheme();
             }
-            // Update brand name
+            // Update brand name in header
             if (this.brandLabel && this.sdkConfig.brand_name) {
                 this.brandLabel.textContent = this.sdkConfig.brand_name;
             }
@@ -380,13 +466,26 @@ export class SmartComplyFlow {
             this.showErrorStep(err.message || "Failed to initialize. Please try again.");
         }
     }
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     // Step rendering
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     showStep(step) {
         this.currentStep = step;
         if (!this.contentArea)
             return;
+        // P1/B6: cancel any in-flight OCR gate poll when user navigates away
+        if (this._ocrPollTimer) {
+            clearTimeout(this._ocrPollTimer);
+            this._ocrPollTimer = null;
+        }
+        // Release a pre-warmed camera stream if we're navigating anywhere other
+        // than liveness (the only step that consumes it) — otherwise "No, use a
+        // different ID" / "No, retake document" / header back-button leave the
+        // camera held open indefinitely with no consumer.
+        if (step !== "liveness" && this._prewarmedStream) {
+            this._prewarmedStream.getTracks().forEach(t => t.stop());
+            this._prewarmedStream = null;
+        }
         // Update progress
         this.updateProgress();
         // Animate out current content
@@ -424,20 +523,32 @@ export class SmartComplyFlow {
             case "id_input":
                 this.renderIdInput(wrapper);
                 break;
+            case "confirm_identity":
+                this.renderConfirmIdentity(wrapper);
+                break;
             case "document_capture":
                 this.renderDocumentCapture(wrapper);
                 break;
+            case "ocr_gate":
+                this.renderOcrGate(wrapper);
+                break;
+            case "document_confirm":
+                this.renderDocumentConfirm(wrapper);
+                break;
             case "processing":
-                this.renderProcessing(wrapper, this.livenessEntryId || undefined);
+                // C1: processing step is dead code — flow now goes to 'done' after submit
                 break;
             case "liveness":
                 this.renderLiveness(wrapper);
                 break;
+            case "done":
+                this.renderDone(wrapper);
+                break;
             case "result":
-                this.renderResult(wrapper);
+                // C2: result step is dead code — showResult/renderResult removed
                 break;
             case "error":
-                break; // handled separately
+                break;
         }
         this.contentArea.appendChild(wrapper);
         // Animate in
@@ -446,7 +557,7 @@ export class SmartComplyFlow {
             wrapper.style.transform = "translateX(0)";
         });
     }
-    // ── Loading ─────────────────────────────────────────────────────
+    // ── Loading ─────────────────────────────────────────────────────
     renderLoading(container) {
         container.style.cssText += "display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:16px;";
         const spinnerWrap = document.createElement("div");
@@ -477,7 +588,7 @@ export class SmartComplyFlow {
         sub.textContent = "Connecting to the verification service...";
         container.appendChild(sub);
     }
-    // ── Welcome ────────────────────────────────────────────────────
+    // ── Welcome ────────────────────────────────────────────────────
     renderWelcome(container) {
         container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;";
         const isDocFlow = this.isDocumentFlow();
@@ -492,7 +603,7 @@ export class SmartComplyFlow {
       background:linear-gradient(135deg,${this.theme.primary}22,${this.theme.primaryGlow});
       border:1.5px solid ${this.theme.primary}33;
     `;
-        iconWrap.textContent = isDocFlow ? "🪪" : "🛡️";
+        iconWrap.textContent = isDocFlow ? "🪪" : "🛡️";
         topRow.appendChild(iconWrap);
         const badge = document.createElement("div");
         badge.style.cssText = `
@@ -503,7 +614,7 @@ export class SmartComplyFlow {
       color:${this.theme.primary};
       border:1px solid ${this.theme.primary}30;
     `;
-        badge.textContent = isDocFlow ? "📄  Document Verification" : "🔍  Data Verification";
+        badge.textContent = isDocFlow ? "📄  Document Verification" : "🔍  Data Verification";
         topRow.appendChild(badge);
         container.appendChild(topRow);
         // Title + subtitle (compact)
@@ -514,7 +625,11 @@ export class SmartComplyFlow {
       color:${this.theme.text};font-size:20px;font-weight:700;
       margin:0;line-height:1.2;
     `;
-        title.textContent = "Identity Verification";
+        // W2: Use client brand name in title
+        const brandName = this.sdkConfig?.brand_name;
+        title.textContent = brandName
+            ? `${brandName} Identity Verification`
+            : "Verify Your Identity";
         titleWrap.appendChild(title);
         const desc = document.createElement("p");
         desc.style.cssText = `
@@ -522,21 +637,21 @@ export class SmartComplyFlow {
       margin:0;max-width:300px;
     `;
         desc.textContent = isDocFlow
-            ? "Scan your ID document and take a quick selfie to confirm your identity."
-            : "Enter your ID details and take a quick selfie to confirm your identity.";
+            ? "You'll need your document and camera access. This takes about 2 minutes."
+            : "You'll need your ID number and camera access. This takes about 2 minutes.";
         titleWrap.appendChild(desc);
         container.appendChild(titleWrap);
-        // Steps preview — compact rows
+        // Steps preview — compact rows
         const steps = isDocFlow
             ? [
-                { icon: "🪪", text: "Choose your document type", sub: "Passport, National ID, Driver License" },
-                { icon: "📷", text: "Scan your document", sub: "Upload or capture a photo of your ID" },
-                { icon: "🤳", text: "Face check", sub: "Quick selfie to confirm it's you" },
+                { icon: "🪪", text: "Choose your document type", sub: "Passport, National ID, Driver License" },
+                { icon: "📷", text: "Scan your document", sub: "Upload or capture a photo of your ID" },
+                { icon: "🤳", text: "Face check", sub: "Quick selfie to confirm it's you" },
             ]
             : [
-                { icon: "🆔", text: "Choose your ID type", sub: "NIN, BVN, Voter's Card and more" },
-                { icon: "📝", text: "Enter your ID details", sub: "Exactly as shown on your ID" },
-                { icon: "🤳", text: "Face check", sub: "Quick selfie to confirm it's you" },
+                { icon: "🆔", text: "Choose your ID type", sub: "NIN, BVN, Voter's Card and more" },
+                { icon: "📝", text: "Enter your ID details", sub: "Exactly as shown on your ID" },
+                { icon: "🤳", text: "Face check", sub: "Quick selfie to confirm it's you" },
             ];
         const stepsWrap = document.createElement("div");
         stepsWrap.style.cssText = `
@@ -577,21 +692,21 @@ export class SmartComplyFlow {
         });
         container.appendChild(stepsWrap);
         // CTA
-        const btn = this.createPrimaryButton("Get Started →");
+        const btn = this.createPrimaryButton("Get Started →");
         btn.style.cssText += "margin-top:2px;";
         btn.addEventListener("click", () => this.showStep("country"));
         container.appendChild(btn);
-        // Trust badge — "Powered by Adhere" already lives in the persistent
+        // Trust badge — "Powered by Adhere" already lives in the persistent
         // modal footer below; repeating it here just cost vertical space.
         const trust = document.createElement("div");
         trust.style.cssText = `
       display:flex;align-items:center;gap:6px;
       color:${this.theme.textMuted};font-size:10.5px;
     `;
-        trust.textContent = "🔒  End-to-end encrypted";
+        trust.textContent = "🔒  End-to-end encrypted";
         container.appendChild(trust);
     }
-    // ── Country Select ──────────────────────────────────────────────
+    // ── Country Select ──────────────────────────────────────────────
     renderCountrySelect(container) {
         container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
         const channels = this.sdkConfig?.channels || {};
@@ -616,7 +731,7 @@ export class SmartComplyFlow {
             container.appendChild(card);
         }
     }
-    // ── ID Type Select ──────────────────────────────────────────────
+    // ── ID Type Select ──────────────────────────────────────────────
     renderIdTypeSelect(container) {
         container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
         const globalDocFlow = this.isDocumentFlow();
@@ -644,9 +759,9 @@ export class SmartComplyFlow {
             // Add back side indicator to subtitle if needed
             let subtitle = info.desc;
             if (requiresBack && isThisDocFlow) {
-                subtitle += " ⚠️ Both sides required";
+                subtitle += " ⚠️ Both sides required";
             }
-            // Clean display name — strip "with face", "(NIN)", "(BVN)" from user-visible label
+            // Clean display name — strip "with face", "(NIN)", "(BVN)" from user-visible label
             const displayName = typeName
                 .replace(/\s*with\s+face\s*/gi, ' ')
                 .replace(/\s*\(NIN\)\s*/gi, ' ')
@@ -683,7 +798,7 @@ export class SmartComplyFlow {
             container.appendChild(card);
         }
     }
-    // ── ID Input (data verification — dynamic fields) ─────────────
+    // ── ID Input (data verification — dynamic fields) ─────────────
     renderIdInput(container) {
         container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
         const dataFields = this.selectedChannelFields.filter((f) => f.type !== "upload");
@@ -702,7 +817,7 @@ export class SmartComplyFlow {
             ? `Enter your ${this.selectedIdTypeName || this.selectedIdType} details exactly as they appear on your ID.`
             : "Fill in the fields below to continue.";
         container.appendChild(subtitle);
-        // Edge case: no data fields configured — show fallback and allow submission
+        // Edge case: no data fields configured — show fallback and allow submission
         if (dataFields.length === 0) {
             const empty = document.createElement("div");
             empty.style.cssText = `
@@ -721,13 +836,13 @@ export class SmartComplyFlow {
             { match: "BVN", rule: { minLen: 11, maxLen: 11, numeric: true, hint: "BVN must be exactly 11 digits" } },
             { match: "NIN", rule: { minLen: 11, maxLen: 11, numeric: true, hint: "NIN must be exactly 11 digits" } },
             { match: "NATIONAL IDENTITY", rule: { minLen: 11, maxLen: 11, numeric: true, hint: "NIN must be exactly 11 digits" } },
-            { match: "PASSPORT", rule: { minLen: 6, maxLen: 20, alphanumeric: true, hint: "Passport number must be 6–20 alphanumeric characters" } },
-            { match: "DRIVER", rule: { minLen: 3, maxLen: 30, alphanumeric: true, hint: "Licence number must be 3–30 alphanumeric characters" } },
-            { match: "VOTER", rule: { minLen: 6, maxLen: 30, alphanumeric: true, hint: "Voter ID must be 6–30 alphanumeric characters" } },
-            { match: "GHANA", rule: { minLen: 8, maxLen: 20, alphanumeric: true, hint: "Ghana Card number must be 8–20 alphanumeric characters" } },
-            { match: "SSNIT", rule: { minLen: 7, maxLen: 15, alphanumeric: true, hint: "SSNIT number must be 7–15 alphanumeric characters" } },
-            { match: "TIN", rule: { minLen: 8, maxLen: 20, alphanumeric: true, hint: "TIN must be 8–20 characters" } },
-            { match: "KRA", rule: { minLen: 10, maxLen: 12, alphanumeric: true, hint: "KRA PIN must be 10–12 characters" } },
+            { match: "PASSPORT", rule: { minLen: 6, maxLen: 20, alphanumeric: true, hint: "Passport number must be 6–20 alphanumeric characters" } },
+            { match: "DRIVER", rule: { minLen: 3, maxLen: 30, alphanumeric: true, hint: "Licence number must be 3–30 alphanumeric characters" } },
+            { match: "VOTER", rule: { minLen: 6, maxLen: 30, alphanumeric: true, hint: "Voter ID must be 6–30 alphanumeric characters" } },
+            { match: "GHANA", rule: { minLen: 8, maxLen: 20, alphanumeric: true, hint: "Ghana Card number must be 8–20 alphanumeric characters" } },
+            { match: "SSNIT", rule: { minLen: 7, maxLen: 15, alphanumeric: true, hint: "SSNIT number must be 7–15 alphanumeric characters" } },
+            { match: "TIN", rule: { minLen: 8, maxLen: 20, alphanumeric: true, hint: "TIN must be 8–20 characters" } },
+            { match: "KRA", rule: { minLen: 10, maxLen: 12, alphanumeric: true, hint: "KRA PIN must be 10–12 characters" } },
         ];
         function getFieldRule(label) {
             const upper = label.toUpperCase();
@@ -755,7 +870,7 @@ export class SmartComplyFlow {
         // Track input elements for validation
         const inputEls = [];
         for (const field of dataFields) {
-            // Send the raw label as the payload key — the backend's
+            // Send the raw label as the payload key — the backend's
             // _SDK_FIELD_KEY_MAP looks up the exact label text (e.g. "National ID",
             // "CAC Number") to remap it to the canonical IVS key. Pre-normalizing
             // it here (as this used to do) produced keys like "national_id" that
@@ -805,7 +920,7 @@ export class SmartComplyFlow {
                 inputEls.push({ field, el: select });
             }
             else if (field.type === "image" || field.type === "file") {
-                // File upload field — converts to base64 for API submission
+                // File upload field — converts to base64 for API submission
                 const fileInput = document.createElement("input");
                 fileInput.type = "file";
                 fileInput.accept = "image/*";
@@ -945,12 +1060,25 @@ export class SmartComplyFlow {
                     fields: { ...this.collectedFields },
                 });
                 if (this.verificationResult.status === "success") {
-                    // Save the first collected field value as identifier for liveness
+                    // Save identifier and identity_check_id for liveness step
                     const fieldValues = Object.values(this.collectedFields);
                     this.idNumber = fieldValues[0] || "";
-                    // A4: Save identity_check_id from verify response to pass to liveness
                     this.identityCheckId = this.verificationResult.data?.identity_check_id || null;
-                    this.showStep("liveness");
+                    // W3: Store name + gender from IVS result for confirmation screen
+                    const d = this.verificationResult.data || {};
+                    const nd = d.normalized_data || d.data || d;
+                    this._ivsName = [nd.first_name || nd.firstname || "", nd.last_name || nd.lastname || nd.surname || ""]
+                        .map(s => String(s || "").trim()).filter(Boolean).join(" ");
+                    this._ivsGender = nd.gender || "";
+                    // W4: If IVS returned no name, there is nothing for the user to confirm —
+                    // auto-proceed straight to Stage 2 (liveness) instead of showing a
+                    // confirmation screen with no identity details to check.
+                    if (!this._ivsName) {
+                        this.showStep("liveness");
+                        return;
+                    }
+                    // Route to confirmation screen — user must confirm before liveness
+                    this.showStep("confirm_identity");
                 }
                 else {
                     errorEl.textContent = this.verificationResult.message || "We could not verify your details. Please check and try again.";
@@ -961,10 +1089,10 @@ export class SmartComplyFlow {
                 }
             }
             catch (err) {
-                // Show a single plain-language error — never raw field:message format
+                // Show a single plain-language error — never raw field:message format
                 const fieldErrors = err.data?.errors;
                 if (Array.isArray(fieldErrors) && fieldErrors.length > 0) {
-                    // Pick the first meaningful error message — strip field prefix
+                    // Pick the first meaningful error message — strip field prefix
                     const firstMsg = fieldErrors[0]?.message || fieldErrors[0]?.detail || "";
                     errorEl.textContent = _sanitizeUserMessage(firstMsg)
                         || "Please check your details and try again.";
@@ -995,7 +1123,7 @@ export class SmartComplyFlow {
             setTimeout(() => firstInput.focus(), 350);
         }
     }
-    // ── Document Capture ────────────────────────────────────────────
+    // ── Document Capture ────────────────────────────────────────────
     renderDocumentCapture(container) {
         container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
         // Strip "with face", "(NIN)", "(BVN)" noise from the user-visible title
@@ -1036,105 +1164,201 @@ export class SmartComplyFlow {
             this.showErrorStep(err.message || "Document capture failed. Please try again.");
         });
     }
-    // ── Processing (real polling-driven, document flow only) ────────────
-    renderProcessing(container, entryId) {
-        container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;";
-        // Spinner
+    // ── W3: Identity Confirmation (data verification) ───────────────
+    renderConfirmIdentity(container) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:8px 0;";
+        // W14: Check retry limit before showing screen
+        if (this._confirmRetries >= SmartComplyFlow.MAX_RETRIES) {
+            this._renderRetryLimitReached(container);
+            return;
+        }
+        // W13: Pre-warm camera silently while user reads this screen
+        this._prewarmCamera();
+        const iconWrap = document.createElement("div");
+        iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;font-size:28px;`;
+        iconWrap.textContent = "🛡️";
+        container.appendChild(iconWrap);
+        const title = document.createElement("h2");
+        title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        title.textContent = this._ivsName ? `Is this you?` : "Identity Confirmed";
+        container.appendChild(title);
+        if (this._ivsName) {
+            // Profile card
+            const card = document.createElement("div");
+            card.style.cssText = `width:100%;padding:16px;border-radius:14px;background:${this.theme.cardBg};border:1.5px solid ${this.theme.border};text-align:left;display:flex;flex-direction:column;gap:10px;`;
+            const rows = [
+                { label: "Name", value: this._ivsName },
+            ];
+            if (this._ivsGender) {
+                const gLabel = this._ivsGender.toLowerCase();
+                rows.push({ label: "Gender", value: gLabel === "m" || gLabel === "male" || gLabel === "1" ? "Male" : gLabel === "f" || gLabel === "female" || gLabel === "2" ? "Female" : this._ivsGender });
+            }
+            rows.push({ label: "ID Type", value: _formatDocType(this.selectedIdType) || this.selectedIdTypeName || this.selectedIdType });
+            rows.forEach(({ label, value }) => {
+                const row = document.createElement("div");
+                row.style.cssText = "display:flex;justify-content:space-between;align-items:center;";
+                const lEl = document.createElement("span");
+                lEl.style.cssText = `color:${this.theme.textMuted};font-size:12px;font-weight:500;`;
+                lEl.textContent = label;
+                const vEl = document.createElement("span");
+                vEl.style.cssText = `color:${this.theme.text};font-size:13px;font-weight:600;max-width:60%;text-align:right;`;
+                vEl.textContent = value;
+                row.appendChild(lEl);
+                row.appendChild(vEl);
+                card.appendChild(row);
+            });
+            container.appendChild(card);
+        }
+        else {
+            const sub = document.createElement("p");
+            sub.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin:0;max-width:280px;line-height:1.6;`;
+            sub.textContent = "Your details have been confirmed. Please continue to the face check.";
+            container.appendChild(sub);
+        }
+        const yesBtn = this.createPrimaryButton("Yes, that's me — continue");
+        yesBtn.addEventListener("click", () => {
+            // B5: Reset retry counter on successful confirmation
+            this._confirmRetries = 0;
+            this.showStep("liveness");
+        });
+        container.appendChild(yesBtn);
+        const noBtn = this.createSecondaryButton("No, use a different ID");
+        noBtn.addEventListener("click", () => {
+            this._confirmRetries++;
+            this._ivsName = "";
+            this._ivsGender = "";
+            this.identityCheckId = null;
+            this.verificationResult = null;
+            this.showStep("id_input");
+        });
+        container.appendChild(noBtn);
+    }
+    // ── W4: Document Confirmation (document verification) ────────────
+    renderDocumentConfirm(container) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:8px 0;";
+        // W14: Check retry limit
+        if (this._confirmRetries >= SmartComplyFlow.MAX_RETRIES) {
+            this._renderRetryLimitReached(container);
+            return;
+        }
+        // W13: Pre-warm camera while user reads
+        this._prewarmCamera();
+        const iconWrap = document.createElement("div");
+        iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;font-size:28px;`;
+        iconWrap.textContent = "📄";
+        container.appendChild(iconWrap);
+        const title = document.createElement("h2");
+        title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        title.textContent = "Are these your details?";
+        container.appendChild(title);
+        const sub = document.createElement("p");
+        sub.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin:0;max-width:280px;line-height:1.5;`;
+        sub.textContent = "We read the following from your document. Please confirm they are correct before continuing.";
+        container.appendChild(sub);
+        // Document face thumbnail if available
+        if (this._ocrFaceImageUrl) {
+            const faceWrap = document.createElement("div");
+            faceWrap.style.cssText = `width:80px;height:80px;border-radius:50%;overflow:hidden;border:3px solid ${this.theme.primary};flex-shrink:0;margin:0 auto;`;
+            const faceImg = document.createElement("img");
+            faceImg.src = this._ocrFaceImageUrl;
+            faceImg.alt = "Photo from your document";
+            faceImg.style.cssText = "width:100%;height:100%;object-fit:cover;";
+            faceWrap.appendChild(faceImg);
+            container.appendChild(faceWrap);
+        }
+        // Expiry soon warning
+        if (this._ocrExpirySoon && !this._ocrIsExpired) {
+            const warn = document.createElement("div");
+            warn.style.cssText = `width:100%;padding:10px 14px;border-radius:10px;background:${this.theme.warning}18;border:1px solid ${this.theme.warning}40;color:${this.theme.warning};font-size:12px;text-align:left;line-height:1.5;`;
+            warn.textContent = "⚠️  Your document expires soon. Some services may not accept it, but you can still continue.";
+            container.appendChild(warn);
+        }
+        // Details card — show whatever OCR returned, never block on missing fields
+        const card = document.createElement("div");
+        card.style.cssText = `width:100%;padding:14px 16px;border-radius:14px;background:${this.theme.cardBg};border:1.5px solid ${this.theme.border};text-align:left;display:flex;flex-direction:column;gap:10px;`;
+        const docRows = [];
+        if (this._ocrName)
+            docRows.push({ label: "Name", value: this._ocrName });
+        if (this._ocrDocNumber)
+            docRows.push({ label: "Document No", value: this._ocrDocNumber });
+        if (this._ocrExpiry)
+            docRows.push({ label: "Expires", value: this._ocrExpiry });
+        docRows.push({ label: "Document Type", value: _formatDocType(this.selectedIdType) || this.selectedIdTypeName });
+        if (docRows.length === 0) {
+            const fallback = document.createElement("div");
+            fallback.style.cssText = `color:${this.theme.textSecondary};font-size:12px;`;
+            fallback.textContent = "Document scanned successfully.";
+            card.appendChild(fallback);
+        }
+        else {
+            docRows.forEach(({ label, value }) => {
+                if (!value)
+                    return;
+                const row = document.createElement("div");
+                row.style.cssText = "display:flex;justify-content:space-between;align-items:center;";
+                const lEl = document.createElement("span");
+                lEl.style.cssText = `color:${this.theme.textMuted};font-size:12px;font-weight:500;`;
+                lEl.textContent = label;
+                const vEl = document.createElement("span");
+                vEl.style.cssText = `color:${this.theme.text};font-size:13px;font-weight:600;max-width:60%;text-align:right;`;
+                vEl.textContent = value;
+                row.appendChild(lEl);
+                row.appendChild(vEl);
+                card.appendChild(row);
+            });
+        }
+        container.appendChild(card);
+        const yesBtn = this.createPrimaryButton("Yes, continue");
+        yesBtn.addEventListener("click", () => {
+            // B5: Reset retry counter on successful confirmation
+            this._confirmRetries = 0;
+            this.showStep("liveness");
+        });
+        container.appendChild(yesBtn);
+        const noBtn = this.createSecondaryButton("No, retake document");
+        noBtn.addEventListener("click", () => {
+            this._confirmRetries++;
+            this._ocrName = "";
+            this._ocrDocNumber = "";
+            this._ocrExpiry = "";
+            this._ocrFaceImageUrl = "";
+            this._ocrIsExpired = false;
+            this._ocrExpirySoon = false;
+            this.livenessEntryId = null;
+            this.documentBlob = null;
+            this.documentBackBlob = null;
+            this.showStep("document_capture");
+        });
+        container.appendChild(noBtn);
+    }
+    // ── W6+W7+W8: OCR Gate (document verification) ───────────────────
+    renderOcrGate(container) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0;text-align:center;";
         const spinnerWrap = document.createElement("div");
-        spinnerWrap.style.cssText = "position:relative;width:56px;height:56px;flex-shrink:0;";
+        spinnerWrap.style.cssText = "position:relative;width:52px;height:52px;flex-shrink:0;";
         const ring = document.createElement("div");
-        ring.id = "sc-proc-ring";
         ring.style.cssText = `position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.9s linear infinite;`;
-        const centerIcon = document.createElement("div");
-        centerIcon.style.cssText = "position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;";
-        centerIcon.textContent = "🔍";
+        const centre = document.createElement("div");
+        centre.style.cssText = "position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;";
+        centre.textContent = "📄";
         spinnerWrap.appendChild(ring);
-        spinnerWrap.appendChild(centerIcon);
+        spinnerWrap.appendChild(centre);
         container.appendChild(spinnerWrap);
-        const title = document.createElement("div");
-        title.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:700;text-align:center;`;
-        title.textContent = "Verifying your document";
-        container.appendChild(title);
-        // Live status line — updated by polling
-        const statusLine = document.createElement("div");
-        statusLine.id = "sc-proc-status";
-        statusLine.setAttribute("aria-live", "polite");
-        statusLine.setAttribute("aria-atomic", "true");
-        statusLine.style.cssText = `color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:260px;line-height:1.5;`;
-        statusLine.textContent = "Scanning document…";
-        container.appendChild(statusLine);
-        // Step checklist — reflects real pipeline stages
-        const stages = [
-            { id: "ocr", label: "Reading document", icon: "📄" },
-            { id: "expiry", label: "Checking expiry", icon: "📅" },
-            { id: "face", label: "Face match", icon: "🤳" },
-            { id: "result", label: "Finalising result", icon: "✓" },
-        ];
-        const grid = document.createElement("div");
-        grid.style.cssText = "width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;";
-        stages.forEach((s) => {
-            const el = document.createElement("div");
-            el.id = `sc-stage-${s.id}`;
-            el.style.cssText = `display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:${this.theme.cardBg};border:1px solid ${this.theme.border};transition:all 0.3s ease;`;
-            el.innerHTML = `
-        <div style="width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;background:${this.theme.shimmer};">${s.icon}</div>
-        <div style="flex:1;color:${this.theme.textSecondary};font-size:11px;font-weight:500;">${s.label}</div>
-        <div id="sc-stage-status-${s.id}" style="width:14px;height:14px;border-radius:50%;border:2px solid ${this.theme.border};flex-shrink:0;"></div>
-      `;
-            grid.appendChild(el);
-        });
-        container.appendChild(grid);
-        // Start polling immediately — update stages as result comes in
-        if (entryId) {
-            this._pollProcessingStages(entryId, statusLine, grid, stages);
+        const statusEl = document.createElement("div");
+        statusEl.setAttribute("aria-live", "polite");
+        statusEl.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:600;`;
+        statusEl.textContent = "Reading your document…";
+        container.appendChild(statusEl);
+        const subEl = document.createElement("div");
+        subEl.style.cssText = `color:${this.theme.textSecondary};font-size:12px;max-width:260px;line-height:1.5;`;
+        subEl.textContent = "This usually takes 5–15 seconds. Please wait.";
+        container.appendChild(subEl);
+        if (!this.livenessEntryId) {
+            this.showErrorStep("Document upload failed. Please try again.");
+            return;
         }
-    }
-    _pollProcessingStages(entryId, statusLine, _grid, stages) {
-        // Animate stages sequentially on a timer — OCR takes ~5–15s,
-        // face match another ~5–15s. We can't observe sub-steps from the
-        // public sdk-result endpoint, so we advance stages on elapsed time
-        // AND on the final status transition.
-        const stageTimings = [0, 4000, 10000, 18000]; // ms after poll start
-        const startTime = Date.now();
-        const setStageActive = (stageId) => {
-            const el = document.getElementById(`sc-stage-${stageId}`);
-            const statusEl = document.getElementById(`sc-stage-status-${stageId}`);
-            if (!el || !statusEl)
-                return;
-            el.style.borderColor = this.theme.primary;
-            el.style.background = `${this.theme.primary}10`;
-            statusEl.innerHTML = `<div style="position:absolute;inset:1px;border-radius:50%;border:2px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>`;
-            statusEl.style.position = "relative";
-        };
-        const setStageComplete = (stageId) => {
-            const el = document.getElementById(`sc-stage-${stageId}`);
-            const statusEl = document.getElementById(`sc-stage-status-${stageId}`);
-            if (!el || !statusEl)
-                return;
-            el.style.borderColor = this.theme.success || "#22c55e";
-            el.style.background = `${this.theme.success || "#22c55e"}10`;
-            statusEl.innerHTML = `<div style="position:absolute;inset:2px;border-radius:50%;background:${this.theme.success || "#22c55e"};display:flex;align-items:center;justify-content:center;color:#fff;font-size:8px;font-weight:bold;">✓</div>`;
-            statusEl.style.position = "relative";
-        };
-        // Advance stage indicators on timer
-        stages.forEach((s, i) => {
-            setTimeout(() => {
-                if (this.isDestroyed)
-                    return;
-                setStageActive(s.id);
-                if (i > 0)
-                    setStageComplete(stages[i - 1].id);
-                statusLine.textContent = s.id === "ocr"
-                    ? "Scanning document…"
-                    : s.id === "expiry"
-                        ? "Checking expiry date…"
-                        : s.id === "face"
-                            ? "Running face match…"
-                            : "Finalising result…";
-            }, stageTimings[i]);
-        });
-        // Poll for real result
-        const MAX_POLLS = 30; // 30 × 3s = 90s max
+        const entryId = this.livenessEntryId;
+        const MAX_POLLS = 10; // 10 × 2s = 20s timeout
         let polls = 0;
         const poll = async () => {
             if (this.isDestroyed)
@@ -1142,48 +1366,206 @@ export class SmartComplyFlow {
             polls++;
             try {
                 const result = await this.sdk.liveness.pollResult(entryId);
-                if (result.status === "passed" || result.status === "failed") {
-                    // Mark all remaining stages complete
-                    stages.forEach((s) => setStageComplete(s.id));
-                    statusLine.textContent = result.status === "passed"
-                        ? "Verification complete ✓"
-                        : "Verification finished";
-                    // Short delay so user sees the completed states, then show result
-                    setTimeout(() => {
-                        if (!this.isDestroyed) {
-                            this._livenessSubmitResult = result;
-                            this.showResult(result);
+                // W7: Expired document — stop, do not proceed to liveness
+                if (result.is_expired === true) {
+                    container.innerHTML = "";
+                    this._renderExpiredDocument(container);
+                    return;
+                }
+                // W8: OCR quality fail — offer retake
+                if (result.ocr_quality_failed === true) {
+                    container.innerHTML = "";
+                    this._renderOcrQualityFail(container, result.ocr_rejection_reason);
+                    return;
+                }
+                // OCR complete — store data and show confirmation screen
+                const ocrDone = result.ocr_status === "done" || result.ocr_status === "ocr_complete"
+                    || result.ocr_name || result.ocr_document_number || result.ocr_expiry_date;
+                if (ocrDone) {
+                    this._ocrName = result.ocr_name || "";
+                    this._ocrDocNumber = result.ocr_document_number || "";
+                    this._ocrExpiry = result.ocr_expiry_date || "";
+                    this._ocrFaceImageUrl = result.ocr_face_image_url || "";
+                    this._ocrIsExpired = result.is_expired === true;
+                    // B8: Normalise expiry date string before parsing — OCR may return
+                    // DD/MM/YYYY, DD-MM-YYYY, YYYY-MM-DD, or "12 May 2029" etc.
+                    // new Date() alone is locale-dependent on non-ISO strings.
+                    if (this._ocrExpiry) {
+                        const expDate = _parseOcrDate(this._ocrExpiry);
+                        if (expDate) {
+                            const sixMonths = new Date();
+                            sixMonths.setMonth(sixMonths.getMonth() + 6);
+                            this._ocrExpirySoon = expDate <= sixMonths && expDate > new Date();
                         }
-                    }, 800);
+                    }
+                    this.showStep("document_confirm");
                     return;
                 }
+                // Still pending — keep polling
+                if (polls < MAX_POLLS && !this.isDestroyed) {
+                    this._ocrPollTimer = setTimeout(poll, 2000);
+                }
+                else if (!this.isDestroyed) {
+                    // Timeout — proceed anyway with whatever we have
+                    statusEl.textContent = "Taking longer than usual…";
+                    subEl.textContent = "We'll continue — you can confirm your details on the next screen.";
+                    this._ocrPollTimer = setTimeout(() => {
+                        if (!this.isDestroyed)
+                            this.showStep("document_confirm");
+                    }, 2000);
+                }
             }
-            catch { /* network hiccup — keep polling */ }
-            if (polls < MAX_POLLS && !this.isDestroyed) {
-                this._pollStatusTimer = setTimeout(poll, 3000);
-            }
-            else if (!this.isDestroyed) {
-                // Timeout — transition to result screen with current status
-                stages.forEach((s) => setStageComplete(s.id));
-                statusLine.textContent = "Still processing — check back soon";
+            catch {
+                if (polls < MAX_POLLS && !this.isDestroyed) {
+                    this._ocrPollTimer = setTimeout(poll, 3000);
+                }
+                else if (!this.isDestroyed) {
+                    this.showErrorStep("We could not read your document. Please check your connection and try again.");
+                }
             }
         };
-        // First poll after 5s — give Celery task time to start
-        this._pollStatusTimer = setTimeout(poll, 5000);
+        // First poll after 3s — give OCR submission time to start
+        this._ocrPollTimer = setTimeout(poll, 3000);
+    }
+    _renderExpiredDocument(container) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
+        const icon = document.createElement("div");
+        icon.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
+        icon.textContent = "📅";
+        container.appendChild(icon);
+        const t = document.createElement("h2");
+        t.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        t.textContent = "Document Expired";
+        container.appendChild(t);
+        const d = document.createElement("p");
+        d.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin:0;max-width:280px;line-height:1.6;`;
+        d.textContent = "The document you submitted has expired. Please use a valid, current ID.";
+        container.appendChild(d);
+        const retryBtn = this.createPrimaryButton("Try a different document");
+        retryBtn.addEventListener("click", () => {
+            this.livenessEntryId = null;
+            this.documentBlob = null;
+            this.documentBackBlob = null;
+            this.showStep("document_capture");
+        });
+        container.appendChild(retryBtn);
+        const endBtn = this.createSecondaryButton("End session");
+        endBtn.addEventListener("click", () => { this.options.onError?.(new Error("Document expired")); this.close(); });
+        container.appendChild(endBtn);
+    }
+    _renderOcrQualityFail(container, reason) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
+        const icon = document.createElement("div");
+        icon.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
+        icon.textContent = "🔍";
+        container.appendChild(icon);
+        const t = document.createElement("h2");
+        t.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        t.textContent = "Document Photo Unclear";
+        container.appendChild(t);
+        const msg = reason === "image_too_blurry" ? "Your document photo is too blurry. Please retake it in good lighting with a steady hand."
+            : reason === "image_too_dark" ? "Your document photo is too dark. Please retake it in better lighting."
+                : reason === "image_too_bright" ? "Your document photo has too much glare. Please reduce reflections and retake."
+                    : reason === "document_not_detected" ? "We could not detect a document in the photo. Please ensure the full ID is visible."
+                        : "We could not read your document clearly. Please retake the photo in good lighting with no glare.";
+        const d = document.createElement("p");
+        d.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin:0;max-width:280px;line-height:1.6;`;
+        d.textContent = msg;
+        container.appendChild(d);
+        const retryBtn = this.createPrimaryButton("Retake photo");
+        retryBtn.addEventListener("click", () => {
+            this.livenessEntryId = null;
+            this.documentBlob = null;
+            this.documentBackBlob = null;
+            this.showStep("document_capture");
+        });
+        container.appendChild(retryBtn);
+    }
+    // ── W11: You're all done (end-user final screen) ─────────────────
+    renderDone(container) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:24px 0;";
+        container.setAttribute("role", "status");
+        // B7: Fire onComplete immediately when the done screen renders — the end
+        // user has completed their part regardless of whether they click Close.
+        // Firing here means the integrator always gets the event even if the user
+        // closes the modal via the ✕ button instead of the Close button.
+        this.options.onComplete?.({
+            entryId: this.livenessEntryId || 0,
+            sessionId: this.sdk.sessionToken,
+            status: "processing",
+            submittedAt: new Date().toISOString(),
+            verificationResult: this.verificationResult || undefined,
+        });
+        const iconWrap = document.createElement("div");
+        iconWrap.style.cssText = `width:80px;height:80px;border-radius:50%;background:${this.theme.successBg};border:3px solid ${this.theme.success};display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:${this.theme.success};animation:sc-pop 0.4s ease;`;
+        iconWrap.textContent = "✓";
+        container.appendChild(iconWrap);
+        const title = document.createElement("h2");
+        title.style.cssText = `color:${this.theme.text};font-size:22px;font-weight:700;margin:0;`;
+        title.textContent = "You're all done!";
+        container.appendChild(title);
+        const brandName = this.sdkConfig?.brand_name || "the service";
+        const desc = document.createElement("p");
+        desc.style.cssText = `color:${this.theme.textSecondary};font-size:14px;line-height:1.6;margin:0;max-width:300px;`;
+        desc.textContent = `Your verification is complete. ${brandName} will review and be in touch shortly.`;
+        container.appendChild(desc);
+        // Subtle info line
+        const info = document.createElement("div");
+        info.style.cssText = `color:${this.theme.textMuted};font-size:11px;display:flex;align-items:center;gap:4px;`;
+        info.textContent = "🔒  Your data is encrypted and secure";
+        container.appendChild(info);
+        const doneBtn = this.createPrimaryButton("Close");
+        doneBtn.addEventListener("click", () => {
+            // onComplete already fired on render — just close the modal
+            this.close();
+        });
+        container.appendChild(doneBtn);
+    }
+    // ── W14: Retry limit reached ─────────────────────────────────────
+    _renderRetryLimitReached(container) {
+        container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:24px 0;";
+        const icon = document.createElement("div");
+        icon.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
+        icon.textContent = "⚠️";
+        container.appendChild(icon);
+        const t = document.createElement("h2");
+        t.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        t.textContent = "Unable to Complete Verification";
+        container.appendChild(t);
+        const d = document.createElement("p");
+        d.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin:0;max-width:280px;line-height:1.6;`;
+        d.textContent = "We were unable to complete your verification at this time. Please contact support or try again later.";
+        container.appendChild(d);
+        const closeBtn = this.createPrimaryButton("Close");
+        closeBtn.addEventListener("click", () => { this.options.onError?.(new Error("Retry limit reached")); this.close(); });
+        container.appendChild(closeBtn);
+    }
+    // ── W13: Camera pre-warm ─────────────────────────────────────────
+    _prewarmCamera() {
+        if (this._prewarmedStream || this.isDestroyed)
+            return;
+        navigator.mediaDevices?.getUserMedia?.({ video: { facingMode: "user" } })
+            .then(stream => {
+            if (this.isDestroyed) {
+                stream.getTracks().forEach(t => t.stop());
+                return;
+            }
+            this._prewarmedStream = stream;
+        })
+            .catch(() => { });
     }
     /**
      * Process document capture result with front/back support
      */
     async processDocumentCaptureResult(result, captureContainer, container) {
-        // Store both front and back blobs
-        this.documentBlob = result.front;
-        this.documentBackBlob = result.back || null;
-        // Process the front image through the existing flow
-        await this.processDocumentBlob(result.front, captureContainer, container);
-        // Log back image capture
-        if (result.back) {
-            console.log("Back image captured, size:", result.back.size);
-        }
+        // B2+P2: Compress both images once here. Do NOT assign documentBlob twice
+        // (old code set it to the raw blob first, then overwrote with compressed).
+        // processDocumentBlob also ran _compressImage — that second pass is removed
+        // below so compression only happens once.
+        this.documentBlob = await _compressImage(result.front, 1600, 0.85);
+        this.documentBackBlob = result.back ? await _compressImage(result.back, 1600, 0.85) : null;
+        // Process the front image — pass the already-compressed blob
+        await this.processDocumentBlob(this.documentBlob, captureContainer, container);
     }
     /**
      * Process document blob - common method for both CameraView and DocumentCapture
@@ -1193,7 +1575,7 @@ export class SmartComplyFlow {
         let retryCount = 0;
         const attemptProcessing = async () => {
             try {
-                // Validate blob
+                // Validate blob — compression already done in processDocumentCaptureResult (P2)
                 if (!blob || blob.size === 0) {
                     throw new Error("Failed to capture document. Please try again.");
                 }
@@ -1206,7 +1588,7 @@ export class SmartComplyFlow {
       <div style="display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;">
         <div style="position:relative;width:52px;height:52px;">
           <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
-          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔍</div>
+          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔍</div>
         </div>
         <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Scanning document...</div>
         <div style="color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:200px;line-height:1.5;">Running OCR and verifying your identity</div>
@@ -1214,7 +1596,7 @@ export class SmartComplyFlow {
                 // Create liveness entry with document.
                 // Use the first collected field value as identifier when available
                 // (document flow has no data-verification step, so collectedFields is
-                // empty — fall back to the selected ID type code so the webhook
+                // empty — fall back to the selected ID type code so the webhook
                 // subject.identifier is at least human-meaningful, not a raw timestamp).
                 const identifier = Object.values(this.collectedFields)[0]
                     || this.idNumber
@@ -1263,10 +1645,9 @@ export class SmartComplyFlow {
                     }
                 }
                 this.livenessEntryId = createResult.id;
-                // Document is already uploaded as part of liveness.create() above.
-                // Proceed straight to liveness — the backend runs OCR + face comparison
-                // after the liveness video is submitted, so there is no need to wait here.
-                this.showStep("liveness");
+                // W6: Route to OCR gate — poll until OCR result is ready, validate
+                // expiry/quality, then show document_confirm before liveness starts.
+                this.showStep("ocr_gate");
             }
             catch (err) {
                 console.error("Document processing failed:", err);
@@ -1279,7 +1660,7 @@ export class SmartComplyFlow {
               <div style="display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;">
                 <div style="position:relative;width:52px;height:52px;">
                   <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
-                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔄</div>
+                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔄</div>
                 </div>
                 <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Retrying...</div>
                 <div style="color:${this.theme.textSecondary};font-size:12px;max-width:240px;line-height:1.5;">Attempt ${retryCount} of ${maxRetries}</div>
@@ -1298,7 +1679,7 @@ export class SmartComplyFlow {
         await attemptProcessing();
     }
     handleDocumentProcessingError(error, captureContainer) {
-        // Map technical errors to user-friendly messages — never pass raw error strings
+        // Map technical errors to user-friendly messages — never pass raw error strings
         let userMessage = "We could not verify your document. Please try again.";
         let canRetry = true;
         const raw = (error?.message || "").toLowerCase();
@@ -1325,13 +1706,13 @@ export class SmartComplyFlow {
             userMessage = "The document does not match the selected ID type. Please choose the correct ID type.";
         }
         if (captureContainer) {
-            // Build with DOM — never interpolate user-derived content into innerHTML
+            // Build with DOM — never interpolate user-derived content into innerHTML
             const wrap = document.createElement("div");
             wrap.style.cssText = "display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;";
             wrap.setAttribute("role", "alert");
             const icon = document.createElement("div");
             icon.style.cssText = `width:56px;height:56px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:26px;`;
-            icon.textContent = "🔍";
+            icon.textContent = "🔍";
             wrap.appendChild(icon);
             const titleEl = document.createElement("div");
             titleEl.style.cssText = `color:${this.theme.text};font-size:14px;font-weight:700;`;
@@ -1356,9 +1737,14 @@ export class SmartComplyFlow {
             this.showErrorStep(userMessage);
         }
     }
-    // ── Liveness ────────────────────────────────────────────────────
+    // ── Liveness ────────────────────────────────────────────────────
     renderLiveness(container) {
         container.style.cssText += "display:flex;flex-direction:column;gap:14px;";
+        // W13: Check retry limit before starting another liveness attempt
+        if (this._livenessFailures >= SmartComplyFlow.MAX_RETRIES) {
+            this._renderRetryLimitReached(container);
+            return;
+        }
         const title = this.createStepTitle("Face verification");
         container.appendChild(title);
         const desc = document.createElement("div");
@@ -1369,18 +1755,21 @@ export class SmartComplyFlow {
         const livenessContainer = document.createElement("div");
         livenessContainer.style.cssText = "margin:8px 0;width:100%;";
         container.appendChild(livenessContainer);
-        const identifier = this.idNumber
-            || Object.values(this.collectedFields)[0]
-            || this.selectedIdType
-            || `DOC-${Date.now()}`;
+        // W9: For data verification, identity is already held by the backend via
+        // identity_check_id — the real ID number/type must not be re-sent. The
+        // backend's LivenessEntrySerializer still requires non-blank identifier /
+        // identifier_type fields, so a non-identifying stub is sent to satisfy that
+        // constraint without leaking the user's actual ID data a second time.
+        // "SES-" + Date.now() (13 digits) = 17 chars, safely under the backend's
+        // 20-char max on identifier.
+        const isDataVerification = !!this.identityCheckId;
+        const identifier = isDataVerification
+            ? `SES-${Date.now()}`
+            : (this.idNumber || Object.values(this.collectedFields)[0] || this.selectedIdType || `DOC-${Date.now()}`);
+        const identifierType = isDataVerification ? "session" : this.selectedIdType;
         const COUNTRY_CODES = {
-            nigeria: "NG",
-            ghana: "GH",
-            kenya: "KE",
-            south_africa: "ZA",
-            united_states: "US",
-            united_kingdom: "GB",
-            global: "US",
+            nigeria: "NG", ghana: "GH", kenya: "KE",
+            south_africa: "ZA", united_states: "US", united_kingdom: "GB", global: "US",
         };
         const country = COUNTRY_CODES[this.selectedCountry] || this.selectedCountry.toUpperCase().slice(0, 2);
         // Start liveness check (this handles camera, detection, recording, submission)
@@ -1388,277 +1777,40 @@ export class SmartComplyFlow {
         this.sdk.liveness
             .startCheck(livenessContainer, {
             identifier,
-            identifier_type: this.selectedIdType,
+            identifier_type: identifierType,
             country,
             document: this.documentBlob || undefined,
             document_back: this.documentBackBlob || undefined,
             identity_check: this.identityCheckId || undefined,
-            // Tell the module which flow we're in so it can skip video for data verification
             verification_type: this.identityCheckId
                 ? "data_verification"
                 : this.documentBlob
                     ? "document_verification"
                     : "liveness_only",
+            // B4: pass pre-warmed stream so camera.open() is skipped
+            prewarmedStream: this._prewarmedStream || undefined,
         }, ["BLINK", "TURN_HEAD", "OPEN_MOUTH"], this.livenessEntryId || undefined)
             .then((result) => {
-            // For document/data verification the backend processes async.
-            // Route through the processing step so the user sees real pipeline
-            // progress instead of jumping straight to result.
-            const isAsync = !!(this.documentBlob || this.identityCheckId);
-            if (isAsync && result.id) {
-                this.livenessEntryId = result.id;
-                this.showStep("processing");
+            // W11: After submit, end user is done — show "You're all done" screen.
+            // Backend processing continues in background; client receives webhook.
+            // Track liveness failures for retry limit (W14).
+            if (result.status === "failed") {
+                this._livenessFailures++;
             }
-            else {
-                this.showResult(result);
+            if (result.id) {
+                this.livenessEntryId = result.id;
             }
+            this.showStep("done");
         })
             .catch((err) => {
+            this._livenessFailures++;
             this.showErrorStep(err.message || "Liveness verification failed. Please try again.");
         });
     }
-    // ── Result ──────────────────────────────────────────────────────
-    showResult(submitResult) {
-        this.currentStep = "result";
-        this.updateProgress();
-        if (!this.contentArea)
-            return;
-        this.contentArea.innerHTML = "";
-        const wrapper = document.createElement("div");
-        wrapper.setAttribute("role", "region");
-        wrapper.setAttribute("aria-label", "Verification result");
-        wrapper.style.cssText = `
-      display:flex;flex-direction:column;align-items:center;
-      text-align:center;gap:16px;padding:20px 0;
-      opacity:0;transform:scale(0.95);transition:all 0.4s ease;
-    `;
-        // ── Icon — spinner until status resolves ────────────────────────
-        const iconWrap = document.createElement("div");
-        iconWrap.style.cssText = `
-      width:80px;height:80px;border-radius:50%;
-      display:flex;align-items:center;justify-content:center;
-      font-size:36px;
-      background:${this.theme.cardBg};
-      border:3px solid ${this.theme.border};
-      transition:all 0.4s ease;
-    `;
-        iconWrap.innerHTML = `<div style="width:32px;height:32px;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.9s linear infinite;"></div>`;
-        wrapper.appendChild(iconWrap);
-        // ── Title and description — updated by polling ───────────────────
-        const title = document.createElement("h2");
-        title.setAttribute("aria-live", "polite");
-        title.style.cssText = `color:${this.theme.text};font-size:20px;font-weight:700;margin:0;`;
-        title.textContent = "Checking your identity…";
-        wrapper.appendChild(title);
-        const desc = document.createElement("p");
-        desc.setAttribute("aria-live", "polite");
-        desc.style.cssText = `color:${this.theme.textSecondary};font-size:14px;line-height:1.6;margin:0;max-width:300px;`;
-        desc.textContent = "This usually takes a few seconds. Please wait.";
-        wrapper.appendChild(desc);
-        // ── Result card — initially shows status only ────────────────────
-        // Populated with name/doc type when verification completes.
-        const resultCard = document.createElement("div");
-        resultCard.style.cssText = `
-      width:100%;padding:16px;border-radius:12px;
-      background:${this.theme.cardBg};border:1px solid ${this.theme.border};
-      text-align:left;display:flex;flex-direction:column;gap:10px;
-      transition:border-color 0.3s ease;
-    `;
-        // Status row — always shown
-        const statusBadge = document.createElement("span");
-        statusBadge.setAttribute("role", "status");
-        statusBadge.setAttribute("aria-live", "polite");
-        statusBadge.setAttribute("aria-atomic", "true");
-        statusBadge.style.cssText = `font-size:12px;font-weight:600;color:${this.theme.warning};`;
-        statusBadge.textContent = "Processing…";
-        const statusRow = document.createElement("div");
-        statusRow.style.cssText = "display:flex;justify-content:space-between;align-items:center;";
-        statusRow.innerHTML = `<span style="color:${this.theme.textMuted};font-size:12px;font-weight:500;">Status</span>`;
-        statusRow.appendChild(statusBadge);
-        resultCard.appendChild(statusRow);
-        // Verified details — shown only when passed.
-        // nameRow: shows full name from IVS result or OCR
-        // docTypeRow: shows document type verified
-        const nameRow = document.createElement("div");
-        nameRow.style.cssText = "display:none;justify-content:space-between;align-items:center;";
-        nameRow.innerHTML = `<span style="color:${this.theme.textMuted};font-size:12px;font-weight:500;">Name</span><span id="sc-result-name" style="color:${this.theme.text};font-size:12px;font-weight:600;text-align:right;max-width:60%;"></span>`;
-        resultCard.appendChild(nameRow);
-        const docTypeRow = document.createElement("div");
-        docTypeRow.style.cssText = "display:none;justify-content:space-between;align-items:center;";
-        docTypeRow.innerHTML = `<span style="color:${this.theme.textMuted};font-size:12px;font-weight:500;">ID Type</span><span id="sc-result-doctype" style="color:${this.theme.text};font-size:12px;font-weight:600;"></span>`;
-        resultCard.appendChild(docTypeRow);
-        wrapper.appendChild(resultCard);
-        // ── Failure reason — shown only when failed ──────────────────────
-        const failureMsg = document.createElement("div");
-        failureMsg.setAttribute("role", "alert");
-        failureMsg.style.cssText = `
-      display:none;width:100%;padding:12px 14px;border-radius:10px;
-      background:${this.theme.errorBg};border:1px solid ${this.theme.error};
-      color:${this.theme.error};font-size:13px;text-align:left;line-height:1.6;
-    `;
-        wrapper.appendChild(failureMsg);
-        // ── Action buttons ───────────────────────────────────────────────
-        const btnRow = document.createElement("div");
-        btnRow.style.cssText = "display:flex;flex-direction:column;gap:8px;width:100%;";
-        const doneBtn = this.createPrimaryButton("Done");
-        doneBtn.setAttribute("aria-label", "Close verification and continue");
-        let finalStatus = submitResult.status;
-        doneBtn.addEventListener("click", () => {
-            if (this._pollStatusTimer) {
-                clearTimeout(this._pollStatusTimer);
-                this._pollStatusTimer = null;
-            }
-            this.options.onComplete?.({
-                entryId: submitResult.id,
-                sessionId: this.sdk.sessionToken,
-                status: finalStatus,
-                submittedAt: submitResult.submitted_at,
-                verificationResult: this.verificationResult || undefined,
-            });
-            this.close();
-        });
-        btnRow.appendChild(doneBtn);
-        // "Try again" button — shown only on failure, hidden initially
-        const retryBtn = this.createSecondaryButton("Try Again");
-        retryBtn.setAttribute("aria-label", "Start verification again");
-        retryBtn.style.display = "none";
-        retryBtn.addEventListener("click", () => {
-            if (this._pollStatusTimer) {
-                clearTimeout(this._pollStatusTimer);
-                this._pollStatusTimer = null;
-            }
-            this.initialize();
-        });
-        btnRow.appendChild(retryBtn);
-        wrapper.appendChild(btnRow);
-        this.contentArea.appendChild(wrapper);
-        requestAnimationFrame(() => {
-            wrapper.style.opacity = "1";
-            wrapper.style.transform = "scale(1)";
-        });
-        // ── Start polling ────────────────────────────────────────────────
-        this._startStatusPolling(submitResult.id, iconWrap, statusBadge, title, desc, resultCard, nameRow, docTypeRow, failureMsg, retryBtn, (resolved) => { finalStatus = resolved; });
-    }
-    _startStatusPolling(entryId, iconWrap, statusBadge, title, desc, resultCard, nameRow, docTypeRow, failureMsg, retryBtn, onResolved) {
-        const MAX_POLLS = 25; // 25 × 3s = 75s + 4s initial ≈ 79s max
-        let polls = 0;
-        // Hard 30s UI timer — stop spinner and tell user to wait even if backend is slower
-        let uiTimeoutId = setTimeout(() => {
-            if (!this.isDestroyed)
-                applyTimeout();
-        }, 30000);
-        const clearUiTimeout = () => {
-            if (uiTimeoutId) {
-                clearTimeout(uiTimeoutId);
-                uiTimeoutId = null;
-            }
-        };
-        const applyTimeout = () => {
-            if (this._pollStatusTimer) {
-                clearTimeout(this._pollStatusTimer);
-                this._pollStatusTimer = null;
-            }
-            iconWrap.innerHTML = "⏳";
-            iconWrap.style.border = `3px solid ${this.theme.warning}`;
-            statusBadge.style.color = this.theme.textMuted;
-            statusBadge.textContent = "Still processing…";
-            title.textContent = "Still verifying";
-            desc.textContent = "This is taking a little longer than usual. You can safely close this — your result will be available in your account.";
-        };
-        const applyPassed = (result) => {
-            clearUiTimeout();
-            iconWrap.innerHTML = "✓";
-            iconWrap.style.cssText += `background:${this.theme.successBg};border:3px solid ${this.theme.success};color:${this.theme.success};font-size:36px;font-weight:700;`;
-            resultCard.style.borderColor = this.theme.success;
-            statusBadge.style.color = this.theme.success;
-            statusBadge.textContent = "Verified ✓";
-            title.textContent = "Identity Verified";
-            desc.textContent = "Your identity has been confirmed successfully.";
-            // ── Show name if available ───────────────────────────────────────
-            // Pull from IVS customer_profile (data verification) or
-            // document OCR result (document verification) — whichever has data.
-            const profile = result?.customer_profile || result?.data || {};
-            const docResult = result?.document || {};
-            const ocr = docResult?.ocr_result || {};
-            const firstName = (profile?.first_name || ocr?.first_name || docResult?.first_name || "").trim();
-            const lastName = (profile?.last_name || profile?.surname ||
-                ocr?.last_name || ocr?.surname || docResult?.last_name || "").trim();
-            const fullName = [firstName, lastName].filter(Boolean).join(" ");
-            const nameEl = document.getElementById("sc-result-name");
-            if (fullName && nameEl) {
-                nameEl.textContent = fullName;
-                nameRow.style.display = "flex";
-            }
-            // ── Show ID type ─────────────────────────────────────────────────
-            const rawDocType = (docResult?.document_type ||
-                this.selectedIdType ||
-                result?.identifier_type ||
-                "");
-            const docTypeLabel = _formatDocType(rawDocType);
-            const docTypeEl = document.getElementById("sc-result-doctype");
-            if (docTypeLabel && docTypeEl) {
-                docTypeEl.textContent = docTypeLabel;
-                docTypeRow.style.display = "flex";
-            }
-        };
-        const applyFailed = (reason) => {
-            clearUiTimeout();
-            iconWrap.innerHTML = "✕";
-            iconWrap.style.cssText += `background:${this.theme.errorBg};border:3px solid ${this.theme.error};color:${this.theme.error};font-size:32px;`;
-            resultCard.style.borderColor = this.theme.error;
-            statusBadge.style.color = this.theme.error;
-            statusBadge.textContent = "Not verified";
-            title.textContent = "Verification Unsuccessful";
-            desc.textContent = "We were unable to confirm your identity this time.";
-            // Show a clean, actionable reason — never raw technical strings
-            const safeReason = _sanitizeUserMessage(reason);
-            if (safeReason) {
-                failureMsg.textContent = safeReason;
-                failureMsg.style.display = "block";
-            }
-            // Show retry button on failure
-            retryBtn.style.display = "block";
-        };
-        const poll = async () => {
-            if (this.isDestroyed)
-                return;
-            polls++;
-            try {
-                const result = await this.sdk.liveness.pollResult(entryId);
-                if (result.status === "passed") {
-                    onResolved("passed");
-                    applyPassed(result);
-                    return;
-                }
-                if (result.status === "failed") {
-                    onResolved("failed");
-                    applyFailed(result.failure_reason || null);
-                    return;
-                }
-                // Still processing — schedule next poll
-                if (polls < MAX_POLLS && !this.isDestroyed) {
-                    this._pollStatusTimer = setTimeout(poll, 3000);
-                }
-                else if (!this.isDestroyed) {
-                    applyTimeout();
-                }
-            }
-            catch {
-                if (polls < MAX_POLLS && !this.isDestroyed) {
-                    this._pollStatusTimer = setTimeout(poll, 5000);
-                }
-                else if (!this.isDestroyed) {
-                    applyTimeout();
-                }
-            }
-        };
-        // First poll after 4s — gives Celery task time to start
-        this._pollStatusTimer = setTimeout(poll, 4000);
-    }
     renderResult(_container) {
-        // Handled by showResult() directly
+        // C2: Dead code — flow routes to 'done' step, not 'result'. Kept as stub.
     }
-    // ── Error ───────────────────────────────────────────────────────
+    // ── Error ───────────────────────────────────────────────────────
     showErrorStep(message) {
         this.currentStep = "error";
         if (!this.contentArea)
@@ -1677,13 +1829,13 @@ export class SmartComplyFlow {
         const isDocQuality = /blurry|blur|quality|glare|dark|bright|lighting/i.test(message);
         const isExpiredDoc = /document.*expired|expired.*document/i.test(message);
         const isFaceMatch = /face.*match|selfie.*match|does not match/i.test(message);
-        const errorIcon = isCameraErr ? "📷"
-            : isNetworkErr ? "📡"
-                : isAuthErr ? "⏱"
-                    : isDocQuality ? "🔍"
-                        : isExpiredDoc ? "📅"
-                            : isFaceMatch ? "🤳"
-                                : "✕";
+        const errorIcon = isCameraErr ? "📷"
+            : isNetworkErr ? "📡"
+                : isAuthErr ? "⏱"
+                    : isDocQuality ? "🔍"
+                        : isExpiredDoc ? "📅"
+                            : isFaceMatch ? "🤳"
+                                : "✕";
         const errorTitle = isCameraErr ? "Camera Access Required"
             : isNetworkErr ? "Connection Problem"
                 : isAuthErr ? "Session Expired"
@@ -1691,7 +1843,7 @@ export class SmartComplyFlow {
                         : isExpiredDoc ? "Document Expired"
                             : isFaceMatch ? "Face Match Failed"
                                 : "Verification Unsuccessful";
-        // Map to user-facing guidance — never show raw internal message
+        // Map to user-facing guidance — never show raw internal message
         const userMessage = isCameraErr
             ? "Please allow camera access in your browser settings and try again."
             : isNetworkErr
@@ -1738,9 +1890,9 @@ export class SmartComplyFlow {
         wrapper.appendChild(closeBtn);
         this.contentArea.appendChild(wrapper);
     }
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     // UI Helpers
-    // ─────────────────────────────────────────────────────────────────
+    // ─────────────────────────────────────────────────────────────────
     createHeader() {
         const header = document.createElement("div");
         header.setAttribute("role", "banner");
@@ -1783,7 +1935,22 @@ export class SmartComplyFlow {
         this.brandLabel.textContent = this.sdkConfig?.brand_name || "SmartComply";
         leftArea.appendChild(this.brandLabel);
         header.appendChild(leftArea);
-        // Step indicator
+        // Step indicator: stage dots + label
+        const stepIndicator = document.createElement("div");
+        stepIndicator.style.cssText = `
+      display:flex;align-items:center;gap:8px;flex-shrink:0;
+    `;
+        this.stageDots = document.createElement("div");
+        this.stageDots.style.cssText = `display:flex;align-items:center;gap:4px;`;
+        for (let i = 0; i < 2; i++) {
+            const dot = document.createElement("span");
+            dot.style.cssText = `
+        width:6px;height:6px;border-radius:50%;
+        background:${this.theme.border};transition:background 0.2s ease;
+      `;
+            this.stageDots.appendChild(dot);
+        }
+        stepIndicator.appendChild(this.stageDots);
         this.stepLabel = document.createElement("div");
         this.stepLabel.setAttribute("aria-live", "polite");
         this.stepLabel.setAttribute("aria-atomic", "true");
@@ -1791,10 +1958,11 @@ export class SmartComplyFlow {
       font-size:12px;color:${this.theme.textMuted};
       font-variant-numeric:tabular-nums;flex-shrink:0;
     `;
-        header.appendChild(this.stepLabel);
+        stepIndicator.appendChild(this.stepLabel);
+        header.appendChild(stepIndicator);
         // Close button
         const closeBtn = document.createElement("button");
-        closeBtn.innerHTML = "✕";
+        closeBtn.innerHTML = "✕";
         closeBtn.setAttribute("aria-label", "Close identity verification");
         closeBtn.style.cssText = `
       width:32px;height:32px;border-radius:8px;flex-shrink:0;
@@ -1875,7 +2043,7 @@ export class SmartComplyFlow {
         }
         const arrow = document.createElement("span");
         arrow.style.cssText = `color:${this.theme.textMuted};font-size:18px;flex-shrink:0;`;
-        arrow.textContent = "→";
+        arrow.textContent = "→";
         card.appendChild(textWrap);
         card.appendChild(arrow);
         return card;
@@ -1920,7 +2088,7 @@ export class SmartComplyFlow {
         return btn;
     }
     isDocumentFlow() {
-        // 1. Check verification_type — handle both string and array from backend
+        // 1. Check verification_type — handle both string and array from backend
         const vType = this.sdkConfig?.verification_type;
         if (vType) {
             const types = Array.isArray(vType) ? vType : [vType];
@@ -1929,7 +2097,7 @@ export class SmartComplyFlow {
             if (types.includes("data_verification"))
                 return false;
         }
-        // 2. Fallback: inspect channel fields — any upload field = document flow
+        // 2. Fallback: inspect channel fields — any upload field = document flow
         const channels = this.sdkConfig?.channels || {};
         const allFields = Object.values(channels)
             .flat()
@@ -1940,38 +2108,60 @@ export class SmartComplyFlow {
         const isDocFlow = this.isDocumentFlow();
         const countries = Object.keys(this.sdkConfig?.channels || {});
         const singleCountry = countries.length <= 1;
-        // User-action steps only (what the user actually does — no loading/welcome/result)
-        const actionSteps = ["country", "id_type", isDocFlow ? "document_capture" : "id_input", "liveness"].filter((s) => !(s === "country" && singleCountry));
-        const totalSteps = actionSteps.length;
-        const actionIndex = actionSteps.indexOf(this.currentStep);
-        const pct = this.currentStep === "result" ? 100
+        // Two-stage action steps — Stage 1: validate identity, Stage 2: liveness
+        const stage1Steps = isDocFlow
+            ? ["country", "id_type", "document_capture", "ocr_gate", "document_confirm"].filter(s => !(s === "country" && singleCountry))
+            : ["country", "id_type", "id_input", "confirm_identity"].filter(s => !(s === "country" && singleCountry));
+        const stage2Steps = ["liveness"];
+        const allActionSteps = [...stage1Steps, ...stage2Steps];
+        const totalSteps = allActionSteps.length;
+        const actionIndex = allActionSteps.indexOf(this.currentStep);
+        const pct = this.currentStep === "done" || this.currentStep === "result" ? 100
             : actionIndex >= 0 ? ((actionIndex + 1) / totalSteps) * 100
                 : 0;
         if (this.progressBar) {
             this.progressBar.style.width = `${pct}%`;
         }
+        // Stage label: "Stage 1 of 2: Verify Identity" / "Stage 2 of 2: Face Check"
         if (this.stepLabel) {
             if (this.currentStep === "loading" || this.currentStep === "welcome") {
                 this.stepLabel.textContent = "";
             }
-            else if (this.currentStep === "result") {
-                this.stepLabel.textContent = "Complete ✓";
+            else if (this.currentStep === "done" || this.currentStep === "result") {
+                this.stepLabel.textContent = "Complete ✓";
             }
-            else if (actionIndex >= 0) {
-                this.stepLabel.textContent = `Step ${actionIndex + 1} of ${totalSteps}`;
+            else if (stage2Steps.includes(this.currentStep)) {
+                this.stepLabel.textContent = "Stage 2 of 2: Face Check";
+            }
+            else if (stage1Steps.includes(this.currentStep)) {
+                this.stepLabel.textContent = isDocFlow ? "Stage 1 of 2: Scan Document" : "Stage 1 of 2: Verify Identity";
             }
             else {
                 this.stepLabel.textContent = "";
             }
         }
-        // Back button — show in header for navigable steps, hidden elsewhere
+        // W3: Stage dots — dot 1 lights once Stage 1 is reached, dot 2 once Stage 2 is reached
+        if (this.stageDots) {
+            const dots = Array.from(this.stageDots.children);
+            const inStage1 = stage1Steps.includes(this.currentStep);
+            const inStage2 = stage2Steps.includes(this.currentStep);
+            const isComplete = this.currentStep === "done" || this.currentStep === "result";
+            const stage1Active = inStage1 || inStage2 || isComplete;
+            const stage2Active = inStage2 || isComplete;
+            if (dots[0])
+                dots[0].style.background = stage1Active ? this.theme.primary : this.theme.border;
+            if (dots[1])
+                dots[1].style.background = stage2Active ? this.theme.primary : this.theme.border;
+        }
+        // Back button — show for navigable steps only
         if (this.headerBackBtn) {
-            const countries = Object.keys(this.sdkConfig?.channels || {});
             const backTargets = {
                 id_type: () => this.showStep(countries.length > 1 ? "country" : "welcome"),
                 country: () => this.showStep("welcome"),
                 id_input: () => this.showStep("id_type"),
+                confirm_identity: () => this.showStep("id_input"),
                 document_capture: () => { this.docCapture?.destroy(); this.showStep("id_type"); },
+                document_confirm: () => { this.docCapture?.destroy(); this.showStep("document_capture"); },
             };
             const backAction = backTargets[this.currentStep];
             if (backAction) {
@@ -2041,4 +2231,5 @@ export class SmartComplyFlow {
         document.head.appendChild(style);
     }
 }
+SmartComplyFlow.MAX_RETRIES = 3;
 //# sourceMappingURL=SmartComplyFlow.js.map