@agent-native/core 0.163.1 → 0.163.3

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

@@ -10,12 +10,13 @@
 import { defineAction } from "@agent-native/core";
 import { writeAppState } from "@agent-native/core/application-state";
 import { getRequestUserEmail } from "@agent-native/core/server/request-context";
-import { assertAccess } from "@agent-native/core/sharing";
+import { assertAccess, ForbiddenError } from "@agent-native/core/sharing";
 import { eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import { notifyRecordingComment } from "../server/lib/activity-notifications.js";
+import { isRecordingExpired } from "../server/lib/recording-page-access.js";
 import { nanoid } from "../server/lib/recordings.js";
 
 export default defineAction({
@@ -47,7 +48,15 @@ export default defineAction({
       .describe("Display name for the author (falls back to email local part)"),
   }),
   run: async (args) => {
-    await assertAccess("recording", args.recordingId, "commenter");
+    // Commenting is open to any signed-in viewer with access to the
+    // recording, not just an explicitly-granted "commenter" role — the
+    // `authorEmail` check below is what actually requires an account.
+    const access = await assertAccess("recording", args.recordingId, "viewer");
+    if (
+      isRecordingExpired((access.resource as { expiresAt?: string }).expiresAt)
+    ) {
+      throw new ForbiddenError("Recording has expired");
+    }
 
     const authorEmail = getRequestUserEmail();
     if (!authorEmail) {

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

@@ -13,6 +13,7 @@ import { eq, or } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { isRecordingExpired } from "../server/lib/recording-page-access.js";
 
 export default defineAction({
   description:
@@ -32,7 +33,19 @@ export default defineAction({
     const userEmail = getRequestUserEmail();
     const isAuthor = !!userEmail && existing.authorEmail === userEmail;
 
-    await assertAccess("recording", existing.recordingId, "commenter");
+    // Any signed-in viewer with access to the recording may delete their own
+    // comment, matching add-comment's top-level comment gate; a non-author
+    // still needs editor+ (checked below).
+    const access = await assertAccess(
+      "recording",
+      existing.recordingId,
+      "viewer",
+    );
+    if (
+      isRecordingExpired((access.resource as { expiresAt?: string }).expiresAt)
+    ) {
+      throw new ForbiddenError("Recording has expired");
+    }
 
     if (!isAuthor) {
       try {

package/corpus/templates/clips/actions/get-recording-player-data.ts

@@ -155,7 +155,11 @@ export default defineAction({
       access.role === "owner" ||
       access.role === "admin" ||
       access.role === "editor";
-    const canCommentRecording = canEditRecording || access.role === "commenter";
+    // Reaching this action already requires a signed-in session with at
+    // least viewer access to the recording (`resolveAccess` above), so any
+    // resolved role qualifies to comment/react — no separate "commenter"
+    // tier.
+    const canCommentRecording = true;
     // This action is on a 1-3s poll from the player, so every read here shares
     // one Promise.all instead of adding serial round-trips.
     const [

package/corpus/templates/clips/actions/react-to-comment.ts

@@ -44,7 +44,10 @@ export default defineAction({
       if (!existing) throw new Error(`Comment not found: ${args.commentId}`);
 
       if (attempt === 0) {
-        await assertAccess("recording", existing.recordingId, "commenter");
+        // Same floor as add-comment/react-to-recording: any signed-in
+        // viewer with access may react (the `viewerEmail` check above
+        // requires an account).
+        await assertAccess("recording", existing.recordingId, "viewer");
       }
 
       const previousJson = existing.emojiReactionsJson;

package/corpus/templates/clips/actions/react-to-recording.ts

@@ -30,7 +30,10 @@ export default defineAction({
     viewerName: z.string().optional(),
   }),
   run: async (args) => {
-    await assertAccess("recording", args.recordingId, "commenter");
+    // Reacting is open to any signed-in viewer with access to the
+    // recording, not just an explicitly-granted "commenter" role — the
+    // `viewerEmail` check below is what actually requires an account.
+    await assertAccess("recording", args.recordingId, "viewer");
 
     const viewerEmail = getRequestUserEmail();
     if (!viewerEmail) {

package/corpus/templates/clips/actions/reply-to-comment.ts

@@ -10,12 +10,13 @@
 import { defineAction } from "@agent-native/core";
 import { writeAppState } from "@agent-native/core/application-state";
 import { getRequestUserEmail } from "@agent-native/core/server/request-context";
-import { assertAccess } from "@agent-native/core/sharing";
+import { assertAccess, ForbiddenError } from "@agent-native/core/sharing";
 import { eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import { notifyRecordingComment } from "../server/lib/activity-notifications.js";
+import { isRecordingExpired } from "../server/lib/recording-page-access.js";
 import { nanoid } from "../server/lib/recordings.js";
 
 export default defineAction({
@@ -38,7 +39,19 @@ export default defineAction({
       .limit(1);
     if (!parent) throw new Error(`Comment not found: ${args.commentId}`);
 
-    await assertAccess("recording", parent.recordingId, "commenter");
+    // Any signed-in viewer with access to the recording may reply, matching
+    // add-comment's top-level comment gate — there's no separate
+    // "commenter" tier to require.
+    const access = await assertAccess(
+      "recording",
+      parent.recordingId,
+      "viewer",
+    );
+    if (
+      isRecordingExpired((access.resource as { expiresAt?: string }).expiresAt)
+    ) {
+      throw new ForbiddenError("Recording has expired");
+    }
 
     const authorEmail = getRequestUserEmail();
     if (!authorEmail) {

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

@@ -9,11 +9,13 @@
 import { defineAction } from "@agent-native/core";
 import { writeAppState } from "@agent-native/core/application-state";
 import { getRequestUserEmail } from "@agent-native/core/server/request-context";
-import { assertAccess } from "@agent-native/core/sharing";
+import { assertAccess, ForbiddenError } from "@agent-native/core/sharing";
 import { eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { isRecordingExpired } from "../server/lib/recording-page-access.js";
+import { sameOwnerEmail } from "../server/lib/recordings.js";
 
 const cliBoolean = z.preprocess((value) => {
   if (value === "true") return true;
@@ -40,11 +42,35 @@ export default defineAction({
       .limit(1);
     if (!existing) throw new Error(`Comment not found: ${args.id}`);
 
-    await assertAccess("recording", existing.recordingId, "commenter");
-    if (!getRequestUserEmail()) {
+    const userEmail = getRequestUserEmail();
+    if (!userEmail) {
       throw new Error("Sign in required to resolve comments.");
     }
 
+    const access = await assertAccess(
+      "recording",
+      existing.recordingId,
+      "viewer",
+    );
+    if (
+      isRecordingExpired((access.resource as { expiresAt?: string }).expiresAt)
+    ) {
+      throw new ForbiddenError("Recording has expired");
+    }
+
+    if (!sameOwnerEmail(existing.authorEmail, userEmail)) {
+      try {
+        await assertAccess("recording", existing.recordingId, "editor");
+      } catch (err) {
+        if (err instanceof ForbiddenError) {
+          throw new ForbiddenError(
+            "Only the comment author or a recording editor can resolve this comment.",
+          );
+        }
+        throw err;
+      }
+    }
+
     const next = args.resolved ?? !existing.resolved;
     const now = new Date().toISOString();
 

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

@@ -13,6 +13,7 @@ import { and, eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { isRecordingExpired } from "../server/lib/recording-page-access.js";
 import { sameOwnerEmail } from "../server/lib/recordings.js";
 
 export default defineAction({
@@ -42,7 +43,18 @@ export default defineAction({
       .limit(1);
     if (!existing) throw new Error(`Comment not found: ${args.id}`);
 
-    await assertAccess("recording", existing.recordingId, "commenter");
+    // Any signed-in viewer with access to the recording may edit their own
+    // comment, matching add-comment's top-level comment gate.
+    const access = await assertAccess(
+      "recording",
+      existing.recordingId,
+      "viewer",
+    );
+    if (
+      isRecordingExpired((access.resource as { expiresAt?: string }).expiresAt)
+    ) {
+      throw new ForbiddenError("Recording has expired");
+    }
 
     if (!sameOwnerEmail(existing.authorEmail, userEmail)) {
       throw new ForbiddenError(

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

@@ -6,6 +6,7 @@ import {
   IconVolume,
   IconVolumeOff,
   IconMaximize,
+  IconMessagePlus,
   IconPictureInPicture,
   IconSubtitles,
   IconRectangle,
@@ -33,6 +34,7 @@ import {
 import { PLAYBACK_SPEED_OPTIONS } from "@/lib/playback-speed";
 import { cn } from "@/lib/utils";
 
+import { ReactionsTray } from "./reactions-tray";
 import { Scrubber, msToClock } from "./scrubber";
 
 export const SPEED_OPTIONS = PLAYBACK_SPEED_OPTIONS;
@@ -64,6 +66,16 @@ export interface PlayerControlsProps {
   onToggleFullscreen: () => void;
   onToggleTheater?: () => void;
   menuPortalContainer?: HTMLElement | null;
+  /**
+   * Surfaces the reaction tray and a comment-composer trigger inline in this
+   * bar (Loom-style), for contexts — namely fullscreen — where the caller's
+   * own reaction/comment row would otherwise be hidden.
+   */
+  showReactionsAndComment?: boolean;
+  enableReactions?: boolean;
+  onReact?: (emoji: string) => void;
+  enableComments?: boolean;
+  onAddComment?: () => void;
 }
 
 export function PlayerControls(props: PlayerControlsProps) {
@@ -94,6 +106,11 @@ export function PlayerControls(props: PlayerControlsProps) {
     onToggleFullscreen,
     onToggleTheater,
     menuPortalContainer,
+    showReactionsAndComment,
+    enableReactions,
+    onReact,
+    enableComments,
+    onAddComment,
   } = props;
 
   const [volumePopoverOpen, setVolumePopoverOpen] = useState(false);
@@ -116,7 +133,8 @@ export function PlayerControls(props: PlayerControlsProps) {
         reactions={reactions}
       />
 
-      <div className="flex min-w-0 items-center gap-1.5 text-white">
+      {/* guard:allow-raw-color -- video controls overlay the dark player scrim itself, not themed app chrome, so text stays white regardless of light/dark mode */}
+      <div className="relative flex min-w-0 items-center gap-1.5 text-white">
         <IconBtn
           onClick={onPlayPause}
           tooltip={isPlaying ? "Pause (K)" : "Play (K)"}
@@ -280,6 +298,30 @@ export function PlayerControls(props: PlayerControlsProps) {
             className={cn("h-5 w-5", isFullscreen && "rotate-180")}
           />
         </IconBtn>
+
+        {showReactionsAndComment ? (
+          <div
+            data-player-ui
+            className="pointer-events-none absolute inset-x-0 top-1/2 flex -translate-y-1/2 items-center justify-center gap-2"
+          >
+            {enableReactions && onReact ? (
+              <div className="pointer-events-auto">
+                <ReactionsTray onReact={onReact} />
+              </div>
+            ) : null}
+
+            {enableComments && onAddComment ? (
+              <div className="pointer-events-auto">
+                <IconBtn
+                  onClick={onAddComment}
+                  tooltip={t("commentsPanel.commentButton")}
+                >
+                  <IconMessagePlus className="h-5 w-5" />
+                </IconBtn>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
       </div>
     </div>
   );

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

@@ -45,6 +45,8 @@ interface TimestampedCommentBarProps {
   onClose: () => void;
   onAdded?: () => void;
   className?: string;
+  draft?: string;
+  onDraftChange?: (value: string) => void;
 }
 
 /**
@@ -57,9 +59,13 @@ export function TimestampedCommentBar({
   onClose,
   onAdded,
   className,
+  draft: controlledDraft,
+  onDraftChange,
 }: TimestampedCommentBarProps) {
   const t = useT();
-  const [draft, setDraft] = useState("");
+  const [uncontrolledDraft, setUncontrolledDraft] = useState("");
+  const draft = controlledDraft ?? uncontrolledDraft;
+  const setDraft = onDraftChange ?? setUncontrolledDraft;
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   const addComment = useActionMutation("add-comment");
@@ -71,7 +77,7 @@ export function TimestampedCommentBar({
   const insertAtCursor = (text: string) => {
     const el = textareaRef.current;
     if (!el) {
-      setDraft((d) => d + text);
+      setDraft(draft + text);
       return;
     }
     const start = el.selectionStart ?? draft.length;
@@ -101,7 +107,10 @@ export function TimestampedCommentBar({
   };
 
   return (
-    <div className={cn("absolute inset-x-0 bottom-0 z-30 p-3", className)}>
+    <div
+      data-player-ui
+      className={cn("absolute inset-x-0 bottom-0 z-30 p-3", className)}
+    >
       <div className="rounded-xl border border-border bg-background/95 p-3 shadow-lg backdrop-blur">
         <Textarea
           ref={textareaRef}

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

@@ -153,6 +153,13 @@ type WebkitFullscreenVideo = HTMLVideoElement & {
 
 export interface VideoPlayerHandle {
   video: HTMLVideoElement | null;
+  /**
+   * The player's own root element — the element the browser Fullscreen API
+   * actually paints when fullscreen. Callers portal fullscreen-only overlays
+   * (e.g. a comment composer) into this so they stay visible instead of
+   * exiting fullscreen.
+   */
+  container: HTMLDivElement | null;
   play: () => Promise<void> | void;
   pause: () => void;
   seek: (ms: number) => void;
@@ -235,6 +242,25 @@ export interface VideoPlayerProps {
   onVideoElementChange?: (video: HTMLVideoElement | null) => void;
   /** Called when the viewer clicks the timestamped-comment overlay. */
   onCommentClick?: () => void;
+  /**
+   * Reaction tray + comment-composer trigger to surface while fullscreen.
+   * The real Fullscreen API only paints this component's own subtree, so
+   * the parent route's normal reaction/comment row (rendered as a sibling of
+   * `VideoPlayer`) disappears on entering fullscreen. When these are
+   * provided, an equivalent control row renders inside the player itself,
+   * visible only while `isFullscreen` is true.
+   */
+  enableReactions?: boolean;
+  onReact?: (emoji: string) => void;
+  enableComments?: boolean;
+  /**
+   * Opens the existing comment composer/panel. While fullscreen, the caller
+   * should portal that composer into `VideoPlayerHandle.container` (via the
+   * player ref) instead of exiting fullscreen, so it stays visible.
+   */
+  onAddComment?: () => void;
+  /** Fires whenever the player enters or exits fullscreen. */
+  onFullscreenChange?: (isFullscreen: boolean) => void;
 }
 
 export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
@@ -275,6 +301,11 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       role,
       onVideoElementChange,
       onCommentClick,
+      enableReactions,
+      onReact,
+      enableComments,
+      onAddComment,
+      onFullscreenChange,
     } = props;
 
     const resolvedVideoSrc = useMemo(() => {
@@ -1032,6 +1063,9 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
         get video() {
           return videoRef.current;
         },
+        get container() {
+          return containerRef.current;
+        },
         play: requestPlay,
         pause: pauseVideo,
         seek: seekToVisibleMs,
@@ -1049,6 +1083,10 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       [applySpeed, pauseVideo, requestPlay, seekToVisibleMs],
     );
 
+    useEffect(() => {
+      onFullscreenChange?.(isFullscreen);
+    }, [isFullscreen, onFullscreenChange]);
+
     // Apply initial playbackRate and start position.
     useEffect(() => {
       const v = videoRef.current;
@@ -1976,6 +2014,11 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
               onToggleFullscreen={() => void toggleFullscreenInternal()}
               onToggleTheater={onTheaterToggle}
               menuPortalContainer={fullscreenMenuContainer}
+              showReactionsAndComment={isFullscreen}
+              enableReactions={enableReactions}
+              onReact={onReact}
+              enableComments={enableComments}
+              onAddComment={onAddComment}
             />
           </div>
         ) : null}

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

@@ -47,6 +47,7 @@ import {
 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import {
   Link,
   useParams,
@@ -254,6 +255,8 @@ export default function RecordingPage() {
   const [currentMs, setCurrentMs] = useState(0);
   const [commentOpen, setCommentOpen] = useState(false);
   const [commentAtMs, setCommentAtMs] = useState(0);
+  const [commentDraft, setCommentDraft] = useState("");
+  const [isPlayerFullscreen, setIsPlayerFullscreen] = useState(false);
   const isCompactLayout = useIsCompactRecordingLayout();
   // Resolve the playback position for reactions/comments. Native <video> exposes
   // a live `currentTime`; Loom embeds render in a cross-origin iframe with no
@@ -420,11 +423,10 @@ export default function RecordingPage() {
   const transcriptCleanup = playerDataQ.data?.transcript?.cleanup ?? null;
   const ctas = playerDataQ.data?.ctas ?? [];
   const canEdit = role === "owner" || role === "admin" || role === "editor";
-  const canComment =
-    role === "owner" ||
-    role === "admin" ||
-    role === "editor" ||
-    role === "commenter";
+  // Reaching this page already requires a signed-in session with at least
+  // viewer access to the recording, so any resolved role qualifies to
+  // comment/react — no separate "commenter" tier.
+  const canComment = role != null;
   useEffect(() => {
     if (!canEdit && (panel === "insights" || panel === "settings")) {
       setPanel("comments");
@@ -1608,19 +1610,74 @@ export default function RecordingPage() {
                   onCtaClick={() => tracking.reportCtaClick()}
                   onTimeUpdate={(ms) => setCurrentMs(ms)}
                   onCommentClick={openCommentsPanel}
+                  onFullscreenChange={setIsPlayerFullscreen}
+                  enableComments={recording.enableComments}
+                  onAddComment={() => {
+                    // The side panel `openCommentsPanel` opens is a sibling
+                    // outside the element the Fullscreen API paints, so it's
+                    // invisible while fullscreen -- portal the composer
+                    // there instead, same as the non-compact layout.
+                    if (isCompactLayout && !isPlayerFullscreen) {
+                      openCommentsPanel();
+                      return;
+                    }
+                    setCommentAtMs(resolvePlaybackMs());
+                    setCommentOpen(true);
+                  }}
+                  enableReactions={recording.enableReactions}
+                  onReact={(emoji) => {
+                    tracking.reportReaction(emoji);
+                    const liveMs = resolvePlaybackMs();
+                    fetch(
+                      agentNativePath(
+                        "/_agent-native/actions/react-to-recording",
+                      ),
+                      {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({
+                          recordingId: recording.id,
+                          emoji,
+                          videoTimestampMs: liveMs,
+                        }),
+                      },
+                    )
+                      .then((res) => {
+                        if (!res.ok)
+                          throw new Error(`react failed: ${res.status}`);
+                        return playerDataQ.refetch();
+                      })
+                      .catch((err) =>
+                        console.warn("[clips] react failed", err),
+                      );
+                  }}
                   className="h-full w-full rounded-none sm:rounded-xl"
                 />
-                {commentOpen && canComment ? (
-                  <TimestampedCommentBar
-                    recordingId={recording.id}
-                    atMs={commentAtMs}
-                    onClose={() => setCommentOpen(false)}
-                    onAdded={() => {
-                      setPanel("comments");
-                      void playerDataQ.refetch();
-                    }}
-                  />
-                ) : null}
+                {commentOpen && canComment
+                  ? (() => {
+                      const composer = (
+                        <TimestampedCommentBar
+                          recordingId={recording.id}
+                          atMs={commentAtMs}
+                          draft={commentDraft}
+                          onDraftChange={setCommentDraft}
+                          onClose={() => setCommentOpen(false)}
+                          onAdded={() => {
+                            setPanel("comments");
+                            void playerDataQ.refetch();
+                          }}
+                        />
+                      );
+                      // The Fullscreen API only paints the player's own
+                      // element, so portal the composer there instead of
+                      // exiting fullscreen when it's open.
+                      const fullscreenContainer =
+                        isPlayerFullscreen && playerRef.current?.container;
+                      return fullscreenContainer
+                        ? createPortal(composer, fullscreenContainer)
+                        : composer;
+                    })()
+                  : null}
               </div>
 
               {/* Title + reactions row */}
@@ -1697,8 +1754,14 @@ export default function RecordingPage() {
                               }),
                             },
                           )
-                            .then(() => playerDataQ.refetch())
-                            .catch(() => {});
+                            .then((res) => {
+                              if (!res.ok)
+                                throw new Error(`react failed: ${res.status}`);
+                              return playerDataQ.refetch();
+                            })
+                            .catch((err) =>
+                              console.warn("[clips] react failed", err),
+                            );
                         }}
                       />
                     ) : null}