Better tests and more user feedback while doing transcription; WIP.

src/components/ModelPicker.tsx

@@ -22,12 +22,19 @@ interface ModelPickerProps {
 }
 
 const DEVICE_OPTIONS: readonly { value: DevicePreference; label: string }[] = [
-  { value: "auto", label: "Auto (WebGPU if available)" },
+  { value: "auto", label: "Auto (WebNN → WebGPU → WASM)" },
   { value: "webgpu", label: "WebGPU" },
   { value: "webnn", label: "WebNN" },
   { value: "wasm", label: "WASM (CPU)" },
 ];
 
+/** Human-readable backend names, shared with the active-device badge. */
+export const DEVICE_LABELS: Record<InferenceDevice, string> = {
+  webnn: "WebNN",
+  webgpu: "WebGPU",
+  wasm: "WASM",
+};
+
 /**
  * Curated model list (D-006): size estimate before download, English-only vs
  * multilingual grouping, downloaded badge from the Cache API (D-005), and a
@@ -86,6 +93,17 @@ export function ModelPicker({
             ))}
           </select>
         </label>
+        {/* Which backend the worker actually selected (D-004/D-017) — the
+            user's preference is only a preference, so show the outcome. */}
+        {activeDevice && (
+          <span
+            className="model-badge device-active-badge"
+            role="status"
+            title="The inference backend the worker actually selected for this model."
+          >
+            Running on {DEVICE_LABELS[activeDevice]}
+          </span>
+        )}
       </div>
       {disabled && (
         <p className="model-picker-hint">