@agent-native/core 0.79.26 → 0.80.0

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

@@ -34,6 +34,7 @@ import React, {
   useImperativeHandle,
 } from "react";
 
+import { LLM_MISSING_CREDENTIALS_MESSAGE } from "../agent/engine/credential-errors.js";
 import type { ReasoningEffort } from "../shared/reasoning-effort.js";
 import {
   getActiveRun,
@@ -48,9 +49,11 @@ import {
 import {
   appendAgentChatContextToMessage,
   formatAgentChatContextItemsForPrompt,
+  getAgentChatContextState,
   normalizeAgentChatContextItem,
   publishAgentChatContextItems,
   refreshAgentChatContext,
+  subscribeAgentChatContext,
   type AgentChatContextItem,
 } from "./agent-chat.js";
 import { captureError } from "./analytics.js";
@@ -147,7 +150,10 @@ import {
   readSSEStreamRaw,
   settleInterruptedToolCalls,
 } from "./sse-event-processor.js";
-import { useAgentEngineConfigured } from "./use-agent-engine-configured.js";
+import {
+  fetchAgentEngineConfiguredState,
+  useAgentEngineConfigured,
+} from "./use-agent-engine-configured.js";
 import type {
   ChatThreadScope,
   ChatThreadSnapshot,
@@ -223,6 +229,7 @@ function createUserMessageRunConfig(
 const PENDING_SELECTION_KEY = "pending-selection-context";
 const ACTIVE_RUN_CLEAR_TIMEOUT_MS = 5_000;
 const ACTIVE_RUN_POLL_INTERVAL_MS = 150;
+const SUBMIT_ENGINE_STATUS_TIMEOUT_MS = 1000;
 
 type ActiveRunLookup = {
   active?: boolean;
@@ -1131,15 +1138,32 @@ const AssistantChatInner = forwardRef<
       }
     };
   }, [threadRuntime]);
-  const missingApiKey = useAgentEngineConfigured(
+  const agentEngineConfigured = useAgentEngineConfigured(
     providerStatusChecksEnabled,
-  ).missing;
+  );
+  const missingApiKey = agentEngineConfigured.missing;
   const isComposerDisabled = missingApiKey || composerDisabled;
   const missingApiKeySetupAboveComposer =
     missingApiKeySetupLayout === "sidebar";
   // Increments each time the user tries to chat while no LLM is connected.
   // `BuilderSetupCard` watches this to replay a one-shot bounce.
   const [missingKeyBouncePulse, setMissingKeyBouncePulse] = useState(0);
+  const ensureAgentEngineReadyForSubmit = useCallback(async () => {
+    const state =
+      agentEngineConfigured.state === "missing"
+        ? "missing"
+        : await fetchAgentEngineConfiguredState(providerStatusChecksEnabled, {
+            timeoutMs: SUBMIT_ENGINE_STATUS_TIMEOUT_MS,
+          });
+    if (state !== "missing") return true;
+
+    setComposerError(LLM_MISSING_CREDENTIALS_MESSAGE);
+    setMissingKeyBouncePulse((p) => p + 1);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new Event("agent-chat:missing-api-key"));
+    }
+    return false;
+  }, [agentEngineConfigured.state, providerStatusChecksEnabled]);
   const [authError, setAuthError] = useState<{
     sessionExpired?: boolean;
   } | null>(null);
@@ -1231,8 +1255,15 @@ const AssistantChatInner = forwardRef<
       composerContextItemsRef.current = state.items;
       setComposerContextItems(state.items);
     });
+    const unsubscribe = subscribeAgentChatContext(() => {
+      if (cancelled || !isActiveComposerRef.current) return;
+      const state = getAgentChatContextState();
+      composerContextItemsRef.current = state.items;
+      setComposerContextItems(state.items);
+    });
     return () => {
       cancelled = true;
+      unsubscribe();
     };
   }, [isActiveComposer]);
   // Tracks the JSON of the last queue we successfully persisted so the
@@ -2454,6 +2485,9 @@ const AssistantChatInner = forwardRef<
       includeComposerContext = false,
       trackInRunsTray = false,
     ) => {
+      if (!(await ensureAgentEngineReadyForSubmit())) {
+        return;
+      }
       materializeFrozenReconnectContent();
       setShowContinue(false);
       setLoopLimitInfo(null);
@@ -2660,6 +2694,7 @@ const AssistantChatInner = forwardRef<
     [
       applyLocalQueuedMessages,
       buildComposerContextSubmission,
+      ensureAgentEngineReadyForSubmit,
       execMode,
       isRunning,
       materializeFrozenReconnectContent,
@@ -3439,6 +3474,7 @@ const AssistantChatInner = forwardRef<
                         : undefined
                     }
                     onSlashCommand={onSlashCommand}
+                    onBeforeSubmit={ensureAgentEngineReadyForSubmit}
                     execMode={execMode}
                     onExecModeChange={onExecModeChange}
                     planModeDisabled={planModeDisabled}

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

@@ -38,6 +38,10 @@ import {
   type AssistantChatProps,
   type AssistantChatHandle,
 } from "./AssistantChat.js";
+import {
+  buildChatModelGroups,
+  type EngineModelGroup,
+} from "./chat-model-groups.js";
 import {
   Popover,
   PopoverAnchor,
@@ -60,13 +64,6 @@ import {
 } from "./use-chat-threads.js";
 import { cn } from "./utils.js";
 
-interface EngineModelGroup {
-  engine: string;
-  label: string;
-  models: string[];
-  configured: boolean;
-}
-
 interface ModelSelection {
   model: string;
   engine?: string;
@@ -1247,92 +1244,13 @@ export function MultiTabAssistantChat({
           enginesData.current?.engine;
         const currentModel: string | undefined = enginesData.current?.model;
 
-        let groups: EngineModelGroup[];
-
-        if (builderConnected) {
-          // When Builder.io is connected, show all Builder-supported
-          // models grouped by provider — all route through the builder
-          // engine so no individual API keys are needed.
-          const builderEngine = enginesData.engines.find(
-            (e: any) => e.name === "builder",
-          );
-          const builderModels: string[] = builderEngine?.supportedModels ?? [];
-          const claude = builderModels.filter((m: string) =>
-            m.startsWith("claude-"),
-          );
-          const openai = builderModels.filter((m: string) =>
-            m.startsWith("gpt-"),
-          );
-          const gemini = builderModels.filter((m: string) =>
-            m.startsWith("gemini-"),
-          );
-
-          groups = [
-            ...(claude.length
-              ? [
-                  {
-                    engine: "builder",
-                    label: "Claude",
-                    models: claude,
-                    configured: true,
-                  },
-                ]
-              : []),
-            ...(openai.length
-              ? [
-                  {
-                    engine: "builder",
-                    label: "OpenAI",
-                    models: openai,
-                    configured: true,
-                  },
-                ]
-              : []),
-            ...(gemini.length
-              ? [
-                  {
-                    engine: "builder",
-                    label: "Gemini",
-                    models: gemini,
-                    configured: true,
-                  },
-                ]
-              : []),
-          ];
-        } else {
-          // No Builder connection — show SDK engines this app can run.
-          const allowedEngines = new Set([
-            "anthropic",
-            "ai-sdk:openai",
-            "ai-sdk:google",
-          ]);
-          groups = enginesData.engines
-            .filter(
-              (e: any) =>
-                allowedEngines.has(e.name) && e.packageInstalled !== false,
-            )
-            .map((e: any) => {
-              const models = [...e.supportedModels];
-              if (
-                e.name === currentEngineName &&
-                currentModel &&
-                !models.includes(currentModel)
-              ) {
-                models.unshift(currentModel);
-              }
-              return {
-                engine: e.name,
-                label: e.label,
-                models,
-                configured:
-                  e.requiredEnvVars.length === 0 ||
-                  e.requiredEnvVars.some((v: string) =>
-                    configuredKeys.has(v),
-                  ) ||
-                  e.name === currentEngineName,
-              };
-            });
-        }
+        const groups = buildChatModelGroups({
+          engines: enginesData.engines,
+          configuredKeys,
+          builderConnected,
+          currentEngineName,
+          currentModel,
+        });
         setAvailableModels(groups);
         setDefaultModel(currentModel ?? DEFAULT_MODEL);
       })

package/corpus/core/src/client/agent-chat.ts

@@ -73,6 +73,12 @@ export interface AgentChatMessage {
   requestMode?: AgentChatRequestMode;
   /** Scoped system prompt additions for this sub-agent */
   instructions?: string;
+  /**
+   * Message delivery target. Auto-submitted MCP App messages normally relay to
+   * the host chat; use "local" when a control explicitly targets this app's
+   * own AgentSidebar.
+   */
+  chatTarget?: "auto" | "local";
   /**
    * Whether to open the agent sidebar if it's currently hidden.
    * Defaults to true — submitting a chat should make the response visible.
@@ -527,7 +533,19 @@ function postAgentChatContextMessage(
 ): void {
   if (typeof window === "undefined") return;
 
-  const payload = { type, data };
+  const shouldForwardOpenSidebar =
+    (type === AGENT_CHAT_SET_CONTEXT_MESSAGE_TYPE &&
+      options.openSidebar === false) ||
+    (type !== AGENT_CHAT_SET_CONTEXT_MESSAGE_TYPE &&
+      options.openSidebar === true);
+  const payloadData =
+    shouldForwardOpenSidebar && typeof data === "object" && data !== null
+      ? {
+          ...(data as Record<string, unknown>),
+          openSidebar: options.openSidebar,
+        }
+      : data;
+  const payload = { type, data: payloadData };
   const targetSelf = isInBuilderFrame() || isDirectMcpAppEmbedSession();
   const target = targetSelf
     ? window
@@ -728,6 +746,7 @@ function readStoredAgentChatRequestMode(): AgentChatRequestMode | undefined {
 export function sendToAgentChat(opts: AgentChatMessage): string {
   const tabId = opts.tabId ?? generateTabId();
   const isCodeRequest = opts.type === "code" || opts.requiresCode === true;
+  const localChatTarget = opts.chatTarget === "local";
   const requestMode =
     normalizeAgentChatRequestMode(opts.requestMode ?? opts.mode) ??
     readStoredAgentChatRequestMode();
@@ -752,7 +771,11 @@ export function sendToAgentChat(opts: AgentChatMessage): string {
     },
   };
 
-  if (opts.submit !== false && isMcpAppChatBridgeEnabled()) {
+  if (
+    opts.submit !== false &&
+    !localChatTarget &&
+    isMcpAppChatBridgeEnabled()
+  ) {
     const directHostMessage = sendMcpAppHostMessage({
       message: opts.message,
       context: opts.context,
@@ -783,7 +806,8 @@ export function sendToAgentChat(opts: AgentChatMessage): string {
   const shouldOpenSidebar = opts.openSidebar !== false && !opts.background;
 
   const targetSelf =
-    !isCodeRequest && (isInBuilderFrame() || isDirectMcpAppEmbedSession());
+    !isCodeRequest &&
+    (localChatTarget || isInBuilderFrame() || isDirectMcpAppEmbedSession());
   const target = targetSelf
     ? window
     : window.parent !== window

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/MermaidBlock.tsx

@@ -268,7 +268,7 @@ function MermaidDiagram({
         onClick={() => setExpanded(true)}
         aria-label={copy.expandDiagram}
         title={copy.expandDiagram}
-        className="an-diagram-expand-trigger absolute right-2 top-2 z-10 flex size-7 items-center justify-center rounded-md border border-border/60 bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/mermaid:opacity-100"
+        className="an-diagram-expand-trigger absolute right-2 top-2 z-10 flex size-7 items-center justify-center rounded-md border border-border/60 bg-background text-muted-foreground opacity-0 shadow-sm transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/mermaid:opacity-100"
       >
         <IconArrowsMaximize className="size-4" />
       </button>

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/diagram.tsx

@@ -650,7 +650,7 @@ function ExpandableDiagramBody({
                   onClick={() => toggleWireframeStyle()}
                   aria-label={styleLabel}
                   aria-pressed={sketchy}
-                  className="an-diagram-style-trigger flex size-7 items-center justify-center rounded-md border border-border/60 bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/diagram:opacity-100"
+                  className="an-diagram-style-trigger flex size-7 items-center justify-center rounded-md border border-border/60 bg-background text-muted-foreground opacity-0 shadow-sm transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/diagram:opacity-100"
                 >
                   {sketchy ? (
                     <IconScribble className="size-4" />
@@ -669,7 +669,7 @@ function ExpandableDiagramBody({
                 data-plan-interactive
                 onClick={() => setExpanded(true)}
                 aria-label={copy.expandDiagram}
-                className="an-diagram-expand-trigger flex size-7 items-center justify-center rounded-md border border-border/60 bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/diagram:opacity-100"
+                className="an-diagram-expand-trigger flex size-7 items-center justify-center rounded-md border border-border/60 bg-background text-muted-foreground opacity-0 shadow-sm transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/diagram:opacity-100"
               >
                 <IconArrowsMaximize className="size-4" />
               </button>

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 {