@agent-native/core 0.163.2 → 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}

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

@@ -34,6 +34,7 @@ import {
   type FormEvent,
   type ReactNode,
 } from "react";
+import { createPortal } from "react-dom";
 import {
   type HeadersArgs,
   type LoaderFunctionArgs,
@@ -59,7 +60,10 @@ import { RequestAccessDialog } from "@/components/player/request-access-dialog";
 import { ShareRecordingPopover } from "@/components/player/share-dialog";
 import { SignInPromptDialog } from "@/components/player/sign-in-prompt-dialog";
 import { SignedOutShareActions } from "@/components/player/signed-out-share-actions";
-import { TimestampedCommentButton } from "@/components/player/timestamped-comment-button";
+import {
+  TimestampedCommentBar,
+  TimestampedCommentButton,
+} from "@/components/player/timestamped-comment-button";
 import { TranscriptPanel } from "@/components/player/transcript-panel";
 import {
   VideoPlayer,
@@ -446,6 +450,10 @@ export default function ShareRoute() {
   });
   const [pwError, setPwError] = useState<string | null>(null);
   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 { session, isLoading: sessionLoading } = useSession();
   const requestAccess = useActionMutation<
     {
@@ -664,7 +672,10 @@ export default function ShareRoute() {
     viewerRole === "owner" ||
     viewerRole === "admin" ||
     viewerRole === "editor";
-  const viewerCanComment = Boolean(dataQ.data?.data?.viewer?.canComment);
+  // Any signed-in viewer with access to the recording may comment or react —
+  // an anonymous viewer sees the same controls but triggers the sign-in
+  // prompt instead (see `requireSignIn` below).
+  const viewerCanComment = Boolean(session) && viewerRole != null;
   const viewerIsOwner = Boolean(dataQ.data?.data?.viewer?.isOwner);
   const canReshareLink =
     (viewerRole === "viewer" || viewerRole === "commenter") &&
@@ -1214,7 +1225,7 @@ export default function ShareRoute() {
         </header>
 
         <div className="flex flex-col gap-4 overflow-hidden p-0 sm:p-4 lg:min-h-0 lg:flex-1">
-          <div className="aspect-video w-full lg:min-h-0 lg:flex-1 lg:aspect-auto">
+          <div className="relative aspect-video w-full lg:min-h-0 lg:flex-1 lg:aspect-auto">
             <VideoPlayer
               ref={playerRef}
               onVideoElementChange={setTrackedVideoEl}
@@ -1239,8 +1250,88 @@ export default function ShareRoute() {
               onCtaClick={() => tracking.reportCtaClick()}
               onTimeUpdate={(ms) => setCurrentMs(ms)}
               onCommentClick={() => setPanel("comments")}
+              onFullscreenChange={setIsPlayerFullscreen}
+              enableComments={recording.enableComments}
+              onAddComment={() => {
+                if (!session) {
+                  requireSignIn("comment");
+                  return;
+                }
+                const liveCt = isLoomEmbedBacked
+                  ? null
+                  : playerRef.current?.video?.currentTime;
+                const liveMs =
+                  typeof liveCt === "number" &&
+                  Number.isFinite(liveCt) &&
+                  liveCt >= 0 &&
+                  liveCt < 1e7
+                    ? Math.floor(liveCt * 1000)
+                    : currentMs;
+                setCommentAtMs(liveMs);
+                setCommentOpen(true);
+              }}
+              enableReactions={recording.enableReactions}
+              onReact={(emoji) => {
+                if (!session) {
+                  requireSignIn("react");
+                  return;
+                }
+                tracking.reportReaction(emoji);
+                const liveCt = isLoomEmbedBacked
+                  ? null
+                  : playerRef.current?.video?.currentTime;
+                const liveMs =
+                  typeof liveCt === "number" &&
+                  Number.isFinite(liveCt) &&
+                  liveCt >= 0 &&
+                  liveCt < 1e7
+                    ? Math.floor(liveCt * 1000)
+                    : currentMs;
+                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 dataQ.refetch();
+                  })
+                  .catch((err) => console.warn("[clips] react failed", err));
+              }}
               className="h-full w-full rounded-none sm:rounded-xl"
             />
+            {commentOpen && viewerCanComment
+              ? (() => {
+                  const composer = (
+                    <TimestampedCommentBar
+                      recordingId={recording.id}
+                      atMs={commentAtMs}
+                      draft={commentDraft}
+                      onDraftChange={setCommentDraft}
+                      onClose={() => setCommentOpen(false)}
+                      onAdded={() => {
+                        setPanel("comments");
+                        void dataQ.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>
 
           <div className="flex shrink-0 flex-col gap-3 px-4 pb-4 sm:flex-row sm:items-start sm:px-0 sm:pb-0">
@@ -1252,56 +1343,76 @@ export default function ShareRoute() {
               ) : null}
             </div>
             <div className="flex max-w-full flex-col items-stretch gap-2 sm:items-end">
-              <TimestampedCommentButton
-                enableComments={recording.enableComments}
-                canComment={!session || viewerCanComment}
-                className="shrink-0"
-                onOpen={() => {
-                  if (!session) {
-                    requireSignIn("comment");
-                    return;
-                  }
-                  if (viewerCanComment) setPanel("comments");
-                }}
-              />
-              {recording.enableReactions ? (
-                <ReactionsTray
-                  disabled={!viewerCanComment}
-                  onReact={(emoji) => {
-                    if (!session) {
-                      requireSignIn("react");
-                      return;
-                    }
-                    tracking.reportReaction(emoji);
-                    const liveCt = isLoomEmbedBacked
-                      ? null
-                      : playerRef.current?.video?.currentTime;
-                    const liveMs =
-                      typeof liveCt === "number" &&
-                      Number.isFinite(liveCt) &&
-                      liveCt >= 0 &&
-                      liveCt < 1e7
-                        ? Math.floor(liveCt * 1000)
-                        : currentMs;
-                    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(() => dataQ.refetch())
-                      .catch(() => {});
-                  }}
-                />
-              ) : null}
+              <div className="flex flex-wrap items-center gap-2 sm:justify-end">
+                {recording.enableComments ? (
+                  <TimestampedCommentButton
+                    enableComments={recording.enableComments}
+                    canComment
+                    className="shrink-0"
+                    onOpen={() => {
+                      if (!session) {
+                        requireSignIn("comment");
+                        return;
+                      }
+                      const liveCt = isLoomEmbedBacked
+                        ? null
+                        : playerRef.current?.video?.currentTime;
+                      const liveMs =
+                        typeof liveCt === "number" &&
+                        Number.isFinite(liveCt) &&
+                        liveCt >= 0 &&
+                        liveCt < 1e7
+                          ? Math.floor(liveCt * 1000)
+                          : currentMs;
+                      setCommentAtMs(liveMs);
+                      setCommentOpen(true);
+                    }}
+                  />
+                ) : null}
+                {recording.enableReactions ? (
+                  <ReactionsTray
+                    onReact={(emoji) => {
+                      if (!session) {
+                        requireSignIn("react");
+                        return;
+                      }
+                      tracking.reportReaction(emoji);
+                      const liveCt = isLoomEmbedBacked
+                        ? null
+                        : playerRef.current?.video?.currentTime;
+                      const liveMs =
+                        typeof liveCt === "number" &&
+                        Number.isFinite(liveCt) &&
+                        liveCt >= 0 &&
+                        liveCt < 1e7
+                          ? Math.floor(liveCt * 1000)
+                          : currentMs;
+                      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 dataQ.refetch();
+                        })
+                        .catch((err) =>
+                          console.warn("[clips] react failed", err),
+                        );
+                    }}
+                  />
+                ) : null}
+              </div>
               {viewerCanEdit && canDownloadRecording ? (
                 <Button
                   variant="outline"

package/corpus/templates/clips/server/routes/api/public-recording.get.ts

@@ -268,9 +268,13 @@ export default defineEventHandler(async (event) => {
     return { error: "Not found" };
   }
 
+  // Any signed-in viewer with access to the recording may comment or react —
+  // this covers an explicit share at any role (not just "commenter"), org
+  // membership, and a public link, which grants a viewer role that
+  // `resolveAccess` may not surface without an explicit share row.
   const viewerCanComment = Boolean(
     session?.email &&
-    (rec.visibility === "public" || viewerIsOwner || viewerIsOrgMember),
+    (rec.visibility === "public" || viewerAccess || viewerIsOrgMember),
   );
 
   // Expiry check

package/dist/client/EnvironmentBadge.d.ts

@@ -1,4 +1,7 @@
 import type { AgentNativeDeploymentEnvironment, AgentNativeConfig } from "../config.js";
+export declare const BETA_OPT_OUT_QUERY_PARAM = "agentNativeBetaOptOut";
+export declare const BETA_OPT_OUT_STORAGE_KEY = "agent-native:beta-opt-out-until";
+export declare const BETA_OPT_OUT_DURATION_MS: number;
 export interface EnvironmentBadgeTargets {
     betaHost: string;
     productionHost: string;
@@ -7,6 +10,8 @@ export declare function isBuilderIoEmployee(email: string | null | undefined): b
 export declare function resolveEnvironmentTargets(hostname: string | undefined): EnvironmentBadgeTargets | null;
 export declare function resolveEnvironmentChannel(config: AgentNativeConfig, hostname: string | undefined): Extract<AgentNativeDeploymentEnvironment, "beta" | "production"> | null;
 export declare function buildEnvironmentUrl(sourceHref: string, targetHost: string): string | null;
+export declare function isBetaOptOutActive(value: string | number | null | undefined, now?: number): boolean;
+export declare function buildEnvironmentOptOutUrl(sourceHref: string, targetHost: string, now?: number): string | null;
 /**
  * Small internal-only lane switcher for first-party hosted Agent-Native apps.
  * It is mounted inside the authenticated AppProviders shell so public pages,

package/dist/client/EnvironmentBadge.js

@@ -2,9 +2,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "@agent-native/toolkit/ui/button";
 import { Popover, PopoverContent, PopoverTrigger, } from "@agent-native/toolkit/ui/popover";
 import { IconExternalLink, IconGitBranch } from "@tabler/icons-react";
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
+import { trackEvent } from "./analytics.js";
 import { injectedAgentNativeConfig } from "./app-config.js";
 import { useSession } from "./use-session.js";
+export const BETA_OPT_OUT_QUERY_PARAM = "agentNativeBetaOptOut";
+export const BETA_OPT_OUT_STORAGE_KEY = "agent-native:beta-opt-out-until";
+export const BETA_OPT_OUT_DURATION_MS = 24 * 60 * 60 * 1000;
+const ENVIRONMENT_BETA_HOSTS = {
+    "agent-workspace.builder.io": "beta.agent-workspace.builder.io",
+    "analytics.agent-native.com": "beta.analytics.agent-native.com",
+    "assets.agent-native.com": "beta.assets.agent-native.com",
+    "brain.agent-native.com": "beta.brain.agent-native.com",
+    "calendar.agent-native.com": "beta.calendar.agent-native.com",
+    "chat.agent-native.com": "beta.chat.agent-native.com",
+    "clips.agent-native.com": "beta.clips.agent-native.com",
+    "content.agent-native.com": "beta.content.agent-native.com",
+    "crm.agent-native.com": "beta.crm.agent-native.com",
+    "design.agent-native.com": "beta.design.agent-native.com",
+    "dispatch.agent-native.com": "beta.dispatch.agent-native.com",
+    "factory.agent-native.com": "beta.factory.agent-native.com",
+    "forms.agent-native.com": "beta.forms.agent-native.com",
+    "macros.agent-native.com": "beta.macros.agent-native.com",
+    "mail.agent-native.com": "beta.mail.agent-native.com",
+    "plan.agent-native.com": "beta.plan.agent-native.com",
+    "slides.agent-native.com": "beta.slides.agent-native.com",
+};
 export function isBuilderIoEmployee(email) {
     return email?.trim().toLowerCase().endsWith("@builder.io") ?? false;
 }
@@ -13,12 +36,11 @@ export function resolveEnvironmentTargets(hostname) {
     if (!normalized)
         return null;
     const productionHost = normalized.replace(/^beta\./, "");
-    const isFirstPartyHost = productionHost.endsWith(".agent-native.com") ||
-        productionHost === "agent-workspace.builder.io";
-    if (!isFirstPartyHost)
+    const betaHost = ENVIRONMENT_BETA_HOSTS[productionHost];
+    if (!betaHost)
         return null;
     return {
-        betaHost: `beta.${productionHost}`,
+        betaHost,
         productionHost,
     };
 }
@@ -47,6 +69,68 @@ export function buildEnvironmentUrl(sourceHref, targetHost) {
         return null;
     }
 }
+export function isBetaOptOutActive(value, now = Date.now()) {
+    const expiry = typeof value === "number" ? value : Number(value);
+    return Number.isFinite(expiry) && expiry > now;
+}
+export function buildEnvironmentOptOutUrl(sourceHref, targetHost, now = Date.now()) {
+    const targetHref = buildEnvironmentUrl(sourceHref, targetHost);
+    if (!targetHref)
+        return null;
+    try {
+        const target = new URL(targetHref);
+        target.searchParams.set(BETA_OPT_OUT_QUERY_PARAM, String(now + BETA_OPT_OUT_DURATION_MS));
+        return target.toString();
+    }
+    catch {
+        // coercion-ok: buildEnvironmentUrl already validated the URL.
+        return null;
+    }
+}
+function readBetaOptOutUntil(now = Date.now()) {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const value = window.localStorage.getItem(BETA_OPT_OUT_STORAGE_KEY);
+        if (isBetaOptOutActive(value, now))
+            return Number(value);
+        if (value !== null) {
+            window.localStorage.removeItem(BETA_OPT_OUT_STORAGE_KEY);
+        }
+    }
+    catch {
+        // coercion-ok: browser storage access is optional; the current URL remains authoritative.
+        // Private browsing can deny storage access. The switcher still works;
+        // the current navigation remains the explicit source of truth.
+    }
+    return null;
+}
+function consumeBetaOptOutQueryParam(sourceHref, now = Date.now()) {
+    let target;
+    try {
+        target = new URL(sourceHref);
+    }
+    catch {
+        // coercion-ok: the browser supplied an invalid location.
+        return false;
+    }
+    const rawExpiry = target.searchParams.get(BETA_OPT_OUT_QUERY_PARAM);
+    if (rawExpiry === null)
+        return false;
+    const active = isBetaOptOutActive(rawExpiry, now);
+    target.searchParams.delete(BETA_OPT_OUT_QUERY_PARAM);
+    try {
+        if (active) {
+            window.localStorage.setItem(BETA_OPT_OUT_STORAGE_KEY, String(Number(rawExpiry)));
+        }
+        window.history.replaceState(null, "", target.toString());
+    }
+    catch {
+        // coercion-ok: browser history/storage access is optional; the page must still load.
+        // A browser that denies storage/history access must not block the page.
+    }
+    return active;
+}
 function EnvironmentLink({ label, href }) {
     return (_jsx(Button, { asChild: true, className: "w-full justify-start px-2", size: "sm", variant: "ghost", children: _jsxs("a", { href: href, children: [_jsx(IconExternalLink, { "aria-hidden": "true" }), label] }) }));
 }
@@ -58,19 +142,47 @@ function EnvironmentLink({ label, href }) {
 export function EnvironmentBadge() {
     const { session, status } = useSession();
     const config = useMemo(injectedAgentNativeConfig, []);
-    const environment = resolveEnvironmentChannel(config, typeof window === "undefined" ? undefined : window.location.hostname);
-    const targets = resolveEnvironmentTargets(typeof window === "undefined" ? undefined : window.location.hostname);
-    if (typeof window === "undefined" ||
-        window.parent !== window ||
-        status !== "authenticated" ||
-        !isBuilderIoEmployee(session?.email) ||
+    const didAutoRedirect = useRef(false);
+    const hostname = typeof window === "undefined" ? undefined : window.location.hostname;
+    const environment = resolveEnvironmentChannel(config, hostname);
+    const targets = resolveEnvironmentTargets(hostname);
+    const isEligible = typeof window !== "undefined" &&
+        window.parent === window &&
+        status === "authenticated" &&
+        isBuilderIoEmployee(session?.email) &&
+        !!environment &&
+        !!targets;
+    useEffect(() => {
+        if (!isEligible ||
+            environment !== "production" ||
+            !targets ||
+            didAutoRedirect.current) {
+            return;
+        }
+        didAutoRedirect.current = true;
+        if (readBetaOptOutUntil() !== null)
+            return;
+        if (consumeBetaOptOutQueryParam(window.location.href))
+            return;
+        const betaHref = buildEnvironmentUrl(window.location.href, targets.betaHost);
+        if (!betaHref || typeof window.location.replace !== "function")
+            return;
+        trackEvent("environment switched", {
+            from_environment: "production",
+            to_environment: "beta",
+            trigger: "automatic_redirect",
+        });
+        window.location.replace(betaHref);
+    }, [environment, isEligible, session?.email, status, targets?.betaHost]);
+    if (!isEligible ||
         !environment ||
-        !targets) {
+        !targets ||
+        typeof window === "undefined") {
         return null;
     }
     const currentHref = window.location.href;
     const betaHref = buildEnvironmentUrl(currentHref, targets.betaHost);
-    const productionHref = buildEnvironmentUrl(currentHref, targets.productionHost);
+    const productionHref = buildEnvironmentOptOutUrl(currentHref, targets.productionHost);
     if (!betaHref || !productionHref)
         return null;
     const label = environment === "beta" ? "beta" : "prod";

package/dist/collab/awareness.d.ts

@@ -62,11 +62,11 @@ export declare const postAwareness: import("h3").EventHandlerWithFetch<import("h
     error: string;
     states?: undefined;
 } | {
+    error?: undefined;
     states: {
         clientId: number;
         state: string;
     }[];
-    error?: undefined;
 }>>;
 /**
  * GET /_agent-native/collab/:docId/users
@@ -77,9 +77,9 @@ export declare const getActiveUsers: import("h3").EventHandlerWithFetch<import("
     error: string;
     users?: undefined;
 } | {
+    error?: undefined;
     users: {
         clientId: number;
         lastSeen: number;
     }[];
-    error?: undefined;
 }>>;

package/dist/collab/routes.d.ts

@@ -26,8 +26,8 @@ export declare const getCollabState: import("h3").EventHandlerWithFetch<import("
  * Body: { update: string (base64), requestSource?: string }
  */
 export declare const postCollabUpdate: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
-    ok?: undefined;
     error: string;
+    ok?: undefined;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/collab/struct-routes.d.ts

@@ -13,8 +13,8 @@
  * Body: { json: any, fieldName?: string, type?: "map"|"array", requestSource?: string }
  */
 export declare const postCollabJson: import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
-    error: string;
     ok?: undefined;
+    error: string;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/file-upload/actions/upload-image.d.ts

@@ -17,11 +17,11 @@ declare const _default: import("../../action.js").ActionDefinition<{
     id?: undefined;
     provider?: undefined;
 } | {
+    error?: undefined;
     configured?: undefined;
     connectPath?: undefined;
     url: string;
     id: string;
     provider: string;
-    error?: undefined;
 }>;
 export default _default;

package/dist/notifications/routes.d.ts

@@ -11,14 +11,14 @@
  *   DELETE /_agent-native/notifications/:id         — delete
  */
 export declare function createNotificationsHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<"" | import("./types.js").Notification[] | {
+    error?: undefined;
     count: number;
     updated?: undefined;
-    error?: undefined;
     ok?: undefined;
 } | {
+    error?: undefined;
     count?: undefined;
     updated: number;
-    error?: undefined;
     ok?: undefined;
 } | {
     count?: undefined;
@@ -26,8 +26,8 @@ export declare function createNotificationsHandler(): import("h3").EventHandlerW
     error: string;
     ok?: undefined;
 } | {
+    error?: undefined;
     count?: undefined;
     updated?: undefined;
-    error?: undefined;
     ok: boolean;
 }>>;

package/dist/observability/routes.d.ts

@@ -62,6 +62,6 @@ export declare function createObservabilityHandler(): import("h3").EventHandlerW
     summary?: undefined;
     spans?: undefined;
     id?: undefined;
-    error?: undefined;
     ok: boolean;
+    error?: undefined;
 }>>;

package/dist/resources/handlers.d.ts

@@ -48,8 +48,8 @@ export declare function handleUpdateResource(event: any): Promise<import("./stor
 }>;
 /** DELETE /_agent-native/resources/:id — delete a resource */
 export declare function handleDeleteResource(event: any): Promise<{
-    error: string;
     ok?: undefined;
+    error: string;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/secrets/routes.d.ts

@@ -34,37 +34,37 @@ export declare function createListSecretsHandler(): import("h3").EventHandlerWit
 /** POST /_agent-native/secrets/:key — write a secret. */
 export declare function createWriteSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
     error: string;
-    status?: undefined;
     ok?: undefined;
+    status?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     status: string;
-    error?: undefined;
 } | {
+    ok?: undefined;
     error: string;
     removed?: undefined;
-    ok?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     removed: boolean;
-    error?: undefined;
 }>>;
 /**
  * POST /_agent-native/secrets/:key/test — validate an optional candidate value
  * or the current stored value without changing anything.
  */
 export declare function createTestSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
+    ok?: undefined;
     error: string;
     note?: undefined;
-    ok?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     note?: undefined;
-    error?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     note: string;
-    error?: undefined;
 } | {
     note?: undefined;
     ok: boolean;
@@ -95,11 +95,11 @@ export interface AdHocSecretPayload {
 export declare function createAdHocSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<AdHocSecretPayload[] | {
     error: string;
 } | {
+    error?: undefined;
     ok: boolean;
     key: string;
-    error?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     removed: boolean;
-    error?: undefined;
 }>>;

package/dist/server/agent-engine-api-key-route.d.ts

@@ -27,10 +27,10 @@ export declare function resolveAgentEngineApiKeyWriteTarget(event: H3Event, scop
 export declare function createAgentEngineApiKeyHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<{
     error: any;
 } | {
+    error?: undefined;
     ok: boolean;
     key: string;
     baseUrlKey?: string;
     scope: AgentEngineApiKeyScope;
-    error?: undefined;
 }>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.163.2",
+  "version": "0.163.3",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {