@agent-native/core 0.84.18 → 0.84.21

package/corpus/templates/analytics/app/pages/sessions/SessionDetailPage.tsx

@@ -1,6 +1,6 @@
 import {
+  appApiPath,
   PromptComposer,
-  useActionQuery,
   useSendToAgentChat,
   useT,
 } from "@agent-native/core/client";
@@ -18,6 +18,7 @@ import {
   IconRoute,
   IconTimelineEvent,
 } from "@tabler/icons-react";
+import { useQuery } from "@tanstack/react-query";
 import {
   type ReactNode,
   useCallback,
@@ -42,6 +43,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { getIdToken } from "@/lib/auth";
 import { cn } from "@/lib/utils";
 
 type SessionRecordingSummary = {
@@ -83,7 +85,20 @@ type ReplayChunkEvents = {
   unavailable?: boolean;
 };
 
-type SessionReplayEventsResponse = {
+type SessionReplayManifestResponse = {
+  recording: SessionRecordingSummary;
+  chunks: Array<{
+    seq: number;
+    checksum: string;
+    byteLength: number;
+    eventCount: number;
+    startedAt: string | null;
+    endedAt: string | null;
+    bytesPath: string;
+  }>;
+};
+
+type SessionReplayPlaybackResponse = {
   recording: SessionRecordingSummary;
   chunks: ReplayChunkEvents[];
   eventCount: number;
@@ -122,6 +137,8 @@ const SPEED_OPTIONS = [0.5, 1, 2, 4, 8];
 const SKIP_STEP_MS = 5000;
 const MIN_IDLE_SKIP_MS = 8000;
 const IDLE_EDGE_PAD_MS = 1200;
+const REPLAY_CHUNK_FETCH_CONCURRENCY = 6;
+const REPLAY_CHUNK_UNAVAILABLE_MESSAGE = "Session replay chunk is unavailable";
 
 const RRWEB_EVENT_TYPE = {
   FullSnapshot: 2,
@@ -155,12 +172,7 @@ export default function SessionDetailPage() {
   const t = useT();
   const { recordingId = "" } = useParams();
   const { codeRequiredDialog } = useSendToAgentChat();
-  const { data, isLoading, error } =
-    useActionQuery<SessionReplayEventsResponse>(
-      "get-session-replay-events",
-      { recordingId, limit: 10000 },
-      { enabled: Boolean(recordingId), staleTime: 30_000 },
-    );
+  const { data, isLoading, error } = useSessionReplayPlayback(recordingId);
   const recording = data?.recording;
 
   return (
@@ -196,7 +208,9 @@ export default function SessionDetailPage() {
         <Card>
           <CardContent className="flex items-center gap-3 p-6 text-sm text-destructive">
             <IconExclamationCircle className="h-5 w-5" />
-            {t("sessions.loadFailed", { message: error.message })}
+            {t("sessions.loadFailed", {
+              message: error instanceof Error ? error.message : String(error),
+            })}
           </CardContent>
         </Card>
       ) : isLoading ? (
@@ -268,7 +282,7 @@ function AskSessionPopover({
 function ReplayWorkbench({
   response,
 }: {
-  response: SessionReplayEventsResponse;
+  response: SessionReplayPlaybackResponse;
 }) {
   const events = useReplayEvents(response);
   const markers = useMemo(() => buildReplayMarkers(events), [events]);
@@ -318,7 +332,7 @@ function ReplayPlayer({
 }: {
   events: AnyReplayEvent[];
   markers: ReplayMarker[];
-  response: SessionReplayEventsResponse;
+  response: SessionReplayPlaybackResponse;
   onTimeUpdate: (ms: number) => void;
   registerSeek: (seek: (ms: number, autoplay?: boolean) => void) => void;
 }) {
@@ -956,8 +970,143 @@ function DetailSkeleton() {
   );
 }
 
+function useSessionReplayPlayback(recordingId: string) {
+  return useQuery({
+    queryKey: ["session-replay-playback", recordingId],
+    enabled: Boolean(recordingId),
+    staleTime: 30_000,
+    gcTime: 60_000,
+    queryFn: () => fetchSessionReplayPlayback(recordingId),
+  });
+}
+
+export async function fetchSessionReplayPlayback(
+  recordingId: string,
+): Promise<SessionReplayPlaybackResponse> {
+  const manifest = await fetchReplayManifest(recordingId);
+  const chunks = await fetchReplayChunks(manifest.chunks);
+  const unavailableChunks = chunks.filter((chunk) => chunk.unavailable).length;
+  const eventCount = chunks.reduce(
+    (sum, chunk) => sum + chunk.events.length,
+    0,
+  );
+  return {
+    recording: manifest.recording,
+    chunks,
+    eventCount,
+    truncated: false,
+    unavailableChunks,
+  };
+}
+
+async function fetchReplayManifest(
+  recordingId: string,
+): Promise<SessionReplayManifestResponse> {
+  const response = await fetchReplayApi(
+    `/api/session-replay/recordings/${encodeURIComponent(
+      recordingId,
+    )}/manifest`,
+  );
+  if (!response.ok) throw await replayFetchError(response);
+  return (await response.json()) as SessionReplayManifestResponse;
+}
+
+async function fetchReplayChunks(
+  chunks: SessionReplayManifestResponse["chunks"],
+): Promise<ReplayChunkEvents[]> {
+  const results = new Array<ReplayChunkEvents>(chunks.length);
+  let nextIndex = 0;
+
+  async function worker() {
+    while (nextIndex < chunks.length) {
+      const index = nextIndex;
+      nextIndex += 1;
+      results[index] = await fetchReplayChunk(chunks[index]);
+    }
+  }
+
+  await Promise.all(
+    Array.from(
+      { length: Math.min(REPLAY_CHUNK_FETCH_CONCURRENCY, chunks.length) },
+      worker,
+    ),
+  );
+  return results;
+}
+
+async function fetchReplayChunk(
+  chunk: SessionReplayManifestResponse["chunks"][number],
+): Promise<ReplayChunkEvents> {
+  const response = await fetchReplayApi(chunk.bytesPath);
+  if (!response.ok) {
+    const error = await replayFetchError(response);
+    if (isUnavailableReplayChunk(response, error)) {
+      return replayUnavailableChunk(chunk);
+    }
+    throw error;
+  }
+  const payload = await response.json();
+  return {
+    seq: chunk.seq,
+    checksum: chunk.checksum,
+    byteLength: chunk.byteLength,
+    eventCount: chunk.eventCount,
+    events: replayPayloadEvents(payload),
+  };
+}
+
+function isUnavailableReplayChunk(response: Response, error: Error): boolean {
+  return (
+    response.status === 404 &&
+    error.message === REPLAY_CHUNK_UNAVAILABLE_MESSAGE
+  );
+}
+
+function replayUnavailableChunk(
+  chunk: SessionReplayManifestResponse["chunks"][number],
+): ReplayChunkEvents {
+  return {
+    seq: chunk.seq,
+    checksum: chunk.checksum,
+    byteLength: chunk.byteLength,
+    eventCount: chunk.eventCount,
+    events: [],
+    unavailable: true,
+  };
+}
+
+async function fetchReplayApi(path: string): Promise<Response> {
+  const token = await getIdToken();
+  return fetch(appApiPath(path), {
+    headers: {
+      Accept: "application/json",
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    },
+  });
+}
+
+async function replayFetchError(response: Response): Promise<Error> {
+  try {
+    const payload = await response.json();
+    if (isRecord(payload) && typeof payload.error === "string") {
+      return new Error(payload.error);
+    }
+  } catch {
+    // Fall through to the status text.
+  }
+  return new Error(response.statusText || `HTTP ${response.status}`);
+}
+
+export function replayPayloadEvents(payload: unknown): unknown[] {
+  if (Array.isArray(payload)) return payload;
+  if (isRecord(payload) && Array.isArray(payload.events)) {
+    return payload.events;
+  }
+  return payload ? [payload] : [];
+}
+
 function useReplayEvents(
-  response: SessionReplayEventsResponse,
+  response: SessionReplayPlaybackResponse,
 ): AnyReplayEvent[] {
   return useMemo(
     () =>

package/corpus/templates/analytics/changelog/2026-07-01-session-replays-load-large-production-recordings-from-scoped.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Session replays load large production recordings from scoped chunks instead of truncating playback.

package/corpus/templates/calendar/app/pages/BookingPage.tsx

@@ -1,6 +1,7 @@
 import {
   OpenSourceBadge,
   PoweredByBadge,
+  LanguagePicker,
   StarfieldBackground,
   useT,
 } from "@agent-native/core/client";
@@ -53,13 +54,23 @@ function BookingPageShell({
   return (
     <div
       className={cn(
-        "relative min-h-screen overflow-x-hidden bg-background p-4",
+        "relative min-h-screen bg-background dark:bg-black",
         className,
       )}
     >
       <StarfieldBackground className="fixed inset-0 opacity-25 dark:opacity-60" />
-      <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(ellipse_at_center,hsl(var(--background)/0.35)_0%,hsl(var(--background)/0.88)_72%)]" />
-      <div className="relative z-10 flow-root">{children}</div>
+      <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(ellipse_at_center,hsl(var(--background)/0.35)_0%,hsl(var(--background)/0.88)_72%)] dark:bg-[radial-gradient(ellipse_at_center,hsl(var(--background)/0.35)_0%,#000000_100%)]" />
+      <div className="fixed top-4 right-4 z-50 flex items-center gap-1">
+        <LanguagePicker variant="ghost-icon" />
+        <ThemeToggle />
+      </div>
+      <div className="fixed bottom-[21px] left-4 z-50 flex flex-col items-start gap-2 max-sm:static max-sm:mx-auto max-sm:mt-8">
+        <PoweredByBadge variant="plain" embedded />
+        <OpenSourceBadge embedded />
+      </div>
+      <div className="relative z-10 min-h-screen overflow-x-hidden p-4">
+        {children}
+      </div>
     </div>
   );
 }
@@ -281,9 +292,6 @@ export default function BookingPage() {
 
   return (
     <BookingPageShell className="pb-20">
-      <div className="absolute top-4 right-4 z-20">
-        <ThemeToggle />
-      </div>
       <div className="mx-auto mt-[7.5vh] w-full max-w-lg">
         {/* Header */}
         <div className="mb-8 text-center">
@@ -509,8 +517,6 @@ export default function BookingPage() {
           )}
         </div>
       </div>
-      <OpenSourceBadge />
-      <PoweredByBadge />
     </BookingPageShell>
   );
 }

package/corpus/templates/calendar/changelog/2026-07-01-meeting-invite-pages-have-cleaner-branding-a-black-dark-mo.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-01
+---
+
+Meeting invite pages have cleaner branding, a black dark-mode backdrop, and a language picker.

package/corpus/templates/clips/actions/create-recording.ts

@@ -23,6 +23,7 @@ import {
   stringifySpaceIds,
 } from "../server/lib/recordings.js";
 import { setResumableSession } from "../server/lib/resumable-session.js";
+import { isStreamingUploadDisabled } from "../server/lib/streaming-upload-mode.js";
 import { createRecordingSchema } from "./lib/create-recording-schema.js";
 import { DEFAULT_RECORDING_TITLE } from "./lib/title-source.js";
 
@@ -86,7 +87,11 @@ export default defineAction({
     // init fails.
     let uploadMode: UploadMode = "buffered";
     const uploadProvider = await getActiveFileUploadProviderForRequest();
-    if (args.requestStreaming && uploadProvider?.resumable) {
+    if (
+      args.requestStreaming &&
+      !isStreamingUploadDisabled() &&
+      uploadProvider?.resumable
+    ) {
       try {
         const recordingMimeType =
           args.mimeType?.split(";")[0]?.trim() || "video/webm";
@@ -103,7 +108,7 @@ export default defineAction({
         await setResumableSession(id, {
           providerId: uploadProvider.id,
           sessionId: session.sessionId,
-          meta: session.meta,
+          meta: { ...session.meta, skipCompressionWait: true },
           bytesUploaded: 0,
           lastCommittedIndex: -1,
         });

package/corpus/templates/clips/actions/finalize-recording.ts

@@ -39,6 +39,7 @@ import {
   deleteResumableSession,
   getResumableSession,
 } from "../server/lib/resumable-session.js";
+import { isStreamingUploadDisabled } from "../server/lib/streaming-upload-mode.js";
 import {
   requiresConfiguredVideoStorage,
   STORAGE_SETUP_REQUIRED_REASON,
@@ -341,6 +342,11 @@ export default defineAction({
       // Resumable path: create-recording initialized a session and chunk.post.ts
       // forwarded all chunks to the provider. Complete the session to get the CDN URL.
       const resumableSession = await getResumableSession(id);
+      if (resumableSession && isStreamingUploadDisabled()) {
+        console.warn(
+          `[finalize] streaming uploads are disabled, but completing existing resumable session for in-flight recording: ${id}`,
+        );
+      }
       if (resumableSession) {
         debugLog("[finalize] resumable session found, completing upload", {
           id,
@@ -351,6 +357,9 @@ export default defineAction({
           if (!uploadProvider?.resumable) {
             throw new Error("No resumable upload provider configured");
           }
+          if (resumableSession.bytesUploaded <= 0) {
+            throw new Error("Recording upload contained no video bytes");
+          }
           const videoUrl = await uploadProvider.resumable.completeSession(
             {
               sessionId: resumableSession.sessionId,
@@ -359,6 +368,7 @@ export default defineAction({
             typeof resumableSession.meta.filename === "string"
               ? resumableSession.meta.filename
               : "",
+            { skipCompressionWait: true },
           );
           debugLog("[finalize] resumable upload completed", { id, videoUrl });
           const result = await markRecordingReady({
@@ -560,6 +570,7 @@ export default defineAction({
           filename: `${id}.${videoFormat}`,
           mimeType,
           ownerEmail,
+          skipCompressionWait: true,
         });
       } catch (err) {
         // Capture structured context so a "Builder.io upload failed (500)" can

package/corpus/templates/clips/actions/get-recording-player-data.ts

@@ -233,10 +233,12 @@ export default defineAction({
     //      `?password=<pw>` (legacy fallback) so old share pages keep
     //      working during rollout. (audit 11 F-07)
     //      Owners are skipped — the blob route bypasses the password gate
-    //      for them, so they don't need the token. Non-Loom provider URLs
-    //      (R2/S3/Builder) are left untouched; those are already signed.
+    //      for them, so they don't need the token. Remote provider URLs are
+    //      still proxied through same-origin media serving so CORS, range
+    //      requests, and signed URL quirks match public share playback.
     const resolvedVideoUrl = resolvePlayerVideoUrl(rec, {
       addPasswordToken: access.role !== "owner",
+      proxyRemoteMedia: true,
     });
 
     return {

package/corpus/templates/clips/actions/import-loom-recording.ts

@@ -295,6 +295,7 @@ export default defineAction({
       filename: `${id}.mp4`,
       mimeType: media.mimeType,
       ownerEmail,
+      skipCompressionWait: true,
     });
 
     const recordingValues = buildRecordingValues(media.sizeBytes);

package/corpus/templates/clips/actions/lib/loom-video.ts

@@ -17,6 +17,18 @@ export type LoomVideoDownload = {
   sourceUrl: string;
 };
 
+const LOOM_VIDEO_UNAVAILABLE_MESSAGE =
+  "Loom did not provide a downloadable MP4 for this video. Download the original from Loom and use Upload video in Clips.";
+
+export class LoomVideoUnavailableError extends Error {
+  statusCode = 422;
+
+  constructor(message = LOOM_VIDEO_UNAVAILABLE_MESSAGE) {
+    super(message);
+    this.name = "LoomVideoUnavailableError";
+  }
+}
+
 function formatBytes(bytes: number): string {
   if (bytes >= 1024 * 1024) {
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
@@ -129,6 +141,10 @@ async function fetchTranscodedVideoUrl({
     { maxRedirects: 2 },
   );
 
+  if (response.status === 204) {
+    throw new LoomVideoUnavailableError();
+  }
+
   if (!response.ok) {
     throw new Error(
       `Loom did not provide a downloadable MP4 (${response.status} ${response.statusText}). Make sure the link is public and allows playback.`,

package/corpus/templates/clips/app/components/player/scrubber.tsx

@@ -153,11 +153,11 @@ export function Scrubber(props: ScrubberProps) {
       <div
         ref={barRef}
         data-player-scrubber-bar
-        className="relative w-full h-1.5 bg-white/20 rounded-full cursor-pointer group/bar"
+        className="relative w-full h-1.5 bg-white/35 rounded-full cursor-pointer group/bar shadow-[0_0_0_1px_rgba(0,0,0,0.16)]"
       >
         {/* Filled portion */}
         <div
-          className="absolute inset-y-0 left-0 bg-primary rounded-full"
+          className="absolute inset-y-0 left-0 bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,0.45)]"
           style={{ width: pct + "%" }}
         />
 

package/corpus/templates/clips/app/components/recorder/countdown-overlay.tsx

@@ -95,10 +95,11 @@ export function CountdownOverlay({
 
         <div
           key={remaining}
-          className="flex h-44 w-44 items-center justify-center rounded-full text-[112px] font-bold leading-none text-white shadow-2xl duration-200 animate-in zoom-in-75 fade-in"
+          className="flex min-w-32 items-center justify-center text-[clamp(96px,22vmin,240px)] font-extrabold leading-none text-white duration-200 animate-in zoom-in-75 fade-in"
           style={{
-            background:
-              "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%), hsl(var(--primary))",
+            fontVariantNumeric: "tabular-nums",
+            textShadow:
+              "1px 0 1px rgba(17,24,39,0.22), -1px 0 1px rgba(17,24,39,0.22), 0 1px 1px rgba(17,24,39,0.22), 0 -1px 1px rgba(17,24,39,0.22), 0 2px 4px rgba(0,0,0,0.48), 0 12px 34px rgba(0,0,0,0.36), 0 0 2px rgba(0,0,0,0.72)",
           }}
         >
           {remaining > 0 ? remaining : "Go"}

package/corpus/templates/clips/app/components/recorder/pre-record-panel.tsx

@@ -58,6 +58,8 @@ import {
 import {
   NO_CAMERA_DEVICE_ID,
   NO_MIC_DEVICE_ID,
+  normalizeDisplaySurfaceForRuntime,
+  supportsBrowserTabCapture,
   type DisplaySurface,
   type RecordingMode,
 } from "./recorder-engine";
@@ -157,14 +159,20 @@ export function PreRecordPanel({
   const t = useT();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const loomInputRef = useRef<HTMLInputElement>(null);
+  const browserTabCaptureSupported = useMemo(
+    () => supportsBrowserTabCapture(),
+    [],
+  );
   // Saved selections from the last visit. A `?mode=`/`?surface=` deep link
   // (initialMode/initialDisplaySurface) still takes precedence over them.
   const savedPrefs = useMemo(() => loadRecorderPreferences(), []);
   const [mode, setMode] = useState<RecordingMode>(
     () => initialMode ?? savedPrefs.mode ?? "screen+camera",
   );
-  const [displaySurface, setDisplaySurface] = useState<DisplaySurface>(
-    () => initialDisplaySurface ?? savedPrefs.displaySurface ?? "window",
+  const [displaySurface, setDisplaySurface] = useState<DisplaySurface>(() =>
+    normalizeDisplaySurfaceForRuntime(
+      initialDisplaySurface ?? savedPrefs.displaySurface ?? "window",
+    ),
   );
   const [sourceOpen, setSourceOpen] = useState(false);
   const [deviceSettingsOpen, setDeviceSettingsOpen] = useState(false);
@@ -223,8 +231,8 @@ export function PreRecordPanel({
     [isMobile, modeOptions],
   );
 
-  const surfaceOptions = useMemo<SurfaceOption[]>(
-    () => [
+  const surfaceOptions = useMemo<SurfaceOption[]>(() => {
+    const options: SurfaceOption[] = [
       {
         value: "window",
         label: t("preRecord.surfaceWindow"),
@@ -243,9 +251,11 @@ export function PreRecordPanel({
         icon: IconDeviceScreen,
         sub: t("preRecord.surfaceScreenDescription"),
       },
-    ],
-    [t],
-  );
+    ];
+    return browserTabCaptureSupported
+      ? options
+      : options.filter((option) => option.value !== "browser");
+  }, [browserTabCaptureSupported, t]);
 
   useEffect(() => {
     if (isMobile) {
@@ -258,9 +268,19 @@ export function PreRecordPanel({
   }, [initialMode, isMobile]);
 
   useEffect(() => {
-    if (initialDisplaySurface) setDisplaySurface(initialDisplaySurface);
+    if (initialDisplaySurface) {
+      setDisplaySurface(
+        normalizeDisplaySurfaceForRuntime(initialDisplaySurface),
+      );
+    }
   }, [initialDisplaySurface]);
 
+  useEffect(() => {
+    if (displaySurface !== "browser" || browserTabCaptureSupported) return;
+    setDisplaySurface("window");
+    saveRecorderPreferences({ displaySurface: "window" });
+  }, [browserTabCaptureSupported, displaySurface]);
+
   const enumerateDevices = useCallback(async () => {
     try {
       if (!navigator.mediaDevices?.enumerateDevices) {
@@ -350,8 +370,9 @@ export function PreRecordPanel({
     saveRecorderPreferences({ mode: value });
   }, []);
   const chooseDisplaySurface = useCallback((value: DisplaySurface) => {
-    setDisplaySurface(value);
-    saveRecorderPreferences({ displaySurface: value });
+    const next = normalizeDisplaySurfaceForRuntime(value);
+    setDisplaySurface(next);
+    saveRecorderPreferences({ displaySurface: next });
   }, []);
   const chooseMic = useCallback((value: string) => {
     setMicId(value);
@@ -676,7 +697,12 @@ export function PreRecordPanel({
             </button>
           </CollapsibleTrigger>
           <CollapsibleContent>
-            <div className="grid grid-cols-3 gap-2 px-6 pb-5">
+            <div
+              className={cn(
+                "grid gap-2 px-6 pb-5",
+                surfaceOptions.length === 2 ? "grid-cols-2" : "grid-cols-3",
+              )}
+            >
               {surfaceOptions.map((opt) => {
                 const Icon = opt.icon;
                 const active = opt.value === displaySurface;
@@ -913,7 +939,8 @@ export function PreRecordPanel({
                 // to acquire a webcam stream.
                 mode:
                   mode === "screen+camera" && !needsCamera ? "screen" : mode,
-                displaySurface,
+                displaySurface:
+                  normalizeDisplaySurfaceForRuntime(displaySurface),
                 micDeviceId: micId === "default" ? null : micId,
                 cameraDeviceId:
                   needsCamera && cameraId !== "default" ? cameraId : null,