@usero/sdk 1.0.2 → 1.1.1

package/dist/plugins/user-test.js

@@ -145,7 +145,7 @@ async function uploadChunkWithRetry(apiUrl, sessionId, index, blob, logger, maxA
   }
   return false;
 }
-function buildIndicator(host, store, onFinish, onToggleTasks) {
+function buildIndicator(host, store, callbacks) {
   const root = host.attachShadow({ mode: "closed" });
   const style = document.createElement("style");
   style.textContent = `
@@ -160,19 +160,21 @@ function buildIndicator(host, store, onFinish, onToggleTasks) {
 			color: #fff;
 		}
 		.bar {
-			display: inline-flex; align-items: center; gap: 10px;
-			padding: 8px 14px 8px 12px;
-			background: rgba(17,17,17,0.78);
+			display: inline-flex; align-items: center; gap: 6px;
+			padding: 6px 8px 6px 6px;
+			background: rgba(17,17,17,0.82);
+			border: 1px solid rgba(255,255,255,0.08);
 			border-radius: 999px;
-			box-shadow: 0 8px 24px rgba(0,0,0,0.18);
-			backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
+			box-shadow: 0 8px 24px rgba(0,0,0,0.22);
+			backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
 			max-width: 100%;
 		}
 		.panel {
-			background: rgba(17,17,17,0.88);
+			background: rgba(17,17,17,0.92);
+			border: 1px solid rgba(255,255,255,0.08);
 			border-radius: 14px; padding: 12px 14px 12px 8px;
 			line-height: 1.45;
-			box-shadow: 0 12px 32px rgba(0,0,0,0.28);
+			box-shadow: 0 12px 32px rgba(0,0,0,0.32);
 			max-height: min(60vh, 480px);
 			max-width: min(420px, calc(100vw - 32px));
 			width: max-content; overflow-y: auto;
@@ -181,29 +183,156 @@ function buildIndicator(host, store, onFinish, onToggleTasks) {
 		.panel ol { margin: 0; padding-left: 26px; }
 		.panel li { margin: 0 0 8px; }
 		.panel li:last-child { margin: 0; }
+
+		/* Mic chip: pill-within-pill with dot + label, doubles as mute toggle. */
+		.mic {
+			display: inline-flex; align-items: center; gap: 7px;
+			min-height: 32px; min-width: 44px;
+			padding: 0 11px 0 10px;
+			border-radius: 999px;
+			background: rgba(255,255,255,0.06);
+			border: 1px solid rgba(255,255,255,0.06);
+			color: #fff; font: inherit;
+			cursor: pointer; appearance: none;
+			transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+		}
+		.mic:hover { background: rgba(255,255,255,0.12); }
+		.mic:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+		.mic[data-mic-state="muted"] {
+			background: rgba(251, 191, 36, 0.18);
+			border-color: rgba(251, 191, 36, 0.45);
+			color: #fcd34d;
+		}
+		.mic[data-mic-state="muted"]:hover { background: rgba(251, 191, 36, 0.26); }
+		.mic[data-mic-state="none"] {
+			background: rgba(255,255,255,0.04);
+			color: rgba(255,255,255,0.55);
+			cursor: default;
+		}
+		.mic[data-mic-state="none"]:hover { background: rgba(255,255,255,0.04); }
+		.mic-icon { width: 13px; height: 13px; display: inline-block; flex-shrink: 0; }
+		.mic-label { font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
+
 		.dot {
-			width: 8px; height: 8px; border-radius: 50%;
+			width: 7px; height: 7px; border-radius: 50%;
 			background: #ef4444;
 			box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
 			animation: pulse 1.6s ease-out infinite;
+			flex-shrink: 0;
 		}
 		.dot[data-state="no-audio"] { background: #fbbf24; animation: none; }
 		.dot[data-state="finishing"] { background: #fbbf24; animation: none; }
 		.dot[data-state="done"] { background: #10b981; animation: none; }
 		.dot[data-state="error"] { background: #ef4444; animation: none; }
-		.label { font-weight: 500; letter-spacing: 0.01em; }
-		.spacer { width: 1px; height: 16px; background: rgba(255,255,255,0.18); margin: 0 2px; }
+
 		.btn {
-			appearance: none; border: 0; background: rgba(255,255,255,0.12);
+			appearance: none; border: 0; background: rgba(255,255,255,0.10);
 			color: #fff; font: inherit; font-weight: 600;
-			padding: 6px 12px; border-radius: 999px; cursor: pointer;
-			transition: background 0.15s ease;
+			padding: 6px 12px; min-height: 32px; border-radius: 999px; cursor: pointer;
+			transition: background 0.15s ease, transform 0.06s ease;
+			display: inline-flex; align-items: center; gap: 6px;
 		}
-		.btn:hover { background: rgba(255,255,255,0.22); }
+		.btn:hover { background: rgba(255,255,255,0.20); }
+		.btn:active { transform: scale(0.97); }
 		.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
 		.btn[disabled] { opacity: 0.5; cursor: progress; }
 		.tasks-btn[aria-expanded="true"] { background: rgba(255,255,255,0.24); }
-		@media (max-width: 420px) { .btn { padding: 9px 14px; min-height: 40px; } }
+
+		/* Note button: icon-only, matches mic chip footprint */
+		.note-btn {
+			width: 32px; min-height: 32px; padding: 0;
+			background: rgba(255,255,255,0.06);
+			border: 1px solid rgba(255,255,255,0.06);
+			border-radius: 999px;
+			display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+			color: #fff; font: inherit; cursor: pointer; appearance: none;
+			transition: background 0.15s ease, border-color 0.15s ease, width 0.18s ease;
+			overflow: hidden;
+		}
+		.note-btn:hover { background: rgba(255,255,255,0.14); }
+		.note-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+		.note-btn[data-has-notes="true"] { width: auto; padding: 0 10px 0 9px; gap: 6px; }
+		.note-btn[aria-expanded="true"] { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.18); }
+		.note-icon { width: 14px; height: 14px; display: inline-block; }
+		.note-count { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
+
+		.spacer { width: 1px; height: 18px; background: rgba(255,255,255,0.14); margin: 0 1px; }
+
+		@media (max-width: 480px) {
+			.bar { gap: 4px; padding: 5px 6px 5px 5px; }
+			.btn { padding: 7px 12px; min-height: 38px; }
+			.mic, .note-btn { min-height: 38px; }
+			.note-btn { width: 38px; }
+			.note-btn[data-has-notes="true"] { width: auto; }
+		}
+
+		/* First-mute helper toast: sits above the pill, auto-dismisses */
+		.toast {
+			background: rgba(17,17,17,0.92);
+			border: 1px solid rgba(251, 191, 36, 0.45);
+			color: #fff;
+			padding: 9px 14px; border-radius: 12px;
+			max-width: min(340px, calc(100vw - 32px));
+			box-shadow: 0 12px 28px rgba(0,0,0,0.28);
+			text-align: center; line-height: 1.4;
+			animation: toast-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+		}
+		.toast[data-leaving="true"] { animation: toast-out 0.24s ease forwards; }
+		.toast strong { color: #fcd34d; font-weight: 600; }
+		@keyframes toast-in {
+			from { opacity: 0; transform: translateY(6px); }
+			to   { opacity: 1; transform: translateY(0); }
+		}
+		@keyframes toast-out {
+			to { opacity: 0; transform: translateY(4px); }
+		}
+
+		/* Notes popover */
+		.note-popover {
+			background: rgba(17,17,17,0.94);
+			border: 1px solid rgba(255,255,255,0.10);
+			border-radius: 14px; padding: 12px;
+			width: min(340px, calc(100vw - 32px));
+			box-shadow: 0 18px 40px rgba(0,0,0,0.36);
+			display: flex; flex-direction: column; gap: 10px;
+			animation: pop-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
+		}
+		.note-popover[hidden] { display: none; }
+		@keyframes pop-in {
+			from { opacity: 0; transform: translateY(6px) scale(0.98); }
+			to   { opacity: 1; transform: translateY(0) scale(1); }
+		}
+		.note-head {
+			color: rgba(255,255,255,0.7); font-size: 12px;
+			font-weight: 500; letter-spacing: 0.02em;
+		}
+		.note-textarea {
+			width: 100%; box-sizing: border-box;
+			min-height: 80px; resize: vertical;
+			padding: 10px 11px;
+			background: rgba(0,0,0,0.35);
+			border: 1px solid rgba(255,255,255,0.10);
+			border-radius: 10px;
+			color: #fff; font: inherit; font-size: 13.5px;
+			line-height: 1.45;
+			transition: border-color 0.15s ease;
+		}
+		.note-textarea:focus { outline: none; border-color: rgba(255,255,255,0.32); }
+		.note-textarea::placeholder { color: rgba(255,255,255,0.42); }
+		.note-actions {
+			display: flex; align-items: center; justify-content: space-between; gap: 8px;
+		}
+		.note-actions .hint {
+			color: rgba(255,255,255,0.45); font-size: 11px;
+		}
+		.note-actions .group { display: inline-flex; gap: 6px; }
+		.note-actions .btn { padding: 6px 12px; font-size: 12.5px; min-height: 32px; }
+		.btn-primary { background: #fff !important; color: #111; }
+		.btn-primary:hover { background: rgba(255,255,255,0.85) !important; }
+		.btn-ghost { background: transparent; color: rgba(255,255,255,0.7); }
+		.btn-ghost:hover { background: rgba(255,255,255,0.10); color: #fff; }
+
+		/* Thanks overlay + end-of-test note */
 		.thanks {
 			position: fixed; inset: 0;
 			display: grid; place-items: center;
@@ -218,12 +347,14 @@ function buildIndicator(host, store, onFinish, onToggleTasks) {
 		}
 		.thanks-card {
 			background: #fff; color: #111;
-			border-radius: 16px; padding: 28px 24px;
-			max-width: 360px; width: 100%;
+			border-radius: 18px; padding: 28px 24px;
+			max-width: 420px; width: 100%;
 			box-shadow: 0 20px 50px rgba(0,0,0,0.25);
+			text-align: left;
 		}
-		.thanks h2 { margin: 0 0 8px; font-size: 20px; }
-		.thanks p { margin: 0; font-size: 14px; line-height: 1.45; color: #4b5563; }
+		.thanks-card .head { text-align: center; }
+		.thanks h2 { margin: 0 0 6px; font-size: 20px; }
+		.thanks .lede { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: #4b5563; text-align: center; }
 		.thanks .check {
 			width: 44px; height: 44px; border-radius: 50%;
 			background: #10b981; color: #fff;
@@ -231,6 +362,50 @@ function buildIndicator(host, store, onFinish, onToggleTasks) {
 			margin: 0 auto 12px;
 			font-size: 22px;
 		}
+		.thanks .end-label {
+			display: block; margin: 0 0 8px;
+			font-size: 13px; font-weight: 500; color: #374151;
+		}
+		.thanks .end-textarea {
+			width: 100%; box-sizing: border-box;
+			min-height: 96px; resize: vertical;
+			padding: 11px 12px;
+			background: #f9fafb;
+			border: 1px solid #e5e7eb;
+			border-radius: 10px;
+			font: inherit; font-size: 14px; line-height: 1.5;
+			color: #111;
+			transition: border-color 0.15s ease, background 0.15s ease;
+		}
+		.thanks .end-textarea:focus {
+			outline: none; border-color: #111; background: #fff;
+		}
+		.thanks .end-textarea::placeholder { color: #9ca3af; }
+		.thanks .end-actions {
+			display: flex; gap: 10px; margin-top: 14px;
+		}
+		.thanks .end-actions button {
+			flex: 1;
+			appearance: none; border: 1px solid #e5e7eb;
+			background: #fff; color: #111;
+			padding: 11px 14px; border-radius: 10px;
+			font: inherit; font-weight: 600; font-size: 14px;
+			cursor: pointer;
+			transition: background 0.15s ease, border-color 0.15s ease;
+		}
+		.thanks .end-actions button:hover { background: #f3f4f6; }
+		.thanks .end-actions button.primary {
+			background: #111; color: #fff; border-color: #111;
+		}
+		.thanks .end-actions button.primary:hover { background: #1f2937; border-color: #1f2937; }
+		.thanks .end-actions button:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
+		.thanks .end-hint {
+			margin: 10px 0 0; font-size: 11.5px; color: #9ca3af; text-align: center;
+		}
+		.thanks .end-sent {
+			margin-top: 14px; text-align: center; color: #4b5563; font-size: 13px;
+		}
+
 		@keyframes pulse {
 			0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
 			70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
@@ -238,6 +413,7 @@ function buildIndicator(host, store, onFinish, onToggleTasks) {
 		}
 		@media (prefers-reduced-motion: reduce) {
 			.dot { animation: none; }
+			.toast, .note-popover { animation: none; }
 		}
 	`;
   const anchor = document.createElement("div");
@@ -245,34 +421,66 @@ function buildIndicator(host, store, onFinish, onToggleTasks) {
   const panel = document.createElement("div");
   panel.className = "panel";
   panel.hidden = true;
+  const toastSlot = document.createElement("div");
+  toastSlot.className = "toast-slot";
+  const notePopover = document.createElement("div");
+  notePopover.className = "note-popover";
+  notePopover.hidden = true;
   const bar = document.createElement("div");
   bar.className = "bar";
   bar.setAttribute("role", "status");
   bar.setAttribute("aria-live", "polite");
+  const micBtn = document.createElement("button");
+  micBtn.type = "button";
+  micBtn.className = "mic";
+  micBtn.setAttribute("data-mic-state", "recording");
+  micBtn.setAttribute("aria-pressed", "false");
+  micBtn.setAttribute("aria-label", "Mute microphone");
   const dot = document.createElement("span");
   dot.className = "dot";
   dot.setAttribute("data-state", store.indicatorState);
-  const label = document.createElement("span");
-  label.className = "label";
-  label.textContent = "Recording";
+  const micIcon = document.createElement("span");
+  micIcon.className = "mic-icon";
+  micIcon.innerHTML = MIC_ICON_SVG;
+  micIcon.setAttribute("aria-hidden", "true");
+  const micLabel = document.createElement("span");
+  micLabel.className = "mic-label";
+  micLabel.textContent = "Recording";
+  micBtn.appendChild(dot);
+  micBtn.appendChild(micIcon);
+  micBtn.appendChild(micLabel);
+  micBtn.addEventListener("click", callbacks.onToggleMute);
+  bar.appendChild(micBtn);
+  const noteBtn = document.createElement("button");
+  noteBtn.type = "button";
+  noteBtn.className = "note-btn";
+  noteBtn.setAttribute("aria-label", "Add a timestamped note");
+  noteBtn.setAttribute("aria-expanded", "false");
+  noteBtn.setAttribute("data-has-notes", "false");
+  noteBtn.innerHTML = `<span class="note-icon" aria-hidden="true">${NOTE_ICON_SVG}</span><span class="note-count" hidden></span>`;
+  noteBtn.addEventListener("click", callbacks.onOpenNote);
+  bar.appendChild(noteBtn);
   const spacer = document.createElement("span");
   spacer.className = "spacer";
-  bar.appendChild(dot);
-  bar.appendChild(label);
   bar.appendChild(spacer);
   const btn = document.createElement("button");
   btn.type = "button";
   btn.className = "btn finish-btn";
   btn.textContent = "Finish";
-  btn.addEventListener("click", onFinish);
+  btn.addEventListener("click", callbacks.onFinish);
   bar.appendChild(btn);
-  if (store.tasks.length > 0) installTasksToggle(bar, btn, store, onToggleTasks);
+  if (store.tasks.length > 0) installTasksToggle(bar, btn, store, callbacks.onToggleTasks);
   anchor.appendChild(panel);
+  anchor.appendChild(toastSlot);
+  anchor.appendChild(notePopover);
   anchor.appendChild(bar);
   root.appendChild(style);
   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>`;
 function installTasksToggle(bar, finishBtn, store, onToggleTasks) {
   const tasksBtn = document.createElement("button");
   tasksBtn.type = "button";
@@ -315,53 +523,295 @@ function writeTasksPanelOpen(open) {
   } catch {
   }
 }
+function micChipState(store) {
+  if (store.indicatorState === "finishing" || store.indicatorState === "done" || store.indicatorState === "error") {
+    return "inactive";
+  }
+  if (!store.hasMicPermission) return "none";
+  return store.muted ? "muted" : "recording";
+}
 function renderIndicatorState(store) {
   const root = store.indicatorRoot;
   if (!root) return;
   const dot = root.querySelector(".dot");
-  const label = root.querySelector(".label");
+  const mic = root.querySelector(".mic");
+  const micIcon = root.querySelector(".mic-icon");
+  const micLabel = root.querySelector(".mic-label");
   const btn = root.querySelector(".finish-btn");
-  if (!(dot instanceof HTMLElement) || !(label instanceof HTMLElement) || !btn) return;
+  if (!(dot instanceof HTMLElement) || !mic || !(micIcon instanceof HTMLElement) || !(micLabel instanceof HTMLElement) || !btn) return;
   dot.setAttribute("data-state", store.indicatorState);
+  const chipState = micChipState(store);
+  mic.setAttribute("data-mic-state", chipState === "inactive" ? "none" : chipState);
   switch (store.indicatorState) {
     case "recording":
-      label.textContent = "Recording";
-      btn.textContent = "Finish";
-      btn.disabled = false;
-      break;
     case "no-audio":
-      label.textContent = "No mic, replay only";
       btn.textContent = "Finish";
       btn.disabled = false;
       break;
     case "finishing":
-      label.textContent = "Saving";
       btn.textContent = "Saving";
       btn.disabled = true;
       break;
     case "done":
-      label.textContent = "Saved";
       btn.textContent = "Done";
       btn.disabled = true;
       break;
     case "error":
-      label.textContent = "Save failed";
       btn.textContent = "Retry";
       btn.disabled = false;
       break;
   }
+  switch (chipState) {
+    case "recording":
+      micIcon.innerHTML = MIC_ICON_SVG;
+      micLabel.textContent = "Recording";
+      mic.setAttribute("aria-label", "Mute microphone");
+      mic.setAttribute("aria-pressed", "false");
+      mic.removeAttribute("tabindex");
+      break;
+    case "muted":
+      micIcon.innerHTML = MIC_MUTED_ICON_SVG;
+      micLabel.textContent = "Muted";
+      mic.setAttribute("aria-label", "Unmute microphone");
+      mic.setAttribute("aria-pressed", "true");
+      mic.removeAttribute("tabindex");
+      break;
+    case "none":
+      micIcon.innerHTML = MIC_MUTED_ICON_SVG;
+      micLabel.textContent = "No mic, replay only";
+      mic.setAttribute("aria-label", "Microphone not granted, replay only");
+      mic.setAttribute("aria-pressed", "false");
+      mic.setAttribute("tabindex", "-1");
+      break;
+    case "inactive":
+      micIcon.innerHTML = MIC_ICON_SVG;
+      micLabel.textContent = store.indicatorState === "finishing" ? "Saving" : store.indicatorState === "done" ? "Saved" : "Save failed";
+      mic.setAttribute("aria-label", "Recording stopped");
+      mic.setAttribute("aria-pressed", "false");
+      mic.setAttribute("tabindex", "-1");
+      break;
+  }
+}
+function renderNotesCount(store) {
+  const root = store.indicatorRoot;
+  if (!root) return;
+  const noteBtn = root.querySelector(".note-btn");
+  const count = root.querySelector(".note-count");
+  if (!(noteBtn instanceof HTMLElement) || !(count instanceof HTMLElement)) return;
+  const n = store.notes.length;
+  noteBtn.setAttribute("data-has-notes", n > 0 ? "true" : "false");
+  if (n > 0) {
+    count.textContent = String(n);
+    count.hidden = false;
+    noteBtn.setAttribute("aria-label", `Add a timestamped note (${n} so far)`);
+  } else {
+    count.textContent = "";
+    count.hidden = true;
+    noteBtn.setAttribute("aria-label", "Add a timestamped note");
+  }
 }
-function showThanksScreen(root) {
+function showMuteToast(store) {
+  if (store.muteToastShown) return;
+  store.muteToastShown = true;
+  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 = "toast";
+  toast.setAttribute("role", "status");
+  toast.innerHTML = `<strong>Mic off.</strong> Screen is still recording. Tap to unmute.`;
+  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.muteToastTimers.push(inner);
+  }, 3e3);
+  store.muteToastTimers.push(outer);
+}
+function openNotePopover(store, onSave, onCancel) {
+  const root = store.indicatorRoot;
+  if (!root) return;
+  const pop = root.querySelector(".note-popover");
+  const noteBtn = root.querySelector(".note-btn");
+  if (!(pop instanceof HTMLElement) || !(noteBtn instanceof HTMLElement)) return;
+  store.notesPopoverOpen = true;
+  store.notePopoverAtMs = Date.now() - store.startedAt;
+  noteBtn.setAttribute("aria-expanded", "true");
+  pop.innerHTML = "";
+  const head = document.createElement("div");
+  head.className = "note-head";
+  head.innerHTML = `<span>Add a note</span>`;
+  const form = document.createElement("form");
+  form.style.cssText = "display:flex;flex-direction:column;gap:10px;margin:0;";
+  form.noValidate = true;
+  const ta = document.createElement("textarea");
+  ta.className = "note-textarea";
+  ta.placeholder = "What just happened? Confusing? Surprising? Broken?";
+  ta.rows = 3;
+  ta.setAttribute("aria-label", "Note text");
+  const actions = document.createElement("div");
+  actions.className = "note-actions";
+  const hint = document.createElement("span");
+  hint.className = "hint";
+  hint.innerHTML = '<kbd style="font-family:inherit">Cmd</kbd>+Enter to save';
+  const group = document.createElement("div");
+  group.className = "group";
+  const cancelBtn = document.createElement("button");
+  cancelBtn.type = "button";
+  cancelBtn.className = "btn btn-ghost";
+  cancelBtn.textContent = "Cancel";
+  const saveBtn = document.createElement("button");
+  saveBtn.type = "submit";
+  saveBtn.className = "btn btn-primary";
+  saveBtn.textContent = "Save";
+  group.appendChild(cancelBtn);
+  group.appendChild(saveBtn);
+  actions.appendChild(hint);
+  actions.appendChild(group);
+  form.appendChild(ta);
+  form.appendChild(actions);
+  pop.appendChild(head);
+  pop.appendChild(form);
+  pop.hidden = false;
+  const submit = () => {
+    const text = ta.value.trim();
+    if (!text) {
+      onCancel();
+      return;
+    }
+    onSave(text);
+  };
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    submit();
+  });
+  cancelBtn.addEventListener("click", () => onCancel());
+  ta.addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      submit();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+    }
+  });
+  window.requestAnimationFrame(() => {
+    ta.focus({ preventScroll: true });
+  });
+}
+function closeNotePopover(store) {
+  const root = store.indicatorRoot;
+  if (!root) return;
+  const pop = root.querySelector(".note-popover");
+  const noteBtn = root.querySelector(".note-btn");
+  if (pop instanceof HTMLElement) {
+    pop.hidden = true;
+    pop.innerHTML = "";
+  }
+  if (noteBtn instanceof HTMLElement) noteBtn.setAttribute("aria-expanded", "false");
+  store.notesPopoverOpen = false;
+  store.notePopoverAtMs = null;
+}
+function showThanksScreen(root, opts) {
   const overlay = document.createElement("div");
   overlay.className = "thanks";
-  overlay.innerHTML = `
-		<div class="thanks-card">
-			<div class="check" aria-hidden="true">&#10003;</div>
-			<h2>Thanks for testing</h2>
-			<p>Your session was saved. You can close this tab.</p>
+  const card = document.createElement("div");
+  card.className = "thanks-card";
+  const head = document.createElement("div");
+  head.className = "head";
+  head.innerHTML = `
+		<div class="check" aria-hidden="true">&#10003;</div>
+		<h2>Thanks for testing</h2>
+		<p class="lede">Your session was saved. One last thing if you have a moment.</p>
+	`;
+  const form = document.createElement("form");
+  form.noValidate = true;
+  form.innerHTML = `
+		<label class="end-label" for="usero-end-note">Anything you would add?</label>
+		<textarea
+			id="usero-end-note"
+			class="end-textarea"
+			rows="4"
+			placeholder="Confusing bits, things you liked, what you'd change..."
+		></textarea>
+		<div class="end-actions">
+			<button type="button" class="skip">Skip</button>
+			<button type="submit" class="primary">Send</button>
 		</div>
+		<p class="end-hint">Cmd or Ctrl plus Enter to send. Either button is fine.</p>
 	`;
+  card.appendChild(head);
+  card.appendChild(form);
+  overlay.appendChild(card);
   root.appendChild(overlay);
+  const ta = form.querySelector("#usero-end-note");
+  const skipBtn = form.querySelector("button.skip");
+  if (!ta || !skipBtn) return;
+  const swapToSent = (message) => {
+    form.remove();
+    const sent = document.createElement("p");
+    sent.className = "end-sent";
+    sent.textContent = message;
+    card.appendChild(sent);
+  };
+  const ERROR_CLASS = "end-error";
+  const showError = (message) => {
+    const prior = form.querySelector(`.${ERROR_CLASS}`);
+    if (prior) prior.remove();
+    const err = document.createElement("p");
+    err.className = ERROR_CLASS;
+    err.textContent = message;
+    err.setAttribute("role", "alert");
+    err.style.cssText = "margin:10px 0 0;font-size:12.5px;color:#b91c1c;text-align:center;";
+    form.appendChild(err);
+  };
+  const submit = async () => {
+    const text = ta.value.trim();
+    ta.disabled = true;
+    skipBtn.disabled = true;
+    const submitBtn = form.querySelector("button.primary");
+    if (submitBtn) submitBtn.disabled = true;
+    if (text) {
+      try {
+        await Promise.race([
+          Promise.resolve(opts.onSubmitNote(text)),
+          new Promise((_, reject) => {
+            window.setTimeout(() => reject(new Error("timeout")), 3e4);
+          })
+        ]);
+        swapToSent("Thanks. You can close this tab.");
+      } catch {
+        ta.disabled = false;
+        skipBtn.disabled = false;
+        if (submitBtn) submitBtn.disabled = false;
+        showError("Couldn't save your note. Try again?");
+      }
+    } else {
+      swapToSent("All good. You can close this tab.");
+    }
+  };
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    void submit();
+  });
+  skipBtn.addEventListener("click", () => {
+    ta.value = "";
+    void submit();
+  });
+  ta.addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      void submit();
+    }
+  });
+  window.requestAnimationFrame(() => {
+    ta.focus({ preventScroll: true });
+  });
 }
 function parseTasks(raw) {
   if (!Array.isArray(raw)) return [];
@@ -388,12 +838,26 @@ async function createSession(apiUrl, slug, testerName) {
     return null;
   }
 }
-async function finaliseSession(apiUrl, sessionId, durationSeconds) {
+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;
+    }
+    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
+      }));
+    }
     const res = await fetch(`${apiUrl.replace(/\/$/, "")}/api/user-test-sessions/${encodeURIComponent(sessionId)}/finalise`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ durationSeconds: Math.max(0, Math.round(durationSeconds)) }),
+      body: JSON.stringify(body),
       keepalive: true
     });
     return res.ok;
@@ -401,6 +865,36 @@ async function finaliseSession(apiUrl, sessionId, durationSeconds) {
     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);
+}
 async function flushPendingFromIdb(store, ctx) {
   if (!store.sessionId) return;
   const pending = await idbListChunks(store.sessionId);
@@ -449,6 +943,7 @@ async function startRecording(store, ctx) {
     return;
   }
   store.stream = stream;
+  store.hasMicPermission = true;
   const mimeType = pickMimeType();
   let recorder;
   try {
@@ -472,6 +967,34 @@ async function startRecording(store, ctx) {
   });
   recorder.start(store.options.chunkSeconds * 1e3);
 }
+function toggleMute(store) {
+  if (!store.stream || !store.hasMicPermission) return false;
+  const tracks = store.stream.getAudioTracks();
+  if (tracks.length === 0) return false;
+  const nowMs = Date.now() - store.startedAt;
+  if (!store.muted) {
+    for (const t of tracks) t.enabled = false;
+    store.muted = true;
+    store.mutedSinceMs = nowMs;
+  } else {
+    const startMs = store.mutedSinceMs ?? nowMs;
+    if (nowMs > startMs) {
+      store.mutedSegments.push({ startMs, endMs: nowMs });
+    }
+    store.mutedSinceMs = null;
+    store.muted = false;
+    for (const t of tracks) t.enabled = true;
+  }
+  return true;
+}
+function flushMuteIfActive(store) {
+  if (!store.muted || store.mutedSinceMs === null) return;
+  const nowMs = Date.now() - store.startedAt;
+  if (nowMs > store.mutedSinceMs) {
+    store.mutedSegments.push({ startMs: store.mutedSinceMs, endMs: nowMs });
+  }
+  store.mutedSinceMs = null;
+}
 function stopRecording(store) {
   const recorder = store.recorder;
   if (recorder && recorder.state !== "inactive") {
@@ -492,22 +1015,50 @@ function stopRecording(store) {
 }
 async function finishFlow(store, ctx, opts) {
   if (store.cancelled) return;
+  if (store.finishFlowRan) return;
   if (store.indicatorState === "finishing" || store.indicatorState === "done") return;
+  store.finishFlowRan = true;
   store.indicatorState = "finishing";
+  flushMuteIfActive(store);
   renderIndicatorState(store);
   stopRecording(store);
   await store.uploadQueue;
   await flushPendingFromIdb(store, ctx);
   const durationSeconds = (Date.now() - store.startedAt) / 1e3;
   if (store.sessionId) {
-    const ok = await finaliseSession(store.options.apiUrl, store.sessionId, durationSeconds);
+    const unackedNotes = store.notes.filter((n) => !n.acked).map((n) => ({ atMs: n.atMs, text: n.text }));
+    const ok = await finaliseSession(store.options.apiUrl, store.sessionId, durationSeconds, {
+      mutedSegments: store.mutedSegments,
+      notes: unackedNotes
+    });
+    if (ok) {
+      for (const n of store.notes) {
+        if (!n.acked) n.acked = true;
+      }
+    }
     store.indicatorState = ok ? "done" : "error";
   } else {
     store.indicatorState = "error";
   }
   renderIndicatorState(store);
   if (opts.showThanks && store.indicatorRoot && store.indicatorState === "done") {
-    showThanksScreen(store.indicatorRoot);
+    showThanksScreen(store.indicatorRoot, {
+      onSubmitNote: async (text) => {
+        if (!store.sessionId) return;
+        store.endNote = text;
+        const stillUnacked = store.notes.filter((n) => !n.acked).map((n) => ({ atMs: n.atMs, text: n.text }));
+        const ok = await finaliseSession(store.options.apiUrl, store.sessionId, durationSeconds, {
+          endNote: text,
+          notes: stillUnacked
+        });
+        if (!ok) throw new Error("finalise failed");
+        for (const n of store.notes) {
+          if (!n.acked) n.acked = true;
+        }
+      },
+      onSkip: () => {
+      }
+    });
   }
 }
 function userTest(options = {}) {
@@ -544,7 +1095,18 @@ function userTest(options = {}) {
         tasks: [],
         tasksPanelOpen: readTasksPanelOpen(),
         outsidePointerHandler: null,
-        keydownHandler: null
+        keydownHandler: null,
+        hasMicPermission: false,
+        muted: false,
+        mutedSinceMs: null,
+        mutedSegments: [],
+        muteToastShown: false,
+        muteToastTimers: [],
+        notes: [],
+        notesPopoverOpen: false,
+        notePopoverAtMs: null,
+        endNote: "",
+        finishFlowRan: false
       };
       ctx.setStore(store);
       const onFinish = () => {
@@ -557,23 +1119,67 @@ function userTest(options = {}) {
         renderTasksPanel(store);
       };
       const onToggleTasks = () => setPanelOpen(!store.tasksPanelOpen);
+      const onToggleMute = () => {
+        if (!store.hasMicPermission) return;
+        const ok = toggleMute(store);
+        if (!ok) return;
+        if (store.muted) showMuteToast(store);
+        renderIndicatorState(store);
+      };
+      const closeNote = () => closeNotePopover(store);
+      const onOpenNote = () => {
+        if (store.notesPopoverOpen) {
+          closeNote();
+          return;
+        }
+        openNotePopover(
+          store,
+          (text) => {
+            const atMs = store.notePopoverAtMs ?? Math.max(0, Date.now() - store.startedAt);
+            const note = { atMs, text, acked: false };
+            store.notes.push(note);
+            closeNote();
+            renderNotesCount(store);
+            if (store.sessionId) {
+              const sessionId = store.sessionId;
+              void (async () => {
+                const result = await postNoteWithRetry(store.options.apiUrl, sessionId, atMs, text, ctx.logger);
+                if (result.ok) {
+                  note.acked = true;
+                  if (result.id) note.serverId = result.id;
+                }
+              })();
+            }
+          },
+          () => closeNote()
+        );
+      };
       if (!merged.hideIndicator) {
         const host = document.createElement("div");
         host.setAttribute("data-usero-user-test", "true");
         document.body.appendChild(host);
         store.indicator = host;
-        store.indicatorRoot = buildIndicator(host, store, onFinish, onToggleTasks);
+        store.indicatorRoot = buildIndicator(host, store, {
+          onFinish,
+          onToggleTasks,
+          onToggleMute,
+          onOpenNote
+        });
         renderIndicatorState(store);
+        renderNotesCount(store);
       }
       const outsidePointer = (event) => {
-        if (!store.tasksPanelOpen) return;
         const host = store.indicator;
         if (!host) return;
         const path = event.composedPath();
-        if (!path.includes(host)) setPanelOpen(false);
+        if (path.includes(host)) return;
+        if (store.tasksPanelOpen) setPanelOpen(false);
+        if (store.notesPopoverOpen) closeNote();
       };
       const onKeydown = (event) => {
-        if (event.key === "Escape" && store.tasksPanelOpen) setPanelOpen(false);
+        if (event.key !== "Escape") return;
+        if (store.tasksPanelOpen) setPanelOpen(false);
+        if (store.notesPopoverOpen) closeNote();
       };
       store.outsidePointerHandler = outsidePointer;
       store.keydownHandler = onKeydown;
@@ -625,6 +1231,13 @@ function userTest(options = {}) {
         document.removeEventListener("keydown", store.keydownHandler);
         store.keydownHandler = null;
       }
+      for (const id of store.muteToastTimers) {
+        try {
+          window.clearTimeout(id);
+        } catch {
+        }
+      }
+      store.muteToastTimers = [];
       if (store.indicator && store.indicator.parentNode) {
         store.indicator.parentNode.removeChild(store.indicator);
       }