@agent-native/core 0.70.0 → 0.70.1

package/corpus/templates/clips/app/components/recorder/countdown-overlay.tsx

@@ -1,13 +1,12 @@
-import { useEffect, useRef, useState } from "react";
-import { IconPlayerPause, IconPlayerPlay, IconX } from "@tabler/icons-react";
-import { Button } from "@/components/ui/button";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { IconPlayerSkipForward, IconX } from "@tabler/icons-react";
 
 export interface CountdownOverlayProps {
   /** Total seconds to count down from. Default 3. */
   seconds?: number;
-  /** Called when the countdown reaches 1. */
+  /** Called when the countdown reaches 1 (drives the recording-start cue). */
   onOneSecond?: () => void;
-  /** Called when the countdown reaches 0. */
+  /** Called when the countdown reaches 0 (or the user skips). */
   onComplete: () => void;
   /** Called when the user cancels before recording begins. */
   onCancel: () => void;
@@ -20,77 +19,102 @@ export function CountdownOverlay({
   onCancel,
 }: CountdownOverlayProps) {
   const [remaining, setRemaining] = useState(seconds);
-  const [paused, setPaused] = useState(false);
-  // Ensure onComplete fires exactly once for the lifetime of the countdown,
-  // even if its identity changes while `remaining` is already 0 (which would
-  // otherwise re-run this effect and call it again).
+  // Ensure each callback fires exactly once for the lifetime of the countdown,
+  // even if identities change or the user skips while the timer is mid-flight.
   const hasCompletedRef = useRef(false);
   const hasPlayedOneSecondCueRef = useRef(false);
 
-  useEffect(() => {
-    if (remaining !== 1 || hasPlayedOneSecondCueRef.current) return;
+  const playOneSecondCue = useCallback(() => {
+    if (hasPlayedOneSecondCueRef.current) return;
     hasPlayedOneSecondCueRef.current = true;
     onOneSecond?.();
-  }, [remaining, onOneSecond]);
+  }, [onOneSecond]);
+
+  const complete = useCallback(() => {
+    if (hasCompletedRef.current) return;
+    hasCompletedRef.current = true;
+    onComplete();
+  }, [onComplete]);
+
+  // Skip the rest of the countdown and start recording immediately. Still play
+  // the start cue so the user gets the same audible confirmation they'd get if
+  // the countdown had run to zero.
+  const handleSkip = useCallback(() => {
+    playOneSecondCue();
+    complete();
+  }, [playOneSecondCue, complete]);
+
+  useEffect(() => {
+    if (remaining === 1) playOneSecondCue();
+  }, [remaining, playOneSecondCue]);
 
   useEffect(() => {
     if (remaining <= 0) {
-      if (!hasCompletedRef.current) {
-        hasCompletedRef.current = true;
-        onComplete();
-      }
+      complete();
       return;
     }
-    if (paused) return;
     const id = window.setTimeout(() => setRemaining((v) => v - 1), 1000);
     return () => window.clearTimeout(id);
-  }, [remaining, onComplete, paused]);
+  }, [remaining, complete]);
+
+  // Keyboard parity with the desktop overlay: Enter starts now, Esc cancels.
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleSkip();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [handleSkip, onCancel]);
+
+  const controlClasses =
+    "flex h-16 w-16 items-center justify-center rounded-full border border-white/25 bg-white/5 text-white/90 shadow-lg backdrop-blur transition-colors hover:border-white/60 hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70";
 
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm"
+      className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-black/70 backdrop-blur-sm"
       aria-live="polite"
       aria-label={`Recording starts in ${remaining}`}
     >
-      <div className="flex flex-col items-center gap-6">
+      <div className="flex items-center gap-10 sm:gap-14">
+        <button
+          type="button"
+          onClick={onCancel}
+          aria-label="Cancel recording"
+          className={controlClasses}
+        >
+          <IconX className="h-7 w-7" stroke={1.75} />
+        </button>
+
         <div
           key={remaining}
-          className="flex h-48 w-48 items-center justify-center rounded-full text-[120px] font-bold text-white shadow-2xl"
+          className="flex h-44 w-44 items-center justify-center rounded-full text-[112px] font-bold leading-none text-white shadow-2xl duration-200 animate-in zoom-in-75 fade-in"
           style={{
             background:
-              "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 60%), hsl(var(--primary))",
+              "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%), hsl(var(--primary))",
           }}
         >
           {remaining > 0 ? remaining : "Go"}
         </div>
 
-        <div className="flex items-center gap-2 rounded-full border border-white/15 bg-black/40 p-1.5 shadow-2xl backdrop-blur">
-          <Button
-            type="button"
-            variant="secondary"
-            size="sm"
-            className="rounded-full"
-            onClick={() => setPaused((value) => !value)}
-          >
-            {paused ? (
-              <IconPlayerPlay className="h-4 w-4" />
-            ) : (
-              <IconPlayerPause className="h-4 w-4" />
-            )}
-            {paused ? "Resume" : "Pause"}
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="rounded-full border-white/20 bg-white/10 text-white hover:bg-white/20 hover:text-white"
-            onClick={onCancel}
-          >
-            <IconX className="h-4 w-4" />
-            Cancel
-          </Button>
-        </div>
+        <button
+          type="button"
+          onClick={handleSkip}
+          aria-label="Skip countdown and start recording now"
+          className={controlClasses}
+        >
+          <IconPlayerSkipForward className="h-7 w-7" stroke={1.75} />
+        </button>
       </div>
+
+      <p className="absolute bottom-16 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs font-medium text-white/70 backdrop-blur">
+        Esc to cancel · Enter to start now
+      </p>
     </div>
   );
 }

package/corpus/templates/clips/app/lib/countdown-audio-cue.ts

@@ -8,35 +8,53 @@ const noopCountdownAudioCue: CountdownAudioCue = {
   cleanup() {},
 };
 
+/**
+ * A soft, modern "ready" chime: a rising two-note (D5 → A5) with a faint high
+ * shimmer. Each voice has a fast attack and a smooth exponential tail so it
+ * reads as a gentle confirmation rather than a harsh beep. Kept under ~380ms so
+ * it lands cleanly just before capture.
+ */
 function scheduleCountdownTone(ctx: AudioContext): Promise<void> {
   return new Promise<void>((resolve) => {
-    const startedAt = ctx.currentTime + 0.005;
-    const oscillator = ctx.createOscillator();
-    const gain = ctx.createGain();
+    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
+    ];
 
-    oscillator.type = "sine";
-    oscillator.frequency.setValueAtTime(880, startedAt);
-    oscillator.frequency.exponentialRampToValueAtTime(660, startedAt + 0.14);
+    let lastStop = t0;
+    for (const voice of voices) {
+      const startAt = t0 + voice.at;
+      const stopAt = startAt + voice.dur;
+      lastStop = Math.max(lastStop, stopAt);
 
-    gain.gain.setValueAtTime(0.0001, startedAt);
-    gain.gain.exponentialRampToValueAtTime(0.07, startedAt + 0.018);
-    gain.gain.exponentialRampToValueAtTime(0.0001, startedAt + 0.18);
+      const oscillator = ctx.createOscillator();
+      oscillator.type = "sine";
+      oscillator.frequency.setValueAtTime(voice.freq, startAt);
 
-    oscillator.connect(gain);
-    gain.connect(ctx.destination);
+      const gain = ctx.createGain();
+      gain.gain.setValueAtTime(0.0001, startAt);
+      gain.gain.exponentialRampToValueAtTime(voice.peak, startAt + 0.012);
+      gain.gain.exponentialRampToValueAtTime(0.0001, stopAt);
+
+      oscillator.connect(gain);
+      gain.connect(ctx.destination);
+
+      oscillator.start(startAt);
+      oscillator.stop(stopAt + 0.02);
+    }
 
     let resolved = false;
     const finish = () => {
       if (resolved) return;
       resolved = true;
-      window.clearTimeout(timer);
       resolve();
     };
-    const timer = window.setTimeout(finish, 500);
-    oscillator.addEventListener("ended", finish, { once: true });
-
-    oscillator.start(startedAt);
-    oscillator.stop(startedAt + 0.2);
+    window.setTimeout(
+      finish,
+      Math.ceil((lastStop - ctx.currentTime) * 1000) + 60,
+    );
   });
 }
 

package/corpus/templates/clips/changelog/2026-06-23-removed-select-button-from-library-hover-a-clip-to-select-it.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-23
+---
+
+Removed Select button from library — hover a clip to select it

package/corpus/templates/clips/changelog/2026-06-23-shared-video-links-now-play-for-anyone-without-signing-in.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-23
+---
+
+Shared video links now play for anyone without signing in

package/corpus/templates/clips/changelog/2026-06-23-skip-or-cancel-the-recording-countdown-with-buttons-beside-t.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-23
+---
+
+Skip or cancel the recording countdown with buttons beside the number

package/corpus/templates/clips/changelog/2026-06-23-the-desktop-camera-bubble-now-looks-sharp-the-instant-it-ope.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-23
+---
+
+The desktop camera bubble now looks sharp the instant it opens instead of staying blurry for the first several seconds

package/corpus/templates/clips/changelog/2026-06-23-the-desktop-recording-widget-now-grows-downward-only-when-yo.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-23
+---
+
+The desktop recording widget now grows downward only when you hover it, so its buttons stay in place instead of shifting up under your cursor

package/corpus/templates/clips/changelog/2026-06-23-the-recording-start-sound-is-now-a-softer-more-modern-chime.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-23
+---
+
+The recording-start sound is now a softer, more modern chime

package/corpus/templates/clips/chrome-extension/public/manifest.json

@@ -18,18 +18,27 @@
     "32": "icons/icon-32.png",
     "128": "icons/icon-128.png"
   },
-  "permissions": [
-    "activeTab",
-    "debugger",
-    "offscreen",
-    "storage",
-    "tabCapture"
-  ],
+  "permissions": ["activeTab", "debugger", "offscreen", "scripting", "storage"],
   "host_permissions": [
     "https://clips.agent-native.com/*",
     "https://forms.agent-native.com/*",
     "http://localhost/*",
-    "http://127.0.0.1/*"
+    "http://127.0.0.1/*",
+    "<all_urls>"
+  ],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["assets/content-script.js"],
+      "run_at": "document_idle",
+      "all_frames": false
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": ["src/overlay.html", "assets/*", "icons/*"],
+      "matches": ["<all_urls>"]
+    }
   ],
   "externally_connectable": {
     "matches": [