@agent-native/toolkit 0.206.0-nightly-20261009124314 → 0.206.0

package/src/app/extensions/InlineExtensionFrame.spec.tsx

@@ -11,8 +11,20 @@ vi.mock("@agent-native/core/client/agent-chat", () => ({
 }));
 
 vi.mock("@agent-native/core/extensions/html-shell", () => ({
-  buildExtensionHtml: (content: string) =>
-    `<!doctype html><html><body>${content}</body></html>`,
+  buildExtensionHtml: (
+    content: string,
+    _themeVars: string,
+    _isDark: boolean,
+    _extensionId?: string,
+    _binding?: unknown,
+    metaCsp?: string,
+  ) =>
+    `<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="${metaCsp ?? ""}" /></head><body>${content}</body></html>`,
+}));
+
+vi.mock("./iframe-display-sources.js", () => ({
+  useExtensionIframeMetaCsp: (enabled = true) =>
+    enabled ? "img-src 'self' https://cdn.example.com;" : undefined,
 }));
 
 describe("InlineExtensionFrame", () => {
@@ -54,6 +66,9 @@ describe("InlineExtensionFrame", () => {
       "allow-scripts allow-forms allow-popups allow-downloads",
     );
     expect(iframe?.getAttribute("srcdoc")).toContain("Send choice");
+    expect(iframe?.getAttribute("srcdoc")).toContain(
+      `content="img-src 'self' https://cdn.example.com;"`,
+    );
 
     await act(async () => {
       window.dispatchEvent(

package/src/app/extensions/InlineExtensionFrame.tsx

@@ -13,6 +13,7 @@ import {
   type BridgePolicyContext,
   type ExtensionBridgeRole,
 } from "./iframe-bridge.js";
+import { useExtensionIframeMetaCsp } from "./iframe-display-sources.js";
 import { normalizeAgentNativeExtensionSandbox } from "./portable-extension.js";
 
 const THEME_CSS_VARS = [
@@ -300,6 +301,7 @@ async function handleTransientExtensionData(
 function buildTransientSrcDoc(
   extension: InlineExtensionDefinition,
   isDark: boolean,
+  metaCsp: string,
 ): string {
   return buildExtensionHtml(
     extension.content ?? "",
@@ -312,6 +314,7 @@ function buildTransientSrcDoc(
       isAuthor: true,
       role: "owner",
     },
+    metaCsp,
   );
 }
 
@@ -397,10 +400,17 @@ export function InlineExtensionFrame({
     );
   }, [extension?.updatedAt, isTransient, resolvedId, slotId]);
 
+  // Transient frames are built here, so they fetch the deployment's configured
+  // img-src / media-src from the server and wait for it before rendering.
+  const iframeMetaCsp = useExtensionIframeMetaCsp(!!extension && isTransient);
   const srcDoc = useMemo(() => {
-    if (!extension || !isTransient) return undefined;
-    return buildTransientSrcDoc(extension, initialDarkRef.current);
-  }, [extension, isTransient]);
+    if (!extension || !isTransient || !iframeMetaCsp) return undefined;
+    return buildTransientSrcDoc(
+      extension,
+      initialDarkRef.current,
+      iframeMetaCsp,
+    );
+  }, [extension, iframeMetaCsp, isTransient]);
 
   useEffect(() => {
     bridgeContextRef.current = isTransient

package/src/app/extensions/iframe-display-sources.spec.ts

@@ -0,0 +1,74 @@
+import { EXTENSION_IFRAME_META_CSP } from "@agent-native/core/extensions/html-shell";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  loadExtensionIframeMetaCsp,
+  resetExtensionIframeMetaCspForTests,
+} from "./iframe-display-sources.js";
+
+describe("loadExtensionIframeMetaCsp", () => {
+  beforeEach(() => {
+    resetExtensionIframeMetaCspForTests();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("builds the meta CSP from the server's configured sources once", async () => {
+    const fetchMock = vi.fn(async () =>
+      Response.json({
+        imageSources: ["'self'", "https:"],
+        mediaSources: ["'self'", "blob:"],
+      }),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+
+    const csp = await loadExtensionIframeMetaCsp();
+    expect(csp).toContain("img-src 'self' https:;");
+    expect(csp).toContain("media-src 'self' blob:;");
+    expect(csp).toContain("connect-src 'self';");
+    await expect(loadExtensionIframeMetaCsp()).resolves.toBe(csp);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(String(fetchMock.mock.calls[0]?.[0])).toContain(
+      "/_agent-native/extensions/iframe/display-sources",
+    );
+  });
+
+  it("falls back to the default policy for an invalid source list", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () =>
+        Response.json({
+          imageSources: ["'self'; connect-src *"],
+          mediaSources: ["'self'"],
+        }),
+      ),
+    );
+
+    await expect(loadExtensionIframeMetaCsp()).resolves.toBe(
+      EXTENSION_IFRAME_META_CSP,
+    );
+  });
+
+  it("falls back to the default policy on a failed request and retries later", async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce(new Response("nope", { status: 500 }))
+      .mockResolvedValueOnce(
+        Response.json({
+          imageSources: ["'self'", "https:"],
+          mediaSources: ["'self'"],
+        }),
+      );
+    vi.stubGlobal("fetch", fetchMock);
+
+    await expect(loadExtensionIframeMetaCsp()).resolves.toBe(
+      EXTENSION_IFRAME_META_CSP,
+    );
+    await expect(loadExtensionIframeMetaCsp()).resolves.toContain(
+      "img-src 'self' https:;",
+    );
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+  });
+});

package/src/app/extensions/iframe-display-sources.ts

@@ -0,0 +1,61 @@
+import { agentNativePath } from "@agent-native/core/client/api-path";
+import {
+  EXTENSION_IFRAME_DISPLAY_SOURCES_PATH,
+  EXTENSION_IFRAME_META_CSP,
+  extensionIframeMetaCspFromDisplaySources,
+} from "@agent-native/core/extensions/html-shell";
+import { useEffect, useState } from "react";
+
+/**
+ * Client-rendered extension frames (`ExtensionViewer` srcDoc,
+ * `InlineExtensionFrame` transient frames) build their HTML in the browser, so
+ * they read the deployment's `extensions.iframeImageSources` /
+ * `iframeMediaSources` from the server instead of from app config. The lists
+ * are validated again by `extensionIframeMetaCspFromDisplaySources`, and any
+ * failure (network, non-OK status, malformed body, invalid source) falls back
+ * to the default policy, which blocks remote images and media.
+ */
+let pending: Promise<string> | null = null;
+
+export function loadExtensionIframeMetaCsp(): Promise<string> {
+  if (!pending) {
+    const request = fetch(
+      agentNativePath(EXTENSION_IFRAME_DISPLAY_SOURCES_PATH),
+    )
+      .then(async (res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return extensionIframeMetaCspFromDisplaySources(await res.json());
+      })
+      .catch(() => {
+        // Do not cache a failure: the next frame retries.
+        if (pending === request) pending = null;
+        return EXTENSION_IFRAME_META_CSP;
+      });
+    pending = request;
+  }
+  return pending;
+}
+
+/**
+ * The meta CSP for a client-rendered frame, or `undefined` while it loads.
+ * Callers wait for it rather than rendering with the default policy first, so
+ * a frame is built once with the policy it keeps.
+ */
+export function useExtensionIframeMetaCsp(enabled = true): string | undefined {
+  const [metaCsp, setMetaCsp] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    void loadExtensionIframeMetaCsp().then((csp) => {
+      if (!cancelled) setMetaCsp(csp);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled]);
+  return enabled ? metaCsp : undefined;
+}
+
+export function resetExtensionIframeMetaCspForTests(): void {
+  pending = null;
+}

package/src/app/progress/RunsTray.tsx

@@ -353,7 +353,7 @@ export function RunsTray({
       open={open}
       onOpenChange={setOpen}
       trigger={
-        <span className="contents">
+        <span className="inline-flex shrink-0">
           <DesignSystemTooltip
             trigger={trigger}
             content={triggerLabel}

package/src/app/styles/agent-native.css

@@ -1061,10 +1061,18 @@
 }
 
 .agent-builder-setup-card--attached {
+  inline-size: min(
+    calc(100% - var(--agent-kit-composer-adjacent-inline-inset) - 0.5rem),
+    var(--agent-kit-conversation-max-width)
+  );
+  min-inline-size: 0;
+  max-inline-size: min(100%, var(--agent-kit-conversation-max-width));
   position: relative;
   z-index: 1;
+  margin-inline: auto;
   margin-bottom: -1.875rem;
   padding-bottom: 0 !important;
+  padding-inline: 0 !important;
   animation: agent-builder-setup-card-enter 220ms var(--ease-out-strong) both;
 }
 
@@ -1098,10 +1106,20 @@
   padding-bottom: calc(0.625rem + 1.875rem);
 }
 
-.agent-builder-setup-card--attached:not(.agent-builder-setup-card--sidebar) {
-  max-inline-size: min(100%, var(--agent-kit-conversation-max-width));
-  margin-inline: auto;
-  padding-inline: 0 !important;
+.agent-sidebar-panel .agent-builder-setup-card--attached {
+  inline-size: min(
+    calc(100% - 0.5rem),
+    var(--agent-kit-conversation-max-width)
+  );
+}
+
+@media (max-width: 40rem) {
+  .agentkit-composer-stack .agent-builder-setup-card--attached {
+    inline-size: min(
+      calc(100% - 0.5rem),
+      var(--agent-kit-conversation-max-width)
+    );
+  }
 }
 
 .agent-builder-setup-inline--attached {