@agent-native/core 0.84.28 → 0.84.30

package/corpus/README.md

@@ -28,4 +28,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 ## Generated Counts
 
 - core files: 2043
-- template files: 4972
+- template files: 4973

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @agent-native/core
 
+## 0.84.30
+
+### Patch Changes
+
+- 80e618a: Fix hosted Google Analytics / Tag Manager injection by baking the measurement id into Nitro server bundles and merging the required GA/GTM script, connect, and image hosts into existing stricter document CSPs.
+- 80e618a: Improve chat tool-preparation UX by hiding zero-byte progress, using clearer preparation/writing copy, and showing a delayed long-running update hint.
+
+## 0.84.29
+
+### Patch Changes
+
+- 5f60aaa: Fix hosted Google Analytics / Tag Manager injection by baking the measurement id into Nitro server bundles and merging the required GA/GTM script, connect, and image hosts into existing stricter document CSPs.
+
 ## 0.84.28
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.84.28",
+  "version": "0.84.30",
   "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/client/chat/tool-call-display.tsx

@@ -70,6 +70,43 @@ export const ApprovalContext = React.createContext<ApprovalContextValue | null>(
   null,
 );
 
+export const TOOL_LONG_RUNNING_HINT_DELAY_MS = 45_000;
+
+function ToolLongRunningHintShell({
+  toolName,
+  isRunning,
+  children,
+}: {
+  toolName: string;
+  isRunning: boolean;
+  children: React.ReactNode;
+}) {
+  const [showLongRunningHint, setShowLongRunningHint] = useState(false);
+
+  useEffect(() => {
+    if (!isRunning) {
+      setShowLongRunningHint(false);
+      return;
+    }
+    setShowLongRunningHint(false);
+    const timeout = window.setTimeout(() => {
+      setShowLongRunningHint(true);
+    }, TOOL_LONG_RUNNING_HINT_DELAY_MS);
+    return () => window.clearTimeout(timeout);
+  }, [isRunning, toolName]);
+
+  return (
+    <>
+      {children}
+      {isRunning && showLongRunningHint && (
+        <div className="mt-0.5 px-2.5 text-[11px] leading-snug text-muted-foreground/80">
+          Still working. Large updates can take a minute or two.
+        </div>
+      )}
+    </>
+  );
+}
+
 // ─── Tool-payload formatting ──────────────────────────────────────────────────
 
 type ToolDetailSection = "input" | "result";
@@ -435,38 +472,43 @@ export function ToolCallDisplay({
   // These must be separate components so hook order in ToolCallDisplayGeneric
   // is always stable (no conditional hook calls).
   const toolKind = structuredMeta?.toolKind as string | undefined;
+  const wrapToolDisplay = (children: React.ReactNode) => (
+    <ToolLongRunningHintShell toolName={toolName} isRunning={isRunning}>
+      {children}
+    </ToolLongRunningHintShell>
+  );
   if (toolKind === "bash") {
-    return (
+    return wrapToolDisplay(
       <BashCell
         meta={
           structuredMeta as unknown as Parameters<typeof BashCell>[0]["meta"]
         }
         output={result}
         isRunning={isRunning}
-      />
+      />,
     );
   }
   if (toolKind === "edit") {
-    return (
+    return wrapToolDisplay(
       <EditCell
         meta={
           structuredMeta as unknown as Parameters<typeof EditCell>[0]["meta"]
         }
         isRunning={isRunning}
-      />
+      />,
     );
   }
   if (toolKind === "write") {
-    return (
+    return wrapToolDisplay(
       <WriteCell
         meta={
           structuredMeta as unknown as Parameters<typeof WriteCell>[0]["meta"]
         }
         isRunning={isRunning}
-      />
+      />,
     );
   }
-  return (
+  return wrapToolDisplay(
     <ToolCallDisplayGeneric
       toolName={toolName}
       argsText={argsText}
@@ -477,7 +519,7 @@ export function ToolCallDisplay({
       isRunning={isRunning}
       approval={approval}
       repeatCount={repeatCount}
-    />
+    />,
   );
 }
 

package/corpus/core/src/client/sse-event-processor.ts

@@ -205,13 +205,26 @@ function baseActivityLabel(ev: SSEEvent, tool?: string): string {
   return humanizeToolLabelText(ev.label ?? "Working", tool);
 }
 
+function preparationActivityLabel(
+  tool: string | undefined,
+  progressBytes: number | undefined,
+): string {
+  const action = humanizeToolName(tool);
+  if (progressBytes === undefined) {
+    return `Starting ${action}...`;
+  }
+  if (progressBytes <= 0) {
+    return `Preparing ${action}...`;
+  }
+  return `Writing ${action}... (${formatProgressBytes(progressBytes)} prepared)`;
+}
+
 function visibleActivityLabel(ev: SSEEvent, tool?: string): string {
-  const label = baseActivityLabel(ev, tool);
   const progressBytes = activityProgressBytes(ev);
-  if (progressBytes === undefined || !isPreparingActionActivity(ev)) {
-    return label;
+  if (isPreparingActionActivity(ev)) {
+    return preparationActivityLabel(tool, progressBytes);
   }
-  return `${label} (${formatProgressBytes(progressBytes)} streamed)`;
+  return baseActivityLabel(ev, tool);
 }
 
 function findPendingToolCallIndex(

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

@@ -2886,6 +2886,11 @@ export default bundle;
     virtual: {
       "virtual:agents-bundle": agentsBundleModuleSource,
     },
+    replace: {
+      "process.env.AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID": JSON.stringify(
+        process.env.GA_MEASUREMENT_ID?.trim() || "",
+      ),
+    },
     // Replace browser-only renderers (Excalidraw/Mermaid) with an inert proxy in
     // the server bundle. Without this, Nitro's Rolldown build pulls the real
     // Excalidraw into a shared vendor chunk imported statically by the SSR render

package/corpus/core/src/server/analytics.ts

@@ -4,8 +4,8 @@
  * - `GA_MEASUREMENT_ID` — Google Analytics 4 measurement ID
  *
  * Netlify configuration-file env vars are build-time only for serverless
- * functions, so the Vite plugin also bakes this public value into SSR bundles
- * as `__AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID__`.
+ * functions, so the Vite/Nitro build paths also bake this public value into
+ * SSR bundles.
  *
  * Amplitude and Sentry are initialized client-side via their npm packages
  * (see `packages/core/src/client/analytics.ts`). Only GA requires script
@@ -28,14 +28,17 @@ function normalizeMeasurementId(value: string | undefined): string | null {
   return trimmed ? trimmed : null;
 }
 
+function getViteBakedGaMeasurementId(): string | undefined {
+  return typeof __AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID__ === "string"
+    ? __AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID__
+    : undefined;
+}
+
 function getGaMeasurementId(): string | null {
   return (
     normalizeMeasurementId(process.env.GA_MEASUREMENT_ID) ||
-    normalizeMeasurementId(
-      typeof __AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID__ === "string"
-        ? __AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID__
-        : undefined,
-    )
+    normalizeMeasurementId(process.env.AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID) ||
+    normalizeMeasurementId(getViteBakedGaMeasurementId())
   );
 }
 
@@ -51,6 +54,25 @@ export const GA_CSP_SCRIPT_HOSTS = [
   "https://www.google-analytics.com",
 ] as const;
 
+/**
+ * Network/image hosts used by the GA4 loader when it sends page-view and event
+ * beacons. These are separate from `script-src`: a stricter deployment CSP with
+ * `connect-src 'self'` or `img-src 'self'` can load gtag.js but still drop all
+ * analytics events unless these hosts are present too.
+ */
+export const GA_CSP_CONNECT_HOSTS = [
+  "https://www.google-analytics.com",
+  "https://analytics.google.com",
+  "https://stats.g.doubleclick.net",
+  "https://region1.google-analytics.com",
+] as const;
+
+export const GA_CSP_IMG_HOSTS = [
+  "https://www.google-analytics.com",
+  "https://www.googletagmanager.com",
+  "https://stats.g.doubleclick.net",
+] as const;
+
 /**
  * The exact JS body (no surrounding `<script>` tags) of the inline gtag config
  * block injected next to the gtag.js loader. Returned so the SSR handler can

package/corpus/core/src/server/ssr-handler.ts

@@ -31,6 +31,8 @@ import {
   withAgentNativeSocialImageCacheBuster,
 } from "../shared/social-meta.js";
 import {
+  GA_CSP_CONNECT_HOSTS,
+  GA_CSP_IMG_HOSTS,
   GA_CSP_SCRIPT_HOSTS,
   getGaInlineConfigScriptBody,
 } from "./analytics.js";
@@ -270,6 +272,256 @@ function extractScriptBody(scriptTag: string | null): string | null {
   return scriptTag.slice(start, end);
 }
 
+type CspDirective = {
+  name: string;
+  tokens: string[];
+};
+
+const CSP_DIRECTIVES_WITH_VALUE_TOKENS = new Set([
+  "base-uri",
+  "block-all-mixed-content",
+  "child-src",
+  "connect-src",
+  "default-src",
+  "fenced-frame-src",
+  "font-src",
+  "form-action",
+  "frame-ancestors",
+  "frame-src",
+  "img-src",
+  "manifest-src",
+  "media-src",
+  "navigate-to",
+  "object-src",
+  "plugin-types",
+  "prefetch-src",
+  "referrer",
+  "reflected-xss",
+  "require-sri-for",
+  "require-trusted-types-for",
+  "report-to",
+  "report-uri",
+  "sandbox",
+  "script-src",
+  "script-src-attr",
+  "script-src-elem",
+  "style-src",
+  "style-src-attr",
+  "style-src-elem",
+  "trusted-types",
+  "upgrade-insecure-requests",
+  "webrtc",
+  "worker-src",
+]);
+
+function hasCommaJoinedCspPolicies(policy: string): boolean {
+  let commaIndex = policy.indexOf(",");
+  while (commaIndex !== -1) {
+    const afterComma = policy.slice(commaIndex + 1);
+    const directive = /^\s+([a-z][a-z0-9-]*)(?=\s|;|$)/i.exec(afterComma)?.[1];
+    if (
+      directive &&
+      CSP_DIRECTIVES_WITH_VALUE_TOKENS.has(directive.toLowerCase())
+    ) {
+      return true;
+    }
+    commaIndex = policy.indexOf(",", commaIndex + 1);
+  }
+  return false;
+}
+
+function parseCsp(policy: string): CspDirective[] {
+  return policy
+    .split(";")
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .map((part) => {
+      const [name = "", ...tokens] = part.split(/\s+/);
+      return { name: name.toLowerCase(), tokens };
+    })
+    .filter((directive) => directive.name);
+}
+
+function serializeCsp(directives: CspDirective[]): string {
+  return directives
+    .map((directive) =>
+      [directive.name, ...directive.tokens].filter(Boolean).join(" "),
+    )
+    .join("; ");
+}
+
+function appendCspTokens(
+  tokens: string[],
+  additions: readonly string[],
+): string[] {
+  if (!additions.length) return tokens;
+  const next = tokens.filter((token) => token !== "'none'");
+  const seen = new Set(next);
+  for (const token of additions) {
+    if (!token || seen.has(token)) continue;
+    next.push(token);
+    seen.add(token);
+  }
+  return next;
+}
+
+function findCspDirective(
+  directives: CspDirective[],
+  name: string,
+): CspDirective | undefined {
+  return directives.find((directive) => directive.name === name);
+}
+
+function appendToExistingOrDefaultCspDirective(
+  directives: CspDirective[],
+  name: string,
+  additions: readonly string[],
+): void {
+  if (!additions.length) return;
+  const existing = findCspDirective(directives, name);
+  if (existing) {
+    existing.tokens = appendCspTokens(existing.tokens, additions);
+    return;
+  }
+
+  const defaultSrc = findCspDirective(directives, "default-src");
+  if (!defaultSrc) return;
+  directives.push({
+    name,
+    tokens: appendCspTokens([...defaultSrc.tokens], additions),
+  });
+}
+
+function appendToExistingCspDirective(
+  directives: CspDirective[],
+  name: string,
+  additions: readonly string[],
+): void {
+  const existing = findCspDirective(directives, name);
+  if (!existing) return;
+  existing.tokens = appendCspTokens(existing.tokens, additions);
+}
+
+function hasStrictNonceScriptPolicy(tokens: readonly string[]): boolean {
+  return tokens.some(
+    (token) => token === "'strict-dynamic'" || token.startsWith("'nonce-"),
+  );
+}
+
+function appendToScriptCspDirective(
+  directives: CspDirective[],
+  name: string,
+  additions: readonly string[],
+): boolean {
+  const existing = findCspDirective(directives, name);
+  if (existing) {
+    if (hasStrictNonceScriptPolicy(existing.tokens)) return false;
+    existing.tokens = appendCspTokens(existing.tokens, additions);
+    return true;
+  }
+
+  const defaultSrc = findCspDirective(directives, "default-src");
+  if (!defaultSrc || hasStrictNonceScriptPolicy(defaultSrc.tokens)) {
+    return false;
+  }
+  directives.push({
+    name,
+    tokens: appendCspTokens([...defaultSrc.tokens], additions),
+  });
+  return true;
+}
+
+function appendToEffectiveScriptElementCspDirective(
+  directives: CspDirective[],
+  additions: readonly string[],
+): boolean {
+  const scriptSrcElem = findCspDirective(directives, "script-src-elem");
+  if (scriptSrcElem) {
+    if (hasStrictNonceScriptPolicy(scriptSrcElem.tokens)) return false;
+    scriptSrcElem.tokens = appendCspTokens(scriptSrcElem.tokens, additions);
+    return true;
+  }
+
+  return appendToScriptCspDirective(directives, "script-src", additions);
+}
+
+function augmentExistingEnforcedCspForFrameworkScripts(
+  policy: string,
+  options: {
+    gaScriptSrcTokens: readonly string[];
+    gaEnabled: boolean;
+  },
+): string {
+  // Multiple CSP headers are surfaced by Headers.get() as one comma-joined
+  // string. CSP is not a comma-list header, so serializing a parsed combined
+  // value would turn two policies into one invalid policy. Leave those headers
+  // app-owned; a comma inside a source/report URL is still safe to parse.
+  if (hasCommaJoinedCspPolicies(policy)) return policy;
+
+  const directives = parseCsp(policy);
+  if (!directives.length) return policy;
+
+  if (options.gaEnabled) {
+    const addedScriptElement = appendToEffectiveScriptElementCspDirective(
+      directives,
+      options.gaScriptSrcTokens,
+    );
+    if (addedScriptElement) {
+      appendToExistingOrDefaultCspDirective(
+        directives,
+        "connect-src",
+        GA_CSP_CONNECT_HOSTS,
+      );
+      appendToExistingOrDefaultCspDirective(
+        directives,
+        "img-src",
+        GA_CSP_IMG_HOSTS,
+      );
+    }
+  }
+
+  return serializeCsp(directives);
+}
+
+function augmentExistingReportOnlyCspForFrameworkScripts(
+  policy: string,
+  options: {
+    scriptSrcTokens: readonly string[];
+    gaEnabled: boolean;
+  },
+): string {
+  if (hasCommaJoinedCspPolicies(policy)) return policy;
+
+  const directives = parseCsp(policy);
+  if (!directives.length) return policy;
+
+  appendToExistingOrDefaultCspDirective(
+    directives,
+    "script-src",
+    options.scriptSrcTokens,
+  );
+  appendToExistingCspDirective(
+    directives,
+    "script-src-elem",
+    options.scriptSrcTokens,
+  );
+
+  if (options.gaEnabled) {
+    appendToExistingOrDefaultCspDirective(
+      directives,
+      "connect-src",
+      GA_CSP_CONNECT_HOSTS,
+    );
+    appendToExistingOrDefaultCspDirective(
+      directives,
+      "img-src",
+      GA_CSP_IMG_HOSTS,
+    );
+  }
+
+  return serializeCsp(directives);
+}
+
 /**
  * Apply a Content-Security-Policy header to HTML document responses.
  *
@@ -282,20 +534,28 @@ function extractScriptBody(scriptTag: string | null): string | null {
  *     user-controlled content reaches the HTML).
  *
  * A third directive, `script-src`, is emitted via `Content-Security-Policy-
- * Report-Only` rather than enforced. The framework injects deterministic inline
- * scripts (the Sentry config block, whose hash is computed once at process
- * startup from the resolved env vars, and — when `GA_MEASUREMENT_ID` is set —
- * the gtag config block, whose hash is derived from the same string
- * `wrapWithAnalytics` embeds). It also loads Google Tag Manager / GA4 from
- * `GA_CSP_SCRIPT_HOSTS`. All of those are listed here so the report-only policy
- * reflects the code the framework itself injects instead of reporting a
- * violation on every page load. Templates additionally render a theme-init
- * inline script whose exact content varies by template (default theme param,
- * custom docs variant, etc.) and which is rendered by React Router, not this
- * handler, so its hash is not available here. Shipping script-src as
- * Report-Only surfaces the remaining violations without breaking template
- * customisations; teams can graduate to enforcement once their hashes are
- * enumerated.
+ * Report-Only` rather than enforced when the app has no existing document CSP.
+ * The framework injects deterministic inline scripts (the Sentry config block,
+ * whose hash is computed once at process startup from the resolved env vars,
+ * and — when `GA_MEASUREMENT_ID` is set — the gtag config block, whose hash is
+ * derived from the same string `wrapWithAnalytics` embeds). It also loads
+ * Google Tag Manager / GA4 from `GA_CSP_SCRIPT_HOSTS`. All of those are listed
+ * here so the report-only policy reflects the code the framework itself injects
+ * instead of reporting a violation on every page load.
+ *
+ * If an app or host already sends an enforced CSP with `script-src`,
+ * `script-src-elem`, `connect-src`, `img-src`, or `default-src`, we merge only
+ * GA-specific allowances into existing host/hash policies. Strict nonce or
+ * `strict-dynamic` script policies stay app-owned because blindly appending
+ * hashes or hosts would widen the policy without reliably loading our injected
+ * scripts.
+ *
+ * Templates additionally render a theme-init inline script whose exact content
+ * varies by template (default theme param, custom docs variant, etc.) and which
+ * is rendered by React Router, not this handler, so its hash is not available
+ * here. Shipping script-src as Report-Only surfaces the remaining violations
+ * without breaking template customisations; teams can graduate to enforcement
+ * once their hashes are enumerated.
  *
  * Skipped in development (`NODE_ENV !== 'production'`) so HMR eval and Vite
  * dev-server injects are never blocked. Set `AGENT_NATIVE_DISABLE_DOC_CSP=1`
@@ -305,16 +565,6 @@ function applyDocumentCsp(headers: Headers, sentryScript: string | null): void {
   if (process.env.NODE_ENV !== "production") return;
   if (process.env.AGENT_NATIVE_DISABLE_DOC_CSP === "1") return;
 
-  // object-src / base-uri: enforced; neither directive mentions scripts, so
-  // they are safe even when a template's inline script hashes are unknown.
-  const existing = headers.get("content-security-policy") ?? "";
-  if (!existing) {
-    headers.set(
-      "content-security-policy",
-      "object-src 'none'; base-uri 'self'",
-    );
-  }
-
   // script-src as Report-Only: list 'self', the framework-injected inline
   // script hashes (Sentry config + gtag config), and the Google Analytics /
   // Tag Manager loader hosts. These are exactly the scripts the framework
@@ -326,17 +576,47 @@ function applyDocumentCsp(headers: Headers, sentryScript: string | null): void {
   const gaInlineBody = getGaInlineConfigScriptBody();
   const gaHash = gaInlineBody ? computeInlineScriptHash(gaInlineBody) : null;
   const gaHosts = gaInlineBody ? [...GA_CSP_SCRIPT_HOSTS] : [];
+  const gaScriptSrcTokens = [...(gaHash ? [gaHash] : []), ...gaHosts];
   const scriptSrcTokens = [
     "'self'",
     ...(sentryHash ? [sentryHash] : []),
     ...(gaHash ? [gaHash] : []),
     ...gaHosts,
   ];
-  const scriptSrc = `script-src ${scriptSrcTokens.join(" ")}`;
 
+  const cspAugmentOptions = {
+    scriptSrcTokens,
+    gaScriptSrcTokens,
+    gaEnabled: Boolean(gaInlineBody),
+  };
+  const existing = headers.get("content-security-policy") ?? "";
+  if (!existing) {
+    headers.set(
+      "content-security-policy",
+      "object-src 'none'; base-uri 'self'",
+    );
+  } else {
+    headers.set(
+      "content-security-policy",
+      augmentExistingEnforcedCspForFrameworkScripts(
+        existing,
+        cspAugmentOptions,
+      ),
+    );
+  }
+
+  const scriptSrc = `script-src ${scriptSrcTokens.join(" ")}`;
   const existingRo = headers.get("content-security-policy-report-only") ?? "";
   if (!existingRo) {
     headers.set("content-security-policy-report-only", scriptSrc);
+  } else {
+    headers.set(
+      "content-security-policy-report-only",
+      augmentExistingReportOnlyCspForFrameworkScripts(
+        existingRo,
+        cspAugmentOptions,
+      ),
+    );
   }
 }
 

package/corpus/core/src/vite/client.ts

@@ -2086,6 +2086,9 @@ function createAgentNativeConfig(
       __AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID__: JSON.stringify(
         process.env.GA_MEASUREMENT_ID?.trim() || "",
       ),
+      "process.env.AGENT_NATIVE_BUILD_GA_MEASUREMENT_ID": JSON.stringify(
+        process.env.GA_MEASUREMENT_ID?.trim() || "",
+      ),
       // Framework route warmup controls how SSR `.data` routes are fetched:
       // ordinary fetches keep them CDN-cacheable, while native prefetch headers
       // can be refused before the CDN/origin sees the request. Keep this value