@agent-native/core 0.84.21 → 0.84.23

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: 4941
+- template files: 4967

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @agent-native/core
 
+## 0.84.23
+
+### Patch Changes
+
+- fde28eb: Expose notification delivery channel results so callers can distinguish custom-channel delivery from inbox persistence.
+- fde28eb: Re-enable Claude Sonnet 5 as the visible and default Sonnet model now that the Builder gateway supports it.
+- fde28eb: Sharpen the exported Design skill's quality bar to defeat "AI slop": frame the variant flow as separating taste/exploration/spec/code, pair every banned default with a concrete alternative, warn about second-order convergence, and add explicit guidance for building on an existing design system or codebase.
+
+## 0.84.22
+
+### Patch Changes
+
+- 72d6a3e: Add built-in Slack webhook and email notification channels, keep chat status visible through auto-continuation handoffs, and make guided-question option values authoritative in follow-up context.
+- 72d6a3e: Send both Builder upload compression-skip query params for compatibility with the production upload API rollout.
+- 72d6a3e: Make the document Report-Only script-src CSP account for the framework-injected Google Analytics / Tag Manager loader and inline gtag config script, so GA no longer triggers a CSP violation on every page load (it was Report-Only, so GA was never actually blocked) and the policy stays safe to graduate to enforcement.
+
 ## 0.84.21
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.84.21",
+  "version": "0.84.23",
   "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/agent/model-config.ts

@@ -120,7 +120,7 @@ export function getContextWindowForModel(modelId: string): number {
   return DEFAULT_CONTEXT_WINDOW;
 }
 
-const ENABLE_CLAUDE_SONNET_5 = false;
+const ENABLE_CLAUDE_SONNET_5 = true;
 
 export const CLAUDE_SONNET_MODEL_ID = ENABLE_CLAUDE_SONNET_5
   ? "claude-sonnet-5"

package/corpus/core/src/cli/skills.ts

@@ -363,14 +363,28 @@ iteration, or a human-in-the-loop choice among design directions.
 
 ## Design Quality Bar
 
+Generic "AI slop" comes from letting one prompt set taste, explore, and emit code
+at once — so the model returns the training-average (Inter, an indigo/violet
+gradient, a centered hero, three rounded cards). The variant flow above exists to
+separate those jobs; use it, and hold this bar:
+
 - Before generating, name the concrete audience, the screen's primary job, and
   the visual thesis. If the brief is vague, make a reasonable choice and state
   it instead of producing a generic dashboard/landing-page default.
-- For existing products, inspect the current screen, design system, tokens,
-  component language, or codebase context before inventing a new direction.
+- Refuse the defaults, and pair every "don't" with a "do" (banning Inter alone
+  just makes you reach for Roboto). Avoid Inter/Roboto/system fonts, the
+  indigo/violet slop palette (\`#6366F1\`/\`#8B5CF6\`/\`#A855F7\`) and purple-on-white
+  gradients, and centered-hero + three-icon-card layouts; instead pick a
+  distinctive font pairing, one non-default palette family with a single decisive
+  accent, and an asymmetric layout with a clear focal point.
 - Make each direction distinct in structure and behavior, not just palette.
   Give every variant one memorable signature choice, then keep the surrounding
-  chrome disciplined.
+  chrome disciplined. Even your creative picks converge (Space Grotesk
+  everywhere) — vary deliberately so two directions never share a fingerprint.
+- For existing products, inspect the current screen, design system, tokens, and
+  component language before inventing a new direction. Treat any drift back to a
+  default as a missing token to pin, and vary layout per screen so on-brand does
+  not become same-in-your-colors.
 - Treat copy, data, and imagery as design material. Use realistic domain
   content and first-party/generated assets when images matter; avoid lorem
   ipsum, vague SaaS filler, and decorative placeholder boxes.

package/corpus/core/src/client/AssistantChat.tsx

@@ -233,6 +233,7 @@ const PENDING_SELECTION_KEY = "pending-selection-context";
 const ACTIVE_RUN_CLEAR_TIMEOUT_MS = 5_000;
 const ACTIVE_RUN_STUCK_THRESHOLD_MS = 90_000;
 const ACTIVE_RUN_POLL_INTERVAL_MS = 150;
+const AUTO_RESUME_STATUS_TIMEOUT_MS = 30_000;
 // How long a single activity (model call, tool prep, long tool) must stay
 // in-flight before its label is surfaced in the running indicator. Below this
 // the indicator stays a steady "Thinking" so normal fast turns don't flicker
@@ -1410,6 +1411,7 @@ const AssistantChatInner = forwardRef<
   // True during the 250ms continuation window and startup of the next chunk
   // (adapter's auto-continue delay before POSTing the next chunk).
   const [isAutoResuming, setIsAutoResuming] = useState(false);
+  const autoResumeTimerRef = useRef<number | null>(null);
   const [optimisticRunning, setOptimisticRunning] = useState(false);
   const [runningActivityLabel, setRunningActivityLabel] = useState<
     string | null
@@ -2491,20 +2493,41 @@ const AssistantChatInner = forwardRef<
     const handler = (e: Event) => {
       const detail = (e as CustomEvent).detail as { tabId?: string };
       if (tabId && detail?.tabId && detail.tabId !== tabId) return;
+      if (autoResumeTimerRef.current !== null) {
+        window.clearTimeout(autoResumeTimerRef.current);
+      }
       setIsAutoResuming(true);
+      autoResumeTimerRef.current = window.setTimeout(() => {
+        autoResumeTimerRef.current = null;
+        setIsAutoResuming(false);
+      }, AUTO_RESUME_STATUS_TIMEOUT_MS);
     };
     window.addEventListener("agent-chat:auto-continue", handler);
-    return () =>
+    return () => {
+      if (autoResumeTimerRef.current !== null) {
+        window.clearTimeout(autoResumeTimerRef.current);
+        autoResumeTimerRef.current = null;
+      }
       window.removeEventListener("agent-chat:auto-continue", handler);
+    };
   }, [tabId]);
 
-  // Clear auto-resume state when the run stops.
+  // Clear auto-resume once the next chunk has visibly started or the user stops.
+  // Do not clear solely because `isRunning` is false: auto-resume intentionally
+  // covers that between-chunk gap so the chat never looks idle while work is
+  // still scheduled.
   useEffect(() => {
-    if (!isRunning) {
+    if (isRunning || forceStopped) {
+      if (autoResumeTimerRef.current !== null) {
+        window.clearTimeout(autoResumeTimerRef.current);
+        autoResumeTimerRef.current = null;
+      }
       setIsAutoResuming(false);
+    }
+    if (!isRunning && !isAutoResuming) {
       resetRunningActivity();
     }
-  }, [isRunning, resetRunningActivity]);
+  }, [forceStopped, isAutoResuming, isRunning, resetRunningActivity]);
 
   // Auto-dequeue: when the agent is idle, send the next queued message. This
   // intentionally does not depend on observing the running -> idle transition:

package/corpus/core/src/client/guided-questions.tsx

@@ -150,6 +150,16 @@ export function formatGuidedAnswersForAgent(
     .join("\n");
 }
 
+function defaultGuidedSubmitContext(formattedAnswers: string): string {
+  return [
+    "The user answered the guided questions.",
+    "Use the selected option values below as authoritative. If an answer includes exact ids, file names, or action instructions, follow those exact details instead of inferring them.",
+    "",
+    "Answers:",
+    formattedAnswers,
+  ].join("\n");
+}
+
 /** A single option for {@link askUserQuestion}. Mirrors the agent `ask-question`
  *  tool and Claude Code's AskUserQuestion option shape. */
 export interface AskUserQuestionOption {
@@ -1080,12 +1090,7 @@ export function useGuidedQuestionFlow({
       const resolvedSubmitMessage = payload?.submitMessage ?? submitMessage;
       const context =
         buildSubmitContext?.({ answers, formattedAnswers }) ??
-        [
-          "The user answered the pre-generation questions.",
-          "",
-          "Answers:",
-          formattedAnswers,
-        ].join("\n");
+        defaultGuidedSubmitContext(formattedAnswers);
       sendToAgentChat({
         message: resolvedSubmitMessage,
         context,

package/corpus/core/src/client/tool-display.ts

@@ -1,6 +1,14 @@
+const TOOL_DISPLAY_NAMES: Record<string, string> = {
+  "delete-file": "delete screen",
+  "get-design-snapshot": "get screen snapshot",
+  "edit-design": "edit screen",
+};
+
 export function humanizeToolName(toolName: string | undefined): string {
   const raw = (toolName ?? "").trim();
   if (!raw) return "tool";
+  const displayName = TOOL_DISPLAY_NAMES[raw];
+  if (displayName) return displayName;
 
   let name = raw;
   if (name.startsWith("mcp__")) {

package/corpus/core/src/file-upload/builder.ts

@@ -44,6 +44,11 @@ function fetchWithTimeout(url: string, init: RequestInit): Promise<Response> {
   );
 }
 
+function setSkipCompressionQueryParams(url: URL): void {
+  url.searchParams.set("skipCompressionWait", "true");
+  url.searchParams.set("skipCompression", "true");
+}
+
 async function assertOk(res: Response, label: string): Promise<void> {
   if (!res.ok) {
     const body = await res.text().catch(() => "");
@@ -154,7 +159,7 @@ async function completeBuilderUpload(
   const host = builderUploadHost();
   const url = new URL("/api/v1/upload/complete", host);
   if (options?.skipCompressionWait) {
-    url.searchParams.set("skipCompressionWait", "true");
+    setSkipCompressionQueryParams(url);
   }
   const res = await fetchWithTimeout(url.toString(), {
     method: "POST",
@@ -255,7 +260,7 @@ export const builderFileUploadProvider: FileUploadProvider = {
     const url = new URL("/api/v1/upload", builderUploadHost());
     if (filename) url.searchParams.set("name", filename);
     if (input.skipCompressionWait) {
-      url.searchParams.set("skipCompressionWait", "true");
+      setSkipCompressionQueryParams(url);
     }
 
     const response = await uploadSmallFile(url, {

package/corpus/core/src/notifications/channels.ts

@@ -10,6 +10,16 @@
  *                              value never enters the agent context.
  * NOTIFICATIONS_WEBHOOK_AUTH → optional `Authorization` header value (also
  *                              supports `${keys.NAME}`).
+ * NOTIFICATIONS_SLACK_WEBHOOK_URL
+ *                            → POST notifications to a Slack incoming webhook.
+ *                              Supports `${keys.NAME}` substitution.
+ * NOTIFICATIONS_EMAIL_CHANNEL=1
+ *                            → enable the built-in email channel for
+ *                              per-notification recipients.
+ * NOTIFICATIONS_EMAIL_RECIPIENTS
+ *                            → comma-separated fallback recipients for email
+ *                              notifications that do not pass
+ *                              `metadata.emailRecipients`.
  */
 
 import { ssrfSafeFetch } from "../extensions/url-safety.js";
@@ -18,6 +28,7 @@ import {
   validateUrlAllowlist,
   getKeyAllowlist,
 } from "../secrets/substitution.js";
+import { sendEmail } from "../server/email.js";
 import { registerNotificationChannel } from "./registry.js";
 import type { NotificationChannel } from "./types.js";
 
@@ -31,6 +42,16 @@ export function registerBuiltinNotificationChannels(): void {
   if (url) {
     registerNotificationChannel(createWebhookChannel(url));
   }
+
+  const slackUrl = process.env.NOTIFICATIONS_SLACK_WEBHOOK_URL;
+  if (slackUrl) {
+    registerNotificationChannel(createSlackWebhookChannel(slackUrl));
+  }
+
+  const emailRecipients = process.env.NOTIFICATIONS_EMAIL_RECIPIENTS?.trim();
+  if (process.env.NOTIFICATIONS_EMAIL_CHANNEL === "1" || emailRecipients) {
+    registerNotificationChannel(createEmailChannel());
+  }
 }
 
 function createWebhookChannel(urlTemplate: string): NotificationChannel {
@@ -38,47 +59,12 @@ function createWebhookChannel(urlTemplate: string): NotificationChannel {
   return {
     name: "webhook",
     async deliver(input, meta) {
-      // Resolve `${keys.NAME}` references against the owner's user-scope
-      // secrets. Missing keys throw — the error surfaces in logs and the
-      // channel is marked un-delivered, but other channels still run.
-      const { resolved: url } = await resolveKeyReferences(
+      const { url, headers } = await resolveWebhookRequest(
         urlTemplate,
-        "user",
+        authTemplate,
         meta.owner,
+        "webhook",
       );
-      const headers: Record<string, string> = {
-        "Content-Type": "application/json",
-      };
-      if (authTemplate) {
-        const { resolved: auth } = await resolveKeyReferences(
-          authTemplate,
-          "user",
-          meta.owner,
-        );
-        headers.Authorization = auth;
-      }
-
-      // If the user set an allowlist on a referenced key, enforce it here —
-      // origin-level check, same rule the automations fetch-tool applies.
-      const keyNames = Array.from(
-        new Set(
-          Array.from(
-            urlTemplate.matchAll(/\$\{keys\.([A-Za-z0-9_-]+)\}/g),
-            (m) => m[1],
-          ),
-        ),
-      );
-      const allowlists = await Promise.all(
-        keyNames.map((name) => getKeyAllowlist(name, "user", meta.owner)),
-      );
-      keyNames.forEach((name, i) => {
-        if (!validateUrlAllowlist(url, allowlists[i])) {
-          throw new Error(
-            `[notifications] webhook URL ${new URL(url).origin} is not in the allowlist for key "${name}"`,
-          );
-        }
-      });
-
       const res = await ssrfSafeFetch(
         url,
         {
@@ -106,6 +92,217 @@ function createWebhookChannel(urlTemplate: string): NotificationChannel {
   };
 }
 
+function createSlackWebhookChannel(urlTemplate: string): NotificationChannel {
+  const authTemplate = process.env.NOTIFICATIONS_SLACK_WEBHOOK_AUTH;
+  return {
+    name: "slack",
+    async deliver(input, meta) {
+      const { url, headers } = await resolveWebhookRequest(
+        urlTemplate,
+        authTemplate,
+        meta.owner,
+        "Slack webhook",
+      );
+      const res = await ssrfSafeFetch(
+        url,
+        {
+          method: "POST",
+          headers,
+          body: JSON.stringify({
+            text: slackText(input.severity, input.title, input.body),
+            blocks: [
+              {
+                type: "section",
+                text: {
+                  type: "mrkdwn",
+                  text: `*${escapeSlack(input.title)}*`,
+                },
+              },
+              ...(input.body
+                ? [
+                    {
+                      type: "section",
+                      text: {
+                        type: "mrkdwn",
+                        text: escapeSlack(input.body),
+                      },
+                    },
+                  ]
+                : []),
+              {
+                type: "context",
+                elements: [
+                  {
+                    type: "mrkdwn",
+                    text: `Severity: \`${input.severity}\`  Owner: ${escapeSlack(meta.owner)}`,
+                  },
+                ],
+              },
+            ],
+          }),
+        },
+        { maxRedirects: 3 },
+      );
+      if (!res.ok) {
+        throw new Error(
+          `[notifications] Slack webhook ${new URL(url).origin} returned ${res.status}${
+            (await readErrorSnippet(res)) || ""
+          }`,
+        );
+      }
+    },
+  };
+}
+
+function createEmailChannel(): NotificationChannel {
+  return {
+    name: "email",
+    async deliver(input) {
+      const recipients = notificationEmailRecipients(input.metadata);
+      if (recipients.length === 0) return;
+      const subject =
+        typeof input.metadata?.emailSubject === "string" &&
+        input.metadata.emailSubject.trim()
+          ? input.metadata.emailSubject.trim()
+          : `[${input.severity}] ${input.title}`;
+      const metadata = scrubEmailMetadata(input.metadata);
+      const metadataText = metadata
+        ? `\n\nMetadata:\n${JSON.stringify(metadata, null, 2)}`
+        : "";
+      const text = `${input.title}\n\n${input.body ?? ""}${metadataText}`;
+      const html = [
+        `<p><strong>${escapeHtml(input.title)}</strong></p>`,
+        input.body ? `<p>${escapeHtml(input.body)}</p>` : "",
+        metadata
+          ? `<pre>${escapeHtml(JSON.stringify(metadata, null, 2))}</pre>`
+          : "",
+      ].join("");
+
+      await Promise.all(
+        recipients.map((to) =>
+          sendEmail({
+            to,
+            subject,
+            text,
+            html,
+          }),
+        ),
+      );
+    },
+  };
+}
+
+async function resolveWebhookRequest(
+  urlTemplate: string,
+  authTemplate: string | undefined,
+  owner: string,
+  label: string,
+): Promise<{ url: string; headers: Record<string, string> }> {
+  // Resolve `${keys.NAME}` references against the owner's user-scope secrets.
+  // Missing keys throw — the error surfaces in logs and the channel is marked
+  // un-delivered, but other channels still run.
+  const { resolved: url } = await resolveKeyReferences(
+    urlTemplate,
+    "user",
+    owner,
+  );
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+  if (authTemplate) {
+    const { resolved: auth } = await resolveKeyReferences(
+      authTemplate,
+      "user",
+      owner,
+    );
+    headers.Authorization = auth;
+  }
+
+  // If the user set an allowlist on a referenced key, enforce it here —
+  // origin-level check, same rule the automations fetch-tool applies.
+  const keyNames = Array.from(
+    new Set(
+      Array.from(urlTemplate.matchAll(/\$\{keys\.([A-Za-z0-9_-]+)\}/g), (m) =>
+        String(m[1]),
+      ),
+    ),
+  );
+  const allowlists = await Promise.all(
+    keyNames.map((name) => getKeyAllowlist(name, "user", owner)),
+  );
+  keyNames.forEach((name, i) => {
+    if (!validateUrlAllowlist(url, allowlists[i])) {
+      throw new Error(
+        `[notifications] ${label} URL ${new URL(url).origin} is not in the allowlist for key "${name}"`,
+      );
+    }
+  });
+  return { url, headers };
+}
+
+function notificationEmailRecipients(
+  metadata: Record<string, unknown> | undefined,
+): string[] {
+  const fromMetadata = stringArray(metadata?.emailRecipients);
+  const fromEnv = commaList(process.env.NOTIFICATIONS_EMAIL_RECIPIENTS);
+  const seen = new Set<string>();
+  const recipients: string[] = [];
+  for (const raw of [...fromMetadata, ...fromEnv]) {
+    const email = raw.trim().toLowerCase();
+    if (!email || seen.has(email)) continue;
+    seen.add(email);
+    recipients.push(email);
+  }
+  return recipients;
+}
+
+function stringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter((item): item is string => typeof item === "string");
+}
+
+function commaList(value: string | undefined): string[] {
+  return value
+    ? value
+        .split(",")
+        .map((item) => item.trim())
+        .filter(Boolean)
+    : [];
+}
+
+function scrubEmailMetadata(
+  metadata: Record<string, unknown> | undefined,
+): Record<string, unknown> | null {
+  if (!metadata) return null;
+  const entries = Object.entries(metadata).filter(
+    ([key]) => key !== "emailRecipients" && key !== "emailSubject",
+  );
+  return entries.length ? Object.fromEntries(entries) : null;
+}
+
+function slackText(
+  severity: string,
+  title: string,
+  body: string | undefined,
+): string {
+  return `[${severity}] ${title}${body ? `\n${body}` : ""}`;
+}
+
+function escapeSlack(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
 /**
  * Read up to ~1 KB from the body for error context. Streams chunks so a
  * misbehaving endpoint returning a large error page doesn't pin that whole

package/corpus/core/src/notifications/index.ts

@@ -8,6 +8,7 @@ export type {
 
 export {
   notify,
+  notifyWithDelivery,
   registerNotificationChannel,
   unregisterNotificationChannel,
   listNotificationChannels,

package/corpus/core/src/notifications/registry.ts

@@ -13,6 +13,11 @@ import {
   type Notification,
 } from "./types.js";
 
+export interface NotificationDeliveryResult {
+  notification?: Notification;
+  deliveredChannels: string[];
+}
+
 registerEvent({
   name: "notification.sent",
   description:
@@ -84,6 +89,13 @@ export async function notify(
   input: NotificationInput,
   meta: NotificationMeta,
 ): Promise<Notification | undefined> {
+  return (await notifyWithDelivery(input, meta)).notification;
+}
+
+export async function notifyWithDelivery(
+  input: NotificationInput,
+  meta: NotificationMeta,
+): Promise<NotificationDeliveryResult> {
   if (!meta?.owner) {
     throw new Error("notify: meta.owner is required");
   }
@@ -166,7 +178,7 @@ export async function notify(
     }
   }
 
-  return stored;
+  return { notification: stored, deliveredChannels: delivered };
 }
 
 function selectChannels(allowlist?: string[]): NotificationChannel[] {

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

@@ -39,14 +39,30 @@ function getGaMeasurementId(): string | null {
   );
 }
 
-function getGaScript(): string | null {
+/**
+ * Script hosts the injected GA loader pulls executable code from. Google Tag
+ * Manager serves `gtag/js`, and GA4 can lazy-load additional collectors from
+ * `www.google-analytics.com`. These must be listed in the document `script-src`
+ * so the CSP reflects the code the framework itself injects (see
+ * `applyDocumentCsp` in `ssr-handler.ts`).
+ */
+export const GA_CSP_SCRIPT_HOSTS = [
+  "https://www.googletagmanager.com",
+  "https://www.google-analytics.com",
+] 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
+ * hash it for the `script-src` CSP directive — the hash must be computed from
+ * the identical string that `getGaScript()` embeds, so both call this helper.
+ * Returns `null` when GA is not configured.
+ */
+export function getGaInlineConfigScriptBody(): string | null {
   const id = getGaMeasurementId();
   if (!id) return null;
-  const srcId = encodeURIComponent(id);
   const jsId = JSON.stringify(id);
   return (
-    `<script async src="https://www.googletagmanager.com/gtag/js?id=${srcId}"></script>` +
-    `<script>` +
     `window.dataLayer=window.dataLayer||[];` +
     `function gtag(){dataLayer.push(arguments);}` +
     `gtag('js',new Date());` +
@@ -54,8 +70,18 @@ function getGaScript(): string | null {
     `if(typeof sessionStorage!=='undefined'&&sessionStorage.getItem('__an_signin')){` +
     `sessionStorage.removeItem('__an_signin');` +
     `gtag('event','sign_in');` +
-    `}` +
-    `</script>`
+    `}`
+  );
+}
+
+function getGaScript(): string | null {
+  const id = getGaMeasurementId();
+  if (!id) return null;
+  const srcId = encodeURIComponent(id);
+  const inlineBody = getGaInlineConfigScriptBody();
+  return (
+    `<script async src="https://www.googletagmanager.com/gtag/js?id=${srcId}"></script>` +
+    `<script>${inlineBody}</script>`
   );
 }