@agent-native/core 0.79.25 → 0.79.27

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

@@ -570,8 +570,48 @@ function ensureAmplitude(): boolean {
   return true;
 }
 
+function hasOnlySourcelessFrames(value: {
+  stacktrace?: {
+    frames?: Array<{
+      filename?: unknown;
+      abs_path?: unknown;
+      function?: unknown;
+    }>;
+  };
+}): boolean {
+  const frames = value.stacktrace?.frames ?? [];
+  return (
+    frames.length === 0 ||
+    frames.every((frame) => {
+      const filename = String(frame.filename ?? frame.abs_path ?? "")
+        .trim()
+        .toLowerCase();
+      const functionName = String(frame.function ?? "").trim();
+      return (
+        !functionName &&
+        (!filename || filename === "undefined" || filename === "<anonymous>")
+      );
+    })
+  );
+}
+
+function isAgentNativeDocsUrl(url: string): boolean {
+  if (!url) return false;
+  try {
+    const parsed = new URL(url);
+    return (
+      parsed.hostname === "www.agent-native.com" ||
+      parsed.hostname === "agent-native.com"
+    );
+  } catch {
+    return false;
+  }
+}
+
 function shouldDropBrowserSentryNoise(event: Sentry.Event): boolean {
   const exceptionValues = event.exception?.values ?? [];
+  const requestUrl = event.request?.url?.toLowerCase() ?? "";
+  const isDocsPage = isAgentNativeDocsUrl(requestUrl);
   // AgentAutoContinueSignal is a control-flow sentinel thrown to bubble
   // out of the SSE stream parser when the agent run needs to be
   // auto-continued. It's caught by the chat adapter and is never a real
@@ -622,21 +662,35 @@ function shouldDropBrowserSentryNoise(event: Sentry.Event): boolean {
       ) {
         return false;
       }
-      const frames = value.stacktrace?.frames ?? [];
+      return hasOnlySourcelessFrames(value);
+    })
+  ) {
+    return true;
+  }
+  if (
+    isDocsPage &&
+    exceptionValues.some((value) => {
+      const exceptionValue = String(value.value ?? "").toLowerCase();
+      return exceptionValue.includes(
+        "window.webkit.messagehandlers.scrolleventhandler.postmessage",
+      );
+    })
+  ) {
+    return true;
+  }
+  if (
+    isDocsPage &&
+    exceptionValues.some((value) => {
+      const exceptionType = String(value.type ?? "")
+        .trim()
+        .toLowerCase();
+      const exceptionValue = String(value.value ?? "")
+        .trim()
+        .toLowerCase();
       return (
-        frames.length === 0 ||
-        frames.every((frame) => {
-          const filename = String(frame.filename ?? frame.abs_path ?? "")
-            .trim()
-            .toLowerCase();
-          const functionName = String(frame.function ?? "").trim();
-          return (
-            !functionName &&
-            (!filename ||
-              filename === "undefined" ||
-              filename === "<anonymous>")
-          );
-        })
+        exceptionType === "rangeerror" &&
+        exceptionValue.includes("maximum call stack") &&
+        hasOnlySourcelessFrames(value)
       );
     })
   ) {
@@ -669,7 +723,6 @@ function shouldDropBrowserSentryNoise(event: Sentry.Event): boolean {
     .map((value) => `${value.type ?? ""} ${value.value ?? ""}`)
     .join(" ")
     .toLowerCase();
-  const requestUrl = event.request?.url?.toLowerCase() ?? "";
   const breadcrumbText = (event.breadcrumbs ?? [])
     .map((crumb) => {
       const data = crumb.data as Record<string, unknown> | undefined;

package/corpus/core/src/client/blocks/index.ts

@@ -61,6 +61,8 @@ export {
   jsonExpression,
   attributeValue,
   createAttrReader,
+  childCodeFenceFields,
+  serializeChildCodeFenceFields,
   serializeSpecBlock,
   parseSpecBlock,
   type MdxJsxNode,

package/corpus/core/src/client/blocks/library/diagram.config.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
 
+import { childCodeFenceFields, serializeChildCodeFenceFields } from "../mdx.js";
 import type { BlockMdxConfig } from "../types.js";
 
 /**
@@ -9,10 +10,9 @@ import type { BlockMdxConfig } from "../types.js";
  * (`diagram.tsx`) consume one definition. Keeping it React-free means importing
  * it into a server module never pulls React into the Nitro/SSR bundle.
  *
- * The MDX `tag` + attribute shape MUST match the legacy `<Diagram … data={…} />`
- * encoding — the whole `data` object is serialized as one JSON `data` prop — so
- * stored `.mdx` round-trips byte-compatibly (the block originated in the plan
- * template before moving here).
+ * The MDX `tag` keeps backward compatibility with legacy
+ * `<Diagram … data={…} />` files while the current authoring form stores
+ * maintainable `html`/`css` as child code fences.
  */
 
 export interface DiagramNode {
@@ -157,22 +157,46 @@ export const diagramSchema = z
     });
   }) as unknown as z.ZodType<DiagramData>;
 
+function hasChildFenceData(data: DiagramData) {
+  return Boolean(data.html || data.css);
+}
+
+function graphDataForAttr(data: DiagramData): DiagramData | undefined {
+  const graph: DiagramData = {};
+  if (data.nodes?.length) graph.nodes = data.nodes;
+  if (data.edges?.length) graph.edges = data.edges;
+  if (data.notes?.length) graph.notes = data.notes;
+  if (Object.keys(graph).length > 0) return graph;
+  return hasChildFenceData(data) ? undefined : data;
+}
+
 /**
- * MDX config: the entire `data` object is serialized as one JSON `data` prop and
- * the element is self-closing — exactly the legacy `<Diagram id … data={…} />`
- * form. `toAttrs` returns `{ data }`; `fromAttrs` reads the `data` object,
- * mirroring the legacy `dataAttr(node, "data") ?? { nodes: [], edges: [] }`
- * default so plans missing the prop still parse.
+ * MDX config: new source uses normal fenced-code children:
+ *
+ * `<Diagram caption="...">` plus child `html` / `css` fences. Legacy
+ * `<Diagram data={...} />` remains accepted by `fromAttrs`; `toAttrs` keeps the
+ * `data` key present-but-undefined when using child fences so docs validation
+ * still recognizes old `data={...}` as a supported compatibility attribute.
  */
 export const diagramMdx: BlockMdxConfig<DiagramData> = {
   tag: "Diagram",
-  // The whole data object becomes one JSON `data` prop. Cast to the
-  // structured-attr member of `MdxAttrValue` — `DiagramData` is a closed
-  // interface without an index signature, which the union member requires.
-  toAttrs: (data) => ({ data: data as unknown as Record<string, unknown> }),
-  fromAttrs: (attrs) =>
-    (attrs.object<DiagramData>("data") ?? {
-      nodes: [],
-      edges: [],
-    }) as DiagramData,
+  toAttrs: (data) => ({
+    data: graphDataForAttr(data) as unknown as
+      | Record<string, unknown>
+      | undefined,
+    caption: data.caption,
+  }),
+  fromAttrs: (attrs) => ({
+    ...(attrs.object<DiagramData>("data") ?? {}),
+    ...(attrs.string("caption") !== undefined
+      ? { caption: attrs.string("caption") }
+      : {}),
+  }),
+  serializeChildren: (data) =>
+    serializeChildCodeFenceFields(data, { html: "html", css: "css" }),
+  parseChildren: (childNodes) =>
+    childCodeFenceFields<DiagramData>(childNodes, {
+      html: "html",
+      css: "css",
+    }),
 };

package/corpus/core/src/client/blocks/library/sanitize-html.ts

@@ -91,8 +91,48 @@ function cssSafetyText(value: string): string {
     .replace(/[\u0000-\u0020]+/g, "");
 }
 
+type SanitizeElementOptions = {
+  stripRuntimeDirectives?: boolean;
+  stripWireframeThemeClasses?: boolean;
+};
+
+const TAILWIND_THEME_COLORS =
+  /^(?:bg|text|border|ring|outline|divide|placeholder|from|via|to|accent|caret|decoration|fill|stroke)-(?:inherit|current|transparent|black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)(?:-\d{2,3})?(?:\/[\d.]+)?$/;
+const TAILWIND_ARBITRARY_THEME_COLOR =
+  /^(?:bg|text|border|ring|outline|divide|placeholder|from|via|to|accent|caret|decoration|fill|stroke)-\[/;
+const TAILWIND_SHADOW = /^shadow(?:$|-)/;
+
+function baseClassName(className: string): string {
+  let bracketDepth = 0;
+  let lastVariantSeparator = -1;
+  for (let index = 0; index < className.length; index += 1) {
+    const char = className[index];
+    if (char === "[") bracketDepth += 1;
+    if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+    if (char === ":" && bracketDepth === 0) lastVariantSeparator = index;
+  }
+  return className.slice(lastVariantSeparator + 1);
+}
+
+function isWireframeThemeClass(className: string): boolean {
+  const base = baseClassName(className);
+  return (
+    TAILWIND_THEME_COLORS.test(base) ||
+    TAILWIND_ARBITRARY_THEME_COLOR.test(base) ||
+    TAILWIND_SHADOW.test(base)
+  );
+}
+
+function stripWireframeThemeClasses(value: string): string {
+  return value
+    .split(/\s+/)
+    .filter(Boolean)
+    .filter((className) => !isWireframeThemeClass(className))
+    .join(" ");
+}
+
 /** Conservative no-DOM fallback for any non-browser code path (SSR). */
-function fallbackStrip(html: string): string {
+function fallbackStrip(html: string, options?: SanitizeElementOptions): string {
   // Drop the whole url attribute if its value (whitespace/control-stripped)
   // carries a dangerous scheme. Mirrors the DOM path for the rare no-DOMParser
   // case; entity-obfuscation isn't decoded here (the live DOM path handles it).
@@ -100,7 +140,7 @@ function fallbackStrip(html: string): string {
     const v = (dq ?? sq ?? uq ?? "").replace(/[\s\u0000-\u001f]+/g, "");
     return /^(?:javascript|vbscript):|^data:text\/html/i.test(v) ? "" : m;
   };
-  return html
+  let out = html
     .replace(
       /<\/?(?:script|style|iframe|object|embed|link|meta|base|form|noscript|frame|frameset|applet|marquee|portal)\b[^>]*>/gi,
       "",
@@ -113,16 +153,32 @@ function fallbackStrip(html: string): string {
     .replace(/\sstyle\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, (m) =>
       DANGEROUS_STYLE.test(m) ? "" : m,
     );
+  if (options?.stripWireframeThemeClasses) {
+    out = out.replace(
+      /\sclass\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi,
+      (_match, doubleQuoted, singleQuoted, bare) => {
+        const next = stripWireframeThemeClasses(
+          doubleQuoted ?? singleQuoted ?? bare ?? "",
+        );
+        return next ? ` class="${next}"` : "";
+      },
+    );
+  }
+  return out;
 }
 
-export function sanitizeWireframeHtml(html: string | undefined): string {
+export function sanitizeWireframeHtml(
+  html: string | undefined,
+  options?: { preserveThemeClasses?: boolean },
+): string {
   if (!html) return "";
+  const stripWireframeThemeClasses = !options?.preserveThemeClasses;
   if (typeof DOMParser === "undefined" || typeof document === "undefined") {
-    return fallbackStrip(html);
+    return fallbackStrip(html, { stripWireframeThemeClasses });
   }
   const doc = new DOMParser().parseFromString(html, "text/html");
   doc.querySelectorAll(BLOCKED_TAGS).forEach((el) => el.remove());
-  sanitizeElementAttributes(doc.body);
+  sanitizeElementAttributes(doc.body, { stripWireframeThemeClasses });
   return doc.body.innerHTML;
 }
 
@@ -242,7 +298,7 @@ function splitSelectorList(selectors: string): string[] {
 
 function sanitizeElementAttributes(
   root: ParentNode,
-  options?: { stripRuntimeDirectives?: boolean },
+  options?: SanitizeElementOptions,
 ) {
   root.querySelectorAll<HTMLElement>("*").forEach((el) => {
     for (const attr of Array.from(el.attributes)) {
@@ -269,6 +325,15 @@ function sanitizeElementAttributes(
       }
       if (name === "style" && DANGEROUS_STYLE.test(attr.value)) {
         el.removeAttribute(attr.name);
+        continue;
+      }
+      if (name === "class" && options?.stripWireframeThemeClasses) {
+        const next = stripWireframeThemeClasses(attr.value);
+        if (next) {
+          el.setAttribute(attr.name, next);
+        } else {
+          el.removeAttribute(attr.name);
+        }
       }
     }
     if (el instanceof HTMLTemplateElement) {

package/corpus/core/src/client/blocks/library/wireframe-kit.tsx

@@ -1425,9 +1425,9 @@ const gen = rough.generator();
 
 type RoughPath = { d: string; stroke: string; strokeWidth: number };
 
-/** The default selector used for HTML mockups: bordered/box-like elements. */
+/** The default selector used for HTML mockups: controls plus explicit opt-ins. */
 export const HTML_ROUGH_SELECTOR =
-  "[data-rough],button,input,textarea,select,.wf-card,.wf-box,hr,.wf-frame-target";
+  "[data-rough],button,input,textarea,select,hr";
 
 /** Stable per-element seed so a frame doesn't re-wobble on every measure. */
 function seedFrom(...parts: Array<string | number>): number {

package/corpus/core/src/client/blocks/library/wireframe.tsx

@@ -335,13 +335,19 @@ function HtmlArtboard({
   compact?: boolean;
 }) {
   const renderMode = data.renderMode ?? "wireframe";
+  const designMode = renderMode === "design";
   // Sanitize author HTML/CSS at the render point (defense-in-depth against stored
   // XSS). Self-contained in core via the shared block sanitizer (DOM-based in the
   // browser, regex fallback on the server) so the HTML mockup path renders in any
   // app without the host wiring a sanitizer hook.
   const safeHtml = useMemo(
-    () => renderWireframeIconHtml(sanitizeWireframeHtml(data.html)),
-    [data.html],
+    () =>
+      renderWireframeIconHtml(
+        sanitizeWireframeHtml(data.html, {
+          preserveThemeClasses: designMode,
+        }),
+      ),
+    [data.html, designMode],
   );
   const scopeId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
   const scopedCss = useMemo(() => {

package/corpus/core/src/client/blocks/mdx.ts

@@ -206,6 +206,65 @@ export function createAttrReader(node: MdxJsxNode): BlockAttrReader {
   };
 }
 
+type MdxCodeNode = {
+  type?: unknown;
+  lang?: unknown;
+  value?: unknown;
+};
+
+function codeFenceFor(value: string): string {
+  const longestBacktickRun =
+    value.match(/`+/g)?.reduce((max, run) => Math.max(max, run.length), 0) ?? 0;
+  return "`".repeat(Math.max(3, longestBacktickRun + 1));
+}
+
+function codeFenceLang(value: unknown): string | undefined {
+  return typeof value === "string"
+    ? value.trim().split(/\s+/)[0]?.toLowerCase()
+    : undefined;
+}
+
+/**
+ * Convert named MDX child code fences into block data fields. This keeps source
+ * authoring normal Markdown/MDX while letting block specs opt into conventions
+ * such as "```html" -> data.html and "```css" -> data.css.
+ */
+export function childCodeFenceFields<TData extends object>(
+  childNodes: unknown[],
+  fieldsByLang: Record<string, keyof TData & string>,
+): Partial<TData> {
+  const out: Partial<TData> = {};
+  for (const node of childNodes as MdxCodeNode[]) {
+    if (!node || node.type !== "code" || typeof node.value !== "string") {
+      continue;
+    }
+    const field = fieldsByLang[codeFenceLang(node.lang) ?? ""];
+    if (field) {
+      (out as Record<string, string>)[field] = node.value;
+    }
+  }
+  return out;
+}
+
+/**
+ * Serialize selected string data fields as named child code fences. Uses a fence
+ * length that cannot be closed by the field body.
+ */
+export function serializeChildCodeFenceFields<TData extends object>(
+  data: TData,
+  fieldsByLang: Record<string, keyof TData & string>,
+): string {
+  const fences: string[] = [];
+  const record = data as Record<string, unknown>;
+  for (const [lang, field] of Object.entries(fieldsByLang)) {
+    const value = record[field];
+    if (typeof value !== "string" || value.length === 0) continue;
+    const fence = codeFenceFor(value);
+    fences.push(`${fence}${lang}\n${value.trimEnd()}\n${fence}`);
+  }
+  return fences.length ? `\n${fences.join("\n\n")}\n` : "";
+}
+
 /* -------------------------------------------------------------------------- */
 /* Registry serialize / parse                                                 */
 /* -------------------------------------------------------------------------- */
@@ -254,7 +313,9 @@ export function serializeSpecBlock(
 
   // Custom nested-MDX children (e.g. wireframe Screen/kit tree).
   if (spec.mdx.serializeChildren) {
-    return `<${tag}${base}${attrStr}>\n${spec.mdx.serializeChildren(block.data)}\n</${tag}>`;
+    const children = spec.mdx.serializeChildren(block.data);
+    if (!children.trim()) return `<${tag}${base}${attrStr} />`;
+    return `<${tag}${base}${attrStr}>\n${children}\n</${tag}>`;
   }
 
   // Prose children (rich-text, callout): body is a trimmed markdown string.

package/corpus/core/src/client/blocks/server.ts

@@ -36,6 +36,8 @@ export {
   jsonExpression,
   attributeValue,
   createAttrReader,
+  childCodeFenceFields,
+  serializeChildCodeFenceFields,
   serializeSpecBlock,
   parseSpecBlock,
   type MdxJsxNode,

package/corpus/core/src/client/blocks/types.ts

@@ -76,10 +76,11 @@ export interface BlockMdxConfig<TData> {
    */
   childrenField?: keyof TData & string;
   /**
-   * Opt-in custom children serializer for blocks whose internals are nested MDX
-   * components rather than a single markdown string (e.g. wireframe → Screen/kit
-   * primitives). When present it overrides `childrenField`. `serializeChildren`
-   * returns the raw inner MDX; `parseChildren` receives the child MDX AST nodes.
+   * Opt-in custom children serializer/parser for blocks whose internals are
+   * nested MDX components or named child code fences rather than a single
+   * markdown string. When `serializeChildren` is present it overrides
+   * `childrenField`. `parseChildren` may also be used as a parse-only adapter
+   * for backward-compatible child forms.
    */
   serializeChildren?: (data: TData) => string;
   parseChildren?: (childNodes: unknown[], idContext: string) => Partial<TData>;

package/corpus/core/src/client/chat/message-components.tsx

@@ -37,7 +37,7 @@ import {
   IconPencil,
   IconLoader2,
 } from "@tabler/icons-react";
-import React, { useState, useEffect, useCallback, useRef, useId } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 
 import { getActiveRun } from "../active-run-state.js";
 import { agentNativePath } from "../api-path.js";
@@ -950,16 +950,8 @@ export function RunningActivityStatus({ label }: { label: string }) {
 }
 
 export function ThinkingIndicator({
-  label = "Thinking",
+  label = "thinking",
 }: { label?: string } = {}) {
-  const reactId = useId().replace(/:/g, "");
-  const maskId = `agent-thinking-mask-${reactId}`;
-  const gradientId = `agent-thinking-gradient-${reactId}`;
-  const textX = 27;
-  const textWidth = Math.max(44, Math.min(96, label.length * 6.35));
-  const ellipsisX = textX + textWidth - 0.8;
-  const viewBoxWidth = ellipsisX + 13;
-  const shimmerWidth = viewBoxWidth * 0.68;
   return (
     <div
       className="agent-thinking-indicator"
@@ -967,95 +959,7 @@ export function ThinkingIndicator({
       aria-live="polite"
       aria-label={label}
     >
-      <svg
-        className="agent-thinking-indicator__glyph"
-        viewBox={`0 0 ${viewBoxWidth} 18`}
-        style={
-          {
-            "--agent-thinking-width": `${viewBoxWidth / 16}rem`,
-          } as React.CSSProperties
-        }
-        aria-hidden="true"
-        focusable="false"
-      >
-        <defs>
-          <linearGradient id={gradientId} x1="0" x2="1" y1="0" y2="0">
-            <stop
-              className="agent-thinking-indicator__sheen-edge"
-              offset="0%"
-            />
-            <stop
-              className="agent-thinking-indicator__sheen-mid"
-              offset="50%"
-            />
-            <stop
-              className="agent-thinking-indicator__sheen-edge"
-              offset="100%"
-            />
-          </linearGradient>
-          <mask id={maskId} maskUnits="userSpaceOnUse">
-            <g fill="white">
-              <g
-                className="agent-thinking-indicator__logo"
-                transform="translate(0 2.7) scale(0.9)"
-              >
-                <path d="M5.1 14H0L3.1 8.4 7.8 0 12.5 8.4H8.2L5.1 14Z" />
-                <path d="M19.5 0H24L16.6 14H12.1L19.5 0Z" />
-              </g>
-              <text
-                x={textX}
-                y="13"
-                fontFamily='Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
-                fontSize="13"
-                fontWeight="500"
-                letterSpacing="0"
-              >
-                {label}
-              </text>
-              <g
-                fontFamily='Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
-                fontSize="13"
-                fontWeight="500"
-              >
-                <text
-                  className="agent-thinking-indicator__ellipsis-dot agent-thinking-indicator__ellipsis-dot--1"
-                  x={ellipsisX}
-                  y="13"
-                >
-                  .
-                </text>
-                <text
-                  className="agent-thinking-indicator__ellipsis-dot agent-thinking-indicator__ellipsis-dot--2"
-                  x={ellipsisX + 3.7}
-                  y="13"
-                >
-                  .
-                </text>
-                <text
-                  className="agent-thinking-indicator__ellipsis-dot agent-thinking-indicator__ellipsis-dot--3"
-                  x={ellipsisX + 7.4}
-                  y="13"
-                >
-                  .
-                </text>
-              </g>
-            </g>
-          </mask>
-        </defs>
-        <g mask={`url(#${maskId})`}>
-          <rect
-            className="agent-thinking-indicator__base"
-            width={viewBoxWidth}
-            height="18"
-          />
-          <rect
-            className="agent-thinking-indicator__shimmer"
-            width={shimmerWidth}
-            height="18"
-            fill={`url(#${gradientId})`}
-          />
-        </g>
-      </svg>
+      <span className="agent-thinking-indicator__text">{label}</span>
     </div>
   );
 }