@agent-native/core 0.84.29 → 0.84.32

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: 4983

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @agent-native/core
 
+## 0.84.32
+
+### Patch Changes
+
+- da8ac0a: Keep tail-resume reconnect content display-only, recover zero-byte action-prep stalls, and polish Design screen tool labels.
+
+## 0.84.31
+
+### Patch Changes
+
+- 3190dea: Inline rrweb stylesheet snapshots by default so Analytics session replay captures can play back styled pages without live CSS fetches.
+
+## 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

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.84.29",
+  "version": "0.84.32",
   "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/session-replay.ts

@@ -19,6 +19,7 @@ interface RrwebRecordOptions {
   emit: (event: ReplayEvent) => void;
   checkoutEveryNth?: number;
   checkoutEveryNms?: number;
+  inlineStylesheet?: boolean;
   blockClass?: string | RegExp;
   blockSelector?: string;
   ignoreClass?: string | RegExp;
@@ -82,6 +83,7 @@ export interface SessionReplayOptions {
   maxBatchBytes?: number;
   checkoutEveryNth?: number;
   checkoutEveryNms?: number;
+  inlineStylesheet?: boolean;
   blockSelector?: string;
   ignoreSelector?: string;
   maskTextClass?: string | RegExp;
@@ -135,6 +137,7 @@ interface NormalizedSessionReplayOptions {
   maxBatchBytes: number;
   checkoutEveryNth?: number;
   checkoutEveryNms?: number;
+  inlineStylesheet: boolean;
   blockSelector: string;
   ignoreSelector: string;
   maskTextClass: string | RegExp;
@@ -509,6 +512,7 @@ function normalizeOptions(
     ),
     checkoutEveryNth: options.checkoutEveryNth,
     checkoutEveryNms: options.checkoutEveryNms,
+    inlineStylesheet: options.inlineStylesheet ?? true,
     blockSelector: options.blockSelector || DEFAULT_BLOCK_SELECTOR,
     ignoreSelector: options.ignoreSelector || DEFAULT_IGNORE_SELECTOR,
     maskTextClass: options.maskTextClass || DEFAULT_MASK_TEXT_CLASS,
@@ -1010,6 +1014,7 @@ async function startSessionReplayRecorder(
       sampling: normalized.eventSampling,
       checkoutEveryNth: normalized.checkoutEveryNth,
       checkoutEveryNms: normalized.checkoutEveryNms,
+      inlineStylesheet: normalized.inlineStylesheet,
       blockSelector: normalized.blockSelector,
       ignoreSelector: normalized.ignoreSelector,
       maskTextClass: normalized.maskTextClass,

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/server/ssr-handler.ts

@@ -277,6 +277,59 @@ type CspDirective = {
   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(";")
@@ -349,13 +402,96 @@ function appendToExistingCspDirective(
   existing.tokens = appendCspTokens(existing.tokens, additions);
 }
 
-function augmentExistingCspForFrameworkScripts(
+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;
 
@@ -364,7 +500,6 @@ function augmentExistingCspForFrameworkScripts(
     "script-src",
     options.scriptSrcTokens,
   );
-  // `script-src-elem` overrides `script-src` for script tags when present.
   appendToExistingCspDirective(
     directives,
     "script-src-elem",
@@ -409,10 +544,11 @@ function augmentExistingCspForFrameworkScripts(
  * 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 the
- * framework's GA/GTM allowances into the existing directive. That keeps
- * stricter deployments working without adding a new enforced script policy to
- * routes that only declare unrelated directives such as `frame-ancestors`.
+ * `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
@@ -440,6 +576,7 @@ 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] : []),
@@ -449,6 +586,7 @@ function applyDocumentCsp(headers: Headers, sentryScript: string | null): void {
 
   const cspAugmentOptions = {
     scriptSrcTokens,
+    gaScriptSrcTokens,
     gaEnabled: Boolean(gaInlineBody),
   };
   const existing = headers.get("content-security-policy") ?? "";
@@ -460,7 +598,10 @@ function applyDocumentCsp(headers: Headers, sentryScript: string | null): void {
   } else {
     headers.set(
       "content-security-policy",
-      augmentExistingCspForFrameworkScripts(existing, cspAugmentOptions),
+      augmentExistingEnforcedCspForFrameworkScripts(
+        existing,
+        cspAugmentOptions,
+      ),
     );
   }
 
@@ -471,7 +612,10 @@ function applyDocumentCsp(headers: Headers, sentryScript: string | null): void {
   } else {
     headers.set(
       "content-security-policy-report-only",
-      augmentExistingCspForFrameworkScripts(existingRo, cspAugmentOptions),
+      augmentExistingReportOnlyCspForFrameworkScripts(
+        existingRo,
+        cspAugmentOptions,
+      ),
     );
   }
 }

package/corpus/templates/analytics/app/pages/sessions/SessionDetailPage.tsx

@@ -1243,7 +1243,14 @@ function sanitizeCssText(value: string): string {
   if (!containsStylesheetNetworkLoad(value)) return value;
   return value
     .replace(/@import\s+(?:url\s*\()?[^;{}]+;?/gi, "")
-    .replace(/\burl\s*\((?:\\.|[^\\)])*\)/gi, "none");
+    .replace(/\burl\s*\(\s*((?:\\.|[^\\)])*)\)/gi, sanitizeCssUrlToken);
+}
+
+function sanitizeCssUrlToken(match: string, rawValue: string): string {
+  const urlValue = rawValue.trim();
+  const unquoted = urlValue.replace(/^(['"])(.*)\1$/, "$2").trim();
+  if (/^(?:data:|blob:|#)/i.test(unquoted)) return match;
+  return "none";
 }
 
 function sanitizeAttributes(attributes: AnyRecord): AnyRecord {
@@ -1258,6 +1265,11 @@ function sanitizeAttributes(attributes: AnyRecord): AnyRecord {
       if (style.trim()) next[key] = style;
       continue;
     }
+    if (normalized === "_csstext") {
+      const cssText = sanitizeCssText(String(value));
+      if (cssText.trim()) next[key] = cssText;
+      continue;
+    }
     next[key] = value;
   }
   return next;

package/corpus/templates/analytics/changelog/2026-07-01-session-replays-keep-inlined-css-without-live-resource-loa.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Session replay playback keeps rrweb's inlined stylesheet snapshots while stripping live resource loads, reducing blank replay frames for captured pages with external CSS.

package/corpus/templates/design/AGENTS.md

@@ -191,6 +191,24 @@ patterns live in `.agents/skills/`.
   mode can list and resolve local routes now, but file reads/writes remain a
   bridge contract until explicit permission controls are hardened.
 
+## Code Workspace
+
+- The editor left rail has a wide `code` workspace panel. Open it with
+  `navigate --view editor --designId <id> --leftPanel code` and optionally pass
+  `fileId`, `filename`, or `screen` to focus a file.
+- Use `list-source-files` to inspect the source workspace. For the MVP the
+  backend is `virtual-inline` over SQL-backed `design_files`, exposed as
+  `designfs://<designId>/`.
+- Use `read-source-file` for file contents and preserve its `versionHash` before
+  writing. Do not return full file content from `view-screen`; it reports only
+  active code file metadata and dirty state.
+- Use `preview-source-edit` to show a diff without saving, then
+  `apply-source-edit` with the prior `versionHash` to save either a full replace
+  or exact replace. These actions update the same inline file state as the UI.
+- Use `resolve-selection-source` when the user has a canvas element selected and
+  you need the best matching inline file location/snippet. Localhost/container
+  source reads and writes remain future backend work.
+
 ## Localhost Source Actions
 
 - `connect-localhost`: registers or refreshes a localhost source connection

package/corpus/templates/design/actions/apply-source-edit.ts

@@ -0,0 +1,87 @@
+import { defineAction } from "@agent-native/core";
+import { z } from "zod";
+
+import {
+  findSourceWorkspaceFile,
+  readLiveSourceFile,
+  resolveSourceWorkspace,
+  writeInlineSourceFile,
+} from "../server/source-workspace.js";
+import {
+  applySourceEdit,
+  previewSourceDiff,
+} from "../shared/source-workspace.js";
+
+const sourceEditSchema = z.discriminatedUnion("kind", [
+  z.object({
+    kind: z.literal("full-replace"),
+    content: z.string().describe("Complete replacement file content"),
+  }),
+  z.object({
+    kind: z.literal("exact-replace"),
+    search: z.string().min(1).describe("Unique exact text to replace"),
+    replace: z.string().describe("Replacement text"),
+  }),
+]);
+
+export default defineAction({
+  description:
+    "Apply a source-file edit through the shared Design source surface. In the " +
+    "MVP this writes inline design_files only and rejects stale version hashes.",
+  schema: z
+    .object({
+      designId: z.string().describe("Design project ID"),
+      path: z
+        .string()
+        .optional()
+        .describe("Source path/filename, such as index.html"),
+      fileId: z.string().optional().describe("Design file ID"),
+      edit: sourceEditSchema,
+      expectedVersionHash: z
+        .string()
+        .optional()
+        .describe("Hash returned by read-source-file or preview-source-edit"),
+    })
+    .refine((args) => args.path || args.fileId, {
+      message: "Provide either path or fileId.",
+      path: ["path"],
+    }),
+  run: async ({ designId, path, fileId, edit, expectedVersionHash }) => {
+    const workspace = await resolveSourceWorkspace(designId, {
+      includeContent: true,
+    });
+    if (workspace.sourceType !== "inline") {
+      throw new Error("Only inline Design files are editable in this MVP.");
+    }
+    const file = findSourceWorkspaceFile(workspace.files, { fileId, path });
+    const live = await readLiveSourceFile(file);
+    if (
+      expectedVersionHash !== undefined &&
+      expectedVersionHash !== live.versionHash
+    ) {
+      throw new Error(
+        "Source file changed since it was read. Re-read the file and retry.",
+      );
+    }
+
+    const next = applySourceEdit(live.content, edit);
+    const write = await writeInlineSourceFile({
+      designId,
+      file,
+      content: next.content,
+      expectedVersionHash: expectedVersionHash ?? live.versionHash,
+    });
+
+    return {
+      designId,
+      path: file.filename,
+      fileId: file.id,
+      backendKind: "virtual-inline",
+      changed: write.changed,
+      editsApplied: next.editsApplied,
+      versionHash: write.versionHash,
+      updatedAt: write.updatedAt,
+      diff: previewSourceDiff(live.content, next.content),
+    };
+  },
+});

package/corpus/templates/design/actions/list-source-files.ts

@@ -0,0 +1,52 @@
+import { defineAction } from "@agent-native/core";
+import { z } from "zod";
+
+import { resolveSourceWorkspace } from "../server/source-workspace.js";
+
+export default defineAction({
+  description:
+    "List source files for a Design code workspace. In the current MVP this " +
+    "returns inline SQL-backed design_files by filename; future localhost and " +
+    "container source backends will use the same shape.",
+  schema: z.object({
+    designId: z.string().describe("Design project ID"),
+  }),
+  readOnly: true,
+  http: { method: "GET" },
+  run: async ({ designId }) => {
+    const workspace = await resolveSourceWorkspace(designId);
+    const readonly = !workspace.canEdit || workspace.sourceType !== "inline";
+    return {
+      designId,
+      backend: {
+        kind: "virtual-inline" as const,
+        workspaceUri: `designfs://${designId}/`,
+        designId,
+        capabilities: {
+          readFile: true,
+          writeFile: workspace.canEdit && workspace.sourceType === "inline",
+          diff: true,
+        },
+      },
+      sourceType: workspace.sourceType,
+      files: workspace.files.map((file) => ({
+        path: file.filename,
+        displayName: file.filename,
+        kind: "file" as const,
+        sourceType: workspace.sourceType,
+        fileId: file.id,
+        readonly,
+        reason: readonly
+          ? workspace.canEdit
+            ? "Only inline Design files are editable in this MVP."
+            : "You need editor access to change this file."
+          : undefined,
+        language:
+          file.fileType === "html" || file.fileType === "css"
+            ? file.fileType
+            : undefined,
+        updatedAt: file.updatedAt,
+      })),
+    };
+  },
+});

package/corpus/templates/design/actions/navigate.ts

@@ -18,7 +18,7 @@
  *   --designId   Design ID (for editor/present views)
  *   --editorView Editor mode for designs: single or overview
  *   --inspectorTab Inspector tab for designs: design or tweaks (extensions opens Tools for compatibility)
- *   --leftPanel  Left editor panel: file, agent, assets, tools, or tokens
+ *   --leftPanel  Left editor panel: file, agent, assets, tools, tokens, or code
  *   --fileId     Screen/file id to focus in the design editor
  *   --filename   Screen filename to focus in the design editor
  *   --tool       Design editor tool to activate
@@ -53,11 +53,12 @@ const designLeftPanelSchema = z.enum([
   "assets",
   "tools",
   "tokens",
+  "code",
 ]);
 
 export default defineAction({
   description:
-    "Navigate the UI to a specific view or path. Views: list, editor, design-systems, present, settings. Use --designId with editor/present views and --designSystemId with design-systems. For designs, use editorView=overview to show the infinite screens canvas, or editorView=single with fileId/filename/screen to focus a screen. Use leftPanel=file|agent|assets|tools|tokens to focus the Figma-style left rail. Legacy inspectorTab=extensions opens Tools. Use tool to activate a design editor tool.",
+    "Navigate the UI to a specific view or path. Views: list, editor, design-systems, present, settings. Use --designId with editor/present views and --designSystemId with design-systems. For designs, use editorView=overview to show the infinite screens canvas, or editorView=single with fileId/filename/screen to focus a screen. Use leftPanel=file|agent|assets|tools|tokens|code to focus the left rail, including the wide Code workspace. Legacy inspectorTab=extensions opens Tools. Use tool to activate a design editor tool.",
   schema: z
     .object({
       view: z