@agent-native/core 0.80.10 → 0.80.11

package/corpus/templates/clips/app/hooks/use-auto-title.ts

@@ -1,8 +1,9 @@
 /**
  * Clips AI request bridge
  *
- * Watches the `clips-ai-request-:id` application_state queue. The bridge sends
- * queued recording work to the agent chat exactly once per
+ * Polls the `list-ai-requests` action — a single access-scoped call that returns
+ * every pending `clips-ai-request-*` entry for recordings the user can access.
+ * The bridge sends queued recording work to the agent chat exactly once per
  * (recordingId, kind, requestedAt).
  *
  * Once handled we DELETE the request entry so the next page load / tab switch
@@ -21,6 +22,7 @@ import { useRecordings, type RecordingSummary } from "./use-library";
 
 const DEFAULT_TITLE = "Untitled recording";
 const POLL_INTERVAL_MS = 3000;
+const TWO_MINUTES_MS = 2 * 60 * 1000;
 
 /** True when `title` is blank or equal to the server-seeded default. */
 export function isDefaultTitle(title: string | null | undefined): boolean {
@@ -62,22 +64,21 @@ const DISPATCHABLE_REQUESTS = new Set([
   "generate-workflow",
 ]);
 
-async function readRequest(recordingId: string): Promise<AiRequest | null> {
-  const url = agentNativePath(
-    `/_agent-native/application-state/${encodeURIComponent(
-      `clips-ai-request-${recordingId}`,
-    )}`,
-  );
+async function listRequests(): Promise<Map<string, AiRequest>> {
   try {
-    const res = await fetch(url);
-    if (!res.ok) return null;
-    const payload = await res.json().catch(() => null);
-    if (!payload || typeof payload !== "object") return null;
-    // The application-state endpoint wraps stored values under `.value`.
-    const value = (payload as any).value ?? payload;
-    return value as AiRequest;
+    const result = (await callAction("list-ai-requests", {} as any, {
+      method: "GET",
+    })) as { requests?: AiRequest[] } | null | undefined;
+    return new Map(
+      (result?.requests ?? [])
+        .filter(
+          (r): r is AiRequest & { recordingId: string } => !!r?.recordingId,
+        )
+        .map((r) => [r.recordingId, r]),
+    );
   } catch {
-    return null;
+    // Swallow — the next tick retries.
+    return new Map();
   }
 }
 
@@ -120,16 +121,15 @@ export function useAutoTitleBridge(): void {
       if (cancelled || inflight.current) return;
       inflight.current = true;
       try {
+        const requestsById = await listRequests();
+        if (cancelled) return;
+
         for (const rec of readyRecordings) {
           if (cancelled) return;
 
-          const request = await readRequest(rec.id);
+          const request = requestsById.get(rec.id) ?? null;
 
-          if (
-            request?.kind &&
-            DISPATCHABLE_REQUESTS.has(request.kind) &&
-            request.recordingId === rec.id
-          ) {
+          if (request?.kind && DISPATCHABLE_REQUESTS.has(request.kind)) {
             // Server queued a delegation — use the full context it provided.
             // Key includes requestedAt so each distinct server request fires
             // exactly once, independent of any prior fallback dispatch.
@@ -164,9 +164,8 @@ export function useAutoTitleBridge(): void {
               continue;
             }
 
-            const ageMs = Date.now() - new Date(rec.createdAt).getTime();
-            const TWO_MINUTES_MS = 2 * 60 * 1000;
-            if (ageMs < TWO_MINUTES_MS) continue;
+            if (Date.now() - new Date(rec.createdAt).getTime() < TWO_MINUTES_MS)
+              continue;
 
             // Use a dedicated key so a later server-queued request (e.g. from
             // a long transcription that finishes after the 2-min window) is

package/corpus/templates/design/actions/apply-component-prop-edit.ts

@@ -49,7 +49,10 @@ import type {
   ClassEditIntent,
   StyleEditIntent,
 } from "../shared/code-layer.js";
-import { componentNameFor } from "../shared/component-model.js";
+import {
+  componentNameFor,
+  componentNodeIdMatches,
+} from "../shared/component-model.js";
 import { hasCapability } from "../shared/design-source-capabilities.js";
 import { normalizeDesignSourceType } from "../shared/source-mode.js";
 
@@ -296,7 +299,9 @@ export default defineAction({
       source: codeLayerSource,
     });
 
-    const node = projection.nodes.find((n) => n.id === nodeId);
+    const node = projection.nodes.find((n) =>
+      componentNodeIdMatches(n, nodeId),
+    );
     if (!node) {
       throw new Error(
         `Node "${nodeId}" not found. Run get-code-layer-projection to list current ids.`,
@@ -398,7 +403,9 @@ export default defineAction({
     }
 
     // ── Persist ──────────────────────────────────────────────────────────────
-    if (changed) {
+    const shouldPersist = changed || patchedContent !== (file.content ?? "");
+
+    if (shouldPersist) {
       await persistEdit({
         id: file.id,
         designId: file.designId,
@@ -419,13 +426,14 @@ export default defineAction({
       componentName,
       sourceType,
       editKind: edit.kind,
-      persisted: changed,
+      persisted: shouldPersist,
       ctaRequired: false,
       fileId: file.id,
       filename: file.filename,
+      content: patchedContent,
       bytesBefore: html.length,
       bytesAfter: patchedContent.length,
-      note: changed
+      note: shouldPersist
         ? "Edit applied and persisted via the deterministic HTML-patch path."
         : "No change applied — the edit produced the same result as the current content.",
     };

package/corpus/templates/design/actions/apply-design-state.ts

@@ -152,10 +152,23 @@ export default defineAction({
     if (route !== undefined) patch.route = route;
     if (fixtureData !== undefined) {
       // Sanitise replayed markup (stored-XSS guard) before persisting.
-      patch.fixtureData =
-        fixtureData !== null
-          ? JSON.stringify(sanitizeStatePayload(fixtureData))
-          : null;
+      if (fixtureData !== null) {
+        const fixtureDataJson = JSON.stringify(
+          sanitizeStatePayload(fixtureData),
+        );
+        if (
+          Buffer.byteLength(fixtureDataJson, "utf8") > CAPTURE_DATA_MAX_BYTES
+        ) {
+          throw new Error(
+            `fixtureData exceeds the ${Math.round(
+              CAPTURE_DATA_MAX_BYTES / 1024,
+            )}KB limit. Trim the payload before updating this fixture.`,
+          );
+        }
+        patch.fixtureData = fixtureDataJson;
+      } else {
+        patch.fixtureData = null;
+      }
     }
     if (captureData !== undefined) {
       if (captureData !== null) {

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

@@ -36,7 +36,11 @@ import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
-import { compile } from "../shared/motion-compiler.js";
+import {
+  assertSafeMotionCssProperty,
+  assertSafeMotionCssToken,
+  compile,
+} from "../shared/motion-compiler.js";
 import type { MotionTrack } from "../shared/motion-timeline.js";
 
 // ─── Zod schemas ─────────────────────────────────────────────────────────────
@@ -85,47 +89,6 @@ const MOTION_STYLE_CLOSE = "</style>";
  */
 const STYLE_CLOSE_RE = /<\s*\/\s*style\b[^>]*>/i;
 
-/**
- * Reject `<`, `>`, and any `</style` sequence in a CSS token before it is
- * compiled into the managed `<style>` block. Keyframe `value` / `ease` come
- * straight from the caller and are interpolated raw into the CSS, so an
- * unescaped `</style>` (or angle bracket) would break out of the style block
- * and inject arbitrary markup. Returns the original string when safe; throws on
- * a breakout attempt so the whole atomic write fails loudly rather than
- * persisting a poisoned block.
- */
-function assertSafeCssToken(value: string, field: string): string {
-  if (/[<>]/.test(value) || /<\s*\/\s*style/i.test(value)) {
-    throw new Error(
-      `Invalid ${field}: "<", ">", and "</style" are not allowed in motion CSS values.`,
-    );
-  }
-  return value;
-}
-
-/**
- * Validate that a CSS property name is a safe CSS identifier.
- *
- * Accepts standard and vendor-prefixed property names (e.g. "opacity",
- * "transform", "-webkit-transform") and nothing else.  Rejects any string
- * containing `:`, `;`, `{`, `}`, `<`, `/`, whitespace, or other characters
- * that could break out of a CSS declaration or `<style>` block context when
- * the property is interpolated as `${property}: ${value};` inside
- * `@keyframes`.
- *
- * Uses the strict CSS ident regex `^-?[a-zA-Z][a-zA-Z0-9-]*$` which covers
- * every real animatable CSS property while blocking injection payloads.
- */
-function assertSafeCssProperty(property: string, field: string): string {
-  if (!/^-?[a-zA-Z][a-zA-Z0-9-]*$/.test(property)) {
-    throw new Error(
-      `Invalid ${field}: "${property}" is not a valid CSS property identifier. ` +
-        "Only ASCII letters, digits, hyphens, and an optional leading hyphen are allowed.",
-    );
-  }
-  return property;
-}
-
 /**
  * Inject or replace the managed `<style data-agent-native-motion>` block in
  * the HTML content.  Inserts before `</head>` when not already present.
@@ -328,15 +291,15 @@ export default defineAction({
     // keyframe values, and easing strings before they are compiled into the
     // managed <style> block.
     for (const track of typedTracks) {
-      assertSafeCssProperty(track.property, "track.property");
+      assertSafeMotionCssProperty(track.property, "track.property");
       for (const kf of track.keyframes) {
-        assertSafeCssToken(kf.value, "keyframe value");
+        assertSafeMotionCssToken(kf.value, "keyframe value");
         if (kf.ease !== undefined) {
-          assertSafeCssToken(kf.ease, "keyframe ease");
+          assertSafeMotionCssToken(kf.ease, "keyframe ease");
         }
       }
     }
-    assertSafeCssToken(defaultEase, "defaultEase");
+    assertSafeMotionCssToken(defaultEase, "defaultEase");
 
     const { css, hash } = compile({
       id: timelineId ?? "",

package/corpus/templates/design/actions/delete-design.ts

@@ -16,6 +16,26 @@ export default defineAction({
 
     const db = getDb();
 
+    await db
+      .delete(schema.designShares)
+      .where(eq(schema.designShares.resourceId, id));
+
+    await db
+      .delete(schema.componentIndex)
+      .where(eq(schema.componentIndex.designId, id));
+
+    await db
+      .delete(schema.motionTimeline)
+      .where(eq(schema.motionTimeline.designId, id));
+
+    await db
+      .delete(schema.designState)
+      .where(eq(schema.designState.designId, id));
+
+    await db
+      .delete(schema.designReviewSnapshot)
+      .where(eq(schema.designReviewSnapshot.designId, id));
+
     // Delete associated files first
     await db
       .delete(schema.designFiles)

package/corpus/templates/design/actions/get-component-details.ts

@@ -27,6 +27,7 @@ import { buildCodeLayerProjection } from "../shared/code-layer.js";
 import type { CodeLayerSource } from "../shared/code-layer.js";
 import {
   componentNameFor,
+  componentNodeIdMatches,
   extractProps,
   type ComponentInstance,
 } from "../shared/component-model.js";
@@ -112,6 +113,14 @@ export default defineAction({
     const caps = resolveSourceCapabilities(sourceType);
     const canResolveToFile = hasCapability(caps, "resolveNodeToFile");
     const hasFullIndex = hasCapability(caps, "indexComponents");
+    const canEditProps =
+      sourceType === "inline" || hasCapability(caps, "applyEdit");
+    const ctaRequired = !hasFullIndex || !canEditProps;
+    const ctaMessage = !hasFullIndex
+      ? "Full prop controls (TypeScript prop types, cva variants, Storybook stories) require a connected Builder app. Connect Builder to unlock."
+      : !canEditProps
+        ? "Prop write-back requires the bridge applyEdit capability. Preview controls remain available until source write hardening is enabled."
+        : undefined;
 
     // ── Fetch design file ────────────────────────────────────────────────────
     const conditions = [
@@ -153,7 +162,9 @@ export default defineAction({
       source: codeLayerSource,
     });
 
-    const node = projection.nodes.find((n) => n.id === nodeId);
+    const node = projection.nodes.find((n) =>
+      componentNodeIdMatches(n, nodeId),
+    );
     if (!node) {
       throw new Error(
         `Node "${nodeId}" not found in projection. Run get-code-layer-projection to list current node ids.`,
@@ -180,7 +191,7 @@ export default defineAction({
       props: observedProps,
       alpineData,
       selector: node.selector,
-      nodeId: node.id,
+      nodeId,
     };
 
     // ── Lookup persisted component_index row ─────────────────────────────────
@@ -231,11 +242,9 @@ export default defineAction({
       capabilities: {
         canResolveToFile,
         hasFullIndex,
-        canEditProps: true, // preview-only on inline; persists on real-app
-        ctaRequired: !hasFullIndex,
-        ctaMessage: !hasFullIndex
-          ? "Full prop controls (TypeScript prop types, cva variants, Storybook stories) require a connected Builder app. Connect Builder to unlock."
-          : undefined,
+        canEditProps,
+        ctaRequired,
+        ctaMessage,
       },
     };
   },

package/corpus/templates/design/actions/index-design-tokens.ts

@@ -7,7 +7,10 @@ import { z } from "zod";
 import { getDb, schema } from "../server/db/index.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
 import type { DesignSystemData } from "../shared/api.js";
-import { resolveTweaksToCssVars } from "../shared/resolve-tweaks.js";
+import {
+  isDirectCssVarSelectionKey,
+  resolveTweaksToCssVars,
+} from "../shared/resolve-tweaks.js";
 
 // ---------------------------------------------------------------------------
 // Token type classification
@@ -224,9 +227,10 @@ export default defineAction({
       tweaks as TweakDef[],
       tweakSelections,
     );
-    const tweakCssVars = new Set(
-      tweaks.map((t) => t.cssVar).filter(Boolean) as string[],
-    );
+    const tweakCssVars = new Set([
+      ...(tweaks.map((t) => t.cssVar).filter(Boolean) as string[]),
+      ...Object.keys(tweakSelections).filter(isDirectCssVarSelectionKey),
+    ]);
     for (const [cssVar, value] of Object.entries(resolvedOverrides)) {
       rawTokens.set(cssVar, { value, source: "Tweaks" });
     }

package/corpus/templates/design/actions/list-design-states.ts

@@ -6,6 +6,18 @@ import { z } from "zod";
 import { getDb, schema } from "../server/db/index.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
 
+function parseJsonRecord(raw: string | null): Record<string, unknown> | null {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+      ? (parsed as Record<string, unknown>)
+      : null;
+  } catch {
+    return null;
+  }
+}
+
 export default defineAction({
   description:
     "List all design states, fixtures, and captures for a design. " +
@@ -52,6 +64,8 @@ export default defineAction({
         kind: schema.designState.kind,
         breakpoint: schema.designState.breakpoint,
         route: schema.designState.route,
+        fixtureData: schema.designState.fixtureData,
+        captureData: schema.designState.captureData,
         previewRef: schema.designState.previewRef,
         createdAt: schema.designState.createdAt,
         updatedAt: schema.designState.updatedAt,
@@ -66,7 +80,11 @@ export default defineAction({
 
     return {
       count: rows.length,
-      states: rows,
+      states: rows.map((row) => ({
+        ...row,
+        fixtureData: parseJsonRecord(row.fixtureData),
+        captureData: parseJsonRecord(row.captureData),
+      })),
     };
   },
 });

package/corpus/templates/design/actions/open-component-source.ts

@@ -36,7 +36,10 @@ import "../server/db/index.js"; // ensure registerShareableResource runs
 import { resolveSourceCapabilities } from "../shared/capability-resolver.js";
 import { buildCodeLayerProjection } from "../shared/code-layer.js";
 import type { CodeLayerSource } from "../shared/code-layer.js";
-import { componentNameFor } from "../shared/component-model.js";
+import {
+  componentNameFor,
+  componentNodeIdMatches,
+} from "../shared/component-model.js";
 import { hasCapability } from "../shared/design-source-capabilities.js";
 import { normalizeDesignSourceType } from "../shared/source-mode.js";
 
@@ -148,7 +151,9 @@ export default defineAction({
       source: codeLayerSource,
     });
 
-    const node = projection.nodes.find((n) => n.id === nodeId);
+    const node = projection.nodes.find((n) =>
+      componentNodeIdMatches(n, nodeId),
+    );
     if (!node) {
       throw new Error(
         `Node "${nodeId}" not found. Run get-code-layer-projection to list current ids.`,

package/corpus/templates/design/actions/preview-component-prop-edit.ts

@@ -32,7 +32,11 @@ import { getDb, schema } from "../server/db/index.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
 import { buildCodeLayerProjection } from "../shared/code-layer.js";
 import type { CodeLayerSource } from "../shared/code-layer.js";
-import { componentNameFor, extractProps } from "../shared/component-model.js";
+import {
+  componentNameFor,
+  componentNodeIdMatches,
+  extractProps,
+} from "../shared/component-model.js";
 import { normalizeDesignSourceType } from "../shared/source-mode.js";
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -62,7 +66,15 @@ async function liveContent(
 export interface ComponentPropPreviewMessage {
   /** Matches the existing parent→iframe postMessage type vocabulary. */
   type: "style-change" | "replace-document-content" | "select-element";
-  payload: Record<string, unknown>;
+  selector?: string;
+  nodeId?: string;
+  attributeOverrides?: Record<string, string>;
+  classEdit?: {
+    kind: "class";
+    operation: "replace";
+    from: string;
+    to: string;
+  };
 }
 
 // ─── Action ───────────────────────────────────────────────────────────────────
@@ -156,7 +168,9 @@ export default defineAction({
       source: codeLayerSource,
     });
 
-    const node = projection.nodes.find((n) => n.id === nodeId);
+    const node = projection.nodes.find((n) =>
+      componentNodeIdMatches(n, nodeId),
+    );
     if (!node) {
       throw new Error(
         `Node "${nodeId}" not found. Run get-code-layer-projection to list current ids.`,
@@ -182,35 +196,29 @@ export default defineAction({
       // attribute without a full HTML replace.
       messages.push({
         type: "style-change",
-        payload: {
-          selector: node.selector,
-          nodeId,
-          attributeOverrides: { "x-data": edit.value },
-        },
+        selector: node.selector,
+        nodeId,
+        attributeOverrides: { "x-data": edit.value },
       });
     } else if (edit.kind === "attribute") {
       messages.push({
         type: "style-change",
-        payload: {
-          selector: node.selector,
-          nodeId,
-          attributeOverrides: { [edit.attribute]: edit.value },
-        },
+        selector: node.selector,
+        nodeId,
+        attributeOverrides: { [edit.attribute]: edit.value },
       });
     } else if (edit.kind === "classReplace") {
       // Communicate as a responsive-class intent so the bridge applies it via
       // the existing deterministic class-patch path.
       messages.push({
         type: "style-change",
-        payload: {
-          selector: node.selector,
-          nodeId,
-          classEdit: {
-            kind: "class",
-            operation: "replace",
-            from: edit.from,
-            to: edit.to,
-          },
+        selector: node.selector,
+        nodeId,
+        classEdit: {
+          kind: "class",
+          operation: "replace",
+          from: edit.from,
+          to: edit.to,
         },
       });
     }
@@ -218,10 +226,8 @@ export default defineAction({
     // Also emit a select-element message so the canvas highlights the node.
     messages.push({
       type: "select-element",
-      payload: {
-        selector: node.selector,
-        nodeId,
-      },
+      selector: node.selector,
+      nodeId,
     });
 
     const sourceType =

package/corpus/templates/design/actions/preview-shader-fill.ts

@@ -2,8 +2,8 @@
  * preview-shader-fill — preview-only action.
  *
  * Returns the CSS mesh-gradient approximation for a shader fill so the caller
- * can apply it to the selected node via the bridge (`tweak-values` /
- * `style-change` messages) **without persisting anything**.
+ * can apply it to the selected node via the `shader-fill-preview` bridge
+ * message **without persisting anything**.
  *
  * Deliberately lightweight:
  * - No DB access.
@@ -84,11 +84,11 @@ export default defineAction({
 Preview a CSS mesh-gradient shader fill on the selected design node without persisting anything.
 
 Returns:
-- previewCss   — a CSS \`background\` value for the live preview (inject via bridge style-change or tweak-values).
+- previewCss   — a CSS \`background\` value for the live preview (inject via the shader-fill-preview bridge message).
 - fallbackCss  — a simpler static CSS \`background\` for export / PDF / SSR contexts.
 - fallbackBlock — a complete CSS rule block (selector + fallback background) ready to embed.
 - descriptor   — the resolved and validated ShaderDescriptor.
-- bridgeMessage — a ready-to-use JSON bridge payload for the iframe style-change message.
+- bridgeMessage — a ready-to-use JSON bridge payload for the iframe shader-fill-preview message.
 
 Call this before apply-shader-fill.  The preview is purely CSS — no WebGL, no canvas, no writes.
 
@@ -139,14 +139,12 @@ support; it has no effect on the static CSS preview output today.
     const fallbackBlock = buildShaderFillFallbackBlock(selector, descriptor);
 
     // Build a ready-to-post bridge payload for the iframe.
-    // The `style-change` message type is already handled by DesignCanvas.tsx.
+    // The `shader-fill-preview` message type is handled by DesignCanvas.tsx.
     const bridgeMessage = {
-      type: "style-change",
-      nodeId: target?.nodeId ?? null,
+      type: "shader-fill-preview",
       selector: target?.selector ?? null,
-      styles: {
-        background: previewCss,
-      },
+      nodeId: target?.nodeId ?? null,
+      css: previewCss,
       // Metadata so the client can attach a "preview only" badge.
       _preview: true,
       _source: "shader-fill",
@@ -167,7 +165,7 @@ support; it has no effect on the static CSS preview output today.
       JSON.stringify(bridgeMessage, null, 2),
       ``,
       `Apply steps:`,
-      `1. Inject the previewCss via a bridge "style-change" message (no write, no persist).`,
+      `1. Inject the previewCss via a bridge "shader-fill-preview" message (no write, no persist).`,
       `2. If the user approves, call apply-shader-fill — but note that action is currently GATED`,
       `   and will return a clear not-yet-available result until runtime rendering +`,
       `   source-write + diff proof are all in place.`,

package/corpus/templates/design/actions/run-design-audit.ts

@@ -170,7 +170,7 @@ function checkTapTargets(html: string): A11yFinding[] {
         nodeId: extractNodeId(tag),
         selector: extractSelector(tag, "button"),
         wcag: "2.5.5",
-        fixAvailable: false,
+        fixAvailable: true,
       });
     }
     idx++;
@@ -272,7 +272,7 @@ function checkFocusVisibility(html: string): A11yFinding[] {
         nodeId: extractNodeId(tag),
         selector: extractSelector(tag, tag.match(/^<([a-z]+)/i)?.[1] ?? "*"),
         wcag: "2.4.7",
-        fixAvailable: false,
+        fixAvailable: true,
       });
     }
     inlineIdx++;
@@ -286,10 +286,23 @@ function checkContrastHint(html: string): A11yFinding[] {
   // Static analysis cannot compute real contrast ratios without a DOM/CSS
   // cascade resolver. We flag the presence of explicit low-opacity text colors
   // as a human-review hint — the UI will show these as "info" prompts.
-  const lowOpacityTextPattern =
-    /class\s*=\s*"[^"]*\btext-(?:white|black|gray-\d+)\s+(?:opacity-[0-3]\d|text-opacity-[0-3]\d)[^"]*"/gi;
+  const tagPattern = /<([a-z][a-z0-9:-]*)\b[^>]*>/gi;
+  const textColorPattern = /\btext-(?:white|black|gray-\d+)\b/i;
+  const lowOpacityPattern = /\b(?:opacity-[0-3]\d|text-opacity-[0-3]\d)\b/i;
   let idx = 0;
-  for (const m of html.matchAll(lowOpacityTextPattern)) {
+  for (const m of html.matchAll(tagPattern)) {
+    const tag = m[0];
+    const classMatch = tag.match(/\bclass\s*=\s*(?:"([^"]*?)"|'([^']*?)')/i);
+    const className = classMatch?.[1] ?? classMatch?.[2] ?? "";
+    if (
+      !textColorPattern.test(className) ||
+      !lowOpacityPattern.test(className)
+    ) {
+      continue;
+    }
+    const tagName = m[1] ?? "*";
+    const nodeId = extractNodeId(tag);
+    const selector = extractSelector(tag, tagName);
     findings.push({
       id: `contrast:low-opacity-${idx}`,
       severity: "info" as A11ySeverity,
@@ -298,6 +311,8 @@ function checkContrastHint(html: string): A11yFinding[] {
         "Text element has a low-opacity modifier — verify contrast ratio meets 4.5:1 minimum.",
       detail:
         "Low-opacity text can fail WCAG 1.4.3. Run a live contrast check in the browser.",
+      nodeId,
+      selector,
       wcag: "1.4.3",
       fixAvailable: false,
     });
@@ -353,7 +368,7 @@ export default defineAction({
       ),
   }),
   readOnly: true,
-  http: { method: "GET" },
+  http: { method: "POST" },
   run: async ({ designId, fileId, filename }) => {
     const db = getDb();