@agent-native/core 0.70.2 → 0.71.0

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

@@ -39,10 +39,9 @@ body {
   height: 100%;
   border-radius: 50%;
   overflow: hidden;
-  background: #0f172a;
-  box-shadow:
-    0 10px 30px rgba(15, 23, 42, 0.35),
-    0 0 0 4px rgba(255, 255, 255, 0.92);
+  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;
@@ -75,7 +74,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(2, 6, 23, 0.55);
+  background: rgba(9, 9, 11, 0.55);
   backdrop-filter: blur(2px);
 }
 
@@ -126,9 +125,9 @@ body {
   font-size: clamp(96px, 22vmin, 240px);
   font-weight: 700;
   color: #fff;
-  text-shadow: 0 6px 30px rgba(2, 6, 23, 0.6);
+  text-shadow: 0 6px 30px rgba(9, 9, 11, 0.6);
   line-height: 1;
-  animation: countdown-pop 1s ease-out forwards;
+  animation: countdown-pop 0.45s ease-out forwards;
 }
 
 .countdown-go {
@@ -138,21 +137,17 @@ body {
 
 @keyframes countdown-pop {
   0% {
-    transform: scale(0.45);
+    transform: scale(0.55);
     opacity: 0;
   }
-  25% {
-    transform: scale(1);
+  45% {
+    transform: scale(1.08);
     opacity: 1;
   }
-  70% {
+  100% {
     transform: scale(1);
     opacity: 1;
   }
-  100% {
-    transform: scale(1.25);
-    opacity: 0;
-  }
 }
 
 .countdown-hint {
@@ -163,7 +158,7 @@ body {
   color: rgba(255, 255, 255, 0.85);
   font-size: 15px;
   font-weight: 500;
-  background: rgba(2, 6, 23, 0.45);
+  background: rgba(9, 9, 11, 0.45);
   padding: 8px 16px;
   border-radius: 999px;
 }
@@ -181,19 +176,21 @@ 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). */
   position: absolute;
-  top: 50%;
+  top: 0;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   padding: 9px;
   border-radius: 20px;
-  background: rgba(15, 23, 42, 0.94);
+  background: rgba(24, 24, 27, 0.94);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
+  box-shadow: 0 10px 28px rgba(9, 9, 11, 0.45);
   color: #fff;
   -webkit-user-select: none;
   user-select: none;
@@ -323,9 +320,9 @@ body {
   gap: 9px;
   padding: 14px 16px;
   border-radius: 14px;
-  background: rgba(15, 23, 42, 0.95);
+  background: rgba(24, 24, 27, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
+  box-shadow: 0 10px 28px rgba(9, 9, 11, 0.45);
   color: #fff;
 }
 
@@ -363,7 +360,7 @@ body {
   height: 100%;
   width: 40%;
   border-radius: 999px;
-  background: #6366f1;
+  background: #d4d4d8;
   animation: saving-indeterminate 1.1s ease-in-out infinite;
 }
 
@@ -375,3 +372,56 @@ body {
     margin-left: 100%;
   }
 }
+
+/* Bubble size dots (small / large), revealed on hover — desktop-style. */
+.bubble-sizes {
+  position: absolute;
+  bottom: 7%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 5px 9px;
+  border-radius: 999px;
+  background: rgba(9, 9, 11, 0.55);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+}
+
+.bubble:hover .bubble-sizes {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.bubble-size-dot {
+  border: none;
+  padding: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.55);
+  cursor: pointer;
+  transition:
+    background 0.12s ease,
+    transform 0.1s ease;
+}
+
+.bubble-size-dot:hover {
+  background: #fff;
+}
+
+.bubble-size-dot:active {
+  transform: scale(0.9);
+}
+
+.bubble-size-sm {
+  width: 8px;
+  height: 8px;
+}
+
+.bubble-size-lg {
+  width: 13px;
+  height: 13px;
+}

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,7 +160,9 @@ async function initBubble(): Promise<void> {
     video.srcObject = stream;
     ring.appendChild(video);
     await video.play().catch(() => undefined);
-  } catch {
+    console.log("[clips-overlay] camera bubble live");
+  } catch (err) {
+    console.warn("[clips-overlay] camera getUserMedia failed:", err);
     const empty = document.createElement("div");
     empty.className = "bubble-empty";
     empty.innerHTML = ICONS.cameraOff;
@@ -148,14 +211,20 @@ function initCountdown(): void {
   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 => {
-    const fallback =
-      Number(params.get("seconds") || String(COUNTDOWN_FALLBACK)) ||
-      COUNTDOWN_FALLBACK;
-    const endsAt =
-      state.countdownEndsAtMs > 0
-        ? state.countdownEndsAtMs
-        : Date.now() + fallback * 1000;
+    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") {

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"