@agent-native/core 0.69.0 → 0.70.0

package/corpus/templates/calendar/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable user-facing changes to Agent-Native Calendar are documented here. Open it any
+time from the command menu (Cmd+K → "What's new") or from Settings.
+
+## 2026-06-23
+
+### Added
+
+- See what's new right inside Agent-Native Calendar — a changelog now lives in the command menu (Cmd+K) and in Settings.

package/corpus/templates/calendar/app/pages/Settings.tsx

@@ -26,8 +26,10 @@ import { useSettings, useUpdateSettings } from "@/hooks/use-settings";
 import {
   AppearancePicker,
   callAction,
+  ChangelogSettingsCard,
   type AppearancePresetId,
 } from "@agent-native/core/client";
+import changelog from "../../CHANGELOG.md?raw";
 import {
   useGoogleAuthStatus,
   useGoogleAuthUrl,
@@ -151,6 +153,8 @@ export default function Settings() {
         </p>
       </div>
 
+      <ChangelogSettingsCard markdown={changelog} />
+
       {/* Google Calendar Connection */}
       <Card>
         <CardHeader>

package/corpus/templates/calendar/app/root.tsx

@@ -22,6 +22,7 @@ import {
   useDbSync,
 } from "@agent-native/core/client";
 import { IconSun, IconMoon } from "@tabler/icons-react";
+import changelog from "../CHANGELOG.md?raw";
 import type { LinksFunction } from "react-router";
 import stylesheet from "./global.css?url";
 configureTracking({
@@ -137,7 +138,12 @@ function AppContent() {
   return (
     <>
       <DbSyncSetup />
-      <CommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen}>
+      <CommandMenu
+        open={cmdkOpen}
+        onOpenChange={setCmdkOpen}
+        changelog={changelog}
+        changelogKey="calendar"
+      >
         <CommandMenu.Group heading="Actions">
           <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
         </CommandMenu.Group>

package/corpus/templates/chat/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable user-facing changes to Chat are documented here. Open it any
+time from the command menu (Cmd+K → "What's new").
+
+## 2026-06-23
+
+### Added
+
+- See what's new right inside Chat — a changelog now lives in the command menu (Cmd+K).

package/corpus/templates/chat/app/root.tsx

@@ -14,6 +14,7 @@ import {
   useCommandMenuShortcut,
 } from "@agent-native/core/client";
 import { IconSun, IconMoon } from "@tabler/icons-react";
+import changelog from "../CHANGELOG.md?raw";
 import { Layout as AppLayout } from "@/components/layout/Layout";
 import { TAB_ID } from "@/lib/tab-id";
 import { APP_TITLE } from "@/lib/app-config";
@@ -97,7 +98,12 @@ function AppContent() {
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   return (
     <>
-      <CommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen}>
+      <CommandMenu
+        open={cmdkOpen}
+        onOpenChange={setCmdkOpen}
+        changelog={changelog}
+        changelogKey="chat"
+      >
         <CommandMenu.Group heading="Actions">
           <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
         </CommandMenu.Group>

package/corpus/templates/clips/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable user-facing changes to Clips are documented here. Open it any time
+from the command menu (Cmd+K → "What's new") or from Settings.
+
+## 2026-06-23
+
+### Added
+
+- See what's new right inside Clips — a changelog now lives in the command menu (Cmd+K) and in Settings.

package/corpus/templates/clips/app/components/player/share-dialog.tsx

@@ -9,6 +9,7 @@ import {
   appBasePath,
   appPath,
   useActionQuery,
+  useSession,
 } from "@agent-native/core/client";
 import {
   Popover,
@@ -34,8 +35,10 @@ import {
   type SharesResponse,
   type Visibility,
 } from "@/components/sharing/share-ui";
+import { SlackShareHint } from "@/components/sharing/slack-share-hint";
 import { buildAgentApiUrls } from "../../../shared/agent-context";
 import { isLoomEmbedUrl } from "../../../shared/loom";
+import { withShareAttribution } from "../../../shared/share-attribution";
 
 const PUBLIC_DESCRIPTION =
   "Anyone with the link can view — sign in to comment or react";
@@ -156,11 +159,6 @@ function ShareRecordingContent({
   hasPassword?: boolean;
   reserveCloseButton?: boolean;
 }) {
-  const shareUrl =
-    typeof window === "undefined"
-      ? ""
-      : absoluteAppUrl(`/share/${recordingId}`);
-
   const sharesQuery = useActionQuery<SharesResponse>("list-resource-shares", {
     resourceType: "recording",
     resourceId: recordingId,
@@ -168,6 +166,23 @@ function ShareRecordingContent({
 
   const data = sharesQuery.data;
   const canManage = data?.role === "owner" || data?.role === "admin";
+
+  // Attribution `via` must be a stable non-PII id, never an email. The only
+  // owner id available client-side is the *current* session's userId, which is
+  // the clip owner only when the viewer is the owner. Anyone else (e.g. a
+  // share-admin) gets an untagged `via` so we never attribute the link to the
+  // wrong person or leak the owner's email.
+  const { session } = useSession();
+  const ownerViaId =
+    data?.role === "owner" ? (session?.userId ?? undefined) : undefined;
+
+  const shareUrl =
+    typeof window === "undefined"
+      ? ""
+      : withShareAttribution(
+          absoluteAppUrl(`/share/${recordingId}`),
+          ownerViaId,
+        );
   const titleText = recordingTitle
     ? `Share "${recordingTitle}"`
     : "Share recording";
@@ -224,6 +239,7 @@ function ShareRecordingContent({
             recordingId={recordingId}
             sharesQuery={sharesQuery}
             canManage={canManage}
+            ownerViaId={ownerViaId}
           />
         </TabsContent>
       </Tabs>
@@ -321,6 +337,10 @@ function LinkTab({
         disabled={isPending || (!isPublic && canManage)}
       />
 
+      {/* Public links unfurl into a playable video in Slack; surface that here
+          (and a connect link) instead of leaving it buried in Settings. */}
+      {isPublic ? <SlackShareHint canManage={canManage} /> : null}
+
       <CopyField
         label="Share with agents"
         value={agentContextUrl}
@@ -389,10 +409,12 @@ function ClipsEmbedConfigurator({
   recordingId,
   sharesQuery,
   canManage,
+  ownerViaId,
 }: {
   recordingId: string;
   sharesQuery: SharesQuery;
   canManage: boolean;
+  ownerViaId?: string;
 }) {
   const [autoplay, setAutoplay] = useState(false);
   const [startMs, setStartMs] = useState(0);
@@ -416,8 +438,12 @@ function ClipsEmbedConfigurator({
     if (autoplay) params.push("autoplay=1");
     if (startMs > 0) params.push(`t=${Math.round(startMs / 1000)}`);
     const qs = params.length ? `?${params.join("&")}` : "";
-    return absoluteAppUrl(`/embed/${recordingId}${qs}`);
-  }, [recordingId, autoplay, startMs]);
+    // Keep autoplay/t intact and also self-attribute the embed.
+    return withShareAttribution(
+      absoluteAppUrl(`/embed/${recordingId}${qs}`),
+      ownerViaId,
+    );
+  }, [recordingId, autoplay, startMs, ownerViaId]);
 
   const code =
     mode === "responsive"

package/corpus/templates/clips/app/components/player/sign-in-prompt-dialog.tsx

@@ -21,6 +21,12 @@ export interface SignInPromptDialogProps {
    * fires there and forwards to `returnTo` once the viewer is signed in.
    */
   returnTo?: string;
+  /**
+   * Fired when the viewer activates the "Sign in" button, before navigation.
+   * Used by the public share page to emit the signin funnel event. Must not
+   * change navigation behavior.
+   */
+  onSignIn?: () => void;
 }
 
 function buildSignInHref(returnTo: string | undefined): string {
@@ -34,6 +40,7 @@ export function SignInPromptDialog({
   onOpenChange,
   intent,
   returnTo,
+  onSignIn,
 }: SignInPromptDialogProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -51,6 +58,7 @@ export function SignInPromptDialog({
           </Button>
           <Button
             onClick={() => {
+              onSignIn?.();
               window.location.href = buildSignInHref(returnTo);
             }}
           >

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/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/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>