diff --git a/templates/clips/app/components/player/video-player.tsx b/templates/clips/app/components/player/video-player.tsx
index d306afb79a..3c908af40a 100644
--- a/templates/clips/app/components/player/video-player.tsx
+++ b/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
diff --git a/templates/clips/app/hooks/use-view-tracking.test.tsx b/templates/clips/app/hooks/use-view-tracking.test.tsx
new file mode 100644
index 0000000000..2e7064ab5e
--- /dev/null
+++ b/templates/clips/app/hooks/use-view-tracking.test.tsx
@@ -0,0 +1,295 @@
+// @vitest-environment happy-dom
+
+import React, { act, StrictMode, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useViewTracking } from "./use-view-tracking";
+
+vi.mock("@agent-native/core/client/api-path", () => ({
+  appBasePath: () => "",
+}));
+
+interface HarnessProps {
+  recordingId: string;
+  durationMs: number;
+  disabled?: boolean;
+  trackOpenWithoutVideo?: boolean;
+  withVideo?: boolean;
+}
+
+function Harness({ withVideo = true, ...opts }: HarnessProps) {
+  const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null);
+  useViewTracking({
+    ...opts,
+    videoEl: withVideo ? videoEl : null,
+  });
+  return withVideo ? <video ref={setVideoEl} /> : null;
+}
+
+function viewEventBodies(fetchMock: ReturnType<typeof vi.fn>) {
+  return fetchMock.mock.calls
+    .filter(([url]) => String(url).includes("/api/view-event"))
+    .map(([, init]) => JSON.parse((init as RequestInit).body as string));
+}
+
+describe("useViewTracking", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let fetchMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.useFakeTimers({
+      toFake: [
+        "setTimeout",
+        "clearTimeout",
+        "setInterval",
+        "clearInterval",
+        "Date",
+        "performance",
+      ],
+    });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    fetchMock = vi.fn().mockResolvedValue({ ok: true, json: async () => ({}) });
+    vi.stubGlobal("fetch", fetchMock);
+    try {
+      localStorage.clear();
+    } catch {}
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  function getVideo(): HTMLVideoElement {
+    const video = container.querySelector("video");
+    if (!video) throw new Error("no <video> rendered");
+    return video;
+  }
+
+  it("keeps accumulating watch time across unrelated parent rerenders while playing", () => {
+    act(() => {
+      root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+    });
+    const video = getVideo();
+
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+
+    // Re-render with the exact same tracked identity (video/recordingId/
+    // trackOpenWithoutVideo/disabled unchanged) several times, simulating
+    // unrelated parent state updates (e.g. a scrubber position re-render).
+    for (let i = 0; i < 5; i++) {
+      act(() => {
+        root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+      });
+    }
+
+    act(() => {
+      vi.advanceTimersByTime(6000);
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    const progress = bodies.filter((b) => b.kind === "watch-progress");
+    expect(progress.length).toBeGreaterThan(0);
+    // The heartbeat interval must never have been torn down by the
+    // unrelated rerenders, so watch time keeps accumulating past the
+    // counted-view threshold.
+    expect(progress[progress.length - 1].totalWatchMs).toBeGreaterThanOrEqual(
+      4000,
+    );
+  });
+
+  it("reattaches with a fresh session when the video element is replaced (Edit -> Done)", () => {
+    act(() => {
+      root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+    });
+    let video = getVideo();
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    act(() => {
+      vi.advanceTimersByTime(6000);
+    });
+
+    // "Edit" — the player (and its <video>) unmounts.
+    act(() => {
+      root.render(
+        <Harness recordingId="rec-a" durationMs={10_000} withVideo={false} />,
+      );
+    });
+    // "Done" — a brand new player/video mounts.
+    act(() => {
+      root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+    });
+    video = getVideo();
+
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    act(() => {
+      vi.advanceTimersByTime(6000);
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    const viewStarts = bodies.filter((b) => b.kind === "view-start");
+    // One view-start for the original attach, one for the post-edit remount.
+    expect(viewStarts).toHaveLength(2);
+    expect(viewStarts[0].viewSessionId).not.toBe(viewStarts[1].viewSessionId);
+
+    const secondSessionProgress = bodies.filter(
+      (b) =>
+        b.kind === "watch-progress" &&
+        b.viewSessionId === viewStarts[1].viewSessionId,
+    );
+    expect(secondSessionProgress.length).toBeGreaterThan(0);
+    // The new session must not start with the old session's watch time
+    // already counted.
+    expect(secondSessionProgress[0].totalWatchMs).toBeLessThan(6000);
+  });
+
+  it("flushes the outgoing recording's own id when recordingId changes on a reused video element", () => {
+    act(() => {
+      root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+    });
+    const video = getVideo();
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    act(() => {
+      vi.advanceTimersByTime(6000);
+    });
+
+    // Same component instance and DOM node persist — only recordingId (and
+    // duration) change, simulating a route that reuses the player for a
+    // different recording without remounting.
+    act(() => {
+      root.render(<Harness recordingId="rec-b" durationMs={20_000} />);
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    // The final flush triggered by tearing down rec-a's session must still
+    // be posted under rec-a, never rec-b.
+    const misattributed = bodies.filter(
+      (b) => b.kind === "watch-progress" && b.recordingId === "rec-b",
+    );
+    expect(misattributed).toHaveLength(0);
+
+    const flushesForA = bodies.filter(
+      (b) => b.kind === "watch-progress" && b.recordingId === "rec-a",
+    );
+    expect(flushesForA.length).toBeGreaterThan(0);
+
+    // rec-b gets its own fresh session — playing it posts view-start under
+    // rec-b, not rec-a.
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    const viewStartsForB = viewEventBodies(fetchMock).filter(
+      (b) => b.kind === "view-start" && b.recordingId === "rec-b",
+    );
+    expect(viewStartsForB).toHaveLength(1);
+  });
+
+  it("fires the no-video view-start once trackOpenWithoutVideo resolves true (async Loom activation)", () => {
+    act(() => {
+      root.render(
+        <Harness
+          recordingId="rec-loom"
+          durationMs={0}
+          withVideo={false}
+          trackOpenWithoutVideo={false}
+        />,
+      );
+    });
+
+    expect(viewEventBodies(fetchMock)).toHaveLength(0);
+
+    // The public-recording query resolves and reveals this is Loom-backed.
+    act(() => {
+      root.render(
+        <Harness
+          recordingId="rec-loom"
+          durationMs={0}
+          withVideo={false}
+          trackOpenWithoutVideo
+        />,
+      );
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    expect(bodies).toHaveLength(1);
+    expect(bodies[0]).toMatchObject({
+      kind: "view-start",
+      recordingId: "rec-loom",
+      payload: { source: "iframe-open" },
+    });
+
+    // Further unrelated rerenders with the same resolved value must not
+    // re-fire it.
+    act(() => {
+      root.render(
+        <Harness
+          recordingId="rec-loom"
+          durationMs={0}
+          withVideo={false}
+          trackOpenWithoutVideo
+        />,
+      );
+    });
+    expect(viewEventBodies(fetchMock)).toHaveLength(1);
+  });
+
+  it("flushes final watch progress for the correct recording on unmount", () => {
+    act(() => {
+      root.render(<Harness recordingId="rec-a" durationMs={10_000} />);
+    });
+    const video = getVideo();
+    act(() => {
+      video.dispatchEvent(new Event("play"));
+    });
+    act(() => {
+      vi.advanceTimersByTime(6000);
+    });
+
+    act(() => {
+      root.unmount();
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    const flushes = bodies.filter(
+      (b) => b.kind === "watch-progress" && b.recordingId === "rec-a",
+    );
+    expect(flushes.length).toBeGreaterThan(0);
+    expect(flushes[flushes.length - 1].totalWatchMs).toBeGreaterThanOrEqual(
+      6000,
+    );
+  });
+
+  it("does not double-post the no-video view-start under StrictMode's dev mount/cleanup/remount cycle", () => {
+    act(() => {
+      root.render(
+        <StrictMode>
+          <Harness
+            recordingId="rec-strict"
+            durationMs={0}
+            withVideo={false}
+            trackOpenWithoutVideo
+          />
+        </StrictMode>,
+      );
+    });
+
+    const bodies = viewEventBodies(fetchMock);
+    const viewStarts = bodies.filter((b) => b.kind === "view-start");
+    expect(viewStarts).toHaveLength(1);
+  });
+});
diff --git a/templates/clips/app/hooks/use-view-tracking.ts b/templates/clips/app/hooks/use-view-tracking.ts
index 651410f31f..093197329d 100644
--- a/templates/clips/app/hooks/use-view-tracking.ts
+++ b/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 },
diff --git a/templates/clips/app/routes/embed.$shareId.tsx b/templates/clips/app/routes/embed.$shareId.tsx
index 316d876997..7596ff256b 100644
--- a/templates/clips/app/routes/embed.$shareId.tsx
+++ b/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}
diff --git a/templates/clips/app/routes/r.$recordingId.tsx b/templates/clips/app/routes/r.$recordingId.tsx
index ec1b28ede7..343dec474f 100644
--- a/templates/clips/app/routes/r.$recordingId.tsx
+++ b/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}
diff --git a/templates/clips/app/routes/share.$shareId.tsx b/templates/clips/app/routes/share.$shareId.tsx
index 4b124ee5cf..31b51f6db7 100644
--- a/templates/clips/app/routes/share.$shareId.tsx
+++ b/templates/clips/app/routes/share.$shareId.tsx
@@ -579,13 +579,13 @@ export default function ShareRoute() {
 
   usePlayerShortcuts({ playerRef });
 
+  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,
   });
@@ -961,6 +961,7 @@ export default function ShareRoute() {
           <div className="aspect-video w-full lg:min-h-0 lg:flex-1 lg:aspect-auto">
             <VideoPlayer
               ref={playerRef}
+              onVideoElementChange={setTrackedVideoEl}
               recordingId={recording.id}
               videoUrl={recording.videoUrl}
               videoFormat={recording.videoFormat}