@agent-native/core 0.86.0 → 0.87.0

package/corpus/templates/chat/app/routes/settings.tsx

@@ -6,17 +6,17 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
-
-import { useSetPageTitle } from "@/components/layout/HeaderActions";
-import { Button } from "@/components/ui/button";
+import { useSetPageTitle } from "@agent-native/toolkit/app-shell";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
+} from "@agent-native/toolkit/ui/card";
+import { Label } from "@agent-native/toolkit/ui/label";
+
 import { APP_TITLE } from "@/lib/app-config";
 
 import changelog from "../../CHANGELOG.md?raw";

package/corpus/templates/chat/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@agent-native/core": "workspace:*",
+    "@agent-native/toolkit": "workspace:*",
     "@fontsource-variable/inter": "^5.2.8",
     "@libsql/client": "^0.15.8",
     "@tabler/icons-react": "catalog:",

package/corpus/templates/clips/AGENTS.md

@@ -135,6 +135,11 @@ Detailed media, meeting, dictation, editing, and sharing rules live in
   private/authenticated recording context. When preparing a link for another
   agent outside Clips, use `create-recording-agent-link`; it mints a two-hour
   `agent_access` share URL without changing recording visibility.
+- Use `@agent-native/core/server` and `@agent-native/core/shared` agent-access
+  helpers for scoped token mint/verify and bot-visible URL construction. Keep
+  Clips-specific visibility, password, transcript, frame, and player behavior
+  in Clips. New URLs should use `agent_access`; existing agent API routes should
+  keep accepting legacy `t` tokens for copied links.
 
 ## Skills
 

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

@@ -1,20 +1,20 @@
 import { defineAction } from "@agent-native/core";
 import {
+  buildAgentAccessUrl,
+  createScopedAgentAccessGrant,
   getRequestContext,
   getRequestUserEmail,
-  signShortLivedToken,
 } from "@agent-native/core/server";
 import { ForbiddenError, resolveAccess } from "@agent-native/core/sharing";
 import { z } from "zod";
 
 import {
-  CLIPS_AGENT_ACCESS_PARAM,
   CLIPS_AGENT_ACCESS_TTL_SECONDS,
   getServerAppBasePath,
 } from "../server/lib/public-agent-context.js";
 import {
-  agentAccessTokenResourceId,
   buildAgentApiUrls,
+  CLIP_AGENT_ACCESS_TOKEN_PREFIX,
 } from "../shared/agent-context.js";
 
 function appOrigin(): string {
@@ -30,11 +30,6 @@ function appOrigin(): string {
   }
 }
 
-function appendAgentAccess(url: string, token: string): string {
-  const sep = url.includes("?") ? "&" : "?";
-  return `${url}${sep}${CLIPS_AGENT_ACCESS_PARAM}=${encodeURIComponent(token)}`;
-}
-
 export default defineAction({
   description:
     "Create a temporary private agent-readable link for one Clips recording. The URL is scoped to that recording and expires after two hours.",
@@ -59,32 +54,32 @@ export default defineAction({
       );
     }
 
-    const token = signShortLivedToken({
-      resourceId: agentAccessTokenResourceId(recording.id),
+    const grant = createScopedAgentAccessGrant({
+      resourceKind: CLIP_AGENT_ACCESS_TOKEN_PREFIX,
+      resourceId: recording.id,
       viewerEmail: getRequestUserEmail() || undefined,
       ttlSeconds: CLIPS_AGENT_ACCESS_TTL_SECONDS,
     });
     const origin = appOrigin();
     const basePath = getServerAppBasePath();
-    const expiresAt = new Date(
-      Date.now() + CLIPS_AGENT_ACCESS_TTL_SECONDS * 1000,
-    ).toISOString();
-    const pageUrl = appendAgentAccess(
-      `${origin}${basePath}/share/${encodeURIComponent(recording.id)}`,
-      token,
-    );
+    const pageUrl = buildAgentAccessUrl({
+      path: `/share/${encodeURIComponent(recording.id)}`,
+      origin,
+      basePath,
+      token: grant.token,
+    });
     const api = buildAgentApiUrls(recording.id, {
       origin,
       basePath,
-      token,
+      token: grant.token,
     });
 
     return {
       recordingId: recording.id,
       url: pageUrl,
       contextUrl: api.contextUrl,
-      expiresAt,
-      ttlSeconds: CLIPS_AGENT_ACCESS_TTL_SECONDS,
+      expiresAt: grant.expiresAt,
+      ttlSeconds: grant.ttlSeconds,
     };
   },
 });

package/corpus/templates/clips/actions/delete-recording-permanent.ts

@@ -11,10 +11,14 @@ import {
   deleteAppState,
   deleteAppStateByPrefix,
 } from "@agent-native/core/application-state";
-import { and, eq } from "drizzle-orm";
+import { and, eq, inArray, ne, or } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import {
+  deleteRecordingMediaObjects,
+  recordingMediaUrls,
+} from "../server/lib/recording-media-cleanup.js";
 import {
   getCurrentOwnerEmail,
   ownerEmailMatches,
@@ -41,38 +45,74 @@ export default defineAction({
       );
     if (!existing) throw new Error(`Recording not found: ${args.id}`);
 
-    // Cascade delete every related row.
-    await db
-      .delete(schema.recordingComments)
-      .where(eq(schema.recordingComments.recordingId, args.id));
-    await db
-      .delete(schema.recordingReactions)
-      .where(eq(schema.recordingReactions.recordingId, args.id));
-    await db
-      .delete(schema.recordingViewers)
-      .where(eq(schema.recordingViewers.recordingId, args.id));
-    await db
-      .delete(schema.recordingEvents)
-      .where(eq(schema.recordingEvents.recordingId, args.id));
-    await db
-      .delete(schema.recordingTranscripts)
-      .where(eq(schema.recordingTranscripts.recordingId, args.id));
-    await db
-      .delete(schema.recordingBrowserDiagnostics)
-      .where(eq(schema.recordingBrowserDiagnostics.recordingId, args.id));
-    await db
-      .delete(schema.recordingBugReports)
-      .where(eq(schema.recordingBugReports.recordingId, args.id));
-    await db
-      .delete(schema.recordingTags)
-      .where(eq(schema.recordingTags.recordingId, args.id));
-    await db
-      .delete(schema.recordingCtas)
-      .where(eq(schema.recordingCtas.recordingId, args.id));
-    await db
-      .delete(schema.recordingShares)
-      .where(eq(schema.recordingShares.resourceId, args.id));
-    await db.delete(schema.recordings).where(eq(schema.recordings.id, args.id));
+    const mediaUrls = recordingMediaUrls(existing);
+    const protectedUrls = new Set<string>();
+    if (mediaUrls.length > 0) {
+      const mediaReferences = await db
+        .select({
+          videoUrl: schema.recordings.videoUrl,
+          thumbnailUrl: schema.recordings.thumbnailUrl,
+          animatedThumbnailUrl: schema.recordings.animatedThumbnailUrl,
+        })
+        .from(schema.recordings)
+        .where(
+          and(
+            ne(schema.recordings.id, args.id),
+            or(
+              inArray(schema.recordings.videoUrl, mediaUrls),
+              inArray(schema.recordings.thumbnailUrl, mediaUrls),
+              inArray(schema.recordings.animatedThumbnailUrl, mediaUrls),
+            ),
+          ),
+        );
+      for (const reference of mediaReferences) {
+        for (const url of recordingMediaUrls(reference)) {
+          if (mediaUrls.includes(url)) protectedUrls.add(url);
+        }
+      }
+    }
+
+    await db.transaction(async (tx) => {
+      // Cascade delete every related row before deleting remote objects. If any
+      // DB delete fails, the transaction rolls back and provider media stays put.
+      await tx
+        .delete(schema.recordingComments)
+        .where(eq(schema.recordingComments.recordingId, args.id));
+      await tx
+        .delete(schema.recordingReactions)
+        .where(eq(schema.recordingReactions.recordingId, args.id));
+      await tx
+        .delete(schema.recordingViewers)
+        .where(eq(schema.recordingViewers.recordingId, args.id));
+      await tx
+        .delete(schema.recordingEvents)
+        .where(eq(schema.recordingEvents.recordingId, args.id));
+      await tx
+        .delete(schema.recordingTranscripts)
+        .where(eq(schema.recordingTranscripts.recordingId, args.id));
+      await tx
+        .delete(schema.recordingBrowserDiagnostics)
+        .where(eq(schema.recordingBrowserDiagnostics.recordingId, args.id));
+      await tx
+        .delete(schema.recordingBugReports)
+        .where(eq(schema.recordingBugReports.recordingId, args.id));
+      await tx
+        .delete(schema.recordingTags)
+        .where(eq(schema.recordingTags.recordingId, args.id));
+      await tx
+        .delete(schema.recordingCtas)
+        .where(eq(schema.recordingCtas.recordingId, args.id));
+      await tx
+        .delete(schema.recordingShares)
+        .where(eq(schema.recordingShares.resourceId, args.id));
+      await tx
+        .delete(schema.recordings)
+        .where(eq(schema.recordings.id, args.id));
+    });
+
+    const mediaCleanup = await deleteRecordingMediaObjects(existing, {
+      protectedUrls,
+    });
 
     // Clean up any lingering application state for this recording.
     await deleteAppStateByPrefix(`recording-chunks-${args.id}-`);
@@ -86,6 +126,6 @@ export default defineAction({
     console.log(
       `Permanently deleted recording "${existing.title}" (${args.id})`,
     );
-    return { success: true, id: args.id };
+    return { success: true, id: args.id, mediaCleanup };
   },
 });

package/corpus/templates/clips/app/components/capture-install-options.tsx

@@ -1,4 +1,10 @@
 import { appPath, useT } from "@agent-native/core/client";
+import { Button, type ButtonProps } from "@agent-native/toolkit/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
 import {
   IconBrandApple,
   IconBrandChrome,
@@ -9,12 +15,6 @@ import {
 } from "@tabler/icons-react";
 import { type ReactNode } from "react";
 
-import { Button, type ButtonProps } from "@/components/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 import {
   clipsChromeExtensionEnabled,
   clipsChromeExtensionUrl,

package/corpus/templates/clips/app/components/editable-recording-title.tsx

@@ -1,11 +1,11 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import { IconEdit } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { toast } from "sonner";
 
-import { Input } from "@/components/ui/input";
-import { Skeleton } from "@/components/ui/skeleton";
 import { isDefaultTitle } from "@/hooks/use-auto-title";
 import { cn } from "@/lib/utils";
 

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

@@ -1,4 +1,11 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconBookmarks,
   IconPlus,
@@ -8,13 +15,6 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { formatMs } from "@/lib/timestamp-mapping";
 import { cn } from "@/lib/utils";
 

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

@@ -83,6 +83,26 @@ export interface EditorLayoutProps {
 }
 
 const WAVEFORM_HEIGHT = 120;
+const MIN_TIMELINE_ZOOM = 1;
+const MAX_TIMELINE_ZOOM = 50;
+
+function clampTimelineZoom(value: number): number {
+  if (!Number.isFinite(value)) return MIN_TIMELINE_ZOOM;
+  const clamped = Math.max(
+    MIN_TIMELINE_ZOOM,
+    Math.min(MAX_TIMELINE_ZOOM, value),
+  );
+  return Math.round(clamped * 10) / 10;
+}
+
+function normalizeWheelDeltaY(
+  event: WheelEvent,
+  viewportWidth: number,
+): number {
+  if (event.deltaMode === 1) return event.deltaY * 16;
+  if (event.deltaMode === 2) return event.deltaY * viewportWidth;
+  return event.deltaY;
+}
 
 function shouldProxyWaveformUrl(videoUrl: string): boolean {
   try {
@@ -210,6 +230,12 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
   const [chaptersOpen, setChaptersOpen] = useState(false);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const trackpadGestureRef = useRef<{
+    zoom: number;
+    scrollLeft: number;
+    anchorRatio: number;
+    viewportX: number;
+  } | null>(null);
 
   // Measure viewport so waveform + timeline stay responsive.
   useEffect(() => {
@@ -228,12 +254,149 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
     Math.floor(viewportWidth * Math.max(1, zoom)),
   );
 
+  const calculateAnchoredScrollLeft = useCallback(
+    (
+      nextZoom: number,
+      anchor?: { anchorRatio?: number; viewportX?: number },
+    ) => {
+      const nextTotalWidth = Math.max(
+        viewportWidth,
+        Math.floor(viewportWidth * Math.max(1, nextZoom)),
+      );
+      const maxScrollLeft = Math.max(0, nextTotalWidth - viewportWidth);
+      const anchorMs = selectionRange
+        ? (selectionRange.startMs + selectionRange.endMs) / 2
+        : playheadMs;
+      const fallbackAnchorRatio =
+        durationMs > 0
+          ? Math.max(0, Math.min(durationMs, anchorMs)) / durationMs
+          : 0;
+      const anchorRatio = Math.max(
+        0,
+        Math.min(1, anchor?.anchorRatio ?? fallbackAnchorRatio),
+      );
+      const viewportX =
+        typeof anchor?.viewportX === "number"
+          ? Math.max(0, Math.min(viewportWidth, anchor.viewportX))
+          : viewportWidth / 2;
+      const anchorX = anchorRatio * nextTotalWidth;
+      return Math.max(0, Math.min(maxScrollLeft, anchorX - viewportX));
+    },
+    [durationMs, playheadMs, selectionRange, viewportWidth],
+  );
+
+  const setAnchoredZoom = useCallback(
+    (
+      nextZoom: number,
+      anchor?: { anchorRatio?: number; viewportX?: number },
+    ) => {
+      const clamped = clampTimelineZoom(nextZoom);
+      setZoom(clamped);
+      setScrollLeft(calculateAnchoredScrollLeft(clamped, anchor));
+    },
+    [calculateAnchoredScrollLeft],
+  );
+
+  const handleZoomChange = useCallback(
+    (nextZoom: number) => setAnchoredZoom(nextZoom),
+    [setAnchoredZoom],
+  );
+
   useEffect(() => {
     setScrollLeft((current) =>
       Math.min(current, Math.max(0, totalWidth - viewportWidth)),
     );
   }, [totalWidth, viewportWidth]);
 
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const getViewportX = (clientX?: number) => {
+      if (typeof clientX !== "number") return viewportWidth / 2;
+      const rect = el.getBoundingClientRect();
+      return Math.max(0, Math.min(viewportWidth, clientX - rect.left));
+    };
+
+    const getAnchorRatio = (
+      sourceZoom: number,
+      sourceScrollLeft: number,
+      viewportX: number,
+    ) => {
+      const sourceTotalWidth = Math.max(
+        viewportWidth,
+        Math.floor(viewportWidth * Math.max(1, sourceZoom)),
+      );
+      return Math.max(
+        0,
+        Math.min(
+          1,
+          (sourceScrollLeft + viewportX) / Math.max(1, sourceTotalWidth),
+        ),
+      );
+    };
+
+    const handleWheel = (event: WheelEvent) => {
+      if (!event.ctrlKey) return;
+      event.preventDefault();
+      const deltaY = normalizeWheelDeltaY(event, viewportWidth);
+      if (Math.abs(deltaY) < 0.01) return;
+      const viewportX = getViewportX(event.clientX);
+      const anchorRatio = getAnchorRatio(zoom, scrollLeft, viewportX);
+      const nextZoom = clampTimelineZoom(zoom * Math.exp(-deltaY * 0.006));
+      if (nextZoom === zoom) return;
+      setAnchoredZoom(nextZoom, { anchorRatio, viewportX });
+    };
+
+    const handleGestureStart = (event: Event) => {
+      event.preventDefault();
+      const gesture = event as Event & { clientX?: number };
+      const viewportX = getViewportX(gesture.clientX);
+      trackpadGestureRef.current = {
+        zoom,
+        scrollLeft,
+        anchorRatio: getAnchorRatio(zoom, scrollLeft, viewportX),
+        viewportX,
+      };
+    };
+
+    const handleGestureChange = (event: Event) => {
+      const start = trackpadGestureRef.current;
+      if (!start) return;
+      event.preventDefault();
+      const gesture = event as Event & { scale?: number };
+      const scale =
+        typeof gesture.scale === "number" && Number.isFinite(gesture.scale)
+          ? gesture.scale
+          : 1;
+      const nextZoom = clampTimelineZoom(start.zoom * scale);
+      if (nextZoom === zoom) return;
+      setAnchoredZoom(nextZoom, {
+        anchorRatio: start.anchorRatio,
+        viewportX: start.viewportX,
+      });
+    };
+
+    const handleGestureEnd = () => {
+      trackpadGestureRef.current = null;
+    };
+
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    el.addEventListener("gesturestart", handleGestureStart, {
+      passive: false,
+    });
+    el.addEventListener("gesturechange", handleGestureChange, {
+      passive: false,
+    });
+    el.addEventListener("gestureend", handleGestureEnd);
+    return () => {
+      el.removeEventListener("wheel", handleWheel);
+      el.removeEventListener("gesturestart", handleGestureStart);
+      el.removeEventListener("gesturechange", handleGestureChange);
+      el.removeEventListener("gestureend", handleGestureEnd);
+    };
+  }, [scrollLeft, setAnchoredZoom, viewportWidth, zoom]);
+
   // Sync the <video> to play state.
   useEffect(() => {
     const v = videoRef.current;
@@ -457,7 +620,7 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
         playbackSpeed={playbackSpeed}
         onPlaybackSpeedChange={handlePlaybackSpeedChange}
         zoom={zoom}
-        onZoomChange={setZoom}
+        onZoomChange={handleZoomChange}
         edits={edits}
         selectionRange={selectionRange}
         video={{ videoUrl, videoFormat, title: recording.title }}
@@ -524,6 +687,7 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
                 selectionRange={selectionRange}
                 activityRanges={transcriptSegments}
                 onSeek={seek}
+                scrollLeft={scrollLeft}
                 onScroll={(s) => setScrollLeft(s)}
               />
               <div
@@ -543,7 +707,6 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
                     value={effectiveSelection}
                     onChange={setSelectionRange}
                     durationMs={durationMs}
-                    scrollLeft={scrollLeft}
                   />
                 </div>
               </div>
@@ -566,7 +729,6 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
                   chapters={chapters}
                   excludedRanges={excludedRanges}
                   splitPoints={splitPoints}
-                  scrollLeft={scrollLeft}
                   onSeek={seek}
                   onClickChapter={(c) => seek(c.startMs)}
                 />