@agent-native/core 0.90.11 → 0.91.0

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

@@ -8,7 +8,11 @@ import {
   LOOM_START_MS_QUERY_PARAM,
   loomEmbedUrlWithTimestamp,
 } from "@shared/loom";
-import { IconBolt, IconPlayerPlay } from "@tabler/icons-react";
+import {
+  IconBolt,
+  IconPlayerPlay,
+  IconPlayerSkipForward,
+} from "@tabler/icons-react";
 import {
   forwardRef,
   useCallback,
@@ -47,7 +51,11 @@ import { cn } from "@/lib/utils";
 
 import { CaptionsOverlay } from "./captions-overlay";
 import { CtaButton } from "./cta-button";
-import { PlayerControls, SPEED_OPTIONS } from "./player-controls";
+import {
+  PLAYER_SEEK_STEP_MS,
+  PlayerControls,
+  SPEED_OPTIONS,
+} from "./player-controls";
 
 function resolveLocalUrl(url: string | null | undefined): string | undefined {
   if (!url) return undefined;
@@ -126,6 +134,14 @@ function applyLoomStartToVideoSrc(src: string, ms: number): string {
   return setUrlSearchParam(src, LOOM_START_MS_QUERY_PARAM, String(ms));
 }
 
+function isPlayerUiTarget(target: EventTarget | null): boolean {
+  return (
+    typeof Element !== "undefined" &&
+    target instanceof Element &&
+    Boolean(target.closest("[data-player-ui]"))
+  );
+}
+
 export interface VideoPlayerHandle {
   video: HTMLVideoElement | null;
   play: () => Promise<void> | void;
@@ -242,6 +258,12 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
     const videoRef = useRef<HTMLVideoElement | null>(null);
     const containerRef = useRef<HTMLDivElement | null>(null);
     const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const touchTapCandidateRef = useRef<{
+      pointerId: number;
+      x: number;
+      y: number;
+    } | null>(null);
+    const suppressNextClickRef = useRef(false);
     const playAttemptPendingRef = useRef(false);
     const playAttemptIdRef = useRef(0);
     // Position to restore after `v.load()` resets `currentTime` to 0 while
@@ -465,10 +487,12 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       setPlayError(null);
 
       if (
-        initialVisibleFrameSeekedRef.current &&
         !hasPlaybackStarted &&
         (!startMs || startMs <= 0) &&
-        v.currentTime > 0.05
+        ((initialVisibleFrameSeekedRef.current && v.currentTime > 0.05) ||
+          // The WebM duration probe seeks to 1e10. If Chrome never resolves the
+          // durationchange, first play must rewind instead of starting there.
+          v.currentTime > 1e7)
       ) {
         try {
           v.currentTime = 0;
@@ -547,6 +571,57 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       requestPlay();
     }, [isPlaying, pauseVideo, requestPlay]);
 
+    const handlePlayerPointerDown = useCallback(
+      (e: React.PointerEvent<HTMLDivElement>) => {
+        if (
+          e.pointerType === "mouse" ||
+          e.button !== 0 ||
+          isLoomEmbed ||
+          isPlayerUiTarget(e.target)
+        ) {
+          return;
+        }
+
+        touchTapCandidateRef.current = {
+          pointerId: e.pointerId,
+          x: e.clientX,
+          y: e.clientY,
+        };
+      },
+      [isLoomEmbed],
+    );
+
+    const handlePlayerPointerUp = useCallback(
+      (e: React.PointerEvent<HTMLDivElement>) => {
+        const candidate = touchTapCandidateRef.current;
+        if (!candidate || candidate.pointerId !== e.pointerId) return;
+        touchTapCandidateRef.current = null;
+
+        if (isLoomEmbed || isPlayerUiTarget(e.target)) return;
+
+        const moved = Math.max(
+          Math.abs(e.clientX - candidate.x),
+          Math.abs(e.clientY - candidate.y),
+        );
+        if (moved > 12) return;
+
+        e.preventDefault();
+        suppressNextClickRef.current = true;
+        togglePlayback();
+        bumpControls();
+      },
+      [bumpControls, isLoomEmbed, togglePlayback],
+    );
+
+    const handlePlayerPointerCancel = useCallback(
+      (e: React.PointerEvent<HTMLDivElement>) => {
+        if (touchTapCandidateRef.current?.pointerId === e.pointerId) {
+          touchTapCandidateRef.current = null;
+        }
+      },
+      [],
+    );
+
     const applySpeed = useCallback(
       (rate: number) => {
         const nextSpeed = parsePlaybackSpeed(rate) ?? defaultSpeed;
@@ -612,6 +687,21 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
       ],
     );
 
+    const seekByMs = useCallback(
+      (deltaMs: number) => {
+        const v = videoRef.current;
+        const liveMs =
+          v &&
+          Number.isFinite(v.currentTime) &&
+          v.currentTime >= 0 &&
+          v.currentTime < 1e7
+            ? Math.floor(v.currentTime * 1000)
+            : currentMs;
+        seekToVisibleMs(liveMs + deltaMs);
+      },
+      [currentMs, seekToVisibleMs],
+    );
+
     // Imperative handle for parent
     useImperativeHandle(
       ref,
@@ -1011,10 +1101,16 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
         )}
         onMouseMove={bumpControls}
         onMouseLeave={() => !alwaysShowControls && setShowControls(false)}
+        onPointerDown={handlePlayerPointerDown}
+        onPointerUp={handlePlayerPointerUp}
+        onPointerCancel={handlePlayerPointerCancel}
         onClick={(e) => {
+          if (suppressNextClickRef.current) {
+            suppressNextClickRef.current = false;
+            return;
+          }
           // Clicking the video toggles play — but not when clicking controls.
-          const target = e.target as HTMLElement;
-          if (target.closest("[data-player-ui]")) return;
+          if (isPlayerUiTarget(e.target)) return;
           if (isLoomEmbed) return;
           togglePlayback();
         }}
@@ -1301,6 +1397,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
               requestPlay();
             }}
             onSpeedChange={applySpeed}
+            onSeekRelative={seekByMs}
             menuPortalContainer={fullscreenMenuContainer}
           />
         ) : null}
@@ -1373,6 +1470,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
               onSeek={(ms) => {
                 seekToVisibleMs(ms);
               }}
+              onSeekRelative={seekByMs}
               onVolumeChange={(vol) => {
                 const v = videoRef.current;
                 if (v) {
@@ -1413,6 +1511,7 @@ function CenterPlaybackOverlay({
   playError,
   onPlay,
   onSpeedChange,
+  onSeekRelative,
   menuPortalContainer,
 }: {
   mode: "loading" | "ready";
@@ -1422,6 +1521,7 @@ function CenterPlaybackOverlay({
   playError: string | null;
   onPlay: () => void;
   onSpeedChange: (rate: number) => void;
+  onSeekRelative: (deltaMs: number) => void;
   menuPortalContainer?: HTMLElement | null;
 }) {
   const t = useT();
@@ -1446,18 +1546,30 @@ function CenterPlaybackOverlay({
           </div>
         ) : (
           <>
-            <button
-              data-player-ui
-              type="button"
-              aria-label={t("videoPlayer.playClip")}
-              onClick={(e) => {
-                e.stopPropagation();
-                onPlay();
-              }}
-              className="pointer-events-auto flex h-[clamp(3rem,13cqw,6rem)] w-[clamp(3rem,13cqw,6rem)] items-center justify-center rounded-full bg-white text-black shadow-2xl ring-1 ring-white/35 transition-transform duration-150 hover:scale-105 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-black"
-            >
-              <IconPlayerPlay className="ml-[6%] h-[clamp(1.5rem,6.5cqw,3rem)] w-[clamp(1.5rem,6.5cqw,3rem)] fill-current" />
-            </button>
+            <div className="flex items-center gap-[clamp(0.75rem,4cqw,1.5rem)]">
+              <CenterSeekButton
+                direction="back"
+                ariaLabel="Back 15 seconds"
+                onClick={() => onSeekRelative(-PLAYER_SEEK_STEP_MS)}
+              />
+              <button
+                data-player-ui
+                type="button"
+                aria-label={t("videoPlayer.playClip")}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onPlay();
+                }}
+                className="pointer-events-auto flex h-[clamp(3rem,13cqw,6rem)] w-[clamp(3rem,13cqw,6rem)] items-center justify-center rounded-full bg-white text-black shadow-2xl ring-1 ring-white/35 transition-transform duration-150 hover:scale-105 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+              >
+                <IconPlayerPlay className="ml-[6%] h-[clamp(1.5rem,6.5cqw,3rem)] w-[clamp(1.5rem,6.5cqw,3rem)] fill-current" />
+              </button>
+              <CenterSeekButton
+                direction="forward"
+                ariaLabel="Forward 15 seconds"
+                onClick={() => onSeekRelative(PLAYER_SEEK_STEP_MS)}
+              />
+            </div>
 
             <div
               data-player-ui
@@ -1522,6 +1634,38 @@ function CenterPlaybackOverlay({
   );
 }
 
+function CenterSeekButton({
+  direction,
+  ariaLabel,
+  onClick,
+}: {
+  direction: "back" | "forward";
+  ariaLabel: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      data-player-ui
+      type="button"
+      aria-label={ariaLabel}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      className="pointer-events-auto flex h-[clamp(2.5rem,9cqw,4rem)] w-[clamp(2.5rem,9cqw,4rem)] items-center justify-center rounded-full bg-black/70 text-white shadow-xl ring-1 ring-white/20 backdrop-blur-md transition-transform duration-150 hover:scale-105 hover:bg-black/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+    >
+      <span className="relative flex h-[clamp(1.25rem,4.5cqw,2rem)] w-[clamp(1.25rem,4.5cqw,2rem)] items-center justify-center">
+        <IconPlayerSkipForward
+          className={cn("h-full w-full", direction === "back" && "rotate-180")}
+        />
+        <span className="absolute text-[clamp(0.45rem,1.8cqw,0.7rem)] font-bold leading-none">
+          15
+        </span>
+      </span>
+    </button>
+  );
+}
+
 /**
  * Clamp a millisecond seek target to a value the browser will actually accept.
  *

package/corpus/templates/clips/app/routes/_app.settings._index.tsx

@@ -10,6 +10,7 @@ import {
   SettingsTabsPage,
   useAgentSettingsTabs,
   useT,
+  type SettingsSearchEntry,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
 import {
@@ -30,7 +31,7 @@ import {
   IconTrash,
   IconUser,
 } from "@tabler/icons-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 
 import { PageHeader } from "@/components/library/page-header";
@@ -746,6 +747,61 @@ export default function SettingsIndexRoute() {
   const builderCreditsUpgradeUrl =
     builderCreditStatus.data?.upgradeUrl ?? BUILDER_CREDITS_UPGRADE_URL;
 
+  const generalSearchEntries = useMemo<SettingsSearchEntry[]>(
+    () => [
+      {
+        id: "clips-language",
+        label: t("settings.languageTitle"),
+        keywords: "language locale translation i18n",
+        hash: "language",
+      },
+      {
+        id: "clips-video-storage",
+        label: t("settings.videoStorage"),
+        keywords: "storage s3 builder bucket cloud video",
+        hash: "video-storage",
+      },
+      {
+        id: "clips-slack",
+        label: t("settings.slackTitle"),
+        keywords: "slack integration notifications workspace",
+        hash: "slack",
+      },
+      {
+        id: "clips-ai-providers",
+        label: t("settings.apiSetup"),
+        keywords:
+          "ai provider api key anthropic openai gemini groq openrouter builder",
+        hash: "ai-providers",
+      },
+      {
+        id: "clips-profile",
+        label: t("settings.profile"),
+        keywords: "profile email display name",
+        hash: "profile",
+      },
+      {
+        id: "clips-playback",
+        label: t("settings.playback"),
+        keywords: "playback speed video default",
+        hash: "playback",
+      },
+      {
+        id: "clips-transcript",
+        label: t("settings.transcript"),
+        keywords: "transcript cleanup captions",
+        hash: "transcript",
+      },
+      {
+        id: "clips-notifications",
+        label: t("settings.notifications"),
+        keywords: "email notifications alerts",
+        hash: "notifications",
+      },
+    ],
+    [t],
+  );
+
   return (
     <>
       <PageHeader>
@@ -756,6 +812,7 @@ export default function SettingsIndexRoute() {
       <SettingsTabsPage
         whatsNewLabel={t("settings.whatsNew")}
         extraTabs={agentSettingsTabs}
+        generalSearchEntries={generalSearchEntries}
         general={
           <div className="mx-auto w-full max-w-4xl space-y-6">
             <div className="min-w-0 space-y-6">
@@ -763,7 +820,7 @@ export default function SettingsIndexRoute() {
                 {t("settings.intro")}
               </p>
 
-              <Card>
+              <Card id="language" className="scroll-mt-16">
                 <CardHeader>
                   <CardTitle className="text-base">
                     {t("settings.languageTitle")}
@@ -1353,7 +1410,7 @@ export default function SettingsIndexRoute() {
                 </CardContent>
               </Card>
 
-              <Card>
+              <Card id="profile" className="scroll-mt-16">
                 <CardHeader>
                   <CardTitle className="text-base flex items-center gap-2">
                     <IconUser className="size-4 text-primary" />
@@ -1380,7 +1437,7 @@ export default function SettingsIndexRoute() {
                 </CardContent>
               </Card>
 
-              <Card>
+              <Card id="playback" className="scroll-mt-16">
                 <CardHeader>
                   <CardTitle className="text-base">
                     {t("settings.playback")}
@@ -1414,7 +1471,7 @@ export default function SettingsIndexRoute() {
                 </CardContent>
               </Card>
 
-              <Card>
+              <Card id="transcript" className="scroll-mt-16">
                 <CardHeader>
                   <CardTitle className="text-base">
                     {t("settings.transcript")}
@@ -1443,7 +1500,7 @@ export default function SettingsIndexRoute() {
                 </CardContent>
               </Card>
 
-              <Card>
+              <Card id="notifications" className="scroll-mt-16">
                 <CardHeader>
                   <CardTitle className="text-base">
                     {t("settings.notifications")}

package/corpus/templates/clips/app/routes/record.tsx

@@ -85,6 +85,20 @@ async function writeAppState(key: string, value: unknown): Promise<void> {
     },
   );
 }
+
+function recordingLink(recordingId: string): string {
+  const path = `${appBasePath()}/r/${encodeURIComponent(recordingId)}`;
+  if (typeof window === "undefined") return path;
+  return new URL(path, window.location.origin).toString();
+}
+
+async function copyRecordingLink(recordingId: string): Promise<void> {
+  if (typeof navigator === "undefined") return;
+  if (!navigator.clipboard?.writeText) return;
+  await navigator.clipboard
+    .writeText(recordingLink(recordingId))
+    .catch(() => undefined);
+}
 import {
   bugReportTitle,
   parseBugReportContext,
@@ -1786,6 +1800,7 @@ export default function RecordRoute() {
             duration: 12_000,
           });
         } else {
+          if (createdId && !reportContext) await copyRecordingLink(createdId);
           toast.success(t("recordRoute.videoUploaded"));
         }
         if (reportContext && createdId) {
@@ -1888,6 +1903,7 @@ export default function RecordRoute() {
             duration: 12_000,
           });
         } else {
+          await copyRecordingLink(recordingId);
           toast.success(t("recordRoute.loomImported"));
         }
         await writeAppState("navigate", {
@@ -2014,16 +2030,17 @@ export default function RecordRoute() {
       setCompressionProgress(null);
       setUploadProgress(null);
       setUiState("complete");
+      const reportContext = bugReportContextRef.current;
       if (result.waitingForStorage) {
         toast.info(t("recordRoute.recordingReadyToUpload"), {
           description: t("recordRoute.connectStorageToFinish"),
           duration: 12_000,
         });
       } else {
+        if (!reportContext) await copyRecordingLink(recordingId);
         toast.success(t("recordRoute.recordingSaved"));
       }
 
-      const reportContext = bugReportContextRef.current;
       if (reportContext) {
         const path = bugReportDonePath(recordingId, reportContext);
         await writeAppState("navigate", {

package/corpus/templates/clips/changelog/2026-07-07-shared-clips-start-playback-reliably-from-the-first-play-click.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-07
+---
+
+Shared clips start playback reliably from the first play click.

package/corpus/templates/clips/changelog/2026-07-08-chrome-extension-camera-and-microphone-menus-now-show-which-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-08
+---
+
+Chrome extension camera and microphone menus now show which device the system default currently points to.

package/corpus/templates/clips/changelog/2026-07-08-chrome-extension-copies-new-clip-links-after-saving.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-08
+---
+
+Chrome extension recordings copy their share link automatically after saving.

package/corpus/templates/clips/changelog/2026-07-08-chrome-extension-recordings-now-continue-after-granting-came.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-08
+---
+
+Chrome extension recordings now continue after granting camera or microphone access and recover the camera bubble more reliably.

package/corpus/templates/clips/changelog/2026-07-08-mobile-shared-clips-now-have-loom-style-tap-and-skip-controls.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-08
+---
+
+Mobile shared clips now support Loom-style tap-to-pause playback with 15-second skip controls.

package/corpus/templates/clips/changelog/2026-07-08-recordings-and-uploads-copy-links-after-saving.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-08
+---
+
+New recordings and uploads copy their clip link automatically after saving.

package/corpus/templates/clips/changelog/2026-07-08-settings-are-cleaner-searchable-and-collapse-s3-with-builder.md

@@ -0,0 +1,5 @@
+---
+type: improved
+---
+
+Settings are cleaner and searchable, and the S3 fields collapse automatically once Builder storage is connected.

package/corpus/templates/clips/changelog/2026-07-08-transcripts-are-more-reliable-for-longer-desktop-recordings-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-08
+---
+
+Transcripts are more reliable for longer desktop recordings when audio extraction is slow.

package/corpus/templates/clips/chrome-extension/public/manifest.json

@@ -20,6 +20,7 @@
   },
   "permissions": [
     "activeTab",
+    "clipboardWrite",
     "debugger",
     "downloads",
     "offscreen",