@agent-native/core 0.114.6 → 0.114.8

package/corpus/templates/clips/actions/request-rewind-extension.ts

@@ -0,0 +1,81 @@
+import { defineAction } from "@agent-native/core";
+import {
+  readAppState,
+  writeAppState,
+} from "@agent-native/core/application-state";
+import { assertAccess } from "@agent-native/core/sharing";
+import { eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { isPrivateClip } from "../app/lib/rewind-visibility.js";
+import { getDb, schema } from "../server/db/index.js";
+import { nanoid } from "../server/lib/recordings.js";
+import { assertNoDirectRecordingShares } from "./make-recording-private-for-rewind.js";
+
+export const REWIND_EXTENSION_PREFIX = "rewind-extension-request-";
+
+export interface RewindExtensionRequest {
+  [key: string]: unknown;
+  requestId: string;
+  recordingId: string;
+  seconds: 30 | 300;
+  status:
+    | "pending"
+    | "processing"
+    | "ready"
+    | "applying"
+    | "applied"
+    | "failed";
+  requestedAt: string;
+  updatedAt: string;
+  preRollRecordingId?: string;
+  actualDurationMs?: number;
+  error?: string;
+}
+
+export function rewindExtensionKey(recordingId: string): string {
+  return `${REWIND_EXTENSION_PREFIX}${recordingId}`;
+}
+
+export default defineAction({
+  description:
+    "Ask the signed-in Clips Alpha app to retrieve an explicit 30-second or five-minute pre-roll from local Rewind for one owned recording.",
+  schema: z.object({
+    recordingId: z.string(),
+    seconds: z.union([z.literal(30), z.literal(300)]),
+  }),
+  run: async ({ recordingId, seconds }) => {
+    await assertAccess("recording", recordingId, "owner");
+    const [recording] = await getDb()
+      .select({ visibility: schema.recordings.visibility })
+      .from(schema.recordings)
+      .where(eq(schema.recordings.id, recordingId));
+    if (!recording || !isPrivateClip(recording.visibility)) {
+      throw new Error(
+        "Make this Clip private before adding local Rewind history.",
+      );
+    }
+    await assertNoDirectRecordingShares(recordingId);
+    const key = rewindExtensionKey(recordingId);
+    const existing = (await readAppState(key)) as RewindExtensionRequest | null;
+    if (existing && !["failed", "applied"].includes(existing.status)) {
+      return existing;
+    }
+    if (existing?.status === "applied") {
+      throw new Error(
+        "This Clip already includes an explicit Rewind pre-roll.",
+      );
+    }
+    const now = new Date().toISOString();
+    const request: RewindExtensionRequest = {
+      requestId: `rewind-extend-${nanoid()}`,
+      recordingId,
+      seconds,
+      status: "pending",
+      requestedAt: now,
+      updatedAt: now,
+    };
+    await writeAppState(key, request);
+    return request;
+  },
+});

package/corpus/templates/clips/actions/update-rewind-extension-request.ts

@@ -0,0 +1,47 @@
+import { defineAction } from "@agent-native/core";
+import {
+  readAppState,
+  writeAppState,
+} from "@agent-native/core/application-state";
+import { assertAccess } from "@agent-native/core/sharing";
+import { z } from "zod";
+
+import {
+  rewindExtensionKey,
+  type RewindExtensionRequest,
+} from "./request-rewind-extension.js";
+
+export default defineAction({
+  description:
+    "Update the local Clips Alpha processing state for an explicit Rewind pre-roll request.",
+  schema: z.object({
+    recordingId: z.string(),
+    requestId: z.string(),
+    status: z.enum(["processing", "ready", "failed"]),
+    preRollRecordingId: z.string().optional(),
+    actualDurationMs: z.number().int().positive().optional(),
+    error: z.string().max(1200).optional(),
+  }),
+  run: async (args) => {
+    await assertAccess("recording", args.recordingId, "owner");
+    const key = rewindExtensionKey(args.recordingId);
+    const current = (await readAppState(key)) as RewindExtensionRequest | null;
+    if (!current || current.requestId !== args.requestId) {
+      throw new Error("Rewind extension request is no longer current.");
+    }
+    const next: RewindExtensionRequest = {
+      ...current,
+      status: args.status,
+      updatedAt: new Date().toISOString(),
+      ...(args.preRollRecordingId
+        ? { preRollRecordingId: args.preRollRecordingId }
+        : {}),
+      ...(args.actualDurationMs
+        ? { actualDurationMs: args.actualDurationMs }
+        : {}),
+      ...(args.error ? { error: args.error } : {}),
+    };
+    await writeAppState(key, next);
+    return next;
+  },
+});

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

@@ -49,6 +49,7 @@ import {
   readPlaybackSpeedPreference,
   savePlaybackSpeedPreference,
 } from "@/lib/playback-speed";
+import { canOfferRewindHistory } from "@/lib/rewind-visibility";
 import {
   parseEdits,
   getExcludedRanges,
@@ -62,6 +63,7 @@ import { computePeaks, type WaveformPeaks } from "@/lib/waveform-peaks";
 import { ChaptersEditor } from "./chapters-editor";
 import { defaultSelectionRange } from "./editor-selection";
 import { EditorToolbar } from "./editor-toolbar";
+import { RewindExtensionDialog } from "./rewind-extension-dialog";
 import { StitchManager } from "./stitch-manager";
 import { ThumbnailPicker } from "./thumbnail-picker";
 import { Timeline } from "./timeline";
@@ -219,6 +221,7 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
 
   const [thumbOpen, setThumbOpen] = useState(false);
   const [stitchOpen, setStitchOpen] = useState(false);
+  const [rewindOpen, setRewindOpen] = useState(false);
   const [chaptersOpen, setChaptersOpen] = useState(false);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -636,6 +639,10 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
         onOpenThumbnailPicker={() => setThumbOpen(true)}
         onOpenChapters={() => setChaptersOpen((v) => !v)}
         onOpenStitch={() => setStitchOpen(true)}
+        onOpenRewind={() => setRewindOpen(true)}
+        rewindAlreadyAdded={Boolean(edits.rewindOriginalStartMs)}
+        rewindAvailable={canOfferRewindHistory(playerData?.role)}
+        rewindRequiresPrivate={recording?.visibility !== "private"}
         chaptersOpen={chaptersOpen}
       />
 
@@ -739,6 +746,7 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
                   playheadMs={playheadMs}
                   chapters={chapters}
                   splitPoints={splitPoints}
+                  originalStartMs={edits.rewindOriginalStartMs}
                   onSeek={seek}
                   onClickChapter={(c) => seek(c.startMs)}
                 />
@@ -787,6 +795,23 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
         onOpenChange={setStitchOpen}
         seedRecordingId={recordingId}
       />
+      {canOfferRewindHistory(playerData?.role) ? (
+        <RewindExtensionDialog
+          open={rewindOpen}
+          onOpenChange={setRewindOpen}
+          recordingId={recordingId}
+          durationMs={durationMs}
+          videoFormat={videoFormat}
+          hasAudio={Boolean(recording.hasAudio)}
+          visibility={recording.visibility}
+          onVisibilityChanged={async () => {
+            await playerDataQuery.refetch();
+          }}
+          onApplied={async () => {
+            await playerDataQuery.refetch();
+          }}
+        />
+      ) : null}
     </div>
   );
 }

package/corpus/templates/clips/app/components/editor/editor-toolbar.tsx

@@ -16,6 +16,7 @@ import {
   IconDownload,
   IconLoader2,
   IconTrash,
+  IconHistory,
 } from "@tabler/icons-react";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -84,6 +85,10 @@ export interface EditorToolbarProps {
   onOpenThumbnailPicker: () => void;
   onOpenChapters: () => void;
   onOpenStitch: () => void;
+  onOpenRewind: () => void;
+  rewindAlreadyAdded?: boolean;
+  rewindAvailable?: boolean;
+  rewindRequiresPrivate?: boolean;
   chaptersOpen?: boolean;
 }
 
@@ -103,6 +108,10 @@ export function EditorToolbar({
   onOpenThumbnailPicker,
   onOpenChapters,
   onOpenStitch,
+  onOpenRewind,
+  rewindAlreadyAdded,
+  rewindAvailable = true,
+  rewindRequiresPrivate = false,
   chaptersOpen,
 }: EditorToolbarProps) {
   const t = useT();
@@ -482,6 +491,19 @@ export function EditorToolbar({
             <IconPuzzle className="mr-2 h-4 w-4" />
             {t("editorToolbar.stitchClips")}
           </DropdownMenuItem>
+          {rewindAvailable ? (
+            <DropdownMenuItem
+              disabled={rewindAlreadyAdded}
+              onSelect={onOpenRewind}
+            >
+              <IconHistory className="mr-2 h-4 w-4" />
+              {rewindAlreadyAdded
+                ? "Rewind history added"
+                : rewindRequiresPrivate
+                  ? "Make private and add Rewind history…"
+                  : "Add what happened before…"}
+            </DropdownMenuItem>
+          ) : null}
           <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={() => setClearOpen(true)}>
             <IconTrash className="mr-2 h-4 w-4" />
@@ -490,6 +512,20 @@ export function EditorToolbar({
         </DropdownMenuContent>
       </DropdownMenu>
 
+      {rewindAvailable && !rewindAlreadyAdded ? (
+        <Button
+          size="sm"
+          variant="ghost"
+          className="hidden shrink-0 gap-1.5 xl:inline-flex"
+          onClick={onOpenRewind}
+        >
+          <IconHistory className="h-4 w-4" />
+          {rewindRequiresPrivate
+            ? "Make private + add earlier"
+            : "Add earlier…"}
+        </Button>
+      ) : null}
+
       <div className="min-w-3 flex-1" />
 
       <Separator orientation="vertical" className="mx-1 h-6" />

package/corpus/templates/clips/app/components/editor/rewind-extension-dialog.tsx

@@ -0,0 +1,338 @@
+import {
+  agentNativePath,
+  appBasePath,
+} from "@agent-native/core/client/api-path";
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconHistory, IconLoader2 } from "@tabler/icons-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { exportConcat } from "@/lib/ffmpeg-export";
+import { uploadFileClient } from "@/lib/upload-file-client";
+
+interface RewindExtensionRequest {
+  requestId: string;
+  recordingId: string;
+  seconds: 30 | 300;
+  status:
+    | "pending"
+    | "processing"
+    | "ready"
+    | "applying"
+    | "applied"
+    | "failed";
+  preRollRecordingId?: string;
+  actualDurationMs?: number;
+  error?: string;
+}
+
+interface RewindExtensionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  recordingId: string;
+  durationMs: number;
+  videoFormat: "webm" | "mp4";
+  hasAudio: boolean;
+  visibility: "private" | "org" | "public";
+  onVisibilityChanged: () => void | Promise<void>;
+  onApplied: () => void | Promise<void>;
+}
+
+function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+async function readRequest(
+  recordingId: string,
+): Promise<RewindExtensionRequest | null> {
+  const params = new URLSearchParams({ recordingId });
+  const response = await fetch(
+    agentNativePath(
+      `/_agent-native/actions/get-rewind-extension-request?${params}`,
+    ),
+  );
+  const json = await response.json().catch(() => null);
+  if (!response.ok) {
+    throw new Error(json?.error || json?.message || "Could not check Rewind.");
+  }
+  return (json?.result ?? json)?.request ?? null;
+}
+
+export function RewindExtensionDialog({
+  open,
+  onOpenChange,
+  recordingId,
+  durationMs,
+  videoFormat,
+  hasAudio,
+  visibility,
+  onVisibilityChanged,
+  onApplied,
+}: RewindExtensionDialogProps) {
+  const t = useT();
+  const makePrivateForRewind = useActionMutation(
+    "make-recording-private-for-rewind",
+  );
+  const requestExtension = useActionMutation("request-rewind-extension");
+  const applyExtension = useActionMutation("apply-rewind-extension");
+  const requestTranscript = useActionMutation("request-transcript" as any);
+  const [busy, setBusy] = useState(false);
+  const [status, setStatus] = useState<string | null>(null);
+  const [progress, setProgress] = useState(0);
+  const [privacyConfirmed, setPrivacyConfirmed] = useState(false);
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!open && !busy) {
+      setStatus(null);
+      setProgress(0);
+      setPrivacyConfirmed(false);
+    }
+  }, [busy, open]);
+
+  const makePrivate = useCallback(async () => {
+    setBusy(true);
+    setStatus("Making this Clip private…");
+    try {
+      await makePrivateForRewind.mutateAsync({ recordingId });
+      await onVisibilityChanged();
+      setPrivacyConfirmed(true);
+      setStatus(null);
+      toast.success(t("rewindExtension.privateReady"));
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : String(error));
+      setStatus(null);
+    } finally {
+      setBusy(false);
+    }
+  }, [makePrivateForRewind, onVisibilityChanged, recordingId, t]);
+
+  const addFromRewind = useCallback(
+    async (seconds: 30 | 300) => {
+      setBusy(true);
+      setProgress(0);
+      try {
+        setStatus("Asking Clips Alpha for local Rewind history…");
+        const created = (await requestExtension.mutateAsync({
+          recordingId,
+          seconds,
+        })) as RewindExtensionRequest;
+        let request = created;
+        for (let attempt = 0; attempt < 160; attempt += 1) {
+          if (request.status === "failed") {
+            throw new Error(
+              request.error || "Clips Alpha could not read Rewind.",
+            );
+          }
+          if (
+            request.status === "ready" &&
+            request.preRollRecordingId &&
+            request.actualDurationMs
+          ) {
+            break;
+          }
+          setStatus(
+            request.status === "processing"
+              ? "Clips Alpha is preparing that local interval…"
+              : "Waiting for Clips Alpha…",
+          );
+          await wait(1_500);
+          request = (await readRequest(recordingId)) ?? request;
+        }
+        if (
+          request.status !== "ready" ||
+          !request.preRollRecordingId ||
+          !request.actualDurationMs
+        ) {
+          throw new Error(
+            "Clips Alpha did not finish the Rewind request in time.",
+          );
+        }
+
+        setStatus("Combining the selected history with this Clip…");
+        const blob = await exportConcat(
+          [
+            {
+              url: `${appBasePath()}/api/video/${encodeURIComponent(request.preRollRecordingId)}`,
+              format: "mp4",
+              hasAudio,
+            },
+            {
+              url: `${appBasePath()}/api/video/${encodeURIComponent(recordingId)}`,
+              format: videoFormat,
+              hasAudio,
+            },
+          ],
+          (next) => mounted.current && setProgress(next.progress),
+        );
+        setStatus("Saving the longer Clip…");
+        const upload = await uploadFileClient(
+          blob,
+          `rewind-${recordingId}.mp4`,
+        );
+        if (!upload?.url) {
+          throw new Error(
+            "Connect video storage before adding Rewind history.",
+          );
+        }
+        await applyExtension.mutateAsync({
+          recordingId,
+          requestId: request.requestId,
+          preRollRecordingId: request.preRollRecordingId,
+          videoUrl: upload.url,
+          durationMs: durationMs + request.actualDurationMs,
+          addedMs: request.actualDurationMs,
+        });
+        if (hasAudio) {
+          void requestTranscript
+            .mutateAsync({ recordingId, force: true, regenerate: true })
+            .catch(() => {
+              toast.info(
+                "The longer Clip was saved; its transcript can be regenerated later.",
+              );
+            });
+        }
+        await onApplied();
+        toast.success(
+          `${request.actualDurationMs >= 60_000 ? "Five minutes" : "Thirty seconds"} added from Rewind.`,
+        );
+        onOpenChange(false);
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : String(error));
+        setStatus(null);
+      } finally {
+        if (mounted.current) {
+          setBusy(false);
+          setProgress(0);
+        }
+      }
+    },
+    [
+      applyExtension,
+      durationMs,
+      hasAudio,
+      onApplied,
+      onOpenChange,
+      recordingId,
+      requestExtension,
+      requestTranscript,
+      videoFormat,
+    ],
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !busy && onOpenChange(next)}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <IconHistory className="h-4 w-4 text-primary" />
+            {t("rewindExtension.title")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("rewindExtension.description")}
+          </DialogDescription>
+        </DialogHeader>
+
+        {busy ? (
+          <div
+            className="rounded-lg border bg-muted/30 p-4 text-sm"
+            role="status"
+            aria-live="polite"
+          >
+            <div className="flex items-center gap-2 font-medium">
+              <IconLoader2
+                className="h-4 w-4 animate-spin"
+                aria-hidden="true"
+              />
+              {status}
+            </div>
+            {progress > 0 ? (
+              <div className="mt-3 h-1.5 overflow-hidden rounded-full bg-muted">
+                <div
+                  className="h-full bg-primary transition-[width]"
+                  role="progressbar"
+                  aria-label={t("rewindExtension.progressLabel")}
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                  aria-valuenow={Math.round(progress * 100)}
+                  style={{ width: `${Math.round(progress * 100)}%` }}
+                />
+              </div>
+            ) : null}
+          </div>
+        ) : visibility !== "private" && !privacyConfirmed ? (
+          <div className="grid gap-3">
+            <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-sm">
+              <strong className="block">
+                {t("rewindExtension.privateFirstTitle")}
+              </strong>
+              <span className="mt-1 block text-muted-foreground">
+                {t("rewindExtension.privateFirstDescription")}
+              </span>
+            </div>
+            <Button onClick={() => void makePrivate()}>
+              {t("rewindExtension.makePrivateContinue")}
+            </Button>
+          </div>
+        ) : (
+          <div className="grid gap-2">
+            <Button
+              variant="outline"
+              className="h-auto justify-start py-3 text-left"
+              onClick={() => void addFromRewind(30)}
+            >
+              <span>
+                <strong className="block">
+                  {t("rewindExtension.add30Seconds")}
+                </strong>
+                <span className="text-xs font-normal text-muted-foreground">
+                  Useful when you clicked Record just after the important bit.
+                </span>
+              </span>
+            </Button>
+            <Button
+              variant="outline"
+              className="h-auto justify-start py-3 text-left"
+              onClick={() => void addFromRewind(300)}
+            >
+              <span>
+                <strong className="block">
+                  {t("rewindExtension.add5Minutes")}
+                </strong>
+                <span className="text-xs font-normal text-muted-foreground">
+                  {t("rewindExtension.add5MinutesDescription")}
+                </span>
+              </span>
+            </Button>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            disabled={busy}
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/corpus/templates/clips/app/components/editor/stitch-manager.tsx

@@ -24,24 +24,9 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { exportConcat } from "@/lib/ffmpeg-export";
 import { formatMs } from "@/lib/timestamp-mapping";
+import { uploadFileClient } from "@/lib/upload-file-client";
 import { cn } from "@/lib/utils";
 
-/** Client-side upload via the framework's auto-mounted `/file-upload` route. */
-async function uploadFileClient(
-  blob: Blob,
-  filename: string,
-): Promise<{ url: string } | null> {
-  const form = new FormData();
-  form.append("file", blob, filename);
-  const res = await fetch(agentNativePath("/_agent-native/file-upload"), {
-    method: "POST",
-    body: form,
-  });
-  if (!res.ok) return null;
-  const json = await res.json();
-  return json?.url ? { url: json.url as string } : null;
-}
-
 export interface StitchManagerProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;

package/corpus/templates/clips/app/components/editor/timeline.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client/i18n";
 import { useMemo } from "react";
 
 import {
@@ -21,6 +22,8 @@ export interface TimelineProps {
   chapters?: TimelineChapter[];
   excludedRanges?: Array<{ startMs: number; endMs: number }>;
   splitPoints?: number[];
+  /** Countdown-complete start after explicit Rewind history was prepended. */
+  originalStartMs?: number;
   onSeek?: (originalMs: number) => void;
   onClickChapter?: (chapter: TimelineChapter) => void;
   className?: string;
@@ -44,10 +47,12 @@ export function Timeline({
   chapters = [],
   excludedRanges = [],
   splitPoints = [],
+  originalStartMs,
   onSeek,
   onClickChapter,
   className,
 }: TimelineProps) {
+  const t = useT();
   const ticks = useMemo(() => {
     if (durationMs <= 0) return [];
     // Target ~1 tick per 100px at the current zoom, rounded to a human interval.
@@ -133,6 +138,27 @@ export function Timeline({
           );
         })}
 
+        {typeof originalStartMs === "number" && originalStartMs > 0 ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className="absolute top-0 z-10 h-full w-0.5 cursor-help bg-amber-500"
+                style={{
+                  left: (originalStartMs / Math.max(durationMs, 1)) * width - 1,
+                }}
+                aria-label={`Original Clip start at ${formatMs(originalStartMs)}`}
+              >
+                <span className="absolute left-1 top-0 whitespace-nowrap rounded-sm bg-amber-500 px-1 text-[9px] font-semibold text-black">
+                  {t("timeline.clipStartedHere")}
+                </span>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              Recording began after the countdown · {formatMs(originalStartMs)}
+            </TooltipContent>
+          </Tooltip>
+        ) : null}
+
         {/* Playhead */}
         <div
           className="absolute top-0 h-full pointer-events-none"