@agent-native/core 0.92.10 → 0.92.12

package/corpus/templates/clips/actions/request-transcript.ts

@@ -45,6 +45,7 @@ import {
   getCredentialContext,
 } from "@agent-native/core/server/request-context";
 import { getSetting, getUserSetting } from "@agent-native/core/settings";
+import { assertAccess } from "@agent-native/core/sharing";
 import { transcribeWithBuilder } from "@agent-native/core/transcription/builder";
 import { and, eq } from "drizzle-orm";
 import { z } from "zod";
@@ -110,6 +111,7 @@ type TranscriptionProvider = {
 type RecordingMediaRow = {
   videoUrl: string | null;
   videoFormat?: "webm" | "mp4" | null;
+  videoSizeBytes?: number | null;
   hasAudio?: boolean | null;
   sourceAppName?: string | null;
   sourceWindowTitle?: string | null;
@@ -127,6 +129,11 @@ const BUILDER_TRANSCRIPTION_MIN_TIMEOUT_MS = 45_000;
 const BUILDER_TRANSCRIPTION_MAX_TIMEOUT_MS = 65_000;
 const BUILDER_TRANSCRIPTION_BASE_TIMEOUT_MS = 30_000;
 const BUILDER_TRANSCRIPTION_PER_MINUTE_MS = 3_000;
+const MEDIA_FETCH_MIN_TIMEOUT_MS = 45_000;
+const MEDIA_FETCH_MAX_TIMEOUT_MS = 120_000;
+const MEDIA_FETCH_BASE_TIMEOUT_MS = 30_000;
+const MEDIA_FETCH_PER_50MB_MS = 10_000;
+const ESTIMATED_VIDEO_BYTES_PER_MINUTE = 5 * 1024 * 1024;
 
 function clampTimeoutMs(value: number): number {
   return Math.max(
@@ -154,6 +161,38 @@ export function builderTranscriptionTimeoutMs(
   );
 }
 
+export function recordingMediaFetchTimeoutMs(
+  videoSizeBytes: number | null | undefined,
+  durationMs: number | null | undefined,
+): number {
+  const override = Number(
+    process.env.CLIPS_TRANSCRIPTION_MEDIA_FETCH_TIMEOUT_MS,
+  );
+  if (Number.isFinite(override) && override > 0) {
+    return Math.max(
+      MEDIA_FETCH_MIN_TIMEOUT_MS,
+      Math.min(MEDIA_FETCH_MAX_TIMEOUT_MS, Math.floor(override)),
+    );
+  }
+
+  const estimatedBytes =
+    videoSizeBytes && Number.isFinite(videoSizeBytes) && videoSizeBytes > 0
+      ? videoSizeBytes
+      : durationMs && Number.isFinite(durationMs) && durationMs > 0
+        ? Math.ceil(durationMs / 60_000) * ESTIMATED_VIDEO_BYTES_PER_MINUTE
+        : 0;
+  if (!estimatedBytes) return MEDIA_FETCH_MIN_TIMEOUT_MS;
+
+  const fiftyMbUnits = Math.ceil(estimatedBytes / (50 * 1024 * 1024));
+  return Math.max(
+    MEDIA_FETCH_MIN_TIMEOUT_MS,
+    Math.min(
+      MEDIA_FETCH_MAX_TIMEOUT_MS,
+      MEDIA_FETCH_BASE_TIMEOUT_MS + fiftyMbUnits * MEDIA_FETCH_PER_50MB_MS,
+    ),
+  );
+}
+
 // Bounded automatic retry for transient failures (ffmpeg timeout, transient
 // provider network/5xx errors) — NOT for permanent failures like "no audio
 // track" or a missing/rejected API key. Mirrors the fire-and-forget
@@ -301,10 +340,12 @@ async function loadRecordingMediaBlob({
   recordingId,
   videoUrl,
   fallbackMimeType,
+  timeoutMs,
 }: {
   recordingId: string;
   videoUrl: string;
   fallbackMimeType: string;
+  timeoutMs: number;
 }): Promise<{ blob: Blob; sourceMimeType: string }> {
   const isLocalBlob =
     videoUrl.startsWith("/api/video/") ||
@@ -334,10 +375,10 @@ async function loadRecordingMediaBlob({
     resolvedVideoUrl = `${origin}${resolvedVideoUrl}`;
   }
   const vidRes = isAppRelativeUrl
-    ? await fetch(resolvedVideoUrl, { signal: AbortSignal.timeout(30_000) })
+    ? await fetch(resolvedVideoUrl, { signal: AbortSignal.timeout(timeoutMs) })
     : await ssrfSafeFetch(
         resolvedVideoUrl,
-        { signal: AbortSignal.timeout(30_000) },
+        { signal: AbortSignal.timeout(timeoutMs) },
         { maxRedirects: 3 },
       );
   if (!vidRes.ok) {
@@ -899,7 +940,7 @@ async function pickProvider(
 
 const requestTranscriptAction = defineAction({
   description:
-    "Ensure a recording has a transcript. Preserves native Web Speech/macOS Speech transcripts first, then uses configured backup transcription only when needed.",
+    "Ensure a recording has a transcript, or explicitly regenerate it from the recording media. Preserves native Web Speech/macOS Speech transcripts unless regenerate is true, then uses Builder.io managed transcription or the configured Groq fallback.",
   schema: z.object({
     recordingId: z.string().describe("Recording ID"),
     force: z
@@ -908,6 +949,12 @@ const requestTranscriptAction = defineAction({
       .describe(
         "Bypass the recent pending guard for explicit retries or the finalize-recording background worker.",
       ),
+    regenerate: z
+      .boolean()
+      .optional()
+      .describe(
+        "Generate a fresh transcript from the recording media even when a ready transcript already exists. The existing ready transcript is kept if regeneration fails.",
+      ),
     retryAttempt: z
       .number()
       .int()
@@ -918,6 +965,8 @@ const requestTranscriptAction = defineAction({
       ),
   }),
   run: async (args) => {
+    await assertAccess("recording", args.recordingId, "editor");
+
     const db = getDb();
     const ownerEmail = getCurrentOwnerEmail();
     const now = new Date().toISOString();
@@ -944,6 +993,10 @@ const requestTranscriptAction = defineAction({
           recordingId: args.recordingId,
           videoUrl,
           fallbackMimeType,
+          timeoutMs: recordingMediaFetchTimeoutMs(
+            rec.videoSizeBytes,
+            rec.durationMs,
+          ),
         });
         return prepareAudioOnlyTranscriptionMedia({
           blob: media.blob,
@@ -980,6 +1033,11 @@ const requestTranscriptAction = defineAction({
     // manual retry can still top the budget back up for one more bounded
     // automatic pass if it fails transiently again.
     const currentRetryCount = existingNativeTranscript?.retryCount ?? 0;
+    const regeneratingReadyTranscript = Boolean(
+      args.regenerate &&
+      existingNativeTranscript?.status === "ready" &&
+      existingNativeTranscript.fullText?.trim(),
+    );
     if (args.retryAttempt !== undefined) {
       console.log(
         `[clips] auto-retry transcription attempt ${args.retryAttempt} for ${args.recordingId}`,
@@ -987,6 +1045,7 @@ const requestTranscriptAction = defineAction({
     }
 
     if (
+      !args.regenerate &&
       existingNativeTranscript?.status === "ready" &&
       existingNativeTranscript.fullText?.trim()
     ) {
@@ -1032,19 +1091,22 @@ const requestTranscriptAction = defineAction({
     // is set at the deployment level. Use the per-user-aware resolver so
     // a sidebar OAuth connection actually wires through to transcription.
     if (await resolveHasBuilderPrivateKey()) {
-      await upsertTranscriptRow(db, {
-        recordingId: args.recordingId,
-        ownerEmail,
-        status: "pending",
-        failureReason: null,
-        now,
-      });
-      await writeAppState("refresh-signal", { ts: Date.now() });
+      if (!regeneratingReadyTranscript) {
+        await upsertTranscriptRow(db, {
+          recordingId: args.recordingId,
+          ownerEmail,
+          status: "pending",
+          failureReason: null,
+          now,
+        });
+        await writeAppState("refresh-signal", { ts: Date.now() });
+      }
 
       const [rec] = await db
         .select({
           videoUrl: schema.recordings.videoUrl,
           videoFormat: schema.recordings.videoFormat,
+          videoSizeBytes: schema.recordings.videoSizeBytes,
           hasAudio: schema.recordings.hasAudio,
           sourceAppName: schema.recordings.sourceAppName,
           sourceWindowTitle: schema.recordings.sourceWindowTitle,
@@ -1121,13 +1183,15 @@ const requestTranscriptAction = defineAction({
         );
         const fullText = normalizedTranscript.fullText;
 
-        const preserved = await preserveReadyTranscriptIfAvailable({
-          db,
-          recordingId: args.recordingId,
-          ownerEmail,
-          allowLikelyLanguageMismatch: false,
-        });
-        if (preserved) return preserved;
+        if (!regeneratingReadyTranscript) {
+          const preserved = await preserveReadyTranscriptIfAvailable({
+            db,
+            recordingId: args.recordingId,
+            ownerEmail,
+            allowLikelyLanguageMismatch: false,
+          });
+          if (preserved) return preserved;
+        }
 
         if (!fullText) {
           return failEmptyProviderTranscript({
@@ -1251,15 +1315,17 @@ const requestTranscriptAction = defineAction({
     }
 
     // Upsert a pending row so the UI can show "Transcribing…".
-    await upsertTranscriptRow(db, {
-      recordingId: args.recordingId,
-      ownerEmail,
-      status: "pending",
-      failureReason: null,
-      now,
-    });
+    if (!regeneratingReadyTranscript) {
+      await upsertTranscriptRow(db, {
+        recordingId: args.recordingId,
+        ownerEmail,
+        status: "pending",
+        failureReason: null,
+        now,
+      });
 
-    await writeAppState("refresh-signal", { ts: Date.now() });
+      await writeAppState("refresh-signal", { ts: Date.now() });
+    }
 
     // Load the recording's media URL and prepare audio-only bytes. We never
     // send video frames to a transcription provider; screen-only recordings
@@ -1269,6 +1335,7 @@ const requestTranscriptAction = defineAction({
       .select({
         videoUrl: schema.recordings.videoUrl,
         videoFormat: schema.recordings.videoFormat,
+        videoSizeBytes: schema.recordings.videoSizeBytes,
         hasAudio: schema.recordings.hasAudio,
         sourceAppName: schema.recordings.sourceAppName,
         sourceWindowTitle: schema.recordings.sourceWindowTitle,
@@ -1369,13 +1436,15 @@ const requestTranscriptAction = defineAction({
       );
       const fullText = normalizedTranscript.fullText;
 
-      const preserved = await preserveReadyTranscriptIfAvailable({
-        db,
-        recordingId: args.recordingId,
-        ownerEmail,
-        allowLikelyLanguageMismatch: false,
-      });
-      if (preserved) return preserved;
+      if (!regeneratingReadyTranscript) {
+        const preserved = await preserveReadyTranscriptIfAvailable({
+          db,
+          recordingId: args.recordingId,
+          ownerEmail,
+          allowLikelyLanguageMismatch: false,
+        });
+        if (preserved) return preserved;
+      }
 
       if (!fullText) {
         return failEmptyProviderTranscript({

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

@@ -253,6 +253,7 @@ export function LibraryGrid({
         <ShareRecordingDialog
           recordingId={sharingRec.id}
           recordingTitle={sharingRec.title}
+          initialVisibility={sharingRec.visibility}
           open={!!sharingRec}
           onOpenChange={(open) => {
             if (!open) setSharingRec(null);

package/corpus/templates/clips/app/components/player/share-dialog.tsx

@@ -62,6 +62,8 @@ function absoluteAppUrl(path: string): string {
 export interface ShareRecordingPopoverProps {
   recordingId: string;
   recordingTitle?: string;
+  initialVisibility?: Visibility | null;
+  initialRole?: "owner" | "admin" | "editor" | "viewer";
   videoUrl?: string | null;
   animatedThumbnailUrl?: string | null;
   isLoomRecording?: boolean;
@@ -90,6 +92,8 @@ type ShareRecordingDialogProps = Omit<
 export function ShareRecordingPopover({
   recordingId,
   recordingTitle,
+  initialVisibility,
+  initialRole,
   videoUrl,
   animatedThumbnailUrl,
   isLoomRecording = false,
@@ -108,6 +112,8 @@ export function ShareRecordingPopover({
         <ShareRecordingContent
           recordingId={recordingId}
           recordingTitle={recordingTitle}
+          initialVisibility={initialVisibility}
+          initialRole={initialRole}
           videoUrl={videoUrl}
           animatedThumbnailUrl={animatedThumbnailUrl}
           isLoomRecording={isLoomRecording}
@@ -125,6 +131,8 @@ export function ShareRecordingPopover({
 export function ShareRecordingDialog({
   recordingId,
   recordingTitle,
+  initialVisibility,
+  initialRole,
   videoUrl,
   animatedThumbnailUrl,
   isLoomRecording = false,
@@ -143,6 +151,8 @@ export function ShareRecordingDialog({
         <ShareRecordingContent
           recordingId={recordingId}
           recordingTitle={recordingTitle}
+          initialVisibility={initialVisibility}
+          initialRole={initialRole}
           videoUrl={videoUrl}
           animatedThumbnailUrl={animatedThumbnailUrl}
           isLoomRecording={isLoomRecording}
@@ -156,6 +166,8 @@ export function ShareRecordingDialog({
 function ShareRecordingContent({
   recordingId,
   recordingTitle,
+  initialVisibility,
+  initialRole,
   videoUrl,
   animatedThumbnailUrl,
   isLoomRecording = false,
@@ -163,6 +175,8 @@ function ShareRecordingContent({
 }: {
   recordingId: string;
   recordingTitle?: string;
+  initialVisibility?: Visibility | null;
+  initialRole?: "owner" | "admin" | "editor" | "viewer";
   videoUrl?: string | null;
   animatedThumbnailUrl?: string | null;
   isLoomRecording?: boolean;
@@ -175,7 +189,12 @@ function ShareRecordingContent({
   });
 
   const data = sharesQuery.data;
-  const canManage = data?.role === "owner" || data?.role === "admin";
+  const role = data?.role ?? initialRole;
+  const canManage = role === "owner" || role === "admin";
+  const visibility =
+    (data?.visibility as Visibility | null | undefined) ??
+    initialVisibility ??
+    null;
 
   // Attribution `via` must be a stable non-PII id, never an email. The only
   // owner id available client-side is the *current* session's userId, which is
@@ -226,6 +245,7 @@ function ShareRecordingContent({
             recordingId={recordingId}
             shareUrl={shareUrl}
             sharesQuery={sharesQuery}
+            visibility={visibility}
             canManage={canManage}
             videoUrl={videoUrl}
             animatedThumbnailUrl={animatedThumbnailUrl}
@@ -247,6 +267,7 @@ function ShareRecordingContent({
           <ClipsEmbedConfigurator
             recordingId={recordingId}
             sharesQuery={sharesQuery}
+            visibility={visibility}
             canManage={canManage}
             ownerViaId={ownerViaId}
           />
@@ -264,6 +285,7 @@ function LinkTab({
   recordingId,
   shareUrl,
   sharesQuery,
+  visibility,
   canManage,
   videoUrl,
   animatedThumbnailUrl,
@@ -272,6 +294,7 @@ function LinkTab({
   recordingId: string;
   shareUrl: string;
   sharesQuery: SharesQuery;
+  visibility: Visibility | null;
   canManage: boolean;
   videoUrl?: string | null;
   animatedThumbnailUrl?: string | null;
@@ -283,11 +306,9 @@ function LinkTab({
     recordingId,
     sharesQuery,
   );
-  const data = sharesQuery.data;
-  const visibility: Visibility =
-    (data?.visibility as Visibility | null) ?? "private";
   const isPublic = visibility === "public";
-  const sharesLoaded = data !== undefined;
+  const sharesLoaded = visibility !== null;
+  const visibilityPending = isPending || sharesQuery.isLoading;
   const isLoomRecording = isLoomRecordingProp || isLoomEmbedUrl(videoUrl);
   const createAgentLink = useActionMutation(
     "create-recording-agent-link" as any,
@@ -355,25 +376,34 @@ function LinkTab({
 
   return (
     <div className="space-y-4">
-      <GeneralAccessSelect
-        visibility={visibility}
-        canManage={canManage}
-        isPending={isPending}
-        onChange={(next) => setResourceVisibility(next)}
-        publicDescription={t("shareDialog.publicDescription")}
-      />
+      {visibility ? (
+        <GeneralAccessSelect
+          visibility={visibility}
+          canManage={canManage}
+          isPending={visibilityPending}
+          onChange={(next) => setResourceVisibility(next)}
+          publicDescription={t("shareDialog.publicDescription")}
+        />
+      ) : (
+        <div className="space-y-2" aria-hidden>
+          <div className="h-3 w-24 animate-pulse rounded bg-muted" />
+          <div className="h-12 w-full animate-pulse rounded bg-muted" />
+        </div>
+      )}
 
       <CopyField
         label={t("shareDialog.shareLink")}
         value={shareUrl}
-        disabled={isPending || (!isPublic && canManage)}
+        disabled={
+          visibilityPending || !sharesLoaded || (!isPublic && canManage)
+        }
       />
 
       {/* Public links unfurl into a playable video in Slack; surface that here
           (and a connect link) instead of leaving it buried in Settings. */}
       {isPublic ? <SlackShareHint canManage={canManage} /> : null}
 
-      {!isPublic ? (
+      {sharesLoaded && !isPublic ? (
         <Collapsible open={agentShareOpen} onOpenChange={setAgentShareOpen}>
           <CollapsibleTrigger asChild>
             <Button
@@ -431,7 +461,7 @@ function LinkTab({
         </Collapsible>
       ) : null}
 
-      {!isPublic && canManage ? (
+      {sharesLoaded && !isPublic && canManage ? (
         <MakePublicCard
           isPending={isPending}
           onMakePublic={() =>
@@ -485,11 +515,13 @@ function LinkTab({
 function ClipsEmbedConfigurator({
   recordingId,
   sharesQuery,
+  visibility,
   canManage,
   ownerViaId,
 }: {
   recordingId: string;
   sharesQuery: SharesQuery;
+  visibility: Visibility | null;
   canManage: boolean;
   ownerViaId?: string;
 }) {
@@ -500,11 +532,10 @@ function ClipsEmbedConfigurator({
   const [width, setWidth] = useState(640);
   const [height, setHeight] = useState(360);
 
-  const data = sharesQuery.data;
-  const visibility: Visibility =
-    (data?.visibility as Visibility | null) ?? "private";
   const isPublic = visibility === "public";
-  const visibilityLabel = t(`shareUi.visibility.${visibility}.label`);
+  const visibilityLabel = visibility
+    ? t(`shareUi.visibility.${visibility}.label`)
+    : "";
   const { setResourceVisibility, isPending } = useResourceVisibilityMutation(
     "recording",
     recordingId,
@@ -529,6 +560,15 @@ function ClipsEmbedConfigurator({
       ? `<div style="position:relative;padding-bottom:56.25%;height:0;background:#000;overflow:hidden"><iframe src="${src}" title="${t("shareDialog.embedIframeTitle")}" frameborder="0" scrolling="no" allowfullscreen allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;overflow:hidden"></iframe></div>`
       : `<iframe src="${src}" title="${t("shareDialog.embedIframeTitle")}" width="${width}" height="${height}" frameborder="0" scrolling="no" allowfullscreen allow="autoplay; fullscreen; picture-in-picture" style="display:block;max-width:100%;border:0;background:#000;overflow:hidden"></iframe>`;
 
+  if (!visibility) {
+    return (
+      <div className="space-y-2" aria-hidden>
+        <div className="h-16 w-full animate-pulse rounded bg-muted" />
+        <div className="h-24 w-full animate-pulse rounded bg-muted" />
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-3">
       {!isPublic ? (

package/corpus/templates/clips/app/components/player/transcript-panel.tsx

@@ -19,6 +19,7 @@ import {
   IconBolt,
   IconChevronDown,
   IconChevronUp,
+  IconRefresh,
 } from "@tabler/icons-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
@@ -56,6 +57,9 @@ export interface TranscriptPanelProps {
   recordingTitle?: string;
   /** Called when the user asks us to retry transcription after fixing an error. */
   onRetry?: () => void;
+  /** Called when the user asks for a fresh transcript from the recording media. */
+  onRegenerate?: () => void;
+  isRegenerating?: boolean;
 }
 
 export function TranscriptPanel(props: TranscriptPanelProps) {
@@ -71,6 +75,8 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
     cleanup,
     recordingTitle,
     onRetry,
+    onRegenerate,
+    isRegenerating = false,
   } = props;
   const [query, setQuery] = useState("");
   const [copied, setCopied] = useState(false);
@@ -170,8 +176,18 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
           </p>
         </div>
         {onRetry ? (
-          <Button size="sm" variant="outline" onClick={onRetry}>
-            {t("transcriptPanel.retry")}
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={onRetry}
+            disabled={isRegenerating}
+          >
+            {isRegenerating ? (
+              <IconLoader2 className="size-4 animate-spin" />
+            ) : null}
+            {isRegenerating
+              ? t("transcriptPanel.transcribing")
+              : t("transcriptPanel.regenerate")}
           </Button>
         ) : null}
       </div>
@@ -188,8 +204,18 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
         </div>
         <div className="flex items-center gap-2">
           {onRetry ? (
-            <Button size="sm" variant="outline" onClick={onRetry}>
-              {t("transcriptPanel.retry")}
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={onRetry}
+              disabled={isRegenerating}
+            >
+              {isRegenerating ? (
+                <IconLoader2 className="size-4 animate-spin" />
+              ) : null}
+              {isRegenerating
+                ? t("transcriptPanel.transcribing")
+                : t("transcriptPanel.regenerate")}
             </Button>
           ) : null}
         </div>
@@ -229,6 +255,24 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
           </TooltipTrigger>
           <TooltipContent>{t("transcriptPanel.downloadSrt")}</TooltipContent>
         </Tooltip>
+        {onRegenerate ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onRegenerate}
+                disabled={isRegenerating}
+                aria-label={t("transcriptPanel.regenerate")}
+              >
+                <IconRefresh
+                  className={cn("h-4 w-4", isRegenerating && "animate-spin")}
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("transcriptPanel.regenerate")}</TooltipContent>
+          </Tooltip>
+        ) : null}
       </div>
 
       {cleanup?.status === "running" ? (
@@ -261,14 +305,24 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
               const isActive = displaySegments[activeIndex] === seg;
               return (
                 <li key={seg.startMs}>
-                  <button
-                    onClick={() => onSeek(seg.startMs)}
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    onClick={(event) => {
+                      if (hasSelectionWithin(event.currentTarget)) return;
+                      onSeek(seg.startMs);
+                    }}
+                    onKeyDown={(event) => {
+                      if (event.key !== "Enter" && event.key !== " ") return;
+                      event.preventDefault();
+                      onSeek(seg.startMs);
+                    }}
                     className={cn(
-                      "w-full text-left px-3 py-2 flex gap-3 items-start hover:bg-accent/50",
+                      "flex w-full cursor-pointer items-start gap-3 px-3 py-2 text-left hover:bg-accent/50",
                       isActive && "bg-accent",
                     )}
                   >
-                    <span className="text-[11px] text-muted-foreground font-mono tabular-nums pt-0.5 shrink-0">
+                    <span className="shrink-0 pt-0.5 font-mono text-[11px] tabular-nums text-muted-foreground">
                       {msToClock(seg.startMs)}
                     </span>
                     <span
@@ -280,7 +334,7 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
                         __html: highlight(seg.text, query),
                       }}
                     />
-                  </button>
+                  </div>
                 </li>
               );
             })}
@@ -291,6 +345,18 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
   );
 }
 
+function hasSelectionWithin(element: HTMLElement): boolean {
+  const selection = window.getSelection();
+  if (!selection || selection.isCollapsed || !selection.toString().trim()) {
+    return false;
+  }
+  const { anchorNode, focusNode } = selection;
+  return Boolean(
+    (anchorNode && element.contains(anchorNode)) ||
+    (focusNode && element.contains(focusNode)),
+  );
+}
+
 function highlight(text: string, q: string): string {
   const escaped = text.replace(/[&<>]/g, (c) =>
     c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;",

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

@@ -563,16 +563,21 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       requestPlay();
     }, [isPlaying, pauseVideo, requestPlay]);
 
-    const activateVideoSurface = useCallback(() => {
-      const v = videoRef.current;
-      if (!v) return;
-      if (!v.paused || isPlaying) {
-        pauseVideo();
-      } else {
-        requestPlay();
-      }
-      bumpControls();
-    }, [bumpControls, isPlaying, pauseVideo, requestPlay]);
+    const activateVideoSurface = useCallback(
+      (input: "mouse" | "touch") => {
+        // Match native mobile players: touching the video reveals the controls
+        // without unexpectedly pausing or resuming it. Embeds that explicitly
+        // hide their chrome keep surface-tap playback so they remain usable.
+        if (input === "touch" && !hideChrome) {
+          bumpControls();
+          return;
+        }
+
+        togglePlayback();
+        bumpControls();
+      },
+      [bumpControls, hideChrome, togglePlayback],
+    );
 
     const handlePlayerPointerDown = useCallback(
       (e: React.PointerEvent<HTMLDivElement>) => {
@@ -610,7 +615,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
 
         e.preventDefault();
         suppressNextClickRef.current = true;
-        activateVideoSurface();
+        activateVideoSurface("touch");
       },
       [activateVideoSurface, isLoomEmbed],
     );
@@ -1115,7 +1120,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
           // keep their own behavior.
           if (isPlayerUiTarget(e.target)) return;
           if (isLoomEmbed) return;
-          activateVideoSurface();
+          activateVideoSurface("mouse");
         }}
       >
         {isLoomEmbed && loomIframeSrc ? (