@agent-native/core 0.141.3 → 0.141.4

package/corpus/templates/clips/actions/invite-member.ts

@@ -24,6 +24,7 @@ import { and, eq, sql } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb } from "../server/db/index.js";
+import { CLIPS_ORGANIZATION_INVITE_EMAIL_ID } from "../server/lib/emails.js";
 import {
   getCurrentOwnerEmail,
   nanoid,
@@ -67,6 +68,36 @@ async function fetchOrgName(orgId: string): Promise<string> {
   return row?.name ?? "Organization";
 }
 
+export function renderClipsInviteEmail({
+  appName,
+  orgName,
+  inviter,
+  role,
+  inviteUrl,
+}: {
+  appName: string;
+  orgName: string;
+  inviter: string;
+  role: "admin" | "member";
+  inviteUrl: string;
+}) {
+  return {
+    subject: `You're invited to ${orgName} on ${appName}`,
+    ...renderEmail({
+      brandName: appName,
+      preheader: `${inviter} invited you to ${orgName} on ${appName}.`,
+      heading: `You're invited to join ${orgName}`,
+      paragraphs: [
+        `${emailStrong(inviter)} invited you to the ${emailStrong(orgName)} organization on ${emailStrong(appName)} as ${emailStrong(role)}.`,
+        `Click the button below to accept the invite and start collaborating.`,
+      ],
+      cta: { label: "Accept invite", url: inviteUrl },
+      // guard:allow-raw-color - email HTML cannot reference CSS theme tokens.
+      brandColor: "#18181B",
+    }),
+  };
+}
+
 export default defineAction({
   description:
     "Invite someone to the active organization by email. Creates a pending invitation. Role 'admin' maps to admin; all other Clips roles collapse to 'member'. Sends an email when a provider is configured.",
@@ -123,25 +154,17 @@ export default defineAction({
     const orgName = await fetchOrgName(organizationId);
     const inviteUrl = `${baseUrl()}/invite/${token}`;
 
-    const appName = getAppName();
-    const { html, text } = renderEmail({
-      brandName: appName,
-      preheader: `${inviter} invited you to ${orgName} on ${appName}.`,
-      heading: `You're invited to join ${orgName}`,
-      paragraphs: [
-        `${emailStrong(inviter)} invited you to the ${emailStrong(orgName)} organization on ${emailStrong(appName)} as ${emailStrong(role)}.`,
-        `Click the button below to accept the invite and start collaborating.`,
-      ],
-      cta: { label: "Accept invite", url: inviteUrl },
-      // guard:allow-raw-color - email HTML cannot reference CSS theme tokens.
-      brandColor: "#18181B",
-    });
     try {
       await sendEmail({
+        ...renderClipsInviteEmail({
+          appName: getAppName(),
+          orgName,
+          inviter,
+          role,
+          inviteUrl,
+        }),
         to: args.email,
-        subject: `You're invited to ${orgName} on ${appName}`,
-        html,
-        text,
+        templateId: CLIPS_ORGANIZATION_INVITE_EMAIL_ID,
       });
     } catch (err) {
       console.warn("[invite-member] email send failed:", err);

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

@@ -1,4 +1,5 @@
 import { appPath } from "@agent-native/core/client/api-path";
+import { writeClipboardText } from "@agent-native/core/client/clipboard";
 import {
   useActionMutation,
   useActionQuery,
@@ -19,6 +20,7 @@ import {
   useState,
   type ReactNode,
 } from "react";
+import { toast } from "sonner";
 
 import {
   CopyField,
@@ -44,6 +46,7 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 
+import { buildEmailPreviewMarkup } from "../../../shared/email-preview";
 import { isLoomEmbedUrl } from "../../../shared/loom";
 import { withShareAttribution } from "../../../shared/share-attribution";
 
@@ -58,6 +61,7 @@ export interface ShareRecordingPopoverProps {
   initialVisibility?: Visibility | null;
   initialRole?: "owner" | "admin" | "editor" | "viewer";
   videoUrl?: string | null;
+  thumbnailUrl?: string | null;
   animatedThumbnailUrl?: string | null;
   isLoomRecording?: boolean;
   hasPassword?: boolean;
@@ -88,8 +92,10 @@ export function ShareRecordingPopover({
   initialVisibility,
   initialRole,
   videoUrl,
+  thumbnailUrl,
   animatedThumbnailUrl,
   isLoomRecording = false,
+  hasPassword,
   children,
   open,
   onOpenChange,
@@ -108,8 +114,10 @@ export function ShareRecordingPopover({
           initialVisibility={initialVisibility}
           initialRole={initialRole}
           videoUrl={videoUrl}
+          thumbnailUrl={thumbnailUrl}
           animatedThumbnailUrl={animatedThumbnailUrl}
           isLoomRecording={isLoomRecording}
+          hasPassword={hasPassword}
         />
       </PopoverContent>
     </Popover>
@@ -127,10 +135,12 @@ export function ShareRecordingDialog({
   initialVisibility,
   initialRole,
   videoUrl,
+  thumbnailUrl,
   animatedThumbnailUrl,
   isLoomRecording = false,
   open,
   onOpenChange,
+  hasPassword,
 }: ShareRecordingDialogProps) {
   const t = useT();
   return (
@@ -147,8 +157,10 @@ export function ShareRecordingDialog({
           initialVisibility={initialVisibility}
           initialRole={initialRole}
           videoUrl={videoUrl}
+          thumbnailUrl={thumbnailUrl}
           animatedThumbnailUrl={animatedThumbnailUrl}
           isLoomRecording={isLoomRecording}
+          hasPassword={hasPassword}
           reserveCloseButton
         />
       </DialogContent>
@@ -162,18 +174,22 @@ function ShareRecordingContent({
   initialVisibility,
   initialRole,
   videoUrl,
+  thumbnailUrl,
   animatedThumbnailUrl,
   isLoomRecording = false,
   reserveCloseButton = false,
+  hasPassword,
 }: {
   recordingId: string;
   recordingTitle?: string;
   initialVisibility?: Visibility | null;
   initialRole?: "owner" | "admin" | "editor" | "viewer";
   videoUrl?: string | null;
+  thumbnailUrl?: string | null;
   animatedThumbnailUrl?: string | null;
   isLoomRecording?: boolean;
   reserveCloseButton?: boolean;
+  hasPassword?: boolean;
 }) {
   const t = useT();
   const sharesQuery = useActionQuery<SharesResponse>("list-resource-shares", {
@@ -236,13 +252,16 @@ function ShareRecordingContent({
         <TabsContent value="link" className="mt-3">
           <LinkTab
             recordingId={recordingId}
+            recordingTitle={recordingTitle}
             shareUrl={shareUrl}
             sharesQuery={sharesQuery}
             visibility={visibility}
             canManage={canManage}
             videoUrl={videoUrl}
+            thumbnailUrl={thumbnailUrl}
             animatedThumbnailUrl={animatedThumbnailUrl}
             isLoomRecording={isLoomRecording}
+            hasPassword={hasPassword}
           />
         </TabsContent>
 
@@ -276,22 +295,28 @@ function ShareRecordingContent({
 
 function LinkTab({
   recordingId,
+  recordingTitle,
   shareUrl,
   sharesQuery,
   visibility,
   canManage,
   videoUrl,
+  thumbnailUrl,
   animatedThumbnailUrl,
   isLoomRecording: isLoomRecordingProp,
+  hasPassword,
 }: {
   recordingId: string;
+  recordingTitle?: string;
   shareUrl: string;
   sharesQuery: SharesQuery;
   visibility: Visibility | null;
   canManage: boolean;
   videoUrl?: string | null;
+  thumbnailUrl?: string | null;
   animatedThumbnailUrl?: string | null;
   isLoomRecording?: boolean;
+  hasPassword?: boolean;
 }) {
   const t = useT();
   const { setResourceVisibility, isPending } = useResourceVisibilityMutation(
@@ -303,6 +328,44 @@ function LinkTab({
   const sharesLoaded = visibility !== null;
   const visibilityPending = isPending || sharesQuery.isLoading;
   const isLoomRecording = isLoomRecordingProp || isLoomEmbedUrl(videoUrl);
+  const emailPreviewThumbnailUrl = useMemo(() => {
+    if (!isPublic || hasPassword !== false || !sharesLoaded) return null;
+    const candidate = animatedThumbnailUrl || thumbnailUrl;
+    if (!candidate) return null;
+
+    const query = animatedThumbnailUrl ? "?animated=1" : "";
+    return absoluteAppUrl(
+      `/api/thumbnail/${encodeURIComponent(recordingId)}${query}`,
+    );
+  }, [
+    animatedThumbnailUrl,
+    hasPassword,
+    isPublic,
+    recordingId,
+    sharesLoaded,
+    thumbnailUrl,
+  ]);
+  const copyEmailPreview = useCallback(async () => {
+    if (!emailPreviewThumbnailUrl || !shareUrl) return;
+
+    try {
+      const markup = buildEmailPreviewMarkup({
+        title: recordingTitle?.trim() || t("recordingPage.untitledClip"),
+        shareUrl,
+        thumbnailUrl: emailPreviewThumbnailUrl,
+      });
+      const copied = await writeClipboardText(markup.plainText, {
+        html: markup.html,
+      });
+      if (copied) {
+        toast.success(t("shareDialog.emailPreviewCopied"));
+      } else {
+        toast.error(t("shareDialog.emailPreviewCopyFailed"));
+      }
+    } catch {
+      toast.error(t("shareDialog.emailPreviewCopyFailed"));
+    }
+  }, [emailPreviewThumbnailUrl, recordingTitle, shareUrl, t]);
   const createAgentLink = useActionMutation(
     "create-recording-agent-link" as any,
   );
@@ -439,8 +502,17 @@ function LinkTab({
         />
       ) : null}
 
-      {videoUrl || animatedThumbnailUrl ? (
+      {emailPreviewThumbnailUrl || videoUrl || animatedThumbnailUrl ? (
         <div className="flex flex-wrap gap-2">
+          {emailPreviewThumbnailUrl ? (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => void copyEmailPreview()}
+            >
+              {t("shareDialog.copyEmailPreview")}
+            </Button>
+          ) : null}
           {animatedThumbnailUrl ? (
             <Button
               variant="outline"

package/corpus/templates/clips/app/i18n/en-US.ts

@@ -452,6 +452,9 @@ const messages = {
     agentLinkUnavailable: "Couldn't create the agent link.",
     retryAgentLink: "Retry",
     gifPreview: "GIF preview",
+    copyEmailPreview: "Copy email preview",
+    emailPreviewCopied: "Email preview copied",
+    emailPreviewCopyFailed: "Couldn't copy email preview",
     openPlayer: "Open player",
     chooseFile: "Choose file",
     remove: "Remove",

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -235,7 +235,7 @@ export default function RecordingPage() {
   const { session, isLoading: sessionLoading } = useSession();
   const playerRef = useRef<VideoPlayerHandle | null>(null);
 
-  const [panel, setPanel] = useState<SidePanel>("agent");
+  const [panel, setPanel] = useState<SidePanel>("comments");
   const [theaterMode, setTheaterMode] = useState(false);
   const [editing, setEditing] = useState(false);
   const [currentMs, setCurrentMs] = useState(0);
@@ -311,15 +311,6 @@ export default function RecordingPage() {
     }
   }, [panelParam]);
 
-  const appliedCompactDefaultRef = useRef(false);
-  useEffect(() => {
-    if (appliedCompactDefaultRef.current) return;
-    if (!panelParam && isCompactLayout) {
-      appliedCompactDefaultRef.current = true;
-      setPanel("comments");
-    }
-  }, [isCompactLayout, panelParam]);
-
   const playerDataQ = useActionQuery<any>(
     "get-recording-player-data",
     {
@@ -1154,21 +1145,13 @@ export default function RecordingPage() {
         {label}
       </TabsTrigger>
     );
-    const triggers = compact
-      ? [
-          trigger("comments", t("recordingPage.activity")),
-          trigger("transcript", t("recordingPage.transcript")),
-          trigger("agent", t("recordingPage.agent")),
-          trigger("insights", t("recordingPage.insights")),
-          canEdit ? trigger("settings", t("recordingPage.settings")) : null,
-        ]
-      : [
-          trigger("agent", t("recordingPage.agent")),
-          trigger("comments", t("recordingPage.activity")),
-          trigger("transcript", t("recordingPage.transcript")),
-          trigger("insights", t("recordingPage.insights")),
-          canEdit ? trigger("settings", t("recordingPage.settings")) : null,
-        ];
+    const triggers = [
+      trigger("comments", t("recordingPage.activity")),
+      trigger("transcript", t("recordingPage.transcript")),
+      trigger("agent", t("recordingPage.agent")),
+      trigger("insights", t("recordingPage.insights")),
+      canEdit ? trigger("settings", t("recordingPage.settings")) : null,
+    ];
 
     return (
       <Tabs
@@ -1197,6 +1180,7 @@ export default function RecordingPage() {
             scope={recordingScope}
             showHeader={false}
             showTabBar={false}
+            missingApiKeySetupLayout="sidebar"
             emptyStateText={t("recordingPage.askAboutClip")}
             dynamicSuggestions={false}
             suggestions={
@@ -1553,6 +1537,7 @@ export default function RecordingPage() {
               initialVisibility={recording.visibility}
               initialRole={role}
               videoUrl={recording.videoUrl}
+              thumbnailUrl={recording.thumbnailUrl}
               animatedThumbnailUrl={recording.animatedThumbnailUrl}
               isLoomRecording={isLoomEmbedBacked}
               hasPassword={Boolean(recording.hasPassword)}

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

@@ -985,6 +985,7 @@ export default function ShareRoute() {
                 initialVisibility={recording.visibility}
                 initialRole={viewerIsOwner ? "owner" : undefined}
                 videoUrl={recording.videoUrl}
+                thumbnailUrl={recording.thumbnailUrl}
                 animatedThumbnailUrl={recording.animatedThumbnailUrl}
                 isLoomRecording={isLoomEmbedBacked}
                 hasPassword={Boolean(recording.hasPassword)}
@@ -1128,6 +1129,7 @@ export default function ShareRoute() {
               <AgentPanel
                 emptyStateText={t("recordingPage.askAboutClip")}
                 dynamicSuggestions={false}
+                missingApiKeySetupLayout="sidebar"
                 suggestions={[
                   t("recordingPage.summarizeClip"),
                   t("recordingPage.findKeyMoments"),

package/corpus/templates/clips/changelog/2026-08-05-activity-is-now-the-default-clips-recording-tab-and-ai-setup.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-05
+---
+
+Activity is now the default recording tab, and Clips only shows AI setup after confirming no provider is connected.

package/corpus/templates/clips/changelog/2026-08-05-clips-can-copy-a-linked-email-preview-for-public-recordings.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-05
+---
+
+Clips can copy a linked email preview for public recordings

package/corpus/templates/clips/changelog/2026-08-05-preparing-recording-now-uses-a-clean-shadow-free-status-card.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-05
+---
+
+Preparing recording now uses a clean, shadow-free status card

package/corpus/templates/clips/desktop/src/styles.css

@@ -3634,9 +3634,6 @@ body[data-clips-route="recording-pill"] #root {
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow:
-    0 14px 40px rgba(0, 0, 0, 0.45),
-    0 2px 6px rgba(0, 0, 0, 0.3);
   color: white;
   font-size: 13px;
   font-weight: 600;

package/corpus/templates/clips/server/lib/emails.ts

@@ -0,0 +1,256 @@
+/**
+ * Catalog entries for the transactional emails Clips sends.
+ *
+ * Registered from `server/plugins/transactional-emails.ts` so Dispatch can list
+ * and preview them without the app having sent anything yet.
+ *
+ * Every entry except the organization invite renders through
+ * `renderClipsTransactionalEmail`, so a preview shows the real template rather
+ * than a copy of it.
+ */
+
+import { defineTransactionalEmail } from "@agent-native/core/email-catalog";
+
+import { renderClipsInviteEmail } from "../../actions/invite-member.js";
+import {
+  CLIPS_ACTIVITY_COMMENT_EMAIL_ID,
+  CLIPS_ACTIVITY_REACTION_EMAIL_ID,
+  CLIPS_FIRST_AGENT_VIEW_EMAIL_ID,
+  CLIPS_FIRST_IMPORT_EMAIL_ID,
+  CLIPS_FIRST_VIEW_EMAIL_ID,
+  CLIPS_MONTHLY_RECAP_EMAIL_ID,
+  CLIPS_TWO_CLIPS_EMAIL_ID,
+  CLIPS_UNVIEWED_REMINDER_EMAIL_ID,
+  renderClipsTransactionalEmail,
+  type ClipsTransactionalEmailInput,
+  type ClipsTransactionalEmailRenderOptions,
+} from "./transactional-email-templates.js";
+
+/** Obviously-fake sample data — these render in a preview pane, never send. */
+const PREVIEW_OPTIONS: ClipsTransactionalEmailRenderOptions = {
+  appUrl: "https://example.com",
+};
+const SAMPLE_RECORDING_ID = "rec_sample";
+const SAMPLE_TITLE = "Onboarding walkthrough";
+const SAMPLE_TO = "sam.rivera@example.com";
+
+function preview(input: ClipsTransactionalEmailInput) {
+  return renderClipsTransactionalEmail(input, PREVIEW_OPTIONS);
+}
+
+export const CLIPS_ORGANIZATION_INVITE_EMAIL_ID = "clips.organization-invite";
+
+/**
+ * How the shared Clips sender resolves From and Reply-To for every kind it
+ * renders, so each entry can say so without restating the mechanism.
+ */
+const CLIPS_SENDER =
+  'From is the configured EMAIL_FROM with the display name "Agent-Native Clips"; on first-party agent-native.com deployments it becomes clips@agent-native.com. Reply-to is hello@agent-native.com.';
+
+let registered = false;
+
+export function registerClipsEmails(): void {
+  if (registered) return;
+  registered = true;
+
+  defineTransactionalEmail({
+    id: CLIPS_FIRST_VIEW_EMAIL_ID,
+    name: "First view on a Clip",
+    trigger:
+      "The background transactional-email sweep finds the first counted view of a Clip by someone other than its owner, recorded after transactional email was switched on. One per Clip.",
+    recipientLabel: "Clip owner",
+    recipient:
+      "The Clip's owner. Suppressed recipient addresses are skipped, and the send is dropped if the owner is no longer the recording's owner at send time.",
+    senderLabel: "Agent-Native Clips",
+    sender: CLIPS_SENDER,
+    preview: () =>
+      preview({
+        kind: "first-view",
+        to: SAMPLE_TO,
+        recordingId: SAMPLE_RECORDING_ID,
+        title: SAMPLE_TITLE,
+        viewerEmail: "alex.chen@example.com",
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CLIPS_UNVIEWED_REMINDER_EMAIL_ID,
+    name: "Unviewed Clip reminder",
+    trigger:
+      "A direct share is 48 hours old and the recipient still has no counted view of that Clip. Re-checked at send time, so a view in the meantime cancels it.",
+    recipientLabel: "Shared-with address",
+    recipient:
+      "The address the Clip was directly shared with. Requires the share to still exist.",
+    senderLabel: "Sharer via Clips",
+    sender:
+      'Same as the other Clips emails, except the display name becomes "<sharer> (via Agent-Native Clips)" and reply-to is the sharer\'s own address when it is a valid address, falling back to hello@agent-native.com.',
+    preview: () =>
+      preview({
+        kind: "unviewed-reminder",
+        to: SAMPLE_TO,
+        recordingId: SAMPLE_RECORDING_ID,
+        title: SAMPLE_TITLE,
+        senderEmail: "dana.hill@example.com",
+        senderName: "Dana Hill",
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CLIPS_FIRST_AGENT_VIEW_EMAIL_ID,
+    name: "First agent read of a Clip",
+    trigger:
+      "An AI agent reads one of an owner's Clips for the first time since transactional email was switched on. One per owner, not per Clip.",
+    recipientLabel: "Clip owner",
+    recipient:
+      "The owner of the Clip the agent read. Re-checked at send time against the owner's actual first agent view.",
+    senderLabel: "Agent-Native Clips",
+    sender: CLIPS_SENDER,
+    preview: () =>
+      preview({
+        kind: "first-agent-view",
+        to: SAMPLE_TO,
+        recordingId: SAMPLE_RECORDING_ID,
+        title: SAMPLE_TITLE,
+        agentName: "Claude Code",
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CLIPS_FIRST_IMPORT_EMAIL_ID,
+    name: "First imported video is ready",
+    trigger:
+      "An owner's first imported (rather than recorded) video finishes processing and becomes ready. One per owner.",
+    recipientLabel: "Clip owner",
+    recipient:
+      "The owner of the imported recording, re-checked at send time so a later import does not resend.",
+    senderLabel: "Agent-Native Clips",
+    sender: CLIPS_SENDER,
+    preview: () =>
+      preview({
+        kind: "first-import",
+        to: SAMPLE_TO,
+        recordingId: SAMPLE_RECORDING_ID,
+        title: "Quarterly demo recording",
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CLIPS_MONTHLY_RECAP_EMAIL_ID,
+    name: "Monthly Clips recap",
+    trigger:
+      "Once per owner per calendar month, from 14:00 UTC on the 1st, for owners whose Clips had any human views or agent reads in the closed month. Metrics and the top Clip are recomputed at send time.",
+    recipientLabel: "Clip owner",
+    recipient:
+      "The Clip owner whose audience the recap reports. Suppressed addresses are skipped.",
+    senderLabel: "Agent-Native Clips",
+    sender: CLIPS_SENDER,
+    preview: () =>
+      preview({
+        kind: "monthly-recap",
+        to: SAMPLE_TO,
+        month: "2025-02",
+        humanViews: 42,
+        agentSessions: 7,
+        topClip: {
+          recordingId: SAMPLE_RECORDING_ID,
+          title: SAMPLE_TITLE,
+          thumbnailUrl: "https://example.com/thumbnails/sample.png",
+          durationMs: 214_000,
+          recordedAt: "2025-02-11T16:00:00.000Z",
+          humanViews: 18,
+          agentSessions: 4,
+        },
+        copy: {
+          heroLine: "Your clips were watched 42 times. 7 agents read them.",
+          completionNote: "68% average completion · most stopped at 2:31",
+          agentBreakdown: "4 from Claude Code · 3 unidentified",
+        },
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CLIPS_TWO_CLIPS_EMAIL_ID,
+    name: "Two Clips received",
+    trigger:
+      "A one-time nudge once someone who owns no Clips of their own has had two distinct Clips directly shared with them. The summary line is AI-generated before the job is released to send.",
+    recipientLabel: "Shared-with address",
+    recipient:
+      "The shared-with address. Dropped at send time if they now own a Clip or no longer hold both shares.",
+    senderLabel: "Agent-Native Clips",
+    sender: CLIPS_SENDER,
+    preview: () =>
+      preview({
+        kind: "two-clips",
+        to: SAMPLE_TO,
+        generatedSummary:
+          "Two teammates walked you through the new onboarding flow.",
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CLIPS_ACTIVITY_COMMENT_EMAIL_ID,
+    name: "Clip comment",
+    trigger:
+      "Someone comments or replies on a Clip. Subject and copy differ slightly for a reply; both send under this id.",
+    recipientLabel: "Owner and thread authors",
+    recipient:
+      "The recording owner, plus every prior author in the thread when the comment is a reply. The list is re-checked against the recording's live ACL and filtered by each user's `emailNotifications` preference; the comment's own author never receives it.",
+    senderLabel: "Agent-Native Clips",
+    sender: CLIPS_SENDER,
+    preview: () =>
+      preview({
+        kind: "activity-comment",
+        to: SAMPLE_TO,
+        recordingId: SAMPLE_RECORDING_ID,
+        title: SAMPLE_TITLE,
+        authorEmail: "alex.chen@example.com",
+        authorName: "Alex Chen",
+        content: "The step at 1:20 is the part new hires always miss.",
+        videoTimestampMs: 80_000,
+        isReply: false,
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CLIPS_ACTIVITY_REACTION_EMAIL_ID,
+    name: "Clip reaction",
+    trigger: "A viewer reacts with an emoji on a Clip.",
+    recipientLabel: "Clip owner",
+    recipient:
+      "The recording owner plus any extra recipients the caller passes, re-checked against the recording's live ACL and filtered by each user's `emailNotifications` preference. The reacting viewer never receives it.",
+    senderLabel: "Agent-Native Clips",
+    sender: CLIPS_SENDER,
+    preview: () =>
+      preview({
+        kind: "activity-reaction",
+        to: SAMPLE_TO,
+        recordingId: SAMPLE_RECORDING_ID,
+        title: SAMPLE_TITLE,
+        emoji: "🎉",
+        authorEmail: "alex.chen@example.com",
+        authorName: "Alex Chen",
+        videoTimestampMs: 45_000,
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CLIPS_ORGANIZATION_INVITE_EMAIL_ID,
+    name: "Organization invitation",
+    trigger:
+      "An organization admin runs `invite-member`. Any earlier pending invite for the same address is cancelled first, so a re-invite sends a fresh email with a new token.",
+    recipientLabel: "Invited address",
+    recipient:
+      "The address passed to the action, exactly as typed. One email per invite.",
+    senderLabel: "Default sender",
+    sender:
+      "The configured default sender. This call site sets no `from`, `fromName`, `replyTo`, or `appSender`, so unlike the other Clips emails it does not send as Agent-Native Clips.",
+    preview: () =>
+      renderClipsInviteEmail({
+        appName: "Clips",
+        orgName: "Northwind Design",
+        inviter: "dana.hill@example.com",
+        role: "member",
+        inviteUrl: "https://example.com/invite/sample-token",
+      }),
+  });
+}