@agent-native/core 0.120.2 → 0.120.4

package/corpus/templates/calendar/app/global.css

@@ -22,7 +22,7 @@
   --muted-foreground: 0 0% 45%;
   --accent: 0 0% 95%;
   --accent-foreground: 0 0% 15%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 90%;
   --input: 0 0% 90%;

package/corpus/templates/calendar/changelog/2026-07-24-borderless-secondary-surfaces.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-24
+---
+
+Secondary controls and dashboard surfaces now use quieter borderless styling.

package/corpus/templates/calendar/changelog/2026-07-24-sidebar-footer-controls-follow-a-consistent-order.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-24
+---
+
+Sidebar utility controls now follow a consistent footer order.

package/corpus/templates/chat/app/components/layout/Layout.tsx

@@ -1,6 +1,7 @@
 import {
   AgentSidebar,
   focusAgentChat,
+  isAgentChatHomeHandoffActive,
   navigateWithAgentChatViewTransition,
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
@@ -57,6 +58,7 @@ export function Layout({ children }: LayoutProps) {
     activePath: location.pathname,
     enabled: !isChatRoute,
   });
+  const chatHomeHandoffPending = isAgentChatHomeHandoffActive("chat");
   useAgentChatHomeHandoffLinks({
     storageKey: "chat",
     isChatPath: (pathname) => pathname === "/" || pathname.startsWith("/chat/"),
@@ -164,6 +166,7 @@ export function Layout({ children }: LayoutProps) {
           <AgentSidebar
             position="right"
             chatViewTransition
+            chatViewTransitionHandoff={chatHomeHandoffPending}
             storageKey="chat"
             browserTabId={TAB_ID}
             openOnChatRunning={chatHomeHandoffActive}

package/corpus/templates/chat/app/components/layout/Sidebar.tsx

@@ -4,9 +4,11 @@ import {
   type ChatThreadSummary,
 } from "@agent-native/core/client/agent-chat";
 import { appPath } from "@agent-native/core/client/api-path";
-import { useT } from "@agent-native/core/client/i18n";
+import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
+import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
+import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
   ChatHistoryRail,
   type ChatHistoryItem,
@@ -16,6 +18,7 @@ import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
   IconMessageCircle,
+  IconSearch,
   IconSettings,
 } from "@tabler/icons-react";
 import { useEffect, useMemo } from "react";
@@ -126,7 +129,7 @@ function chatThreadPath(threadId: string) {
   return `/chat/${encodeURIComponent(threadId)}`;
 }
 
-function ChatThreadsSection() {
+function ChatThreadsSection({ open }: { open: boolean }) {
   const navigate = useNavigate();
   const location = useLocation();
   const t = useT();
@@ -230,36 +233,42 @@ function ChatThreadsSection() {
   }
 
   return (
-    <div className="mt-2 ms-4">
-      <ChatHistoryRail
-        items={chatItems}
-        activeId={displayedActiveThreadId}
-        onSelect={(threadId) => openThread(threadId)}
-        onNewChat={() => void handleNewChat()}
-        railLabels={{
-          newChat: t("chat.newChat"),
-          showMore: t("chat.chats"),
-          showLess: t("chat.chats"),
-        }}
-        renameMaxLength={160}
-        onTogglePin={(threadId) => {
-          const thread = visibleThreads.find((item) => item.id === threadId);
-          if (thread) void pinThread(threadId, !thread.pinnedAt);
-        }}
-        onRename={handleRenameThread}
-        onDelete={(threadId) => void handleArchiveThread(threadId)}
-        labels={{
-          options: (item) =>
-            t("chat.optionsFor", { title: item.titleText ?? "" }),
-          renameInput: (item) =>
-            t("chat.renameThread", { title: item.titleText ?? "" }),
-          rename: t("chat.renameChat"),
-          pin: t("chat.pinChat"),
-          unpin: t("chat.unpinChat"),
-          delete: t("chat.archiveChat"),
-        }}
-        className="min-w-0"
-      />
+    <div
+      className="an-chat-history-rail__collapse"
+      data-state={open ? "open" : "closed"}
+      aria-hidden={!open}
+    >
+      <div className="ms-4">
+        <ChatHistoryRail
+          items={chatItems}
+          activeId={displayedActiveThreadId}
+          onSelect={(threadId) => openThread(threadId)}
+          onNewChat={() => void handleNewChat()}
+          railLabels={{
+            newChat: t("chat.newChat"),
+            showMore: t("chat.chats"),
+            showLess: t("chat.chats"),
+          }}
+          renameMaxLength={160}
+          onTogglePin={(threadId) => {
+            const thread = visibleThreads.find((item) => item.id === threadId);
+            if (thread) void pinThread(threadId, !thread.pinnedAt);
+          }}
+          onRename={handleRenameThread}
+          onDelete={(threadId) => void handleArchiveThread(threadId)}
+          labels={{
+            options: (item) =>
+              t("chat.optionsFor", { title: item.titleText ?? "" }),
+            renameInput: (item) =>
+              t("chat.renameThread", { title: item.titleText ?? "" }),
+            rename: t("chat.renameChat"),
+            pin: t("chat.pinChat"),
+            unpin: t("chat.unpinChat"),
+            delete: t("chat.archiveChat"),
+          }}
+          className="min-w-0"
+        />
+      </div>
     </div>
   );
 }
@@ -281,14 +290,14 @@ export function Sidebar({
     cn(
       "flex items-center text-sm transition-colors",
       collapsed
-        ? "relative h-10 w-full justify-center rounded-none border-s-2 px-0"
+        ? "relative h-10 w-full justify-center rounded-none px-0"
         : "h-9 rounded-md gap-3 px-3",
       isActive
         ? collapsed
-          ? "border-s-sidebar-accent-foreground/80 bg-sidebar-accent text-sidebar-accent-foreground"
+          ? "bg-sidebar-accent text-sidebar-accent-foreground"
           : "bg-sidebar-accent text-sidebar-accent-foreground"
         : collapsed
-          ? "border-s-transparent text-sidebar-foreground/70 hover:bg-sidebar-accent/55 hover:text-sidebar-accent-foreground"
+          ? "text-sidebar-foreground/70 hover:bg-sidebar-accent/55 hover:text-sidebar-accent-foreground"
           : "text-sidebar-foreground hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground",
     );
   const collapseButton = collapsible ? (
@@ -317,6 +326,31 @@ export function Sidebar({
       </TooltipContent>
     </Tooltip>
   ) : null;
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={openCommandMenu}
+          aria-label={t("root.commandSearch")}
+          className="flex size-8 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <IconSearch className="size-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{t("root.commandSearch")}</TooltipContent>
+    </Tooltip>
+  );
+  const translateButton = (
+    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
+  );
+  const feedbackButton = (
+    <FeedbackButton
+      variant={collapsed ? "icon" : "sidebar"}
+      side="right"
+      className={collapsed ? "h-8 w-8" : "min-w-0"}
+    />
+  );
 
   return (
     <aside
@@ -411,8 +445,8 @@ export function Sidebar({
                 ) : (
                   link
                 )}
-                {!collapsed && item.view === "chat" && isChatRoute ? (
-                  <ChatThreadsSection />
+                {!collapsed && item.view === "chat" ? (
+                  <ChatThreadsSection open={isChatRoute} />
                 ) : null}
               </div>
             );
@@ -465,14 +499,13 @@ export function Sidebar({
           />
         </div>
 
-        {!collapsed ? (
-          <div className="flex items-center justify-end gap-1 px-3 py-2">
-            <FeedbackButton className="min-w-0 flex-1" side="right" />
-            {collapseButton}
-          </div>
-        ) : collapseButton ? (
-          <div className="flex justify-center px-1 py-1">{collapseButton}</div>
-        ) : null}
+        <SidebarFooterActions
+          collapsed={collapsed}
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+        />
       </div>
     </aside>
   );

package/corpus/templates/chat/app/global.css

@@ -22,7 +22,7 @@
   --muted-foreground: 0 0% 45%;
   --accent: 0 0% 95%;
   --accent-foreground: 0 0% 15%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 90%;
   --input: 0 0% 90%;

package/corpus/templates/chat/changelog/2026-07-24-borderless-secondary-surfaces.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-24
+---
+
+Secondary controls and dashboard surfaces now use quieter borderless styling.

package/corpus/templates/chat/changelog/2026-07-24-sidebar-footer-controls-follow-a-consistent-order.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-24
+---
+
+Sidebar utility controls now follow a consistent footer order.

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

@@ -5,13 +5,15 @@ import {
 import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 import { getBrowserTabId } from "@agent-native/core/client/hooks";
-import { useT } from "@agent-native/core/client/i18n";
+import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
+import { openCommandMenu } from "@agent-native/core/client/navigation";
 import {
   InvitationBanner,
   OrgSwitcher,
   useOrgRole,
 } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
+import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
   IconInbox,
   IconArchive,
@@ -30,6 +32,7 @@ import {
   IconShare,
   IconHierarchy2,
   IconSettings,
+  IconSearch,
 } from "@tabler/icons-react";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import { NavLink, useLocation, useParams } from "react-router";
@@ -154,6 +157,59 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
   );
   const [headerSlot, setHeaderSlot] = useState<HTMLElement | null>(null);
   const showCollapsedSidebar = sidebarCollapsed && !isMobile;
+
+  const collapseButton = !isMobile ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={
+            showCollapsedSidebar
+              ? t("navigation.expandSidebar")
+              : t("navigation.collapseSidebar")
+          }
+          className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+          onClick={() => setSidebarCollapsed((value) => !value)}
+        >
+          {showCollapsedSidebar ? (
+            <IconLayoutSidebarLeftExpand className="h-4 w-4" />
+          ) : (
+            <IconLayoutSidebarLeftCollapse className="h-4 w-4" />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        {showCollapsedSidebar
+          ? t("navigation.expandSidebar")
+          : t("navigation.collapseSidebar")}
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+  const searchButton = (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={t("root.commandSearch")}
+          className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+          onClick={openCommandMenu}
+        >
+          <IconSearch className="h-4 w-4" />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right">{t("root.commandSearch")}</TooltipContent>
+    </Tooltip>
+  );
+  const translateButton = (
+    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
+  );
+  const feedbackButton = (
+    <FeedbackButton
+      variant={showCollapsedSidebar ? "icon" : "sidebar"}
+      side="right"
+      className={showCollapsedSidebar ? "size-8" : "min-w-0"}
+    />
+  );
   const sidebarHasNewRecordingAction = isMobile
     ? sidebarOpen
     : !sidebarCollapsed;
@@ -314,35 +370,6 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
               </>
             )}
           </div>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                className="hidden h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground md:inline-flex"
-                aria-label={
-                  showCollapsedSidebar
-                    ? t("navigation.expandSidebar")
-                    : t("navigation.collapseSidebar")
-                }
-                aria-expanded={!showCollapsedSidebar}
-                onClick={() => setSidebarCollapsed((value) => !value)}
-              >
-                {showCollapsedSidebar ? (
-                  <IconLayoutSidebarLeftExpand className="h-4 w-4" />
-                ) : (
-                  <IconLayoutSidebarLeftCollapse className="h-4 w-4" />
-                )}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              {showCollapsedSidebar
-                ? t("navigation.expandSidebar")
-                : t("navigation.collapseSidebar")}
-            </TooltipContent>
-          </Tooltip>
         </div>
         <div className="min-h-0 flex-1 overflow-y-auto">
           {showCollapsedSidebar ? (
@@ -592,10 +619,17 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
             <div className="shrink-0 space-y-2 px-3 py-2">
               <OrgSwitcher settingsPath="/settings/organization" />
               <DevDatabaseLink />
-              <FeedbackButton />
             </div>
           </>
         )}
+        <SidebarFooterActions
+          collapsed={showCollapsedSidebar}
+          feedback={feedbackButton}
+          translate={translateButton}
+          search={searchButton}
+          collapse={collapseButton}
+          className={showCollapsedSidebar ? undefined : "px-0 py-0"}
+        />
       </aside>
 
       <AgentSidebar

package/corpus/templates/clips/app/components/library/organization-switcher.tsx

@@ -59,8 +59,8 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
           <button
             type="button"
             className={cn(
-              "flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5 text-start",
-              "hover:bg-accent",
+              "flex w-full items-center gap-2 rounded-md border-0 bg-accent/50 px-2 py-1.5 text-start",
+              "hover:bg-accent/70",
               className,
             )}
           >

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

@@ -209,6 +209,13 @@ export interface VideoPlayerProps {
    * a visible frame for missing or blank auto-generated library thumbnails.
    */
   role?: "owner" | "admin" | "editor" | "viewer";
+  /**
+   * Called with the live `<video>` DOM node whenever it is created or
+   * destroyed (e.g. swapping to/from the Loom iframe or unsupported-format
+   * placeholder). Lets a caller key an effect off the actual element
+   * lifecycle instead of polling an imperative-handle getter.
+   */
+  onVideoElementChange?: (video: HTMLVideoElement | null) => void;
 }
 
 export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
@@ -245,6 +252,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       cover,
       recordingId,
       role,
+      onVideoElementChange,
     } = props;
 
     const resolvedVideoSrc = useMemo(
@@ -252,6 +260,13 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       [videoUrl],
     );
     const videoRef = useRef<HTMLVideoElement | null>(null);
+    const setVideoNode = useCallback(
+      (el: HTMLVideoElement | null) => {
+        videoRef.current = el;
+        onVideoElementChange?.(el);
+      },
+      [onVideoElementChange],
+    );
     const containerRef = useRef<HTMLDivElement | null>(null);
     const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
     const touchTapCandidateRef = useRef<{
@@ -1262,7 +1277,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
           </div>
         ) : activeVideoSrc ? (
           <video
-            ref={videoRef}
+            ref={setVideoNode}
             src={domVideoSrc}
             poster={resolveLocalUrl(thumbnailUrl)}
             // `crossOrigin` is only needed so the owner's canvas thumbnail

package/corpus/templates/clips/app/global.css

@@ -22,7 +22,7 @@
   --muted-foreground: 0 0% 45%;
   --accent: 0 0% 95%;
   --accent-foreground: 0 0% 15%;
-  --destructive: 0 84% 60%;
+  --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 90%;
   --input: 0 0% 90%;

package/corpus/templates/clips/app/hooks/use-view-tracking.ts

@@ -34,7 +34,14 @@ function createViewSessionId(recordingId: string): string {
 
 export interface UseViewTrackingOpts {
   recordingId: string;
-  videoRef: React.RefObject<HTMLVideoElement | null>;
+  /**
+   * The live `<video>` DOM node, or `null` when there is none (e.g. a Loom
+   * iframe embed). Pass the actual element — not a ref wrapper — so this
+   * hook's effect can depend on it directly and React's own dependency
+   * comparison decides when to reattach, instead of hand-rolled identity
+   * bookkeeping.
+   */
+  videoEl: HTMLVideoElement | null;
   durationMs: number;
   /** Disable tracking entirely (e.g. for the recording's owner viewing their own clip). */
   disabled?: boolean;
@@ -46,10 +53,24 @@ export interface UseViewTrackingOpts {
  * Wires up the view-event tracker for a player instance. Fires a "view-start"
  * on mount, then throttled "watch-progress" every 5s while playing, plus
  * seek/pause/resume events and a final flush on unmount.
+ *
+ * The effect depends on `[recordingId, videoEl, trackOpenWithoutVideo,
+ * disabled]`, so React naturally creates a fresh closure — and runs the
+ * previous one's cleanup — exactly when any of those actually change (a
+ * different video element, a different recording, or the no-video/embed
+ * mode flipping). Each closure captures its own `recordingId` and `videoEl`,
+ * so a cleanup's final flush always describes the session it belonged to,
+ * never a session that has since replaced it.
+ *
+ * `durationMs` is intentionally excluded from the dependency array — it can
+ * load asynchronously after the video/recording is already attached, and
+ * reattaching just for that would be wasted work. It's kept in a ref that's
+ * synced every render and read fresh inside `post()`.
  */
 export function useViewTracking(opts: UseViewTrackingOpts) {
-  const { recordingId, videoRef, durationMs, disabled, trackOpenWithoutVideo } =
+  const { recordingId, videoEl, durationMs, disabled, trackOpenWithoutVideo } =
     opts;
+
   const watchMsRef = useRef(0);
   const lastTickRef = useRef<number | null>(null);
   const startedRef = useRef(false);
@@ -57,11 +78,25 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
   const lastSentProgressRef = useRef(0);
   const maxPctRef = useRef(0);
   const viewSessionRef = useRef<string | null>(null);
+  const durationMsRef = useRef(durationMs);
+  const recordingIdRef = useRef(recordingId);
+
+  durationMsRef.current = durationMs;
+  recordingIdRef.current = recordingId;
 
   useEffect(() => {
     if (disabled) return;
-    const video = videoRef.current;
-    if (!video) {
+
+    // Reset per-session counters — this effect only reruns when the video
+    // element, recording, or embed mode actually change.
+    watchMsRef.current = 0;
+    lastTickRef.current = null;
+    startedRef.current = false;
+    lastSentProgressRef.current = 0;
+    maxPctRef.current = 0;
+    viewSessionRef.current = null;
+
+    if (!videoEl) {
       if (
         !trackOpenWithoutVideo ||
         !recordingId ||
@@ -69,6 +104,10 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
       ) {
         return;
       }
+      // Persists for the hook's lifetime (never reset on cleanup): this is
+      // what stops a React StrictMode dev mount->cleanup->remount cycle
+      // from double-posting the same iframe-open view-start, since — unlike
+      // the with-video path below — there's no native DOM event gating it.
       openTrackedRecordingRef.current = recordingId;
       viewSessionRef.current = createViewSessionId(recordingId);
       fetch(`${appBasePath()}/api/view-event`, {
@@ -90,6 +129,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
       return;
     }
 
+    const video = videoEl;
     const sessionId = getSessionId();
     viewSessionRef.current = createViewSessionId(recordingId);
     let progressTimer: ReturnType<typeof setInterval> | null = null;
@@ -105,8 +145,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         | "reaction",
       extra?: Record<string, unknown>,
     ) {
-      const v = videoRef.current;
-      if (!v) return;
+      const durationMs = durationMsRef.current;
       const completedPct =
         durationMs > 0 ? (watchMsRef.current / durationMs) * 100 : 0;
       maxPctRef.current = Math.max(
@@ -120,12 +159,13 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         body: JSON.stringify({
           recordingId,
           kind,
-          timestampMs: Math.floor(v.currentTime * 1000),
+          timestampMs: Math.floor(video.currentTime * 1000),
           sessionId,
           viewSessionId: viewSessionRef.current,
           totalWatchMs: Math.floor(watchMsRef.current),
           completedPct: Math.floor(maxPctRef.current),
-          scrubbedToEnd: v.duration > 0 && v.currentTime >= v.duration - 0.5,
+          scrubbedToEnd:
+            video.duration > 0 && video.currentTime >= video.duration - 0.5,
           payload: extra,
         }),
       }).catch(() => {});
@@ -186,10 +226,13 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
       video.removeEventListener("seeked", onSeek);
       video.removeEventListener("ended", onEnded);
       if (progressTimer) clearInterval(progressTimer);
-      // Flush final progress.
+      // Flush final progress, still scoped to this closure's own video and
+      // recordingId — never one a later render has since moved on to.
       if (startedRef.current) post("watch-progress");
     };
-  }, [recordingId, videoRef, durationMs, disabled, trackOpenWithoutVideo]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- durationMs is
+    // deliberately excluded; it's read live from durationMsRef inside post().
+  }, [recordingId, videoEl, trackOpenWithoutVideo, disabled]);
 
   return {
     reportCtaClick: () => {
@@ -198,7 +241,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         keepalive: true,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          recordingId,
+          recordingId: recordingIdRef.current,
           kind: "cta-click",
           sessionId: getSessionId(),
         }),
@@ -210,7 +253,7 @@ export function useViewTracking(opts: UseViewTrackingOpts) {
         keepalive: true,
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          recordingId,
+          recordingId: recordingIdRef.current,
           kind: "reaction",
           sessionId: getSessionId(),
           payload: { emoji },

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

@@ -131,13 +131,13 @@ export default function EmbedRoute() {
   const firstCta = ctas[0] ?? null;
   const isLoomEmbedBacked = isLoomEmbedBackedRecording(recording);
 
+  const [trackedVideoEl, setTrackedVideoEl] = useState<HTMLVideoElement | null>(
+    null,
+  );
+
   const tracking = useViewTracking({
     recordingId: shareId ?? "",
-    videoRef: {
-      get current() {
-        return playerRef.current?.video ?? null;
-      },
-    } as any,
+    videoEl: trackedVideoEl,
     durationMs: recording?.durationMs ?? 0,
     trackOpenWithoutVideo: isLoomEmbedBacked,
   });
@@ -193,6 +193,7 @@ export default function EmbedRoute() {
     <div className="fixed inset-0 h-dvh w-dvw overflow-hidden bg-black">
       <VideoPlayer
         ref={playerRef}
+        onVideoElementChange={setTrackedVideoEl}
         recordingId={recording.id}
         videoUrl={recording.videoUrl}
         videoFormat={recording.videoFormat}

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

@@ -800,16 +800,15 @@ export default function RecordingPage() {
 
   usePlayerShortcuts({ playerRef, chapters });
 
+  const [trackedVideoEl, setTrackedVideoEl] = useState<HTMLVideoElement | null>(
+    null,
+  );
+
   const tracking = useViewTracking({
     recordingId: recordingId ?? "",
-    videoRef: {
-      get current() {
-        return playerRef.current?.video ?? null;
-      },
-    } as any,
+    videoEl: trackedVideoEl,
     durationMs: recording?.durationMs ?? 0,
-    // Skip tracking for the owner — they shouldn't inflate their own views.
-    disabled: role === "owner",
+    disabled: role === "owner", // Skip tracking for the owner: they shouldn't inflate their own views.
   });
 
   if (!recordingId) return null;
@@ -1545,6 +1544,7 @@ export default function RecordingPage() {
               <div className="relative aspect-video w-full xl:min-h-0 xl:flex-1 xl:aspect-auto">
                 <VideoPlayer
                   ref={playerRef}
+                  onVideoElementChange={setTrackedVideoEl}
                   recordingId={recording.id}
                   videoUrl={recording.videoUrl}
                   videoFormat={recording.videoFormat}