@agent-native/core 0.157.3 → 0.157.5

package/corpus/templates/clips/server/lib/emails.ts

@@ -52,12 +52,39 @@ const CLIPS_SENDER =
   'From is the configured EMAIL_FROM with the display name "Agent-Native Clips"; on first-party agent-native.com deployments it becomes clips@agent-native.com. Reply-to is hello@agent-native.com.';
 
 let registered = false;
+const GLOBAL_REGISTRATION_KEY =
+  "__agentNativeClipsTransactionalEmailCatalogRegistered";
+const globalRegistrationState = globalThis as typeof globalThis &
+  Record<string, boolean | undefined>;
+
+function defineClipsTransactionalEmail(
+  definition: Parameters<typeof defineTransactionalEmail>[0],
+): boolean {
+  try {
+    defineTransactionalEmail(definition);
+    return true;
+  } catch (error) {
+    if (
+      error instanceof Error &&
+      error.message.startsWith('Duplicate transactional email id "clips.')
+    ) {
+      // The same Clips catalog can be evaluated twice by Nitro/Vite. The
+      // first definition is canonical, so a duplicate is already registered.
+      return false;
+    }
+    throw error;
+  }
+}
 
 export function registerClipsEmails(): void {
-  if (registered) return;
+  // Nitro/Vite can evaluate the same server module through two module
+  // instances during dev reloads. Keep the catalog registration process-wide
+  // so those instances cannot submit the same id twice.
+  if (registered || globalRegistrationState[GLOBAL_REGISTRATION_KEY]) return;
   registered = true;
+  globalRegistrationState[GLOBAL_REGISTRATION_KEY] = true;
 
-  defineTransactionalEmail({
+  defineClipsTransactionalEmail({
     id: CLIPS_ACCESS_REQUEST_EMAIL_ID,
     name: "Clip access request",
     trigger:
@@ -73,10 +100,12 @@ export function registerClipsEmails(): void {
         requesterEmail: "sam.rivera@example.com",
         recordingTitle: SAMPLE_TITLE,
         url: "https://example.com/share/rec_sample",
+        allowAccessUrl:
+          "https://example.com/access-request/approve?recordingId=rec_sample&token=preview-token",
       }),
   });
 
-  defineTransactionalEmail({
+  defineClipsTransactionalEmail({
     id: CLIPS_FIRST_VIEW_EMAIL_ID,
     name: "First view on a Clip",
     trigger:
@@ -96,7 +125,7 @@ export function registerClipsEmails(): void {
       }),
   });
 
-  defineTransactionalEmail({
+  defineClipsTransactionalEmail({
     id: CLIPS_UNVIEWED_REMINDER_EMAIL_ID,
     name: "Unviewed Clip reminder",
     trigger:
@@ -118,7 +147,7 @@ export function registerClipsEmails(): void {
       }),
   });
 
-  defineTransactionalEmail({
+  defineClipsTransactionalEmail({
     id: CLIPS_FIRST_AGENT_VIEW_EMAIL_ID,
     name: "First agent read of a Clip",
     trigger:
@@ -138,7 +167,7 @@ export function registerClipsEmails(): void {
       }),
   });
 
-  defineTransactionalEmail({
+  defineClipsTransactionalEmail({
     id: CLIPS_FIRST_IMPORT_EMAIL_ID,
     name: "First imported video is ready",
     trigger:
@@ -157,7 +186,7 @@ export function registerClipsEmails(): void {
       }),
   });
 
-  defineTransactionalEmail({
+  defineClipsTransactionalEmail({
     id: CLIPS_MONTHLY_RECAP_EMAIL_ID,
     name: "Monthly Clips recap",
     trigger:
@@ -191,7 +220,7 @@ export function registerClipsEmails(): void {
       }),
   });
 
-  defineTransactionalEmail({
+  defineClipsTransactionalEmail({
     id: CLIPS_TWO_CLIPS_EMAIL_ID,
     name: "Two Clips received",
     trigger:
@@ -210,7 +239,7 @@ export function registerClipsEmails(): void {
       }),
   });
 
-  defineTransactionalEmail({
+  defineClipsTransactionalEmail({
     id: CLIPS_ACTIVITY_COMMENT_EMAIL_ID,
     name: "Clip comment",
     trigger:
@@ -234,7 +263,7 @@ export function registerClipsEmails(): void {
       }),
   });
 
-  defineTransactionalEmail({
+  defineClipsTransactionalEmail({
     id: CLIPS_ACTIVITY_REACTION_EMAIL_ID,
     name: "Clip reaction",
     trigger: "A viewer reacts with an emoji on a Clip.",
@@ -256,7 +285,7 @@ export function registerClipsEmails(): void {
       }),
   });
 
-  defineTransactionalEmail({
+  defineClipsTransactionalEmail({
     id: CLIPS_ORGANIZATION_INVITE_EMAIL_ID,
     name: "Organization invitation",
     trigger:

package/corpus/templates/clips/shared/recording-link.ts

@@ -12,15 +12,46 @@
  */
 import { withShareAttribution } from "./share-attribution";
 
-/** Short-lived capability used by a signed-in private share viewer to request access. */
+/** Short-lived capability used by a private share viewer to request access. */
 export const CLIPS_ACCESS_REQUEST_TOKEN_PREFIX = "clips-access-request";
 export const CLIPS_ACCESS_REQUEST_TOKEN_TTL_SECONDS = 10 * 60;
 
+/** Signed capability embedded in the owner's access-request email. */
+export const CLIPS_ACCESS_APPROVAL_TOKEN_PREFIX = "clips-access-approval";
+export const CLIPS_ACCESS_APPROVAL_TOKEN_TTL_SECONDS = 7 * 24 * 60 * 60;
+export const CLIPS_ACCESS_APPROVAL_SESSION_KEY_PREFIX =
+  "clips-access-approval-token:";
+
 /** Public share path for a recording, relative to the app base path. */
 export function recordingSharePath(recordingId: string): string {
   return `/share/${encodeURIComponent(recordingId)}`;
 }
 
+/** Owner-only route used by the one-click approval button in access emails. */
+export function recordingAccessApprovalPath(
+  recordingId: string,
+  approvalToken: string,
+): string {
+  const params = new URLSearchParams({
+    recordingId,
+    token: approvalToken,
+  });
+  return `/access-request/approve?${params.toString()}`;
+}
+
+/** Token-free continuation used after the approver signs in. */
+export function recordingAccessApprovalContinuationPath(
+  recordingId: string,
+): string {
+  const params = new URLSearchParams({ recordingId });
+  return `/access-request/approve?${params.toString()}`;
+}
+
+/** Tab-scoped key for carrying an approval token across the sign-in redirect. */
+export function recordingAccessApprovalSessionKey(recordingId: string): string {
+  return `${CLIPS_ACCESS_APPROVAL_SESSION_KEY_PREFIX}${encodeURIComponent(recordingId)}`;
+}
+
 export interface RecordingShareUrlParams {
   recordingId: string;
   /** Absolute origin, e.g. `https://clips.example.com` or a desktop serverUrl. */

package/corpus/templates/clips/shared/share-attribution.ts

@@ -51,6 +51,19 @@ export type ShareAttribution = {
   via: string | undefined;
 };
 
+/**
+ * Keep only non-sensitive attribution state when a share page redirects to
+ * sign-in. Passwords and capability tokens must never enter auth URLs.
+ */
+export function buildShareContinuationQuery(
+  attribution: ShareAttribution,
+): string {
+  const params = new URLSearchParams();
+  if (attribution.ref) params.set(REF_PARAM, attribution.ref);
+  if (attribution.via) params.set(VIA_PARAM, attribution.via);
+  return params.toString();
+}
+
 /**
  * Read `ref`/`via` from a query string (e.g. `window.location.search`). Falls
  * back to `ref=clip_share` so downstream attribution stays meaningful even when

package/corpus/templates/content/.agents/skills/agent-native-toolkit/SKILL.md

@@ -182,6 +182,11 @@ in the moment of agent use.
   five-item sidebar preview and a footer row with New chat followed by an
   ellipsis disclosure up to fifteen. Apps inject routing, labels, and domain
   actions.
+- **Data grid kit**: provider-agnostic spreadsheet mechanics belong in
+  `@agent-native/toolkit/data-grid`. Apps provide rows, typed columns, editor
+  slots, selection and width state, persistence callbacks, and product-level
+  row/body slots. Keep database models, access checks, grouping, drag/drop,
+  and domain actions in the app adapter.
 - **Agent page kit**: the full-page `/agent` surface (`AgentTabsPage` from
   `@agent-native/core/client`) with Context, Files, Connections, Jobs, and
   Access tabs plus a Personal/Organization scope toggle. The canonical home

package/corpus/templates/content/.agents/skills/sharing/SKILL.md

@@ -184,6 +184,27 @@ import { ShareButton } from "@agent-native/core/client/sharing";
 
 For list views, show `<VisibilityBadge visibility={row.visibility} />` next to each resource.
 
+## Standard share surface
+
+All app share popovers should use the same compact surface contract:
+
+- Use the text-only `ShareTrigger` from `@agent-native/toolkit/sharing`.
+- Render ordinary links with `ShareCopyRow`, which exposes a Copy action without
+  printing the raw URL.
+- Keep general access and individual people access in the standard Core sharing
+  flow. The people flow supports email invites, roles, notifications, and
+  removal through the shared share actions.
+- Add `ShareAgentsSection` only when the resource has a real agent-readable
+  link or prompt. Keep it collapsed by default and supply domain-specific
+  content through the shared section shell.
+- App-specific tabs or controls may remain when they represent a real domain
+  action (for example, an embed-code editor), but they should retain the same
+  trigger, copy-row, access, and spacing language.
+
+`ShareDisclosureSection` is the toolkit-owned shell for optional expandable
+share details; use its `ShareAgentsSection` or `SharePeopleSection` wrappers
+instead of creating another collapsible share panel in a template.
+
 ## Actions available everywhere
 
 The framework auto-mounts these actions in every template — no per-template boilerplate:

package/corpus/templates/content/app/components/editor/DocumentBlockFields.tsx

@@ -696,6 +696,7 @@ export function useBlockFieldEditor({
   content: string;
   editorResetVersion: number;
   onChange: (markdown: string) => void;
+  onSaveContent: (markdown: string) => Promise<boolean>;
 } {
   const key = `${documentId}:${propertyId}`;
 
@@ -876,7 +877,16 @@ export function useBlockFieldEditor({
     controllerRef.current?.change(markdown);
   }
 
-  return { content, editorResetVersion, onChange };
+  async function onSaveContent(markdown: string) {
+    setContent(markdown);
+    const controller = controllerRef.current;
+    if (!controller) return false;
+    controller.change(markdown);
+    await controller.flush();
+    return controller.lastSaved === markdown;
+  }
+
+  return { content, editorResetVersion, onChange, onSaveContent };
 }
 
 /**
@@ -904,15 +914,16 @@ function AdditionalBlockEditor({
   const propertyId = property.definition.id;
   const initialContent =
     typeof property.value === "string" ? property.value : "";
-  const { content, editorResetVersion, onChange } = useBlockFieldEditor({
-    documentId,
-    propertyId,
-    initialContent,
-    initialRevision: property.blocksField?.revision ?? 0,
-    save: setProperty.mutateAsync,
-    onRevisionConflict: () =>
-      toast.error(t("editor.blocksFieldRevisionConflict")),
-  });
+  const { content, editorResetVersion, onChange, onSaveContent } =
+    useBlockFieldEditor({
+      documentId,
+      propertyId,
+      initialContent,
+      initialRevision: property.blocksField?.revision ?? 0,
+      save: setProperty.mutateAsync,
+      onRevisionConflict: () =>
+        toast.error(t("editor.blocksFieldRevisionConflict")),
+    });
 
   return (
     <VisualEditor
@@ -920,6 +931,7 @@ function AdditionalBlockEditor({
       documentId={documentId}
       content={content}
       onChange={onChange}
+      onSaveContent={onSaveContent}
       editable={canEdit}
       localFileMode
     />

package/corpus/templates/content/app/components/editor/SlashCommandMenu.tsx

@@ -49,6 +49,7 @@ import { cn } from "@/lib/utils";
 import { localContentComponents } from "@/local-components";
 
 import { focusMostRecentEmptyToggleSummary } from "./extensions/NotionExtensions";
+import { createImagePickerId } from "./image-upload";
 import { buildLocalComponentSlashItems } from "./localComponentSlashItems";
 import { MathRenderer } from "./MathRenderer";
 import { buildRegistrySlashItems } from "./registrySlashItems";
@@ -179,7 +180,7 @@ export function insertMediaPlaceholder(
 ) {
   const attrs =
     type === "image"
-      ? { src: null, alt: "" }
+      ? { src: null, alt: "", uploadId: createImagePickerId() }
       : type === "video"
         ? { src: null, sourcePanelOpen: true }
         : { src: null };

package/corpus/templates/content/app/components/editor/VisualEditor.tsx

@@ -95,9 +95,13 @@ import {
   hasImageFiles,
   hasVideoFiles,
   audioUploadErrorMessage,
+  completeImageFileUpload,
+  createMediaUploadId,
+  ImageRenderError,
   imageUploadErrorMessage,
   uploadAudioFile,
   uploadImageFile,
+  waitForRenderedImage,
   uploadVideoFile,
   videoUploadErrorMessage,
 } from "./image-upload";
@@ -1020,6 +1024,7 @@ interface VisualEditorExtensionOptions {
     avatarUrl?: string;
   } | null;
   onImageComment?: (quotedText: string, offsetTop: number) => void;
+  onImageFilePickerRequest?: (request: PendingImagePicker) => void;
   onJoinTitle?: (text: string) => void;
   resolveNotionPageLink?: (notionPageId: string) => NotionPageLink | null;
   onOpenNotionPageLink?: (documentId: string) => void;
@@ -1143,19 +1148,17 @@ function mediaNodeLabel(typeName: MediaNodeType) {
   return "Audio";
 }
 
-function createMediaUploadId(kind: MediaNodeType) {
-  const random =
-    typeof crypto !== "undefined" && "randomUUID" in crypto
-      ? crypto.randomUUID()
-      : Math.random().toString(36).slice(2);
-  return `${kind}-upload-${random}`;
-}
-
 interface PendingMediaUpload {
   file: File;
   uploadId: string;
 }
 
+export interface PendingImagePicker {
+  pickerId: string;
+  position: number;
+  attrs: Record<string, unknown>;
+}
+
 function insertPendingMediaNodes(
   view: EditorView,
   typeName: MediaNodeType,
@@ -1204,7 +1207,7 @@ function updatePendingMediaNode(
       tr = tr.setNodeMarkup(pos, undefined, {
         ...node.attrs,
         ...attrs,
-        uploadId: null,
+        uploadId: attrs.uploadId ?? null,
       });
       found = true;
       return false;
@@ -1218,6 +1221,130 @@ function updatePendingMediaNode(
   return found;
 }
 
+function replacePendingMediaUploadId(
+  view: EditorView,
+  typeName: MediaNodeType,
+  currentUploadId: string,
+  nextUploadId: string,
+) {
+  let found = false;
+  let tr = view.state.tr;
+
+  view.state.doc.descendants((node, pos) => {
+    if (found) return false;
+    if (
+      node.type.name === typeName &&
+      node.attrs.uploadId === currentUploadId
+    ) {
+      tr = tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        uploadId: nextUploadId,
+      });
+      found = true;
+      return false;
+    }
+    return true;
+  });
+
+  if (found) view.dispatch(tr);
+  return found;
+}
+
+function insertImageNodeAtPendingPosition(
+  view: EditorView,
+  request: PendingImagePicker,
+  attrs: Record<string, unknown>,
+  restoreSelection: boolean,
+) {
+  const imageType = view.state.schema.nodes.image;
+  if (!imageType) return false;
+  const position = Math.min(
+    Math.max(request.position, 0),
+    view.state.doc.content.size,
+  );
+  try {
+    let tr = view.state.tr.insert(
+      position,
+      imageType.create({ ...request.attrs, ...attrs }),
+    );
+    if (restoreSelection) {
+      tr = tr.setSelection(NodeSelection.create(tr.doc, position));
+    }
+    view.dispatch(tr.scrollIntoView());
+    if (restoreSelection) view.focus();
+    return true;
+  } catch (error) {
+    console.error("Could not restore the pending image node:", error);
+    return false;
+  }
+}
+
+export function ensurePendingImageUpload(
+  view: EditorView,
+  request: PendingImagePicker,
+  uploadId: string,
+) {
+  if (replacePendingMediaUploadId(view, "image", request.pickerId, uploadId)) {
+    return true;
+  }
+  return insertImageNodeAtPendingPosition(view, request, { uploadId }, false);
+}
+
+export function commitPendingImageUpload(
+  view: EditorView,
+  request: PendingImagePicker,
+  uploadId: string,
+  attrs: Record<string, unknown>,
+) {
+  if (updatePendingMediaNode(view, "image", uploadId, attrs)) return true;
+  return insertImageNodeAtPendingPosition(view, request, attrs, false);
+}
+
+function findPendingImageElement(view: EditorView, uploadId: string) {
+  return (
+    Array.from(view.dom.querySelectorAll<HTMLElement>("[data-image-upload-id]"))
+      .find((element) => element.dataset.imageUploadId === uploadId)
+      ?.querySelector<HTMLImageElement>("img") ?? null
+  );
+}
+
+export function restorePendingImagePicker(
+  view: EditorView,
+  request: PendingImagePicker,
+  currentUploadId = request.pickerId,
+) {
+  let found = false;
+  let nodePosition: number | null = null;
+  let tr = view.state.tr;
+
+  view.state.doc.descendants((node, pos) => {
+    if (found) return false;
+    if (node.type.name === "image" && node.attrs.uploadId === currentUploadId) {
+      tr = tr.setNodeMarkup(pos, undefined, {
+        ...request.attrs,
+        uploadId: null,
+      });
+      nodePosition = pos;
+      found = true;
+      return false;
+    }
+    return true;
+  });
+
+  if (found && nodePosition !== null) {
+    tr = tr.setSelection(NodeSelection.create(tr.doc, nodePosition));
+    view.dispatch(tr);
+    view.focus();
+    return true;
+  }
+  return insertImageNodeAtPendingPosition(
+    view,
+    request,
+    { uploadId: null },
+    true,
+  );
+}
+
 function getVisualEditorPlaceholder({
   editor,
   node,
@@ -1499,6 +1626,7 @@ export function createVisualEditorExtensions({
   localAwareness,
   user,
   onImageComment,
+  onImageFilePickerRequest,
   onJoinTitle,
   resolveNotionPageLink,
   onOpenNotionPageLink,
@@ -1558,6 +1686,7 @@ export function createVisualEditorExtensions({
         HTMLAttributes: { class: "notion-image" },
         documentId,
         onImageComment,
+        onImageFilePickerRequest,
       }),
       VideoNode.configure({
         HTMLAttributes: { class: "notion-video" },
@@ -1880,6 +2009,8 @@ export function VisualEditor({
   const t = useT();
   const [isDraggingMedia, setIsDraggingMedia] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const imageFileInputRef = useRef<HTMLInputElement>(null);
+  const pendingImagePickerRef = useRef<PendingImagePicker | null>(null);
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   const onSaveContentRef = useRef(onSaveContent);
@@ -1895,6 +2026,14 @@ export function VisualEditor({
     },
     [],
   );
+  const onImageFilePickerRequest = useCallback(
+    (request: PendingImagePicker) => {
+      if (pendingImagePickerRef.current) return;
+      pendingImagePickerRef.current = request;
+      imageFileInputRef.current?.click();
+    },
+    [],
+  );
   const resolveNotionPageLink = useCallback((notionPageId: string) => {
     const normalized = notionPageId.replace(/-/g, "").toLowerCase();
     return (
@@ -1946,6 +2085,7 @@ export function VisualEditor({
         localAwareness,
         user,
         onImageComment: onComment,
+        onImageFilePickerRequest,
         onJoinTitle,
         resolveNotionPageLink,
         onOpenNotionPageLink,
@@ -1962,6 +2102,7 @@ export function VisualEditor({
       user?.email,
       user?.color,
       onComment,
+      onImageFilePickerRequest,
       onJoinTitle,
       resolveNotionPageLink,
       onOpenNotionPageLink,
@@ -2014,6 +2155,7 @@ export function VisualEditor({
         if (options?.immediate && onSaveContentRef.current) {
           return onSaveContentRef.current(normalized);
         }
+        if (options?.immediate) return false;
         // Don't persist an empty doc before Collaboration has seeded (would
         // clobber DB content with an empty string). `registerEmitted` records
         // this as the last-emitted value and returns false to skip the save.
@@ -2225,6 +2367,93 @@ export function VisualEditor({
     },
   });
 
+  const handleImageFileInputChange = useCallback(
+    async (event: Event) => {
+      const input = event.currentTarget as HTMLInputElement;
+      const file = input.files?.[0];
+      input.value = "";
+      const request = pendingImagePickerRef.current;
+      pendingImagePickerRef.current = null;
+      if (!editor || !file || !request) return;
+
+      const uploadId = createMediaUploadId("image");
+      if (!ensurePendingImageUpload(editor.view, request, uploadId)) return;
+
+      const toastId = toast.loading(t("editor.media.uploadingImage"));
+      let staged = false;
+      let committed = false;
+      try {
+        await completeImageFileUpload({
+          file,
+          stageAttributes: (src) => {
+            if (editor.isDestroyed) return;
+            staged = commitPendingImageUpload(editor.view, request, uploadId, {
+              src,
+              uploadId,
+            });
+          },
+          waitForRender: async () => {
+            if (!staged) throw new Error(t("empty.genericError"));
+            await waitForRenderedImage(() =>
+              findPendingImageElement(editor.view, uploadId),
+            );
+          },
+          commitAttributes: (src) => {
+            if (editor.isDestroyed) return;
+            committed = commitPendingImageUpload(
+              editor.view,
+              request,
+              uploadId,
+              { src, uploadId: null },
+            );
+          },
+          persistCommittedImage: async () => {
+            if (!committed || editor.isDestroyed) return false;
+            return await persistEditorContent(editor, {
+              immediate: true,
+              userInitiated: true,
+            });
+          },
+        });
+        if (!committed) throw new Error(t("empty.genericError"));
+        toast.success(t("editor.media.imageAdded"), { id: toastId });
+      } catch (error) {
+        if (editor.isDestroyed) {
+          toast.dismiss(toastId);
+          return;
+        }
+        if (!committed) {
+          restorePendingImagePicker(editor.view, request, uploadId);
+        }
+        toast.error(
+          error instanceof ImageRenderError
+            ? t("editor.media.imageBroken")
+            : imageUploadErrorMessage(error),
+          { id: toastId },
+        );
+      }
+    },
+    [editor, t],
+  );
+
+  const handleImageFileInputCancel = useCallback(() => {
+    const request = pendingImagePickerRef.current;
+    pendingImagePickerRef.current = null;
+    if (!editor || !request) return;
+    restorePendingImagePicker(editor.view, request);
+  }, [editor]);
+
+  useEffect(() => {
+    const input = imageFileInputRef.current;
+    if (!input) return;
+    input.addEventListener("change", handleImageFileInputChange);
+    input.addEventListener("cancel", handleImageFileInputCancel);
+    return () => {
+      input.removeEventListener("change", handleImageFileInputChange);
+      input.removeEventListener("cancel", handleImageFileInputCancel);
+    };
+  }, [editor, handleImageFileInputCancel, handleImageFileInputChange]);
+
   // The shared seed / reconcile / lead-client / onUpdate-guard logic, with
   // Content's NFM serializer injected so the editor reads/writes the exact same
   // bytes as before (docToNfm / nfmToDoc / canonicalizeNfm, and the
@@ -2563,6 +2792,13 @@ export function VisualEditor({
       <RegistryBlockDataProvider value={registryBlockDataValue}>
         <EditorContent editor={editor} />
       </RegistryBlockDataProvider>
+      <input
+        ref={imageFileInputRef}
+        type="file"
+        className="hidden"
+        tabIndex={-1}
+        aria-hidden="true"
+      />
     </div>
   );
 }