@agent-native/core 0.72.3 → 0.73.0

package/corpus/templates/design/actions/connect-assets-mcp.ts

@@ -0,0 +1,131 @@
+import { defineAction } from "@agent-native/core";
+import { getDbExec } from "@agent-native/core/db";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server/request-context";
+import {
+  addFirstPartyRemoteServer,
+  isFirstPartyRemoteEndpointTrusted,
+  listRemoteServers,
+  removeRemoteServer,
+} from "@agent-native/core/mcp-client";
+import { fetchOrgApps } from "@agent-native/core/mcp";
+import { refreshGlobalMcpManager } from "@agent-native/core/server";
+import { z } from "zod";
+
+const SERVER_NAME = "assets";
+
+function assetsMcpUrl(appUrl: string): string {
+  return `${appUrl.replace(/\/+$/, "")}/_agent-native/mcp`;
+}
+
+function sameEndpoint(a: string, b: string): boolean {
+  try {
+    const urlA = new URL(a);
+    const urlB = new URL(b);
+    return (
+      urlA.origin === urlB.origin &&
+      urlA.pathname.replace(/\/+$/, "") === urlB.pathname.replace(/\/+$/, "")
+    );
+  } catch {
+    return a.replace(/\/+$/, "") === b.replace(/\/+$/, "");
+  }
+}
+
+async function listAssetsServers(orgId: string) {
+  const servers = await listRemoteServers("org", orgId);
+  return servers.filter(
+    (server) => server.name === SERVER_NAME && server.firstParty === true,
+  );
+}
+
+async function assertCanManageOrgMcp(orgId: string, userEmail: string) {
+  const result = await getDbExec().execute({
+    sql: `SELECT role FROM org_members WHERE org_id = ? AND LOWER(email) = ? LIMIT 1`,
+    args: [orgId, userEmail.toLowerCase()],
+  });
+  const role = String(
+    (result.rows[0] as { role?: unknown } | undefined)?.role,
+  ).toLowerCase();
+  if (role !== "owner" && role !== "admin") {
+    throw new Error(
+      "Only organization owners and admins can connect org-scoped MCP servers.",
+    );
+  }
+}
+
+export default defineAction({
+  description:
+    "Connect the first-party Assets MCP server for the active Design organization. Use this explicit setup action instead of mutating onboarding status.",
+  schema: z.object({}),
+  publicAgent: { expose: true, readOnly: false, requiresAuth: true },
+  run: async () => {
+    const userEmail = getRequestUserEmail();
+    const orgId = getRequestOrgId();
+    if (!userEmail || !orgId) {
+      throw new Error("You must be signed in to an organization.");
+    }
+    await assertCanManageOrgMcp(orgId, userEmail);
+
+    const apps = await fetchOrgApps({ selfId: "design" });
+    const assets = apps.find((app) => app.id === "assets");
+    if (!assets?.url) {
+      throw new Error("Could not find the Assets app in this organization.");
+    }
+    const currentUrl = assetsMcpUrl(assets.url);
+
+    const existingServers = await listAssetsServers(orgId);
+    for (const existing of existingServers) {
+      const trust = await isFirstPartyRemoteEndpointTrusted(
+        orgId,
+        "assets",
+        existing.url,
+      );
+      if (trust.ok && sameEndpoint(existing.url, currentUrl)) {
+        const managerRefreshed = await refreshGlobalMcpManager();
+        return {
+          ok: true,
+          connected: true,
+          server: existing,
+          managerRefreshed,
+          message: "Assets MCP is already connected for this organization.",
+        };
+      }
+    }
+
+    // Verify the target endpoint is trusted before removing any existing
+    // server, so a transient org-directory/auth failure cannot turn a reconnect
+    // into a full disconnect for the org.
+    const targetTrust = await isFirstPartyRemoteEndpointTrusted(
+      orgId,
+      "assets",
+      currentUrl,
+    );
+    if (!targetTrust.ok) {
+      throw new Error(targetTrust.error);
+    }
+
+    for (const existing of existingServers) {
+      await removeRemoteServer("org", orgId, existing.id);
+    }
+
+    const result = await addFirstPartyRemoteServer(orgId, {
+      appId: "assets",
+      name: SERVER_NAME,
+      url: currentUrl,
+      description: "First-party Assets MCP server for on-brand media.",
+    });
+    if (result.ok !== true) {
+      throw new Error(result.error);
+    }
+    const managerRefreshed = await refreshGlobalMcpManager();
+    return {
+      ok: true,
+      connected: true,
+      server: result.server,
+      managerRefreshed,
+      message: "Assets MCP is connected for this organization.",
+    };
+  },
+});

package/corpus/templates/design/actions/insert-asset.ts

@@ -0,0 +1,219 @@
+import { defineAction } from "@agent-native/core";
+import { readAppStateForCurrentTab } from "@agent-native/core/application-state";
+import {
+  hasCollabState,
+  getText,
+  applyText,
+  seedFromText,
+} from "@agent-native/core/collab";
+import { accessFilter, assertAccess } from "@agent-native/core/sharing";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+import { getDb, schema } from "../server/db/index.js";
+
+const schemaInput = z.object({
+  assetUrl: z
+    .string()
+    .url()
+    .refine((value) => {
+      try {
+        const protocol = new URL(value).protocol;
+        return protocol === "http:" || protocol === "https:";
+      } catch {
+        return false;
+      }
+    }, "Asset URL must use http or https.")
+    .describe("Chosen asset image/video URL."),
+  assetId: z.string().optional().describe("Chosen Assets asset id."),
+  title: z.string().optional().describe("Human-readable asset title."),
+  altText: z.string().optional().describe("Alt text for an image asset."),
+  mediaType: z.enum(["image", "video"]).default("image"),
+  designId: z
+    .string()
+    .optional()
+    .describe("Design id. Defaults to the current editor navigation state."),
+  fileId: z
+    .string()
+    .optional()
+    .describe("Design file id. Defaults to the active editor file."),
+  ownerId: z
+    .string()
+    .optional()
+    .describe("Design editor selection owner token from current screen state."),
+});
+
+function stringFromState(state: unknown, key: string): string | undefined {
+  if (!state || typeof state !== "object") return undefined;
+  const value = (state as Record<string, unknown>)[key];
+  return typeof value === "string" && value ? value : undefined;
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function insertBeforeClosingTag(
+  html: string,
+  closingTag: "main" | "body",
+  snippet: string,
+): string | null {
+  const pattern = new RegExp(`</${closingTag}>`, "i");
+  if (!pattern.test(html)) return null;
+  return html.replace(pattern, `${snippet}\n</${closingTag}>`);
+}
+
+function appendAssetMarkup(
+  html: string,
+  args: z.infer<typeof schemaInput>,
+): string {
+  const label = args.title?.trim() || args.altText?.trim() || "Generated asset";
+  const escapedUrl = escapeHtml(args.assetUrl);
+  const escapedLabel = escapeHtml(label);
+  const assetIdAttr = args.assetId
+    ? ` data-asset-id="${escapeHtml(args.assetId)}"`
+    : "";
+  const media =
+    args.mediaType === "video"
+      ? `<video src="${escapedUrl}" controls class="w-full rounded-xl object-cover"></video>`
+      : `<img src="${escapedUrl}" alt="${escapeHtml(args.altText?.trim() || label)}" class="w-full rounded-xl object-cover" />`;
+  const snippet = `
+    <section class="mx-auto my-8 max-w-5xl px-4" data-agent-native-asset${assetIdAttr}>
+      <figure class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+        ${media}
+        <figcaption class="px-4 py-3 text-sm text-slate-600">${escapedLabel}</figcaption>
+      </figure>
+    </section>`;
+
+  return (
+    insertBeforeClosingTag(html, "main", snippet) ??
+    insertBeforeClosingTag(html, "body", snippet) ??
+    `${html}\n${snippet}`
+  );
+}
+
+async function resolveTarget(args: z.infer<typeof schemaInput>) {
+  const [navigation, selection] = await Promise.all([
+    readAppStateForCurrentTab("navigation").catch(() => null),
+    readAppStateForCurrentTab("design-selection").catch(() => null),
+  ]);
+  const navigationDesignId = stringFromState(navigation, "designId");
+  const selectionDesignId = stringFromState(selection, "designId");
+  const selectionOwnerId = stringFromState(selection, "ownerId");
+  const selectionMatchesOwner =
+    Boolean(args.ownerId) && selectionOwnerId === args.ownerId;
+  // Prefer the owner-matched selection over generic navigation so a tab-scoped
+  // picker handoff lands in the design that produced it.
+  const designId =
+    args.designId ??
+    (selectionMatchesOwner ? selectionDesignId : undefined) ??
+    navigationDesignId;
+  const canUseSelection =
+    selectionMatchesOwner &&
+    Boolean(designId) &&
+    selectionDesignId === designId;
+  const navigationActiveFileId =
+    designId && navigationDesignId === designId
+      ? stringFromState(navigation, "activeFileId")
+      : undefined;
+  return {
+    designId,
+    fileId:
+      args.fileId ??
+      (canUseSelection
+        ? stringFromState(selection, "activeFileId")
+        : undefined) ??
+      navigationActiveFileId,
+  };
+}
+
+function isHtmlFile(file: {
+  fileType: string | null;
+  filename: string | null;
+}): boolean {
+  return file.fileType === "html" || file.filename?.endsWith(".html") === true;
+}
+
+export default defineAction({
+  description:
+    "Insert a chosen Assets image or video URL into a Design file. Use this after the Assets picker returns chooseAsset/chooseImage context; pass designId/fileId directly when known, or pass ownerId from view-screen.designSelection when targeting the current editor selection.",
+  schema: schemaInput,
+  publicAgent: { expose: true, readOnly: false, requiresAuth: true },
+  run: async (args) => {
+    const target = await resolveTarget(args);
+    if (!target.designId) {
+      throw new Error(
+        "No active design found. Open a design or pass designId.",
+      );
+    }
+
+    const db = getDb();
+    const files = await db
+      .select({
+        id: schema.designFiles.id,
+        designId: schema.designFiles.designId,
+        filename: schema.designFiles.filename,
+        fileType: schema.designFiles.fileType,
+        content: schema.designFiles.content,
+      })
+      .from(schema.designFiles)
+      .innerJoin(
+        schema.designs,
+        eq(schema.designFiles.designId, schema.designs.id),
+      )
+      .where(
+        and(
+          eq(schema.designFiles.designId, target.designId),
+          accessFilter(schema.designs, schema.designShares),
+        ),
+      );
+    const requestedFile = files.find(
+      (candidate) => candidate.id === target.fileId,
+    );
+    const file =
+      requestedFile && isHtmlFile(requestedFile)
+        ? requestedFile
+        : (files.find(isHtmlFile) ?? null);
+    if (!file) throw new Error("No editable HTML design file found.");
+    await assertAccess("design", file.designId, "editor");
+
+    let base = file.content ?? "";
+    try {
+      if (await hasCollabState(file.id)) {
+        const live = await getText(file.id, "content");
+        if (typeof live === "string") base = live;
+      }
+    } catch {
+      // Collab read is best-effort; fall back to stored content.
+    }
+
+    const content = appendAssetMarkup(base, args);
+    const now = new Date().toISOString();
+    await db
+      .update(schema.designFiles)
+      .set({ content, updatedAt: now })
+      .where(eq(schema.designFiles.id, file.id));
+    await db
+      .update(schema.designs)
+      .set({ updatedAt: now })
+      .where(eq(schema.designs.id, file.designId));
+
+    if (await hasCollabState(file.id)) {
+      await applyText(file.id, content, "content", "agent");
+    } else {
+      await seedFromText(file.id, content);
+    }
+
+    return {
+      designId: file.designId,
+      fileId: file.id,
+      filename: file.filename,
+      inserted: true,
+      assetId: args.assetId ?? null,
+      assetUrl: args.assetUrl,
+    };
+  },
+});

package/corpus/templates/design/actions/view-screen.ts

@@ -20,9 +20,10 @@ export default defineAction({
   schema: z.object({}),
   http: false,
   run: async () => {
-    const [navigation, designVariants] = await Promise.all([
+    const [navigation, designVariants, designSelection] = await Promise.all([
       readAppStateForCurrentTab("navigation"),
       readAppState("design-variants"),
+      readAppStateForCurrentTab("design-selection"),
     ]);
     const designId =
       navigation &&
@@ -37,6 +38,7 @@ export default defineAction({
 
     const screen: Record<string, unknown> = {};
     if (navigation) screen.navigation = navigation;
+    if (designSelection) screen.designSelection = designSelection;
     if (showQuestions) {
       screen.pendingQuestions = showQuestions;
       screen.note =

package/corpus/templates/design/app/components/editor/PromptDialog.tsx

@@ -398,7 +398,7 @@ export default function PromptPopover({
         return;
       }
 
-      if (name !== "chooseImage") return;
+      if (name !== "chooseImage" && name !== "chooseAsset") return;
       const url = pickedAssetImageSource(payload);
       if (!url) {
         toast.error("Assets did not return an image URL.");

package/corpus/templates/design/app/pages/DesignEditor.tsx

@@ -43,6 +43,9 @@ import {
   ShareButton,
   isEmbedAuthActive,
   sendToAgentChat,
+  getBrowserTabId,
+  readClientAppState,
+  setClientAppState,
   useReconciledState,
   usePresence,
   useFollowUser,
@@ -113,6 +116,16 @@ import { cn } from "@/lib/utils";
 import { toast } from "sonner";
 
 const TAB_ID = generateTabId();
+
+// Selection is tab-scoped (like navigation) so a second editor tab cannot
+// overwrite this tab's selection context. The global key is mirrored as a
+// fallback for CLI/external agents that do not send a browser tab id.
+function designSelectionStateKeys(): string[] {
+  const tabId = getBrowserTabId();
+  return tabId
+    ? [`design-selection:${tabId}`, "design-selection"]
+    : ["design-selection"];
+}
 // Stable symbol used as the Yjs transaction origin for all local user edits.
 // The UndoManager tracks only this origin so remote peers' and the agent's
 // edits are never undone by this user's Cmd+Z.
@@ -317,6 +330,8 @@ export default function DesignEditor() {
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
   const undoManagerRef = useRef<Y.UndoManager | null>(null);
+  const persistedSelectionStateRef = useRef<string | null>(null);
+  const designSelectionOwnerIdRef = useRef(`${TAB_ID}:${generateTabId()}`);
   const [tweakSaveActive, setTweakSaveActive] = useState(false);
   // Shared visual-editor modes (overlays the iframe). drawMode toggles the
   // pencil overlay, pinMode lets the user drop comment pins. They're
@@ -340,6 +355,26 @@ export default function DesignEditor() {
   const [promptDesignSystemId, setPromptDesignSystemId] = useState<
     string | null | undefined
   >(undefined);
+
+  useEffect(() => {
+    return () => {
+      void (async () => {
+        const keys = designSelectionStateKeys();
+        const current = await readClientAppState(keys[0]).catch(() => null);
+        const ownerId =
+          current && typeof current === "object"
+            ? (current as { ownerId?: unknown }).ownerId
+            : undefined;
+        if (ownerId !== designSelectionOwnerIdRef.current) return;
+        persistedSelectionStateRef.current = null;
+        for (const key of designSelectionStateKeys()) {
+          await setClientAppState(key, null, {
+            keepalive: true,
+          }).catch(() => {});
+        }
+      })();
+    };
+  }, []);
   // When generation stalls we keep the original prompt + files around so the
   // user can retry with one click instead of re-typing. Cleared as soon as the
   // user kicks off a new run (retry or fresh prompt).
@@ -1414,6 +1449,24 @@ export default function DesignEditor() {
       mode,
     };
     (window as any).__designSelection = selection;
+    const persistedSelection = {
+      designId: selection.designId,
+      designTitle: selection.designTitle,
+      activeFileId: selection.activeFileId,
+      activeFilename: selection.activeFilename,
+      selectedElement: selection.selectedElement,
+      mode: selection.mode,
+      ownerId: designSelectionOwnerIdRef.current,
+    };
+    const persistedKey = JSON.stringify(persistedSelection);
+    if (persistedSelectionStateRef.current !== persistedKey) {
+      persistedSelectionStateRef.current = persistedKey;
+      for (const key of designSelectionStateKeys()) {
+        setClientAppState(key, persistedSelection, {
+          keepalive: true,
+        }).catch(() => {});
+      }
+    }
     const el = document.documentElement;
     el.dataset.designId = id;
     if (activeFile?.id) el.dataset.fileId = activeFile.id;

package/corpus/templates/design/server/plugins/agent-chat.ts

@@ -14,6 +14,8 @@ const INITIAL_TOOL_NAMES = [
   "edit-design",
   "generate-design",
   "present-design-variants",
+  "insert-asset",
+  "connect-assets-mcp",
   "apply-tweaks",
   "update-design",
   "list-files",
@@ -38,5 +40,7 @@ export default createAgentChatPlugin({
 
 Provider-specific Design actions are shortcuts, not limits. If a first-class action cannot express the exact GitHub endpoint, repository tree query, code search, issue or pull request query, request body, pagination mode, payload shape, metadata field, or API version needed, call provider-api-catalog and provider-api-docs as needed, then call provider-api-request against the real GitHub API. Use the raw provider API escape hatch instead of weakening the answer or claiming Design cannot do something the underlying GitHub API can do.
 
-Design's GitHub provider API uses the saved GITHUB_TOKEN secret when present. Never ask the user to paste tokens into chat. For large GitHub search results or repository scans, pass stageAs and pagination options to provider-api-request, then use query-staged-dataset to count, filter, group, or project the staged rows.`,
+Design's GitHub provider API uses the saved GITHUB_TOKEN secret when present. Never ask the user to paste tokens into chat. For large GitHub search results or repository scans, pass stageAs and pagination options to provider-api-request, then use query-staged-dataset to count, filter, group, or project the staged rows.
+
+For raster image generation, use available first-party Assets MCP tools such as generate-asset instead of placeholders or generic stock-image descriptions. When the Assets picker returns selectedAsset/chooseAsset/chooseImage context while a design is open, call insert-asset with the chosen asset URL/id, then refine placement with normal Design edit tools if needed. Preserve Assets assetId, runId, and URLs verbatim.`,
 });

package/corpus/templates/design/server/plugins/assets-mcp.ts

@@ -0,0 +1,60 @@
+import { defineNitroPlugin } from "@agent-native/core/server";
+import { registerOnboardingStep } from "@agent-native/core/onboarding";
+import {
+  isFirstPartyRemoteEndpointTrusted,
+  listRemoteServers,
+} from "@agent-native/core/mcp-client";
+import { fetchOrgApps } from "@agent-native/core/mcp";
+
+const SERVER_NAME = "assets";
+
+async function hasAssetsServer(orgId: string) {
+  const apps = await fetchOrgApps({ selfId: "design" });
+  const assets = apps.find((app) => app.id === "assets");
+  if (!assets?.url) return false;
+  const currentUrl = `${assets.url.replace(/\/+$/, "")}/_agent-native/mcp`;
+  const servers = await listRemoteServers("org", orgId);
+  for (const server of servers) {
+    if (server.name !== SERVER_NAME || server.firstParty !== true) continue;
+    if (server.url.replace(/\/+$/, "") !== currentUrl) continue;
+    const trust = await isFirstPartyRemoteEndpointTrusted(
+      orgId,
+      "assets",
+      server.url,
+    );
+    if (trust.ok) return true;
+  }
+  return false;
+}
+
+async function ensureAssetsServer(ctx?: {
+  userEmail?: string;
+  orgId?: string | null;
+}) {
+  if (!ctx?.userEmail || !ctx.orgId) return false;
+  return hasAssetsServer(ctx.orgId);
+}
+
+export default defineNitroPlugin(() => {
+  registerOnboardingStep({
+    id: "assets-mcp",
+    order: 70,
+    title: "Connect Assets",
+    description:
+      "Enable first-party Assets MCP tools so Design can generate and insert on-brand media.",
+    required: false,
+    methods: [
+      {
+        id: "agent",
+        kind: "agent-task",
+        label: "Connect Assets",
+        primary: true,
+        payload: {
+          prompt:
+            "Call connect-assets-mcp to connect the first-party Assets MCP server for this Design organization, then verify generate-asset is visible.",
+        },
+      },
+    ],
+    isComplete: ensureAssetsServer,
+  });
+});

package/corpus/templates/mail/server/plugins/auth.ts

@@ -39,7 +39,10 @@ export default createAuthPlugin({
   googleSignInNotice: {
     host: "mail.agent-native.com",
     title: "Google may show a warning",
-    body: "This hosted demo uses Agent-Native's shared Google app for Gmail access, so Google may ask you to confirm before continuing.",
+    body: [
+      "You'll see this screen because this demo uses Agent-Native's Google app, not a Google-reviewed public app.",
+      "It's safe to continue: click Advanced, then “Go to … (unsafe)” to finish signing in.",
+    ],
     continueLabel: "Continue to Google",
     cancelLabel: "Run locally",
   },