@usero/sdk 1.1.11 → 1.1.12

package/dist/plugins/user-test.js

@@ -1,7 +1,12 @@
 // src/types.ts
 var DEFAULT_API_URL = "https://usero.io";
 
-// src/plugins/user-test.ts
+// src/identity.ts
+function isValidSdkSessionId(id) {
+  return /^[a-z0-9-]{8,}$/i.test(id);
+}
+
+// src/plugins/user-test/shared.ts
 var DEFAULT_OPTIONS = {
   queryParam: "usero_test",
   // 10s (not 30) so at most ~10s of audio is at risk if the tab is torn
@@ -16,8 +21,96 @@ var DEFAULT_OPTIONS = {
 };
 var TESTER_NAME_STORAGE_KEY = "usero:user-test:tester-name";
 var TASKS_PANEL_OPEN_STORAGE_KEY = "usero:user-test:tasks-panel-open";
+var ACTIVE_SESSION_STORAGE_KEY = "usero:user-test:active-session";
+var ACTIVE_SESSION_MAX_AGE_MS = 2 * 60 * 60 * 1e3;
+var RESUME_MAX_IDLE_MS = 30 * 60 * 1e3;
 var IDB_NAME = "usero-user-test";
 var IDB_STORE = "pending-chunks";
+var SILENCE_RMS_DB_THRESHOLD = -60;
+var SILENCE_FLOOR_DB = -100;
+var SILENCE_SUSTAINED_MS = 1800;
+var SILENCE_POLL_MS = 250;
+var MIC_ICON_SVG = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" width="13" height="13"><path d="M8 1.5a2 2 0 0 0-2 2v4a2 2 0 1 0 4 0v-4a2 2 0 0 0-2-2Z" fill="currentColor"/><path d="M4 7.5a4 4 0 0 0 8 0M8 11.5v3M5.5 14.5h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>`;
+var MIC_MUTED_ICON_SVG = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" width="13" height="13"><path d="M8 1.5a2 2 0 0 0-2 2v3.2L10 11V3.5a2 2 0 0 0-2-2Z" fill="currentColor"/><path d="M4 7.5a4 4 0 0 0 6.5 3.12M12 7.5a4 4 0 0 1-.3 1.5M8 11.5v3M5.5 14.5h5M2 2l12 12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>`;
+var NOTE_ICON_SVG = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M3 3.5A1.5 1.5 0 0 1 4.5 2h7A1.5 1.5 0 0 1 13 3.5V10a1.5 1.5 0 0 1-1.5 1.5H7L4 14v-2.5h-.5A1.5 1.5 0 0 1 2 10V3.5A1.5 1.5 0 0 1 3.5 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+var TICK_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12.5 10 17.5 19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+var TICK_SM_SVG = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8.5 6.5 11.5 12.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+var CLOCK_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8.4" stroke="currentColor" stroke-width="2"/><path d="M12 7.5V12l3 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+var SPARK_ICON_SVG = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 1.5 9.5 6.5 14.5 8 9.5 9.5 8 14.5 6.5 9.5 1.5 8 6.5 6.5Z" fill="currentColor"/></svg>`;
+var FLAG_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 21V4M6 4.5h9.5l-1.6 3.2 1.6 3.2H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+
+// src/plugins/user-test/session.ts
+function parseActiveSession(raw) {
+  if (typeof raw !== "object" || raw === null) return null;
+  const s = raw;
+  if (typeof s.slug !== "string" || !s.slug) return null;
+  if (typeof s.sessionId !== "string" || !s.sessionId) return null;
+  if (typeof s.nextChunkIndex !== "number" || !Number.isInteger(s.nextChunkIndex) || s.nextChunkIndex < 0) return null;
+  if (typeof s.startedAt !== "number" || !Number.isFinite(s.startedAt)) return null;
+  const status = s.status === "paused" ? "paused" : "active";
+  const result = {
+    slug: s.slug,
+    sessionId: s.sessionId,
+    nextChunkIndex: s.nextChunkIndex,
+    startedAt: s.startedAt,
+    status
+  };
+  if (typeof s.sdkSessionId === "string" && isValidSdkSessionId(s.sdkSessionId)) {
+    result.sdkSessionId = s.sdkSessionId;
+  }
+  if (typeof s.pausedAt === "number" && Number.isFinite(s.pausedAt)) {
+    result.pausedAt = s.pausedAt;
+  }
+  return result;
+}
+function readActiveSession() {
+  try {
+    const raw = window.localStorage?.getItem(ACTIVE_SESSION_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = parseActiveSession(JSON.parse(raw));
+    if (!parsed) return null;
+    if (Date.now() - parsed.startedAt > ACTIVE_SESSION_MAX_AGE_MS) {
+      clearActiveSession();
+      return null;
+    }
+    if (parsed.status === "paused" && typeof parsed.pausedAt === "number") {
+      if (Date.now() - parsed.pausedAt > RESUME_MAX_IDLE_MS) {
+        clearActiveSession();
+        return null;
+      }
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function writeActiveSession(state) {
+  try {
+    window.localStorage?.setItem(ACTIVE_SESSION_STORAGE_KEY, JSON.stringify(state));
+  } catch {
+  }
+}
+function clearActiveSession() {
+  try {
+    window.localStorage?.removeItem(ACTIVE_SESSION_STORAGE_KEY);
+  } catch {
+  }
+}
+function persistActiveSession(store, status) {
+  if (!store.sessionId) return;
+  const state = {
+    slug: store.slug,
+    sessionId: store.sessionId,
+    nextChunkIndex: store.chunkIndex,
+    startedAt: store.startedAt,
+    status
+  };
+  if (store.sdkSessionId) state.sdkSessionId = store.sdkSessionId;
+  if (status === "paused") {
+    state.pausedAt = Date.now();
+  }
+  writeActiveSession(state);
+}
 function readTesterName(override) {
   if (override) return override;
   try {
@@ -53,118 +146,153 @@ function getTestSlug(queryParam) {
     return null;
   }
 }
-function isMediaRecorderSupported() {
-  return typeof window !== "undefined" && typeof window.MediaRecorder !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia;
+function parseTasks(raw) {
+  if (!Array.isArray(raw)) return [];
+  const out = raw.flatMap((item) => {
+    const t = item;
+    if (!t || typeof t.id !== "string" || typeof t.prompt !== "string" || typeof t.sortOrder !== "number") return [];
+    return [{ id: t.id, prompt: t.prompt, sortOrder: t.sortOrder }];
+  });
+  out.sort((a, b) => a.sortOrder - b.sortOrder);
+  return out;
 }
-function pickMimeType() {
-  const candidates = ["audio/webm;codecs=opus", "audio/webm", "audio/ogg;codecs=opus", "audio/mp4"];
-  for (const candidate of candidates) {
-    if (typeof MediaRecorder !== "undefined" && MediaRecorder.isTypeSupported?.(candidate)) {
-      return candidate;
-    }
+async function createSession(apiUrl, slug, testerName) {
+  try {
+    const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ slug, ...testerName ? { testerName } : {} })
+    });
+    if (!res.ok) return null;
+    const json = await res.json();
+    if (typeof json.sessionId !== "string" || typeof json.clientId !== "string") return null;
+    return { sessionId: json.sessionId, clientId: json.clientId, tasks: parseTasks(json.tasks) };
+  } catch {
+    return null;
   }
-  return void 0;
 }
-function idbOpen() {
-  return new Promise((resolve) => {
-    if (typeof indexedDB === "undefined") {
-      resolve(null);
-      return;
-    }
-    try {
-      const req = indexedDB.open(IDB_NAME, 1);
-      req.onupgradeneeded = () => {
-        const db = req.result;
-        if (!db.objectStoreNames.contains(IDB_STORE)) {
-          db.createObjectStore(IDB_STORE, { keyPath: "id" });
-        }
-      };
-      req.onsuccess = () => resolve(req.result);
-      req.onerror = () => resolve(null);
-    } catch {
-      resolve(null);
-    }
-  });
+async function adoptSession(apiUrl, sessionId) {
+  try {
+    const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/adopt`, {
+      method: "GET"
+    });
+    if (res.status === 409 || res.status === 410) return { kind: "closed" };
+    if (!res.ok) return { kind: "error" };
+    const json = await res.json();
+    if (typeof json.sessionId !== "string" || typeof json.clientId !== "string") return { kind: "error" };
+    return { kind: "ok", sessionId: json.sessionId, clientId: json.clientId, tasks: parseTasks(json.tasks) };
+  } catch {
+    return { kind: "error" };
+  }
 }
-async function idbStashChunk(chunk) {
-  const db = await idbOpen();
-  if (!db) return;
-  await new Promise((resolve) => {
-    try {
-      const tx = db.transaction(IDB_STORE, "readwrite");
-      tx.objectStore(IDB_STORE).put(chunk);
-      tx.oncomplete = () => resolve();
-      tx.onerror = () => resolve();
-      tx.onabort = () => resolve();
-    } catch {
-      resolve();
-    }
-  });
-  db.close();
+function parsePaymentSummary(raw) {
+  if (typeof raw !== "object" || raw === null) return null;
+  const p = raw;
+  if (typeof p.qualified !== "boolean") return null;
+  return {
+    qualified: p.qualified,
+    reward: typeof p.reward === "string" ? p.reward : null,
+    payoutEmail: typeof p.payoutEmail === "string" ? p.payoutEmail : null,
+    tasksDone: typeof p.tasksDone === "number" ? p.tasksDone : 0,
+    tasksTotal: typeof p.tasksTotal === "number" ? p.tasksTotal : 0
+  };
 }
-async function idbDeleteChunk(id) {
-  const db = await idbOpen();
-  if (!db) return;
-  await new Promise((resolve) => {
-    try {
-      const tx = db.transaction(IDB_STORE, "readwrite");
-      tx.objectStore(IDB_STORE).delete(id);
-      tx.oncomplete = () => resolve();
-      tx.onerror = () => resolve();
-      tx.onabort = () => resolve();
-    } catch {
-      resolve();
+async function finaliseSession(apiUrl, sessionId, durationSeconds, extras = {}) {
+  try {
+    const body = {
+      durationSeconds: Math.max(0, Math.round(durationSeconds))
+    };
+    if (extras.mutedSegments && extras.mutedSegments.length > 0) {
+      body.mutedSegments = extras.mutedSegments;
     }
-  });
-  db.close();
-}
-async function idbListChunks(sessionId) {
-  const db = await idbOpen();
-  if (!db) return [];
-  const items = await new Promise((resolve) => {
+    const trimmedEndNote = extras.endNote?.trim();
+    if (trimmedEndNote) body.endNote = trimmedEndNote;
+    if (extras.notes && extras.notes.length > 0) {
+      body.notes = extras.notes.slice(0, 200).map((n) => ({
+        atMs: Math.max(0, Math.round(n.atMs)),
+        text: n.text
+      }));
+    }
+    if (extras.sdkSessionId) body.sdkSessionId = extras.sdkSessionId;
+    if (typeof extras.replayOffsetMs === "number") {
+      body.replayOffsetMs = Math.max(0, Math.round(extras.replayOffsetMs));
+    }
+    const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/finalise`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+      keepalive: true
+    });
+    if (!res.ok) return { ok: false, payment: null };
+    let payment = null;
     try {
-      const tx = db.transaction(IDB_STORE, "readonly");
-      const req = tx.objectStore(IDB_STORE).getAll();
-      req.onsuccess = () => {
-        const all = req.result ?? [];
-        resolve(all.filter((c) => c.sessionId === sessionId));
-      };
-      req.onerror = () => resolve([]);
+      const json = await res.json();
+      payment = parsePaymentSummary(json.payment);
     } catch {
-      resolve([]);
     }
-  });
-  db.close();
-  return items;
+    return { ok: true, payment };
+  } catch {
+    return { ok: false, payment: null };
+  }
 }
-async function uploadChunkWithRetry(apiUrl, sessionId, index, blob, logger, maxAttempts = 5) {
-  const url = `${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/chunk?index=${index}`;
-  let attempt = 0;
-  while (attempt < maxAttempts) {
+async function postPayout(apiUrl, sessionId, destination, logger) {
+  const url = `${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/payout`;
+  const body = { method: "email" };
+  if (destination) body.destination = destination;
+  for (let attempt = 0; attempt < 2; attempt += 1) {
     try {
       const res = await fetch(url, {
-        method: "PUT",
-        body: blob,
-        headers: { "Content-Type": blob.type || "audio/webm" },
-        keepalive: blob.size <= 60 * 1024
-        // browsers cap keepalive bodies
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+        keepalive: true
       });
       if (res.ok) return true;
-      if (res.status >= 400 && res.status < 500 && res.status !== 408 && res.status !== 429) {
-        logger.error(`chunk ${index} rejected with ${res.status}`);
+      if (res.status >= 400 && res.status < 500) {
+        logger.warn(`payout rejected with ${res.status}`);
         return false;
       }
     } catch (err) {
-      logger.warn(`chunk ${index} upload attempt ${attempt + 1} failed`, err);
+      logger.warn(`payout attempt ${attempt + 1} failed`, err);
     }
-    attempt += 1;
-    const backoff = Math.min(15e3, 500 * 2 ** attempt) + Math.floor(Math.random() * 250);
-    await new Promise((resolve) => setTimeout(resolve, backoff));
+    await new Promise((resolve) => setTimeout(resolve, 400 + Math.floor(Math.random() * 200)));
   }
   return false;
 }
+async function postNoteOnce(apiUrl, sessionId, atMs, text, logger) {
+  try {
+    const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/notes`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ atMs: Math.max(0, Math.round(atMs)), text }),
+      keepalive: true
+    });
+    if (!res.ok) {
+      logger.warn(`note POST rejected with ${res.status}`);
+      return { ok: false, transient: res.status >= 500 || res.status === 408 || res.status === 429 };
+    }
+    let id;
+    try {
+      const json = await res.json();
+      if (typeof json.id === "string") id = json.id;
+    } catch {
+    }
+    return { ok: true, id, transient: false };
+  } catch (err) {
+    logger.warn("note POST failed", err);
+    return { ok: false, transient: true };
+  }
+}
+async function postNoteWithRetry(apiUrl, sessionId, atMs, text, logger) {
+  const first = await postNoteOnce(apiUrl, sessionId, atMs, text, logger);
+  if (first.ok || !first.transient) return first;
+  await new Promise((resolve) => setTimeout(resolve, 400 + Math.floor(Math.random() * 200)));
+  return postNoteOnce(apiUrl, sessionId, atMs, text, logger);
+}
+
+// src/plugins/user-test/ui.ts
 function buildIndicator(host, store, callbacks) {
-  const root = host.attachShadow({ mode: "closed" });
+  const root = host.attachShadow({ mode: "open" });
   const style = document.createElement("style");
   style.textContent = `
 		:host { all: initial; }
@@ -330,6 +458,28 @@ function buildIndicator(host, store, callbacks) {
 			to { opacity: 0; transform: translateY(4px); }
 		}
 
+		/* "Recording resumed" confirmation: same pill footprint as the mute toast,
+		   but carries the live-record red accent (not the amber warning treatment)
+		   so it reads as reassurance, not a problem. Compact, inline, auto-dismisses.
+		   Leads with the same pulsing record dot used on the bar's mic chip. */
+		.resume-toast {
+			display: inline-flex; align-items: center; gap: 8px;
+			background: rgba(17,17,17,0.92);
+			border: 1px solid rgba(239, 68, 68, 0.42);
+			color: #fff; font-weight: 500; letter-spacing: 0.01em;
+			padding: 8px 13px; border-radius: 999px;
+			box-shadow: 0 12px 28px rgba(0,0,0,0.28);
+			white-space: nowrap;
+			animation: toast-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+		}
+		.resume-toast[data-leaving="true"] { animation: toast-out 0.24s ease forwards; }
+		.resume-toast .dot {
+			width: 7px; height: 7px; border-radius: 50%;
+			background: #ef4444; flex-shrink: 0;
+			box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
+			animation: pulse 1.6s ease-out infinite;
+		}
+
 		/* Notes popover */
 		.note-popover {
 			background: rgba(17,17,17,0.94);
@@ -432,6 +582,12 @@ function buildIndicator(host, store, callbacks) {
 			color: #ea580c;
 		}
 		.thanks .check.early svg { width: 24px; height: 24px; }
+		.thanks .check.ended {
+			background: #f5f5f4;
+			box-shadow: inset 0 0 0 1px rgba(120,113,108,0.20);
+			color: #78716c;
+		}
+		.thanks .check.ended svg { width: 24px; height: 24px; }
 
 		/* Verified-checks list (complete) / progress list (ended early) */
 		.thanks .checks {
@@ -603,7 +759,8 @@ function buildIndicator(host, store, callbacks) {
 		}
 		@media (prefers-reduced-motion: reduce) {
 			.dot { animation: none; }
-			.toast, .note-popover { animation: none; }
+			.toast, .note-popover, .resume-toast { animation: none; }
+			.resume-toast[data-leaving="true"] { opacity: 0; }
 		}
 	`;
   const anchor = document.createElement("div");
@@ -668,13 +825,6 @@ function buildIndicator(host, store, callbacks) {
   root.appendChild(anchor);
   return root;
 }
-var MIC_ICON_SVG = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" width="13" height="13"><path d="M8 1.5a2 2 0 0 0-2 2v4a2 2 0 1 0 4 0v-4a2 2 0 0 0-2-2Z" fill="currentColor"/><path d="M4 7.5a4 4 0 0 0 8 0M8 11.5v3M5.5 14.5h5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>`;
-var MIC_MUTED_ICON_SVG = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" width="13" height="13"><path d="M8 1.5a2 2 0 0 0-2 2v3.2L10 11V3.5a2 2 0 0 0-2-2Z" fill="currentColor"/><path d="M4 7.5a4 4 0 0 0 6.5 3.12M12 7.5a4 4 0 0 1-.3 1.5M8 11.5v3M5.5 14.5h5M2 2l12 12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>`;
-var NOTE_ICON_SVG = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M3 3.5A1.5 1.5 0 0 1 4.5 2h7A1.5 1.5 0 0 1 13 3.5V10a1.5 1.5 0 0 1-1.5 1.5H7L4 14v-2.5h-.5A1.5 1.5 0 0 1 2 10V3.5A1.5 1.5 0 0 1 3.5 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-var TICK_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12.5 10 17.5 19 7" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-var TICK_SM_SVG = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 8.5 6.5 11.5 12.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-var CLOCK_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8.4" stroke="currentColor" stroke-width="2"/><path d="M12 7.5V12l3 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-var SPARK_ICON_SVG = `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 1.5 9.5 6.5 14.5 8 9.5 9.5 8 14.5 6.5 9.5 1.5 8 6.5 6.5Z" fill="currentColor"/></svg>`;
 function installTasksToggle(bar, finishBtn, store, onToggleTasks) {
   const tasksBtn = document.createElement("button");
   tasksBtn.type = "button";
@@ -852,6 +1002,36 @@ function showMuteToast(store) {
   }, 3e3);
   store.muteToastTimers.push(outer);
 }
+function showResumedToast(store) {
+  if (!store.resumed) return;
+  store.resumed = false;
+  if (!store.hasMicPermission || store.indicatorState === "no-audio") return;
+  const root = store.indicatorRoot;
+  if (!root) return;
+  const slot = root.querySelector(".toast-slot");
+  if (!(slot instanceof HTMLElement)) return;
+  slot.innerHTML = "";
+  const toast = document.createElement("div");
+  toast.className = "resume-toast";
+  toast.setAttribute("role", "status");
+  const dot = document.createElement("span");
+  dot.className = "dot";
+  dot.setAttribute("aria-hidden", "true");
+  const label = document.createElement("span");
+  label.textContent = "Recording resumed";
+  toast.appendChild(dot);
+  toast.appendChild(label);
+  slot.appendChild(toast);
+  const outer = window.setTimeout(() => {
+    if (!toast.isConnected) return;
+    toast.setAttribute("data-leaving", "true");
+    const inner = window.setTimeout(() => {
+      if (toast.isConnected) toast.remove();
+    }, 260);
+    store.resumeToastTimers.push(inner);
+  }, 3200);
+  store.resumeToastTimers.push(outer);
+}
 function openNotePopover(store, onSave, onCancel) {
   const root = store.indicatorRoot;
   if (!root) return;
@@ -951,11 +1131,30 @@ function showThanksScreen(root, opts) {
   card.className = "thanks-card";
   overlay.appendChild(card);
   root.appendChild(overlay);
-  if (opts.payment && !opts.payment.qualified) {
-    renderEndedEarly(card, opts);
-    return;
-  }
-  renderComplete(card, opts);
+  if (opts.payment && !opts.payment.qualified) {
+    renderEndedEarly(card, opts);
+    return;
+  }
+  renderComplete(card, opts);
+}
+function showSessionEndedScreen(root) {
+  if (root.querySelector(".thanks")) return;
+  const overlay = document.createElement("div");
+  overlay.className = "thanks";
+  overlay.setAttribute("role", "dialog");
+  overlay.setAttribute("aria-modal", "true");
+  const card = document.createElement("div");
+  card.className = "thanks-card";
+  const head = document.createElement("div");
+  head.className = "head";
+  head.innerHTML = `
+		<div class="check ended" aria-hidden="true">${FLAG_ICON_SVG}</div>
+		<h2>This test session ended</h2>
+		<p class="lede">Thanks for taking part. Your earlier responses were saved. You can close this tab.</p>
+	`;
+  card.appendChild(head);
+  overlay.appendChild(card);
+  root.appendChild(overlay);
 }
 function checksList(rows) {
   const items = rows.map((r) => {
@@ -1206,166 +1405,173 @@ function appendNoteSection(card, opts, prompt) {
     ta.focus({ preventScroll: true });
   });
 }
-function parseTasks(raw) {
-  if (!Array.isArray(raw)) return [];
-  const out = raw.flatMap((item) => {
-    const t = item;
-    if (!t || typeof t.id !== "string" || typeof t.prompt !== "string" || typeof t.sortOrder !== "number") return [];
-    return [{ id: t.id, prompt: t.prompt, sortOrder: t.sortOrder }];
-  });
-  out.sort((a, b) => a.sortOrder - b.sortOrder);
-  return out;
-}
-async function createSession(apiUrl, slug, testerName) {
-  try {
-    const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ slug, ...testerName ? { testerName } : {} })
-    });
-    if (!res.ok) return null;
-    const json = await res.json();
-    if (typeof json.sessionId !== "string" || typeof json.clientId !== "string") return null;
-    return { sessionId: json.sessionId, clientId: json.clientId, tasks: parseTasks(json.tasks) };
-  } catch {
-    return null;
-  }
+
+// src/plugins/user-test/recorder.ts
+function isMediaRecorderSupported() {
+  return typeof window !== "undefined" && typeof window.MediaRecorder !== "undefined" && typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia;
 }
-async function adoptSession(apiUrl, sessionId) {
-  try {
-    const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/adopt`, {
-      method: "GET"
-    });
-    if (!res.ok) return null;
-    const json = await res.json();
-    if (typeof json.sessionId !== "string" || typeof json.clientId !== "string") return null;
-    return { sessionId: json.sessionId, clientId: json.clientId, tasks: parseTasks(json.tasks) };
-  } catch {
-    return null;
+function pickMimeType() {
+  const candidates = ["audio/webm;codecs=opus", "audio/webm", "audio/ogg;codecs=opus", "audio/mp4"];
+  for (const candidate of candidates) {
+    if (typeof MediaRecorder !== "undefined" && MediaRecorder.isTypeSupported?.(candidate)) {
+      return candidate;
+    }
   }
+  return void 0;
 }
-function parsePaymentSummary(raw) {
-  if (typeof raw !== "object" || raw === null) return null;
-  const p = raw;
-  if (typeof p.qualified !== "boolean") return null;
-  return {
-    qualified: p.qualified,
-    reward: typeof p.reward === "string" ? p.reward : null,
-    payoutEmail: typeof p.payoutEmail === "string" ? p.payoutEmail : null,
-    tasksDone: typeof p.tasksDone === "number" ? p.tasksDone : 0,
-    tasksTotal: typeof p.tasksTotal === "number" ? p.tasksTotal : 0
-  };
-}
-async function finaliseSession(apiUrl, sessionId, durationSeconds, extras = {}) {
-  try {
-    const body = {
-      durationSeconds: Math.max(0, Math.round(durationSeconds))
-    };
-    if (extras.mutedSegments && extras.mutedSegments.length > 0) {
-      body.mutedSegments = extras.mutedSegments;
+function idbOpen() {
+  return new Promise((resolve) => {
+    if (typeof indexedDB === "undefined") {
+      resolve(null);
+      return;
     }
-    const trimmedEndNote = extras.endNote?.trim();
-    if (trimmedEndNote) body.endNote = trimmedEndNote;
-    if (extras.notes && extras.notes.length > 0) {
-      body.notes = extras.notes.slice(0, 200).map((n) => ({
-        atMs: Math.max(0, Math.round(n.atMs)),
-        text: n.text
-      }));
+    try {
+      const req = indexedDB.open(IDB_NAME, 1);
+      req.onupgradeneeded = () => {
+        const db = req.result;
+        if (!db.objectStoreNames.contains(IDB_STORE)) {
+          db.createObjectStore(IDB_STORE, { keyPath: "id" });
+        }
+      };
+      req.onsuccess = () => resolve(req.result);
+      req.onerror = () => resolve(null);
+    } catch {
+      resolve(null);
     }
-    if (extras.sdkSessionId) body.sdkSessionId = extras.sdkSessionId;
-    if (typeof extras.replayOffsetMs === "number") {
-      body.replayOffsetMs = Math.max(0, Math.round(extras.replayOffsetMs));
+  });
+}
+async function idbStashChunk(chunk) {
+  const db = await idbOpen();
+  if (!db) return;
+  await new Promise((resolve) => {
+    try {
+      const tx = db.transaction(IDB_STORE, "readwrite");
+      tx.objectStore(IDB_STORE).put(chunk);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+      tx.onabort = () => resolve();
+    } catch {
+      resolve();
     }
-    const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/finalise`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(body),
-      keepalive: true
-    });
-    if (!res.ok) return { ok: false, payment: null };
-    let payment = null;
+  });
+  db.close();
+}
+async function idbDeleteChunk(id) {
+  const db = await idbOpen();
+  if (!db) return;
+  await new Promise((resolve) => {
     try {
-      const json = await res.json();
-      payment = parsePaymentSummary(json.payment);
+      const tx = db.transaction(IDB_STORE, "readwrite");
+      tx.objectStore(IDB_STORE).delete(id);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => resolve();
+      tx.onabort = () => resolve();
     } catch {
+      resolve();
     }
-    return { ok: true, payment };
-  } catch {
-    return { ok: false, payment: null };
+  });
+  db.close();
+}
+async function idbListChunks(sessionId) {
+  const db = await idbOpen();
+  if (!db) return [];
+  const items = await new Promise((resolve) => {
+    try {
+      const tx = db.transaction(IDB_STORE, "readonly");
+      const req = tx.objectStore(IDB_STORE).getAll();
+      req.onsuccess = () => {
+        const all = req.result ?? [];
+        resolve(all.filter((c) => c.sessionId === sessionId));
+      };
+      req.onerror = () => resolve([]);
+    } catch {
+      resolve([]);
+    }
+  });
+  db.close();
+  return items;
+}
+function classifyChunkResponse(status, body) {
+  if (status >= 200 && status < 300) return "ok";
+  if (status === 409 && typeof body === "object" && body !== null && body.closeResume === true) {
+    return "closed";
   }
+  if (status >= 500 || status === 408 || status === 429) return "retry";
+  if (status >= 400) return "fatal";
+  return "retry";
 }
-async function postPayout(apiUrl, sessionId, destination, logger) {
-  const url = `${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/payout`;
-  const body = { method: "email" };
-  if (destination) body.destination = destination;
-  for (let attempt = 0; attempt < 2; attempt += 1) {
+async function uploadChunkWithRetry(apiUrl, sessionId, index, blob, logger, maxAttempts = 5) {
+  const url = `${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/chunk?index=${index}`;
+  let attempt = 0;
+  while (attempt < maxAttempts) {
     try {
       const res = await fetch(url, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body),
-        keepalive: true
+        method: "PUT",
+        body: blob,
+        headers: { "Content-Type": blob.type || "audio/webm" },
+        keepalive: blob.size <= 60 * 1024
+        // browsers cap keepalive bodies
       });
-      if (res.ok) return true;
-      if (res.status >= 400 && res.status < 500) {
-        logger.warn(`payout rejected with ${res.status}`);
-        return false;
+      if (res.ok) return "ok";
+      let body = null;
+      try {
+        body = await res.json();
+      } catch {
+        body = null;
+      }
+      const klass = classifyChunkResponse(res.status, body);
+      if (klass === "closed") {
+        logger.info(`chunk ${index}: server reports session closed; stopping`);
+        return "closed";
+      }
+      if (klass === "fatal") {
+        logger.error(`chunk ${index} rejected with ${res.status}`);
+        return "failed";
       }
     } catch (err) {
-      logger.warn(`payout attempt ${attempt + 1} failed`, err);
-    }
-    await new Promise((resolve) => setTimeout(resolve, 400 + Math.floor(Math.random() * 200)));
-  }
-  return false;
-}
-async function postNoteOnce(apiUrl, sessionId, atMs, text, logger) {
-  try {
-    const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/notes`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ atMs: Math.max(0, Math.round(atMs)), text }),
-      keepalive: true
-    });
-    if (!res.ok) {
-      logger.warn(`note POST rejected with ${res.status}`);
-      return { ok: false, transient: res.status >= 500 || res.status === 408 || res.status === 429 };
-    }
-    let id;
-    try {
-      const json = await res.json();
-      if (typeof json.id === "string") id = json.id;
-    } catch {
+      logger.warn(`chunk ${index} upload attempt ${attempt + 1} failed`, err);
     }
-    return { ok: true, id, transient: false };
-  } catch (err) {
-    logger.warn("note POST failed", err);
-    return { ok: false, transient: true };
+    attempt += 1;
+    const backoff = Math.min(15e3, 500 * 2 ** attempt) + Math.floor(Math.random() * 250);
+    await new Promise((resolve) => setTimeout(resolve, backoff));
   }
-}
-async function postNoteWithRetry(apiUrl, sessionId, atMs, text, logger) {
-  const first = await postNoteOnce(apiUrl, sessionId, atMs, text, logger);
-  if (first.ok || !first.transient) return first;
-  await new Promise((resolve) => setTimeout(resolve, 400 + Math.floor(Math.random() * 200)));
-  return postNoteOnce(apiUrl, sessionId, atMs, text, logger);
+  return "failed";
 }
 async function flushPendingFromIdb(store, ctx) {
   if (!store.sessionId) return;
   const pending = await idbListChunks(store.sessionId);
   for (const chunk of pending) {
-    const ok = await uploadChunkWithRetry(chunk.apiUrl, chunk.sessionId, chunk.chunkIndex, chunk.blob, ctx.logger, 3);
-    if (ok) await idbDeleteChunk(chunk.id);
+    const outcome = await uploadChunkWithRetry(chunk.apiUrl, chunk.sessionId, chunk.chunkIndex, chunk.blob, ctx.logger, 3);
+    if (outcome === "ok") {
+      await idbDeleteChunk(chunk.id);
+    } else if (outcome === "closed") {
+      handleSessionClosed(store);
+      return;
+    }
   }
 }
+function handleSessionClosed(store) {
+  if (store.sessionClosed) return;
+  store.sessionClosed = true;
+  store.onSessionClosed?.();
+}
 function enqueueChunk(store, ctx, blob) {
-  if (store.cancelled || !store.sessionId || blob.size === 0) return;
+  if (store.cancelled || store.sessionClosed || !store.sessionId || blob.size === 0) return;
   const index = store.chunkIndex;
   store.chunkIndex += 1;
+  persistActiveSession(store, store.paused || store.finishFlowRan ? "paused" : "active");
   store.pendingUploads += 1;
   const sessionId = store.sessionId;
   const apiUrl = store.options.apiUrl;
   store.uploadQueue = store.uploadQueue.then(async () => {
-    const ok = await uploadChunkWithRetry(apiUrl, sessionId, index, blob, ctx.logger);
-    if (!ok) {
+    if (store.sessionClosed) {
+      store.pendingUploads -= 1;
+      return;
+    }
+    const outcome = await uploadChunkWithRetry(apiUrl, sessionId, index, blob, ctx.logger);
+    if (outcome === "closed") {
+      handleSessionClosed(store);
+    } else if (outcome === "failed") {
       ctx.logger.warn(`chunk ${index} stashed for offline retry`);
       await idbStashChunk({
         id: `${sessionId}:${index}:${Date.now()}`,
@@ -1379,10 +1585,6 @@ function enqueueChunk(store, ctx, blob) {
     store.pendingUploads -= 1;
   });
 }
-var SILENCE_RMS_DB_THRESHOLD = -60;
-var SILENCE_FLOOR_DB = -100;
-var SILENCE_SUSTAINED_MS = 1800;
-var SILENCE_POLL_MS = 250;
 function rmsDbFromSamples(samples) {
   const n = samples.length;
   if (n === 0) return SILENCE_FLOOR_DB;
@@ -1582,6 +1784,17 @@ function stopRecording(store) {
     store.stream = null;
   }
 }
+
+// src/plugins/user-test/lifecycle.ts
+function pauseFlow(store) {
+  if (store.cancelled) return;
+  if (store.finishFlowRan || store.indicatorState === "finishing" || store.indicatorState === "done") return;
+  if (!store.sessionId) return;
+  store.paused = true;
+  flushMuteIfActive(store);
+  stopRecording(store);
+  persistActiveSession(store, "paused");
+}
 async function finishFlow(store, ctx, opts) {
   if (store.cancelled) return;
   if (store.finishFlowRan) return;
@@ -1615,11 +1828,12 @@ async function finishFlow(store, ctx, opts) {
       }
     }
     store.indicatorState = result.ok ? "done" : "error";
+    if (result.ok) clearActiveSession();
   } else {
     store.indicatorState = "error";
   }
   renderIndicatorState(store);
-  if (opts.showThanks && store.indicatorRoot && store.indicatorState === "done") {
+  if (store.indicatorRoot && store.indicatorState === "done") {
     showThanksScreen(store.indicatorRoot, {
       payment,
       onPayout: async (destination) => {
@@ -1632,6 +1846,7 @@ async function finishFlow(store, ctx, opts) {
         store.startedAt = Date.now();
         store.muted = false;
         store.mutedSinceMs = null;
+        persistActiveSession(store, "active");
         renderIndicatorState(store);
         void startRecording(store, ctx);
       },
@@ -1654,6 +1869,8 @@ async function finishFlow(store, ctx, opts) {
     });
   }
 }
+
+// src/plugins/user-test.ts
 function userTest(options = {}) {
   const merged = {
     queryParam: options.queryParam ?? DEFAULT_OPTIONS.queryParam,
@@ -1666,8 +1883,18 @@ function userTest(options = {}) {
     name: "user-test",
     onInit(ctx) {
       if (typeof window === "undefined" || typeof document === "undefined") return;
-      const slug = getTestSlug(merged.queryParam);
+      const urlSlug = getTestSlug(merged.queryParam);
+      const resumeState = readActiveSession();
+      const resumable = resumeState && (!urlSlug || urlSlug === resumeState.slug) ? resumeState : null;
+      if (resumeState && !resumable) {
+        clearActiveSession();
+      }
+      const slug = resumable?.slug ?? urlSlug;
       if (!slug) return;
+      const isResume = resumable !== null;
+      if (isResume && resumable?.sdkSessionId && ctx.reseatSdkSessionId) {
+        ctx.reseatSdkSessionId(resumable.sdkSessionId);
+      }
       const apiUrl = merged.apiUrl || ctx.baseUrl || DEFAULT_API_URL;
       const store = {
         cancelled: false,
@@ -1676,10 +1903,14 @@ function userTest(options = {}) {
         clientId: null,
         recorder: null,
         stream: null,
-        chunkIndex: 0,
+        // On resume, continue the chunk index so we never overwrite a chunk
+        // already shipped in the pre-navigation leg.
+        chunkIndex: resumable?.nextChunkIndex ?? 0,
         uploadQueue: Promise.resolve(),
         pendingUploads: 0,
-        startedAt: Date.now(),
+        // On resume, keep the ORIGINAL session start so duration + staleness
+        // stay anchored to when the test actually began, not the return moment.
+        startedAt: resumable?.startedAt ?? Date.now(),
         indicator: null,
         indicatorRoot: null,
         indicatorState: "recording",
@@ -1700,16 +1931,32 @@ function userTest(options = {}) {
         silenceMonitor: null,
         muteToastShown: false,
         muteToastTimers: [],
+        resumeToastTimers: [],
         notes: [],
         notesPopoverOpen: false,
         notePopoverAtMs: null,
         endNote: "",
         finishFlowRan: false,
+        sessionClosed: false,
+        onSessionClosed: null,
+        paused: false,
+        resumed: isResume,
+        sdkSessionId: null,
         replayOffsetAtStartMs: null
       };
       ctx.setStore(store);
+      store.onSessionClosed = () => {
+        if (store.cancelled) return;
+        ctx.logger.info("user-test session closed by server during upload; stopping recording");
+        stopRecording(store);
+        clearActiveSession();
+        store.indicatorState = "done";
+        if (store.indicatorRoot && !merged.hideIndicator) {
+          showSessionEndedScreen(store.indicatorRoot);
+        }
+      };
       const onFinish = () => {
-        void finishFlow(store, ctx, { showThanks: true });
+        void finishFlow(store, ctx);
       };
       const setPanelOpen = (open) => {
         if (store.tasksPanelOpen === open) return;
@@ -1797,28 +2044,52 @@ function userTest(options = {}) {
       document.addEventListener("pointerdown", outsidePointer, true);
       document.addEventListener("keydown", onKeydown);
       const pageHide = () => {
-        void finishFlow(store, ctx, { showThanks: false });
+        pauseFlow(store);
       };
       store.pageHideHandler = pageHide;
       window.addEventListener("pagehide", pageHide);
       const onVisibilityChange = () => {
         if (document.visibilityState !== "hidden") return;
-        void finishFlow(store, ctx, { showThanks: false });
+        pauseFlow(store);
       };
       store.visibilityHandler = onVisibilityChange;
       document.addEventListener("visibilitychange", onVisibilityChange);
       void (async () => {
-        const adoptId = getAdoptSessionId();
-        const created = adoptId ? await adoptSession(apiUrl, adoptId) : await createSession(apiUrl, slug, readTesterName(merged.testerName));
-        if (store.cancelled) return;
+        const adoptId = resumable?.sessionId ?? getAdoptSessionId();
+        let created;
+        if (adoptId) {
+          const adopted = await adoptSession(apiUrl, adoptId);
+          if (store.cancelled) return;
+          if (adopted.kind === "closed") {
+            ctx.logger.info("user-test session already closed on adopt; not resuming");
+            clearActiveSession();
+            if (store.indicatorRoot && !merged.hideIndicator) {
+              showSessionEndedScreen(store.indicatorRoot);
+            }
+            return;
+          }
+          if (adopted.kind === "error") {
+            ctx.logger.warn("user-test adopt failed transiently on resume; keeping resume state for retry");
+            store.indicatorState = "error";
+            renderIndicatorState(store);
+            return;
+          }
+          created = adopted.kind === "ok" ? adopted : null;
+        } else {
+          created = await createSession(apiUrl, slug, readTesterName(merged.testerName));
+          if (store.cancelled) return;
+        }
         if (!created) {
           ctx.logger.error(adoptId ? "failed to adopt user-test session" : "failed to create user-test session");
+          if (isResume) clearActiveSession();
           store.indicatorState = "error";
           renderIndicatorState(store);
           return;
         }
         store.sessionId = created.sessionId;
         store.clientId = created.clientId;
+        store.sdkSessionId = ctx.getSdkSessionId ? ctx.getSdkSessionId() : null;
+        persistActiveSession(store, "active");
         const replayStartMs = ctx.getReplayStartMs ? ctx.getReplayStartMs() : null;
         store.replayOffsetAtStartMs = replayStartMs === null ? null : Math.max(0, store.startedAt - replayStartMs);
         store.tasks = created.tasks;
@@ -1832,6 +2103,7 @@ function userTest(options = {}) {
         }
         await startRecording(store, ctx);
         renderIndicatorState(store);
+        showResumedToast(store);
       })();
     },
     onDestroy(ctx) {
@@ -1862,6 +2134,13 @@ function userTest(options = {}) {
         }
       }
       store.muteToastTimers = [];
+      for (const id of store.resumeToastTimers) {
+        try {
+          window.clearTimeout(id);
+        } catch {
+        }
+      }
+      store.resumeToastTimers = [];
       if (store.indicator && store.indicator.parentNode) {
         store.indicator.parentNode.removeChild(store.indicator);
       }
@@ -1874,11 +2153,21 @@ var __test__ = {
   getTestSlug,
   pickMimeType,
   isMediaRecorderSupported,
+  classifyChunkResponse,
+  handleSessionClosed,
   micChipState,
   isStreamSilent,
   rmsDbFromSamples,
   SILENCE_RMS_DB_THRESHOLD,
-  SILENCE_FLOOR_DB
+  SILENCE_FLOOR_DB,
+  parseActiveSession,
+  readActiveSession,
+  clearActiveSession,
+  persistActiveSession,
+  adoptSession,
+  ACTIVE_SESSION_MAX_AGE_MS,
+  RESUME_MAX_IDLE_MS,
+  ACTIVE_SESSION_STORAGE_KEY
 };
 
 export { __test__, isStreamSilent, rmsDbFromSamples, userTest };