@agent-native/core 0.123.1 → 0.123.2

package/corpus/README.md

@@ -30,4 +30,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 - core files: 1735
 - toolkit files: 160
-- template files: 6751
+- template files: 6778

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @agent-native/core
 
+## 0.123.2
+
+### Patch Changes
+
+- 14818b6: Route Builder authorization callbacks for Netlify previews through the immutable deployment URL while returning popup status to the visible preview.
+- Updated dependencies [14818b6]
+  - @agent-native/toolkit@0.10.8
+
 ## 0.123.1
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.123.1",
+  "version": "0.123.2",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/core/src/deploy/build.ts

@@ -3778,6 +3778,14 @@ export default bundle;
       "virtual:agents-bundle": agentsBundleModuleSource,
     },
     replace: {
+      // Netlify exposes DEPLOY_ID only while building. Embed it into the Nitro
+      // function so preview OAuth relays can target this immutable deployment
+      // even though the value is unavailable in the function runtime.
+      "process.env.AGENT_NATIVE_BUILD_ID": JSON.stringify(
+        process.env.DEPLOY_ID?.trim() ||
+          process.env.AGENT_NATIVE_BUILD_ID?.trim() ||
+          "",
+      ),
       "process.env.AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID": JSON.stringify(
         process.env.GA_MEASUREMENT_ID?.trim() || "",
       ),

package/corpus/core/src/server/builder-browser.ts

@@ -36,6 +36,10 @@ const BUILDER_RELAY_PURPOSE = "builder-preview-callback-relay";
 const BUILDER_RELAY_STATE_VERSION = 1;
 const BUILDER_RELAY_TTL_MS = 10 * 60 * 1000;
 const BUILDER_RELAY_REQUEST_SKEW_MS = 2 * 60 * 1000;
+const IMMUTABLE_NETLIFY_RELAY_HOST =
+  /^(?<deploy>[a-f0-9]{24})--(?<site>[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)\.netlify\.app$/;
+const NETLIFY_DEPLOY_PREVIEW_HOST =
+  /^deploy-preview-\d+--(?<site>[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)\.netlify\.app$/;
 
 export interface BuilderPreviewRelayState {
   v: 1;
@@ -165,6 +169,45 @@ export function isTrustedBuilderRelayTargetOrigin(value: string): boolean {
     )
   );
 }
+
+/**
+ * Netlify's deploy-preview alias is convenient for people but mutable, so it
+ * must never be the signed relay destination. The deploy builder embeds
+ * Netlify's DEPLOY_ID into the Nitro server bundle, while SITE_NAME remains
+ * available to Functions at runtime. Use that pair only when it
+ * identifies the same site as the visible preview alias; otherwise preserve
+ * the visible origin so callback validation fails closed.
+ */
+export function resolveBuilderPreviewRelayTargetOrigin(
+  previewOrigin: string,
+): string {
+  let previewUrl: URL;
+  try {
+    previewUrl = new URL(previewOrigin);
+  } catch {
+    return previewOrigin;
+  }
+  const previewMatch = NETLIFY_DEPLOY_PREVIEW_HOST.exec(
+    previewUrl.hostname.toLowerCase(),
+  );
+  if (!previewMatch?.groups?.site) return previewOrigin;
+
+  const buildId = process.env.AGENT_NATIVE_BUILD_ID?.trim().toLowerCase();
+  const siteName = process.env.SITE_NAME?.trim().toLowerCase();
+  if (
+    !buildId ||
+    !siteName ||
+    !/^[a-f0-9]{24}$/.test(buildId) ||
+    siteName !== previewMatch.groups.site
+  ) {
+    return previewOrigin;
+  }
+
+  const immutableOrigin = `https://${buildId}--${siteName}.netlify.app`;
+  return IMMUTABLE_NETLIFY_RELAY_HOST.test(new URL(immutableOrigin).hostname)
+    ? immutableOrigin
+    : previewOrigin;
+}
 export function signBuilderPreviewRelayState(input: {
   ownerEmail: string;
   targetOrigin: string;
@@ -1228,6 +1271,39 @@ export function resolveSafePreviewUrl(
   return getBuilderBrowserOriginForEvent(event);
 }
 
+export function resolveBuilderPreviewRelayParentOrigin(options: {
+  openerOrigin?: string | null;
+  targetOrigin: string;
+}): string {
+  if (!options.openerOrigin) return options.targetOrigin;
+  let openerUrl: URL;
+  let targetUrl: URL;
+  try {
+    openerUrl = new URL(options.openerOrigin);
+    targetUrl = new URL(options.targetOrigin);
+  } catch {
+    return options.targetOrigin;
+  }
+  if (
+    openerUrl.origin !== options.openerOrigin ||
+    !isSafeBuilderRelayTargetOrigin(openerUrl.origin)
+  ) {
+    return options.targetOrigin;
+  }
+  if (openerUrl.origin === targetUrl.origin) return openerUrl.origin;
+
+  const openerMatch = NETLIFY_DEPLOY_PREVIEW_HOST.exec(
+    openerUrl.hostname.toLowerCase(),
+  );
+  const targetMatch = IMMUTABLE_NETLIFY_RELAY_HOST.exec(
+    targetUrl.hostname.toLowerCase(),
+  );
+  return openerMatch?.groups?.site &&
+    openerMatch.groups.site === targetMatch?.groups?.site
+    ? openerUrl.origin
+    : options.targetOrigin;
+}
+
 export function resolveBuilderCallbackReturnUrl(options: {
   event: H3Event;
   openerOrigin?: string | null;

package/corpus/core/src/server/core-routes-plugin.ts

@@ -129,6 +129,8 @@ import {
   resolveBuilderCallbackReturnUrl,
   getBuilderBrowserStatusForEvent,
   resolveBuilderBranchProjectId,
+  resolveBuilderPreviewRelayParentOrigin,
+  resolveBuilderPreviewRelayTargetOrigin,
   resolveSafePreviewUrl,
   runBuilderAgent,
   signBuilderCallbackState,
@@ -2225,7 +2227,8 @@ export function createCoreRoutesPlugin(
             try {
               relay = signBuilderPreviewRelayState({
                 ownerEmail,
-                targetOrigin: previewOrigin,
+                targetOrigin:
+                  resolveBuilderPreviewRelayTargetOrigin(previewOrigin),
                 basePath: getAppBasePath(),
               });
             } catch (err) {
@@ -2598,6 +2601,13 @@ export function createCoreRoutesPlugin(
               );
             }
 
+            const relayOpenerOrigin =
+              requestUrl.searchParams.get(BUILDER_OPENER_PARAM);
+            const relayParentOrigin = resolveBuilderPreviewRelayParentOrigin({
+              openerOrigin: relayOpenerOrigin,
+              targetOrigin: relayPayload.targetOrigin,
+            });
+
             const privateKey = requestUrl.searchParams.get("p-key");
             const publicKey = requestUrl.searchParams.get("api-key");
             if (!privateKey || !publicKey) {
@@ -2609,7 +2619,7 @@ export function createCoreRoutesPlugin(
               );
               return createBuilderBrowserCallbackErrorPage(
                 "Builder didn't return credentials. Restart the connect flow from settings.",
-                { parentOrigin: relayPayload.targetOrigin },
+                { parentOrigin: relayParentOrigin },
               );
             }
 
@@ -2665,7 +2675,7 @@ export function createCoreRoutesPlugin(
                 "text/html; charset=utf-8",
               );
               return createBuilderBrowserCallbackErrorPage(message, {
-                parentOrigin: relayPayload.targetOrigin,
+                parentOrigin: relayParentOrigin,
               });
             }
 
@@ -2675,8 +2685,8 @@ export function createCoreRoutesPlugin(
               "text/html; charset=utf-8",
             );
             return createBuilderBrowserCallbackPage(
-              `${relayPayload.targetOrigin}${relayPayload.basePath || "/"}`,
-              { parentOrigin: relayPayload.targetOrigin },
+              `${relayParentOrigin}${relayPayload.basePath || "/"}`,
+              { parentOrigin: relayParentOrigin },
             );
           }
 

package/corpus/templates/assets/app/global.css

@@ -207,10 +207,6 @@
     grid-template-columns: minmax(0, 1fr) 284px;
   }
 
-  .assets-live-candidates-grid {
-    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
-  }
-
   .assets-brand-kit-settings-grid {
     grid-template-columns: minmax(0, 1fr) 320px;
   }

package/corpus/templates/assets/app/routes/brand-kits.$id.tsx

@@ -1521,6 +1521,7 @@ type LaneGalleryItem = {
   thumbnail: ReactNode; // i18n-ignore structural preview slot name
   menu?: ReactNode;
   primaryActions?: ReactNode;
+  headerActions?: ReactNode;
   onToggle?: (checked: boolean) => void;
 };
 
@@ -3909,6 +3910,89 @@ export function LiveCandidatesStage({
     );
   }
 
+  function candidateHeaderActions({
+    canUseCandidate,
+    saving,
+    promoting,
+    candidateLibraryId,
+    onSaveCandidate,
+    onAddToReferences,
+    onUseCandidate,
+    onDismiss,
+  }: {
+    canUseCandidate: boolean;
+    saving?: boolean;
+    promoting?: boolean;
+    candidateLibraryId?: string | null;
+    onSaveCandidate?: (folderId: string | null) => void;
+    onAddToReferences?: () => void;
+    onUseCandidate?: () => void;
+    onDismiss: () => void;
+  }) {
+    const busy = saving || promoting || dismissing;
+    const actionLibraryId = candidateLibraryId || libraryId;
+    const candidateFolders =
+      foldersByLibraryId[actionLibraryId] ??
+      (actionLibraryId === libraryId ? folders : []);
+    if (!canUseCandidate) {
+      return (
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7 px-2 text-xs text-destructive hover:bg-destructive/10 hover:text-destructive"
+          onClick={onDismiss}
+          disabled={busy}
+        >
+          {t("library.dismiss")}
+        </Button>
+      );
+    }
+    return (
+      <div className="flex flex-wrap items-center gap-1.5">
+        {onUseCandidate ? (
+          <Button
+            size="sm"
+            className="h-7 px-2 text-xs"
+            onClick={onUseCandidate}
+            disabled={busy}
+          >
+            {t("library.useCandidate")}
+          </Button>
+        ) : null}
+        <CandidateSaveMenu
+          libraryId={actionLibraryId}
+          folders={candidateFolders}
+          allowCreateFolder={allowCreateFolder}
+          saving={saving}
+          disabled={busy}
+          onSave={(folderId) => onSaveCandidate?.(folderId)}
+        />
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7 px-2 text-xs"
+          onClick={onAddToReferences}
+          disabled={busy}
+        >
+          {promoting ? (
+            <Spinner className="h-3.5 w-3.5" />
+          ) : (
+            t("library.addToReferences")
+          )}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 px-2 text-xs text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+          onClick={onDismiss}
+          disabled={busy}
+        >
+          {t("library.dismiss")}
+        </Button>
+      </div>
+    );
+  }
+
   function slotItem(slot: VariantSlot): LaneGalleryItem {
     const isFailed = slot.status === "failed";
     const canUseCandidate = slot.status === "ready" && Boolean(slot.assetId);
@@ -3953,6 +4037,21 @@ export function LiveCandidatesStage({
             slot,
           }),
       }),
+      headerActions: candidateHeaderActions({
+        canUseCandidate,
+        saving,
+        promoting,
+        candidateLibraryId: libraryId,
+        onSaveCandidate: (folderId) => onSave(slot, folderId),
+        onAddToReferences: () => onMoveToReferences(slot),
+        onUseCandidate: onUse ? () => onUse(slot) : undefined,
+        onDismiss: () =>
+          setDismissTarget({
+            kind: "slot",
+            title,
+            slot,
+          }),
+      }),
     };
   }
 
@@ -3997,6 +4096,21 @@ export function LiveCandidatesStage({
             asset,
           }),
       }),
+      headerActions: candidateHeaderActions({
+        canUseCandidate: true,
+        saving,
+        promoting,
+        candidateLibraryId: asset.libraryId,
+        onSaveCandidate: (folderId) => onSaveDraft(asset, folderId),
+        onAddToReferences: () => onMoveDraftToReferences(asset),
+        onUseCandidate: onUseDraft ? () => onUseDraft(asset) : undefined,
+        onDismiss: () =>
+          setDismissTarget({
+            kind: "asset",
+            title: assetDisplayTitle(asset),
+            asset,
+          }),
+      }),
     };
   }
 
@@ -4063,154 +4177,103 @@ export function LiveCandidatesStage({
       </AlertDialog>
 
       <section className="min-w-0 overflow-hidden rounded-lg border border-border bg-background">
-        <div className="flex min-w-0 items-center justify-between gap-3 border-b border-border px-3 py-2.5 sm:px-4">
-          <div className="flex min-w-0 flex-1 items-center">
-            <h3 className="shrink-0 text-sm font-semibold">
-              {t("library.candidates")}
-            </h3>
-          </div>
-          <div className="flex shrink-0 items-center gap-1.5">
-            <LiveCandidatesActions
-              slots={slots}
-              draftAssets={draftAssets}
-              libraryId={libraryId}
-            />
-          </div>
-        </div>
-        <div className="assets-live-candidates-grid grid min-w-0">
-          <div className="min-w-0 bg-muted/10 p-2.5 sm:p-3">
-            <div
-              className={[
-                "group relative overflow-hidden rounded-lg border border-border bg-background shadow-sm",
-                activeItem?.busy ? "opacity-80" : "",
-              ].join(" ")}
-              aria-busy={activeItem?.busy}
-            >
-              <div className="h-36 bg-muted/30 sm:h-44 lg:h-56 2xl:h-64">
-                {activeItem?.onOpen ? (
-                  <button
-                    type="button"
-                    onClick={activeItem.onOpen}
-                    className="block h-full w-full text-left"
-                  >
-                    {activeItem.preview}
-                  </button>
-                ) : activeItem?.href ? (
-                  <Link to={activeItem.href} className="block h-full w-full">
-                    {activeItem.preview}
-                  </Link>
-                ) : (
-                  activeItem?.preview
-                )}
-              </div>
-              {activeItem?.busy ? (
-                <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background/20">
-                  <Spinner className="h-5 w-5" />
-                </div>
-              ) : null}
-              {activeItem?.onOpen ? (
-                <Button
-                  variant="secondary"
-                  size="sm"
-                  className="absolute right-2 top-2 h-8 gap-1.5 bg-background/85 px-2.5 text-xs opacity-0 shadow-sm backdrop-blur transition group-hover:opacity-100 focus-within:opacity-100"
-                  onClick={activeItem.onOpen}
-                >
-                  <IconArrowUpRight className="h-3.5 w-3.5" />
-                  {t("library.details")}
-                </Button>
-              ) : activeItem?.href ? (
-                <Button
-                  asChild
-                  variant="secondary"
-                  size="sm"
-                  className="absolute right-2 top-2 h-8 gap-1.5 bg-background/85 px-2.5 text-xs opacity-0 shadow-sm backdrop-blur transition group-hover:opacity-100 focus-within:opacity-100"
-                >
-                  <Link to={activeItem.href}>
-                    <IconArrowUpRight className="h-3.5 w-3.5" />
-                    {t("library.details")}
-                  </Link>
-                </Button>
-              ) : null}
-            </div>
-            <div className="mt-2.5 flex gap-2 overflow-x-auto pb-1">
-              {items.map((item) => {
-                const active = item.id === activeItem?.id;
-                return (
-                  <button
-                    key={item.id}
-                    type="button"
-                    onClick={() => setActiveItemId(item.id)}
-                    className={[
-                      "group relative h-16 w-24 shrink-0 overflow-hidden rounded-md border bg-background transition",
-                      active
-                        ? "border-primary ring-2 ring-primary/25"
-                        : "border-border/80 hover:border-foreground/30",
-                    ].join(" ")}
-                    aria-label={t("library.showCandidate", {
-                      title: item.title,
-                    })}
-                    aria-pressed={active}
-                  >
-                    {item.thumbnail}
-                    <span className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background/90 to-transparent" />
-                    {item.busy && item.showBusyOverlay !== false ? (
-                      <span className="absolute right-1.5 top-1.5 rounded-full bg-background/90 p-1 shadow-sm">
-                        <Spinner className="h-3 w-3" />
-                      </span>
-                    ) : null}
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-          <aside className="flex min-w-0 flex-col justify-between gap-3 border-t border-border bg-background p-3 lg:border-l lg:border-t-0 lg:p-4">
-            <div className="min-w-0 space-y-3">
-              <div className="min-w-0">
-                <div className="flex min-w-0 flex-wrap items-center gap-1.5">
-                  {activeItem?.status ? (
-                    <CandidateStatusPill status={activeItem.status} />
-                  ) : null}
-                  {activeItem?.metadata ? (
-                    <Badge
-                      variant="outline"
-                      className="h-6 max-w-full rounded-full px-2 text-[11px]"
-                    >
-                      {activeItem.metadata}
-                    </Badge>
-                  ) : null}
-                </div>
-                <div className="mt-2 truncate text-sm font-semibold">
-                  {activeItem?.title}
-                </div>
-                {activeItem?.subtitle ? (
-                  <div className="mt-1 truncate text-xs text-muted-foreground">
-                    {activeItem.subtitle}
-                  </div>
-                ) : null}
-              </div>
-              {activeItem?.primaryActions ? (
-                <div>{activeItem.primaryActions}</div>
-              ) : null}
-            </div>
+        <div className="flex min-w-0 flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2 sm:px-4">
+          <h3 className="shrink-0 text-sm font-semibold">
+            {t("library.candidates")}
+          </h3>
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
+            {activeItem?.headerActions}
             {activeItem?.onOpen ? (
               <Button
                 variant="ghost"
                 size="sm"
-                className="gap-1.5"
+                className="h-7 gap-1 px-2 text-xs"
                 onClick={activeItem.onOpen}
               >
                 <IconArrowUpRight className="h-3.5 w-3.5" />
                 {t("library.openDetails")}
               </Button>
             ) : activeItem?.href ? (
-              <Button asChild variant="ghost" size="sm" className="gap-1.5">
+              <Button
+                asChild
+                variant="ghost"
+                size="sm"
+                className="h-7 gap-1 px-2 text-xs"
+              >
                 <Link to={activeItem.href}>
                   <IconArrowUpRight className="h-3.5 w-3.5" />
                   {t("library.openDetails")}
                 </Link>
               </Button>
             ) : null}
-          </aside>
+            <LiveCandidatesActions
+              slots={slots}
+              draftAssets={draftAssets}
+              libraryId={libraryId}
+            />
+          </div>
+        </div>
+        <div className="min-w-0 bg-muted/10 p-2.5 sm:p-3">
+          <div
+            className={[
+              "group relative overflow-hidden rounded-lg border border-border bg-background shadow-sm",
+              activeItem?.busy ? "opacity-80" : "",
+            ].join(" ")}
+            aria-busy={activeItem?.busy}
+          >
+            <div className="h-[min(60vh,30rem)] overflow-hidden bg-muted/30">
+              {activeItem?.onOpen ? (
+                <button
+                  type="button"
+                  onClick={activeItem.onOpen}
+                  className="block h-full w-full text-left"
+                >
+                  {activeItem.preview}
+                </button>
+              ) : activeItem?.href ? (
+                <Link to={activeItem.href} className="block h-full w-full">
+                  {activeItem.preview}
+                </Link>
+              ) : (
+                activeItem?.preview
+              )}
+            </div>
+            {activeItem?.busy ? (
+              <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background/20">
+                <Spinner className="h-5 w-5" />
+              </div>
+            ) : null}
+          </div>
+          <div className="mt-2.5 flex gap-2 overflow-x-auto pb-1">
+            {items.map((item) => {
+              const active = item.id === activeItem?.id;
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  onClick={() => setActiveItemId(item.id)}
+                  className={[
+                    "group relative h-16 w-24 shrink-0 overflow-hidden rounded-md border bg-background transition",
+                    active
+                      ? "border-primary ring-2 ring-primary/25"
+                      : "border-border/80 hover:border-foreground/30",
+                  ].join(" ")}
+                  aria-label={t("library.showCandidate", {
+                    title: item.title,
+                  })}
+                  aria-pressed={active}
+                >
+                  {item.thumbnail}
+                  <span className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-background/90 to-transparent" />
+                  {item.busy && item.showBusyOverlay !== false ? (
+                    <span className="absolute right-1.5 top-1.5 rounded-full bg-background/90 p-1 shadow-sm">
+                      <Spinner className="h-3 w-3" />
+                    </span>
+                  ) : null}
+                </button>
+              );
+            })}
+          </div>
         </div>
       </section>
 
@@ -4223,41 +4286,6 @@ export function LiveCandidatesStage({
   );
 }
 
-function CandidateStatusPill({ status }: { status: string }) {
-  const t = useT();
-  const normalized = status.toLowerCase();
-  const label =
-    normalized === "pending"
-      ? t("library.generating")
-      : normalized === "ready"
-        ? t("library.ready")
-        : normalized === "failed"
-          ? t("library.failed")
-          : normalized === "draft"
-            ? t("library.draft")
-            : status;
-  const className =
-    normalized === "ready"
-      ? "border-primary/30 bg-primary/10 text-primary"
-      : normalized === "failed"
-        ? "border-destructive/30 bg-destructive/10 text-destructive"
-        : normalized === "pending"
-          ? "border-border bg-muted/70 text-muted-foreground"
-          : "border-border bg-background text-muted-foreground";
-
-  return (
-    <span
-      className={[
-        "inline-flex h-6 max-w-full items-center gap-1.5 rounded-full border px-2 text-[11px] font-medium",
-        className,
-      ].join(" ")}
-    >
-      <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-current" />
-      <span className="truncate">{label}</span>
-    </span>
-  );
-}
-
 function VariantPreview({
   slot,
   fit = "cover",

package/corpus/templates/assets/changelog/2026-07-23-drafts-preview-panel-now-fills-the-full-width-with-a-large-p.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-23
+---
+
+Drafts preview panel now fills the full width with a large preview area; save, add to references, and dismiss actions moved to the candidates header for all brand kits

package/corpus/templates/content/actions/_builder-cms-source-adapter.ts

@@ -35,6 +35,7 @@ export interface ExistingBuilderSourceRowIdentity {
   sourceRowId: string;
   sourceQualifiedId: string;
   sourceDisplayKey: string;
+  provenance?: string | null;
   lastSourceUpdatedAt: string | null;
   sourceValuesJson?: string | null;
 }