@usero/sdk 1.1.6 → 1.1.7

package/dist/plugins/user-test.d.cts

@@ -56,14 +56,66 @@ interface UserTestOptions {
     testerName?: string;
     hideIndicator?: boolean;
 }
+interface UserTestTask {
+    id: string;
+    prompt: string;
+    sortOrder: number;
+}
+interface MutedSegment {
+    startMs: number;
+    endMs: number;
+}
+interface InFlightNote {
+    atMs: number;
+    text: string;
+    acked: boolean;
+    serverId?: string;
+}
+interface RecorderStore {
+    cancelled: boolean;
+    slug: string;
+    sessionId: string | null;
+    clientId: string | null;
+    recorder: MediaRecorder | null;
+    stream: MediaStream | null;
+    chunkIndex: number;
+    uploadQueue: Promise<void>;
+    pendingUploads: number;
+    startedAt: number;
+    indicator: HTMLElement | null;
+    indicatorRoot: ShadowRoot | null;
+    indicatorState: 'recording' | 'finishing' | 'done' | 'no-audio' | 'error';
+    pageHideHandler: (() => void) | null;
+    options: Required<UserTestOptions>;
+    tasks: UserTestTask[];
+    tasksPanelOpen: boolean;
+    outsidePointerHandler: ((event: PointerEvent) => void) | null;
+    keydownHandler: ((event: KeyboardEvent) => void) | null;
+    hasMicPermission: boolean;
+    micAcquiring: boolean;
+    micFailReason: 'blocked' | 'not-found' | 'unsupported' | null;
+    muted: boolean;
+    mutedSinceMs: number | null;
+    mutedSegments: MutedSegment[];
+    muteToastShown: boolean;
+    muteToastTimers: number[];
+    notes: InFlightNote[];
+    notesPopoverOpen: boolean;
+    notePopoverAtMs: number | null;
+    endNote: string;
+    finishFlowRan: boolean;
+    replayOffsetAtStartMs: number | null;
+}
 declare function getTestSlug(queryParam: string): string | null;
 declare function isMediaRecorderSupported(): boolean;
 declare function pickMimeType(): string | undefined;
+declare function micChipState(store: RecorderStore): 'recording' | 'muted' | 'none' | 'connecting' | 'inactive';
 declare function userTest(options?: UserTestOptions): UseroPlugin;
 declare const __test__: {
     getTestSlug: typeof getTestSlug;
     pickMimeType: typeof pickMimeType;
     isMediaRecorderSupported: typeof isMediaRecorderSupported;
+    micChipState: typeof micChipState;
 };
 
 export { type UserTestOptions, __test__, userTest };

package/dist/plugins/user-test.d.ts

@@ -56,14 +56,66 @@ interface UserTestOptions {
     testerName?: string;
     hideIndicator?: boolean;
 }
+interface UserTestTask {
+    id: string;
+    prompt: string;
+    sortOrder: number;
+}
+interface MutedSegment {
+    startMs: number;
+    endMs: number;
+}
+interface InFlightNote {
+    atMs: number;
+    text: string;
+    acked: boolean;
+    serverId?: string;
+}
+interface RecorderStore {
+    cancelled: boolean;
+    slug: string;
+    sessionId: string | null;
+    clientId: string | null;
+    recorder: MediaRecorder | null;
+    stream: MediaStream | null;
+    chunkIndex: number;
+    uploadQueue: Promise<void>;
+    pendingUploads: number;
+    startedAt: number;
+    indicator: HTMLElement | null;
+    indicatorRoot: ShadowRoot | null;
+    indicatorState: 'recording' | 'finishing' | 'done' | 'no-audio' | 'error';
+    pageHideHandler: (() => void) | null;
+    options: Required<UserTestOptions>;
+    tasks: UserTestTask[];
+    tasksPanelOpen: boolean;
+    outsidePointerHandler: ((event: PointerEvent) => void) | null;
+    keydownHandler: ((event: KeyboardEvent) => void) | null;
+    hasMicPermission: boolean;
+    micAcquiring: boolean;
+    micFailReason: 'blocked' | 'not-found' | 'unsupported' | null;
+    muted: boolean;
+    mutedSinceMs: number | null;
+    mutedSegments: MutedSegment[];
+    muteToastShown: boolean;
+    muteToastTimers: number[];
+    notes: InFlightNote[];
+    notesPopoverOpen: boolean;
+    notePopoverAtMs: number | null;
+    endNote: string;
+    finishFlowRan: boolean;
+    replayOffsetAtStartMs: number | null;
+}
 declare function getTestSlug(queryParam: string): string | null;
 declare function isMediaRecorderSupported(): boolean;
 declare function pickMimeType(): string | undefined;
+declare function micChipState(store: RecorderStore): 'recording' | 'muted' | 'none' | 'connecting' | 'inactive';
 declare function userTest(options?: UserTestOptions): UseroPlugin;
 declare const __test__: {
     getTestSlug: typeof getTestSlug;
     pickMimeType: typeof pickMimeType;
     isMediaRecorderSupported: typeof isMediaRecorderSupported;
+    micChipState: typeof micChipState;
 };
 
 export { type UserTestOptions, __test__, userTest };

package/dist/plugins/user-test.js

@@ -217,12 +217,37 @@ function buildIndicator(host, store, callbacks) {
 			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);
+		/* Connecting: getUserMedia pending. Steady amber tint reads as "working",
+		   distinct from the live red pulse and the failed state below. The icon
+		   gets a gentle non-pulsing breathe so it feels alive without alarming. */
+		.mic[data-mic-state="connecting"] {
+			background: rgba(251, 191, 36, 0.14);
+			border-color: rgba(251, 191, 36, 0.32);
+			color: #fcd34d;
 			cursor: default;
 		}
-		.mic[data-mic-state="none"]:hover { background: rgba(255,255,255,0.04); }
+		.mic[data-mic-state="connecting"]:hover { background: rgba(251, 191, 36, 0.14); }
+		.mic[data-mic-state="connecting"] .mic-icon {
+			color: #fbbf24;
+			animation: micBreathe 1.4s ease-in-out infinite;
+		}
+		/* Failed terminal state, actionable. Tappable affordance: clearer border,
+		   pointer cursor, brightens on hover/focus to invite the retry tap. */
+		.mic[data-mic-state="none"] {
+			background: rgba(255,255,255,0.05);
+			border-color: rgba(255,255,255,0.14);
+			color: rgba(255,255,255,0.72);
+			cursor: pointer;
+		}
+		.mic[data-mic-state="none"]:hover {
+			background: rgba(255,255,255,0.12);
+			border-color: rgba(255,255,255,0.24);
+			color: #fff;
+		}
+		@keyframes micBreathe {
+			0%, 100% { opacity: 0.55; }
+			50% { opacity: 1; }
+		}
 		.mic-icon { width: 13px; height: 13px; display: inline-block; flex-shrink: 0; }
 		.mic-label { font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
 
@@ -691,7 +716,10 @@ function micChipState(store) {
   if (store.indicatorState === "finishing" || store.indicatorState === "done" || store.indicatorState === "error") {
     return "inactive";
   }
-  if (!store.hasMicPermission) return "none";
+  if (!store.hasMicPermission) {
+    if (store.micAcquiring) return "connecting";
+    return "none";
+  }
   return store.muted ? "muted" : "recording";
 }
 function renderIndicatorState(store) {
@@ -706,6 +734,8 @@ function renderIndicatorState(store) {
   dot.setAttribute("data-state", store.indicatorState);
   const chipState = micChipState(store);
   mic.setAttribute("data-mic-state", chipState === "inactive" ? "none" : chipState);
+  mic.removeAttribute("data-mic-fail");
+  if (chipState === "none") mic.setAttribute("data-mic-fail", store.micFailReason ?? "blocked");
   switch (store.indicatorState) {
     case "recording":
     case "no-audio":
@@ -740,13 +770,23 @@ function renderIndicatorState(store) {
       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");
+    case "connecting":
+      micIcon.innerHTML = MIC_ICON_SVG;
+      micLabel.textContent = "Connecting mic";
+      mic.setAttribute("aria-label", "Connecting microphone");
       mic.setAttribute("aria-pressed", "false");
       mic.setAttribute("tabindex", "-1");
       break;
+    case "none": {
+      micIcon.innerHTML = MIC_MUTED_ICON_SVG;
+      const failLabel = store.micFailReason === "not-found" ? "No mic found, tap to retry" : "Mic blocked, tap to retry";
+      const failAria = store.micFailReason === "not-found" ? "No microphone found, tap to retry. Replay continues." : "Microphone blocked, tap to retry. Replay continues.";
+      micLabel.textContent = failLabel;
+      mic.setAttribute("aria-label", failAria);
+      mic.setAttribute("aria-pressed", "false");
+      mic.removeAttribute("tabindex");
+      break;
+    }
     case "inactive":
       micIcon.innerHTML = MIC_ICON_SVG;
       micLabel.textContent = store.indicatorState === "finishing" ? "Saving" : store.indicatorState === "done" ? "Saved" : "Save failed";
@@ -1325,8 +1365,13 @@ function enqueueChunk(store, ctx, blob) {
   });
 }
 async function startRecording(store, ctx) {
+  store.micAcquiring = true;
+  store.micFailReason = null;
+  renderIndicatorState(store);
   if (!isMediaRecorderSupported()) {
     ctx.logger.warn("MediaRecorder not supported, continuing without audio");
+    store.micAcquiring = false;
+    store.micFailReason = "unsupported";
     store.indicatorState = "no-audio";
     renderIndicatorState(store);
     return;
@@ -1336,12 +1381,17 @@ async function startRecording(store, ctx) {
     stream = await navigator.mediaDevices.getUserMedia({ audio: true });
   } catch (err) {
     ctx.logger.warn("mic permission denied or unavailable", err);
+    store.micAcquiring = false;
+    const name = err instanceof Error ? err.name : "";
+    store.micFailReason = name === "NotFoundError" || name === "DevicesNotFoundError" ? "not-found" : "blocked";
     store.indicatorState = "no-audio";
     renderIndicatorState(store);
     return;
   }
   store.stream = stream;
   store.hasMicPermission = true;
+  store.micAcquiring = false;
+  store.micFailReason = null;
   const mimeType = pickMimeType();
   let recorder;
   try {
@@ -1350,6 +1400,9 @@ async function startRecording(store, ctx) {
     ctx.logger.error("MediaRecorder construction failed", err);
     stream.getTracks().forEach((t) => t.stop());
     store.stream = null;
+    store.hasMicPermission = false;
+    store.micAcquiring = false;
+    store.micFailReason = "unsupported";
     store.indicatorState = "no-audio";
     renderIndicatorState(store);
     return;
@@ -1364,6 +1417,10 @@ async function startRecording(store, ctx) {
     ctx.logger.error("MediaRecorder error", event);
   });
   recorder.start(store.options.chunkSeconds * 1e3);
+  if (store.indicatorState === "no-audio") {
+    store.indicatorState = "recording";
+  }
+  renderIndicatorState(store);
 }
 function toggleMute(store) {
   if (!store.stream || !store.hasMicPermission) return false;
@@ -1519,6 +1576,8 @@ function userTest(options = {}) {
         outsidePointerHandler: null,
         keydownHandler: null,
         hasMicPermission: false,
+        micAcquiring: true,
+        micFailReason: null,
         muted: false,
         mutedSinceMs: null,
         mutedSegments: [],
@@ -1543,7 +1602,12 @@ function userTest(options = {}) {
       };
       const onToggleTasks = () => setPanelOpen(!store.tasksPanelOpen);
       const onToggleMute = () => {
-        if (!store.hasMicPermission) return;
+        if (!store.hasMicPermission) {
+          if (!store.micAcquiring && store.indicatorState !== "finishing" && store.indicatorState !== "done" && store.indicatorState !== "error") {
+            void startRecording(store, ctx);
+          }
+          return;
+        }
         const ok = toggleMute(store);
         if (!ok) return;
         if (store.muted) showMuteToast(store);
@@ -1672,7 +1736,7 @@ function userTest(options = {}) {
     }
   };
 }
-var __test__ = { getTestSlug, pickMimeType, isMediaRecorderSupported };
+var __test__ = { getTestSlug, pickMimeType, isMediaRecorderSupported, micChipState };
 
 export { __test__, userTest };
 //# sourceMappingURL=user-test.js.map