@agent-native/core 0.152.1 → 0.153.1

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/meetings/share-meeting-dialog.tsx

@@ -4,7 +4,7 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { IconCheck, IconLink, IconMail } from "@tabler/icons-react";
+import { IconLink, IconMail } from "@tabler/icons-react";
 import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { toast } from "sonner";
 
@@ -192,57 +192,40 @@ function LinkTab({
   };
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       <GeneralAccessSelect
         visibility={visibility}
         canManage={canManage}
         isPending={isPending}
         onChange={(next) => setResourceVisibility(next)}
+        showDescription={false}
       />
 
-      <div>
-        <div className="mb-2 text-xs font-semibold">
-          {t("shareMeeting.sharedContent")}
-        </div>
-        <div className="rounded-md border border-border">
-          <div className="flex items-center gap-3 border-b border-border px-3 py-2.5">
-            <span
-              aria-hidden
-              className="inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground"
-            >
-              <IconCheck size={12} strokeWidth={2.5} />
-            </span>
-            <span className="text-sm">{t("shareMeeting.summaryIncluded")}</span>
-          </div>
-          <div className="flex items-start justify-between gap-4 px-3 py-2.5">
-            <div className="min-w-0">
-              <label
-                htmlFor={`meeting-share-transcript-${meetingId}`}
-                className="text-sm font-medium"
-              >
-                {t("shareMeeting.includeTranscript")}
-              </label>
-              <p
-                id={`meeting-share-transcript-description-${meetingId}`}
-                className="mt-0.5 text-xs text-muted-foreground"
-              >
-                {transcriptReady
-                  ? t("shareMeeting.includeTranscriptDescription")
-                  : t("shareMeeting.transcriptUnavailable")}
-              </p>
-            </div>
-            <Switch
-              id={`meeting-share-transcript-${meetingId}`}
-              checked={includeTranscript}
-              onCheckedChange={handleTranscriptSharingChange}
-              disabled={
-                !canManage || !transcriptReady || updateMeeting.isPending
-              }
-              aria-describedby={`meeting-share-transcript-description-${meetingId}`}
-              className="mt-0.5 shrink-0"
-            />
-          </div>
+      <div className="flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2.5">
+        <div className="min-w-0">
+          <label
+            htmlFor={`meeting-share-transcript-${meetingId}`}
+            className="text-sm font-medium"
+          >
+            {t("shareMeeting.includeTranscript")}
+          </label>
+          <p
+            id={`meeting-share-transcript-description-${meetingId}`}
+            className="sr-only"
+          >
+            {transcriptReady
+              ? t("shareMeeting.includeTranscriptDescription")
+              : t("shareMeeting.transcriptUnavailable")}
+          </p>
         </div>
+        <Switch
+          id={`meeting-share-transcript-${meetingId}`}
+          checked={includeTranscript}
+          onCheckedChange={handleTranscriptSharingChange}
+          disabled={!canManage || !transcriptReady || updateMeeting.isPending}
+          aria-describedby={`meeting-share-transcript-description-${meetingId}`}
+          className="shrink-0"
+        />
       </div>
 
       <CopyField label={t("clipsFinalRaw.shareLink")} value={shareUrl} />

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>