@agent-native/core 0.70.3 → 0.72.0

package/corpus/templates/clips/chrome-extension/src/popup.ts

@@ -7,6 +7,13 @@ type ExtensionSettings = {
   includeCamera: boolean;
   includeMicrophone: boolean;
   includeDeveloperLogs: boolean;
+  videoDeviceId: string;
+  audioDeviceId: string;
+};
+
+type InputDevice = {
+  deviceId: string;
+  label: string;
 };
 
 type PopupStartResponse = {
@@ -67,6 +74,8 @@ const DEFAULT_SETTINGS: ExtensionSettings = {
   includeCamera: true,
   includeMicrophone: true,
   includeDeveloperLogs: true,
+  videoDeviceId: "",
+  audioDeviceId: "",
 };
 
 const SOURCE_LABELS: Record<Exclude<CaptureSurface, "camera">, string> = {
@@ -167,6 +176,37 @@ async function loadFeedbackSchema(
   return pending;
 }
 
+// Enumerate the user's input devices for the camera/mic pickers. Labels only
+// populate after camera/mic permission is granted (the extension's permission
+// onboarding page handles that), so fall back to a generic label otherwise.
+async function enumerateInputDevices(): Promise<{
+  cameras: InputDevice[];
+  microphones: InputDevice[];
+}> {
+  try {
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const cameras: InputDevice[] = [];
+    const microphones: InputDevice[] = [];
+    for (const device of devices) {
+      if (!device.deviceId) continue;
+      if (device.kind === "videoinput") {
+        cameras.push({
+          deviceId: device.deviceId,
+          label: device.label.trim() || `Camera ${cameras.length + 1}`,
+        });
+      } else if (device.kind === "audioinput") {
+        microphones.push({
+          deviceId: device.deviceId,
+          label: device.label.trim() || `Microphone ${microphones.length + 1}`,
+        });
+      }
+    }
+    return { cameras, microphones };
+  } catch {
+    return { cameras: [], microphones: [] };
+  }
+}
+
 function readSettings(): Promise<ExtensionSettings> {
   return new Promise((resolve) => {
     chrome.storage.sync.get(DEFAULT_SETTINGS, (value) => {
@@ -188,6 +228,14 @@ function readSettings(): Promise<ExtensionSettings> {
           typeof value.includeDeveloperLogs === "boolean"
             ? value.includeDeveloperLogs
             : DEFAULT_SETTINGS.includeDeveloperLogs,
+        videoDeviceId:
+          typeof value.videoDeviceId === "string"
+            ? value.videoDeviceId
+            : DEFAULT_SETTINGS.videoDeviceId,
+        audioDeviceId:
+          typeof value.audioDeviceId === "string"
+            ? value.audioDeviceId
+            : DEFAULT_SETTINGS.audioDeviceId,
       });
     });
   });
@@ -401,6 +449,28 @@ function comparableLabel(value: string): string {
     .replace(/[^a-z0-9]+/g, "");
 }
 
+// Pages where Chrome forbids content-script / overlay injection, so the on-page
+// countdown + controls can't render. Recording the screen still works; we just
+// warn the user in the popup instead of letting it fail silently.
+function isUnsupportedPage(url: string | undefined | null): boolean {
+  if (!url) return true;
+  const u = url.toLowerCase();
+  return (
+    u.startsWith("chrome://") ||
+    u.startsWith("chrome-extension://") ||
+    u.startsWith("edge://") ||
+    u.startsWith("brave://") ||
+    u.startsWith("arc://") ||
+    u.startsWith("about:") ||
+    u.startsWith("view-source:") ||
+    u.startsWith("devtools://") ||
+    u.startsWith("chrome-search://") ||
+    u.startsWith("chrome-untrusted://") ||
+    u.startsWith("https://chromewebstore.google.com") ||
+    u.startsWith("https://chrome.google.com/webstore")
+  );
+}
+
 function targetCopy(tab: chrome.tabs.Tab | null): {
   title: string;
   subtitle: string;
@@ -464,9 +534,111 @@ function renderSource(settings: ExtensionSettings): void {
   }
 }
 
+// Holds the most recent device enumeration so the menus and labels can render
+// without re-querying on every paint. Refreshed by refreshDevices().
+let inputDevices: { cameras: InputDevice[]; microphones: InputDevice[] } = {
+  cameras: [],
+  microphones: [],
+};
+
+function deviceLabel(
+  devices: InputDevice[],
+  deviceId: string,
+  fallback: string,
+): string {
+  if (!deviceId) return fallback;
+  const match = devices.find((device) => device.deviceId === deviceId);
+  return match ? match.label : fallback;
+}
+
+function renderDeviceMenu(
+  menu: HTMLDivElement,
+  devices: InputDevice[],
+  selectedId: string,
+  defaultLabel: string,
+): void {
+  menu.replaceChildren();
+  const options: InputDevice[] = [
+    { deviceId: "", label: defaultLabel },
+    ...devices,
+  ];
+  for (const option of options) {
+    const item = document.createElement("button");
+    item.type = "button";
+    item.className = "row-menu-item";
+    item.dataset.deviceId = option.deviceId;
+    const selected = option.deviceId === selectedId;
+    if (selected) {
+      item.classList.add("selected");
+      item.setAttribute("aria-checked", "true");
+    } else {
+      item.setAttribute("aria-checked", "false");
+    }
+
+    const check = document.createElement("span");
+    check.className = "row-menu-check";
+    check.setAttribute("aria-hidden", "true");
+    check.textContent = selected ? "✓" : "";
+
+    const label = document.createElement("span");
+    label.className = "row-menu-label";
+    label.textContent = option.label;
+
+    item.append(check, label);
+    menu.append(item);
+  }
+}
+
+function renderDevicePickers(settings: ExtensionSettings): void {
+  const cameraButton = byId<HTMLButtonElement>("camera-device-button");
+  const cameraLabel = byId<HTMLSpanElement>("camera-device-label");
+  const cameraMenu = byId<HTMLDivElement>("camera-device-menu");
+  const showCamera =
+    settings.captureSurface === "camera" || settings.includeCamera;
+  cameraButton.hidden = !showCamera;
+  if (showCamera) {
+    cameraLabel.textContent = deviceLabel(
+      inputDevices.cameras,
+      settings.videoDeviceId,
+      "Default camera",
+    );
+    renderDeviceMenu(
+      cameraMenu,
+      inputDevices.cameras,
+      settings.videoDeviceId,
+      "Default camera",
+    );
+  } else {
+    cameraMenu.hidden = true;
+  }
+
+  const micRow = byId<HTMLDivElement>("microphone-row");
+  const micButton = byId<HTMLButtonElement>("microphone-device-button");
+  const micLabel = byId<HTMLSpanElement>("microphone-device-label");
+  const micMenu = byId<HTMLDivElement>("microphone-device-menu");
+  micButton.hidden = !settings.includeMicrophone;
+  if (settings.includeMicrophone) {
+    micLabel.textContent = deviceLabel(
+      inputDevices.microphones,
+      settings.audioDeviceId,
+      "Default mic",
+    );
+    renderDeviceMenu(
+      micMenu,
+      inputDevices.microphones,
+      settings.audioDeviceId,
+      "Default mic",
+    );
+  } else {
+    micMenu.hidden = true;
+  }
+  micRow.hidden = false;
+}
+
 function render(settings: ExtensionSettings): void {
   renderMode(settings);
   renderSource(settings);
+  renderDevicePickers(settings);
   const includeCamera = byId<HTMLButtonElement>("include-camera");
   const includeMicrophone = byId<HTMLButtonElement>("include-microphone");
   const cameraRow = byId<HTMLDivElement>("camera-row");
@@ -550,6 +722,12 @@ async function init(): Promise<void> {
   }
   const sourceButton = byId<HTMLButtonElement>("source-button");
   const sourceMenu = byId<HTMLDivElement>("source-menu");
+  const cameraDeviceButton = byId<HTMLButtonElement>("camera-device-button");
+  const cameraDeviceMenu = byId<HTMLDivElement>("camera-device-menu");
+  const microphoneDeviceButton = byId<HTMLButtonElement>(
+    "microphone-device-button",
+  );
+  const microphoneDeviceMenu = byId<HTMLDivElement>("microphone-device-menu");
   const includeCamera = byId<HTMLButtonElement>("include-camera");
   const includeMicrophone = byId<HTMLButtonElement>("include-microphone");
   const start = byId<HTMLButtonElement>("start");
@@ -624,8 +802,30 @@ async function init(): Promise<void> {
     window.setTimeout(() => feedbackTextarea.focus(), 30);
   };
 
-  await queryActiveTab();
+  // Re-enumerate devices and repaint the pickers. Labels only appear once the
+  // user has granted camera/mic access (via the permission onboarding page), so
+  // this is also re-run when the device list changes.
+  const refreshDevices = async (): Promise<void> => {
+    inputDevices = await enumerateInputDevices();
+    renderDevicePickers(settings);
+  };
+
+  const closeDeviceMenus = (): void => {
+    cameraDeviceMenu.hidden = true;
+    microphoneDeviceMenu.hidden = true;
+  };
+
+  const activeTab = await queryActiveTab();
+  byId<HTMLDivElement>("unsupported-notice").hidden = !isUnsupportedPage(
+    activeTab?.url,
+  );
   render(settings);
+  void refreshDevices();
+  if (navigator.mediaDevices) {
+    navigator.mediaDevices.addEventListener("devicechange", () => {
+      void refreshDevices();
+    });
+  }
   const status =
     await sendSimpleMessage<PopupStatusResponse>("CLIPS_POPUP_STATUS");
   activeRecording = status.activeRecording ?? null;
@@ -634,17 +834,26 @@ async function init(): Promise<void> {
     window.setInterval(() => renderActiveRecording(activeRecording), 1000);
   }
 
+  // No on-page pre-record preview. A Chrome action popup closes the instant you
+  // click the page, so an interactive on-page bubble before recording isn't
+  // possible — the face bubble appears only once recording starts. syncPreview
+  // is kept as a no-op so the settings handlers below stay unchanged.
+  const syncPreview = (): void => {};
+
   for (const button of document.querySelectorAll<HTMLButtonElement>(
     ".mode-option",
   )) {
     button.addEventListener("click", () => {
       applyMode(settings, button.dataset.mode as RecordingModeChoice);
+      closeDeviceMenus();
       render(settings);
       void saveSettings(settings);
+      syncPreview();
     });
   }
 
   sourceButton.addEventListener("click", () => {
+    closeDeviceMenus();
     sourceMenu.hidden = !sourceMenu.hidden;
   });
 
@@ -656,9 +865,70 @@ async function init(): Promise<void> {
       sourceMenu.hidden = true;
       render(settings);
       void saveSettings(settings);
+      syncPreview();
     });
   }
 
+  cameraDeviceButton.addEventListener("click", () => {
+    sourceMenu.hidden = true;
+    microphoneDeviceMenu.hidden = true;
+    cameraDeviceMenu.hidden = !cameraDeviceMenu.hidden;
+  });
+
+  cameraDeviceMenu.addEventListener("click", (event) => {
+    const item = (event.target as HTMLElement).closest<HTMLButtonElement>(
+      ".row-menu-item",
+    );
+    if (!item) return;
+    settings.videoDeviceId = item.dataset.deviceId ?? "";
+    cameraDeviceMenu.hidden = true;
+    renderDevicePickers(settings);
+    void saveSettings(settings);
+  });
+
+  microphoneDeviceButton.addEventListener("click", () => {
+    sourceMenu.hidden = true;
+    cameraDeviceMenu.hidden = true;
+    microphoneDeviceMenu.hidden = !microphoneDeviceMenu.hidden;
+  });
+
+  microphoneDeviceMenu.addEventListener("click", (event) => {
+    const item = (event.target as HTMLElement).closest<HTMLButtonElement>(
+      ".row-menu-item",
+    );
+    if (!item) return;
+    settings.audioDeviceId = item.dataset.deviceId ?? "";
+    microphoneDeviceMenu.hidden = true;
+    renderDevicePickers(settings);
+    void saveSettings(settings);
+  });
+
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    if (
+      !sourceMenu.hidden &&
+      !sourceMenu.contains(target) &&
+      !sourceButton.contains(target)
+    ) {
+      sourceMenu.hidden = true;
+    }
+    if (
+      !cameraDeviceMenu.hidden &&
+      !cameraDeviceMenu.contains(target) &&
+      !cameraDeviceButton.contains(target)
+    ) {
+      cameraDeviceMenu.hidden = true;
+    }
+    if (
+      !microphoneDeviceMenu.hidden &&
+      !microphoneDeviceMenu.contains(target) &&
+      !microphoneDeviceButton.contains(target)
+    ) {
+      microphoneDeviceMenu.hidden = true;
+    }
+  });
+
   includeCamera.addEventListener("click", () => {
     settings.includeCamera = !settings.includeCamera;
     if (settings.includeCamera && settings.captureSurface === "monitor") {
@@ -667,12 +937,15 @@ async function init(): Promise<void> {
     if (!settings.includeCamera && settings.captureSurface === "camera") {
       settings.captureSurface = "browser";
     }
+    closeDeviceMenus();
     render(settings);
     void saveSettings(settings);
+    syncPreview();
   });
 
   includeMicrophone.addEventListener("click", () => {
     settings.includeMicrophone = !settings.includeMicrophone;
+    closeDeviceMenus();
     render(settings);
     void saveSettings(settings);
   });
@@ -791,7 +1064,7 @@ async function init(): Promise<void> {
   start.addEventListener("click", async () => {
     start.disabled = true;
     signIn.hidden = true;
-    setStatus("Checking sign in...");
+    setStatus(""); // no chatty "Checking…/Starting…" text — the disabled button is enough
     authStatus = await readAuthStatus(settings);
     if (authStatus === "signed-out") {
       start.disabled = false;
@@ -800,7 +1073,6 @@ async function init(): Promise<void> {
       setStatus("");
       return;
     }
-    setStatus("Checking video storage...");
     const storageConfigured = await readVideoStorageConfigured(settings);
     if (!storageConfigured) {
       start.disabled = false;
@@ -823,7 +1095,6 @@ async function init(): Promise<void> {
       window.close();
       return;
     }
-    setStatus("Starting recording...");
     await saveSettings(settings);
     const response = await sendStartMessage(settings);
     if (response.ok) {

package/corpus/templates/clips/chrome-extension/src/styles.css

@@ -855,3 +855,37 @@ h1 {
 .primary-action:hover {
   opacity: 0.92;
 }
+
+/* Unsupported-page notice (shown in the popup when the active tab can't host
+   the on-page overlay, e.g. chrome:// / New Tab / Web Store pages). */
+.notice {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  margin: 0 0 12px;
+  padding: 11px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+}
+
+.notice-icon {
+  width: 18px;
+  height: 18px;
+  flex: none;
+  margin-top: 1px;
+  color: var(--status-warn);
+}
+
+.notice-title {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--fg);
+  margin-bottom: 2px;
+}
+
+.notice-text {
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--fg-muted);
+}

package/corpus/templates/clips/chrome-extension/vite.config.ts

@@ -8,6 +8,11 @@ export default defineConfig({
   root,
   base: "./",
   publicDir: "public",
+  // Share recording primitives with the web app recorder (templates/clips/shared)
+  // — matches the "@shared/*" tsconfig path so imports resolve in both builds.
+  resolve: {
+    alias: { "@shared": resolve(root, "../shared") },
+  },
   build: {
     outDir: "dist",
     emptyOutDir: true,

package/corpus/templates/clips/desktop/src/lib/audio-cue.ts

@@ -14,12 +14,11 @@
  */
 
 export interface AudioCue {
-  /** Play the cue during the countdown once recording is about one second out. */
-  playCountdownCue(): Promise<void>;
   /**
    * Play the cue (bounded by a timeout) and wait a short settle so the tone
-   * sits just before capture rather than inside the recording. Safe to await
-   * directly before starting the recorder.
+   * sits just before capture rather than inside the recording. Call this at the
+   * exact moment recording starts (right before the recorder/native capture is
+   * kicked off) so the chime lines up with the real start, not the countdown.
    */
   playBeforeCapture(): Promise<void>;
   cleanup(): void;
@@ -38,7 +37,6 @@ function wait(ms: number): Promise<void> {
 
 /** A cue that does nothing — used when Web Audio is unavailable. */
 const noopAudioCue: AudioCue = {
-  async playCountdownCue() {},
   async playBeforeCapture() {},
   cleanup() {},
 };
@@ -68,19 +66,26 @@ async function playBeforeCapture(
 }
 
 /**
- * Schedule the recording-start chime on an already-running context: a soft
- * rising two-note (D5 → A5) with a faint high shimmer. Fast attack, smooth
- * exponential tail — a gentle confirmation rather than a harsh beep. Kept under
- * ~380ms so it fits inside `CUE_PLAY_TIMEOUT_MS` and lands just before capture.
+ * Schedule the recording-start chime on an already-running context.
+ *
+ * A warm, bell-like rising two-note "ding-dong" (G5 → C6, a perfect fourth)
+ * voiced on triangle oscillators for a rounder, less electronic timbre, with a
+ * quiet octave overtone (C7) sparkling on top of the second note. Each note has
+ * a soft 18ms attack and a long exponential decay so it rings out gently — a
+ * confident "you're rolling" confirmation that sounds nothing like a flat
+ * countdown blip. Kept under ~420ms so it still fits inside
+ * `CUE_PLAY_TIMEOUT_MS` and lands right as capture begins.
  */
 function scheduleTone(ctx: AudioContext): Promise<void> {
   return new Promise<void>((resolve) => {
     const t0 = ctx.currentTime + 0.005;
     const voices = [
-      { freq: 587.33, at: 0.0, dur: 0.22, peak: 0.06 }, // D5
-      { freq: 880.0, at: 0.06, dur: 0.26, peak: 0.075 }, // A5
-      { freq: 1760.0, at: 0.065, dur: 0.14, peak: 0.02 }, // A6 shimmer
-    ];
+      // Rising perfect fourth: a gentle "ding … dong".
+      { freq: 783.99, at: 0.0, dur: 0.26, peak: 0.07, type: "triangle" }, // G5
+      { freq: 1046.5, at: 0.11, dur: 0.34, peak: 0.085, type: "triangle" }, // C6
+      // Faint octave overtone gives the second note a soft bell shimmer.
+      { freq: 2093.0, at: 0.115, dur: 0.18, peak: 0.022, type: "sine" }, // C7
+    ] as const;
 
     let lastStop = t0;
     for (const voice of voices) {
@@ -89,12 +94,13 @@ function scheduleTone(ctx: AudioContext): Promise<void> {
       lastStop = Math.max(lastStop, stopAt);
 
       const oscillator = ctx.createOscillator();
-      oscillator.type = "sine";
+      oscillator.type = voice.type;
       oscillator.frequency.setValueAtTime(voice.freq, startAt);
 
       const gain = ctx.createGain();
+      // Smooth attack/decay envelope — ramps avoid the click of a hard gate.
       gain.gain.setValueAtTime(0.0001, startAt);
-      gain.gain.exponentialRampToValueAtTime(voice.peak, startAt + 0.012);
+      gain.gain.exponentialRampToValueAtTime(voice.peak, startAt + 0.018);
       gain.gain.exponentialRampToValueAtTime(0.0001, stopAt);
 
       oscillator.connect(gain);
@@ -165,7 +171,6 @@ export function createAudioCue(): AudioCue {
     idleTimer = window.setTimeout(cleanup, CUE_IDLE_CLEANUP_MS);
 
     return {
-      playCountdownCue: play,
       playBeforeCapture: () => playBeforeCapture(play, cleanup),
       cleanup,
     };

package/corpus/templates/clips/desktop/src/lib/recorder.ts

@@ -1398,10 +1398,7 @@ async function selectRegionForRecording(): Promise<RegionCaptureRect> {
   }
 }
 
-function waitForCountdownEvent(
-  timeoutMs = 4000,
-  onOneSecond?: () => void,
-): Promise<void> {
+function waitForCountdownEvent(timeoutMs = 4000): Promise<void> {
   return new Promise((resolve, reject) => {
     let timer: ReturnType<typeof setTimeout> | null = null;
     const unlistens: UnlistenFn[] = [];
@@ -1457,9 +1454,6 @@ function waitForCountdownEvent(
 
     track(listen("clips:countdown-done", () => finish("done")));
     track(listen("clips:countdown-cancel", () => finish("cancel")));
-    if (onOneSecond) {
-      track(listen("clips:countdown-one", () => onOneSecond()));
-    }
 
     timer = setTimeout(() => {
       if (done) return;
@@ -1493,13 +1487,12 @@ async function showRegionRecordBorder(region: RegionCaptureRect | null) {
   });
 }
 
-async function runRecordingCountdown(wantsScreen: boolean, audioCue: AudioCue) {
-  const countdownEvent = waitForCountdownEvent(
-    COUNTDOWN_EVENT_TIMEOUT_MS,
-    () => {
-      void audioCue.playCountdownCue();
-    },
-  );
+async function runRecordingCountdown(wantsScreen: boolean) {
+  // The recording-start chime is intentionally NOT played here. It fires from
+  // `audioCue.playBeforeCapture()` at the real capture-start (right before the
+  // recorder/native capture is kicked off) so the beep lines up with the moment
+  // recording actually begins — not one second early on the countdown's "1".
+  const countdownEvent = waitForCountdownEvent(COUNTDOWN_EVENT_TIMEOUT_MS);
   await showRegionGuidesForRecording(wantsScreen);
   try {
     await invoke("show_countdown");
@@ -1680,7 +1673,7 @@ async function startNativeFullscreenRecording(
       }).catch((err) => {
         console.warn("[clips-recorder] mic warm failed:", err);
       });
-    const countdownPromise = runRecordingCountdown(true, audioCue);
+    const countdownPromise = runRecordingCountdown(true);
     if (localOnly) {
       id = localFolderName;
       await Promise.all([countdownPromise, warmMic(id)]);
@@ -2460,7 +2453,7 @@ async function startRecordingInner(
       combined,
     });
 
-    const countdownPromise = runRecordingCountdown(wantsScreen, audioCue);
+    const countdownPromise = runRecordingCountdown(wantsScreen);
     const localExportPromise = prepareLocalRecordingExport(targets);
     let localExport: Awaited<ReturnType<typeof prepareLocalRecordingExport>>;
     try {
@@ -2636,7 +2629,7 @@ async function startRecordingInner(
   console.log(
     "[clips-recorder] invoking show_countdown + createServerRecording",
   );
-  const countdownPromise = runRecordingCountdown(wantsScreen, audioCue);
+  const countdownPromise = runRecordingCountdown(wantsScreen);
   console.time("[clips-recorder] createServerRecording duration");
   const recordingPromise = createServerRecording(
     params.serverUrl,