@agent-native/core 0.134.1 → 0.135.1

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

@@ -1,11 +1,16 @@
 import { useEffect, useMemo, useRef } from "react";
 
 import { cn } from "@/lib/utils";
+import type { FilmstripFrame, FilmstripSprite } from "@/lib/video-filmstrip";
 import type { WaveformPeaks } from "@/lib/waveform-peaks";
 
 export interface WaveformProps {
   /** Peaks computed via `computePeaks()`. */
   peaks: WaveformPeaks | null;
+  /** Server-generated filmstrip sprite. Preferred over `frames` when present. */
+  sprite?: FilmstripSprite | null;
+  /** Browser-extracted frame thumbnails — the fallback when there's no sprite. */
+  frames?: FilmstripFrame[];
   /** Width in px of the viewport (the scroll container). */
   width: number;
   /** Height in px. */
@@ -49,15 +54,19 @@ const getBrandColorAlpha = (alpha: number) => {
   return v ? `hsl(${v} / ${alpha})` : `rgba(15, 23, 42, ${alpha})`;
 };
 
-const getWaveColor = () => getBrandColorAlpha(0.55);
-const getWaveBg = () => getBrandColorAlpha(0.12);
-const EXCLUDED_FILL = "rgba(15, 23, 42, 0.72)";
-const EXCLUDED_STROKE = "rgba(148, 163, 184, 0.45)";
+const getWaveColor = () => getBrandColorAlpha(0.85);
+const getWaveBg = () => getBrandColorAlpha(0.08);
+const EXCLUDED_FILL = "rgba(15, 23, 42, 0.65)";
+const EXCLUDED_STROKE = "rgba(148, 163, 184, 0.4)";
+const EMPTY_FRAMES: FilmstripFrame[] = [];
 const VISUAL_TARGET_PEAK = 0.78;
 const VISUAL_MAX_GAIN = 24;
 const VISUAL_GAIN_PERCENTILE = 0.95;
 const VISUAL_SILENCE_FLOOR = 0.001;
 
+const MAX_BASE_TRACK_WIDTH = 8192;
+const MAX_CANVAS_PIXELS_WIDTH = 4096;
+
 function clampSample(value: number): number {
   return Math.max(-1, Math.min(1, value));
 }
@@ -80,9 +89,28 @@ function computeVisualGain(samples: number[]): number {
   return Math.min(VISUAL_MAX_GAIN, VISUAL_TARGET_PEAK / reference);
 }
 
+function drawPillBar(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+) {
+  const radius = Math.min(width / 2, height / 2);
+  ctx.beginPath();
+  if (typeof ctx.roundRect === "function") {
+    ctx.roundRect(x, y, width, height, radius);
+  } else {
+    ctx.rect(x, y, width, height);
+  }
+  ctx.fill();
+}
+
 /** Canvas-rendered waveform. Supports up to 50x zoom with horizontal scroll. */
 export function Waveform({
   peaks,
+  sprite,
+  frames = EMPTY_FRAMES,
   width,
   height = 120,
   zoom = 1,
@@ -100,8 +128,51 @@ export function Waveform({
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
 
-  // The total drawable width (scrolls horizontally). zoom=1 fits exactly.
-  const totalWidth = Math.max(width, Math.floor(width * Math.max(1, zoom)));
+  const baseTrackWidth = useMemo(() => {
+    if (durationMs <= 0 || width <= 0) return width;
+    const durationSec = durationMs / 1000;
+    // Scale timeline track width proportionally with duration so long videos don't squish (bounded to safe max allocation)
+    const durationScaledPx = Math.min(
+      MAX_BASE_TRACK_WIDTH,
+      Math.round(durationSec * 14),
+    );
+    return Math.max(width, durationScaledPx);
+  }, [durationMs, width]);
+
+  // The total drawable width (scrolls horizontally). Scales with duration and zoom.
+  const totalWidth = Math.max(
+    baseTrackWidth,
+    Math.floor(baseTrackWidth * Math.max(1, zoom)),
+  );
+
+  // A sprite has a fixed frame count, but the track needs however many cells
+  // fit at the video's aspect — otherwise cells go portrait and each thumbnail
+  // shows a narrow centre slice. Pick the cell count from the geometry, then
+  // map each cell to the sprite frame nearest its midpoint.
+  const spriteCells = useMemo(() => {
+    if (!sprite?.url || sprite.frameCount <= 0 || sprite.columns <= 0)
+      return [];
+    const aspect =
+      sprite.frameHeight > 0 ? sprite.frameWidth / sprite.frameHeight : 16 / 9;
+    const cellWidth = Math.max(24, height * aspect);
+    const count = Math.max(
+      1,
+      Math.min(sprite.frameCount, Math.round(totalWidth / cellWidth)),
+    );
+    return Array.from({ length: count }, (_, i) => {
+      const frame = Math.min(
+        sprite.frameCount - 1,
+        Math.floor(((i + 0.5) * sprite.frameCount) / count),
+      );
+      return {
+        key: `${i}-${frame}`,
+        column: frame % sprite.columns,
+        row: Math.floor(frame / sprite.columns),
+      };
+    });
+  }, [sprite, totalWidth, height]);
+
+  const hasImagery = spriteCells.length > 0 || frames.length > 0;
 
   useEffect(() => {
     const el = scrollRef.current;
@@ -112,12 +183,15 @@ export function Waveform({
     }
   }, [scrollLeft, totalWidth, width]);
 
-  // Re-draw whenever peaks, size, or excluded ranges change.
+  // Re-draw whenever peaks, imagery, size, or excluded ranges change.
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const dpr = window.devicePixelRatio || 1;
-    canvas.width = Math.floor(totalWidth * dpr);
+    canvas.width = Math.min(
+      MAX_CANVAS_PIXELS_WIDTH,
+      Math.floor(totalWidth * dpr),
+    );
     canvas.height = Math.floor(height * dpr);
     canvas.style.width = `${totalWidth}px`;
     canvas.style.height = `${height}px`;
@@ -126,74 +200,75 @@ export function Waveform({
     if (!ctx) return;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 
-    // Background
-    ctx.fillStyle = getWaveBg();
-    ctx.fillRect(0, 0, totalWidth, height);
-
     const hasPeaks = Boolean(
       peaks?.bucketCount &&
       peaks.peaks.some((value) => Math.abs(value) > 0.0001),
     );
 
-    if (peaks && hasPeaks) {
-      // Map each x pixel to a bucket range. Use a visual-only auto-gain so
-      // quiet microphone recordings still read clearly in the trim track.
-      const mid = height / 2;
-      const visualGain = computeVisualGain(peaks.peaks);
-      ctx.strokeStyle = getWaveColor();
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      const bucketsPerPx = peaks.bucketCount / totalWidth;
-      for (let x = 0; x < totalWidth; x++) {
-        const startBucket = Math.floor(x * bucketsPerPx);
-        const endBucket = Math.max(
-          startBucket + 1,
-          Math.floor((x + 1) * bucketsPerPx),
-        );
-        let min = 0;
-        let max = 0;
-        for (let b = startBucket; b < endBucket && b < peaks.bucketCount; b++) {
-          const lo = peaks.peaks[b * 2];
-          const hi = peaks.peaks[b * 2 + 1];
-          if (lo < min) min = lo;
-          if (hi > max) max = hi;
-        }
-        let topY = mid + clampSample(min * visualGain) * mid * 0.95;
-        let botY = mid + clampSample(max * visualGain) * mid * 0.95;
-        if (
-          Math.max(Math.abs(min), Math.abs(max)) > VISUAL_SILENCE_FLOOR &&
-          botY - topY < 2
-        ) {
-          const centerY = (topY + botY) / 2;
-          topY = centerY - 1;
-          botY = centerY + 1;
+    // Canvas background & audio visualization
+    ctx.clearRect(0, 0, totalWidth, height);
+    if (!hasImagery) {
+      ctx.fillStyle = getWaveBg();
+      ctx.fillRect(0, 0, totalWidth, height);
+
+      const barWidth = 3;
+      const barGap = 1.5;
+      const step = barWidth + barGap;
+      const barCount = Math.floor(totalWidth / step);
+      const maxWaveHeight = Math.min(height * 0.5, 52);
+      const minBarHeight = 3;
+      const midY = height / 2;
+
+      if (peaks && hasPeaks) {
+        const visualGain = computeVisualGain(peaks.peaks);
+        const bucketsPerBar = peaks.bucketCount / barCount;
+
+        for (let i = 0; i < barCount; i++) {
+          const x = i * step;
+          const startBucket = Math.floor(i * bucketsPerBar);
+          const endBucket = Math.max(
+            startBucket + 1,
+            Math.floor((i + 1) * bucketsPerBar),
+          );
+
+          let maxAmp = 0;
+          for (
+            let b = startBucket;
+            b < endBucket && b < peaks.bucketCount;
+            b++
+          ) {
+            const lo = Math.abs(peaks.peaks[b * 2] ?? 0);
+            const hi = Math.abs(peaks.peaks[b * 2 + 1] ?? 0);
+            if (lo > maxAmp) maxAmp = lo;
+            if (hi > maxAmp) maxAmp = hi;
+          }
+
+          const scaledAmp = clampSample(maxAmp * visualGain);
+          const barHeight = Math.max(minBarHeight, scaledAmp * maxWaveHeight);
+          const topY = midY - barHeight / 2;
+
+          ctx.fillStyle =
+            maxAmp > VISUAL_SILENCE_FLOOR
+              ? getWaveColor()
+              : getBrandColorAlpha(0.2);
+
+          drawPillBar(ctx, x, topY, barWidth, barHeight);
         }
-        ctx.moveTo(x + 0.5, topY);
-        ctx.lineTo(x + 0.5, botY);
-      }
-      ctx.stroke();
-    } else {
-      const mid = height / 2;
-      ctx.strokeStyle = getBrandColorAlpha(0.2);
-      ctx.lineWidth = 1;
-      ctx.setLineDash([3, 6]);
-      ctx.beginPath();
-      ctx.moveTo(0, mid);
-      ctx.lineTo(totalWidth, mid);
-      ctx.stroke();
-      ctx.setLineDash([]);
-
-      if (activityRanges.length) {
-        const blockHeight = Math.max(18, Math.min(32, height * 0.32));
-        const top = mid - blockHeight / 2;
-        ctx.fillStyle = getBrandColorAlpha(0.24);
-        for (const range of activityRanges) {
-          const xStart =
-            (Math.max(0, range.startMs) / Math.max(durationMs, 1)) * totalWidth;
-          const xEnd =
-            (Math.min(durationMs, range.endMs) / Math.max(durationMs, 1)) *
-            totalWidth;
-          ctx.fillRect(xStart, top, Math.max(2, xEnd - xStart), blockHeight);
+      } else {
+        // Idle state without imagery
+        for (let i = 0; i < barCount; i++) {
+          const x = i * step;
+          const barMs = (i / Math.max(1, barCount)) * durationMs;
+          const inActivity = activityRanges.some(
+            (r) => barMs >= r.startMs && barMs <= r.endMs,
+          );
+
+          const barHeight = inActivity ? 12 : minBarHeight;
+          const topY = midY - barHeight / 2;
+
+          ctx.fillStyle = inActivity ? getWaveColor() : getBrandColorAlpha(0.2);
+
+          drawPillBar(ctx, x, topY, barWidth, barHeight);
         }
       }
     }
@@ -248,6 +323,7 @@ export function Waveform({
     }
   }, [
     peaks,
+    hasImagery,
     totalWidth,
     height,
     excludedRanges,
@@ -257,15 +333,56 @@ export function Waveform({
     activityRanges,
   ]);
 
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  const scrubRef = useRef<{ pointerId: number; startX: number } | null>(null);
+
+  const seekToEvent = (
+    e: React.PointerEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>, // i18n-ignore
+  ) => {
     if (!onSeek) return;
-    const rect = e.currentTarget.getBoundingClientRect();
-    const scroll = scrollRef.current?.scrollLeft ?? 0;
+    const el = scrollRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const scroll = el.scrollLeft;
     const x = e.clientX - rect.left + scroll;
     const ms = Math.max(0, Math.min(durationMs, (x / totalWidth) * durationMs));
     onSeek(ms);
   };
 
+  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!onSeek || e.button !== 0) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    // A pointerdown on this element's own horizontal scrollbar still targets
+    // the element. Capturing there would turn the drag that pans a zoomed
+    // track into a scrub, leaving no way to reach the rest of the timeline.
+    if (e.clientY - el.getBoundingClientRect().top >= el.clientHeight) return;
+    scrubRef.current = { pointerId: e.pointerId, startX: e.clientX };
+    // Touch keeps the browser's native pan; a tap still seeks on pointerup.
+    if (e.pointerType === "touch") return;
+    el.setPointerCapture(e.pointerId);
+    seekToEvent(e);
+  };
+
+  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const scrub = scrubRef.current;
+    if (!scrub || scrub.pointerId !== e.pointerId) return;
+    if (e.pointerType === "touch") return;
+    seekToEvent(e);
+  };
+
+  const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    const scrub = scrubRef.current;
+    if (!scrub || scrub.pointerId !== e.pointerId) return;
+    scrubRef.current = null;
+    const el = scrollRef.current;
+    if (el?.hasPointerCapture(e.pointerId)) {
+      el.releasePointerCapture(e.pointerId);
+    }
+    if (e.pointerType === "touch" && Math.abs(e.clientX - scrub.startX) < 8) {
+      seekToEvent(e);
+    }
+  };
+
   const handleScroll = () => {
     const el = scrollRef.current;
     if (!el) return;
@@ -287,10 +404,55 @@ export function Waveform({
       )}
       style={{ width, height }}
       onScroll={handleScroll}
-      onClick={handleClick}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
     >
       <div className="relative" style={{ width: totalWidth, height }}>
-        <canvas ref={canvasRef} />
+        {spriteCells.length > 0 && sprite ? (
+          <div className="absolute inset-0 flex overflow-hidden pointer-events-none">
+            {spriteCells.map((cell) => (
+              <div
+                key={cell.key}
+                className="h-full animate-in fade-in duration-500"
+                style={{
+                  width: `${100 / spriteCells.length}%`,
+                  backgroundImage: `url(${sprite.url})`,
+                  // Percentage sizing maps one grid cell onto one element box,
+                  // so percentage positioning addresses cells exactly.
+                  backgroundSize: `${sprite.columns * 100}% ${sprite.rows * 100}%`,
+                  backgroundPosition: `${
+                    sprite.columns > 1
+                      ? (cell.column * 100) / (sprite.columns - 1)
+                      : 0
+                  }% ${
+                    sprite.rows > 1 ? (cell.row * 100) / (sprite.rows - 1) : 0
+                  }%`,
+                  backgroundRepeat: "no-repeat",
+                }}
+              />
+            ))}
+          </div>
+        ) : (
+          frames.length > 0 && (
+            <div className="absolute inset-0 flex overflow-hidden pointer-events-none">
+              {frames.map((frame) => (
+                <img
+                  key={frame.timeMs}
+                  src={frame.dataUrl}
+                  alt=""
+                  className="h-full object-cover animate-in fade-in duration-500"
+                  style={{ width: `${100 / frames.length}%` }}
+                />
+              ))}
+            </div>
+          )
+        )}
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0 pointer-events-none"
+        />
         <div
           className="absolute top-0 h-full w-[2px] pointer-events-none"
           style={{

package/corpus/templates/clips/app/components/recorder/recorder-engine.ts

@@ -540,6 +540,7 @@ export class RecorderEngine {
    */
   private uploadAbort: AbortController | null = null;
   private uploadMode: UploadMode = "buffered";
+  private uploadGenerationId: string | null = null;
   /**
    * Streaming-path buffer. MediaRecorder blobs accumulate here until at least
    * STREAM_CHUNK_BYTES is available, then a 256 KiB-aligned slice is PUT to API
@@ -1102,6 +1103,7 @@ export class RecorderEngine {
     this.opts.uploadUrl = target.uploadUrl;
     this.opts.abortUrl = target.abortUrl;
     this.opts.uploadMode = target.uploadMode ?? "buffered";
+    this.uploadGenerationId = null;
   }
 
   // -------------------------------------------------------------------------
@@ -1178,6 +1180,7 @@ export class RecorderEngine {
     this.lastFinalizeMeta = null;
     this.uploadAbort = new AbortController();
     this.uploadMode = this.opts.uploadMode ?? "buffered";
+    this.uploadGenerationId = null;
     this.pendingStreamBlobs = [];
     this.pendingStreamBytes = 0;
     this.cameraDisconnectNotified = false;
@@ -1540,6 +1543,10 @@ export class RecorderEngine {
           compression,
           requestStreaming: this.uploadMode === "streaming",
           mimeType: uploadMimeType,
+          useGenerationFence: true,
+          ...(this.uploadGenerationId
+            ? { uploadGenerationId: this.uploadGenerationId }
+            : {}),
         }),
         signal,
       });
@@ -1566,6 +1573,7 @@ export class RecorderEngine {
     }
     const reset = (await resetRes.json().catch(() => null)) as {
       uploadMode?: unknown;
+      uploadGenerationId?: unknown;
     } | null;
     if (reset?.uploadMode !== "streaming" && reset?.uploadMode !== "buffered") {
       throw new Error(
@@ -1574,6 +1582,11 @@ export class RecorderEngine {
     }
     const uploadMode = reset.uploadMode;
     this.uploadMode = uploadMode;
+    this.uploadGenerationId =
+      typeof reset.uploadGenerationId === "string" &&
+      reset.uploadGenerationId.length > 0
+        ? reset.uploadGenerationId
+        : null;
     return uploadMode;
   }
 
@@ -1752,8 +1765,10 @@ export class RecorderEngine {
       this.uploadAbort = null;
     }
     this.cleanupTracks();
+    const uploadGenerationId = this.uploadGenerationId;
     this.chunkIndex = 0;
     this.uploadFailure = null;
+    this.uploadGenerationId = null;
     this.startedAtMs = null;
     this.pausedAccumMs = 0;
     this.pausedStartedMs = null;
@@ -1764,7 +1779,13 @@ export class RecorderEngine {
 
     if (this.opts.abortUrl) {
       try {
-        await fetch(this.opts.abortUrl, { method: "POST" });
+        await fetch(this.opts.abortUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            ...(uploadGenerationId ? { uploadGenerationId } : {}),
+          }),
+        });
       } catch {
         // ignore — best effort
       }
@@ -2136,6 +2157,7 @@ export class RecorderEngine {
       height: extra.height,
       hasAudio: extra.hasAudio,
       hasCamera: extra.hasCamera,
+      uploadGenerationId: this.uploadGenerationId ?? undefined,
     });
 
     const body = await blob.arrayBuffer();