@agent-native/core 0.69.0 → 0.70.1

package/corpus/templates/clips/app/components/player/video-player.tsx

@@ -232,7 +232,10 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
     const [currentMs, setCurrentMs] = useState(startMs ?? 0);
     const [loomStartMs, setLoomStartMs] = useState<number | null>(null);
     const [volume, setVolume] = useState(1);
-    const [muted, setMuted] = useState(false);
+    // Autoplaying players (e.g. the Slack unfurl embed, `?autoplay=1`) must
+    // start muted or the browser blocks autoplay with a NotAllowedError. The
+    // share page (no autoplay) keeps full sound.
+    const [muted, setMuted] = useState(() => !!autoPlay);
     const [speed, setSpeed] = useState(() =>
       readPlaybackSpeedPreference(defaultSpeed),
     );
@@ -354,18 +357,30 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       setIsPreparing(false);
     }, []);
 
-    const rejectPlayAttempt = useCallback((attemptId: number, err: unknown) => {
-      if (attemptId !== playAttemptIdRef.current) return;
-      playAttemptPendingRef.current = false;
-      setIsPlayPending(false);
-      setIsBuffering(false);
-
-      const name = err instanceof DOMException ? err.name : "";
-      if (name === "AbortError") return;
-
-      console.warn("[clips] playback start failed", err);
-      setPlayError("Could not start playback. Try again.");
-    }, []);
+    const rejectPlayAttempt = useCallback(
+      (attemptId: number, err: unknown) => {
+        if (attemptId !== playAttemptIdRef.current) return;
+        playAttemptPendingRef.current = false;
+        setIsPlayPending(false);
+        setIsBuffering(false);
+
+        const name = err instanceof DOMException ? err.name : "";
+        // AbortError: a newer load/seek superseded this play() — not a failure.
+        // NotAllowedError: the browser blocked autoplay because there was no
+        // user gesture (this is what happens inside Slack's cross-origin unfurl
+        // iframe). Both are expected — fall back to the click-to-play overlay
+        // instead of showing a scary "Could not start playback" message.
+        if (name === "AbortError" || name === "NotAllowedError") return;
+
+        console.warn("[clips] playback start failed", err);
+        reportPlaybackIssue("play-start-failed", err, videoRef.current, {
+          recordingId,
+          autoPlay: !!autoPlay,
+        });
+        setPlayError("Could not start playback. Try again.");
+      },
+      [autoPlay, recordingId],
+    );
 
     const attachPlayPromise = useCallback(
       (playPromise: Promise<void> | undefined, attemptId: number) => {
@@ -882,7 +897,10 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       <div
         ref={containerRef}
         className={cn(
-          "relative bg-black overflow-hidden select-none group",
+          // `@container` lets the center play button scale with the player
+          // width (see CenterPlaybackOverlay) so it isn't oversized inside
+          // small embeds like the Slack unfurl iframe.
+          "relative @container bg-black overflow-hidden select-none group",
           theaterMode ? "fixed inset-0 z-40" : "rounded-xl",
           className,
         )}
@@ -910,12 +928,19 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
             ref={videoRef}
             src={activeVideoSrc}
             poster={resolveLocalUrl(thumbnailUrl)}
-            crossOrigin="anonymous"
+            // `crossOrigin` is only needed so the owner's canvas thumbnail
+            // capture isn't tainted. For everyone else (viewers, and the Slack
+            // unfurl embed) it adds nothing — but if the player is ever framed
+            // into a sandboxed/opaque-origin context (Slack double-iframes the
+            // embed), the resulting CORS check on the media bytes fails and the
+            // video won't load. Scope it to owners so embeds load cleanly.
+            crossOrigin={role === "owner" ? "anonymous" : undefined}
             className={cn(
               "w-full h-full",
               cover ? "object-cover" : "object-contain",
             )}
             autoPlay={autoPlay}
+            muted={muted}
             playsInline
             onLoadStart={() => {
               setCanPlay(false);
@@ -1014,12 +1039,26 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
               setIsBuffering(false);
               onEnded?.();
             }}
-            onError={() => {
+            onError={(e) => {
               playAttemptPendingRef.current = false;
               setIsPlayPending(false);
               setIsBuffering(false);
               setIsPreparing(false);
-              setPlayError("Video could not be loaded.");
+              const desc = describeMediaError(e.currentTarget.error);
+              reportPlaybackIssue(
+                "media-load-failed",
+                e.currentTarget.error,
+                e.currentTarget,
+                {
+                  recordingId,
+                  videoSrc: activeVideoSrc,
+                },
+              );
+              setPlayError(
+                desc
+                  ? `Video could not be loaded (${desc.label}).`
+                  : "Video could not be loaded.",
+              );
             }}
             onVolumeChange={(e) => {
               setVolume(e.currentTarget.volume);
@@ -1039,7 +1078,17 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
             durationMs={resolvedDurationMs}
             speed={speed}
             playError={playError}
-            onPlay={requestPlay}
+            onPlay={() => {
+              // An explicit click means the user wants to watch with sound, so
+              // undo the muted-autoplay default (see `muted` state) before we
+              // start playback.
+              const v = videoRef.current;
+              if (v && v.muted) {
+                v.muted = false;
+                setMuted(false);
+              }
+              requestPlay();
+            }}
             onSpeedChange={applySpeed}
             menuPortalContainer={fullscreenMenuContainer}
           />
@@ -1193,9 +1242,9 @@ function CenterPlaybackOverlay({
                 e.stopPropagation();
                 onPlay();
               }}
-              className="pointer-events-auto flex h-24 w-24 items-center justify-center rounded-full bg-white text-black shadow-2xl ring-1 ring-white/35 transition-transform duration-150 hover:scale-105 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+              className="pointer-events-auto flex h-[clamp(3rem,13cqw,6rem)] w-[clamp(3rem,13cqw,6rem)] items-center justify-center rounded-full bg-white text-black shadow-2xl ring-1 ring-white/35 transition-transform duration-150 hover:scale-105 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-black"
             >
-              <IconPlayerPlay className="ml-1 h-12 w-12 fill-current" />
+              <IconPlayerPlay className="ml-[6%] h-[clamp(1.5rem,6.5cqw,3rem)] w-[clamp(1.5rem,6.5cqw,3rem)] fill-current" />
             </button>
 
             <div
@@ -1302,6 +1351,87 @@ function formatSpeedLabel(rate: number): string {
   return `${Number.isInteger(rate) ? rate : rate.toFixed(1)}x`;
 }
 
+/** Human-readable label for an HTMLMediaElement `error` (MediaError). */
+function describeMediaError(
+  err: MediaError | null,
+): { code: number; label: string } | null {
+  if (!err) return null;
+  const labels: Record<number, string> = {
+    1: "load aborted",
+    2: "network error",
+    3: "decode error",
+    4: "format not supported",
+  };
+  return { code: err.code, label: labels[err.code] ?? "unknown error" };
+}
+
+/**
+ * Surface a playback failure to the console and Sentry with enough context to
+ * debug it remotely — e.g. when a clip "could not be loaded" inside a Slack
+ * unfurl where there's no visible console. Best-effort; never throws. Expected,
+ * benign cases (AbortError / autoplay-blocked NotAllowedError) are filtered out
+ * by the callers and never reach here.
+ */
+function reportPlaybackIssue(
+  reason: string,
+  err: unknown,
+  video: HTMLVideoElement | null,
+  extra: Record<string, unknown>,
+) {
+  const mediaError =
+    err && typeof err === "object" && "code" in err
+      ? (err as MediaError)
+      : (video?.error ?? null);
+  const name =
+    err instanceof DOMException || err instanceof Error ? err.name : undefined;
+  const message = err instanceof Error ? err.message : undefined;
+
+  let videoHost: string | undefined;
+  try {
+    if (video?.currentSrc) videoHost = new URL(video.currentSrc).host;
+  } catch {
+    // ignore unparseable src
+  }
+  let inIframe = false;
+  try {
+    inIframe = typeof window !== "undefined" && window.self !== window.top;
+  } catch {
+    inIframe = true;
+  }
+
+  const detail = {
+    ...extra,
+    errorName: name,
+    errorMessage: message,
+    mediaErrorCode: mediaError?.code,
+    mediaErrorLabel: describeMediaError(mediaError)?.label,
+    videoHost,
+    inIframe,
+    readyState: video?.readyState,
+    networkState: video?.networkState,
+  };
+  console.warn(`[clips] playback issue: ${reason}`, detail);
+
+  try {
+    const reportable =
+      err instanceof Error
+        ? err
+        : new Error(
+            `clips playback ${reason}: ${message ?? name ?? describeMediaError(mediaError)?.label ?? "unknown"}`,
+          );
+    captureClientException(reportable, {
+      tags: {
+        area: "clips-player",
+        playbackIssue: reason,
+        inIframe: String(inIframe),
+      },
+      extra: detail,
+    });
+  } catch {
+    // Diagnostics must never break playback UI.
+  }
+}
+
 function formatWatchDuration(ms: number): string {
   if (!Number.isFinite(ms) || ms <= 0) return "0 sec";
   const totalSeconds = Math.max(1, Math.round(ms / 1000));

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/components/recorder/pre-record-panel.tsx

@@ -308,8 +308,9 @@ export function PreRecordPanel({
   }, [cameraId, cameras]);
 
   // Camera-only mode needs a camera — coerce a restored "off" sentinel to
-  // "default" so Start doesn't forward it as an exact deviceId (covers the
-  // ?mode=camera deep-link/restore path the mode buttons already handle).
+  // "default" so Start doesn't forward it as an exact deviceId. This is the
+  // single owner of that coercion: it covers both the mode-button click and the
+  // ?mode=camera deep-link/restore path.
   useEffect(() => {
     if (mode === "camera" && cameraId === NO_CAMERA_DEVICE_ID) {
       setCameraId("default");
@@ -583,15 +584,10 @@ export function PreRecordPanel({
               <button
                 key={opt.value}
                 type="button"
-                onClick={() => {
-                  chooseMode(opt.value);
-                  if (
-                    opt.value === "camera" &&
-                    cameraId === NO_CAMERA_DEVICE_ID
-                  ) {
-                    chooseCamera("default");
-                  }
-                }}
+                // Camera-only mode needs a camera; the [mode, cameraId] effect
+                // below coerces a restored "off" sentinel to "default" for both
+                // this click and the ?mode=camera deep-link path.
+                onClick={() => chooseMode(opt.value)}
                 className={cn(
                   "flex min-h-20 min-w-0 flex-col justify-between rounded-xl border p-3 text-left transition-colors",
                   active

package/corpus/templates/clips/app/components/recorder/recorder-engine.ts

@@ -420,6 +420,13 @@ export class RecorderEngine {
    */
   private cameraDisconnectNotified = false;
   private micDisconnectNotified = false;
+  /**
+   * Set when a stale/unavailable `micDeviceId` forces a fallback to the system
+   * default mic during `acquire()`. The recording then runs on the default
+   * device, so live transcription (which can only ever use the default mic) is
+   * safe to start even though a specific mic was originally requested.
+   */
+  private micFellBackToDefault = false;
 
   private state: RecorderState = "idle";
 
@@ -448,10 +455,30 @@ export class RecorderEngine {
     return this.cameraStream;
   }
 
+  /**
+   * True when `acquire()` had to fall back from the requested `micDeviceId` to
+   * the system default mic. Lets the UI start live transcription for this
+   * session even though a specific mic was originally selected.
+   */
+  didMicFallBackToDefault(): boolean {
+    return this.micFellBackToDefault;
+  }
+
   getPreviewStream(): MediaStream | null {
     return this.previewStream;
   }
 
+  /**
+   * The composited screen+camera canvas stream that actually gets recorded
+   * (screen with the camera bubble drawn in), or `null` for screen-only /
+   * camera-only modes where the visible preview already matches the recording.
+   * Used to grab a thumbnail that includes the presenter's camera — the raw
+   * preview stream in screen+camera mode is screen-only and has no face.
+   */
+  getCompositeStream(): MediaStream | null {
+    return this.cameraComposite?.stream ?? null;
+  }
+
   getElapsedMs(): number {
     if (this.startedAtMs === null) return 0;
     const now = performance.now();
@@ -515,6 +542,7 @@ export class RecorderEngine {
     const wantsCamera =
       this.opts.mode === "camera" || this.opts.mode === "screen+camera";
     const wantsMic = this.opts.micDeviceId !== NO_MIC_DEVICE_ID;
+    this.micFellBackToDefault = false;
 
     try {
       if (!isBrowserSecureContext()) {
@@ -634,6 +662,9 @@ export class RecorderEngine {
                 audio: voiceFocusedAudioConstraints(),
                 video: false,
               });
+              // Recording is now on the system default mic, so live
+              // transcription can run for this session after all.
+              this.micFellBackToDefault = true;
             } catch (retryErr) {
               throw this.friendlyError(retryErr, "microphone");
             }

package/corpus/templates/clips/app/components/sharing/slack-share-hint.tsx

@@ -0,0 +1,71 @@
+import { IconBrandSlack } from "@tabler/icons-react";
+import { appPath, useActionQuery } from "@agent-native/core/client";
+
+interface SlackInstallation {
+  status: string;
+}
+
+interface SlackInstallationsResponse {
+  oauthConfigured: boolean;
+  installations: SlackInstallation[];
+}
+
+/**
+ * Contextual nudge shown in the share popover's Link tab for public clips.
+ *
+ * A public Clips link unfurls into a playable video when pasted in a connected
+ * Slack workspace, but that integration is otherwise only discoverable in
+ * Settings. When a workspace is connected we confirm the payoff; when none is,
+ * clip owners/admins get a one-click link to connect one in Settings.
+ *
+ * Only rendered for public clips (the caller gates on `isPublic`), so the
+ * `list-slack-installations` query never runs for private shares.
+ */
+export function SlackShareHint({ canManage }: { canManage: boolean }) {
+  const slack = useActionQuery<SlackInstallationsResponse>(
+    "list-slack-installations",
+    undefined,
+    { retry: false },
+  );
+
+  const data = slack.data;
+  const connected =
+    data?.installations?.some((i) => i.status === "connected") ?? false;
+
+  if (connected) {
+    return (
+      <div className="flex items-center gap-2.5 rounded-md border border-border bg-muted/40 px-3 py-2">
+        <IconBrandSlack className="h-4 w-4 shrink-0 text-muted-foreground" />
+        <div className="min-w-0">
+          <div className="text-xs font-medium">Plays inline in Slack</div>
+          <p className="text-[11px] text-muted-foreground">
+            Paste this link in any connected workspace to play it inline.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // No workspace connected yet. Connecting needs the deployment's Slack OAuth
+  // credentials, so only point managers at Settings when it's actually set up —
+  // otherwise the Connect button there is disabled and the link is a dead end.
+  // While the query is loading or errored, `data` is undefined and we render
+  // nothing rather than guess at the workspace state.
+  if (!data || !canManage || !data.oauthConfigured) return null;
+
+  return (
+    <a
+      href={appPath("/settings#slack")}
+      className="flex items-center gap-2.5 rounded-md border border-border px-3 py-2 transition-colors hover:bg-muted/50"
+    >
+      <IconBrandSlack className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <div className="min-w-0 flex-1">
+        <div className="text-xs font-medium">Make it play inline in Slack</div>
+        <p className="text-[11px] text-muted-foreground">
+          Connect a workspace so this link unfurls as a video.
+        </p>
+      </div>
+      <span className="shrink-0 text-xs font-medium text-primary">Connect</span>
+    </a>
+  );
+}

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/app/root.tsx

@@ -21,6 +21,7 @@ import {
 } from "@agent-native/core/client";
 import { IconCheck, IconSun, IconMoon } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
+import changelog from "../CHANGELOG.md?raw";
 import { Toaster } from "@/components/ui/sonner";
 import { Button } from "@/components/ui/button";
 import {
@@ -258,7 +259,12 @@ function AppContent() {
       {standalonePublic ? null : <DbSyncSetup />}
       {standalonePublic ? null : <ClipsExtensionAuthBridge />}
       {standalonePublic ? null : (
-        <CommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen}>
+        <CommandMenu
+          open={cmdkOpen}
+          onOpenChange={setCmdkOpen}
+          changelog={changelog}
+          changelogKey="clips"
+        >
           <CommandMenu.Group heading="Actions">
             <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
           </CommandMenu.Group>