@agent-native/core 0.71.0 → 0.72.0

package/corpus/templates/clips/chrome-extension/src/content-script.ts

@@ -1,10 +1,15 @@
-// Loom-style in-page overlay host. This content script is injected into every
-// page (declared for <all_urls>) and is wrapped in an IIFE so it emits a single
-// self-contained classic script with no module imports/exports and leaks no
-// names into the shared global scope. Its only job is to mount/unmount the
-// overlay iframes; all UI and control logic lives inside the extension-origin
-// overlay pages (src/overlay.html). The background service worker is the source
-// of truth for which "parts" are visible and pushes them here.
+// Loom-style in-page overlay host. The background service worker injects this
+// into the LAUNCH TAB on demand via chrome.scripting.executeScript (covered by
+// the activeTab permission the user grants when they click the extension), NOT
+// declaratively on every page — that would need broad "<all_urls>" host access
+// and Chrome's in-depth review. So the overlay lives on the tab the recording
+// was started from; it does not follow across tabs unless CROSS_TAB_FOLLOW is
+// re-enabled in background.ts (see PERMISSIONS.md). Wrapped in an IIFE so it
+// emits a single self-contained classic script with no module imports/exports
+// and leaks no names into the shared global scope. Its only job is to
+// mount/unmount the overlay iframes; all UI and control logic lives inside the
+// extension-origin overlay pages (src/overlay.html). The worker is the source of
+// truth for which "parts" are visible and pushes them here.
 
 (function clipsOverlayHost() {
   type OverlayPart = "bubble" | "countdown" | "toolbar" | "saving";
@@ -194,7 +199,7 @@
       position: "absolute",
       border: "none",
       background: "transparent",
-      colorScheme: "normal",
+      colorScheme: "dark",
       pointerEvents: "auto",
     });
     frame.setAttribute("allowtransparency", "true");
@@ -208,24 +213,39 @@
         bottom: "24px",
         width: `${size}px`,
         height: `${size}px`,
+        // Clip the IFRAME itself to a circle so the iframe's opaque canvas (which
+        // a declared color-scheme always paints, dark or white) can never show as
+        // a square box around the bubble.
+        borderRadius: "50%",
+        overflow: "hidden",
         zIndex: "3",
       });
     } else if (part === "toolbar") {
       // Left-edge vertical pill (desktop layout). Height grows on hover via the
-      // resize message below.
+      // resize message below. Clipped to the pill's radius (the pill fills the
+      // iframe) so the opaque canvas can't show as a box; shadow on the iframe so
+      // the clip doesn't cut it.
       Object.assign(frame.style, {
         left: "16px",
         top: "calc(50% - 77px)",
         width: "68px",
         height: "154px",
+        borderRadius: "20px",
+        overflow: "hidden",
+        boxShadow: "0 10px 28px rgba(9, 9, 11, 0.45)",
         zIndex: "2",
       });
     } else if (part === "saving") {
+      // Compact card: caption + a single indeterminate bar (no circular spinner).
+      // Clipped to the card radius (card fills the iframe) so no canvas box shows.
       Object.assign(frame.style, {
         left: "24px",
         bottom: "24px",
-        width: "264px",
-        height: "96px",
+        width: "240px",
+        height: "64px",
+        borderRadius: "14px",
+        overflow: "hidden",
+        boxShadow: "0 10px 28px rgba(9, 9, 11, 0.45)",
         zIndex: "2",
       });
     } else {
@@ -253,22 +273,124 @@
     if (part === "bubble") applyBubbleGeom();
   }
 
+  // Camera-ready gating + connecting spinner: while the camera connects we show a
+  // simple centered spinner and keep the bubble hidden, then reveal the bubble and
+  // start the countdown once the feed is live — so the "3" never hangs and there's
+  // no half-loaded, un-draggable bubble during the wait. The bubble posts
+  // "camera-ready" when its video plays (or fails); a fallback timer proceeds
+  // anyway if the camera never connects.
+  const CONNECTING_ID = `${CONTAINER_ID}-connecting`;
+  let cameraReady = false;
+  let countdownDeferred = false;
+  let countdownFallbackTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function showConnecting(container: HTMLDivElement): void {
+    if (document.getElementById(CONNECTING_ID)) return;
+    const wrap = document.createElement("div");
+    wrap.id = CONNECTING_ID;
+    Object.assign(wrap.style, {
+      position: "absolute",
+      inset: "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none",
+      zIndex: "4",
+    });
+    const chip = document.createElement("div");
+    Object.assign(chip.style, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "84px",
+      height: "84px",
+      borderRadius: "20px",
+      background: "rgba(24, 24, 27, 0.92)",
+      boxShadow: "0 10px 28px rgba(9, 9, 11, 0.45)",
+    });
+    const spinner = document.createElement("div");
+    Object.assign(spinner.style, {
+      width: "40px",
+      height: "40px",
+      borderRadius: "50%",
+      border: "4px solid rgba(255, 255, 255, 0.18)",
+      borderTopColor: "rgba(255, 255, 255, 0.92)",
+    });
+    chip.appendChild(spinner);
+    wrap.appendChild(chip);
+    container.appendChild(wrap);
+    try {
+      spinner.animate(
+        [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+        { duration: 800, iterations: Infinity },
+      );
+    } catch {
+      /* Web Animations unavailable — a static ring is fine */
+    }
+  }
+
+  function hideConnecting(): void {
+    document.getElementById(CONNECTING_ID)?.remove();
+  }
+
+  function setBubbleHidden(hidden: boolean): void {
+    const frame = document.getElementById(partFrameId("bubble"));
+    if (frame) (frame as HTMLElement).style.visibility = hidden ? "hidden" : "";
+  }
+
+  function mountDeferredCountdown(): void {
+    countdownDeferred = false;
+    clearTimeout(countdownFallbackTimer);
+    hideConnecting();
+    setBubbleHidden(false);
+    const container = document.getElementById(
+      CONTAINER_ID,
+    ) as HTMLDivElement | null;
+    if (container && !document.getElementById(partFrameId("countdown"))) {
+      mountPart(container, "countdown");
+    }
+  }
+
   function reconcile(parts: OverlayPart[]): void {
     console.log("[clips-cs] reconcile parts:", parts, "on", location.href);
     const wanted = new Set(parts.filter((p) => ALL_PARTS.includes(p)));
+    // Leaving the countdown phase (recording / saving / idle): cancel any pending
+    // deferred countdown + spinner so a late fallback timer can't pop the "3-2-1"
+    // back up over a later overlay (this was the "countdown over the saving card"
+    // bug).
+    if (!wanted.has("countdown")) {
+      countdownDeferred = false;
+      clearTimeout(countdownFallbackTimer);
+      hideConnecting();
+    }
     if (wanted.size === 0) {
       document.getElementById(CONTAINER_ID)?.remove();
+      cameraReady = false;
       return;
     }
     const container = ensureContainer();
+    const gateCountdown =
+      wanted.has("countdown") && wanted.has("bubble") && !cameraReady;
     for (const part of ALL_PARTS) {
       const existing = document.getElementById(partFrameId(part));
       if (wanted.has(part)) {
+        // Hold the countdown (showing the spinner) until the camera feed is live.
+        if (part === "countdown" && gateCountdown) {
+          if (!existing && !countdownDeferred) {
+            countdownDeferred = true;
+            clearTimeout(countdownFallbackTimer);
+            countdownFallbackTimer = setTimeout(mountDeferredCountdown, 12000);
+          }
+          continue;
+        }
         if (!existing) mountPart(container, part);
+        // Keep the bubble hidden behind the spinner until the feed is live.
+        if (part === "bubble" && gateCountdown) setBubbleHidden(true);
       } else if (existing) {
         existing.remove();
       }
     }
+    if (gateCountdown) showConnecting(container);
   }
 
   // Guard against rare double-injection (SPA soft-reloads re-running the script).
@@ -311,6 +433,11 @@
       }
       return;
     }
+    if (data.kind === "camera-ready") {
+      cameraReady = true;
+      if (countdownDeferred) mountDeferredCountdown();
+      return;
+    }
     if (data.kind === "bubble-drag-start") {
       startBubbleDrag();
       return;

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

@@ -12,6 +12,12 @@
 // Lifecycle: ACQUIRE (show picker, hold stream) → BEGIN (start recorder after
 // the countdown) → PAUSE/RESUME → STOP/CANCEL, plus RESTART (discard and start
 // over on the same stream).
+//
+// MIME selection and the chunk-upload URL/param protocol are shared with the web
+// app recorder via @shared/recording-core so the server contract can't drift.
+
+import { chunkUploadUrl, pickMimeType } from "@shared/recording-core";
+import { scheduleReadyChime } from "@shared/recording-audio";
 
 type CaptureMode = "screen" | "camera";
 
@@ -128,20 +134,6 @@ function reportStatus(
   });
 }
 
-function chooseMimeType(): string {
-  const preferred = [
-    "video/webm;codecs=vp9,opus",
-    "video/webm;codecs=vp8,opus",
-    "video/webm;codecs=opus",
-    "video/webm",
-  ];
-  if (typeof MediaRecorder === "undefined") return "video/webm";
-  return (
-    preferred.find((type) => MediaRecorder.isTypeSupported(type)) ??
-    "video/webm"
-  );
-}
-
 function waitForMetadata(video: HTMLVideoElement): Promise<void> {
   if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
     return Promise.resolve();
@@ -358,21 +350,6 @@ async function createMixedAudio(
   return { audioContext, tracks: destination.stream.getAudioTracks() };
 }
 
-function appendUploadParams(
-  uploadUrl: string,
-  params: Record<string, string | number | boolean | undefined>,
-): string {
-  const url = new URL(uploadUrl);
-  for (const [key, value] of Object.entries(params)) {
-    if (value === undefined) continue;
-    url.searchParams.set(
-      key,
-      typeof value === "boolean" ? (value ? "1" : "0") : String(value),
-    );
-  }
-  return url.toString();
-}
-
 async function uploadChunk(
   recording: ActiveRecording,
   blob: Blob,
@@ -387,10 +364,10 @@ async function uploadChunk(
     hasCamera?: boolean;
   } = {},
 ): Promise<UploadResult> {
-  const url = appendUploadParams(recording.uploadUrl, {
+  const url = chunkUploadUrl(recording.uploadUrl, {
     index,
     total: extra.total,
-    isFinal: extra.isFinal ? 1 : 0,
+    isFinal: extra.isFinal,
     mimeType: recording.mimeType,
     durationMs: extra.durationMs,
     width: extra.width,
@@ -573,7 +550,7 @@ async function begin(message: BeginMessage): Promise<{
   const mixedAudio = await createMixedAudio(audioInputs);
 
   const outputStream = new MediaStream([videoTrack, ...mixedAudio.tracks]);
-  const mimeType = chooseMimeType();
+  const mimeType = pickMimeType() || "video/webm";
   const recorder = new MediaRecorder(outputStream, {
     mimeType,
     // Crisp 1080p capture — matches the web/desktop recorders. Files upload
@@ -640,6 +617,10 @@ async function begin(message: BeginMessage): Promise<{
       return;
     }
     const index = recording.chunkIndex++;
+    // Record the failure and stop, but do NOT re-throw: re-throwing leaves a
+    // rejected promise that surfaces as an "Uncaught (in promise)" error (bad
+    // look in a Chrome Web Store review). finalizeStop reads recording.upload-
+    // Failure and surfaces it through the normal error path instead.
     const upload = uploadChunk(recording, event.data, index).catch((err) => {
       recording.uploadFailure =
         err instanceof Error ? err : new Error(String(err));
@@ -647,7 +628,6 @@ async function begin(message: BeginMessage): Promise<{
         error: recording.uploadFailure.message,
       });
       if (recorder.state !== "inactive") recorder.stop();
-      throw recording.uploadFailure;
     });
     recording.uploadPromises.push(upload);
   });
@@ -677,9 +657,25 @@ async function begin(message: BeginMessage): Promise<{
   };
 }
 
+// The canonical Clips "ready" chime when recording starts — shared with the web
+// app recorder (and matching the desktop app) so every surface sounds the same.
+function playStartChime(): void {
+  try {
+    const ctx = new AudioContext();
+    void ctx.resume().catch(() => undefined);
+    void scheduleReadyChime(ctx).finally(() => {
+      void ctx.close().catch(() => undefined);
+    });
+  } catch {
+    /* audio unavailable */
+  }
+}
+
 function startRecorderNow(recording: ActiveRecording): void {
   if (recording.cancelled) return;
   try {
+    // Chime first (on "Go") so it mostly lands before the recording begins.
+    playStartChime();
     recording.recorder.start(2000);
     recording.startedAtMs = Date.now();
     console.log("[clips-offscreen] recorder.start ok");
@@ -724,6 +720,27 @@ async function finalizeStop(recording: ActiveRecording): Promise<void> {
         : new Error(String(rejected.reason));
     }
     const durationMs = Math.max(0, Date.now() - recording.startedAtMs);
+    // Surface WHY a finalize might fail before the server's cryptic "No chunks
+    // found": 0 chunks means the recorder emitted no non-empty data (empty
+    // capture / never started), which is a different problem than an auth 401.
+    if (recording.chunkIndex === 0) {
+      console.warn(
+        "[clips-offscreen] finalizing with 0 chunks — empty recording.",
+        "recorderStarted:",
+        recording.startedAtMs > 0,
+        "durationMs:",
+        durationMs,
+        "hadAuth:",
+        Boolean(recording.authToken),
+      );
+    } else {
+      console.log(
+        "[clips-offscreen] finalizing",
+        recording.chunkIndex,
+        "chunk(s), durationMs:",
+        durationMs,
+      );
+    }
     const result = await uploadChunk(
       recording,
       new Blob([], { type: recording.mimeType }),

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

@@ -1,5 +1,8 @@
 :root {
-  color-scheme: light dark;
+  /* "dark" to match the dark overlay: a declared color-scheme always paints an
+     opaque iframe canvas, so we keep it dark rather than white. Shaped parts clip
+     the canvas away (see content-script styleFrame); the countdown uses it. */
+  color-scheme: dark;
 }
 
 * {
@@ -41,7 +44,6 @@ body {
   overflow: hidden;
   background: #18181b;
   border: 3px solid rgba(255, 255, 255, 0.92);
-  box-shadow: 0 6px 18px rgba(9, 9, 11, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -176,21 +178,22 @@ body {
 }
 
 .toolbar-v {
-  /* Top-anchored so Stop/time/pause stay put and the pill grows DOWNWARD on
-     hover (centering shifted the buttons up and caused misclicks). */
+  /* Fill the iframe so the (opaque) iframe canvas is fully covered by the pill —
+     the iframe is clipped to this same 20px radius in styleFrame, so no canvas
+     box shows. Top-anchored content (justify-content:flex-start) keeps Stop/time/
+     pause put as the pill grows DOWNWARD on hover (centering caused misclicks).
+     Shadow lives on the iframe element so the clip doesn't cut it off. */
   position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
+  inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: flex-start;
   gap: 8px;
   padding: 9px;
   border-radius: 20px;
   background: rgba(24, 24, 27, 0.94);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 10px 28px rgba(9, 9, 11, 0.45);
   color: #fff;
   -webkit-user-select: none;
   user-select: none;
@@ -322,28 +325,9 @@ body {
   border-radius: 14px;
   background: rgba(24, 24, 27, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 10px 28px rgba(9, 9, 11, 0.45);
   color: #fff;
 }
 
-.saving-card .saving-spinner {
-  position: absolute;
-  top: 14px;
-  right: 14px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.25);
-  border-top-color: #fff;
-  animation: saving-spin 0.8s linear infinite;
-}
-
-@keyframes saving-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .saving-caption {
   font-size: 14px;
   font-weight: 600;

package/corpus/templates/clips/chrome-extension/src/overlay.html

@@ -2,7 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="color-scheme" content="light dark" />
+    <!-- A declared color-scheme always makes Chrome paint an OPAQUE iframe canvas
+         (white for light, dark for dark) — it can't be made transparent. The
+         overlay is dark-themed, so we use "dark" to keep that canvas dark rather
+         than a jarring white. The shaped parts (bubble/toolbar/saving) clip their
+         iframe to the content shape so the canvas never shows; only the
+         full-screen countdown relies on this dark value. -->
+    <meta name="color-scheme" content="dark" />
     <title>Clips overlay</title>
   </head>
   <body>

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

@@ -161,12 +161,17 @@ async function initBubble(): Promise<void> {
     ring.appendChild(video);
     await video.play().catch(() => undefined);
     console.log("[clips-overlay] camera bubble live");
+    // Tell the host the feed is live so it can start the countdown — the "3"
+    // shouldn't appear until the camera is actually showing.
+    postBubble("camera-ready");
   } catch (err) {
     console.warn("[clips-overlay] camera getUserMedia failed:", err);
     const empty = document.createElement("div");
     empty.className = "bubble-empty";
     empty.innerHTML = ICONS.cameraOff;
     ring.appendChild(empty);
+    // Still release the countdown — a blocked/failed camera must not hang it.
+    postBubble("camera-ready");
   }
 }
 
@@ -210,43 +215,36 @@ function initCountdown(): void {
   wrap.append(controls, hint);
   root.appendChild(wrap);
 
-  let lastShown = "";
-  // Compute the fallback end-time ONCE (if the worker's countdownEndsAtMs never
-  // arrives) — recomputing it every frame froze the number on "3".
-  let fallbackEndsAt = 0;
-  const render = (): void => {
-    let endsAt = state.countdownEndsAtMs;
-    if (endsAt <= 0) {
-      if (fallbackEndsAt === 0) {
-        const fallback =
-          Number(params.get("seconds") || String(COUNTDOWN_FALLBACK)) ||
-          COUNTDOWN_FALLBACK;
-        fallbackEndsAt = Date.now() + fallback * 1000;
-      }
-      endsAt = fallbackEndsAt;
-    }
-    const remainingMs = endsAt - Date.now();
-    if (state.phase !== "countdown" || remainingMs <= 0) {
-      if (lastShown !== "Go") {
-        number.textContent = "Go";
-        number.classList.add("countdown-go");
-        lastShown = "Go";
+  // Each number is shown via a CHAINED setTimeout — the next step is scheduled
+  // one second after the current one actually renders, not on a fixed interval.
+  // This is deliberate: when the camera is slow to connect (e.g. an iPhone
+  // Continuity Camera) it can hog the main thread and stall a tick. A setInterval
+  // would then fire all the missed ticks back-to-back ("3"… then "2 1 Go" in a
+  // burst); chaining means a stall only delays the next number, it never bursts.
+  // At "Go" we tell the worker to start the recorder; the worker's own timer is
+  // just a fallback for pages where no overlay can be injected.
+  const STEP_MS = 1000;
+  const steps = ["3", "2", "1", "Go"];
+  let doneSent = false;
+
+  const showStep = (index: number): void => {
+    const text = steps[index];
+    number.textContent = text;
+    number.classList.toggle("countdown-go", text === "Go");
+    number.style.animation = "none";
+    void number.offsetWidth;
+    number.style.animation = "";
+    if (text === "Go") {
+      if (!doneSent) {
+        doneSent = true;
+        send("CLIPS_OVERLAY_COUNTDOWN_DONE");
       }
       return;
     }
-    const text = String(Math.ceil(remainingMs / 1000));
-    if (text !== lastShown) {
-      number.textContent = text;
-      number.classList.remove("countdown-go");
-      number.style.animation = "none";
-      void number.offsetWidth;
-      number.style.animation = "";
-      lastShown = text;
-    }
+    window.setTimeout(() => showStep(index + 1), STEP_MS);
   };
-  countdownRender = render;
-  window.setInterval(render, 100);
-  render();
+
+  showStep(0); // "3" immediately, then chain "2" → "1" → "Go"
 }
 
 /* --------------------------------------------------------------- toolbar --- */
@@ -341,8 +339,6 @@ function initToolbar(): void {
 function initSaving(): void {
   const card = document.createElement("div");
   card.className = "saving-card";
-  const spinner = document.createElement("div");
-  spinner.className = "saving-spinner";
   const caption = document.createElement("div");
   caption.className = "saving-caption";
   caption.textContent = "Saving clip…";
@@ -351,7 +347,8 @@ function initSaving(): void {
   const fill = document.createElement("div");
   fill.className = "saving-bar-fill";
   bar.appendChild(fill);
-  card.append(spinner, caption, bar);
+  // One progress indicator only — the indeterminate bar (no circular spinner).
+  card.append(caption, bar);
   root.appendChild(card);
 }
 
@@ -371,7 +368,6 @@ const state: OverlayState = {
   countdownEndsAtMs: 0,
 };
 let toolbarRender: (() => void) | null = null;
-let countdownRender: (() => void) | null = null;
 
 chrome.runtime.onMessage.addListener((message) => {
   if (!message || typeof message !== "object") return;
@@ -386,7 +382,6 @@ chrome.runtime.onMessage.addListener((message) => {
   if (typeof next.countdownEndsAtMs === "number")
     state.countdownEndsAtMs = next.countdownEndsAtMs;
   toolbarRender?.();
-  countdownRender?.();
 });
 
 if (part === "bubble") void initBubble();

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

@@ -834,27 +834,11 @@ async function init(): Promise<void> {
     window.setInterval(() => renderActiveRecording(activeRecording), 1000);
   }
 
-  // Pre-record preview: while this popup is open and idle, show the live face
-  // bubble on the active tab (desktop-app style). The port stays open for the
-  // popup's lifetime; its disconnect (popup closed) tells the worker to remove
-  // the preview. Keep the reference so the port isn't garbage-collected early.
-  const previewPort = chrome.runtime.connect({ name: "clips-preview" });
-  const syncPreview = (): void => {
-    const wantsCamera =
-      !activeRecording &&
-      !isUnsupportedPage(activeTab?.url) &&
-      (settings.captureSurface === "camera" || settings.includeCamera);
-    try {
-      chrome.runtime.sendMessage(
-        { type: "CLIPS_PREVIEW", camera: wantsCamera },
-        () => void chrome.runtime.lastError,
-      );
-    } catch {
-      /* worker asleep; will re-sync on next interaction */
-    }
-  };
-  void previewPort;
-  syncPreview();
+  // 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",
@@ -1080,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;
@@ -1089,7 +1073,6 @@ async function init(): Promise<void> {
       setStatus("");
       return;
     }
-    setStatus("Checking video storage...");
     const storageConfigured = await readVideoStorageConfigured(settings);
     if (!storageConfigured) {
       start.disabled = false;
@@ -1112,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/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/server/lib/media-permissions.ts

@@ -1,5 +1,9 @@
+// camera=* (not (self)) so the Clips browser extension's camera bubble — injected
+// as a cross-origin iframe — can run on Clips pages too; (self) only allows the
+// app's own same-origin camera. Display-capture stays same-origin. The browser
+// still prompts for camera/mic permission per origin.
 export const MEDIA_CAPTURE_PERMISSIONS_POLICY =
-  "camera=(self), microphone=(self), display-capture=(self), geolocation=(), screen-wake-lock=()";
+  "camera=*, microphone=(self), display-capture=(self), geolocation=(), screen-wake-lock=()";
 
 export function withMediaCapturePermissions(response: Response): Response {
   const headers = new Headers(response.headers);