@agent-native/core 0.69.0 → 0.70.1

package/corpus/templates/clips/app/routes/_app.settings._index.tsx

@@ -16,10 +16,18 @@ import {
   appApiPath,
   openBuilderConnectPopup,
   useActionQuery,
+  ChangelogSettingsCard,
 } from "@agent-native/core/client";
+import changelog from "../../CHANGELOG.md?raw";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { PageHeader } from "@/components/library/page-header";
@@ -389,6 +397,8 @@ export default function SettingsIndexRoute() {
           Preferences and connected services for this Clips workspace.
         </p>
 
+        <ChangelogSettingsCard markdown={changelog} />
+
         <Card id="video-storage" className="scroll-mt-16">
           <CardHeader>
             <CardTitle className="text-base flex items-center gap-2">
@@ -462,6 +472,10 @@ export default function SettingsIndexRoute() {
               <IconBrandSlack className="size-4 text-primary" />
               Agent-Native Clips for Slack
             </CardTitle>
+            <CardDescription>
+              Share a public clip, paste the link in Slack, and it plays inline
+              — no extra steps for viewers. Connect each workspace once.
+            </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="flex flex-col gap-3 rounded-md border border-border bg-accent/30 px-3 py-3 sm:flex-row sm:items-center sm:justify-between">

package/corpus/templates/clips/app/routes/record.tsx

@@ -486,6 +486,65 @@ function captureThumbnailFromPreview(
     });
 }
 
+/** Resolve once the off-screen video has a decoded frame, or after a timeout. */
+function waitForVideoFrame(
+  video: HTMLVideoElement,
+  timeoutMs: number,
+): Promise<void> {
+  if (video.videoWidth > 0 && video.readyState >= 2) return Promise.resolve();
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      video.removeEventListener("loadeddata", onReady);
+      video.removeEventListener("canplay", onReady);
+      clearTimeout(timer);
+      resolve();
+    };
+    const onReady = () => {
+      if (video.videoWidth > 0 && video.readyState >= 2) finish();
+    };
+    video.addEventListener("loadeddata", onReady);
+    video.addEventListener("canplay", onReady);
+    const timer = setTimeout(finish, timeoutMs);
+    onReady();
+  });
+}
+
+/**
+ * Capture a thumbnail from a MediaStream that isn't bound to a visible element
+ * — used for the screen+camera composite so the thumbnail includes the camera
+ * bubble. Best effort: if it misses, the player's backfill path (which reads
+ * the recorded file, also composited) still produces a face thumbnail.
+ */
+function captureThumbnailFromStream(
+  stream: MediaStream,
+  recordingId: string,
+): void {
+  const video = document.createElement("video");
+  video.srcObject = stream;
+  video.muted = true;
+  video.playsInline = true;
+  void (async () => {
+    try {
+      await video.play().catch(() => {});
+      await waitForVideoFrame(video, 1500);
+      const blob = await captureVideoThumbnailBlob(video);
+      if (blob) await uploadRecordingThumbnail(recordingId, blob);
+    } catch {
+      // best effort — the player has a backfill path if this misses.
+    } finally {
+      try {
+        video.pause();
+      } catch {
+        // ignore
+      }
+      video.srcObject = null;
+    }
+  })();
+}
+
 interface PendingRecording {
   id: string;
   uploadChunkUrl: string;
@@ -1024,7 +1083,14 @@ export default function RecordRoute() {
         // chose a specific mic, do not start a parallel system-default mic
         // session for instant transcription; the recorded audio still uses
         // the exact selected device and can be transcribed after upload.
-        if (wantsMic && !opts.micDeviceId && liveTranscription.supported) {
+        //
+        // The one exception is when a stale saved mic forced the engine to
+        // fall back to the system default during acquire(): the recording is
+        // now on the default device, so live transcription would use the same
+        // mic and is safe to start.
+        const usingDefaultMic =
+          !opts.micDeviceId || engine.didMicFallBackToDefault();
+        if (wantsMic && usingDefaultMic && liveTranscription.supported) {
           liveTranscription.start();
         }
 
@@ -1673,10 +1739,17 @@ export default function RecordRoute() {
     }
     setUiState("uploading");
     try {
-      // Capture a still-frame thumbnail from the preview while the stream is
-      // still live — otherwise the library would show a blank card until the
-      // owner opens the recording and triggers the player's backfill path.
-      captureThumbnailFromPreview(previewVideoRef.current, pending.id);
+      // Capture a still-frame thumbnail while the stream is still live —
+      // otherwise the library would show a blank card until the owner opens the
+      // recording and triggers the player's backfill path. In screen+camera
+      // mode the visible preview is screen-only, so grab the composited stream
+      // (screen + camera bubble) to keep the presenter's face in the thumbnail.
+      const compositeStream = engine.getCompositeStream();
+      if (compositeStream) {
+        captureThumbnailFromStream(compositeStream, pending.id);
+      } else {
+        captureThumbnailFromPreview(previewVideoRef.current, pending.id);
+      }
 
       // Stop live transcription and save the native web transcript before the
       // engine finalizes. This gives the recording an instant transcript

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -1,6 +1,7 @@
 import {
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
   type ReactNode,
@@ -22,6 +23,7 @@ import {
   agentNativePath,
   appBasePath,
   appPath,
+  track,
   useSession,
   AgentPanel,
   getBrowserTabId,
@@ -70,6 +72,10 @@ import {
   clipsSharePageTitle,
   displayRecordingTitle,
 } from "../../shared/share-meta";
+import {
+  buildSignupAttributionQuery,
+  readShareAttribution,
+} from "../../shared/share-attribution";
 
 type SharePageMetaRecording = {
   id: string;
@@ -274,6 +280,61 @@ export default function ShareRoute() {
   const loaderData = useLoaderData<typeof loader>() as SharePageLoaderData;
   const { shareId } = useParams<{ shareId: string }>();
   const navigate = useNavigate();
+
+  // Viral attribution: read the `ref`/`via` the visitor arrived on (the tagged
+  // share link) so we can fire funnel events and forward attribution into the
+  // signup URL even when cookies are blocked or `document.referrer` is empty.
+  const attribution = useMemo(
+    () =>
+      readShareAttribution(
+        typeof window === "undefined" ? "" : window.location.search,
+      ),
+    [],
+  );
+  const recordingId = shareId ?? "";
+
+  // share_cta_click — fired alongside (never instead of) the real navigation.
+  // `track` is non-throwing, but guard anyway so tracking can never break a CTA.
+  const fireShareCtaClick = useCallback(
+    (cta: "signup" | "download" | "try_clips" | "signin") => {
+      try {
+        void track("share_cta_click", {
+          surface: "clip",
+          recording_id: recordingId,
+          cta,
+          ref: attribution.ref,
+          via: attribution.via,
+        });
+      } catch {
+        // Never let analytics break a CTA.
+      }
+    },
+    [recordingId, attribution.ref, attribution.via],
+  );
+
+  // Forward attribution into the signup URL so it survives blocked cookies.
+  const signupHref = appPath(
+    `/signup?${buildSignupAttributionQuery(attribution.via)}`,
+  );
+
+  // share_view — fire once when the public share page mounts. The ref guard
+  // prevents double-fire across re-renders / StrictMode double-invocation.
+  const shareViewFiredRef = useRef(false);
+  useEffect(() => {
+    if (shareViewFiredRef.current) return;
+    shareViewFiredRef.current = true;
+    try {
+      void track("share_view", {
+        surface: "clip",
+        recording_id: recordingId,
+        ref: attribution.ref,
+        via: attribution.via,
+      });
+    } catch {
+      // Never let analytics break the page render.
+    }
+  }, [recordingId, attribution.ref, attribution.via]);
+
   const playerRef = useRef<VideoPlayerHandle | null>(null);
   const [password, setPassword] = useState<string | null>(() => {
     if (typeof window === "undefined" || !shareId) return null;
@@ -690,7 +751,11 @@ export default function ShareRoute() {
               </Button>
             ) : session ? null : (
               <Button variant="ghost" size="sm" asChild>
-                <a href={appPath("/")} className="gap-1.5">
+                <a
+                  href={appPath("/")}
+                  className="gap-1.5"
+                  onClick={() => fireShareCtaClick("try_clips")}
+                >
                   Try Clips
                   <IconExternalLink className="h-3.5 w-3.5" />
                 </a>
@@ -879,7 +944,10 @@ export default function ShareRoute() {
                 browserTabId={getBrowserTabId()}
               />
             ) : (
-              <PublicAgentEmptyState />
+              <PublicAgentEmptyState
+                signupHref={signupHref}
+                onCtaClick={fireShareCtaClick}
+              />
             )}
           </TabsContent>
           <TabsContent
@@ -932,6 +1000,7 @@ export default function ShareRoute() {
           if (!open) setSignInIntent(null);
         }}
         intent={signInIntent ?? "comment"}
+        onSignIn={() => fireShareCtaClick("signin")}
       />
     </div>
   );
@@ -947,7 +1016,13 @@ function sanitizeFilename(name: string): string {
   );
 }
 
-function PublicAgentEmptyState() {
+function PublicAgentEmptyState({
+  signupHref,
+  onCtaClick,
+}: {
+  signupHref: string;
+  onCtaClick: (cta: "signup" | "download" | "try_clips" | "signin") => void;
+}) {
   const [platform, setPlatform] = useState<ViewerPlatform | null>(null);
 
   useEffect(() => {
@@ -1005,12 +1080,18 @@ function PublicAgentEmptyState() {
         Loom alternative
       </p>
       <div className="mt-7 flex w-full max-w-[220px] flex-col gap-2">
-        <CaptureInstallButton className="w-full gap-2" align="center">
+        <CaptureInstallButton
+          className="w-full gap-2"
+          align="center"
+          onClick={() => onCtaClick("download")}
+        >
           <IconDownload className="h-4 w-4" />
           {downloadLabel}
         </CaptureInstallButton>
         <Button asChild variant="outline" className="w-full">
-          <a href={appPath("/signup")}>Sign up</a>
+          <a href={signupHref} onClick={() => onCtaClick("signup")}>
+            Sign up
+          </a>
         </Button>
       </div>
     </div>

package/corpus/templates/clips/changelog/2026-06-23-clips-shared-in-slack-no-longer-show-a-could-not-start-playb.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-23
+---
+
+Clips shared in Slack no longer show a 'Could not start playback' error in the inline preview — they autoplay muted where allowed and play on click otherwise

package/corpus/templates/clips/changelog/2026-06-23-made-the-play-button-on-shared-and-embedded-clips-scale-with.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-23
+---
+
+Made the play button on shared and embedded clips scale with the player size so it's no longer oversized in small previews like Slack unfurls

package/corpus/templates/clips/changelog/2026-06-23-public-clip-share-links-now-show-whether-they-ll-play-inline.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-23
+---
+
+Public clip share links now show whether they'll play inline in Slack, with a one-click link to connect a workspace

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-screen-camera-recordings-now-keep-the-presenter-s-face-in-th.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-23
+---
+
+Screen + camera recordings now keep the presenter's face in the thumbnail shown on the library card, video poster, and Slack unfurl

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": [