@agent-native/core 0.152.1 → 0.153.0

package/corpus/templates/clips/actions/update-comment.ts

@@ -35,7 +35,7 @@ export default defineAction({
       .limit(1);
     if (!existing) throw new Error(`Comment not found: ${args.id}`);
 
-    await assertAccess("recording", existing.recordingId, "viewer");
+    await assertAccess("recording", existing.recordingId, "commenter");
 
     if (!sameOwnerEmail(existing.authorEmail, userEmail)) {
       throw new ForbiddenError(

package/corpus/templates/clips/app/components/editor/editor-layout.tsx

@@ -907,6 +907,7 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
         durationMs={durationMs}
         currentThumbnailUrl={recording.thumbnailUrl}
         currentAnimatedUrl={recording.animatedThumbnailUrl}
+        currentThumbnail={edits.thumbnail}
       />
       <StitchManager
         open={stitchOpen}

package/corpus/templates/clips/app/components/editor/thumbnail-picker.tsx

@@ -22,7 +22,12 @@ import { Label } from "@/components/ui/label";
 import { Slider } from "@/components/ui/slider";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { exportGif, blobToDataUrl } from "@/lib/ffmpeg-export";
-import { formatMs } from "@/lib/timestamp-mapping";
+import { seekVideoToTime } from "@/lib/thumbnail-capture";
+import {
+  resolveThumbnailPickerState,
+  type ThumbnailPickerTab,
+} from "@/lib/thumbnail-picker-state";
+import { formatMs, type ThumbnailSpec } from "@/lib/timestamp-mapping";
 
 export interface ThumbnailPickerProps {
   open: boolean;
@@ -33,10 +38,9 @@ export interface ThumbnailPickerProps {
   durationMs: number;
   currentThumbnailUrl?: string | null;
   currentAnimatedUrl?: string | null;
+  currentThumbnail?: ThumbnailSpec | null;
 }
 
-type Tab = "upload" | "frame" | "gif";
-
 export function ThumbnailPicker({
   open,
   onOpenChange,
@@ -45,9 +49,11 @@ export function ThumbnailPicker({
   videoFormat = "webm",
   durationMs,
   currentThumbnailUrl,
+  currentAnimatedUrl,
+  currentThumbnail,
 }: ThumbnailPickerProps) {
   const t = useT();
-  const [tab, setTab] = useState<Tab>("frame");
+  const [tab, setTab] = useState<ThumbnailPickerTab>("frame");
   const [frameTime, setFrameTime] = useState(0);
   const [gifStart, setGifStart] = useState(0);
   const [gifDuration, setGifDuration] = useState(3000);
@@ -61,6 +67,7 @@ export function ThumbnailPicker({
   const gifVideoRef = useRef<HTMLVideoElement | null>(null);
   const gifPreviewRef = useRef<HTMLVideoElement | null>(null);
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
+  const initializedThumbnailKeyRef = useRef<string | null>(null);
 
   const mutation = useActionMutation("set-thumbnail");
 
@@ -75,21 +82,43 @@ export function ThumbnailPicker({
     }
   }, [open]);
 
+  const currentThumbnailKey = currentThumbnail
+    ? `${currentThumbnail.kind}:${currentThumbnail.value}`
+    : currentAnimatedUrl
+      ? `animated:${currentAnimatedUrl}`
+      : "none";
+
+  useEffect(() => {
+    if (!open) {
+      initializedThumbnailKeyRef.current = null;
+      return;
+    }
+    const stateKey = `${durationMs}:${currentThumbnailKey}`;
+    if (initializedThumbnailKeyRef.current === stateKey) return;
+    initializedThumbnailKeyRef.current = stateKey;
+    const next = resolveThumbnailPickerState(currentThumbnail, {
+      durationMs,
+      hasAnimatedThumbnail: Boolean(currentAnimatedUrl),
+    });
+    setTab(next.tab);
+    setFrameTime(next.frameTime);
+    setGifStart(next.gifStart);
+    setGifDuration(next.gifDuration);
+  }, [
+    currentAnimatedUrl,
+    currentThumbnail,
+    currentThumbnailKey,
+    durationMs,
+    open,
+  ]);
+
   const handleFrameCapture = async () => {
     const video = videoRef.current;
     if (!video || !videoUrl) return;
     try {
-      // Seek to the chosen frame and draw to a canvas.
-      await new Promise<void>((resolve, reject) => {
-        const onSeek = () => {
-          video.removeEventListener("seeked", onSeek);
-          resolve();
-        };
-        video.addEventListener("seeked", onSeek);
-        video.currentTime = frameTime / 1000;
-        // Safety timeout
-        setTimeout(() => reject(new Error("seek timeout")), 5000);
-      }).catch(() => {});
+      // Do not persist the visible frame when the seek did not reach the
+      // selected timestamp.
+      await seekVideoToTime(video, frameTime);
 
       const canvas = document.createElement("canvas");
       canvas.width = video.videoWidth || 1280;
@@ -117,6 +146,17 @@ export function ThumbnailPicker({
     }
   };
 
+  useEffect(() => {
+    if (!open) return;
+    if (tab === "frame") {
+      seekPreview(videoRef.current, frameTime);
+      seekPreview(framePreviewRef.current, frameTime);
+    } else if (tab === "gif") {
+      seekPreview(gifVideoRef.current, gifStart);
+      seekPreview(gifPreviewRef.current, gifStart);
+    }
+  }, [frameTime, gifStart, open, tab]);
+
   const handleGifGenerate = async () => {
     if (!videoUrl) return;
     try {
@@ -188,7 +228,10 @@ export function ThumbnailPicker({
           </DialogTitle>
         </DialogHeader>
 
-        <Tabs value={tab} onValueChange={(v) => setTab(v as Tab)}>
+        <Tabs
+          value={tab}
+          onValueChange={(v) => setTab(v as ThumbnailPickerTab)}
+        >
           <TabsList className="grid w-full grid-cols-3">
             <TabsTrigger value="upload">
               <IconUpload className="w-4 h-4 mr-1" />

package/corpus/templates/clips/app/components/player/comments-panel.tsx

@@ -81,6 +81,7 @@ export interface CommentsPanelProps {
   currentMs: number;
   currentUserEmail?: string;
   enableComments: boolean;
+  canComment: boolean;
   onSeek: (ms: number) => void;
   /**
    * The React Query key whose cached value contains this panel's `comments`.
@@ -117,6 +118,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
     currentMs,
     currentUserEmail,
     enableComments,
+    canComment,
     onSeek,
     onUnauthenticated,
     queryKey,
@@ -338,6 +340,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
   );
 
   function submitDraft(value: string, target: Comment | null) {
+    if (!canComment) return;
     const text = value.trim();
     if (!text) return;
     if (!isSignedIn && onUnauthenticated) {
@@ -365,6 +368,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
   }
 
   function openReply(root: Comment) {
+    if (!canComment) return;
     if (!isSignedIn && onUnauthenticated) {
       onUnauthenticated("comment");
       return;
@@ -374,6 +378,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
   }
 
   function startEditing(comment: Comment) {
+    if (!canComment) return;
     setEditingId(comment.id);
     setEditDraft(comment.content);
   }
@@ -384,6 +389,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
   }
 
   function submitEdit(comment: Comment) {
+    if (!canComment) return;
     const content = editDraft.trim();
     if (!content) return;
     if (content === comment.content) {
@@ -402,6 +408,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
       isSignedIn={isSignedIn}
       isSharePresentation={isSharePresentation}
       enableComments={enableComments}
+      canComment={canComment}
       onDraftChange={setDraft}
       onSubmit={() => submitDraft(draft, null)}
       onUnauthenticated={onUnauthenticated}
@@ -419,6 +426,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
         {sortedThreads.length === 0 ? (
           <EmptyCommentsState
             enableComments={enableComments}
+            canComment={canComment}
             isSharePresentation={isSharePresentation}
           />
         ) : (
@@ -431,6 +439,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
                   <CommentCard
                     comment={root}
                     currentUserEmail={currentUserEmail}
+                    canComment={canComment}
                     onSeek={onSeek}
                     onReply={() => openReply(root)}
                     onResolve={(id, resolved) =>
@@ -455,6 +464,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
                           <CommentCard
                             comment={r}
                             currentUserEmail={currentUserEmail}
+                            canComment={canComment}
                             onSeek={onSeek}
                             onReply={() => openReply(root)}
                             onResolve={(id, resolved) =>
@@ -507,9 +517,11 @@ export function CommentsPanel(props: CommentsPanelProps) {
 
 function EmptyCommentsState({
   enableComments,
+  canComment,
   isSharePresentation,
 }: {
   enableComments: boolean;
+  canComment: boolean;
   isSharePresentation: boolean;
 }) {
   const t = useT();
@@ -528,6 +540,22 @@ function EmptyCommentsState({
     );
   }
 
+  if (!canComment) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center px-8 py-12 text-center",
+          isSharePresentation ? "flex-1" : "min-h-full",
+        )}
+      >
+        <IconMessageCircle className="mb-5 size-16 stroke-[1.35] text-muted-foreground/40" />
+        <p className="text-base font-semibold text-foreground">
+          {t("commentsPanel.beFirst")}
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div
       className={cn(
@@ -560,6 +588,7 @@ function CommentComposer({
   isSignedIn,
   isSharePresentation,
   enableComments,
+  canComment,
   onDraftChange,
   onSubmit,
   onUnauthenticated,
@@ -570,6 +599,7 @@ function CommentComposer({
   isSignedIn: boolean;
   isSharePresentation: boolean;
   enableComments: boolean;
+  canComment: boolean;
   onDraftChange: (value: string) => void;
   onSubmit: () => void;
   onUnauthenticated?: (intent: "comment" | "react") => void;
@@ -583,6 +613,8 @@ function CommentComposer({
     );
   }
 
+  if (!canComment && isSignedIn) return null;
+
   if (!isSignedIn && onUnauthenticated) {
     if (isSharePresentation) {
       return (
@@ -795,6 +827,7 @@ function InlineEditComposer({
 function CommentCard({
   comment,
   currentUserEmail,
+  canComment,
   editDraft,
   isEditing,
   onSeek,
@@ -811,6 +844,7 @@ function CommentCard({
 }: {
   comment: Comment;
   currentUserEmail?: string;
+  canComment: boolean;
   editDraft: string;
   isEditing: boolean;
   onSeek: (ms: number) => void;
@@ -911,43 +945,51 @@ function CommentCard({
             </p>
 
             <div className="flex items-center gap-2 mt-1.5 text-xs text-muted-foreground">
-              <button
-                onClick={onReply}
-                className="hover:text-foreground flex items-center gap-1"
-              >
-                <IconCornerDownRight className="h-3 w-3" />
-                Reply
-              </button>
-
-              <Popover>
-                <PopoverTrigger asChild>
-                  <button className="hover:text-foreground flex items-center gap-1">
-                    <IconMoodSmile className="h-3 w-3" /> React
-                  </button>
-                </PopoverTrigger>
-                <PopoverContent side="top" align="start" className="p-1 w-auto">
-                  <div className="flex gap-0.5">
-                    {REACTION_EMOJIS.map((e) => (
-                      <button
-                        key={e}
-                        onClick={() => {
-                          if (!currentUserEmail) {
-                            onUnauthenticated?.("react");
-                            return;
-                          }
-                          setLocalJson(JSON.stringify(toggleEmoji(e)));
-                          onReact(comment.id, e);
-                        }}
-                        className="text-lg h-8 w-8 rounded hover:bg-accent flex items-center justify-center"
-                      >
-                        {e}
-                      </button>
-                    ))}
-                  </div>
-                </PopoverContent>
-              </Popover>
-
-              {currentUserEmail ? (
+              {canComment ? (
+                <button
+                  onClick={onReply}
+                  className="hover:text-foreground flex items-center gap-1"
+                >
+                  <IconCornerDownRight className="h-3 w-3" />
+                  Reply
+                </button>
+              ) : null}
+
+              {canComment ? (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button className="hover:text-foreground flex items-center gap-1">
+                      <IconMoodSmile className="h-3 w-3" /> React
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    side="top"
+                    align="start"
+                    className="p-1 w-auto"
+                  >
+                    <div className="flex gap-0.5">
+                      {REACTION_EMOJIS.map((e) => (
+                        <button
+                          key={e}
+                          onClick={() => {
+                            if (!currentUserEmail) {
+                              onUnauthenticated?.("react");
+                              return;
+                            }
+                            setLocalJson(JSON.stringify(toggleEmoji(e)));
+                            onReact(comment.id, e);
+                          }}
+                          className="text-lg h-8 w-8 rounded hover:bg-accent flex items-center justify-center"
+                        >
+                          {e}
+                        </button>
+                      ))}
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              ) : null}
+
+              {currentUserEmail && canComment ? (
                 <button
                   onClick={() => onResolve(comment.id, !comment.resolved)}
                   className="hover:text-foreground"
@@ -956,7 +998,7 @@ function CommentCard({
                 </button>
               ) : null}
 
-              {isOwner ? (
+              {isOwner && canComment ? (
                 <DropdownMenu>
                   <DropdownMenuTrigger asChild>
                     <button className="ml-auto hover:text-foreground">
@@ -985,7 +1027,7 @@ function CommentCard({
             {Object.entries(reactions).map(([emoji, users]) => {
               const mine =
                 !!currentUserEmail && users.includes(currentUserEmail);
-              return (
+              return canComment ? (
                 <button
                   key={emoji}
                   type="button"
@@ -1012,6 +1054,13 @@ function CommentCard({
                 >
                   {emoji} {users.length}
                 </button>
+              ) : (
+                <span
+                  key={emoji}
+                  className="text-[11px] rounded-full px-1.5 py-0.5 flex items-center gap-1 bg-accent border border-transparent"
+                >
+                  {emoji} {users.length}
+                </span>
               );
             })}
           </div>

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

@@ -49,6 +49,7 @@ 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";
+import { preferredThumbnailVariant } from "../../../shared/share-meta";
 
 function absoluteAppUrl(path: string): string {
   if (typeof window === "undefined") return "";
@@ -59,7 +60,7 @@ export interface ShareRecordingPopoverProps {
   recordingId: string;
   recordingTitle?: string;
   initialVisibility?: Visibility | null;
-  initialRole?: "owner" | "admin" | "editor" | "viewer";
+  initialRole?: "owner" | "admin" | "editor" | "commenter" | "viewer";
   videoUrl?: string | null;
   thumbnailUrl?: string | null;
   animatedThumbnailUrl?: string | null;
@@ -183,7 +184,7 @@ function ShareRecordingContent({
   recordingId: string;
   recordingTitle?: string;
   initialVisibility?: Visibility | null;
-  initialRole?: "owner" | "admin" | "editor" | "viewer";
+  initialRole?: "owner" | "admin" | "editor" | "commenter" | "viewer";
   videoUrl?: string | null;
   thumbnailUrl?: string | null;
   animatedThumbnailUrl?: string | null;
@@ -273,9 +274,9 @@ function ShareRecordingContent({
             sharesQuery={sharesQuery}
             canManage={canManage}
             roleCopy={{
-              viewer: {
-                label: t("shareUi.recordingViewer.label"),
-                description: t("shareUi.recordingViewer.description"),
+              commenter: {
+                label: t("shareUi.recordingCommenter.label"),
+                description: t("shareUi.recordingCommenter.description"),
               },
             }}
           />
@@ -336,10 +337,13 @@ function LinkTab({
   const isLoomRecording = isLoomRecordingProp || isLoomEmbedUrl(videoUrl);
   const emailPreviewThumbnailUrl = useMemo(() => {
     if (!isPublic || hasPassword !== false || !sharesLoaded) return null;
-    const candidate = animatedThumbnailUrl || thumbnailUrl;
-    if (!candidate) return null;
+    const variant = preferredThumbnailVariant({
+      thumbnailUrl,
+      animatedThumbnailUrl,
+    });
+    if (!variant) return null;
 
-    const query = animatedThumbnailUrl ? "?animated=1" : "";
+    const query = variant === "animated" ? "?animated=1" : "";
     return absoluteAppUrl(
       `/api/thumbnail/${encodeURIComponent(recordingId)}${query}`,
     );

package/corpus/templates/clips/app/components/player/timestamped-comment-button.tsx

@@ -11,6 +11,7 @@ import { msToClock } from "./scrubber";
 
 interface TimestampedCommentButtonProps {
   enableComments: boolean;
+  canComment: boolean;
   onOpen: () => void;
   className?: string;
 }
@@ -18,11 +19,12 @@ interface TimestampedCommentButtonProps {
 /** Trigger that opens the docked comment composer, pinned to the current time. */
 export function TimestampedCommentButton({
   enableComments,
+  canComment,
   onOpen,
   className,
 }: TimestampedCommentButtonProps) {
   const t = useT();
-  if (!enableComments) return null;
+  if (!enableComments || !canComment) return null;
   return (
     <Button
       type="button"

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

@@ -223,7 +223,7 @@ export interface VideoPlayerProps {
    * Viewer role for this recording. When `owner`, we opportunistically capture
    * a visible frame for missing or blank auto-generated library thumbnails.
    */
-  role?: "owner" | "admin" | "editor" | "viewer";
+  role?: "owner" | "admin" | "editor" | "commenter" | "viewer";
   /**
    * Called with the live `<video>` DOM node whenever it is created or
    * destroyed (e.g. swapping to/from the Loom iframe or unsupported-format

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

@@ -39,7 +39,7 @@ import { cn } from "@/lib/utils";
 // ---------------------------------------------------------------------------
 
 export type Visibility = "private" | "org" | "public";
-export type Role = "viewer" | "editor" | "admin";
+export type Role = "viewer" | "commenter" | "editor" | "admin";
 
 export interface RoleCopy {
   label: string;
@@ -77,6 +77,7 @@ export const VIS_META: Record<Visibility, { Icon: typeof IconLock }> = {
 
 export const ROLE_OPTIONS: Array<{ value: Role; label: string }> = [
   { value: "viewer", label: "Viewer" },
+  { value: "commenter", label: "Commenter" },
   { value: "editor", label: "Editor" },
   { value: "admin", label: "Admin" },
 ];

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

@@ -505,10 +505,11 @@ const messages = {
     },
     roles: {
       viewer: "Viewer",
+      commenter: "Commenter",
       editor: "Editor",
       admin: "Admin",
     },
-    recordingViewer: {
+    recordingCommenter: {
       label: "Commenter",
       description: "Can view, comment, and react",
     },

package/corpus/templates/clips/app/lib/public-meeting.ts

@@ -43,7 +43,7 @@ export interface PublicMeeting {
 export interface PublicMeetingPayload {
   meeting: PublicMeeting;
   viewer: {
-    role: "owner" | "admin" | "editor" | "viewer";
+    role: "owner" | "admin" | "editor" | "commenter" | "viewer";
     canEdit: boolean;
     isOwner: boolean;
   } | null;

package/corpus/templates/clips/app/lib/thumbnail-capture.ts

@@ -4,6 +4,8 @@ const PROBE_WIDTH = 40;
 const MIN_VISIBLE_MEAN_LUMA = 8;
 const MIN_VISIBLE_MAX_LUMA = 28;
 const MIN_VISIBLE_PIXEL_RATIO = 0.005;
+const SEEK_TOLERANCE_SECONDS = 0.25;
+const DEFAULT_SEEK_TIMEOUT_MS = 5_000;
 
 function resolveAppUrl(url: string | null | undefined): string | undefined {
   if (!url) return undefined;
@@ -122,6 +124,75 @@ export async function captureVideoThumbnailBlob(
   });
 }
 
+export function seekVideoToTime(
+  video: HTMLVideoElement,
+  timeMs: number,
+  options: { timeoutMs?: number } = {},
+): Promise<void> {
+  const targetSeconds = Math.max(0, timeMs) / 1000;
+  if (!Number.isFinite(targetSeconds)) {
+    return Promise.reject(new Error("Thumbnail time must be finite"));
+  }
+
+  const timeoutMs = options.timeoutMs ?? DEFAULT_SEEK_TIMEOUT_MS;
+  const hasTargetTime = () =>
+    Number.isFinite(video.currentTime) &&
+    Math.abs(video.currentTime - targetSeconds) <= SEEK_TOLERANCE_SECONDS;
+
+  if (video.readyState >= 2 && hasTargetTime()) return Promise.resolve();
+
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+
+    const cleanup = () => {
+      video.removeEventListener("loadedmetadata", requestSeek);
+      video.removeEventListener("seeked", handleSeeked);
+      video.removeEventListener("error", handleError);
+      if (timeout) clearTimeout(timeout);
+    };
+
+    const finish = (error?: Error) => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      if (error) reject(error);
+      else resolve();
+    };
+
+    const handleSeeked = () => {
+      if (hasTargetTime()) {
+        finish();
+      } else {
+        finish(new Error("Thumbnail seek landed on the wrong frame"));
+      }
+    };
+
+    const handleError = () =>
+      finish(new Error("Thumbnail video could not seek"));
+
+    const requestSeek = () => {
+      if (settled) return;
+      try {
+        video.currentTime = targetSeconds;
+        if (video.readyState >= 2 && hasTargetTime()) finish();
+      } catch {
+        finish(new Error("Thumbnail video could not seek"));
+      }
+    };
+
+    video.addEventListener("loadedmetadata", requestSeek);
+    video.addEventListener("seeked", handleSeeked);
+    video.addEventListener("error", handleError);
+    timeout = setTimeout(
+      () => finish(new Error("Thumbnail seek timed out")),
+      timeoutMs,
+    );
+
+    if (video.readyState >= 1) requestSeek();
+  });
+}
+
 export async function uploadRecordingThumbnail(
   recordingId: string,
   blob: Blob,