diff --git a/.fork/customizations.yaml b/.fork/customizations.yaml
index dc18cca4625c..4aac3eb704ab 100644
--- a/.fork/customizations.yaml
+++ b/.fork/customizations.yaml
@@ -1715,9 +1715,60 @@
     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, 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. 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)
+    `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
+    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
+    # 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/custom/designMode/designModeStore.ts
     - apps/web/src/custom/designMode/designModeBridge.ts
     - apps/web/src/custom/designMode/designChangeDraftStore.ts
@@ -1819,3 +1870,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 cc7946d7c9a4..4679874be47a 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,96 @@ 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.
+  //
+  // 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("accepts only an explicitly symbolicated frame", () => {
+    const stack = [
+      { fileName: VALID.filePath, lineNumber: 12, columnNumber: 4, isSymbolicated: true },
+    ];
+    expect(normalizeResolvedSource({ ...VALID, stack } as typeof VALID)?.line).toBe(12);
+  });
+
+  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)?.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, 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, lineNumber: 12, columnNumber: 4 }];
+    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" }];
+    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..91012d975ed5 100644
--- a/apps/desktop/src/preview/DesignSourceResolver.ts
+++ b/apps/desktop/src/preview/DesignSourceResolver.ts
@@ -17,8 +17,8 @@ import { getElementContext } from "react-grab/primitives";
 
 import {
   DESIGN_SOURCE_RESOLVER_GLOBAL,
-  normalizeResolvedSource,
-  type DesignSourceResult,
+  describeResolvedSource,
+  type ResolvedDesignSource,
 } from "./DesignSourceResult.ts";
 
 /** react-grab resolution symbolicates through source maps — cap concurrent work so a
@@ -48,19 +48,23 @@ 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. */
-const resolutionCache = new WeakMap<Element, Promise<DesignSourceResult | null>>();
+ *
+ * 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<DesignSourceResult | null> {
+async function resolveElement(element: Element): Promise<ResolvedDesignSource | 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 +76,7 @@ async function resolveElement(element: Element): Promise<DesignSourceResult | nu
   }
 }
 
-function resolve(element: unknown): Promise<DesignSourceResult | null> {
+function resolve(element: unknown): Promise<ResolvedDesignSource | null> {
   if (!(element instanceof Element) || element.ownerDocument !== document || !element.isConnected) {
     return Promise.resolve(null);
   }
@@ -81,10 +85,11 @@ function resolve(element: unknown): Promise<DesignSourceResult | 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 98297e1365a7..38906662cc69 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,181 @@ 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, value)) 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. 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 {
+  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. 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 {
+  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.
+ *
+ * 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,
+  value: { filePath?: unknown; lineNumber?: unknown; columnNumber?: unknown },
+): boolean {
+  if (!Array.isArray(stack) || stack.length === 0) return true;
+  const frames = stack.filter(
+    (frame): frame is RawFrame => typeof frame === "object" && frame !== null,
+  );
+  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;
+}
+
+/**
+ * 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],
+): 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
+  // 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..ed93f36c853e
--- /dev/null
+++ b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
@@ -0,0 +1,169 @@
+// @effect-diagnostics nodeBuiltinImport:off
+/** Fork guard — see `.fork/customizations.yaml#fork-design-mode`.
+ *
+ * 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";
+
+import * as NodeFS from "node:fs";
+import * as NodeURL from "node:url";
+
+import {
+  pickCulprit,
+  roughSpecificity,
+  singleClassName,
+  type OriginCandidate,
+} from "../custom/designMode/cssOrigin";
+
+const candidate = (over: Partial<OriginCandidate>): OriginCandidate => ({
+  selectorText: ".a",
+  stylesheet: "app.css",
+  important: false,
+  layered: false,
+  order: 0,
+  specificity: 0,
+  ...over,
+});
+
+describe("fork guard: design-mode css origin", () => {
+  // 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("unescapes, so the parsed name matches its class-list form", () => {
+      expect(singleClassName(".px-2\\.5")).toBe("px-2.5");
+    });
+
+    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("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();
+    });
+  });
+
+  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("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(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 }),
+        candidate({ selectorText: "button", specificity: 1, order: 2, important: true }),
+      ]);
+      expect(culprit?.selectorText).toBe("button");
+    });
+
+    it("breaks a specificity tie on document order, like the cascade", () => {
+      const culprit = pickCulprit([
+        candidate({ selectorText: ".late", specificity: 100, order: 9 }),
+        candidate({ selectorText: ".early", specificity: 100, order: 2 }),
+      ]);
+      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 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,
+      });
+    });
+
+    it("does not mutate the caller's array", () => {
+      const input = [
+        candidate({ selectorText: "b", specificity: 200, order: 1 }),
+        candidate({ selectorText: "a", specificity: 1, order: 2 }),
+      ];
+      pickCulprit(input);
+      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
new file mode 100644
index 000000000000..f2014cf02914
--- /dev/null
+++ b/apps/web/src/custom/designMode/cssOrigin.ts
@@ -0,0 +1,419 @@
+/**
+ * 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 for the cases it can decide: no cascade
+ *    emulation to get wrong, and it accounts for layers, `!important` and specificity at once.
+ *    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".
+ *
+ * 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;
+  /** 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 {
+  /** The probe proved `utilityClass` is what resolves this property. */
+  utilityWins: boolean;
+  /** 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 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. */
+  inlineStyle: boolean;
+  /** The rule worth naming, best-effort. Null when nothing could be named. */
+  culprit: OriginRule | null;
+}
+
+/** 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>";
+}
+
+const SINGLE_CLASS_SELECTOR = /^\.((?:[^\\.:[\s>+~,()]|\\.)+)$/;
+
+/**
+ * The class name when the selector is exactly one class (`.px-2\.5` → `px-2.5`), else null.
+ *
+ * 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 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:
+ * 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`. 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;
+}
+
+/** 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, 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;
+}
+
+/**
+ * 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();
+  let order = 0;
+
+  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;
+
+      // 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;
+        // 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);
+          } catch {
+            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,
+            });
+          }
+        }
+        if (rule.cssRules.length > 0) visit(rule.cssRules, sheet, layered);
+        continue;
+      }
+
+      // `@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);
+      }
+    }
+  };
+
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      // Cross-origin sheets throw on access; they cannot be authored by this project anyway.
+      const rules = sheet.cssRules;
+      if (rules) visit(rules, sheet, false);
+    } catch {
+      continue;
+    }
+  }
+  return found;
+}
+
+/** 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. `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 {
+    el.classList.remove(utilityClass);
+    return getComputedStyle(el).getPropertyValue(property) !== before;
+  } catch {
+    return false;
+  } finally {
+    el.classList.add(utilityClass);
+    if (inlineTransition) style?.setProperty("transition", inlineTransition);
+    else style?.removeProperty("transition");
+  }
+}
+
+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.
+ *
+ * `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 resolveDeclarationOrigins(
+  el: Element,
+  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 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);
+    // 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))
+      .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,
+      ambiguous,
+      utilityClass: probedClass,
+      inlineStyle,
+      culprit: moved ? null : pickCulprit(culpritPool),
+    });
+  }
+  return out;
+}
diff --git a/apps/web/src/custom/designMode/engine/nativeSource.ts b/apps/web/src/custom/designMode/engine/nativeSource.ts
index ea23ee36aad2..6ef513261a86 100644
--- a/apps/web/src/custom/designMode/engine/nativeSource.ts
+++ b/apps/web/src/custom/designMode/engine/nativeSource.ts
@@ -28,8 +28,40 @@ 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.
+ * 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;
+  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).
+ * 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;
+  return typeof name === "string" && COMPONENT_NAME_PATTERN.test(name) ? name : null;
+}
+
 interface NativeSourceResolver {
   resolve(element: Element): Promise<unknown>;
 }
@@ -117,8 +149,27 @@ 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.
+    // 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.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. 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.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/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/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 2f985717f95a..096a143337bb 100644
--- a/apps/web/src/custom/designMode/engine/vendor/request.ts
+++ b/apps/web/src/custom/designMode/engine/vendor/request.ts
@@ -3,6 +3,9 @@ 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 { resolveDeclarationOrigins, type DeclarationOrigin } from '../../cssOrigin'
+import { COMPONENT_NAME_ATTR, SOURCE_FILE_ATTR } from '../nativeSource'
 
 export interface ChangeItem {
   property: string
@@ -13,6 +16,22 @@ 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: 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.
+   * 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
@@ -88,6 +107,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 +294,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(COMPONENT_NAME_ATTR)
+      ? { component: sanitizeInline(el.getAttribute(COMPONENT_NAME_ATTR)!) }
+      : {}),
+    ...(el.getAttribute(SOURCE_FILE_ATTR)
+      ? { sourceFile: sanitizeInline(el.getAttribute(SOURCE_FILE_ATTR)!) }
+      : {}),
     changes,
   }
 }
@@ -340,6 +371,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,28 +401,79 @@ 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(' ')
+        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 {
         if (inlineTransition) el.style.setProperty('transition', inlineTransition)
         else el.style.removeProperty('transition')
       }
 
-      const className = typeof el.className === 'string' ? el.className : [...el.classList].join(' ')
-      for (const [property, v] of collapse(raw)) {
+      // 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
         // 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. 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: theme.spacingBasePx === null ? null : findExistingUtility(className, property),
+          beforeUtility: origin.utilityWins || origin.ambiguous ? origin.utilityClass : null,
           afterUtility: suggestion?.utility ?? null,
           tokenExact: suggestion?.tokenExact ?? false,
         }
+        // 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,
+          }
+        } 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
         // edits classes (removes the flex family); the renderer prints it without owning policy.
@@ -538,6 +626,16 @@ 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.
+    // 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}\``)
     lines.push('')
@@ -547,7 +645,21 @@ 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?.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.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}\``
           : ` — 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.'