@agent-native/core 0.70.3 → 0.72.0

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

@@ -75,21 +75,82 @@ function send(type: string, extra: Record<string, unknown> = {}): void {
 
 /* ---------------------------------------------------------------- bubble --- */
 
+function postBubble(kind: string, extra: Record<string, unknown> = {}): void {
+  try {
+    window.parent.postMessage(
+      { source: "clips-overlay", kind, part: "bubble", ...extra },
+      "*",
+    );
+  } catch {
+    /* parent gone */
+  }
+}
+
 async function initBubble(): Promise<void> {
   const bubble = document.createElement("div");
   bubble.className = "bubble";
   const ring = document.createElement("div");
   ring.className = "bubble-ring";
   bubble.appendChild(ring);
+
+  // Drag: the content script owns the iframe position, so we just signal the
+  // start of a drag and it captures the pointer page-wide.
+  bubble.style.cursor = "grab";
+  bubble.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0) return;
+    if ((e.target as HTMLElement).closest("[data-no-drag]")) return;
+    e.preventDefault();
+    bubble.style.cursor = "grabbing";
+    postBubble("bubble-drag-start");
+    const restore = (): void => {
+      bubble.style.cursor = "grab";
+      window.removeEventListener("pointerup", restore);
+    };
+    window.addEventListener("pointerup", restore);
+  });
+
+  // Size dots (small / large), revealed on hover — like the desktop bubble.
+  const sizes = document.createElement("div");
+  sizes.className = "bubble-sizes";
+  sizes.setAttribute("data-no-drag", "");
+  for (const key of ["sm", "lg"] as const) {
+    const dot = document.createElement("button");
+    dot.type = "button";
+    dot.className = `bubble-size-dot bubble-size-${key}`;
+    dot.title = key === "sm" ? "Small" : "Large";
+    dot.setAttribute(
+      "aria-label",
+      key === "sm" ? "Small bubble" : "Large bubble",
+    );
+    dot.setAttribute("data-no-drag", "");
+    dot.addEventListener("click", (e) => {
+      e.stopPropagation();
+      postBubble("bubble-size", { size: key });
+    });
+    sizes.appendChild(dot);
+  }
+  bubble.appendChild(sizes);
+
   root.appendChild(bubble);
 
   try {
+    const videoDeviceId = await new Promise<string>((resolve) => {
+      try {
+        chrome.storage.sync.get("videoDeviceId", (v) =>
+          resolve(typeof v.videoDeviceId === "string" ? v.videoDeviceId : ""),
+        );
+      } catch {
+        resolve("");
+      }
+    });
+    const videoConstraint: MediaTrackConstraints = {
+      width: { ideal: 640 },
+      height: { ideal: 640 },
+    };
+    if (videoDeviceId) videoConstraint.deviceId = { exact: videoDeviceId };
+    else videoConstraint.facingMode = "user";
     const stream = await navigator.mediaDevices.getUserMedia({
-      video: {
-        width: { ideal: 640 },
-        height: { ideal: 640 },
-        facingMode: "user",
-      },
+      video: videoConstraint,
       audio: false,
     });
     const video = document.createElement("video");
@@ -99,11 +160,18 @@ async function initBubble(): Promise<void> {
     video.srcObject = stream;
     ring.appendChild(video);
     await video.play().catch(() => undefined);
-  } catch {
+    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");
   }
 }
 
@@ -147,37 +215,36 @@ function initCountdown(): void {
   wrap.append(controls, hint);
   root.appendChild(wrap);
 
-  let lastShown = "";
-  const render = (): void => {
-    const fallback =
-      Number(params.get("seconds") || String(COUNTDOWN_FALLBACK)) ||
-      COUNTDOWN_FALLBACK;
-    const endsAt =
-      state.countdownEndsAtMs > 0
-        ? state.countdownEndsAtMs
-        : Date.now() + fallback * 1000;
-    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 --- */
@@ -272,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…";
@@ -282,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);
 }
 
@@ -302,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;
@@ -317,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.html

@@ -162,6 +162,31 @@
       </header>
 
       <div id="idle-content">
+        <div id="unsupported-notice" class="notice" role="alert" hidden>
+          <svg
+            class="notice-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <div class="notice-body">
+            <div class="notice-title">Clips can't draw controls here</div>
+            <div class="notice-text">
+              This is a browser page (like New&nbsp;Tab), so the countdown and
+              on-screen controls won't appear. You can still record a window or
+              full screen — stop from the Clips icon — or open a website for the
+              full experience.
+            </div>
+          </div>
+        </div>
         <section class="panel" aria-label="Recorder setup">
           <div id="source-row" class="row row-on">
             <span class="row-icon" aria-hidden="true">
@@ -242,10 +267,24 @@
                 />
               </svg>
             </span>
-            <button type="button" class="row-button" disabled>
-              <span class="row-label">Default camera</span>
+            <button id="camera-device-button" type="button" class="row-button">
+              <span id="camera-device-label" class="row-label"
+                >Default camera</span
+              >
               <span class="row-flex" aria-hidden="true"></span>
+              <span class="row-chev" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M6 9l6 6 6-6"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </span>
             </button>
+            <div id="camera-device-menu" class="row-menu" hidden></div>
             <button
               id="include-camera"
               class="toggle toggle-on"
@@ -257,7 +296,7 @@
             </button>
           </div>
 
-          <div class="row row-on">
+          <div id="microphone-row" class="row row-on">
             <span class="row-icon" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none">
                 <rect
@@ -277,10 +316,28 @@
                 />
               </svg>
             </span>
-            <button type="button" class="row-button" disabled>
-              <span class="row-label">Default mic</span>
+            <button
+              id="microphone-device-button"
+              type="button"
+              class="row-button"
+            >
+              <span id="microphone-device-label" class="row-label"
+                >Default mic</span
+              >
               <span class="row-flex" aria-hidden="true"></span>
+              <span class="row-chev" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M6 9l6 6 6-6"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </span>
             </button>
+            <div id="microphone-device-menu" class="row-menu" hidden></div>
             <button
               id="include-microphone"
               class="toggle toggle-on"