@agent-native/core 0.163.3 → 0.164.1

package/corpus/README.md

@@ -31,4 +31,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- template files: 8328
+- template files: 8442

package/corpus/templates/analytics/app/hooks/use-dashboard-chat-context.ts

@@ -132,6 +132,7 @@ export function useDashboardChatContext(
       : null;
   const hasSelectedPanel = selectedPanelId !== null;
   const publishedSelectionRef = useRef<SelectedDashboardObject | null>(null);
+  const suppressDashboardContextRef = useRef(false);
 
   const selectPanelForChat = useCallback(
     (
@@ -140,6 +141,7 @@ export function useDashboardChatContext(
     ) => {
       if (!id) return;
       if (options.openSidebar !== true && !isAgentSidebarOpen) return;
+      suppressDashboardContextRef.current = false;
       const displayDashboardTitle = title?.trim() || id;
       const displayPanelTitle = panel.panelTitle.trim() || panel.panelId;
       const contextLines = [
@@ -211,13 +213,38 @@ export function useDashboardChatContext(
       );
   }, []);
 
+  useEffect(() => {
+    const handleNewChat = () => {
+      removeAgentChatContextItem({
+        key: DASHBOARD_CONTEXT_KEY,
+        openSidebar: false,
+      });
+      removeAgentChatContextItem({
+        key: DASHBOARD_PANEL_CONTEXT_KEY,
+        openSidebar: false,
+      });
+      const publishedSelection = publishedSelectionRef.current;
+      publishedSelectionRef.current = null;
+      suppressDashboardContextRef.current = true;
+      if (publishedSelection) {
+        void clearSelectedDashboardObjectIfOwned(publishedSelection);
+      }
+    };
+
+    window.addEventListener("agent-chat:new-chat", handleNewChat);
+    return () =>
+      window.removeEventListener("agent-chat:new-chat", handleNewChat);
+  }, []);
+
   // Dashboard metadata lands in pieces — title first, then panel count, then
   // the access role. Publishing each piece costs a round-trip and a sync event
   // that invalidates every mounted query, so only the settled value is sent.
   useEffect(() => {
     if (!id) return;
+    suppressDashboardContextRef.current = false;
     const displayTitle = title?.trim() || id;
     const timer = setTimeout(() => {
+      if (suppressDashboardContextRef.current) return;
       setAgentChatContextItem({
         key: DASHBOARD_CONTEXT_KEY,
         title: `Dashboard: ${displayTitle}`,
@@ -237,6 +264,7 @@ export function useDashboardChatContext(
 
   useEffect(() => {
     if (!id || hasSelectedPanel) return;
+    if (suppressDashboardContextRef.current) return;
     const displayTitle = title?.trim() || id;
     const selection: SelectedDashboardObject = {
       type: "dashboard",
@@ -248,6 +276,7 @@ export function useDashboardChatContext(
       [SELECTED_OBJECT_SOURCE_FIELD]: TAB_ID,
     };
     const timer = setTimeout(() => {
+      if (suppressDashboardContextRef.current) return;
       setClientAppState(SELECTED_OBJECT_STATE_KEY, selection, {
         keepalive: true,
         requestSource: TAB_ID,

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

@@ -526,8 +526,7 @@ export function ReplayStorageHint({
   const storageStatus = useReplayStorageStatus();
   const builderStatus = useBuilderStatus();
   const builderConnect = useBuilderConnectFlow({
-    popupUrl:
-      builderStatus.status?.cliAuthUrl ?? builderStatus.status?.connectUrl,
+    popupUrl: builderStatus.status?.connectUrl,
     trackingSource: "analytics_sessions_storage_hint",
     trackingFlow: "replay_storage",
     onConnected: async () => {

package/corpus/templates/analytics/netlify.toml

@@ -20,6 +20,8 @@ AGENT_CHAT_DURABLE_BACKGROUND = "true"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 # Analytics owns its schema at release time (`migrate:production` above), so
 # production request functions skip migrations. Preview functions still run
 # request-path migrations because previews do not run the production release

package/corpus/templates/assets/netlify.toml

@@ -13,6 +13,8 @@ AGENT_CHAT_DURABLE_BACKGROUND = "true"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 
 # Emit the Netlify background function used by Assets' durable agent-chat opt-in.
 # The normal server timeout still protects non-agent image/video HTTP handlers.

package/corpus/templates/brain/netlify.toml

@@ -12,6 +12,8 @@ NPM_CONFIG_PRODUCTION = "false"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 
 # A2A delegation calls run a full agent loop (LLM + tool calls + DB queries).
 # The framework does not impose a default agent-run timeout; if a template sets

package/corpus/templates/calendar/app/components/calendar/DayView.tsx

@@ -981,7 +981,8 @@ export const DayView = memo(function DayView({
         {/* Positioned events overlay */}
         <div
           data-calendar-create-surface="true"
-          className="absolute inset-0 ml-[40px] mr-2 sm:ml-[56px] sm:mr-4"
+          className="absolute left-0 right-0 top-0 ml-[40px] mr-2 sm:ml-[56px] sm:mr-4"
+          style={{ height: `${hours.length * HOUR_HEIGHT}px` }}
           onPointerDown={(e) => {
             // Only start a create-drag from empty space, not on an event or its resize handles
             if ((e.target as HTMLElement).closest("button")) return;

package/corpus/templates/calendar/changelog/2026-08-19-calendar-page-loads-stay-fast-after-idle-periods.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-19
+---
+
+Calendar pages stay fast after periods of inactivity.

package/corpus/templates/calendar/netlify.toml

@@ -12,6 +12,8 @@ NPM_CONFIG_PRODUCTION = "false"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"
 
 # A2A delegation calls run a full agent loop (LLM + tool calls + DB queries).
 # The framework does not impose a default agent-run timeout; if a template sets

package/corpus/templates/chat/netlify.toml

@@ -12,3 +12,5 @@ NPM_CONFIG_PRODUCTION = "false"
 
 [context.production.environment]
 AGENT_NATIVE_HOSTED_HARNESS = "true"
+AGENT_NATIVE_ENABLE_KEEP_WARM = "1"
+AGENT_NATIVE_DISABLE_KEEP_WARM_BACKGROUND = "1"

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

@@ -34,7 +34,7 @@ import {
 import { PLAYBACK_SPEED_OPTIONS } from "@/lib/playback-speed";
 import { cn } from "@/lib/utils";
 
-import { ReactionsTray } from "./reactions-tray";
+import { ReactionsTray, type ReactionHandler } from "./reactions-tray";
 import { Scrubber, msToClock } from "./scrubber";
 
 export const SPEED_OPTIONS = PLAYBACK_SPEED_OPTIONS;
@@ -73,7 +73,7 @@ export interface PlayerControlsProps {
    */
   showReactionsAndComment?: boolean;
   enableReactions?: boolean;
-  onReact?: (emoji: string) => void;
+  onReact?: ReactionHandler;
   enableComments?: boolean;
   onAddComment?: () => void;
 }
@@ -306,7 +306,7 @@ export function PlayerControls(props: PlayerControlsProps) {
           >
             {enableReactions && onReact ? (
               <div className="pointer-events-auto">
-                <ReactionsTray onReact={onReact} />
+                <ReactionsTray reactions={reactions} onReact={onReact} />
               </div>
             ) : null}
 

package/corpus/templates/clips/app/components/player/reaction-emojis.ts

@@ -8,3 +8,15 @@ export const REACTION_EMOJIS = [
   "🤯",
   "👀",
 ] as const;
+
+export const REACTION_NAMES: Record<(typeof REACTION_EMOJIS)[number], string> =
+  {
+    "👍": "thumbs up",
+    "❤️": "heart",
+    "🔥": "fire",
+    "👏": "clap",
+    "🎉": "celebrate",
+    "😂": "laugh",
+    "🤯": "mind blown",
+    "👀": "eyes",
+  };

package/corpus/templates/clips/app/components/player/reactions-tray.tsx

@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { IconCheck } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
 
 import {
   Tooltip,
@@ -7,10 +8,20 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
-import { REACTION_EMOJIS } from "./reaction-emojis";
+import { REACTION_EMOJIS, REACTION_NAMES } from "./reaction-emojis";
+
+export type ReactionHandlerResult = boolean | void | Promise<boolean | void>;
+export type ReactionHandler = (emoji: string) => ReactionHandlerResult;
+
+export interface ReactionSummary {
+  id: string;
+  emoji: string;
+  videoTimestampMs: number;
+}
 
 export interface ReactionsTrayProps {
-  onReact: (emoji: string) => void;
+  onReact: ReactionHandler;
+  reactions?: Pick<ReactionSummary, "emoji">[];
   disabled?: boolean;
 }
 
@@ -22,18 +33,62 @@ interface Float {
 
 let idc = 0;
 
-export function ReactionsTray({ onReact, disabled }: ReactionsTrayProps) {
+export function ReactionsTray({
+  onReact,
+  reactions,
+  disabled,
+}: ReactionsTrayProps) {
   const [floats, setFloats] = useState<Float[]>([]);
+  const [savingEmoji, setSavingEmoji] = useState<string | null>(null);
+  const [savedEmoji, setSavedEmoji] = useState<string | null>(null);
+
+  const reactionCounts = useMemo(() => {
+    const counts: Partial<Record<(typeof REACTION_EMOJIS)[number], number>> =
+      {};
+    for (const reaction of reactions ?? []) {
+      if (REACTION_EMOJIS.includes(reaction.emoji as never)) {
+        const emoji = reaction.emoji as (typeof REACTION_EMOJIS)[number];
+        counts[emoji] = (counts[emoji] ?? 0) + 1;
+      }
+    }
+    return counts;
+  }, [reactions]);
 
   function fire(emoji: string) {
-    if (disabled) return;
-    onReact(emoji);
+    if (disabled || savingEmoji === emoji) return;
     const id = ++idc;
     const left = 10 + Math.random() * 80; // random horizontal variance within tray
     setFloats((f) => [...f, { id, emoji, left }]);
     setTimeout(() => {
       setFloats((f) => f.filter((x) => x.id !== id));
     }, 2500);
+
+    let result: ReactionHandlerResult;
+    try {
+      result = onReact(emoji);
+    } catch {
+      setSavedEmoji((current) => (current === emoji ? null : current));
+      return;
+    }
+
+    if (result && typeof result === "object" && "then" in result) {
+      setSavingEmoji(emoji);
+      void Promise.resolve(result)
+        .then((saved) => {
+          setSavedEmoji((current) =>
+            saved === false ? (current === emoji ? null : current) : emoji,
+          );
+        })
+        .catch(() => {
+          setSavedEmoji((current) => (current === emoji ? null : current));
+        })
+        .finally(() => {
+          setSavingEmoji((current) => (current === emoji ? null : current));
+        });
+      return;
+    }
+
+    if (result !== false) setSavedEmoji(emoji);
   }
 
   return (
@@ -42,17 +97,43 @@ export function ReactionsTray({ onReact, disabled }: ReactionsTrayProps) {
         <Tooltip key={emoji}>
           <TooltipTrigger asChild>
             <button
+              type="button"
               onClick={() => fire(emoji)}
-              disabled={disabled}
+              disabled={disabled || savingEmoji === emoji}
+              aria-label={
+                reactionCounts[emoji]
+                  ? `${REACTION_NAMES[emoji]} ${reactionCounts[emoji]}`
+                  : `React with ${emoji}`
+              }
+              aria-pressed={savedEmoji === emoji}
+              data-reaction-emoji={emoji}
+              data-reaction-count={reactionCounts[emoji] ?? 0}
+              data-reaction-saved={savedEmoji === emoji}
               className={cn(
-                "flex h-7 w-7 items-center justify-center rounded-full text-base sm:h-9 sm:w-9 sm:text-xl",
+                "relative flex h-8 w-8 items-center justify-center rounded-full text-base transition-[background-color,transform,box-shadow] hover:scale-110 hover:bg-accent sm:h-9 sm:w-9 sm:text-xl",
+                savedEmoji === emoji &&
+                  "bg-accent shadow-[0_0_0_2px_hsl(var(--primary)/0.35)]",
+                savingEmoji === emoji && "animate-pulse",
                 disabled && "opacity-50 cursor-not-allowed",
               )}
             >
               {emoji}
+              {savedEmoji === emoji ? (
+                <span className="absolute -right-0.5 -top-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm">
+                  <IconCheck className="h-2.5 w-2.5" stroke={3} />
+                </span>
+              ) : reactionCounts[emoji] ? (
+                <span className="absolute -right-0.5 -top-0.5 min-w-3.5 rounded-full bg-muted px-0.5 text-[9px] font-semibold leading-3 text-muted-foreground shadow-sm">
+                  {reactionCounts[emoji]}
+                </span>
+              ) : null}
             </button>
           </TooltipTrigger>
-          <TooltipContent>{`React with ${emoji}`}</TooltipContent>
+          <TooltipContent>
+            {reactionCounts[emoji]
+              ? `${REACTION_NAMES[emoji]} ${reactionCounts[emoji]}`
+              : `React with ${emoji}`}
+          </TooltipContent>
         </Tooltip>
       ))}
 

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

@@ -28,6 +28,7 @@ export function Scrubber(props: ScrubberProps) {
   const [tooltip, setTooltip] = useState<
     | { kind: "comment"; content: string; ms: number }
     | { kind: "chapter"; title: string; ms: number }
+    | { kind: "reaction"; content: string; ms: number }
     | null
   >(null);
 
@@ -109,6 +110,17 @@ export function Scrubber(props: ScrubberProps) {
     return map;
   }, [comments]);
 
+  const reactionsByMs = useMemo(() => {
+    const map = new Map<number, { id: string; emoji: string }[]>();
+    recentReactions.forEach((reaction) => {
+      const key = Math.round(reaction.videoTimestampMs / 500) * 500;
+      const list = map.get(key) ?? [];
+      list.push({ id: reaction.id, emoji: reaction.emoji });
+      map.set(key, list);
+    });
+    return map;
+  }, [recentReactions]);
+
   return (
     <div
       className="relative h-10 flex items-center touch-none cursor-pointer"
@@ -142,7 +154,9 @@ export function Scrubber(props: ScrubberProps) {
           className="absolute -top-10 -translate-x-1/2 max-w-[240px] rounded bg-primary px-2 py-1 text-[11px] text-primary-foreground"
           style={{ left: (tooltip.ms / Math.max(1, durationMs)) * 100 + "%" }}
         >
-          {tooltip.kind === "comment" ? tooltip.content : tooltip.title}
+          {tooltip.kind === "comment" || tooltip.kind === "reaction"
+            ? tooltip.content
+            : tooltip.title}
         </div>
       ) : null}
 
@@ -208,17 +222,36 @@ export function Scrubber(props: ScrubberProps) {
           </button>
         ))}
 
-        {/* Reaction dots */}
-        {recentReactions.map((r) => (
-          <div
-            key={r.id}
-            className="absolute -bottom-4 -translate-x-1/2 text-[11px] pointer-events-none"
-            style={{
-              left: (r.videoTimestampMs / Math.max(1, durationMs)) * 100 + "%",
+        {/* Reaction markers */}
+        {Array.from(reactionsByMs.entries()).map(([ms, list]) => (
+          <button
+            key={`reaction-${ms}`}
+            type="button"
+            data-player-reaction-marker
+            onPointerDown={(event) => event.stopPropagation()}
+            onMouseEnter={() =>
+              setTooltip({
+                kind: "reaction",
+                content: `${list.map((reaction) => reaction.emoji).join(" ")} · ${list.length} reaction${list.length === 1 ? "" : "s"}`,
+                ms,
+              })
+            }
+            onMouseLeave={() => setTooltip(null)}
+            onClick={(event) => {
+              event.stopPropagation();
+              onSeek(ms);
             }}
+            className="absolute -bottom-5 flex h-5 min-w-5 -translate-x-1/2 items-center justify-center rounded-full bg-background/95 px-1 text-sm shadow-md ring-1 ring-primary/40 transition-transform hover:scale-125"
+            style={{ left: (ms / Math.max(1, durationMs)) * 100 + "%" }}
+            aria-label={`${list.length} reaction${list.length === 1 ? "" : "s"} at ${msToClock(ms)}`}
           >
-            {r.emoji}
-          </div>
+            {list[0].emoji}
+            {list.length > 1 ? (
+              <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[8px] font-bold leading-none text-primary-foreground ring-1 ring-background">
+                {list.length}
+              </span>
+            ) : null}
+          </button>
         ))}
 
         {/* Thumb */}

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

@@ -57,6 +57,11 @@ import {
   type PlaybackComment,
 } from "./playback-comment-overlay";
 import { PlayerControls, SPEED_OPTIONS } from "./player-controls";
+import type {
+  ReactionHandler,
+  ReactionHandlerResult,
+  ReactionSummary,
+} from "./reactions-tray";
 
 function resolveLocalUrl(url: string | null | undefined): string | undefined {
   if (!url) return undefined;
@@ -251,7 +256,7 @@ export interface VideoPlayerProps {
    * visible only while `isFullscreen` is true.
    */
   enableReactions?: boolean;
-  onReact?: (emoji: string) => void;
+  onReact?: ReactionHandler;
   enableComments?: boolean;
   /**
    * Opens the existing comment composer/panel. While fullscreen, the caller
@@ -374,6 +379,10 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
     const [currentMs, setCurrentMs] = useState(startMs ?? 0);
     currentMsRef.current = currentMs;
     isPlayingRef.current = isPlaying;
+    const [optimisticReactions, setOptimisticReactions] = useState<
+      ReactionSummary[]
+    >([]);
+    const optimisticReactionIdRef = useRef(0);
     const [loomStartMs, setLoomStartMs] = useState<number | null>(null);
     const [volume, setVolume] = useState(1);
     // Autoplaying players (e.g. the Slack unfurl embed, `?autoplay=1`) must
@@ -492,20 +501,101 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
             ? []
             : [{ startMs: editedMs, title: chapter.title }];
         }),
-        reactions: (reactions ?? []).flatMap((reaction) => {
-          const editedMs = mapMarker(reaction.videoTimestampMs);
-          return editedMs === null
-            ? []
-            : [
-                {
-                  id: reaction.id,
-                  emoji: reaction.emoji,
-                  videoTimestampMs: editedMs,
-                },
-              ];
-        }),
+        reactions: [
+          ...(reactions ?? []).flatMap((reaction) => {
+            const editedMs = mapMarker(reaction.videoTimestampMs);
+            return editedMs === null
+              ? []
+              : [
+                  {
+                    id: reaction.id,
+                    emoji: reaction.emoji,
+                    videoTimestampMs: editedMs,
+                  },
+                ];
+          }),
+          ...optimisticReactions.flatMap((reaction) => {
+            const editedMs = mapMarker(reaction.videoTimestampMs);
+            return editedMs === null
+              ? []
+              : [
+                  {
+                    id: reaction.id,
+                    emoji: reaction.emoji,
+                    videoTimestampMs: editedMs,
+                  },
+                ];
+          }),
+        ],
       };
-    }, [chapters, comments, currentMs, edits, reactions, resolvedDurationMs]);
+    }, [
+      chapters,
+      comments,
+      currentMs,
+      edits,
+      optimisticReactions,
+      reactions,
+      resolvedDurationMs,
+    ]);
+
+    useEffect(() => {
+      if (!optimisticReactions.length || !reactions?.length) return;
+      setOptimisticReactions((current) => {
+        const next = current.filter(
+          (optimistic) =>
+            !reactions.some(
+              (persisted) =>
+                persisted.emoji === optimistic.emoji &&
+                Math.abs(
+                  persisted.videoTimestampMs - optimistic.videoTimestampMs,
+                ) < 1000,
+            ),
+        );
+        return next.length === current.length ? current : next;
+      });
+    }, [optimisticReactions.length, reactions]);
+
+    const handleReact = useCallback<ReactionHandler>(
+      (emoji) => {
+        const optimistic = {
+          id: `optimistic-reaction-${++optimisticReactionIdRef.current}`,
+          emoji,
+          videoTimestampMs: currentMsRef.current,
+        };
+        setOptimisticReactions((current) => [...current, optimistic]);
+
+        const removeOptimistic = () => {
+          setOptimisticReactions((current) =>
+            current.filter((reaction) => reaction.id !== optimistic.id),
+          );
+        };
+
+        let result: ReactionHandlerResult | undefined;
+        try {
+          result = onReact?.(emoji);
+        } catch {
+          removeOptimistic();
+          return false;
+        }
+
+        if (result && typeof result === "object" && "then" in result) {
+          return Promise.resolve(result).then(
+            (saved) => {
+              if (saved === false) removeOptimistic();
+              return saved !== false;
+            },
+            () => {
+              removeOptimistic();
+              return false;
+            },
+          );
+        }
+
+        if (result === false) removeOptimistic();
+        return result !== false;
+      },
+      [onReact],
+    );
     const activeVideoSourceIdentity = useMemo(
       () => videoSourceIdentity(activeVideoSrc),
       [activeVideoSrc],
@@ -2016,7 +2106,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
               menuPortalContainer={fullscreenMenuContainer}
               showReactionsAndComment={isFullscreen}
               enableReactions={enableReactions}
-              onReact={onReact}
+              onReact={handleReact}
               enableComments={enableComments}
               onAddComment={onAddComment}
             />

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

@@ -106,8 +106,7 @@ export default function SettingsIndexRoute() {
   const builderStatus = useBuilderStatus();
   const connectRequestedRef = useRef(false);
   const builderConnect = useBuilderConnectFlow({
-    popupUrl:
-      builderStatus.status?.cliAuthUrl ?? builderStatus.status?.connectUrl,
+    popupUrl: builderStatus.status?.connectUrl,
     trackingSource: "clips_settings",
     trackingFlow: "clips_setup",
     onConnected: async () => {

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

@@ -4,6 +4,7 @@ import { redirect, type LoaderFunctionArgs } from "react-router";
 const SEO_TITLE = "Clips - Open Source screen recorder";
 const SEO_DESCRIPTION =
   "Open Source screen recorder and meeting-notes app with AI transcripts, summaries, search, dictation, and agent-readable share links.";
+const SSR_REDIRECT_CONTENT_TYPE = "text/html; charset=utf-8";
 
 export function meta() {
   return [
@@ -38,11 +39,18 @@ function buildTarget(url: URL): string {
 }
 
 export function loader({ url }: LoaderFunctionArgs) {
-  throw redirect(buildTarget(url));
+  const response = redirect(buildTarget(url));
+  // The deploy adapter uses the HTML content type to apply Clips' public SSR
+  // cache policy. Without it, the root redirect reaches origin on every visit
+  // even though the /library shell is already cached at the edge.
+  response.headers.set("content-type", SSR_REDIRECT_CONTENT_TYPE);
+  throw response;
 }
 
 export function clientLoader({ url }: LoaderFunctionArgs) {
-  throw redirect(buildTarget(url));
+  const response = redirect(buildTarget(url));
+  response.headers.set("content-type", SSR_REDIRECT_CONTENT_TYPE);
+  throw response;
 }
 
 export function HydrateFallback() {

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -1628,7 +1628,7 @@ export default function RecordingPage() {
                   onReact={(emoji) => {
                     tracking.reportReaction(emoji);
                     const liveMs = resolvePlaybackMs();
-                    fetch(
+                    return fetch(
                       agentNativePath(
                         "/_agent-native/actions/react-to-recording",
                       ),
@@ -1647,9 +1647,11 @@ export default function RecordingPage() {
                           throw new Error(`react failed: ${res.status}`);
                         return playerDataQ.refetch();
                       })
-                      .catch((err) =>
-                        console.warn("[clips] react failed", err),
-                      );
+                      .then(() => true)
+                      .catch((err) => {
+                        console.warn("[clips] react failed", err);
+                        return false;
+                      });
                   }}
                   className="h-full w-full rounded-none sm:rounded-xl"
                 />
@@ -1736,11 +1738,12 @@ export default function RecordingPage() {
                     ) : null}
                     {recording.enableReactions ? (
                       <ReactionsTray
+                        reactions={reactions}
                         disabled={!recording.enableReactions || !canComment}
                         onReact={(emoji) => {
                           tracking.reportReaction(emoji);
                           const liveMs = resolvePlaybackMs();
-                          fetch(
+                          return fetch(
                             agentNativePath(
                               "/_agent-native/actions/react-to-recording",
                             ),
@@ -1759,9 +1762,11 @@ export default function RecordingPage() {
                                 throw new Error(`react failed: ${res.status}`);
                               return playerDataQ.refetch();
                             })
-                            .catch((err) =>
-                              console.warn("[clips] react failed", err),
-                            );
+                            .then(() => true)
+                            .catch((err) => {
+                              console.warn("[clips] react failed", err);
+                              return false;
+                            });
                         }}
                       />
                     ) : null}