diff --git a/.fork/customizations.yaml b/.fork/customizations.yaml
index 84789ee2ace8f..47f5c4980cf4f 100644
--- a/.fork/customizations.yaml
+++ b/.fork/customizations.yaml
@@ -2067,9 +2067,31 @@
     not successes, and caching them would pin a transient failure for the
     element's lifetime.
 
+    Third, the resolver snapshots the rendering component's primitive props
+    (strings/numbers/booleans, `children` excluded, capped at 12 entries and
+    64 chars per string) off the composite fiber whose displayName matches
+    the reported component name — no match, no props, so the request never
+    labels props with a component they do not belong to. The snapshot crosses
+    the bridge only beside a component name, is re-validated by the guest
+    twin (designProps.ts's readDesignProps, mirroring DesignSourceResult.ts's
+    normalizeResolvedProps), rides the element as `data-t3-props`, is
+    re-validated AGAIN when the request builder reads that page-controlled
+    attribute back, and renders as "Rendered by `<Button>` — props:
+    `variant="ghost" size="sm"`". It exists to ground the SCOPE guardrail's
+    component-vs-one-off judgment in the design system's own vocabulary.
+    bippy is imported by its root export on purpose (the mangled-name d.ts of
+    bippy/core cannot be imported by name; the root's hook-install side
+    effect is guarded double work beside react-grab's bundled copy).
+
     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.
+    test pins that wording. The SCOPE guardrail likewise diverges from
+    upstream: instead of call-site-only scoping that skips shared-component
+    edits, the agent judges component-wide vs one-off intent from the
+    request's component/source context (selecting a Button and nudging its
+    padding usually means the Button, not one instance), prefers project
+    tokens over hard-coded values, and states which scope it chose. The same
+    guard test pins that wording too.
   tier: 4
   files:
     - apps/web/src/custom/designMode/protocol.ts
@@ -2078,6 +2100,8 @@
     # (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/designProps.ts
+    - apps/web/src/custom/designMode/designProps.test.ts
     - apps/web/src/custom/designMode/designModeStore.ts
     - apps/web/src/custom/designMode/designModeBridge.ts
     - apps/web/src/custom/designMode/designModeBridge.test.ts
@@ -2153,6 +2177,16 @@
     # upstream PickPreload entry — the whole desktop half of native source
     # recovery hangs off this one line.
     - apps/desktop/src/preview-pick-preload.ts
+    # alwaysBundle for the preview-pick-preload entry must keep listing every
+    # package the resolver imports (react-grab AND bippy). The webview is
+    # sandboxed, so anything left external becomes a require() that throws
+    # before the preload installs the picker or the resolver global — packaged
+    # builds only, where no dev server catches it.
+    - apps/desktop/vite.config.ts
+    # Unfenced (strict JSON): the bippy dependency DesignSourceResolver walks
+    # fibers with. An upstream dep sweep dropping it breaks the packaged
+    # preload, not just a type import.
+    - apps/desktop/package.json
     # Thin fenced import + <ForkPreviewDesignMode> in the chrome row's
     # trailingActions slot, plus <ForkPreviewLayersToggle> in its leadingActions
     # slot; the browser surface tree stays untouched.
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 1526965427f3d..07357949d19de 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -20,6 +20,7 @@
     "@t3tools/shared": "workspace:*",
     "@t3tools/ssh": "workspace:*",
     "@t3tools/tailscale": "workspace:*",
+    "bippy": "^0.5.41",
     "effect": "catalog:",
     "electron": "41.5.0",
     "electron-store": "^8.2.0",
diff --git a/apps/desktop/src/preview/DesignSourceResolver.test.ts b/apps/desktop/src/preview/DesignSourceResolver.test.ts
index 4679874be47ae..945634f7a6f09 100644
--- a/apps/desktop/src/preview/DesignSourceResolver.test.ts
+++ b/apps/desktop/src/preview/DesignSourceResolver.test.ts
@@ -1,6 +1,12 @@
 import { describe, expect, it } from "vite-plus/test";
 
-import { describeResolvedSource, normalizeResolvedSource } from "./DesignSourceResult.ts";
+import {
+  describeResolvedSource,
+  MAX_PROP_VALUE_LENGTH,
+  MAX_PROPS,
+  normalizeResolvedProps,
+  normalizeResolvedSource,
+} from "./DesignSourceResult.ts";
 
 const VALID = {
   filePath: "/src/components/Button.tsx",
@@ -156,3 +162,75 @@ describe("describeResolvedSource", () => {
     expect(describeResolvedSource({ filePath: "/src/App.tsx\u0000", stack } as never)).toBeNull();
   });
 });
+
+describe("describeResolvedSource — props", () => {
+  it("carries props on the full location and on the hint alike", () => {
+    const props = { variant: "ghost", size: "sm" };
+    expect(
+      describeResolvedSource({ ...VALID, componentName: "Btn", props } as typeof VALID),
+    ).toEqual({ file: VALID.filePath, line: 12, column: 4, componentName: "Btn", props });
+    const stack = [{ fileName: VALID.filePath, lineNumber: 12, columnNumber: 4 }];
+    expect(
+      describeResolvedSource({ ...VALID, stack, componentName: "Btn", props } as typeof VALID),
+    ).toEqual({ componentName: "Btn", file: VALID.filePath, props });
+  });
+
+  // Rendering gates on the component name (`<Name> — props: ...`), so a props bag with no
+  // name to hang it on must not cross at all.
+  it("drops props when there is no component name to label them with", () => {
+    const props = { variant: "ghost" };
+    expect(describeResolvedSource({ ...VALID, props } as typeof VALID)).toEqual({
+      file: VALID.filePath,
+      line: 12,
+      column: 4,
+    });
+  });
+});
+
+describe("normalizeResolvedProps", () => {
+  it("keeps primitive props and drops everything else", () => {
+    expect(
+      normalizeResolvedProps({
+        variant: "ghost",
+        count: 3,
+        disabled: false,
+        onClick: () => {},
+        style: { color: "red" },
+        items: [1, 2],
+        nested: null,
+        big: Number.POSITIVE_INFINITY,
+      }),
+    ).toEqual({ variant: "ghost", count: 3, disabled: false });
+  });
+
+  it("excludes children even when primitive — the request already carries Text:", () => {
+    expect(normalizeResolvedProps({ children: "Save", variant: "ghost" })).toEqual({
+      variant: "ghost",
+    });
+  });
+
+  it("drops names that are not JSX-attribute-shaped and strings carrying control characters", () => {
+    expect(
+      normalizeResolvedProps({
+        "a b": "spaced-name",
+        "data-testid": "composer-send",
+        label: "line\nbreak",
+      }),
+    ).toEqual({ "data-testid": "composer-send" });
+  });
+
+  it("caps the entry count and slices oversized string values", () => {
+    const bag: Record<string, string> = {};
+    for (let i = 0; i < MAX_PROPS + 5; i += 1) bag[`p${i}`] = "x".repeat(200);
+    const out = normalizeResolvedProps(bag);
+    expect(Object.keys(out ?? {})).toHaveLength(MAX_PROPS);
+    expect(out?.p0).toBe("x".repeat(MAX_PROP_VALUE_LENGTH));
+  });
+
+  it("returns null for non-objects and for bags where nothing survives", () => {
+    expect(normalizeResolvedProps(null)).toBeNull();
+    expect(normalizeResolvedProps("variant=ghost")).toBeNull();
+    expect(normalizeResolvedProps([1, 2, 3])).toBeNull();
+    expect(normalizeResolvedProps({ onClick: () => {} })).toBeNull();
+  });
+});
diff --git a/apps/desktop/src/preview/DesignSourceResolver.ts b/apps/desktop/src/preview/DesignSourceResolver.ts
index 91012d975ed5a..92d540248bf76 100644
--- a/apps/desktop/src/preview/DesignSourceResolver.ts
+++ b/apps/desktop/src/preview/DesignSourceResolver.ts
@@ -9,10 +9,18 @@
  * the same property react-grab already depends on for the element picker.
  *
  * The surface is deliberately tiny: one frozen object with one async `resolve`
- * method returning validated scalars (`file`/`line`/`column`) or null. No Electron
- * object, IPC function, Node capability, React Fiber, or raw react-grab context
- * ever crosses this boundary.
+ * method returning validated scalars (`file`/`line`/`column`/`componentName`, plus the
+ * primitives-only `props` snapshot) or null. No Electron object, IPC function, Node
+ * capability, React Fiber, or raw react-grab context ever crosses this boundary.
  */
+// The ROOT export on purpose, side effect and all: importing `bippy` installs the React
+// DevTools hook stub at module load when none exists. In this preload that is guarded
+// double work, not new behavior — react-grab's own bundled bippy ships the identical
+// installer in the chunk `react-grab/primitives` pulls in, and fiber access (the picker,
+// getElementContext) already depends on it. `bippy/core` would skip the install but its
+// published d.ts exports mangled names (`getDisplayName as L`), so it cannot be imported
+// by name. Same pinned version as react-grab's bundled copy (0.5.41).
+import { getDisplayName, isCompositeFiber, type Fiber } from "bippy";
 import { getElementContext } from "react-grab/primitives";
 
 import {
@@ -21,6 +29,35 @@ import {
   type ResolvedDesignSource,
 } from "./DesignSourceResult.ts";
 
+/** How far up the fiber tree to look for the named component. The rendering component is
+ * normally the first composite ancestor; the budget only exists so a hostile or cyclic
+ * `return` chain cannot spin. */
+const MAX_FIBER_WALK = 25;
+
+/** The `memoizedProps` of the composite fiber whose displayName matches the name react-grab
+ * reported, walked upward from the context's own fiber. Matching by NAME is the honesty
+ * guard: the request renders these as `<Name> — props: ...`, so props read off any other
+ * fiber would be labeled with a component they do not belong to — no match, no props.
+ * Returns the RAW object; normalizeResolvedProps (via describeResolvedSource) owns making
+ * it safe to cross the bridge. Best-effort throughout: any surprise returns null rather
+ * than failing a resolution that already has a location to deliver. */
+function readComponentProps(fiber: Fiber | null, componentName: string | null): unknown {
+  if (!fiber || typeof componentName !== "string" || componentName.length === 0) return null;
+  try {
+    let candidate: Fiber | null = fiber;
+    for (let depth = 0; candidate && depth < MAX_FIBER_WALK; depth += 1) {
+      if (isCompositeFiber(candidate) && getDisplayName(candidate.type) === componentName) {
+        const props: unknown = candidate.memoizedProps;
+        return typeof props === "object" ? props : null;
+      }
+      candidate = candidate.return;
+    }
+  } catch {
+    // A hostile props getter or a detached fiber mid-commit — context, never worth throwing.
+  }
+  return null;
+}
+
 /** 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;
@@ -64,7 +101,10 @@ async function resolveElement(element: Element): Promise<ResolvedDesignSource |
   await acquireSlot();
   try {
     const context = await getElementContext(element);
-    const normalized = describeResolvedSource(context);
+    const normalized = describeResolvedSource({
+      ...context,
+      props: readComponentProps(context.fiber, context.componentName),
+    });
     // 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;
diff --git a/apps/desktop/src/preview/DesignSourceResult.ts b/apps/desktop/src/preview/DesignSourceResult.ts
index 38906662cc698..a522152609bdc 100644
--- a/apps/desktop/src/preview/DesignSourceResult.ts
+++ b/apps/desktop/src/preview/DesignSourceResult.ts
@@ -25,6 +25,52 @@ export interface DesignSourceResult {
   line: number;
   column: number;
   componentName?: string;
+  props?: ResolvedProps;
+}
+
+/** The rendering component's primitive props, snapshotted at resolution time. Strings,
+ * numbers and booleans ONLY — the design-system vocabulary (`variant="ghost" size="sm"`)
+ * is primitive-shaped, and the primitives-only rule is also what keeps functions, elements,
+ * styles and refs from ever crossing the bridge. Context for the agent's component-vs-one-off
+ * scope judgment (SCOPE_GUARDRAIL), not an oracle: the snapshot can go stale with state and
+ * that is fine. */
+export type ResolvedProps = Record<string, string | number | boolean>;
+
+/** Caps are the flood control for a page-controlled object: a hostile (or just enormous)
+ * props bag must not balloon the request text. TWINNED in readResolvedProps
+ * (apps/web/src/custom/designMode/designProps.ts) — same trust-boundary duplication as
+ * normalizeFilePath/readSourceFile; keep the two in step. */
+export const MAX_PROPS = 12;
+export const MAX_PROP_VALUE_LENGTH = 64;
+
+/** JSX-attribute-shaped names only (identifier, plus the `-` that `data-*`/`aria-*` carry).
+ * Same posture as COMPONENT_NAME_PATTERN: the name lands in the agent's request text. */
+const PROP_NAME_PATTERN = /^[A-Za-z_$][\w$-]{0,63}$/;
+
+/** Validates an unknown value into the primitive props snapshot, or null when nothing
+ * usable survives. Non-conforming ENTRIES are skipped, not fatal — props are best-effort
+ * context, unlike the location, where a wrong value poisons the request. `children` is
+ * excluded even when primitive: the element's own text already rides the request as `Text:`.
+ * String values are control-character-rejected (the request-injection threat model every
+ * page-controlled string here shares) and sliced to the cap, the same plain-slice treatment
+ * contextText applies. */
+export function normalizeResolvedProps(value: unknown): ResolvedProps | null {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
+  const out: ResolvedProps = {};
+  let count = 0;
+  for (const [name, raw] of Object.entries(value)) {
+    if (count >= MAX_PROPS) break;
+    if (name === "children" || !PROP_NAME_PATTERN.test(name)) continue;
+    if (typeof raw === "boolean") out[name] = raw;
+    else if (typeof raw === "number" && Number.isFinite(raw)) out[name] = raw;
+    else if (typeof raw === "string") {
+      // eslint-disable-next-line no-control-regex
+      if (/[\u0000-\u001f\u007f]/.test(raw)) continue;
+      out[name] = raw.slice(0, MAX_PROP_VALUE_LENGTH);
+    } else continue;
+    count += 1;
+  }
+  return count === 0 ? null : out;
 }
 
 /**
@@ -41,6 +87,7 @@ export function normalizeResolvedSource(
     lineNumber?: unknown;
     columnNumber?: unknown;
     componentName?: unknown;
+    props?: unknown;
     stack?: unknown;
   } | null,
 ): DesignSourceResult | null {
@@ -60,11 +107,15 @@ export function normalizeResolvedSource(
     return null;
   }
   const componentName = normalizeComponentName(value.componentName);
+  // Gated on the component name: props are rendered as `<Name> — props: ...` in the request,
+  // and a props bag with no component to hang it on has nowhere honest to appear.
+  const props = componentName === null ? null : normalizeResolvedProps(value.props);
   return {
     file,
     line: lineNumber,
     column: Math.max(1, columnNumber),
     ...(componentName === null ? {} : { componentName }),
+    ...(props === null ? {} : { props }),
   };
 }
 
@@ -188,6 +239,7 @@ export function isSymbolicated(
 export interface DesignSourceHint {
   file?: string;
   componentName?: string;
+  props?: ResolvedProps;
   line?: never;
   column?: never;
 }
@@ -213,8 +265,13 @@ export function describeResolvedSource(
   const componentName = normalizeComponentName(value?.componentName);
   const file = normalizeFilePath(value?.filePath);
   if (componentName === null && file === null) return null;
+  // Props survive a rejected location exactly like the component name does — both come off
+  // the fiber, and both matter MOST when there is no line to point at. Same component-name
+  // gate as the full-location arm.
+  const props = componentName === null ? null : normalizeResolvedProps(value?.props);
   return {
     ...(componentName === null ? {} : { componentName }),
     ...(file === null ? {} : { file }),
+    ...(props === null ? {} : { props }),
   };
 }
diff --git a/apps/desktop/vite.config.ts b/apps/desktop/vite.config.ts
index 9f25204f16301..86cf276d3034b 100644
--- a/apps/desktop/vite.config.ts
+++ b/apps/desktop/vite.config.ts
@@ -70,7 +70,16 @@ export default defineConfig({
       outExtensions: () => ({ js: ".cjs" }),
       entry: ["src/preview-pick-preload.ts"],
       deps: {
-        alwaysBundle: (id) => id === "react-grab" || id.startsWith("react-grab/"),
+        // This preload runs sandboxed (WebviewPreferences.ts pins `sandbox=true`), so its
+        // limited `require` cannot resolve npm packages from the packaged ASAR. Anything
+        // left external here throws before the preload installs the picker or the design
+        // source resolver, taking the whole preview-pick path down. `bippy` rides along
+        // with react-grab: DesignSourceResolver imports it directly for the fiber walk.
+        alwaysBundle: (id) =>
+          id === "react-grab" ||
+          id.startsWith("react-grab/") ||
+          id === "bippy" ||
+          id.startsWith("bippy/"),
       },
     },
     {
diff --git a/apps/web/src/__fork_guards__/forkDesignMode.test.ts b/apps/web/src/__fork_guards__/forkDesignMode.test.ts
index da6ef56f5954d..6e363442da3e9 100644
--- a/apps/web/src/__fork_guards__/forkDesignMode.test.ts
+++ b/apps/web/src/__fork_guards__/forkDesignMode.test.ts
@@ -792,6 +792,18 @@ describe("fork guard: design mode", () => {
     expect(preloadEntry).toContain("fork:begin fork-design-mode");
     expect(preloadEntry).toContain('import "./preview/DesignSourceResolver.ts"');
 
+    // Every package the resolver imports must be BUNDLED into the preload artifact. This
+    // webview is sandboxed, so a leftover external require() throws before the preload
+    // installs the picker or the resolver global — the whole preview-pick path dies, and
+    // only in packaged builds where a dev server never catches it.
+    const desktopViteConfig = NodeFS.readFileSync(
+      NodePath.join(desktopRoot, "vite.config.ts"),
+      "utf8",
+    );
+    for (const bundled of ["react-grab", "bippy"]) {
+      expect(desktopViteConfig).toContain(`id === "${bundled}"`);
+    }
+
     // react-grab stays a desktop-preload dependency only — never bundled into the web app.
     const webPackage = read("package.json");
     expect(webPackage).not.toContain("react-grab");
diff --git a/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
index ed93f36c853e7..79abea8342113 100644
--- a/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
+++ b/apps/web/src/__fork_guards__/forkDesignModeCssOrigin.test.ts
@@ -138,20 +138,21 @@ describe("fork guard: design-mode css origin", () => {
     });
   });
 
+  // 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",
+  );
+
   // 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", () => {
@@ -166,4 +167,35 @@ describe("fork guard: design-mode css origin", () => {
       expect(noPreview).toMatch(/Do not run the app/u);
     });
   });
+
+  // Re-sync durability, same shape as NO_PREVIEW's: upstream scopes every edit to its call
+  // site and tells the agent to SKIP shared-component changes. This fork inverts that —
+  // selecting a Button and nudging its padding usually means "the Button", so the agent
+  // judges component-wide vs one-off from the request's component/source context and says
+  // which it chose. A faithful re-sync would silently restore the skip-and-report wording
+  // and turn design edits back into call-site overrides.
+  describe("SCOPE_GUARDRAIL", () => {
+    const scope = /export const SCOPE_GUARDRAIL\s*=\s*'([^']*)'/u.exec(guardrails)?.[1];
+
+    it("is found in the vendored source", () => {
+      expect(scope).toBeTruthy();
+    });
+
+    it("no longer instance-locks or skips shared-component edits", () => {
+      expect(scope).not.toMatch(/apply to this call site only/u);
+      expect(scope).not.toMatch(/skip it/u);
+    });
+
+    it("asks the agent to judge component-wide vs one-off and disclose its choice", () => {
+      expect(scope).toMatch(/judge/u);
+      expect(scope).toMatch(/component/u);
+      expect(scope).toMatch(/instance/u);
+      expect(scope).toMatch(/which scope you chose/u);
+    });
+
+    it("keeps the no-pause rule and the token preference", () => {
+      expect(scope).toMatch(/Do not pause/u);
+      expect(scope).toMatch(/tokens/u);
+    });
+  });
 });
diff --git a/apps/web/src/custom/designMode/designProps.test.ts b/apps/web/src/custom/designMode/designProps.test.ts
new file mode 100644
index 0000000000000..d999a48b92220
--- /dev/null
+++ b/apps/web/src/custom/designMode/designProps.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import {
+  formatDesignProps,
+  MAX_PROP_VALUE_LENGTH,
+  MAX_PROPS,
+  parsePropsAttr,
+  readDesignProps,
+} from "./designProps";
+
+describe("readDesignProps", () => {
+  it("keeps primitive props and drops everything else", () => {
+    expect(
+      readDesignProps({
+        variant: "ghost",
+        count: 3,
+        disabled: false,
+        onClick: () => {},
+        style: { color: "red" },
+        items: [1, 2],
+        nested: null,
+        big: Number.POSITIVE_INFINITY,
+      }),
+    ).toEqual({ variant: "ghost", count: 3, disabled: false });
+  });
+
+  it("excludes children even when primitive — the request already carries Text:", () => {
+    expect(readDesignProps({ children: "Save", variant: "ghost" })).toEqual({
+      variant: "ghost",
+    });
+  });
+
+  it("drops non-JSX-shaped names and strings carrying control characters", () => {
+    expect(
+      readDesignProps({ "a b": "spaced", "data-testid": "send", label: "line\nbreak" }),
+    ).toEqual({ "data-testid": "send" });
+  });
+
+  it("caps the entry count and slices oversized string values", () => {
+    const bag: Record<string, string> = {};
+    for (let i = 0; i < MAX_PROPS + 5; i += 1) bag[`p${i}`] = "x".repeat(200);
+    const out = readDesignProps(bag);
+    expect(Object.keys(out ?? {})).toHaveLength(MAX_PROPS);
+    expect(out?.p0).toBe("x".repeat(MAX_PROP_VALUE_LENGTH));
+  });
+
+  it("returns null for non-objects and empty survivors", () => {
+    expect(readDesignProps(null)).toBeNull();
+    expect(readDesignProps("variant=ghost")).toBeNull();
+    expect(readDesignProps([1, 2])).toBeNull();
+    expect(readDesignProps({ onClick: () => {} })).toBeNull();
+  });
+});
+
+describe("parsePropsAttr", () => {
+  it("round-trips a stamped attribute", () => {
+    const attr = JSON.stringify({ variant: "ghost", count: 2, active: true });
+    expect(parsePropsAttr(attr)).toEqual({ variant: "ghost", count: 2, active: true });
+  });
+
+  it("re-validates — the attribute is page-controlled like data-dc-source", () => {
+    expect(parsePropsAttr(JSON.stringify({ children: "x", ok: "y" }))).toEqual({ ok: "y" });
+    expect(parsePropsAttr(JSON.stringify(["not", "a", "bag"]))).toBeNull();
+  });
+
+  it("returns null for missing or malformed JSON", () => {
+    expect(parsePropsAttr(null)).toBeNull();
+    expect(parsePropsAttr("")).toBeNull();
+    expect(parsePropsAttr("{not json")).toBeNull();
+  });
+});
+
+describe("formatDesignProps", () => {
+  it("renders the JSX vocabulary the agent will grep for", () => {
+    expect(formatDesignProps({ variant: "ghost", count: 3, disabled: true, open: false })).toBe(
+      'variant="ghost" count={3} disabled open={false}',
+    );
+  });
+
+  it("quote-escapes string values so they cannot break out of the attribute", () => {
+    expect(formatDesignProps({ label: 'say "hi"' })).toBe('label="say \\"hi\\""');
+  });
+});
diff --git a/apps/web/src/custom/designMode/designProps.ts b/apps/web/src/custom/designMode/designProps.ts
new file mode 100644
index 0000000000000..4f85fa1a14065
--- /dev/null
+++ b/apps/web/src/custom/designMode/designProps.ts
@@ -0,0 +1,80 @@
+/**
+ * Fork customization — see `.fork/customizations.yaml#fork-design-mode`.
+ *
+ * The rendering component's primitive-props snapshot, on its way from the desktop
+ * resolver into the change request: validation, the stamp attribute, and the JSX-shaped
+ * inline rendering. Lives OUTSIDE engine/ (the cssOrigin.ts pattern) so it stays
+ * unit-testable in apps/web's project while the engine island includes it by reference.
+ *
+ * Trust boundary: this is the guest-side TWIN of `normalizeResolvedProps` in
+ * apps/desktop/src/preview/DesignSourceResult.ts — deliberate duplication, not a shared
+ * helper, because each side of the page-shared global must hold on its own. Keep the
+ * caps and shapes in step. The validator runs TWICE per journey on purpose: once on the
+ * resolver result (nativeSource.ts), and again when the request builder reads the stamped
+ * attribute back — any element in the served DOM can carry an attacker-authored
+ * `data-t3-props`, exactly like `data-dc-source`.
+ */
+
+/** Stamped beside COMPONENT_NAME_ATTR by nativeSource.ts, and only ever alongside it —
+ * the request renders props as `<Name> — props: ...`, so a props bag with no component
+ * name has nowhere honest to appear. */
+export const PROPS_ATTR = "data-t3-props";
+
+export type DesignProps = Record<string, string | number | boolean>;
+
+/** Caps twinned with DesignSourceResult.ts (flood control for a page-controlled object). */
+export const MAX_PROPS = 12;
+export const MAX_PROP_VALUE_LENGTH = 64;
+
+/** JSX-attribute-shaped names only (identifier, plus the `-` of `data-*`/`aria-*`). */
+const PROP_NAME_PATTERN = /^[A-Za-z_$][\w$-]{0,63}$/;
+
+/** Unknown → validated primitive props, or null when nothing usable survives.
+ * Entry-level skipping, not rejection — props are best-effort context. `children` is
+ * excluded even when primitive (the request already carries `Text:`); strings are
+ * control-character-rejected and sliced to the cap. */
+export function readDesignProps(value: unknown): DesignProps | null {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
+  const out: DesignProps = {};
+  let count = 0;
+  for (const [name, raw] of Object.entries(value)) {
+    if (count >= MAX_PROPS) break;
+    if (name === "children" || !PROP_NAME_PATTERN.test(name)) continue;
+    if (typeof raw === "boolean") out[name] = raw;
+    else if (typeof raw === "number" && Number.isFinite(raw)) out[name] = raw;
+    else if (typeof raw === "string") {
+      // eslint-disable-next-line no-control-regex
+      if (/[\u0000-\u001f\u007f]/.test(raw)) continue;
+      out[name] = raw.slice(0, MAX_PROP_VALUE_LENGTH);
+    } else continue;
+    count += 1;
+  }
+  return count === 0 ? null : out;
+}
+
+/** The stamped attribute's value → validated props. JSON that does not parse, or parses
+ * to anything but a usable bag, is null — the attribute is page-controlled either way. */
+export function parsePropsAttr(attr: string | null): DesignProps | null {
+  if (!attr) return null;
+  try {
+    return readDesignProps(JSON.parse(attr));
+  } catch {
+    return null;
+  }
+}
+
+/** Validated props → the JSX vocabulary the agent will actually grep for:
+ * `variant="ghost" count={3} disabled` (bare name for `true`, `={false}` for false).
+ * JSON.stringify escapes quotes and would escape any control character, so a value can
+ * never break out of its attribute — the caller still owns code-span hygiene for the
+ * line it embeds this in (request.ts wraps it in backticks after sanitizeInline). */
+export function formatDesignProps(props: DesignProps): string {
+  return Object.entries(props)
+    .map(([name, value]) => {
+      if (value === true) return name;
+      if (value === false) return `${name}={false}`;
+      if (typeof value === "number") return `${name}={${value}}`;
+      return `${name}=${JSON.stringify(value)}`;
+    })
+    .join(" ");
+}
diff --git a/apps/web/src/custom/designMode/engine/nativeSource.ts b/apps/web/src/custom/designMode/engine/nativeSource.ts
index ada71f11b8c74..79bbc375cb093 100644
--- a/apps/web/src/custom/designMode/engine/nativeSource.ts
+++ b/apps/web/src/custom/designMode/engine/nativeSource.ts
@@ -19,6 +19,7 @@
  * (which holds a settled null for a short TTL) absorbs the repeats, so pointer traffic
  * still can't retry-storm react-grab.
  */
+import { type DesignProps, PROPS_ATTR, readDesignProps } from "../designProps";
 import type { TaggedElement } from "./vendor/source";
 
 export const NATIVE_SOURCE_RESOLVER_GLOBAL = "__T3_DESIGN_SOURCE_RESOLVER_V1__";
@@ -62,6 +63,13 @@ function readComponentName(value: unknown): string | null {
   return typeof name === "string" && COMPONENT_NAME_PATTERN.test(name) ? name : null;
 }
 
+/** The resolver result's `props`, narrowed off `unknown` the same way readComponentName
+ * narrows the name — the validation itself lives in readDesignProps. */
+function readProps(value: unknown): DesignProps | null {
+  if (typeof value !== "object" || value === null) return null;
+  return readDesignProps((value as { props?: unknown }).props);
+}
+
 interface NativeSourceResolver {
   resolve(element: Element): Promise<unknown>;
 }
@@ -176,7 +184,24 @@ export function resolveAndTag(el: TaggedElement): Promise<boolean> {
     // 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 (componentName) {
+      el.setAttribute(COMPONENT_NAME_ATTR, componentName);
+      // Same trust posture as the name it rides with: re-validated on this side of the
+      // page-shared global (readDesignProps is the twin of the host's normalizeResolvedProps),
+      // and only ever stamped ALONGSIDE the component name — the request renders props as
+      // `<Name> — props: ...`. Overwrite semantics for the same HMR reason; a resolution that
+      // yields no props clears a stale stamp rather than serving it forever.
+      const props = readProps(raw);
+      if (props) el.setAttribute(PROPS_ATTR, JSON.stringify(props));
+      else el.removeAttribute(PROPS_ATTR);
+    } else {
+      // The stamp is atomic with the resolution: a resolve that comes back nameless (HMR
+      // swapped the component behind a still-connected element) clears BOTH attributes.
+      // Leaving them would let the request render a previous component's vocabulary as
+      // current evidence — and props now feed the agent's component-vs-one-off scope call.
+      el.removeAttribute(COMPONENT_NAME_ATTR);
+      el.removeAttribute(PROPS_ATTR);
+    }
     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
diff --git a/apps/web/src/custom/designMode/engine/tsconfig.json b/apps/web/src/custom/designMode/engine/tsconfig.json
index 0d4d881f66115..3c459117e75b0 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", "../cssOrigin.ts"]
+  "include": ["./**/*.ts", "../protocol.ts", "../cssOrigin.ts", "../designProps.ts"]
 }
diff --git a/apps/web/src/custom/designMode/engine/vendor/request.ts b/apps/web/src/custom/designMode/engine/vendor/request.ts
index dba8350495428..8d738158849a2 100644
--- a/apps/web/src/custom/designMode/engine/vendor/request.ts
+++ b/apps/web/src/custom/designMode/engine/vendor/request.ts
@@ -5,6 +5,10 @@ import { readTheme, readTokens, suggestUtility, findExistingUtility, type Theme
 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'
+// t3-fork: the rendering component's primitive-props snapshot (../../designProps.ts) —
+// parsed back OFF the stamped attribute with full re-validation, because any element in
+// the served DOM can carry an attacker-authored data-t3-props.
+import { formatDesignProps, parsePropsAttr, PROPS_ATTR, type DesignProps } from '../../designProps'
 import { COMPONENT_NAME_ATTR, SOURCE_FILE_ATTR } from '../nativeSource'
 
 export interface ChangeItem {
@@ -110,6 +114,10 @@ export interface ElementChange {
   /** 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 component's primitive props at resolution time (`variant`, `size`, ...) —
+   * the design-system vocabulary the agent needs for the SCOPE_GUARDRAIL's component-vs-one-off
+   * judgment. Only ever present alongside `component`; the renderer hangs it off that name. */
+  props?: DesignProps
   /** t3-fork: the authored file, when it was known but no position inside it was. */
   sourceFile?: string
   changes: ChangeItem[]
@@ -312,6 +320,11 @@ function sourceRef(loc: SourceLocation): string {
  * flow, always [] for prompts. */
 function elementContext(el: TaggedElement, changes: ChangeItem[]): ElementChange {
   const className = typeof el.className === 'string' ? el.className : [...el.classList].join(' ')
+  // t3-fork: props only ever ride WITH a component name (nativeSource stamps them together,
+  // and the renderer hangs them off `<Name>`); parsePropsAttr re-validates the attribute,
+  // which is page-controlled like every other data-* this context reads.
+  const component = el.getAttribute(COMPONENT_NAME_ATTR)
+  const props = component ? parsePropsAttr(el.getAttribute(PROPS_ATTR)) : null
   return {
     tag: el.tagName.toLowerCase(),
     source: el.dataset.dcSource ? parseSourceAttr(el.dataset.dcSource) : null,
@@ -319,9 +332,8 @@ 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(COMPONENT_NAME_ATTR)
-      ? { component: sanitizeInline(el.getAttribute(COMPONENT_NAME_ATTR)!) }
-      : {}),
+    ...(component ? { component: sanitizeInline(component) } : {}),
+    ...(props ? { props } : {}),
     ...(el.getAttribute(SOURCE_FILE_ATTR)
       ? { sourceFile: sanitizeInline(el.getAttribute(SOURCE_FILE_ATTR)!) }
       : {}),
@@ -654,11 +666,19 @@ export function renderMarkdown(req: ChangeRequest, theme: Theme = readTheme()):
     // 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.
+    // The props snapshot rides the component name in ONE code span — JSX vocabulary
+    // (`variant="ghost" size="sm"`), which is what makes "component-wide or one-off?"
+    // (SCOPE_GUARDRAIL) a judgment the agent can ground instead of a guess. sanitizeInline
+    // strips backticks so a page-authored value can never close the span.
+    const propsClause =
+      el.component && el.props ? ` — props: \`${sanitizeInline(formatDesignProps(el.props))}\`` : ''
     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}`)
+      lines.push(
+        `Rendered by: ${el.component ? `\`<${el.component}>\`` : 'unknown component'}${where}${propsClause}`
+      )
     } else if (el.source && el.component) {
-      lines.push(`Rendered by: \`<${el.component}>\``)
+      lines.push(`Rendered by: \`<${el.component}>\`${propsClause}`)
     }
     if (el.text) lines.push(`Text: "${el.text}"`)
     if (el.className) lines.push(`Current classes: \`${el.className}\``)
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 2eab29dbb4e6c..ee7e84128764e 100644
--- a/apps/web/src/custom/designMode/engine/vendor/shared/guardrails.ts
+++ b/apps/web/src/custom/designMode/engine/vendor/shared/guardrails.ts
@@ -14,12 +14,19 @@
 // If you add a NEW way for queue markdown to reach an agent, it must carry these (or an
 // equivalent instruction wrapper) too.
 
-// "skip and report", never "pause": an unresolved (claimed-but-unmarked) item goes stale
-// after CLAIM_TIMEOUT_MS and gets re-delivered on a later watch cycle — a paused agent would
-// be re-asked the same question every few minutes. The command texts (server/setup.ts) spell
-// out the MCP mechanics: mark_applied status "failed", note "needs confirmation: <why>".
+// t3-fork: upstream scoped every edit to its call site and told the agent to SKIP anything
+// that would touch a shared component. In this fork that default is inverted: a designer who
+// selects a Button and nudges its padding almost always means "the Button", not "this one
+// button" — call-site-only scoping turned those edits into one-off className overrides that
+// drift from the design system. Scope is now a judgment call the agent makes from the
+// evidence the request already carries (the rendering component, the authored file, how
+// design-system-shaped the edit is). What survives from upstream is the no-pause rule
+// (a stalled agent re-asks the same question forever) — recast as "choose and disclose":
+// the agent states the scope it picked so the user can redirect a wrong guess. A faithful
+// re-sync would restore upstream's skip-and-report wording; a guard test pins this one
+// (forkDesignModeCssOrigin.test.ts).
 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.'
+  'Scope: for each edit, judge whether the user means the component everywhere or just this instance, and act on your best reading. Changes to the intrinsic look of a component (color, spacing, radius, typography) usually belong in the component or shared rule that renders the element, so every instance updates; edits tied to this particular spot in the layout belong at the call site. Prefer the project tokens and the suggested utilities over hard-coded values. Do not pause to ask — state which scope you chose in your reply so the user can redirect a wrong guess.'
 
 // 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.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6fe63b9e5071b..8b5a163b1f93c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -132,6 +132,9 @@ importers:
       '@t3tools/tailscale':
         specifier: workspace:*
         version: link:../../packages/tailscale
+      bippy:
+        specifier: ^0.5.41
+        version: 0.5.41(react@19.2.6)
       effect:
         specifier: 4.0.0-beta.103
         version: 4.0.0-beta.103(patch_hash=a18f963109656ddbeb2a99ca45f942ecf54830986259eb01ce6a970421c9c6a9)