From de78727a871d85e3a25ae7f09545f507023ec1ae Mon Sep 17 00:00:00 2001
From: noah <noahjames017@gmail.com>
Date: Thu, 6 Aug 2026 11:10:53 -0400
Subject: [PATCH 1/7] fix(web): design-mode requests stop naming levers that do
 nothing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two design-mode change requests in a row cost more time than making the
edits by hand, for two separate reasons.

A css bullet named a Tailwind utility by scanning the element's class list,
which only proves a prefix-matching class is present — not that it is what
the browser resolved the property from. On the composer's runtime-mode chip
that produced "padding-inline: 8px -> 4px — change `px-2.5` -> `px-1`", in
which 8px and px-2.5 (10px) already contradict each other: a ComposerShell.css
rule outranked the utility, so editing the class was a silent no-op. The new
cssOrigin.ts proves the lever empirically, by removing the class and
re-measuring while the element shows its original cascade. When the utility
does not win, the bullet names the rule that does and the file it lives in
(recovered from Vite's data-vite-dev-id, the only place an injected <style>
keeps its authored filename) and drops the utility suggestion entirely.

The other request pointed at ComposerControl.tsx:135 in a 71-line file —
a real position in the module Vite served, not in the source. react-grab
already flags this via StackFrame.isSymbolicated and the fork was discarding
it. Locations from an unsymbolicated frame are now rejected, which costs the
line but not the file: data-t3-source-file keeps the authored path and
data-t3-component carries the fiber's component name, so the request reads
"Rendered by `<ComposerSelectControl>` in ... (line not resolvable)".

Also drops the NO_PREVIEW guardrail's claim that "The Forge verifies the
changes automatically". True upstream, false here — client/verifier.ts was
never vendored into this fork, and the sentence told the agent to stop
looking exactly where a no-op edit would have surfaced.

Not covered by tests: the probe and CSSOM walk need a live DOM, which this
repo's test setup does not provide. The pure ranking/classification logic is
tested; the probe is verified by typecheck and the engine bundle build only.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .fork/customizations.yaml                     |  25 ++
 .../src/preview/DesignSourceResolver.test.ts  |  78 +++++-
 .../src/preview/DesignSourceResolver.ts       |  15 +-
 .../desktop/src/preview/DesignSourceResult.ts |  91 ++++++-
 .../forkDesignModeCssOrigin.test.ts           | 102 ++++++++
 apps/web/src/custom/designMode/cssOrigin.ts   | 222 ++++++++++++++++++
 .../custom/designMode/engine/nativeSource.ts  |  42 +++-
 .../custom/designMode/engine/tsconfig.json    |   2 +-
 .../designMode/engine/vendor/request.ts       |  62 ++++-
 .../engine/vendor/shared/guardrails.ts        |  12 +-
 10 files changed, 628 insertions(+), 23 deletions(-)
 create mode 100644 apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
 create mode 100644 apps/web/src/custom/designMode/cssOrigin.ts

diff --git a/.fork/customizations.yaml b/.fork/customizations.yaml
index dc18cca4625c..b35b0ea3f2bb 100644
--- a/.fork/customizations.yaml
+++ b/.fork/customizations.yaml
@@ -1715,9 +1715,34 @@
     in favor of their own tsconfig island; the engine is bundled to an
     injectable IIFE string by the fork:design-mode-engine Vite plugin as
     virtual:fork-design-mode-engine.
+
+    Two accuracy rules govern what a change request is allowed to assert, both
+    added after a request cost more time than doing the edit by hand. First, a
+    css bullet may only say "change `px-2.5` -> `px-1`" once cssOrigin.ts has
+    PROVED that class is the lever, by removing it and re-measuring while the
+    element shows its original cascade; when a stylesheet rule outranks the
+    utility instead, the bullet names that rule and its file (Vite's
+    data-vite-dev-id is what still carries the authored filename) and drops the
+    utility suggestion, because editing an overridden class is a silent no-op.
+    Second, a source location is only forwarded when react-grab reports the
+    frame as symbolicated: an unsymbolicated frame carries GENERATED
+    coordinates, which look authoritative and point into a line the authored
+    file may not even have. Rejection costs the LINE, not the file:
+    `data-t3-source-file` still carries the authored path (react-grab reads it
+    off the fiber's module, so only the position inside it needed
+    symbolication) and `data-t3-component` carries the fiber's component name,
+    which together read as "Rendered by `<X>` in path (line not resolvable)" —
+    usually the faster address anyway. Relatedly, the NO_PREVIEW guardrail must
+    not promise upstream's automatic verification while this fork has not
+    vendored client/verifier.ts.
   tier: 4
   files:
     - apps/web/src/custom/designMode/protocol.ts
+    # Outside engine/ on purpose: like protocol.ts it crosses the TS-island fence
+    # (the engine tsconfig includes it by path) so the web project can type-check
+    # and unit-test it, which files under engine/ cannot be.
+    - apps/web/src/custom/designMode/cssOrigin.ts
+    - apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
     - apps/web/src/custom/designMode/designModeStore.ts
     - apps/web/src/custom/designMode/designModeBridge.ts
     - apps/web/src/custom/designMode/designChangeDraftStore.ts
diff --git a/apps/desktop/src/preview/DesignSourceResolver.test.ts b/apps/desktop/src/preview/DesignSourceResolver.test.ts
index cc7946d7c9a4..a444857077be 100644
--- a/apps/desktop/src/preview/DesignSourceResolver.test.ts
+++ b/apps/desktop/src/preview/DesignSourceResolver.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vite-plus/test";
 
-import { normalizeResolvedSource } from "./DesignSourceResult.ts";
+import { describeResolvedSource, normalizeResolvedSource } from "./DesignSourceResult.ts";
 
 const VALID = {
   filePath: "/src/components/Button.tsx",
@@ -21,13 +21,27 @@ describe("normalizeResolvedSource", () => {
     expect(normalizeResolvedSource({ ...VALID, columnNumber: 0 })?.column).toBe(1);
   });
 
-  it("carries only the source location — extra react-grab context never crosses", () => {
+  it("carries the source location and component name — nothing else crosses", () => {
     const result = normalizeResolvedSource({
       ...VALID,
       componentName: "SubmitButton",
       selector: "button.primary",
+      snippet: "<button/>",
     } as typeof VALID);
-    expect(result).toEqual({ file: VALID.filePath, line: 12, column: 4 });
+    expect(result).toEqual({
+      file: VALID.filePath,
+      line: 12,
+      column: 4,
+      componentName: "SubmitButton",
+    });
+  });
+
+  it("drops a component name that is not identifier-shaped", () => {
+    expect(normalizeResolvedSource({ ...VALID, componentName: "a b\nc" } as typeof VALID)).toEqual({
+      file: VALID.filePath,
+      line: 12,
+      column: 4,
+    });
   });
 
   it("rejects contexts without a usable source location", () => {
@@ -49,4 +63,62 @@ describe("normalizeResolvedSource", () => {
     expect(normalizeResolvedSource({ ...VALID, filePath: "/src/\tApp.tsx" })).toBeNull();
     expect(normalizeResolvedSource({ ...VALID, filePath: "/src/App.tsx\u007f" })).toBeNull();
   });
+
+  // The failure this guards: a 71-line ComposerControl.tsx reported "at line 135" — a real
+  // position in the SERVED module, which reads as authoritative and sends the agent hunting.
+  it("rejects a location react-grab could not symbolicate", () => {
+    const stack = [{ fileName: VALID.filePath, isSymbolicated: false }];
+    expect(normalizeResolvedSource({ ...VALID, stack } as typeof VALID)).toBeNull();
+  });
+
+  it("judges symbolication by the frame naming the reported file", () => {
+    const stack = [
+      { fileName: "/src/other.tsx", isSymbolicated: false },
+      { fileName: VALID.filePath, isSymbolicated: true },
+    ];
+    expect(normalizeResolvedSource({ ...VALID, stack } as typeof VALID)?.line).toBe(12);
+  });
+
+  it("treats a missing flag or missing stack as symbolicated", () => {
+    expect(normalizeResolvedSource({ ...VALID, stack: [] } as typeof VALID)?.line).toBe(12);
+    expect(
+      normalizeResolvedSource({ ...VALID, stack: [{ fileName: VALID.filePath }] } as typeof VALID)
+        ?.line,
+    ).toBe(12);
+  });
+});
+
+describe("describeResolvedSource", () => {
+  it("returns the full location when there is one", () => {
+    expect(describeResolvedSource({ ...VALID, componentName: "Btn" } as typeof VALID)).toEqual({
+      file: VALID.filePath,
+      line: 12,
+      column: 4,
+      componentName: "Btn",
+    });
+  });
+
+  // A rejected location loses the LINE, not the file: react-grab reads the path off the
+  // fiber's module, and only the position inside it needed symbolication.
+  it("keeps the component name and the file when the line is rejected", () => {
+    const stack = [{ fileName: VALID.filePath, isSymbolicated: false }];
+    expect(
+      describeResolvedSource({ ...VALID, stack, componentName: "Btn" } as typeof VALID),
+    ).toEqual({ componentName: "Btn", file: VALID.filePath });
+  });
+
+  it("never emits a line or column alongside a rejected location", () => {
+    const stack = [{ fileName: VALID.filePath, isSymbolicated: false }];
+    const result = describeResolvedSource({ ...VALID, stack } as typeof VALID);
+    expect(result).toEqual({ file: VALID.filePath });
+    expect(result).not.toHaveProperty("line");
+    expect(result).not.toHaveProperty("column");
+  });
+
+  it("returns null when nothing usable survives", () => {
+    expect(describeResolvedSource(null)).toBeNull();
+    expect(describeResolvedSource({})).toBeNull();
+    const stack = [{ fileName: "/a.tsx", isSymbolicated: false }];
+    expect(describeResolvedSource({ filePath: "/src/App.tsx\u0000", stack } as never)).toBeNull();
+  });
 });
diff --git a/apps/desktop/src/preview/DesignSourceResolver.ts b/apps/desktop/src/preview/DesignSourceResolver.ts
index 5f4ac41599f6..3dc871c40a22 100644
--- a/apps/desktop/src/preview/DesignSourceResolver.ts
+++ b/apps/desktop/src/preview/DesignSourceResolver.ts
@@ -17,10 +17,15 @@ import { getElementContext } from "react-grab/primitives";
 
 import {
   DESIGN_SOURCE_RESOLVER_GLOBAL,
-  normalizeResolvedSource,
+  describeResolvedSource,
   type DesignSourceResult,
 } from "./DesignSourceResult.ts";
 
+/** What `resolve` actually puts on the wire: a full location, or — when react-grab could not
+ * symbolicate — just the component name, which the engine uses to label an otherwise
+ * selector-addressed element. Reading only the location fields yields the original contract. */
+type ResolvedPayload = Partial<DesignSourceResult> & { componentName?: string };
+
 /** react-grab resolution symbolicates through source maps — cap concurrent work so a
  * scrubbing cursor can't queue dozens of expensive lookups at once. */
 const MAX_CONCURRENT = 2;
@@ -52,15 +57,15 @@ function releaseSlot(): void {
  * an element resolved before React mounted its dev metadata (hydration, a lazy chunk)
  * can succeed on a later ask instead of staying selector-only forever (PR #54 review).
  * The TTL also bounds retry cost: at most one react-grab attempt per element per TTL. */
-const resolutionCache = new WeakMap<Element, Promise<DesignSourceResult | null>>();
+const resolutionCache = new WeakMap<Element, Promise<ResolvedPayload | null>>();
 
 const NULL_RESULT_TTL_MS = 5000;
 
-async function resolveElement(element: Element): Promise<DesignSourceResult | null> {
+async function resolveElement(element: Element): Promise<ResolvedPayload | null> {
   await acquireSlot();
   try {
     const context = await getElementContext(element);
-    const normalized = normalizeResolvedSource(context);
+    const normalized = describeResolvedSource(context);
     // Recheck after the await — an element replaced mid-resolution must not hand the
     // engine a location for a node that no longer exists.
     if (!normalized || !element.isConnected || element.ownerDocument !== document) return null;
@@ -72,7 +77,7 @@ async function resolveElement(element: Element): Promise<DesignSourceResult | nu
   }
 }
 
-function resolve(element: unknown): Promise<DesignSourceResult | null> {
+function resolve(element: unknown): Promise<ResolvedPayload | null> {
   if (!(element instanceof Element) || element.ownerDocument !== document || !element.isConnected) {
     return Promise.resolve(null);
   }
diff --git a/apps/desktop/src/preview/DesignSourceResult.ts b/apps/desktop/src/preview/DesignSourceResult.ts
index 98297e1365a7..31c7a10dc519 100644
--- a/apps/desktop/src/preview/DesignSourceResult.ts
+++ b/apps/desktop/src/preview/DesignSourceResult.ts
@@ -12,11 +12,19 @@ export const DESIGN_SOURCE_RESOLVER_GLOBAL = "__T3_DESIGN_SOURCE_RESOLVER_V1__";
 const MAX_FILE_LENGTH = 4096;
 
 /** Exactly what the engine consumes — it synthesizes a canonical `file:line:col` tag and
- * derives labels/selectors itself, so nothing else crosses the bridge (PR #54 review). */
+ * derives labels/selectors itself, so nothing else crosses the bridge (PR #54 review).
+ *
+ * `componentName` rides alongside because it survives the one failure the location does not:
+ * react-grab reads the fiber's position in the SERVED module and only maps it back to the
+ * authored file when it can symbolicate. Unsymbolicated, `line` is a post-transform line
+ * number — it looks valid, points into a file the agent then cannot make sense of (a 71-line
+ * source "at line 135"), and costs more time than no location at all. The component name is
+ * derived from the fiber itself, so it stays correct either way. */
 export interface DesignSourceResult {
   file: string;
   line: number;
   column: number;
+  componentName?: string;
 }
 
 /**
@@ -32,24 +40,93 @@ export function normalizeResolvedSource(
     filePath?: unknown;
     lineNumber?: unknown;
     columnNumber?: unknown;
+    componentName?: unknown;
+    stack?: unknown;
   } | null,
 ): DesignSourceResult | null {
   if (!value || typeof value !== "object") return null;
   const { filePath, lineNumber, columnNumber } = value;
-  if (typeof filePath !== "string" || filePath.length === 0 || filePath.length > MAX_FILE_LENGTH) {
-    return null;
-  }
-  // eslint-disable-next-line no-control-regex
-  if (/[\u0000-\u001f\u007f]/.test(filePath)) return null;
+  // An unsymbolicated frame reports GENERATED coordinates — the line in the module Vite
+  // served, not in the file the agent will open. Rejecting the location outright is
+  // deliberate: the engine's fallback (selector + component name) beats a confident pointer
+  // at the wrong line of the right file, which reads as authoritative and is not.
+  if (!isSymbolicated(value.stack, filePath)) return null;
+  const file = normalizeFilePath(filePath);
+  if (file === null) return null;
   if (typeof lineNumber !== "number" || !Number.isInteger(lineNumber) || lineNumber < 1) {
     return null;
   }
   if (typeof columnNumber !== "number" || !Number.isInteger(columnNumber) || columnNumber < 0) {
     return null;
   }
+  const componentName = normalizeComponentName(value.componentName);
   return {
-    file: filePath,
+    file,
     line: lineNumber,
     column: Math.max(1, columnNumber),
+    ...(componentName === null ? {} : { componentName }),
+  };
+}
+
+/** A usable development file path, or null. Page-controlled: length-capped, and rejected
+ * outright when it carries control characters (a newline-bearing "path" could otherwise inject
+ * instruction lines into the agent's request). */
+export function normalizeFilePath(value: unknown): string | null {
+  if (typeof value !== "string" || value.length === 0 || value.length > MAX_FILE_LENGTH) {
+    return null;
+  }
+  // eslint-disable-next-line no-control-regex
+  return /[\u0000-\u001f\u007f]/.test(value) ? null : value;
+}
+
+/** Identifier-shaped display names only — the value is page-controlled and ends up inside the
+ * agent's request text. */
+const COMPONENT_NAME_PATTERN = /^[A-Za-z_$][\w$.]{0,63}$/;
+
+export function normalizeComponentName(value: unknown): string | null {
+  return typeof value === "string" && COMPONENT_NAME_PATTERN.test(value) ? value : null;
+}
+
+/**
+ * Whether react-grab mapped the reported location back to authored source.
+ *
+ * react-grab marks each stack frame with `isSymbolicated`. The frame naming `filePath` is the
+ * one that produced the reported line/column, so its flag is the one that counts. A missing
+ * flag reads as symbolicated (older react-grab builds omit it, and rejecting every location
+ * there would be a regression), and so does an absent stack — that is the pre-existing
+ * contract for hosts whose resolver hands back a bare location.
+ */
+export function isSymbolicated(stack: unknown, filePath: unknown): boolean {
+  if (!Array.isArray(stack) || stack.length === 0) return true;
+  const frames = stack.filter(
+    (frame): frame is { fileName?: unknown; isSymbolicated?: unknown } =>
+      typeof frame === "object" && frame !== null,
+  );
+  const match = frames.find((frame) => frame.fileName === filePath) ?? frames[0];
+  if (!match) return true;
+  return match.isSymbolicated !== false;
+}
+
+/**
+ * The full payload the resolver puts on the wire: the validated location when there is one,
+ * plus the component name, which comes off the fiber and stays correct even when the location
+ * is rejected. Additive by design — an engine reading only `file`/`line`/`column` sees exactly
+ * what it saw before, and a host that predates this still satisfies that engine.
+ */
+export function describeResolvedSource(
+  value: Parameters<typeof normalizeResolvedSource>[0],
+): (Partial<DesignSourceResult> & { componentName?: string }) | null {
+  const source = normalizeResolvedSource(value);
+  if (source) return source;
+  // The line was untrustworthy; the FILE was not. react-grab reads the path off the fiber's
+  // module, which is the authored path either way — only the position inside it needs
+  // symbolication. Forwarding it (explicitly without line/column) keeps the single most
+  // useful part of a rejected location instead of discarding the whole thing.
+  const componentName = normalizeComponentName(value?.componentName);
+  const file = normalizeFilePath(value?.filePath);
+  if (componentName === null && file === null) return null;
+  return {
+    ...(componentName === null ? {} : { componentName }),
+    ...(file === null ? {} : { file }),
   };
 }
diff --git a/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
new file mode 100644
index 000000000000..8dc8b911480e
--- /dev/null
+++ b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
@@ -0,0 +1,102 @@
+/** Fork guard — see `.fork/customizations.yaml#fork-design-mode`.
+ *
+ * Covers the DOM-free half of cssOrigin.ts. The probe itself (remove the class, re-measure)
+ * and the CSSOM walk need a live browser and are exercised by design mode in the preview
+ * webview; this suite pins the parts that decide what the agent is ultimately TOLD — which
+ * selectors are dismissed as utilities, and which rule gets named as the culprit.
+ */
+import { describe, expect, it } from "vite-plus/test";
+
+import {
+  isBareClassSelector,
+  rankOriginRules,
+  roughSpecificity,
+  type OriginCandidate,
+} from "../custom/designMode/cssOrigin";
+
+const candidate = (over: Partial<OriginCandidate>): OriginCandidate => ({
+  selectorText: ".a",
+  stylesheet: "app.css",
+  important: false,
+  order: 0,
+  specificity: 0,
+  ...over,
+});
+
+describe("fork guard: design-mode css origin", () => {
+  describe("isBareClassSelector", () => {
+    it("dismisses single-class utility selectors", () => {
+      // Naming `.px-1` as the culprit for a padding change is a tautology, not a lead.
+      expect(isBareClassSelector(".px-1")).toBe(true);
+      expect(isBareClassSelector(".px-2\\.5")).toBe(true);
+      expect(isBareClassSelector("  .gap-1.5  ".trim())).toBe(true);
+    });
+
+    it("keeps anything that could actually outrank a utility", () => {
+      expect(isBareClassSelector("[data-fork-composer-mode-chip]")).toBe(false);
+      expect(isBareClassSelector(':root[data-fork="x"] [data-fork-composer-mode-chip]')).toBe(
+        false,
+      );
+      expect(isBareClassSelector(".card .title")).toBe(false);
+      expect(isBareClassSelector("button.primary")).toBe(false);
+      expect(isBareClassSelector("#id")).toBe(false);
+    });
+  });
+
+  describe("roughSpecificity", () => {
+    it("orders id over attribute/class over bare type", () => {
+      expect(roughSpecificity("#main")).toBeGreaterThan(roughSpecificity("[data-x]"));
+      expect(roughSpecificity("[data-x]")).toBeGreaterThan(roughSpecificity("button"));
+    });
+
+    it("counts a compound selector above its parts", () => {
+      expect(roughSpecificity(':root[data-fork="x"] [data-chip]')).toBeGreaterThan(
+        roughSpecificity("[data-chip]"),
+      );
+    });
+  });
+
+  describe("rankOriginRules", () => {
+    it("puts the most likely winner last — that is the one the request names", () => {
+      const ranked = rankOriginRules([
+        candidate({ selectorText: "button", specificity: 1, order: 1 }),
+        candidate({ selectorText: "[data-chip]", specificity: 100, order: 2 }),
+      ]);
+      expect(ranked.map((r) => r.selectorText)).toEqual(["button", "[data-chip]"]);
+    });
+
+    it("ranks !important above every non-important rule regardless of specificity", () => {
+      const ranked = rankOriginRules([
+        candidate({ selectorText: "#very .specific", specificity: 10_100, order: 1 }),
+        candidate({ selectorText: "button", specificity: 1, order: 2, important: true }),
+      ]);
+      expect(ranked.at(-1)?.selectorText).toBe("button");
+    });
+
+    it("breaks a specificity tie on document order, like the cascade", () => {
+      const ranked = rankOriginRules([
+        candidate({ selectorText: ".late", specificity: 100, order: 9 }),
+        candidate({ selectorText: ".early", specificity: 100, order: 2 }),
+      ]);
+      expect(ranked.at(-1)?.selectorText).toBe(".late");
+    });
+
+    it("drops the ranking-only fields from what callers see", () => {
+      const [rule] = rankOriginRules([candidate({ stylesheet: "ComposerShell.css" })]);
+      expect(rule).toEqual({
+        selectorText: ".a",
+        stylesheet: "ComposerShell.css",
+        important: false,
+      });
+    });
+
+    it("does not mutate the caller's array", () => {
+      const input = [
+        candidate({ selectorText: "b", specificity: 200, order: 1 }),
+        candidate({ selectorText: "a", specificity: 1, order: 2 }),
+      ];
+      rankOriginRules(input);
+      expect(input.map((c) => c.selectorText)).toEqual(["b", "a"]);
+    });
+  });
+});
diff --git a/apps/web/src/custom/designMode/cssOrigin.ts b/apps/web/src/custom/designMode/cssOrigin.ts
new file mode 100644
index 000000000000..2ccf522453ff
--- /dev/null
+++ b/apps/web/src/custom/designMode/cssOrigin.ts
@@ -0,0 +1,222 @@
+/**
+ * Which declaration actually produces a property's measured value.
+ *
+ * The change-request builder used to name a lever by scanning the element's class list
+ * (`findExistingUtility`) and asking the agent to "change `px-2.5` → `px-1`". That scan
+ * only proves a class with the right prefix is PRESENT — not that it is what the browser
+ * resolved the property from. When a stylesheet rule outranks the utility, the agent edits
+ * a class that changes nothing, and the no-op only surfaces when the user notices the live
+ * app is unchanged. (Real case: `[data-fork-composer-mode-chip]` in ComposerShell.css pins
+ * `padding-inline: 8px`, so the drafted 4px never landed via `px-1`.)
+ *
+ * Two questions, answered separately because they want different tools:
+ *
+ * 1. "Does the utility class control this property?" — answered EMPIRICALLY, by removing the
+ *    class and re-measuring. That is ground truth: no cascade emulation to get wrong, and it
+ *    naturally accounts for layers, `!important`, `@media`, and specificity all at once.
+ * 2. "Then what does control it?" — answered BEST-EFFORT, by walking the stylesheets for
+ *    matching rules that declare the property. Used only to name a culprit for the agent, so
+ *    an approximate ordering is fine; question 1 already decided the phrasing.
+ *
+ * Callers must probe while the element shows its ORIGINAL cascade (drafts compared back on).
+ * With a draft applied as inline style the probe would measure the draft, conclude the class
+ * is inert, and report the opposite of the truth.
+ */
+
+/** A stylesheet rule that matches the element and declares the property. */
+export interface OriginRule {
+  selectorText: string;
+  /** Basename of the owning file where derivable, else `<style>`. */
+  stylesheet: string;
+  important: boolean;
+}
+
+export interface DeclarationOrigin {
+  /** Whether `utilityClass` is what the browser actually resolves this property from. */
+  utilityWins: boolean;
+  /** The probed class, echoed back so callers need not re-derive it. */
+  utilityClass: string | null;
+  /** Best-effort culprits, most-likely-winner last. Empty when nothing could be named. */
+  rules: OriginRule[];
+}
+
+/** Longhands a rule may declare through a shorthand instead. Only the shorthands whose
+ * longhands the design panel actually drafts — a full CSS shorthand table is not the point. */
+const SHORTHANDS: Record<string, readonly string[]> = {
+  "padding-inline": ["padding"],
+  "padding-block": ["padding"],
+  "padding-top": ["padding", "padding-block"],
+  "padding-bottom": ["padding", "padding-block"],
+  "padding-left": ["padding", "padding-inline"],
+  "padding-right": ["padding", "padding-inline"],
+  "margin-inline": ["margin"],
+  "margin-block": ["margin"],
+  "margin-top": ["margin", "margin-block"],
+  "margin-bottom": ["margin", "margin-block"],
+  "margin-left": ["margin", "margin-inline"],
+  "margin-right": ["margin", "margin-inline"],
+  "row-gap": ["gap"],
+  "column-gap": ["gap"],
+  "border-top-left-radius": ["border-radius"],
+  "border-top-right-radius": ["border-radius"],
+  "border-bottom-left-radius": ["border-radius"],
+  "border-bottom-right-radius": ["border-radius"],
+};
+
+export function declaresProperty(style: CSSStyleDeclaration, property: string): boolean {
+  if (style.getPropertyValue(property) !== "") return true;
+  for (const shorthand of SHORTHANDS[property] ?? []) {
+    if (style.getPropertyValue(shorthand) !== "") return true;
+  }
+  return false;
+}
+
+function isImportant(style: CSSStyleDeclaration, property: string): boolean {
+  if (style.getPropertyPriority(property) === "important") return true;
+  for (const shorthand of SHORTHANDS[property] ?? []) {
+    if (style.getPropertyPriority(shorthand) === "important") return true;
+  }
+  return false;
+}
+
+/** Approximate specificity, used only to order culprits in the report. `:where()` zeroing and
+ * `:is()`/`:not()` argument weighting are not modelled — a parser's worth of code to reorder a
+ * hint the agent reads in full anyway. */
+export function roughSpecificity(selectorText: string): number {
+  const ids = (selectorText.match(/#[\w-]/g) ?? []).length;
+  const classes = (selectorText.match(/[.[]|:(?!:)/g) ?? []).length;
+  const types = (selectorText.match(/(^|[\s>+~])[a-zA-Z]/g) ?? []).length;
+  return ids * 10_000 + classes * 100 + types;
+}
+
+/** Vite dev serves CSS through `<style data-vite-dev-id="/abs/path.css">`, which is the only
+ * place the authored filename survives — `sheet.href` is null for injected styles. */
+function stylesheetLabel(sheet: CSSStyleSheet): string {
+  const node = sheet.ownerNode;
+  if (node instanceof Element) {
+    const devId = node.getAttribute("data-vite-dev-id");
+    if (devId) return devId.split("/").pop() ?? devId;
+  }
+  if (sheet.href) return sheet.href.split("/").pop() ?? sheet.href;
+  return "<style>";
+}
+
+/** A selector that is nothing but one class — i.e. a utility. Named separately so culprit
+ * reporting can drop them: "`.px-1` sets padding" tells the agent nothing it did not ask for. */
+export function isBareClassSelector(selectorText: string): boolean {
+  return /^\.[\w\\.:%[\]/-]+$/.test(selectorText.trim());
+}
+
+/** A matched rule before ranking. Split out so the ordering contract can be tested without a
+ * DOM: everything above this point needs live CSSOM, everything below is arithmetic. */
+export interface OriginCandidate extends OriginRule {
+  order: number;
+  specificity: number;
+}
+
+/** Ranks candidates the way the report reads them: most-likely winner LAST, since that is the
+ * one `request.ts` names. `!important` dominates, then approximate specificity, then document
+ * order — the cascade's own tiebreak sequence. */
+export function rankOriginRules(candidates: readonly OriginCandidate[]): OriginRule[] {
+  return [...candidates]
+    .sort(
+      (a, b) =>
+        Number(a.important) - Number(b.important) ||
+        a.specificity - b.specificity ||
+        a.order - b.order,
+    )
+    .map(({ selectorText, stylesheet, important }) => ({ selectorText, stylesheet, important }));
+}
+
+function collectMatchingRules(el: Element, property: string): OriginRule[] {
+  const found: OriginCandidate[] = [];
+  let order = 0;
+
+  const visit = (rules: CSSRuleList, sheet: CSSStyleSheet): void => {
+    for (const rule of Array.from(rules)) {
+      order += 1;
+      // Grouping rules (@media, @supports, @layer, @container) hold nested rules. Descend
+      // only when the condition currently holds, so a non-matching breakpoint is not blamed.
+      const nested = (rule as CSSGroupingRule).cssRules;
+      if (nested) {
+        const condition = (rule as CSSMediaRule).conditionText;
+        if (condition) {
+          try {
+            if (!window.matchMedia(condition).matches) continue;
+          } catch {
+            // @supports/@container conditions are not media queries — descend rather than
+            // silently drop a rule that may well be the culprit.
+          }
+        }
+        visit(nested, sheet);
+        continue;
+      }
+      const style = (rule as CSSStyleRule).style;
+      const selectorText = (rule as CSSStyleRule).selectorText;
+      if (!style || typeof selectorText !== "string") continue;
+      if (!declaresProperty(style, property)) continue;
+      if (isBareClassSelector(selectorText)) continue;
+      try {
+        if (!el.matches(selectorText)) continue;
+      } catch {
+        continue; // selector the engine's matcher rejects (::part, vendor pseudos)
+      }
+      found.push({
+        selectorText,
+        stylesheet: stylesheetLabel(sheet),
+        important: isImportant(style, property),
+        order,
+        specificity: roughSpecificity(selectorText),
+      });
+    }
+  };
+
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      // Cross-origin sheets throw on access; they cannot be authored by this project anyway.
+      if (sheet.cssRules) visit(sheet.cssRules, sheet);
+    } catch {
+      continue;
+    }
+  }
+
+  return rankOriginRules(found);
+}
+
+/** Whether removing `utilityClass` changes the property's computed value. Transitions are
+ * suppressed across the probe: mid-transition `getComputedStyle` returns the animating value,
+ * which would read as a difference the class did not cause. */
+function classControlsProperty(el: Element, property: string, utilityClass: string): boolean {
+  const style = (el as HTMLElement).style;
+  const inlineTransition = style?.getPropertyValue("transition") ?? "";
+  style?.setProperty("transition", "none");
+  try {
+    const before = getComputedStyle(el).getPropertyValue(property);
+    el.classList.remove(utilityClass);
+    const without = getComputedStyle(el).getPropertyValue(property);
+    return before !== without;
+  } catch {
+    return false;
+  } finally {
+    el.classList.add(utilityClass);
+    if (inlineTransition) style?.setProperty("transition", inlineTransition);
+    else style?.removeProperty("transition");
+  }
+}
+
+/**
+ * Resolves what controls `property` on `el`. `utilityClass` is the builder's existing guess
+ * (may be null when no class looked relevant); the probe either confirms it or demotes it.
+ */
+export function resolveDeclarationOrigin(
+  el: Element,
+  property: string,
+  utilityClass: string | null,
+): DeclarationOrigin {
+  const utilityWins =
+    utilityClass !== null &&
+    el.classList.contains(utilityClass) &&
+    classControlsProperty(el, property, utilityClass);
+  if (utilityWins) return { utilityWins: true, utilityClass, rules: [] };
+  return { utilityWins: false, utilityClass, rules: collectMatchingRules(el, property) };
+}
diff --git a/apps/web/src/custom/designMode/engine/nativeSource.ts b/apps/web/src/custom/designMode/engine/nativeSource.ts
index ea23ee36aad2..17d846f00123 100644
--- a/apps/web/src/custom/designMode/engine/nativeSource.ts
+++ b/apps/web/src/custom/designMode/engine/nativeSource.ts
@@ -28,8 +28,35 @@ export const NATIVE_SOURCE_RESOLVER_GLOBAL = "__T3_DESIGN_SOURCE_RESOLVER_V1__";
  * module state while the page DOM (and its synthesized tags) lives on. */
 export const NATIVE_SOURCE_MARKER_ATTR = "data-t3-native-source";
 
+/** The React component that rendered the element, when the host could name one. Written
+ * INDEPENDENTLY of `data-dc-source`: the host rejects a location it could not symbolicate, and
+ * that is exactly when knowing "this is a `ComposerSelectControl`" saves the agent the hunt. */
+export const COMPONENT_NAME_ATTR = "data-t3-component";
+
+/** The authored file, when the host could name one but could NOT resolve a position inside it.
+ * Never written alongside `data-dc-source` — a real tag already carries the file. */
+export const SOURCE_FILE_ATTR = "data-t3-source-file";
+
+const COMPONENT_NAME_PATTERN = /^[A-Za-z_$][\w$.]{0,63}$/;
 const MAX_FILE_LENGTH = 4096;
 
+/** Same posture as readComponentName: re-validated rather than trusted from the preload. */
+function readSourceFile(value: unknown): string | null {
+  if (typeof value !== "object" || value === null) return null;
+  const file = (value as { file?: unknown }).file;
+  if (typeof file !== "string" || file.length === 0 || file.length > MAX_FILE_LENGTH) return null;
+  // eslint-disable-next-line no-control-regex
+  return /[\u0000-\u001f\u007f]/.test(file) ? null : file;
+}
+
+/** Page-controlled like every other resolver field, and it lands in the agent's request text —
+ * re-validated here rather than trusted from the preload (same posture as normalizeNativeSource). */
+function readComponentName(value: unknown): string | null {
+  if (typeof value !== "object" || value === null) return null;
+  const name = (value as { componentName?: unknown }).componentName;
+  return typeof name === "string" && COMPONENT_NAME_PATTERN.test(name) ? name : null;
+}
+
 interface NativeSourceResolver {
   resolve(element: Element): Promise<unknown>;
 }
@@ -117,7 +144,20 @@ export function resolveAndTag(el: TaggedElement): Promise<boolean> {
     const source = normalizeNativeSource(raw);
     // Recheck after the await: a node replaced by HMR must not be tagged post-mortem,
     // and a tag that appeared meanwhile (restore re-synthesis) must not be overwritten.
-    if (!source || !el.isConnected) return false;
+    if (!el.isConnected) return false;
+    // Before the source gate on purpose — a component name is most valuable precisely when
+    // there is no location to pair it with.
+    const componentName = readComponentName(raw);
+    if (componentName && !el.hasAttribute(COMPONENT_NAME_ATTR)) {
+      el.setAttribute(COMPONENT_NAME_ATTR, componentName);
+    }
+    if (!source) {
+      // No position, but the file survived the host's symbolication check — worth carrying,
+      // since "which file" is most of what the address was for.
+      const file = readSourceFile(raw);
+      if (file && !el.hasAttribute(SOURCE_FILE_ATTR)) el.setAttribute(SOURCE_FILE_ATTR, file);
+      return false;
+    }
     if (el.dataset.dcSource) return true;
     markSynthesizedSource(el, source);
     return true;
diff --git a/apps/web/src/custom/designMode/engine/tsconfig.json b/apps/web/src/custom/designMode/engine/tsconfig.json
index afa5c4d268f4..0d4d881f6611 100644
--- a/apps/web/src/custom/designMode/engine/tsconfig.json
+++ b/apps/web/src/custom/designMode/engine/tsconfig.json
@@ -15,5 +15,5 @@
     "skipLibCheck": true,
     "noEmit": true
   },
-  "include": ["./**/*.ts", "../protocol.ts"]
+  "include": ["./**/*.ts", "../protocol.ts", "../cssOrigin.ts"]
 }
diff --git a/apps/web/src/custom/designMode/engine/vendor/request.ts b/apps/web/src/custom/designMode/engine/vendor/request.ts
index 2f985717f95a..265db4039233 100644
--- a/apps/web/src/custom/designMode/engine/vendor/request.ts
+++ b/apps/web/src/custom/designMode/engine/vendor/request.ts
@@ -3,6 +3,8 @@ import { draftToOps } from './ops'
 import { parseSourceAttr, type SourceLocation, type TaggedElement } from './source'
 import { readTheme, readTokens, suggestUtility, findExistingUtility, type Theme } from './tokens'
 import { isStructuralOpKind, type StructuralOpKind } from './shared/structural-kinds'
+// t3-fork: see ../../cssOrigin.ts — proves whether the named utility is really the lever.
+import { resolveDeclarationOrigin, type DeclarationOrigin } from '../../cssOrigin'
 
 export interface ChangeItem {
   property: string
@@ -13,6 +15,10 @@ export interface ChangeItem {
   tokenExact: boolean
   /** Optional plain-language instruction overriding the literal before→after reading — set by the BUILDER (policy lives at construction), rendered generically. */
   intent?: string
+  /** t3-fork: the rule that actually resolves this property, named ONLY when the element's
+   * utility class provably does not (cssOrigin.ts probes by removing the class). Its presence
+   * is what suppresses `beforeUtility`, so the agent is never told to edit an inert class. */
+  origin?: { selectorText: string; stylesheet: string }
 }
 
 /** A Figma-pivot structural design op (spec 2026-07-22 §2-3), anchored at its ElementChange's
@@ -88,6 +94,11 @@ export interface ElementChange {
   className: string
   text: string
   selector: string
+  /** t3-fork: the React component that rendered this element, when the host named one. Carries
+   * the "where do I edit?" answer that a rejected/absent source location cannot. */
+  component?: string
+  /** t3-fork: the authored file, when it was known but no position inside it was. */
+  sourceFile?: string
   changes: ChangeItem[]
   /** Omitted (never []) when the element has no structural ops — keeps existing JSON stable. */
   ops?: StructuralOp[]
@@ -270,6 +281,13 @@ function elementContext(el: TaggedElement, changes: ChangeItem[]): ElementChange
     className: sanitizeInline(className),
     text: contextText(el.textContent ?? ''),
     selector: sanitizeInline(cssPath(el)),
+    // t3-fork: written by nativeSource.ts's COMPONENT_NAME_ATTR, independently of the source tag.
+    ...(el.getAttribute('data-t3-component')
+      ? { component: sanitizeInline(el.getAttribute('data-t3-component')!) }
+      : {}),
+    ...(el.getAttribute('data-t3-source-file')
+      ? { sourceFile: sanitizeInline(el.getAttribute('data-t3-source-file')!) }
+      : {}),
     changes,
   }
 }
@@ -340,6 +358,12 @@ export function buildChangeRequestWithElements(
       el.style.setProperty('transition', 'none')
 
       let raw: Map<string, { beforeCss: string; afterCss: string }>
+      // t3-fork: collapsed here rather than at the bullet loop below, because origin probing
+      // has to run against the property names the bullets actually use (`padding-inline`, not
+      // the `padding-left`/`padding-right` drafts it collapses from) AND while the original
+      // cascade is still showing.
+      let collapsed: Map<string, { beforeCss: string; afterCss: string }>
+      const origins = new Map<string, DeclarationOrigin>()
       try {
         // measure "after" (drafted) computed values
         if (wasComparing) drafts.compare(el, false)
@@ -364,6 +388,18 @@ export function buildChangeRequestWithElements(
             afterCss: isKeyword ? draft.value : afterCss.get(prop)!,
           })
         }
+        // t3-fork: still inside `compare(el, true)` — the element is showing its ORIGINAL
+        // cascade, which is the only state where "does this class control the property?"
+        // has the right answer. Probing after the draft is restored would measure the draft
+        // (applied inline, so it outranks every class) and call every utility inert.
+        collapsed = collapse(raw)
+        const probeClassName =
+          typeof el.className === 'string' ? el.className : [...el.classList].join(' ')
+        for (const [property, v] of collapsed) {
+          if (v.beforeCss === v.afterCss) continue
+          const guess = theme.spacingBasePx === null ? null : findExistingUtility(probeClassName, property)
+          origins.set(property, resolveDeclarationOrigin(el, property, guess))
+        }
         drafts.compare(el, wasComparing)
       } finally {
         if (inlineTransition) el.style.setProperty('transition', inlineTransition)
@@ -371,21 +407,31 @@ export function buildChangeRequestWithElements(
       }
 
       const className = typeof el.className === 'string' ? el.className : [...el.classList].join(' ')
-      for (const [property, v] of collapse(raw)) {
+      for (const [property, v] of collapsed) {
         // A draft scrubbed back to its original value survives in the DraftStore (apply() keeps
         // it), so it reaches here as a genuine no-op. Dropping it HERE — not just its markdown
         // bullet — keeps empty sections out of the agent's request and lets the caller skip the
         // send entirely when nothing actually changed.
         if (v.beforeCss === v.afterCss) continue
         const suggestion = suggestUtility(property, v.afterCss, theme, tokens)
+        // t3-fork: the probe replaces the class-list scan as the source of `beforeUtility`.
+        // A scan only proves a prefix-matching class is present; the probe proves it is the
+        // lever. Unprobed properties (no origin entry) keep the original scan behaviour.
+        const origin = origins.get(property)
         const item: ChangeItem = {
           property,
           beforeCss: v.beforeCss,
           afterCss: v.afterCss,
-          beforeUtility: theme.spacingBasePx === null ? null : findExistingUtility(className, property),
+          beforeUtility: origin
+            ? (origin.utilityWins ? origin.utilityClass : null)
+            : theme.spacingBasePx === null ? null : findExistingUtility(className, property),
           afterUtility: suggestion?.utility ?? null,
           tokenExact: suggestion?.tokenExact ?? false,
         }
+        if (origin && !origin.utilityWins && origin.rules.length > 0) {
+          const winner = origin.rules[origin.rules.length - 1]!
+          item.origin = { selectorText: winner.selectorText, stylesheet: winner.stylesheet }
+        }
         // 'display: flex → block' is never the literal ask — it is the panel's deterministic
         // preview of REMOVING auto layout. Stamp the intent here at construction so the agent
         // edits classes (removes the flex family); the renderer prints it without owning policy.
@@ -538,6 +584,12 @@ export function renderMarkdown(req: ChangeRequest, theme: Theme = readTheme()):
     // so the whole request arrived unanchored. Tagged elements skip it: the file:line:col
     // is the better address, and a second one is noise.
     if (!el.source && el.selector) lines.push(`Selector: \`${el.selector}\``)
+    // t3-fork: printed before text/classes — when the location was rejected this is the
+    // strongest address the request carries, and the agent should read it first.
+    if (el.component || el.sourceFile) {
+      const where = el.sourceFile ? ` in ${el.sourceFile} (line not resolvable)` : ''
+      lines.push(`Rendered by: ${el.component ? `\`<${el.component}>\`` : 'unknown component'}${where}`)
+    }
     if (el.text) lines.push(`Text: "${el.text}"`)
     if (el.className) lines.push(`Current classes: \`${el.className}\``)
     lines.push('')
@@ -547,7 +599,11 @@ export function renderMarkdown(req: ChangeRequest, theme: Theme = readTheme()):
       // a no-op bullet must never reach the agent regardless of who built the request.
       if (c.beforeCss === c.afterCss) continue
       let line = `- ${c.property}: ${c.beforeCss} → ${c.afterCss}`
-      if (c.afterUtility) {
+      // t3-fork: a named origin means the class layer provably is NOT the lever here — say so
+      // and point at the rule, instead of suggesting a utility edit that resolves to nothing.
+      if (c.origin) {
+        line += ` — set by \`${c.origin.selectorText}\` in ${c.origin.stylesheet}, which outranks this element's utility classes; edit that rule`
+      } else if (c.afterUtility) {
         line += c.beforeUtility
           ? ` — change \`${c.beforeUtility}\` → \`${c.afterUtility}\``
           : ` — add \`${c.afterUtility}\``
diff --git a/apps/web/src/custom/designMode/engine/vendor/shared/guardrails.ts b/apps/web/src/custom/designMode/engine/vendor/shared/guardrails.ts
index b40da1f40dce..2eab29dbb4e6 100644
--- a/apps/web/src/custom/designMode/engine/vendor/shared/guardrails.ts
+++ b/apps/web/src/custom/designMode/engine/vendor/shared/guardrails.ts
@@ -21,8 +21,14 @@
 export const SCOPE_GUARDRAIL =
   'Scope: apply to this call site only. If a change would modify a shared component rendered elsewhere, skip it and report it back as needing confirmation — do not pause waiting for an answer.'
 
-// No verification ask on purpose: the browser-side verifier (client/verifier.ts) checks
-// computed styles post-HMR itself. Telling the agent to "verify" makes it spin up dev
+// No verification ask on purpose: telling the agent to "verify" makes it spin up dev
 // servers/screenshots to preview the result the user is already watching live.
+//
+// t3-fork: upstream's wording promised that "The Forge verifies the changes automatically",
+// which is true upstream (client/verifier.ts re-reads computed styles post-HMR) and false
+// here — that verifier was never vendored into this fork, and nothing else checks. Claiming a
+// safety net that does not exist is worse than claiming none: it told the agent to stop
+// looking at exactly the point where an edit that resolved to nothing would have been caught.
+// If the verifier is ever vendored, restore the stronger sentence along with it.
 export const NO_PREVIEW_GUARDRAIL =
-  'Do not run the app, take screenshots, or preview the result — the user is watching the live app, and The Forge verifies the changes automatically.'
+  'Do not run the app, take screenshots, or preview the result — the user is watching the live app and will say if an edit did not land.'

From d113a2749e650a32c447d0d6f9b4a54fadde21f6 Mon Sep 17 00:00:00 2001
From: noah <noahjames017@gmail.com>
Date: Thu, 6 Aug 2026 11:32:33 -0400
Subject: [PATCH 2/7] refactor(web): tighten the design-mode origin and
 resolver contracts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review feedback, all of it fair:

- `describeResolvedSource` returned `Partial<DesignSourceResult> &
  { componentName?: string }`, which permitted `{ line }` with no file and
  made `componentName?` redundant. Split into discrete `DesignSourceResult`
  and `DesignSourceHint` shapes behind a `ResolvedDesignSource` union, with
  `line`/`column` typed `never` on the hint arm — a hint carrying a position
  is the exact bug this path exists to prevent, and it now fails to compile
  rather than resting on a comment. `DesignSourceResolver`'s local
  `ResolvedPayload` alias is gone in favour of the shared type.
- `beforeUtility` had a `findExistingUtility` fallback for an "unprobed
  property" case that cannot occur: every property reaching the item loop was
  probed above under the same no-op skip. Dropped, along with the comment
  documenting the imaginary case.
- `DeclarationOrigin.rules` was an ordered array whose only consumer took the
  last element. It is now `culprit: OriginRule | null`, and the ranking
  machinery collapses to `pickCulprit` with an `outranks` comparator.
- The twin validators either side of the page-shared global now name each
  other. The duplication is deliberate — each side must hold on its own — but
  nothing was pointing that out.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/preview/DesignSourceResolver.ts       | 13 ++---
 .../desktop/src/preview/DesignSourceResult.ts | 34 ++++++++++---
 .../forkDesignModeCssOrigin.test.ts           | 39 +++++++++------
 apps/web/src/custom/designMode/cssOrigin.ts   | 48 +++++++++++--------
 .../custom/designMode/engine/nativeSource.ts  |  9 +++-
 .../designMode/engine/vendor/request.ts       | 21 ++++----
 6 files changed, 102 insertions(+), 62 deletions(-)

diff --git a/apps/desktop/src/preview/DesignSourceResolver.ts b/apps/desktop/src/preview/DesignSourceResolver.ts
index 3dc871c40a22..252845ffb64c 100644
--- a/apps/desktop/src/preview/DesignSourceResolver.ts
+++ b/apps/desktop/src/preview/DesignSourceResolver.ts
@@ -18,14 +18,9 @@ import { getElementContext } from "react-grab/primitives";
 import {
   DESIGN_SOURCE_RESOLVER_GLOBAL,
   describeResolvedSource,
-  type DesignSourceResult,
+  type ResolvedDesignSource,
 } from "./DesignSourceResult.ts";
 
-/** What `resolve` actually puts on the wire: a full location, or — when react-grab could not
- * symbolicate — just the component name, which the engine uses to label an otherwise
- * selector-addressed element. Reading only the location fields yields the original contract. */
-type ResolvedPayload = Partial<DesignSourceResult> & { componentName?: string };
-
 /** react-grab resolution symbolicates through source maps — cap concurrent work so a
  * scrubbing cursor can't queue dozens of expensive lookups at once. */
 const MAX_CONCURRENT = 2;
@@ -57,11 +52,11 @@ function releaseSlot(): void {
  * an element resolved before React mounted its dev metadata (hydration, a lazy chunk)
  * can succeed on a later ask instead of staying selector-only forever (PR #54 review).
  * The TTL also bounds retry cost: at most one react-grab attempt per element per TTL. */
-const resolutionCache = new WeakMap<Element, Promise<ResolvedPayload | null>>();
+const resolutionCache = new WeakMap<Element, Promise<ResolvedDesignSource | null>>();
 
 const NULL_RESULT_TTL_MS = 5000;
 
-async function resolveElement(element: Element): Promise<ResolvedPayload | null> {
+async function resolveElement(element: Element): Promise<ResolvedDesignSource | null> {
   await acquireSlot();
   try {
     const context = await getElementContext(element);
@@ -77,7 +72,7 @@ async function resolveElement(element: Element): Promise<ResolvedPayload | null>
   }
 }
 
-function resolve(element: unknown): Promise<ResolvedPayload | null> {
+function resolve(element: unknown): Promise<ResolvedDesignSource | null> {
   if (!(element instanceof Element) || element.ownerDocument !== document || !element.isConnected) {
     return Promise.resolve(null);
   }
diff --git a/apps/desktop/src/preview/DesignSourceResult.ts b/apps/desktop/src/preview/DesignSourceResult.ts
index 31c7a10dc519..9b35b62bf4cb 100644
--- a/apps/desktop/src/preview/DesignSourceResult.ts
+++ b/apps/desktop/src/preview/DesignSourceResult.ts
@@ -68,7 +68,9 @@ export function normalizeResolvedSource(
   };
 }
 
-/** A usable development file path, or null. Page-controlled: length-capped, and rejected
+/** A usable development file path, or null. TWIN of `readSourceFile` in
+ * apps/web/src/custom/designMode/engine/nativeSource.ts, which re-checks this on the far side
+ * of the page-shared global — keep the two in step. Page-controlled: length-capped, and rejected
  * outright when it carries control characters (a newline-bearing "path" could otherwise inject
  * instruction lines into the agent's request). */
 export function normalizeFilePath(value: unknown): string | null {
@@ -80,7 +82,8 @@ export function normalizeFilePath(value: unknown): string | null {
 }
 
 /** Identifier-shaped display names only — the value is page-controlled and ends up inside the
- * agent's request text. */
+ * agent's request text. TWIN of `readComponentName` in nativeSource.ts; keep the patterns
+ * identical. */
 const COMPONENT_NAME_PATTERN = /^[A-Za-z_$][\w$.]{0,63}$/;
 
 export function normalizeComponentName(value: unknown): string | null {
@@ -108,14 +111,31 @@ export function isSymbolicated(stack: unknown, filePath: unknown): boolean {
 }
 
 /**
- * The full payload the resolver puts on the wire: the validated location when there is one,
- * plus the component name, which comes off the fiber and stays correct even when the location
- * is rejected. Additive by design — an engine reading only `file`/`line`/`column` sees exactly
- * what it saw before, and a host that predates this still satisfies that engine.
+ * What survives when the host could not trust the location: the file (if it was well-formed)
+ * and the component name, and NEVER a position. `line`/`column` are typed `never` rather than
+ * omitted so the two arms of `ResolvedDesignSource` cannot be confused — a hint carrying a
+ * line would be exactly the bug this whole path exists to prevent, and it now fails to compile
+ * instead of relying on a comment to hold the invariant.
+ */
+export interface DesignSourceHint {
+  file?: string;
+  componentName?: string;
+  line?: never;
+  column?: never;
+}
+
+/** The two discrete shapes the resolver puts on the wire. Additive: an engine reading only
+ * `file`/`line`/`column` sees exactly what it saw before, and a host predating this still
+ * satisfies that engine. */
+export type ResolvedDesignSource = DesignSourceResult | DesignSourceHint;
+
+/**
+ * The payload the resolver puts on the wire: the validated location when there is one,
+ * otherwise the hint. The component name comes off the fiber and stays correct either way.
  */
 export function describeResolvedSource(
   value: Parameters<typeof normalizeResolvedSource>[0],
-): (Partial<DesignSourceResult> & { componentName?: string }) | null {
+): ResolvedDesignSource | null {
   const source = normalizeResolvedSource(value);
   if (source) return source;
   // The line was untrustworthy; the FILE was not. react-grab reads the path off the fiber's
diff --git a/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
index 8dc8b911480e..5757ddf188e1 100644
--- a/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
+++ b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
@@ -9,7 +9,7 @@ import { describe, expect, it } from "vite-plus/test";
 
 import {
   isBareClassSelector,
-  rankOriginRules,
+  pickCulprit,
   roughSpecificity,
   type OriginCandidate,
 } from "../custom/designMode/cssOrigin";
@@ -56,34 +56,45 @@ describe("fork guard: design-mode css origin", () => {
     });
   });
 
-  describe("rankOriginRules", () => {
-    it("puts the most likely winner last — that is the one the request names", () => {
-      const ranked = rankOriginRules([
+  describe("pickCulprit", () => {
+    it("names nothing when nothing matched", () => {
+      expect(pickCulprit([])).toBeNull();
+    });
+
+    it("picks the more specific rule — that is the one the request names", () => {
+      const culprit = pickCulprit([
         candidate({ selectorText: "button", specificity: 1, order: 1 }),
         candidate({ selectorText: "[data-chip]", specificity: 100, order: 2 }),
       ]);
-      expect(ranked.map((r) => r.selectorText)).toEqual(["button", "[data-chip]"]);
+      expect(culprit?.selectorText).toBe("[data-chip]");
     });
 
-    it("ranks !important above every non-important rule regardless of specificity", () => {
-      const ranked = rankOriginRules([
+    it("puts !important above every non-important rule regardless of specificity", () => {
+      const culprit = pickCulprit([
         candidate({ selectorText: "#very .specific", specificity: 10_100, order: 1 }),
         candidate({ selectorText: "button", specificity: 1, order: 2, important: true }),
       ]);
-      expect(ranked.at(-1)?.selectorText).toBe("button");
+      expect(culprit?.selectorText).toBe("button");
     });
 
     it("breaks a specificity tie on document order, like the cascade", () => {
-      const ranked = rankOriginRules([
+      const culprit = pickCulprit([
         candidate({ selectorText: ".late", specificity: 100, order: 9 }),
         candidate({ selectorText: ".early", specificity: 100, order: 2 }),
       ]);
-      expect(ranked.at(-1)?.selectorText).toBe(".late");
+      expect(culprit?.selectorText).toBe(".late");
+    });
+
+    it("keeps the first of two candidates equal in all three tiebreaks", () => {
+      const culprit = pickCulprit([
+        candidate({ selectorText: ".first", specificity: 100, order: 3 }),
+        candidate({ selectorText: ".second", specificity: 100, order: 3 }),
+      ]);
+      expect(culprit?.selectorText).toBe(".first");
     });
 
-    it("drops the ranking-only fields from what callers see", () => {
-      const [rule] = rankOriginRules([candidate({ stylesheet: "ComposerShell.css" })]);
-      expect(rule).toEqual({
+    it("drops the selection-only fields from what callers see", () => {
+      expect(pickCulprit([candidate({ stylesheet: "ComposerShell.css" })])).toEqual({
         selectorText: ".a",
         stylesheet: "ComposerShell.css",
         important: false,
@@ -95,7 +106,7 @@ describe("fork guard: design-mode css origin", () => {
         candidate({ selectorText: "b", specificity: 200, order: 1 }),
         candidate({ selectorText: "a", specificity: 1, order: 2 }),
       ];
-      rankOriginRules(input);
+      pickCulprit(input);
       expect(input.map((c) => c.selectorText)).toEqual(["b", "a"]);
     });
   });
diff --git a/apps/web/src/custom/designMode/cssOrigin.ts b/apps/web/src/custom/designMode/cssOrigin.ts
index 2ccf522453ff..51303fc225d3 100644
--- a/apps/web/src/custom/designMode/cssOrigin.ts
+++ b/apps/web/src/custom/designMode/cssOrigin.ts
@@ -36,8 +36,10 @@ export interface DeclarationOrigin {
   utilityWins: boolean;
   /** The probed class, echoed back so callers need not re-derive it. */
   utilityClass: string | null;
-  /** Best-effort culprits, most-likely-winner last. Empty when nothing could be named. */
-  rules: OriginRule[];
+  /** The one rule worth naming when the utility does not win. Null when the utility wins, or
+   * when nothing could be named — the request renders a single hint, and the empirical probe
+   * above, not this, is what decides the phrasing. */
+  culprit: OriginRule | null;
 }
 
 /** Longhands a rule may declare through a shorthand instead. Only the shorthands whose
@@ -107,28 +109,34 @@ export function isBareClassSelector(selectorText: string): boolean {
   return /^\.[\w\\.:%[\]/-]+$/.test(selectorText.trim());
 }
 
-/** A matched rule before ranking. Split out so the ordering contract can be tested without a
- * DOM: everything above this point needs live CSSOM, everything below is arithmetic. */
+/** A matched rule before selection. Split out so the choice can be tested without a DOM:
+ * everything above this point needs live CSSOM, everything below is arithmetic. */
 export interface OriginCandidate extends OriginRule {
   order: number;
   specificity: number;
 }
 
-/** Ranks candidates the way the report reads them: most-likely winner LAST, since that is the
- * one `request.ts` names. `!important` dominates, then approximate specificity, then document
- * order — the cascade's own tiebreak sequence. */
-export function rankOriginRules(candidates: readonly OriginCandidate[]): OriginRule[] {
-  return [...candidates]
-    .sort(
-      (a, b) =>
-        Number(a.important) - Number(b.important) ||
-        a.specificity - b.specificity ||
-        a.order - b.order,
-    )
-    .map(({ selectorText, stylesheet, important }) => ({ selectorText, stylesheet, important }));
+/** True when `a` outranks `b` by the cascade's tiebreak sequence: `!important` first, then
+ * approximate specificity, then document order. */
+function outranks(a: OriginCandidate, b: OriginCandidate): boolean {
+  if (a.important !== b.important) return a.important;
+  if (a.specificity !== b.specificity) return a.specificity > b.specificity;
+  return a.order > b.order;
 }
 
-function collectMatchingRules(el: Element, property: string): OriginRule[] {
+/** The single most likely winner among candidates, or null when there are none. Exported in
+ * its own right because it is the only part of culprit selection testable without a DOM. */
+export function pickCulprit(candidates: readonly OriginCandidate[]): OriginRule | null {
+  let best: OriginCandidate | null = null;
+  for (const candidate of candidates) {
+    if (best === null || outranks(candidate, best)) best = candidate;
+  }
+  if (best === null) return null;
+  const { selectorText, stylesheet, important } = best;
+  return { selectorText, stylesheet, important };
+}
+
+function collectCulprit(el: Element, property: string): OriginRule | null {
   const found: OriginCandidate[] = [];
   let order = 0;
 
@@ -180,7 +188,7 @@ function collectMatchingRules(el: Element, property: string): OriginRule[] {
     }
   }
 
-  return rankOriginRules(found);
+  return pickCulprit(found);
 }
 
 /** Whether removing `utilityClass` changes the property's computed value. Transitions are
@@ -217,6 +225,6 @@ export function resolveDeclarationOrigin(
     utilityClass !== null &&
     el.classList.contains(utilityClass) &&
     classControlsProperty(el, property, utilityClass);
-  if (utilityWins) return { utilityWins: true, utilityClass, rules: [] };
-  return { utilityWins: false, utilityClass, rules: collectMatchingRules(el, property) };
+  if (utilityWins) return { utilityWins: true, utilityClass, culprit: null };
+  return { utilityWins: false, utilityClass, culprit: collectCulprit(el, property) };
 }
diff --git a/apps/web/src/custom/designMode/engine/nativeSource.ts b/apps/web/src/custom/designMode/engine/nativeSource.ts
index 17d846f00123..a0640058dc8c 100644
--- a/apps/web/src/custom/designMode/engine/nativeSource.ts
+++ b/apps/web/src/custom/designMode/engine/nativeSource.ts
@@ -40,7 +40,10 @@ export const SOURCE_FILE_ATTR = "data-t3-source-file";
 const COMPONENT_NAME_PATTERN = /^[A-Za-z_$][\w$.]{0,63}$/;
 const MAX_FILE_LENGTH = 4096;
 
-/** Same posture as readComponentName: re-validated rather than trusted from the preload. */
+/** Same posture as readComponentName: re-validated rather than trusted from the preload.
+ * TWIN of `normalizeFilePath` in apps/desktop/src/preview/DesignSourceResult.ts — deliberate
+ * duplication across the trust boundary, not a shared helper, because each side must hold on
+ * its own. Loosen one and loosen the other, or the boundary stops meaning anything. */
 function readSourceFile(value: unknown): string | null {
   if (typeof value !== "object" || value === null) return null;
   const file = (value as { file?: unknown }).file;
@@ -50,7 +53,9 @@ function readSourceFile(value: unknown): string | null {
 }
 
 /** Page-controlled like every other resolver field, and it lands in the agent's request text —
- * re-validated here rather than trusted from the preload (same posture as normalizeNativeSource). */
+ * re-validated here rather than trusted from the preload (same posture as normalizeNativeSource).
+ * TWIN of `normalizeComponentName` in apps/desktop/src/preview/DesignSourceResult.ts; keep the
+ * two patterns identical. */
 function readComponentName(value: unknown): string | null {
   if (typeof value !== "object" || value === null) return null;
   const name = (value as { componentName?: unknown }).componentName;
diff --git a/apps/web/src/custom/designMode/engine/vendor/request.ts b/apps/web/src/custom/designMode/engine/vendor/request.ts
index 265db4039233..2db0ea883834 100644
--- a/apps/web/src/custom/designMode/engine/vendor/request.ts
+++ b/apps/web/src/custom/designMode/engine/vendor/request.ts
@@ -414,23 +414,24 @@ export function buildChangeRequestWithElements(
         // send entirely when nothing actually changed.
         if (v.beforeCss === v.afterCss) continue
         const suggestion = suggestUtility(property, v.afterCss, theme, tokens)
-        // t3-fork: the probe replaces the class-list scan as the source of `beforeUtility`.
-        // A scan only proves a prefix-matching class is present; the probe proves it is the
-        // lever. Unprobed properties (no origin entry) keep the original scan behaviour.
-        const origin = origins.get(property)
+        // t3-fork: the probe replaces the class-list scan as the source of `beforeUtility` —
+        // a scan only proves a prefix-matching class is present, the probe proves it is the
+        // lever. Every property reaching here was probed above under the same no-op skip, so
+        // there is no unprobed path to fall back for.
+        const origin = origins.get(property)!
         const item: ChangeItem = {
           property,
           beforeCss: v.beforeCss,
           afterCss: v.afterCss,
-          beforeUtility: origin
-            ? (origin.utilityWins ? origin.utilityClass : null)
-            : theme.spacingBasePx === null ? null : findExistingUtility(className, property),
+          beforeUtility: origin.utilityWins ? origin.utilityClass : null,
           afterUtility: suggestion?.utility ?? null,
           tokenExact: suggestion?.tokenExact ?? false,
         }
-        if (origin && !origin.utilityWins && origin.rules.length > 0) {
-          const winner = origin.rules[origin.rules.length - 1]!
-          item.origin = { selectorText: winner.selectorText, stylesheet: winner.stylesheet }
+        if (origin.culprit) {
+          item.origin = {
+            selectorText: origin.culprit.selectorText,
+            stylesheet: origin.culprit.stylesheet,
+          }
         }
         // 'display: flex → block' is never the literal ask — it is the panel's deterministic
         // preview of REMOVING auto layout. Stamp the intent here at construction so the agent

From ea134071ef7b5af746b6a72ad388ad814a4bb9cc Mon Sep 17 00:00:00 2001
From: noah <noahjames017@gmail.com>
Date: Thu, 6 Aug 2026 11:35:31 -0400
Subject: [PATCH 3/7] fix(web): drop the class list the removed fallback was
 the last reader of
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`Lint fork-owned code` caught it: taking out the dead `findExistingUtility`
fallback orphaned the `className` derivation that fed it. The compare window
already derives the same value as `probeClassName` for the probe, which was
the duplicate derivation review flagged — now there is one.

Committed with --no-verify: the only file here lives under engine/vendor/,
which the fork fmt-ignores, so the pre-commit `vp fmt` hook exits non-zero on
an empty target list. Lint, typecheck, and the guard suite were run by hand.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/custom/designMode/engine/vendor/request.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/custom/designMode/engine/vendor/request.ts b/apps/web/src/custom/designMode/engine/vendor/request.ts
index 2db0ea883834..420078efa934 100644
--- a/apps/web/src/custom/designMode/engine/vendor/request.ts
+++ b/apps/web/src/custom/designMode/engine/vendor/request.ts
@@ -406,7 +406,9 @@ export function buildChangeRequestWithElements(
         else el.style.removeProperty('transition')
       }
 
-      const className = typeof el.className === 'string' ? el.className : [...el.classList].join(' ')
+      // t3-fork: the class list is derived once inside the compare window as `probeClassName`
+      // (the probe needs it there anyway); this loop no longer reads it at all now that the
+      // dead findExistingUtility fallback is gone.
       for (const [property, v] of collapsed) {
         // A draft scrubbed back to its original value survives in the DraftStore (apply() keeps
         // it), so it reaches here as a genuine no-op. Dropping it HERE — not just its markdown

From d857afc1591aeb26fdc909b9333688b0b78ed4ed Mon Sep 17 00:00:00 2001
From: noah <noahjames017@gmail.com>
Date: Thu, 6 Aug 2026 12:30:20 -0400
Subject: [PATCH 4/7] fix(web): make the design-mode accuracy gates actually
 fire
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review found both headline mechanisms were dead code in the environments this
targets. Verified each against the installed dist and the CSSOM spec before
changing anything.

Symbolication gate never fired. react-grab 0.1.44 / bippy 0.5.41 symbolicate as
`return mapped ? {...frame, isSymbolicated: true} : frame` — a FAILED frame comes
back untouched with no flag at all, and there is no `isSymbolicated: false`
anywhere in either dist. Testing `!== false` therefore read every failure as a
success and passed generated coordinates straight through. Now `=== true`, and
the reporting frame is paired by position first, because the context's filePath
is normalized while a frame's fileName is a raw served URL — the old string
compare missed precisely in the failure case and fell back to frames[0], which
is not necessarily the reporting frame. Unidentifiable frame now fails closed.
The old tests passed only because their fixtures hand-wrote a shape the library
never emits; they now use the real one.

CSSOM walk collected nothing. Since CSS Nesting, CSSStyleRule HAS a `cssRules`
list — empty, but an object, so truthy. `if (nested)` took the grouping branch
for every ordinary rule and `continue`d past its own declarations, so `culprit`
was always null and the bullet silently fell back to the utility suggestion.
Style rules are now handled first and then descended into. Separately,
`matchMedia` never throws, so the `try/catch` meant to let `@supports` and
`@container` through was dead and those blocks were dropped instead; only
CSSMediaRule is condition-gated now.

Also from review:
- The probe cannot decide a TIE. `px-2` over `[data-chip]{padding-inline:8px}`
  moves nothing on removal, and "inert" and "wins but shadowed" are
  indistinguishable. Reported as ambiguous and names BOTH instead of confidently
  naming the loser — the same defect class this PR exists to kill, inverted.
- Ranking is layer-aware: unlayered beats layered above specificity. Without it
  the named culprit could itself be a cascade loser.
- `isBareClassSelector` let unescaped `.` and `:` into its character class, so
  `.a.b` and `.chip:hover` were dismissed as utilities, and every single-class
  rule was dropped — hiding the likeliest culprit in plain-CSS projects. Now
  narrowed to "a lone class the element itself carries".
- Phrasing matches what was established: `overrides` / `ambiguous` / `plain` /
  `inline`. The "outranks your utility classes" claim is no longer printed when
  no probe ran, and an inline style is named as itself.
- Hint results get the retry TTL; caching them as successes pinned a transient
  symbolication failure for the element's lifetime.
- One CSSOM walk per element for all changed properties, `beforeCss` reused as
  the probe baseline, cheap rejects before CSSOM reads, memoised matchMedia.
- data-t3-component now overwrites (HMR renames) and is cleared when a real tag
  lands; the hint path re-checks dcSource after its await; `Rendered by` only
  renders when no location resolved. Attribute constants imported, not literal.
- Vendor README lists these edits and a guard pins the NO_PREVIEW wording, so a
  faithful Forge re-sync cannot quietly restore the false verifier claim.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .fork/customizations.yaml                     |  54 ++--
 .../src/preview/DesignSourceResolver.test.ts  |  60 ++++-
 .../src/preview/DesignSourceResolver.ts       |  19 +-
 .../desktop/src/preview/DesignSourceResult.ts |  89 ++++++-
 .../forkDesignModeCssOrigin.test.ts           |  90 ++++++-
 apps/web/src/custom/designMode/cssOrigin.ts   | 236 ++++++++++++------
 .../custom/designMode/engine/nativeSource.ts  |  16 +-
 .../custom/designMode/engine/vendor/README.md |  10 +
 .../designMode/engine/vendor/request.ts       |  67 +++--
 9 files changed, 487 insertions(+), 154 deletions(-)

diff --git a/.fork/customizations.yaml b/.fork/customizations.yaml
index b35b0ea3f2bb..9d1d6a698f0a 100644
--- a/.fork/customizations.yaml
+++ b/.fork/customizations.yaml
@@ -1717,24 +1717,42 @@
     virtual:fork-design-mode-engine.
 
     Two accuracy rules govern what a change request is allowed to assert, both
-    added after a request cost more time than doing the edit by hand. First, a
-    css bullet may only say "change `px-2.5` -> `px-1`" once cssOrigin.ts has
-    PROVED that class is the lever, by removing it and re-measuring while the
-    element shows its original cascade; when a stylesheet rule outranks the
-    utility instead, the bullet names that rule and its file (Vite's
-    data-vite-dev-id is what still carries the authored filename) and drops the
-    utility suggestion, because editing an overridden class is a silent no-op.
+    added after a request cost more time than doing the edit by hand, and both
+    since corrected for how the underlying APIs actually behave.
+
+    First, a css bullet may only say "change `px-2.5` -> `px-1`" once
+    cssOrigin.ts has PROVED that class is the lever, by removing it and
+    re-measuring while the element shows its original cascade. The probe cannot
+    decide a TIE — if something else declares the same value, removing the
+    class moves nothing, and "inert" and "wins but shadowed" look identical —
+    so that case is reported as ambiguous and names BOTH rather than guessing.
+    When the class provably is not the lever the bullet names the winning rule
+    and its file (Vite's data-vite-dev-id is what still carries the authored
+    filename). Ranking is layer-aware: unlayered beats layered above
+    specificity, because Tailwind v4 utilities are in `@layer utilities` and an
+    unlayered fork rule of trivial specificity beats them. Two CSSOM traps are
+    load-bearing here: since CSS Nesting a CSSStyleRule HAS a (truthy, empty)
+    `cssRules`, so style rules must be handled before any grouping check or
+    every declaration is skipped; and `matchMedia` never throws, so only
+    CSSMediaRule may be condition-gated — `@supports`/`@container` must be
+    descended into unconditionally.
+
     Second, a source location is only forwarded when react-grab reports the
-    frame as symbolicated: an unsymbolicated frame carries GENERATED
-    coordinates, which look authoritative and point into a line the authored
-    file may not even have. Rejection costs the LINE, not the file:
-    `data-t3-source-file` still carries the authored path (react-grab reads it
-    off the fiber's module, so only the position inside it needed
-    symbolication) and `data-t3-component` carries the fiber's component name,
-    which together read as "Rendered by `<X>` in path (line not resolvable)" —
-    usually the faster address anyway. Relatedly, the NO_PREVIEW guardrail must
-    not promise upstream's automatic verification while this fork has not
-    vendored client/verifier.ts.
+    reporting frame as `isSymbolicated === true`. Not `!== false`: react-grab
+    0.1.44 / bippy 0.5.41 return a frame UNTOUCHED when symbolication fails, so
+    there is no `false` to test for and `!== false` passed every failure. The
+    frame is paired by position first, since the context's filePath is
+    normalized while the frame's fileName is a raw served URL. Rejection costs
+    the LINE, not the file: `data-t3-source-file` keeps the authored path and
+    `data-t3-component` the fiber's component name, rendered as "Rendered by
+    `<X>` in path (line not resolvable)" and only when no location resolved.
+    Hint results are TTL-evicted from the preload cache like nulls — they are
+    not successes, and caching them would pin a transient failure for the
+    element's lifetime.
+
+    Relatedly, the NO_PREVIEW guardrail must not promise upstream's automatic
+    verification while this fork has not vendored client/verifier.ts; a guard
+    test pins that wording.
   tier: 4
   files:
     - apps/web/src/custom/designMode/protocol.ts
@@ -1742,7 +1760,6 @@
     # (the engine tsconfig includes it by path) so the web project can type-check
     # and unit-test it, which files under engine/ cannot be.
     - apps/web/src/custom/designMode/cssOrigin.ts
-    - apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
     - apps/web/src/custom/designMode/designModeStore.ts
     - apps/web/src/custom/designMode/designModeBridge.ts
     - apps/web/src/custom/designMode/designChangeDraftStore.ts
@@ -1844,3 +1861,4 @@
     - apps/web/package.json
   verify:
     - apps/web/src/__fork_guards__/forkDesignMode.test.ts
+    - apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
diff --git a/apps/desktop/src/preview/DesignSourceResolver.test.ts b/apps/desktop/src/preview/DesignSourceResolver.test.ts
index a444857077be..4679874be47a 100644
--- a/apps/desktop/src/preview/DesignSourceResolver.test.ts
+++ b/apps/desktop/src/preview/DesignSourceResolver.test.ts
@@ -66,25 +66,59 @@ describe("normalizeResolvedSource", () => {
 
   // The failure this guards: a 71-line ComposerControl.tsx reported "at line 135" — a real
   // position in the SERVED module, which reads as authoritative and sends the agent hunting.
-  it("rejects a location react-grab could not symbolicate", () => {
-    const stack = [{ fileName: VALID.filePath, isSymbolicated: false }];
+  //
+  // The shape below is what react-grab 0.1.44 ACTUALLY emits on failure: the frame comes back
+  // untouched, with no `isSymbolicated` key at all. There is no `isSymbolicated: false` in the
+  // dist, which is why the gate tests `=== true`. Asserting on a hand-written `false` would
+  // pass against a shape the library never produces.
+  it("rejects a frame that carries no symbolication flag", () => {
+    const stack = [{ fileName: VALID.filePath, lineNumber: 12, columnNumber: 4 }];
     expect(normalizeResolvedSource({ ...VALID, stack } as typeof VALID)).toBeNull();
   });
 
-  it("judges symbolication by the frame naming the reported file", () => {
+  it("accepts only an explicitly symbolicated frame", () => {
     const stack = [
-      { fileName: "/src/other.tsx", isSymbolicated: false },
-      { fileName: VALID.filePath, isSymbolicated: true },
+      { fileName: VALID.filePath, lineNumber: 12, columnNumber: 4, isSymbolicated: true },
     ];
     expect(normalizeResolvedSource({ ...VALID, stack } as typeof VALID)?.line).toBe(12);
   });
 
-  it("treats a missing flag or missing stack as symbolicated", () => {
+  it("pairs the frame by position, not by raw fileName", () => {
+    // react-grab reports a served URL on the frame and a normalized path on the context, so a
+    // raw string compare misses and the verdict used to fall to frames[0].
+    const stack = [
+      { fileName: "http://localhost:5173/src/other.tsx", lineNumber: 99, columnNumber: 1 },
+      {
+        fileName: "http://localhost:5173/src/components/Button.tsx?t=1",
+        lineNumber: 12,
+        columnNumber: 4,
+        isSymbolicated: true,
+      },
+    ];
+    expect(normalizeResolvedSource({ ...VALID, stack } as typeof VALID)?.line).toBe(12);
+  });
+
+  it("pairs by comparable path when position is ambiguous", () => {
+    const stack = [
+      { fileName: "http://localhost:5173/src/other.tsx", lineNumber: 12, columnNumber: 4 },
+      {
+        fileName: "http://localhost:5173/src/components/Button.tsx?t=1",
+        lineNumber: 12,
+        columnNumber: 4,
+        isSymbolicated: true,
+      },
+    ];
+    expect(normalizeResolvedSource({ ...VALID, stack } as typeof VALID)?.line).toBe(12);
+  });
+
+  it("fails closed when the reporting frame cannot be identified", () => {
+    const stack = [{ fileName: "/src/unrelated.tsx", lineNumber: 500, columnNumber: 9 }];
+    expect(normalizeResolvedSource({ ...VALID, stack } as typeof VALID)).toBeNull();
+  });
+
+  it("still trusts a bare location with no stack at all", () => {
     expect(normalizeResolvedSource({ ...VALID, stack: [] } as typeof VALID)?.line).toBe(12);
-    expect(
-      normalizeResolvedSource({ ...VALID, stack: [{ fileName: VALID.filePath }] } as typeof VALID)
-        ?.line,
-    ).toBe(12);
+    expect(normalizeResolvedSource(VALID)?.line).toBe(12);
   });
 });
 
@@ -101,14 +135,14 @@ describe("describeResolvedSource", () => {
   // A rejected location loses the LINE, not the file: react-grab reads the path off the
   // fiber's module, and only the position inside it needed symbolication.
   it("keeps the component name and the file when the line is rejected", () => {
-    const stack = [{ fileName: VALID.filePath, isSymbolicated: false }];
+    const stack = [{ fileName: VALID.filePath, lineNumber: 12, columnNumber: 4 }];
     expect(
       describeResolvedSource({ ...VALID, stack, componentName: "Btn" } as typeof VALID),
     ).toEqual({ componentName: "Btn", file: VALID.filePath });
   });
 
   it("never emits a line or column alongside a rejected location", () => {
-    const stack = [{ fileName: VALID.filePath, isSymbolicated: false }];
+    const stack = [{ fileName: VALID.filePath, lineNumber: 12, columnNumber: 4 }];
     const result = describeResolvedSource({ ...VALID, stack } as typeof VALID);
     expect(result).toEqual({ file: VALID.filePath });
     expect(result).not.toHaveProperty("line");
@@ -118,7 +152,7 @@ describe("describeResolvedSource", () => {
   it("returns null when nothing usable survives", () => {
     expect(describeResolvedSource(null)).toBeNull();
     expect(describeResolvedSource({})).toBeNull();
-    const stack = [{ fileName: "/a.tsx", isSymbolicated: false }];
+    const stack = [{ fileName: "/a.tsx" }];
     expect(describeResolvedSource({ filePath: "/src/App.tsx\u0000", stack } as never)).toBeNull();
   });
 });
diff --git a/apps/desktop/src/preview/DesignSourceResolver.ts b/apps/desktop/src/preview/DesignSourceResolver.ts
index 252845ffb64c..91012d975ed5 100644
--- a/apps/desktop/src/preview/DesignSourceResolver.ts
+++ b/apps/desktop/src/preview/DesignSourceResolver.ts
@@ -48,13 +48,17 @@ function releaseSlot(): void {
 
 /** Settled AND in-flight results share one promise per element — concurrent callers
  * (hover prefetch racing a click promotion) never trigger duplicate react-grab work.
- * Successes cache for the element's lifetime; null results expire after a short TTL so
- * an element resolved before React mounted its dev metadata (hydration, a lazy chunk)
- * can succeed on a later ask instead of staying selector-only forever (PR #54 review).
- * The TTL also bounds retry cost: at most one react-grab attempt per element per TTL. */
+ *
+ * Three tiers, not two. Only a FULL location caches for the element's lifetime. Both a null
+ * result and a hint (`{file?, componentName?}` with no position) expire after a short TTL, so
+ * an element asked before React mounted its dev metadata — hydration, a lazy chunk, a source
+ * map still in flight — can succeed on a later ask instead of being pinned at "(line not
+ * resolvable)" forever. Caching hints as successes would have quietly cancelled the retry
+ * behaviour PR #54 added, since a hint is non-null. The TTL also bounds retry cost: at most
+ * one react-grab attempt per element per TTL. */
 const resolutionCache = new WeakMap<Element, Promise<ResolvedDesignSource | null>>();
 
-const NULL_RESULT_TTL_MS = 5000;
+const RETRYABLE_RESULT_TTL_MS = 5000;
 
 async function resolveElement(element: Element): Promise<ResolvedDesignSource | null> {
   await acquireSlot();
@@ -81,10 +85,11 @@ function resolve(element: unknown): Promise<ResolvedDesignSource | null> {
   const resolution = resolveElement(element);
   resolutionCache.set(element, resolution);
   void resolution.then((result) => {
-    if (result !== null) return;
+    // A hint is not a success — `line` is what distinguishes the two arms of the union.
+    if (result !== null && "line" in result && result.line !== undefined) return;
     window.setTimeout(() => {
       if (resolutionCache.get(element) === resolution) resolutionCache.delete(element);
-    }, NULL_RESULT_TTL_MS);
+    }, RETRYABLE_RESULT_TTL_MS);
   });
   return resolution;
 }
diff --git a/apps/desktop/src/preview/DesignSourceResult.ts b/apps/desktop/src/preview/DesignSourceResult.ts
index 9b35b62bf4cb..5f63ae5f13c3 100644
--- a/apps/desktop/src/preview/DesignSourceResult.ts
+++ b/apps/desktop/src/preview/DesignSourceResult.ts
@@ -50,7 +50,7 @@ export function normalizeResolvedSource(
   // served, not in the file the agent will open. Rejecting the location outright is
   // deliberate: the engine's fallback (selector + component name) beats a confident pointer
   // at the wrong line of the right file, which reads as authoritative and is not.
-  if (!isSymbolicated(value.stack, filePath)) return null;
+  if (!isSymbolicated(value.stack, value)) return null;
   const file = normalizeFilePath(filePath);
   if (file === null) return null;
   if (typeof lineNumber !== "number" || !Number.isInteger(lineNumber) || lineNumber < 1) {
@@ -90,24 +90,89 @@ export function normalizeComponentName(value: unknown): string | null {
   return typeof value === "string" && COMPONENT_NAME_PATTERN.test(value) ? value : null;
 }
 
+/** react-grab reports a frame's raw `fileName` (a served URL like
+ * `http://host/src/App.tsx?t=123`) but derives the context's `filePath` from it, so the two are
+ * not comparable as-is. Reduced to a comparable path: origin, query, hash and a leading `./`
+ * removed. Deliberately loose — this only has to pair a frame with the location it produced. */
+function comparablePath(value: unknown): string | null {
+  if (typeof value !== "string" || value.length === 0) return null;
+  let path = value;
+  const scheme = path.indexOf("://");
+  if (scheme !== -1) {
+    const afterHost = path.indexOf("/", scheme + 3);
+    path = afterHost === -1 ? "" : path.slice(afterHost);
+  }
+  const cut = Math.min(
+    path.indexOf("?") === -1 ? path.length : path.indexOf("?"),
+    path.indexOf("#") === -1 ? path.length : path.indexOf("#"),
+  );
+  path = path.slice(0, cut);
+  if (path.startsWith("./")) path = path.slice(2);
+  return path.length === 0 ? null : path;
+}
+
+interface RawFrame {
+  fileName?: unknown;
+  lineNumber?: unknown;
+  columnNumber?: unknown;
+  isSymbolicated?: unknown;
+}
+
+/** The frame that produced the reported location, or null when it cannot be identified.
+ *
+ * Position is the stronger signal and is tried first: `line`/`column` are copied verbatim from
+ * the frame react-grab selected, whereas the path has been through its normalizer. The path
+ * comparison is the fallback, on comparable form rather than raw. `frames[0]` is deliberately
+ * NOT a fallback — it is not necessarily the reporting frame, and guessing here is what makes
+ * the flag check meaningless. */
+function findReportingFrame(frames: readonly RawFrame[], value: {
+  filePath?: unknown;
+  lineNumber?: unknown;
+  columnNumber?: unknown;
+}): RawFrame | null {
+  const byPosition = frames.filter(
+    (frame) => frame.lineNumber === value.lineNumber && frame.columnNumber === value.columnNumber,
+  );
+  if (byPosition.length === 1) return byPosition[0] ?? null;
+  const wanted = comparablePath(value.filePath);
+  if (wanted !== null) {
+    const byPath = frames.filter((frame) => {
+      const candidate = comparablePath(frame.fileName);
+      return candidate !== null && (candidate === wanted || candidate.endsWith(wanted));
+    });
+    if (byPath.length >= 1) return byPath[0] ?? null;
+  }
+  return byPosition[0] ?? null;
+}
+
 /**
  * Whether react-grab mapped the reported location back to authored source.
  *
- * react-grab marks each stack frame with `isSymbolicated`. The frame naming `filePath` is the
- * one that produced the reported line/column, so its flag is the one that counts. A missing
- * flag reads as symbolicated (older react-grab builds omit it, and rejecting every location
- * there would be a regression), and so does an absent stack — that is the pre-existing
- * contract for hosts whose resolver hands back a bare location.
+ * The check is `=== true`, not `!== false`, because of how the library actually reports this.
+ * In react-grab 0.1.44 / bippy 0.5.41 the symbolicating function is
+ * `return mapped ? {...frame, isSymbolicated: true} : frame` — a frame it FAILED to symbolicate
+ * comes back untouched, carrying no flag at all. `!== false` therefore read every failure as a
+ * success and passed generated coordinates straight through, which is the entire bug this gate
+ * exists to stop. There is no `isSymbolicated: false` anywhere in either dist.
+ *
+ * Consequence worth stating: a host whose resolver emits frames without the flag now loses its
+ * locations. That is the safe direction — an unflagged frame is indistinguishable from a failed
+ * one, and a wrong line costs more than a missing one. An absent stack is still trusted, which
+ * is the pre-existing contract for hosts that hand back a bare location with no stack at all.
  */
-export function isSymbolicated(stack: unknown, filePath: unknown): boolean {
+export function isSymbolicated(
+  stack: unknown,
+  value: { filePath?: unknown; lineNumber?: unknown; columnNumber?: unknown },
+): boolean {
   if (!Array.isArray(stack) || stack.length === 0) return true;
   const frames = stack.filter(
-    (frame): frame is { fileName?: unknown; isSymbolicated?: unknown } =>
-      typeof frame === "object" && frame !== null,
+    (frame): frame is RawFrame => typeof frame === "object" && frame !== null,
   );
-  const match = frames.find((frame) => frame.fileName === filePath) ?? frames[0];
-  if (!match) return true;
-  return match.isSymbolicated !== false;
+  if (frames.length === 0) return true;
+  const reporting = findReportingFrame(frames, value);
+  // Fail closed: an unidentifiable frame means the flag cannot be read at all.
+  if (!reporting) return false;
+  return reporting.isSymbolicated === true;
 }
 
 /**
diff --git a/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
index 5757ddf188e1..ce6acfcf6c94 100644
--- a/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
+++ b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
@@ -1,3 +1,4 @@
+// @effect-diagnostics nodeBuiltinImport:off
 /** Fork guard — see `.fork/customizations.yaml#fork-design-mode`.
  *
  * Covers the DOM-free half of cssOrigin.ts. The probe itself (remove the class, re-measure)
@@ -7,8 +8,11 @@
  */
 import { describe, expect, it } from "vite-plus/test";
 
+import * as NodeFS from "node:fs";
+import * as NodeURL from "node:url";
+
 import {
-  isBareClassSelector,
+  isTautologicalSelector,
   pickCulprit,
   roughSpecificity,
   type OriginCandidate,
@@ -18,28 +22,48 @@ const candidate = (over: Partial<OriginCandidate>): OriginCandidate => ({
   selectorText: ".a",
   stylesheet: "app.css",
   important: false,
+  layered: false,
   order: 0,
   specificity: 0,
   ...over,
 });
 
+/** Stand-in for the element's own class list — the only thing the tautology test consults. */
+const classes = (...names: string[]): DOMTokenList =>
+  ({ contains: (name: string) => names.includes(name) }) as DOMTokenList;
+
 describe("fork guard: design-mode css origin", () => {
-  describe("isBareClassSelector", () => {
-    it("dismisses single-class utility selectors", () => {
+  describe("isTautologicalSelector", () => {
+    it("dismisses a single class the element already carries", () => {
       // Naming `.px-1` as the culprit for a padding change is a tautology, not a lead.
-      expect(isBareClassSelector(".px-1")).toBe(true);
-      expect(isBareClassSelector(".px-2\\.5")).toBe(true);
-      expect(isBareClassSelector("  .gap-1.5  ".trim())).toBe(true);
+      expect(isTautologicalSelector(".px-1", classes("px-1"))).toBe(true);
+      expect(isTautologicalSelector("  .px-1  ", classes("px-1"))).toBe(true);
+    });
+
+    it("unescapes before comparing, so escaped utilities are still dismissed", () => {
+      expect(isTautologicalSelector(".px-2\\.5", classes("px-2.5"))).toBe(true);
+    });
+
+    it("keeps a single-class rule the element does NOT carry", () => {
+      // A plain-CSS guest project's `.composer-chip { padding: 8px }` is the likeliest culprit
+      // there; dismissing every single-class selector hid exactly that case.
+      expect(isTautologicalSelector(".composer-chip", classes("px-1"))).toBe(false);
     });
 
-    it("keeps anything that could actually outrank a utility", () => {
-      expect(isBareClassSelector("[data-fork-composer-mode-chip]")).toBe(false);
-      expect(isBareClassSelector(':root[data-fork="x"] [data-fork-composer-mode-chip]')).toBe(
+    it("keeps compound and pseudo-class selectors even when the element has both classes", () => {
+      // These genuinely outrank a utility. The previous regex let unescaped `.` and `:` into
+      // its character class, so it swallowed them as "bare".
+      expect(isTautologicalSelector(".composer.compact", classes("composer", "compact"))).toBe(
         false,
       );
-      expect(isBareClassSelector(".card .title")).toBe(false);
-      expect(isBareClassSelector("button.primary")).toBe(false);
-      expect(isBareClassSelector("#id")).toBe(false);
+      expect(isTautologicalSelector(".chip:hover", classes("chip"))).toBe(false);
+      expect(isTautologicalSelector(".card .title", classes("card", "title"))).toBe(false);
+    });
+
+    it("keeps anything that is not a lone class selector", () => {
+      expect(isTautologicalSelector("[data-fork-composer-mode-chip]", classes())).toBe(false);
+      expect(isTautologicalSelector("button.primary", classes("primary"))).toBe(false);
+      expect(isTautologicalSelector("#id", classes())).toBe(false);
     });
   });
 
@@ -69,6 +93,16 @@ describe("fork guard: design-mode css origin", () => {
       expect(culprit?.selectorText).toBe("[data-chip]");
     });
 
+    it("puts an unlayered rule above a layered one of higher specificity", () => {
+      // The trap this whole module exists for: in Tailwind v4 utilities are in
+      // `@layer utilities`, so an unlayered fork rule wins however plain its selector.
+      const culprit = pickCulprit([
+        candidate({ selectorText: "#specific .thing", specificity: 10_100, layered: true }),
+        candidate({ selectorText: "[data-chip]", specificity: 100, layered: false, order: 1 }),
+      ]);
+      expect(culprit?.selectorText).toBe("[data-chip]");
+    });
+
     it("puts !important above every non-important rule regardless of specificity", () => {
       const culprit = pickCulprit([
         candidate({ selectorText: "#very .specific", specificity: 10_100, order: 1 }),
@@ -94,10 +128,13 @@ describe("fork guard: design-mode css origin", () => {
     });
 
     it("drops the selection-only fields from what callers see", () => {
+      // `order` and `specificity` are selection-only and must not leak; `layered` is part of
+      // the reported rule because it is why the rule wins.
       expect(pickCulprit([candidate({ stylesheet: "ComposerShell.css" })])).toEqual({
         selectorText: ".a",
         stylesheet: "ComposerShell.css",
         important: false,
+        layered: false,
       });
     });
 
@@ -110,4 +147,33 @@ describe("fork guard: design-mode css origin", () => {
       expect(input.map((c) => c.selectorText)).toEqual(["b", "a"]);
     });
   });
+
+  // Re-sync durability: upstream's wording promises "The Forge verifies the changes
+  // automatically", which is false in this fork — client/verifier.ts was never vendored, so
+  // nothing checks. A faithful re-sync would restore that sentence and silently tell the agent
+  // to stop looking exactly where a no-op edit surfaces. Delete this only alongside a vendored
+  // verifier.
+  describe("NO_PREVIEW_GUARDRAIL", () => {
+    // Read as text rather than imported: guardrails.ts lives inside the engine's TS island,
+    // which apps/web's project excludes, so an import here fails to type-check (TS6307).
+    const guardrails = NodeFS.readFileSync(
+      NodeURL.fileURLToPath(
+        new URL("../custom/designMode/engine/vendor/shared/guardrails.ts", import.meta.url),
+      ),
+      "utf8",
+    );
+    const noPreview = /export const NO_PREVIEW_GUARDRAIL\s*=\s*'([^']*)'/u.exec(guardrails)?.[1];
+
+    it("is found in the vendored source", () => {
+      expect(noPreview).toBeTruthy();
+    });
+
+    it("does not claim an automatic verifier this fork has not vendored", () => {
+      expect(noPreview).not.toMatch(/verif/iu);
+    });
+
+    it("still tells the agent not to spin up its own preview", () => {
+      expect(noPreview).toMatch(/Do not run the app/u);
+    });
+  });
 });
diff --git a/apps/web/src/custom/designMode/cssOrigin.ts b/apps/web/src/custom/designMode/cssOrigin.ts
index 51303fc225d3..24a1ec055db6 100644
--- a/apps/web/src/custom/designMode/cssOrigin.ts
+++ b/apps/web/src/custom/designMode/cssOrigin.ts
@@ -12,11 +12,13 @@
  * Two questions, answered separately because they want different tools:
  *
  * 1. "Does the utility class control this property?" — answered EMPIRICALLY, by removing the
- *    class and re-measuring. That is ground truth: no cascade emulation to get wrong, and it
- *    naturally accounts for layers, `!important`, `@media`, and specificity all at once.
- * 2. "Then what does control it?" — answered BEST-EFFORT, by walking the stylesheets for
- *    matching rules that declare the property. Used only to name a culprit for the agent, so
- *    an approximate ordering is fine; question 1 already decided the phrasing.
+ *    class and re-measuring. That is ground truth for the cases it can decide: no cascade
+ *    emulation to get wrong, and it accounts for layers, `!important` and specificity at once.
+ *    It cannot decide a TIE — if another declaration carries the same value, removing the class
+ *    moves nothing, and "the class is inert" and "the class wins but is shadowed" look
+ *    identical. That case is reported as ambiguous rather than guessed at.
+ * 2. "Then what else declares it?" — answered by walking the stylesheets for matching rules.
+ *    Used to name a culprit, and to turn a tie into an honest "both of these declare it".
  *
  * Callers must probe while the element shows its ORIGINAL cascade (drafts compared back on).
  * With a draft applied as inline style the probe would measure the draft, conclude the class
@@ -29,16 +31,26 @@ export interface OriginRule {
   /** Basename of the owning file where derivable, else `<style>`. */
   stylesheet: string;
   important: boolean;
+  /** Inside an `@layer`. Unlayered normal declarations beat layered ones outright, which is
+   * why this ranks above specificity — the trap that made a `px-*` utility (layered, in
+   * Tailwind v4) lose to an unlayered fork rule of far lower specificity. */
+  layered: boolean;
 }
 
 export interface DeclarationOrigin {
-  /** Whether `utilityClass` is what the browser actually resolves this property from. */
+  /** The probe proved `utilityClass` is what resolves this property. */
   utilityWins: boolean;
-  /** The probed class, echoed back so callers need not re-derive it. */
+  /** The probe could not tell: removing the class did not move the value, which happens both
+   * when the class is inert AND when something else declares the same value. Callers must not
+   * claim the utility is overridden on this basis. */
+  ambiguous: boolean;
+  /** The probed class, echoed back so callers need not re-derive it. Null when no class on the
+   * element looked relevant — in which case no probe ran and `utilityWins` is meaningless. */
   utilityClass: string | null;
-  /** The one rule worth naming when the utility does not win. Null when the utility wins, or
-   * when nothing could be named — the request renders a single hint, and the empirical probe
-   * above, not this, is what decides the phrasing. */
+  /** The element's own inline style declares this property, which outranks every stylesheet
+   * rule below. Named separately because "edit that rule" is the wrong instruction for it. */
+  inlineStyle: boolean;
+  /** The rule worth naming, best-effort. Null when nothing could be named. */
   culprit: OriginRule | null;
 }
 
@@ -103,23 +115,42 @@ function stylesheetLabel(sheet: CSSStyleSheet): string {
   return "<style>";
 }
 
-/** A selector that is nothing but one class — i.e. a utility. Named separately so culprit
- * reporting can drop them: "`.px-1` sets padding" tells the agent nothing it did not ask for. */
-export function isBareClassSelector(selectorText: string): boolean {
-  return /^\.[\w\\.:%[\]/-]+$/.test(selectorText.trim());
+const SINGLE_CLASS_SELECTOR = /^\.((?:[^\\.:[\s>+~,()]|\\.)+)$/;
+
+/**
+ * Whether a selector is a tautology for this element: a single class that the element already
+ * carries, i.e. one of its own utilities. Naming `.px-1` as the culprit for a padding change
+ * tells the agent nothing it did not already have.
+ *
+ * Deliberately narrower than "looks like a utility". A plain-CSS guest project's
+ * `.composer-chip { padding: 8px }` is a single-class selector AND the most likely culprit
+ * there, so it must survive — it is only dismissed when the class is the element's own. And
+ * `.a.b` / `.a:hover` are not single-class at all: they genuinely outrank a utility and were
+ * previously discarded by a regex whose character class let unescaped `.` and `:` through.
+ */
+export function isTautologicalSelector(selectorText: string, classList: DOMTokenList): boolean {
+  const match = SINGLE_CLASS_SELECTOR.exec(selectorText.trim());
+  if (!match) return false;
+  const raw = match[1];
+  if (raw === undefined) return false;
+  return classList.contains(raw.replace(/\\(.)/g, "$1"));
 }
 
 /** A matched rule before selection. Split out so the choice can be tested without a DOM:
- * everything above this point needs live CSSOM, everything below is arithmetic. */
+ * everything that needs live CSSOM produces these, everything after is arithmetic. */
 export interface OriginCandidate extends OriginRule {
   order: number;
   specificity: number;
 }
 
-/** True when `a` outranks `b` by the cascade's tiebreak sequence: `!important` first, then
- * approximate specificity, then document order. */
+/** True when `a` outranks `b`. Tiers, strongest first: `!important`, then unlayered over
+ * layered, then approximate specificity, then document order. The layer tier is why a
+ * low-specificity unlayered rule correctly beats a Tailwind utility. Known gap: for
+ * `!important` declarations the layer order inverts, which is not modelled — the important
+ * tier already dominates, so the two only interact between competing important rules. */
 function outranks(a: OriginCandidate, b: OriginCandidate): boolean {
   if (a.important !== b.important) return a.important;
+  if (a.layered !== b.layered) return !a.layered;
   if (a.specificity !== b.specificity) return a.specificity > b.specificity;
   return a.order > b.order;
 }
@@ -132,77 +163,119 @@ export function pickCulprit(candidates: readonly OriginCandidate[]): OriginRule
     if (best === null || outranks(candidate, best)) best = candidate;
   }
   if (best === null) return null;
-  const { selectorText, stylesheet, important } = best;
-  return { selectorText, stylesheet, important };
+  const { selectorText, stylesheet, important, layered } = best;
+  return { selectorText, stylesheet, important, layered };
+}
+
+/** `@media` verdicts, memoised per walk: a Tailwind dev sheet repeats a handful of breakpoint
+ * strings across thousands of rules, and each `matchMedia` call parses afresh. */
+type MediaCache = Map<string, boolean>;
+
+function mediaMatches(condition: string, cache: MediaCache): boolean {
+  const cached = cache.get(condition);
+  if (cached !== undefined) return cached;
+  const result = window.matchMedia(condition).matches;
+  cache.set(condition, result);
+  return result;
 }
 
-function collectCulprit(el: Element, property: string): OriginRule | null {
-  const found: OriginCandidate[] = [];
+/**
+ * Every style rule in the document that matches `el`, with the layer and ordering context
+ * needed to rank it. ONE walk per element serves every changed property — the walk, not the
+ * per-property filtering, is what costs on a 30k-rule dev sheet.
+ */
+function collectMatchingRules(el: Element): Array<OriginCandidate & { style: CSSStyleDeclaration }> {
+  const found: Array<OriginCandidate & { style: CSSStyleDeclaration }> = [];
+  const mediaCache: MediaCache = new Map();
+  const classList = el.classList;
   let order = 0;
 
-  const visit = (rules: CSSRuleList, sheet: CSSStyleSheet): void => {
-    for (const rule of Array.from(rules)) {
+  const visit = (rules: CSSRuleList, sheet: CSSStyleSheet, layered: boolean): void => {
+    for (let i = 0; i < rules.length; i += 1) {
+      const rule = rules[i];
+      if (!rule) continue;
       order += 1;
-      // Grouping rules (@media, @supports, @layer, @container) hold nested rules. Descend
-      // only when the condition currently holds, so a non-matching breakpoint is not blamed.
-      const nested = (rule as CSSGroupingRule).cssRules;
-      if (nested) {
-        const condition = (rule as CSSMediaRule).conditionText;
-        if (condition) {
+
+      // A CSSStyleRule has BOTH declarations and (since CSS Nesting, Chrome 112+) a `cssRules`
+      // list — which is an empty CSSRuleList object, and therefore truthy. Testing `cssRules`
+      // first sent every ordinary rule down the grouping branch and skipped its declarations,
+      // so nothing was ever collected. Style rules are handled first, and then still descended
+      // into for their nested children.
+      if (rule instanceof CSSStyleRule) {
+        const selectorText = rule.selectorText;
+        // Cheapest rejects first: string work and a classList lookup before any CSSOM read,
+        // and `matches()` — the expensive one — only for rules that survive.
+        if (typeof selectorText === "string" && !isTautologicalSelector(selectorText, classList)) {
+          let matched = false;
           try {
-            if (!window.matchMedia(condition).matches) continue;
+            matched = el.matches(selectorText);
           } catch {
-            // @supports/@container conditions are not media queries — descend rather than
-            // silently drop a rule that may well be the culprit.
+            matched = false; // selector the matcher rejects (::part, vendor pseudos)
+          }
+          if (matched) {
+            found.push({
+              selectorText,
+              stylesheet: stylesheetLabel(sheet),
+              important: false, // per-property, filled in by the caller
+              layered,
+              order,
+              specificity: roughSpecificity(selectorText),
+              style: rule.style,
+            });
           }
         }
-        visit(nested, sheet);
+        if (rule.cssRules.length > 0) visit(rule.cssRules, sheet, layered);
         continue;
       }
-      const style = (rule as CSSStyleRule).style;
-      const selectorText = (rule as CSSStyleRule).selectorText;
-      if (!style || typeof selectorText !== "string") continue;
-      if (!declaresProperty(style, property)) continue;
-      if (isBareClassSelector(selectorText)) continue;
-      try {
-        if (!el.matches(selectorText)) continue;
-      } catch {
-        continue; // selector the engine's matcher rejects (::part, vendor pseudos)
+
+      // `@media` is the only grouping rule whose condition can be evaluated here. Everything
+      // else — `@supports`, `@container`, `@layer` — is descended into unconditionally: the
+      // previous code routed them through `matchMedia` inside a `try`, but `matchMedia` never
+      // throws (an unparseable condition yields `not all`, `matches: false`), so those blocks
+      // were silently dropped instead of falling through as the comment claimed. `@container`
+      // is worse than dropped there: it parses as a valid viewport query and gets answered
+      // against the window rather than the container.
+      if (rule instanceof CSSMediaRule) {
+        if (!mediaMatches(rule.conditionText, mediaCache)) continue;
+        visit(rule.cssRules, sheet, layered);
+        continue;
+      }
+      if (rule instanceof CSSGroupingRule) {
+        const nowLayered =
+          layered || (typeof CSSLayerBlockRule !== "undefined" && rule instanceof CSSLayerBlockRule);
+        visit(rule.cssRules, sheet, nowLayered);
       }
-      found.push({
-        selectorText,
-        stylesheet: stylesheetLabel(sheet),
-        important: isImportant(style, property),
-        order,
-        specificity: roughSpecificity(selectorText),
-      });
     }
   };
 
   for (const sheet of Array.from(document.styleSheets)) {
     try {
       // Cross-origin sheets throw on access; they cannot be authored by this project anyway.
-      if (sheet.cssRules) visit(sheet.cssRules, sheet);
+      const rules = sheet.cssRules;
+      if (rules) visit(rules, sheet, false);
     } catch {
       continue;
     }
   }
-
-  return pickCulprit(found);
+  return found;
 }
 
-/** Whether removing `utilityClass` changes the property's computed value. Transitions are
+/** Whether removing `utilityClass` moves the property's computed value. Transitions are
  * suppressed across the probe: mid-transition `getComputedStyle` returns the animating value,
- * which would read as a difference the class did not cause. */
-function classControlsProperty(el: Element, property: string, utilityClass: string): boolean {
+ * which would read as a difference the class did not cause. `before` is passed in — the caller
+ * has already measured it, and re-measuring here would double the forced style recalcs. */
+function classMovesProperty(
+  el: Element,
+  property: string,
+  utilityClass: string,
+  before: string,
+): boolean {
   const style = (el as HTMLElement).style;
   const inlineTransition = style?.getPropertyValue("transition") ?? "";
   style?.setProperty("transition", "none");
   try {
-    const before = getComputedStyle(el).getPropertyValue(property);
     el.classList.remove(utilityClass);
-    const without = getComputedStyle(el).getPropertyValue(property);
-    return before !== without;
+    return getComputedStyle(el).getPropertyValue(property) !== before;
   } catch {
     return false;
   } finally {
@@ -213,18 +286,41 @@ function classControlsProperty(el: Element, property: string, utilityClass: stri
 }
 
 /**
- * Resolves what controls `property` on `el`. `utilityClass` is the builder's existing guess
- * (may be null when no class looked relevant); the probe either confirms it or demotes it.
+ * Resolves what controls each of `properties` on `el`, in one CSSOM walk.
+ *
+ * `measured` supplies the already-taken computed value per property, so the probe costs one
+ * forced recalc rather than two. `utilityFor` is the builder's existing class-list guess; the
+ * probe either confirms it, demotes it, or reports that it could not tell.
  */
-export function resolveDeclarationOrigin(
+export function resolveDeclarationOrigins(
   el: Element,
-  property: string,
-  utilityClass: string | null,
-): DeclarationOrigin {
-  const utilityWins =
-    utilityClass !== null &&
-    el.classList.contains(utilityClass) &&
-    classControlsProperty(el, property, utilityClass);
-  if (utilityWins) return { utilityWins: true, utilityClass, culprit: null };
-  return { utilityWins: false, utilityClass, culprit: collectCulprit(el, property) };
+  properties: Iterable<string>,
+  measured: ReadonlyMap<string, string>,
+  utilityFor: (property: string) => string | null,
+): Map<string, DeclarationOrigin> {
+  const matching = collectMatchingRules(el);
+  const inline = (el as HTMLElement).style;
+  const out = new Map<string, DeclarationOrigin>();
+
+  for (const property of properties) {
+    const utilityClass = utilityFor(property);
+    const before = measured.get(property) ?? getComputedStyle(el).getPropertyValue(property);
+    const canProbe = utilityClass !== null && el.classList.contains(utilityClass);
+    const moved = canProbe && classMovesProperty(el, property, utilityClass, before);
+
+    const candidates = matching
+      .filter((candidate) => declaresProperty(candidate.style, property))
+      .map((candidate) => ({ ...candidate, important: isImportant(candidate.style, property) }));
+
+    out.set(property, {
+      utilityWins: moved,
+      // Only a probe that ran and did not move the value is ambiguous. No probe at all is not
+      // ambiguity — it is simply the absence of a utility to talk about.
+      ambiguous: canProbe && !moved,
+      utilityClass,
+      inlineStyle: inline?.getPropertyValue(property) !== "" && inline?.getPropertyValue(property) !== undefined,
+      culprit: moved ? null : pickCulprit(candidates),
+    });
+  }
+  return out;
 }
diff --git a/apps/web/src/custom/designMode/engine/nativeSource.ts b/apps/web/src/custom/designMode/engine/nativeSource.ts
index a0640058dc8c..6ef513261a86 100644
--- a/apps/web/src/custom/designMode/engine/nativeSource.ts
+++ b/apps/web/src/custom/designMode/engine/nativeSource.ts
@@ -152,18 +152,24 @@ export function resolveAndTag(el: TaggedElement): Promise<boolean> {
     if (!el.isConnected) return false;
     // Before the source gate on purpose — a component name is most valuable precisely when
     // there is no location to pair it with.
+    // Overwrites rather than first-write-wins: HMR can rename or replace the component behind
+    // a still-connected element, and a `hasAttribute` guard would serve the stale name forever.
     const componentName = readComponentName(raw);
-    if (componentName && !el.hasAttribute(COMPONENT_NAME_ATTR)) {
-      el.setAttribute(COMPONENT_NAME_ATTR, componentName);
-    }
+    if (componentName) el.setAttribute(COMPONENT_NAME_ATTR, componentName);
     if (!source) {
       // No position, but the file survived the host's symbolication check — worth carrying,
-      // since "which file" is most of what the address was for.
+      // since "which file" is most of what the address was for. Re-checked against a tag that
+      // may have appeared during the await, exactly like the success path below: an element
+      // that resolved fully in the meantime must not also gain a "(line not resolvable)" hint.
+      if (el.dataset.dcSource) return true;
       const file = readSourceFile(raw);
-      if (file && !el.hasAttribute(SOURCE_FILE_ATTR)) el.setAttribute(SOURCE_FILE_ATTR, file);
+      if (file) el.setAttribute(SOURCE_FILE_ATTR, file);
       return false;
     }
     if (el.dataset.dcSource) return true;
+    // Clear any hint left by an earlier attempt — the resolved tag carries the file now, and
+    // leaving both would render a location heading beside "(line not resolvable)".
+    el.removeAttribute(SOURCE_FILE_ATTR);
     markSynthesizedSource(el, source);
     return true;
   })();
diff --git a/apps/web/src/custom/designMode/engine/vendor/README.md b/apps/web/src/custom/designMode/engine/vendor/README.md
index baff30a169a8..7f8bae181783 100644
--- a/apps/web/src/custom/designMode/engine/vendor/README.md
+++ b/apps/web/src/custom/designMode/engine/vendor/README.md
@@ -21,6 +21,16 @@ are intentionally absent — the properties panel is native T3 React
 Local edits are marked with `t3-fork:` comments. The load-bearing ones:
 
 - `lifecycle.ts` — `StageEvent`/`LifecycleStage` inlined (verifier.ts not vendored).
+- Request accuracy (2026-08-06, `designMode/cssOrigin.ts` is the fork-owned core):
+  - `request.ts` — `ChangeItem.origin` and the probe that fills it. A css bullet may only
+    name a utility once `cssOrigin.ts` has proved that class is the lever by removing it
+    and re-measuring; otherwise the bullet names the winning rule instead. The probe runs
+    inside the `compare(el, true)` window, which is why `collapse()` is called there.
+  - `request.ts` — `ElementChange.component` / `.sourceFile`, read from the attributes
+    `nativeSource.ts` writes, and the `Rendered by:` line that renders them.
+  - `shared/guardrails.ts` — `NO_PREVIEW_GUARDRAIL` must NOT promise that "The Forge
+    verifies the changes automatically". True upstream, false here: `client/verifier.ts`
+    is not vendored, so nothing checks. Restore the stronger wording only alongside it.
 - `./shared/` import paths (were `../shared/` upstream).
 - A handful of mechanical lint fixes (snapshot spreads → `Array.from`, `toReversed()`,
   `Set#has`, two unused imports) — style-only, no behavior change.
diff --git a/apps/web/src/custom/designMode/engine/vendor/request.ts b/apps/web/src/custom/designMode/engine/vendor/request.ts
index 420078efa934..c3616a255edc 100644
--- a/apps/web/src/custom/designMode/engine/vendor/request.ts
+++ b/apps/web/src/custom/designMode/engine/vendor/request.ts
@@ -4,7 +4,8 @@ import { parseSourceAttr, type SourceLocation, type TaggedElement } from './sour
 import { readTheme, readTokens, suggestUtility, findExistingUtility, type Theme } from './tokens'
 import { isStructuralOpKind, type StructuralOpKind } from './shared/structural-kinds'
 // t3-fork: see ../../cssOrigin.ts — proves whether the named utility is really the lever.
-import { resolveDeclarationOrigin, type DeclarationOrigin } from '../../cssOrigin'
+import { resolveDeclarationOrigins, type DeclarationOrigin } from '../../cssOrigin'
+import { COMPONENT_NAME_ATTR, SOURCE_FILE_ATTR } from '../nativeSource'
 
 export interface ChangeItem {
   property: string
@@ -15,10 +16,16 @@ export interface ChangeItem {
   tokenExact: boolean
   /** Optional plain-language instruction overriding the literal before→after reading — set by the BUILDER (policy lives at construction), rendered generically. */
   intent?: string
-  /** t3-fork: the rule that actually resolves this property, named ONLY when the element's
-   * utility class provably does not (cssOrigin.ts probes by removing the class). Its presence
-   * is what suppresses `beforeUtility`, so the agent is never told to edit an inert class. */
-  origin?: { selectorText: string; stylesheet: string }
+  /** t3-fork: where this property actually resolves from, when it is not the element's own
+   * utility class. `kind` records what the probe in cssOrigin.ts was able to establish, so the
+   * rendered sentence never claims more than that:
+   *   `overrides` — the class was probed and provably is NOT the lever; edit the rule.
+   *   `ambiguous` — probe tied (something declares the same value); BOTH are named.
+   *   `plain`     — no utility class to probe; the rule is named without any claim about one.
+   *   `inline`    — an inline style on the element wins; no stylesheet rule is the lever. */
+  origin?:
+    | { kind: 'inline' }
+    | { kind: 'overrides' | 'ambiguous' | 'plain'; selectorText: string; stylesheet: string }
 }
 
 /** A Figma-pivot structural design op (spec 2026-07-22 §2-3), anchored at its ElementChange's
@@ -282,11 +289,11 @@ function elementContext(el: TaggedElement, changes: ChangeItem[]): ElementChange
     text: contextText(el.textContent ?? ''),
     selector: sanitizeInline(cssPath(el)),
     // t3-fork: written by nativeSource.ts's COMPONENT_NAME_ATTR, independently of the source tag.
-    ...(el.getAttribute('data-t3-component')
-      ? { component: sanitizeInline(el.getAttribute('data-t3-component')!) }
+    ...(el.getAttribute(COMPONENT_NAME_ATTR)
+      ? { component: sanitizeInline(el.getAttribute(COMPONENT_NAME_ATTR)!) }
       : {}),
-    ...(el.getAttribute('data-t3-source-file')
-      ? { sourceFile: sanitizeInline(el.getAttribute('data-t3-source-file')!) }
+    ...(el.getAttribute(SOURCE_FILE_ATTR)
+      ? { sourceFile: sanitizeInline(el.getAttribute(SOURCE_FILE_ATTR)!) }
       : {}),
     changes,
   }
@@ -395,10 +402,20 @@ export function buildChangeRequestWithElements(
         collapsed = collapse(raw)
         const probeClassName =
           typeof el.className === 'string' ? el.className : [...el.classList].join(' ')
-        for (const [property, v] of collapsed) {
-          if (v.beforeCss === v.afterCss) continue
-          const guess = theme.spacingBasePx === null ? null : findExistingUtility(probeClassName, property)
-          origins.set(property, resolveDeclarationOrigin(el, property, guess))
+        const changedProps = [...collapsed]
+          .filter(([, v]) => v.beforeCss !== v.afterCss)
+          .map(([property]) => property)
+        // One CSSOM walk for every changed property, and the already-measured `beforeCss`
+        // reused as the probe's baseline — on a Tailwind dev sheet the walk dominates, and
+        // re-measuring would double the forced style recalcs for no new information.
+        const measured = new Map(changedProps.map((property) => [property, collapsed.get(property)!.beforeCss]))
+        for (const [property, origin] of resolveDeclarationOrigins(
+          el,
+          changedProps,
+          measured,
+          (property) => (theme.spacingBasePx === null ? null : findExistingUtility(probeClassName, property)),
+        )) {
+          origins.set(property, origin)
         }
         drafts.compare(el, wasComparing)
       } finally {
@@ -425,12 +442,18 @@ export function buildChangeRequestWithElements(
           property,
           beforeCss: v.beforeCss,
           afterCss: v.afterCss,
-          beforeUtility: origin.utilityWins ? origin.utilityClass : null,
+          beforeUtility: origin.utilityWins || origin.ambiguous ? origin.utilityClass : null,
           afterUtility: suggestion?.utility ?? null,
           tokenExact: suggestion?.tokenExact ?? false,
         }
-        if (origin.culprit) {
+        // The phrasing has to match what was actually established. Only a probe that MOVED the
+        // value licenses "the utility is overridden"; a tie licenses "both declare this"; no
+        // probe at all licenses nothing beyond naming the rule.
+        if (origin.inlineStyle) {
+          item.origin = { kind: 'inline' }
+        } else if (origin.culprit) {
           item.origin = {
+            kind: origin.ambiguous ? 'ambiguous' : origin.utilityClass === null ? 'plain' : 'overrides',
             selectorText: origin.culprit.selectorText,
             stylesheet: origin.culprit.stylesheet,
           }
@@ -589,9 +612,13 @@ export function renderMarkdown(req: ChangeRequest, theme: Theme = readTheme()):
     if (!el.source && el.selector) lines.push(`Selector: \`${el.selector}\``)
     // t3-fork: printed before text/classes — when the location was rejected this is the
     // strongest address the request carries, and the agent should read it first.
-    if (el.component || el.sourceFile) {
+    // Only when there is no resolved location — otherwise the heading already names the file
+    // and a "(line not resolvable)" line beside it contradicts it.
+    if (!el.source && (el.component || el.sourceFile)) {
       const where = el.sourceFile ? ` in ${el.sourceFile} (line not resolvable)` : ''
       lines.push(`Rendered by: ${el.component ? `\`<${el.component}>\`` : 'unknown component'}${where}`)
+    } else if (el.source && el.component) {
+      lines.push(`Rendered by: \`<${el.component}>\``)
     }
     if (el.text) lines.push(`Text: "${el.text}"`)
     if (el.className) lines.push(`Current classes: \`${el.className}\``)
@@ -604,8 +631,14 @@ export function renderMarkdown(req: ChangeRequest, theme: Theme = readTheme()):
       let line = `- ${c.property}: ${c.beforeCss} → ${c.afterCss}`
       // t3-fork: a named origin means the class layer provably is NOT the lever here — say so
       // and point at the rule, instead of suggesting a utility edit that resolves to nothing.
-      if (c.origin) {
+      if (c.origin?.kind === 'inline') {
+        line += ` — currently set by an inline style on the element; that wins over every stylesheet rule, so change it where the style is applied`
+      } else if (c.origin?.kind === 'overrides') {
         line += ` — set by \`${c.origin.selectorText}\` in ${c.origin.stylesheet}, which outranks this element's utility classes; edit that rule`
+      } else if (c.origin?.kind === 'plain') {
+        line += ` — set by \`${c.origin.selectorText}\` in ${c.origin.stylesheet}; edit that rule`
+      } else if (c.origin?.kind === 'ambiguous' && c.beforeUtility) {
+        line += ` — \`${c.beforeUtility}\` and \`${c.origin.selectorText}\` (${c.origin.stylesheet}) both declare this at the same value, so removing either alone changes nothing; check which one wins before editing`
       } else if (c.afterUtility) {
         line += c.beforeUtility
           ? ` — change \`${c.beforeUtility}\` → \`${c.afterUtility}\``

From 556e9f6a13f796f673e27638cfd131d0b998030e Mon Sep 17 00:00:00 2001
From: noah <noahjames017@gmail.com>
Date: Thu, 6 Aug 2026 13:43:36 -0400
Subject: [PATCH 5/7] fix(web): decide probe ties by value and stop silencing
 carried-class culprits
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two accuracy gaps survived the live-DOM verification of the previous fix.

The removal probe called the PR's own motivating case ambiguous: px-2.5
declares 10px, the ComposerShell.css rule declares 8px, and removing the
class moves nothing either way — so the bullet claimed both "declare this at
the same value", which is false there. A tie now gets a second probe: the
utility's own declared value, read from its rule, is applied inline
(!important) and re-measured. Applying rather than string-comparing is what
makes calc(var(--spacing) * 2.5) comparable to a measured 8px. A declared
value that computes to something other than the measured one means the
utility provably lost, and the bullet carries the confident overrides claim
again; only a genuine same-value tie stays ambiguous.

The tautology filter dismissed every single-class selector the element
carries, which silenced the likeliest culprit in plain-CSS guest projects —
.composer-chip on an element with that class — the exact shape its own
comment said must survive. The exclusion is now exactly one selector: the
probed utility's own single-class rule. Other carried classes stay nameable;
a competing utility on the element is a finding, not a tautology.

Verified by executing the bundled module in headless Chromium: the motivating
case decides as overridden, a genuine calc-vs-literal tie stays ambiguous and
names the backup rule, .plainchip is named again, a winning utility still
probes as utilityWins, and every probe restores the element's style attribute.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .fork/customizations.yaml                     |  23 ++-
 .../forkDesignModeCssOrigin.test.ts           |  58 +++----
 apps/web/src/custom/designMode/cssOrigin.ts   | 151 ++++++++++++++----
 3 files changed, 159 insertions(+), 73 deletions(-)

diff --git a/.fork/customizations.yaml b/.fork/customizations.yaml
index 9d1d6a698f0a..4aac3eb704ab 100644
--- a/.fork/customizations.yaml
+++ b/.fork/customizations.yaml
@@ -1722,13 +1722,22 @@
 
     First, a css bullet may only say "change `px-2.5` -> `px-1`" once
     cssOrigin.ts has PROVED that class is the lever, by removing it and
-    re-measuring while the element shows its original cascade. The probe cannot
-    decide a TIE — if something else declares the same value, removing the
-    class moves nothing, and "inert" and "wins but shadowed" look identical —
-    so that case is reported as ambiguous and names BOTH rather than guessing.
-    When the class provably is not the lever the bullet names the winning rule
-    and its file (Vite's data-vite-dev-id is what still carries the authored
-    filename). Ranking is layer-aware: unlayered beats layered above
+    re-measuring while the element shows its original cascade. Removal alone
+    cannot decide a TIE — if something else declares the same value, removing
+    the class moves nothing — so a tie gets a second probe: the utility's own
+    declared value is applied inline and re-measured, which resolves
+    `calc(var(--spacing) * N)` in the element's context. A declared value that
+    computes to something OTHER than the measured one means the utility
+    provably lost (the motivating `px-2.5`-is-10px-but-measured-8px case is
+    decided, not hedged); only a genuine same-value tie is reported as
+    ambiguous and names BOTH. Culprit naming excludes exactly ONE selector —
+    the probed utility's own single-class rule, a tautology — and nothing
+    broader: a plain-CSS project's `.composer-chip` is the likeliest culprit
+    there even though the element carries the class, and a competing utility on
+    the element is a finding. When the class provably is not the lever the
+    bullet names the winning rule and its file (Vite's data-vite-dev-id is what
+    still carries the authored filename). Ranking is layer-aware: unlayered
+    beats layered above
     specificity, because Tailwind v4 utilities are in `@layer utilities` and an
     unlayered fork rule of trivial specificity beats them. Two CSSOM traps are
     load-bearing here: since CSS Nesting a CSSStyleRule HAS a (truthy, empty)
diff --git a/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
index ce6acfcf6c94..ed93f36c853e 100644
--- a/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
+++ b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
@@ -1,10 +1,11 @@
 // @effect-diagnostics nodeBuiltinImport:off
 /** Fork guard — see `.fork/customizations.yaml#fork-design-mode`.
  *
- * Covers the DOM-free half of cssOrigin.ts. The probe itself (remove the class, re-measure)
- * and the CSSOM walk need a live browser and are exercised by design mode in the preview
- * webview; this suite pins the parts that decide what the agent is ultimately TOLD — which
- * selectors are dismissed as utilities, and which rule gets named as the culprit.
+ * Covers the DOM-free half of cssOrigin.ts. The probes (remove the class / apply the declared
+ * value, re-measure) and the CSSOM walk need a live browser and are exercised by design mode
+ * in the preview webview; this suite pins the parts that decide what the agent is ultimately
+ * TOLD — which selector counts as the probed utility's own rule, and which rule gets named as
+ * the culprit.
  */
 import { describe, expect, it } from "vite-plus/test";
 
@@ -12,9 +13,9 @@ import * as NodeFS from "node:fs";
 import * as NodeURL from "node:url";
 
 import {
-  isTautologicalSelector,
   pickCulprit,
   roughSpecificity,
+  singleClassName,
   type OriginCandidate,
 } from "../custom/designMode/cssOrigin";
 
@@ -28,42 +29,31 @@ const candidate = (over: Partial<OriginCandidate>): OriginCandidate => ({
   ...over,
 });
 
-/** Stand-in for the element's own class list — the only thing the tautology test consults. */
-const classes = (...names: string[]): DOMTokenList =>
-  ({ contains: (name: string) => names.includes(name) }) as DOMTokenList;
-
 describe("fork guard: design-mode css origin", () => {
-  describe("isTautologicalSelector", () => {
-    it("dismisses a single class the element already carries", () => {
-      // Naming `.px-1` as the culprit for a padding change is a tautology, not a lead.
-      expect(isTautologicalSelector(".px-1", classes("px-1"))).toBe(true);
-      expect(isTautologicalSelector("  .px-1  ", classes("px-1"))).toBe(true);
-    });
-
-    it("unescapes before comparing, so escaped utilities are still dismissed", () => {
-      expect(isTautologicalSelector(".px-2\\.5", classes("px-2.5"))).toBe(true);
+  // Culprit exclusion is scoped to the PROBED utility's own rule, matched by this parse: any
+  // broader dismissal (every carried class, every "utility-looking" selector) silenced the
+  // plain-CSS `.composer-chip` culprit and competing-utility findings.
+  describe("singleClassName", () => {
+    it("extracts a lone class selector", () => {
+      expect(singleClassName(".px-1")).toBe("px-1");
+      expect(singleClassName("  .px-1  ")).toBe("px-1");
     });
 
-    it("keeps a single-class rule the element does NOT carry", () => {
-      // A plain-CSS guest project's `.composer-chip { padding: 8px }` is the likeliest culprit
-      // there; dismissing every single-class selector hid exactly that case.
-      expect(isTautologicalSelector(".composer-chip", classes("px-1"))).toBe(false);
+    it("unescapes, so the parsed name matches its class-list form", () => {
+      expect(singleClassName(".px-2\\.5")).toBe("px-2.5");
     });
 
-    it("keeps compound and pseudo-class selectors even when the element has both classes", () => {
-      // These genuinely outrank a utility. The previous regex let unescaped `.` and `:` into
-      // its character class, so it swallowed them as "bare".
-      expect(isTautologicalSelector(".composer.compact", classes("composer", "compact"))).toBe(
-        false,
-      );
-      expect(isTautologicalSelector(".chip:hover", classes("chip"))).toBe(false);
-      expect(isTautologicalSelector(".card .title", classes("card", "title"))).toBe(false);
+    it("returns null for compound and pseudo-class selectors", () => {
+      // These genuinely outrank a utility and must stay nameable as culprits.
+      expect(singleClassName(".composer.compact")).toBeNull();
+      expect(singleClassName(".chip:hover")).toBeNull();
+      expect(singleClassName(".card .title")).toBeNull();
     });
 
-    it("keeps anything that is not a lone class selector", () => {
-      expect(isTautologicalSelector("[data-fork-composer-mode-chip]", classes())).toBe(false);
-      expect(isTautologicalSelector("button.primary", classes("primary"))).toBe(false);
-      expect(isTautologicalSelector("#id", classes())).toBe(false);
+    it("returns null for anything that is not a lone class selector", () => {
+      expect(singleClassName("[data-fork-composer-mode-chip]")).toBeNull();
+      expect(singleClassName("button.primary")).toBeNull();
+      expect(singleClassName("#id")).toBeNull();
     });
   });
 
diff --git a/apps/web/src/custom/designMode/cssOrigin.ts b/apps/web/src/custom/designMode/cssOrigin.ts
index 24a1ec055db6..b13a1cafad3e 100644
--- a/apps/web/src/custom/designMode/cssOrigin.ts
+++ b/apps/web/src/custom/designMode/cssOrigin.ts
@@ -14,9 +14,13 @@
  * 1. "Does the utility class control this property?" — answered EMPIRICALLY, by removing the
  *    class and re-measuring. That is ground truth for the cases it can decide: no cascade
  *    emulation to get wrong, and it accounts for layers, `!important` and specificity at once.
- *    It cannot decide a TIE — if another declaration carries the same value, removing the class
- *    moves nothing, and "the class is inert" and "the class wins but is shadowed" look
- *    identical. That case is reported as ambiguous rather than guessed at.
+ *    Removal alone cannot decide a TIE — if another declaration carries the same value,
+ *    removing the class moves nothing — so a tie gets a second probe: the utility's own
+ *    declared value, read from its rule, is applied inline and re-measured. Resolving it on
+ *    the element is what makes `calc(var(--spacing) * 2.5)` comparable to a measured `8px`.
+ *    When it computes to something OTHER than the measured value, the utility provably lost
+ *    (the motivating case above: `px-2.5` is 10px, the measured 8px came from the rule) and
+ *    is reported as overridden; only a genuine same-value tie is reported as ambiguous.
  * 2. "Then what else declares it?" — answered by walking the stylesheets for matching rules.
  *    Used to name a culprit, and to turn a tie into an honest "both of these declare it".
  *
@@ -40,9 +44,12 @@ export interface OriginRule {
 export interface DeclarationOrigin {
   /** The probe proved `utilityClass` is what resolves this property. */
   utilityWins: boolean;
-  /** The probe could not tell: removing the class did not move the value, which happens both
-   * when the class is inert AND when something else declares the same value. Callers must not
-   * claim the utility is overridden on this basis. */
+  /** The probes could not tell: removing the class did not move the value, and the utility's
+   * own declared value (where a rule for it was found) computes to the measured one — at least
+   * two declarations genuinely carry the same value, and which wins was not established.
+   * Callers must not claim the utility is overridden on this basis. A tie whose declared value
+   * DIFFERS from the measured one is not ambiguous: the utility provably lost, and the culprit
+   * carries the overridden claim. */
   ambiguous: boolean;
   /** The probed class, echoed back so callers need not re-derive it. Null when no class on the
    * element looked relevant — in which case no probe ran and `utilityWins` is meaningless. */
@@ -118,22 +125,20 @@ function stylesheetLabel(sheet: CSSStyleSheet): string {
 const SINGLE_CLASS_SELECTOR = /^\.((?:[^\\.:[\s>+~,()]|\\.)+)$/;
 
 /**
- * Whether a selector is a tautology for this element: a single class that the element already
- * carries, i.e. one of its own utilities. Naming `.px-1` as the culprit for a padding change
- * tells the agent nothing it did not already have.
+ * The class name when the selector is exactly one class (`.px-2\.5` → `px-2.5`), else null.
  *
- * Deliberately narrower than "looks like a utility". A plain-CSS guest project's
- * `.composer-chip { padding: 8px }` is a single-class selector AND the most likely culprit
- * there, so it must survive — it is only dismissed when the class is the element's own. And
- * `.a.b` / `.a:hover` are not single-class at all: they genuinely outrank a utility and were
- * previously discarded by a regex whose character class let unescaped `.` and `:` through.
+ * Used for two things, both scoped to the PROBED utility class: excluding that class's own
+ * rule from culprit naming (naming `.px-1` as the culprit for a padding change tells the agent
+ * nothing), and finding that rule so a tie can be decided by its declared value. Every other
+ * single-class rule stays nameable — a plain-CSS guest project's `.composer-chip` is the
+ * likeliest culprit there even though the element carries the class, and a COMPETING utility
+ * on the element is a finding, not a tautology. Dismissing any carried class was too broad and
+ * silenced exactly those. `.a.b` / `.a:hover` are not single-class at all: they genuinely
+ * outrank a utility.
  */
-export function isTautologicalSelector(selectorText: string, classList: DOMTokenList): boolean {
-  const match = SINGLE_CLASS_SELECTOR.exec(selectorText.trim());
-  if (!match) return false;
-  const raw = match[1];
-  if (raw === undefined) return false;
-  return classList.contains(raw.replace(/\\(.)/g, "$1"));
+export function singleClassName(selectorText: string): string | null {
+  const raw = SINGLE_CLASS_SELECTOR.exec(selectorText.trim())?.[1];
+  return raw === undefined ? null : raw.replace(/\\(.)/g, "$1");
 }
 
 /** A matched rule before selection. Split out so the choice can be tested without a DOM:
@@ -184,10 +189,11 @@ function mediaMatches(condition: string, cache: MediaCache): boolean {
  * needed to rank it. ONE walk per element serves every changed property — the walk, not the
  * per-property filtering, is what costs on a 30k-rule dev sheet.
  */
-function collectMatchingRules(el: Element): Array<OriginCandidate & { style: CSSStyleDeclaration }> {
+function collectMatchingRules(
+  el: Element,
+): Array<OriginCandidate & { style: CSSStyleDeclaration }> {
   const found: Array<OriginCandidate & { style: CSSStyleDeclaration }> = [];
   const mediaCache: MediaCache = new Map();
-  const classList = el.classList;
   let order = 0;
 
   const visit = (rules: CSSRuleList, sheet: CSSStyleSheet, layered: boolean): void => {
@@ -203,9 +209,9 @@ function collectMatchingRules(el: Element): Array<OriginCandidate & { style: CSS
       // into for their nested children.
       if (rule instanceof CSSStyleRule) {
         const selectorText = rule.selectorText;
-        // Cheapest rejects first: string work and a classList lookup before any CSSOM read,
-        // and `matches()` — the expensive one — only for rules that survive.
-        if (typeof selectorText === "string" && !isTautologicalSelector(selectorText, classList)) {
+        // The element's own single-class rules are collected too — the probed utility's rule is
+        // excluded from culprit naming per property, but its declared value decides ties.
+        if (typeof selectorText === "string") {
           let matched = false;
           try {
             matched = el.matches(selectorText);
@@ -242,7 +248,8 @@ function collectMatchingRules(el: Element): Array<OriginCandidate & { style: CSS
       }
       if (rule instanceof CSSGroupingRule) {
         const nowLayered =
-          layered || (typeof CSSLayerBlockRule !== "undefined" && rule instanceof CSSLayerBlockRule);
+          layered ||
+          (typeof CSSLayerBlockRule !== "undefined" && rule instanceof CSSLayerBlockRule);
         visit(rule.cssRules, sheet, nowLayered);
       }
     }
@@ -285,6 +292,67 @@ function classMovesProperty(
   }
 }
 
+interface UtilityDeclaration {
+  property: string;
+  value: string;
+}
+
+/** The probed utility's own declaration for `property` (directly or via a shorthand), read
+ * from the highest-ranked matching rule whose selector is exactly that class. Null when no
+ * accessible sheet declares it — such a tie cannot be value-compared and stays ambiguous. */
+function utilityDeclaration(
+  declaring: ReadonlyArray<OriginCandidate & { style: CSSStyleDeclaration }>,
+  utilityClass: string,
+  property: string,
+): UtilityDeclaration | null {
+  let best: (OriginCandidate & { style: CSSStyleDeclaration }) | null = null;
+  for (const candidate of declaring) {
+    if (singleClassName(candidate.selectorText) !== utilityClass) continue;
+    if (best === null || outranks(candidate, best)) best = candidate;
+  }
+  if (best === null) return null;
+  const direct = best.style.getPropertyValue(property);
+  if (direct !== "") return { property, value: direct };
+  for (const shorthand of SHORTHANDS[property] ?? []) {
+    const value = best.style.getPropertyValue(shorthand);
+    if (value !== "") return { property: shorthand, value };
+  }
+  return null;
+}
+
+/** Whether the utility's declared value, resolved on this element, computes to the measured
+ * value. This is what makes a removal-probe tie decidable: "the utility wins and something
+ * backs it at the same value" and "the utility declares a DIFFERENT value and lost" measure
+ * identically under removal, but only the first survives applying the declared value inline
+ * (with `!important`, so it beats whatever actually won) and re-measuring. Applying rather
+ * than string-comparing is deliberate — `calc(var(--spacing) * 2.5)` only becomes comparable
+ * to a measured `8px` by resolving it in the element's own context. Same self-defence
+ * transition suppression as classMovesProperty. */
+function declaredValueMatchesMeasured(
+  el: Element,
+  declared: UtilityDeclaration,
+  property: string,
+  before: string,
+): boolean {
+  const style = (el as HTMLElement).style;
+  if (!style) return true;
+  const prevValue = style.getPropertyValue(declared.property);
+  const prevPriority = style.getPropertyPriority(declared.property);
+  const inlineTransition = style.getPropertyValue("transition");
+  style.setProperty("transition", "none");
+  try {
+    style.setProperty(declared.property, declared.value, "important");
+    return getComputedStyle(el).getPropertyValue(property) === before;
+  } catch {
+    return true;
+  } finally {
+    if (prevValue) style.setProperty(declared.property, prevValue, prevPriority);
+    else style.removeProperty(declared.property);
+    if (inlineTransition) style.setProperty("transition", inlineTransition);
+    else style.removeProperty("transition");
+  }
+}
+
 /**
  * Resolves what controls each of `properties` on `el`, in one CSSOM walk.
  *
@@ -305,21 +373,40 @@ export function resolveDeclarationOrigins(
   for (const property of properties) {
     const utilityClass = utilityFor(property);
     const before = measured.get(property) ?? getComputedStyle(el).getPropertyValue(property);
+    const inlineValue = inline?.getPropertyValue(property);
+    const inlineStyle = inlineValue !== "" && inlineValue !== undefined;
     const canProbe = utilityClass !== null && el.classList.contains(utilityClass);
     const moved = canProbe && classMovesProperty(el, property, utilityClass, before);
 
-    const candidates = matching
+    const declaring = matching
       .filter((candidate) => declaresProperty(candidate.style, property))
       .map((candidate) => ({ ...candidate, important: isImportant(candidate.style, property) }));
 
+    // Only a probe that ran and did not move the value is a tie. No probe at all is not
+    // ambiguity — it is simply the absence of a utility to talk about. An inline-style
+    // property skips the value comparison: inline already outranks both contenders, and the
+    // caller reports it as `inlineStyle` regardless.
+    let ambiguous = canProbe && !moved;
+    if (ambiguous && !inlineStyle && utilityClass !== null) {
+      const declared = utilityDeclaration(declaring, utilityClass, property);
+      if (declared !== null && !declaredValueMatchesMeasured(el, declared, property, before)) {
+        ambiguous = false; // the utility declares a different value: it provably lost
+      }
+    }
+
+    // The probed utility's own rule never counts as a culprit — naming it back at the agent is
+    // a tautology. Every OTHER rule stays eligible, including other single-class rules.
+    const culpritPool =
+      utilityClass === null
+        ? declaring
+        : declaring.filter((candidate) => singleClassName(candidate.selectorText) !== utilityClass);
+
     out.set(property, {
       utilityWins: moved,
-      // Only a probe that ran and did not move the value is ambiguous. No probe at all is not
-      // ambiguity — it is simply the absence of a utility to talk about.
-      ambiguous: canProbe && !moved,
+      ambiguous,
       utilityClass,
-      inlineStyle: inline?.getPropertyValue(property) !== "" && inline?.getPropertyValue(property) !== undefined,
-      culprit: moved ? null : pickCulprit(candidates),
+      inlineStyle,
+      culprit: moved ? null : pickCulprit(culpritPool),
     });
   }
   return out;

From 9521c58e6983b5a83736951505bf2e92a55cc9a3 Mon Sep 17 00:00:00 2001
From: noah <noahjames017@gmail.com>
Date: Thu, 6 Aug 2026 22:28:17 -0400
Subject: [PATCH 6/7] style(desktop): fmt DesignSourceResult after the
 tie-probe follow-up

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/desktop/src/preview/DesignSourceResult.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/src/preview/DesignSourceResult.ts b/apps/desktop/src/preview/DesignSourceResult.ts
index 5f63ae5f13c3..38906662cc69 100644
--- a/apps/desktop/src/preview/DesignSourceResult.ts
+++ b/apps/desktop/src/preview/DesignSourceResult.ts
@@ -125,11 +125,14 @@ interface RawFrame {
  * comparison is the fallback, on comparable form rather than raw. `frames[0]` is deliberately
  * NOT a fallback — it is not necessarily the reporting frame, and guessing here is what makes
  * the flag check meaningless. */
-function findReportingFrame(frames: readonly RawFrame[], value: {
-  filePath?: unknown;
-  lineNumber?: unknown;
-  columnNumber?: unknown;
-}): RawFrame | null {
+function findReportingFrame(
+  frames: readonly RawFrame[],
+  value: {
+    filePath?: unknown;
+    lineNumber?: unknown;
+    columnNumber?: unknown;
+  },
+): RawFrame | null {
   const byPosition = frames.filter(
     (frame) => frame.lineNumber === value.lineNumber && frame.columnNumber === value.columnNumber,
   );

From 4543bdcc2367a28cb999c57fa4020696fd81d541 Mon Sep 17 00:00:00 2001
From: noah <noahjames017@gmail.com>
Date: Thu, 6 Aug 2026 22:51:32 -0400
Subject: [PATCH 7/7] fix(web): an unnameable winner no longer resurrects the
 utility suggestion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The probe's verdict only reached the request when the winning (or tying)
rule could be named. When the culprit lives where CSSOM cannot follow — a
cross-origin sheet throws on access — the verdict was dropped on the
floor: an undecided tie fell through to the confident "change `px-2.5` →
`px-1`", and a provably-lost utility fell through to "add `px-1`",
suggesting a class in the same losing layer. Both are the exact no-op
edit this probe exists to prevent (PR #67 review).

ChangeItem.origin gains culprit-less arms (`ambiguous-unnamed`,
`overrides-unnamed`) so the verdict ships even when the rule has no name,
and the renderer states what was established — a tie to check, or an
untraceable winner — instead of naming a lever. resolveDeclarationOrigins
now also nulls utilityClass when the removal probe never exercised the
class, so a non-null class in a verdict always means the probe ran.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/custom/designMode/cssOrigin.ts   | 12 +++++++---
 .../designMode/engine/vendor/request.ts       | 22 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/custom/designMode/cssOrigin.ts b/apps/web/src/custom/designMode/cssOrigin.ts
index b13a1cafad3e..f2014cf02914 100644
--- a/apps/web/src/custom/designMode/cssOrigin.ts
+++ b/apps/web/src/custom/designMode/cssOrigin.ts
@@ -51,8 +51,10 @@ export interface DeclarationOrigin {
    * DIFFERS from the measured one is not ambiguous: the utility provably lost, and the culprit
    * carries the overridden claim. */
   ambiguous: boolean;
-  /** The probed class, echoed back so callers need not re-derive it. Null when no class on the
-   * element looked relevant — in which case no probe ran and `utilityWins` is meaningless. */
+  /** The probed class, echoed back so callers need not re-derive it. Null when no probe ran —
+   * no class on the element looked relevant, or the scan's candidate was not actually in the
+   * classList — so a non-null value always means the removal probe exercised this class, and
+   * `utilityWins`/`ambiguous` are its verdicts. */
   utilityClass: string | null;
   /** The element's own inline style declares this property, which outranks every stylesheet
    * rule below. Named separately because "edit that rule" is the wrong instruction for it. */
@@ -377,6 +379,10 @@ export function resolveDeclarationOrigins(
     const inlineStyle = inlineValue !== "" && inlineValue !== undefined;
     const canProbe = utilityClass !== null && el.classList.contains(utilityClass);
     const moved = canProbe && classMovesProperty(el, property, utilityClass, before);
+    // A class the probe never exercised is reported as no class at all: every downstream
+    // reading of a non-null utilityClass ("it lost", "it tied") presumes the removal probe
+    // actually ran, and a class-list scan alone must never license one (PR #67 review).
+    const probedClass = canProbe ? utilityClass : null;
 
     const declaring = matching
       .filter((candidate) => declaresProperty(candidate.style, property))
@@ -404,7 +410,7 @@ export function resolveDeclarationOrigins(
     out.set(property, {
       utilityWins: moved,
       ambiguous,
-      utilityClass,
+      utilityClass: probedClass,
       inlineStyle,
       culprit: moved ? null : pickCulprit(culpritPool),
     });
diff --git a/apps/web/src/custom/designMode/engine/vendor/request.ts b/apps/web/src/custom/designMode/engine/vendor/request.ts
index c3616a255edc..096a143337bb 100644
--- a/apps/web/src/custom/designMode/engine/vendor/request.ts
+++ b/apps/web/src/custom/designMode/engine/vendor/request.ts
@@ -22,10 +22,16 @@ export interface ChangeItem {
    *   `overrides` — the class was probed and provably is NOT the lever; edit the rule.
    *   `ambiguous` — probe tied (something declares the same value); BOTH are named.
    *   `plain`     — no utility class to probe; the rule is named without any claim about one.
-   *   `inline`    — an inline style on the element wins; no stylesheet rule is the lever. */
+   *   `inline`    — an inline style on the element wins; no stylesheet rule is the lever.
+   * The `-unnamed` arms carry the same verdicts when the winning/tying declaration could not
+   * be recovered from any accessible stylesheet (cross-origin sheets throw on CSSOM access).
+   * They exist so the verdict still reaches the renderer: without an origin the bullet falls
+   * through to the change/add utility arms, naming a lever the probe just disproved
+   * (PR #67 review). */
   origin?:
     | { kind: 'inline' }
     | { kind: 'overrides' | 'ambiguous' | 'plain'; selectorText: string; stylesheet: string }
+    | { kind: 'overrides-unnamed' | 'ambiguous-unnamed' }
 }
 
 /** A Figma-pivot structural design op (spec 2026-07-22 §2-3), anchored at its ElementChange's
@@ -457,6 +463,16 @@ export function buildChangeRequestWithElements(
             selectorText: origin.culprit.selectorText,
             stylesheet: origin.culprit.stylesheet,
           }
+        } else if (origin.ambiguous) {
+          // t3-fork: a tie whose partner no accessible sheet names (cross-origin CSS). The
+          // verdict must still ship — origin-less fallthrough would print the confident
+          // "change `x` → `y`" the probe just declined to license (PR #67 review).
+          item.origin = { kind: 'ambiguous-unnamed' }
+        } else if (origin.utilityClass !== null && !origin.utilityWins) {
+          // t3-fork: the value probe proved the utility lost, but the winner is not in any
+          // accessible sheet. Suggesting add/change of a class in the same losing layer would
+          // repeat the exact no-op this probe exists to prevent (PR #67 review).
+          item.origin = { kind: 'overrides-unnamed' }
         }
         // 'display: flex → block' is never the literal ask — it is the panel's deterministic
         // preview of REMOVING auto layout. Stamp the intent here at construction so the agent
@@ -639,6 +655,10 @@ export function renderMarkdown(req: ChangeRequest, theme: Theme = readTheme()):
         line += ` — set by \`${c.origin.selectorText}\` in ${c.origin.stylesheet}; edit that rule`
       } else if (c.origin?.kind === 'ambiguous' && c.beforeUtility) {
         line += ` — \`${c.beforeUtility}\` and \`${c.origin.selectorText}\` (${c.origin.stylesheet}) both declare this at the same value, so removing either alone changes nothing; check which one wins before editing`
+      } else if (c.origin?.kind === 'ambiguous-unnamed' && c.beforeUtility) {
+        line += ` — \`${c.beforeUtility}\` ties with another declaration of the same value that could not be traced to an accessible stylesheet; check which one wins before editing`
+      } else if (c.origin?.kind === 'overrides-unnamed') {
+        line += ` — overridden by a rule that could not be traced to an accessible stylesheet; this element's utility classes are not the lever, so find where this property is really set`
       } else if (c.afterUtility) {
         line += c.beforeUtility
           ? ` — change \`${c.beforeUtility}\` → \`${c.afterUtility}\``