@wcstack/devtools 1.33.0 → 2.1.0

package/dist/index.esm.js

@@ -11,7 +11,7 @@
 /** グローバル registry のプロパティ名 */
 const DEVTOOLS_HOOK_GLOBAL = "__WCSTACK_DEVTOOLS_HOOK__";
 /** プロトコル版。additive change では上げない（protocol §2） */
-const DEVTOOLS_PROTOCOL_VERSION = 1;
+const DEVTOOLS_PROTOCOL_VERSION = 2;
 
 /**
  * protocol/registry.ts
@@ -210,36 +210,44 @@ function formatArgs(args) {
  * 台帳はすべて devtools 側に置く（protocol 原則 2）。disconnect で
  * sources / roster / wiring をクリアし、残留参照を持たない。
  */
-/** 予約 state 名 prefix（protocol §5）。この prefix の要素・イベントは常に除外 */
-const RESERVED_STATE_NAME_PREFIX = "wcs-devtools";
 const DEFAULT_TIMELINE_CAPACITY = 500;
 /** 台帳キーの区切り文字（state 名・パスに現れ得ない NUL）。
  *  エスケープ表記でなく生成式にしているのは、ツーリングがソース中の
  *  `エスケープ列` リテラルを生バイトへ壊す事故が実際に起きたため。 */
 const NUL = String.fromCharCode(0);
-function pathKeyOf(stateName, path) {
-    return stateName + NUL + path;
+function pathKeyOf(path) {
+    return path;
 }
-function tokenKeyOf(stateName, kind, name) {
-    return stateName + NUL + kind + NUL + name;
+function tokenKeyOf(kind, name) {
+    return kind + NUL + name;
 }
-/** 宣言（stateName+path+propName）単位の attach キー。NUL 区切りは pathKeyOf と同じ理由 */
-function attachKeyOf(stateName, path, propName) {
-    return pathKeyOf(stateName, path) + NUL + propName;
+/** 宣言（path+propName）単位の attach キー。NUL 区切りは tokenKeyOf と同じ理由 */
+function attachKeyOf(path, propName) {
+    return path + NUL + propName;
+}
+/** roster 表示用のルート由来ラベル（v2: name 次元が無いのでルートで識別する） */
+function rootLabelOf(rootNode) {
+    if (typeof ShadowRoot !== "undefined" && rootNode instanceof ShadowRoot) {
+        return `<${rootNode.host.tagName.toLowerCase()}>`;
+    }
+    if (rootNode.nodeType === 9 /* DOCUMENT_NODE */) {
+        return "document";
+    }
+    return rootNode.nodeName.toLowerCase();
 }
 /** token カバレッジ 1 行の判定（§4: 空撃ちのみ / 一部空撃ち / 正常 / 未発火） */
-function tokenCoverageOf(stateName, kind, name, stat) {
+function tokenCoverageOf(kind, name, stat) {
     if (stat === undefined) {
-        return { stateName, kind, name, status: "never", count: 0, note: null };
+        return { kind, name, status: "never", count: 0, note: null };
     }
     if (stat.zeroSubscriberCount === stat.count) {
         return {
-            stateName, kind, name, status: "emitted-unheard", count: stat.count,
+            kind, name, status: "emitted-unheard", count: stat.count,
             note: `all ${stat.count} emit(s) had 0 subscribers`,
         };
     }
     return {
-        stateName, kind, name, status: "emitted", count: stat.count,
+        kind, name, status: "emitted", count: stat.count,
         note: stat.zeroSubscriberCount > 0
             ? `${stat.zeroSubscriberCount}/${stat.count} emit(s) had 0 subscribers`
             : null,
@@ -247,7 +255,6 @@ function tokenCoverageOf(stateName, kind, name, stat) {
 }
 class DevtoolsCore {
     _timelineCapacity;
-    _hiddenStateNames;
     _removeListener = null;
     _sources = new Map();
     _roster = new Map();
@@ -259,10 +266,14 @@ class DevtoolsCore {
     _changeListeners = new Set();
     /** 観測開始時刻（connect 時の performance.now。未接続は null）。 */
     _observingSince = null;
-    /** watch 発火回数（stateName + NUL + path → count）。カバレッジの実測面。 */
-    _watchFiredCounts = new Map();
-    /** token emit 実測（stateName + NUL + kind + NUL + name → 回数と空撃ち回数）。 */
-    _tokenEmitCounts = new Map();
+    /** watch 発火実測（path → ツリー別区分列）。カバレッジの実測面。
+     *  protocol v2 追補で payload がツリー識別（stateElement）を持つようになり、
+     *  複数ツリーが同名 watch パスを宣言するページでもツリー別に数えられる。
+     *  識別の無い旧 payload は null 区分に積み、どのツリーの照会にも合算で残す
+     *  （slice 29 non-blocking 記録の解消）。 */
+    _watchFiredStats = new Map();
+    /** token emit 実測（kind + NUL + name → ツリー別区分列）。上の追補注記と同じ。 */
+    _tokenEmitStats = new Map();
     /** 観測開始以降に一度でも attach を観測した宣言キー（attachKeyOf）。
      *  live 配線台帳は WeakRef pruning / binding-removed で縮むため、binding
      *  カバレッジの attached 判定はこちらで行う（瞬間値で判定すると行の
@@ -270,7 +281,6 @@ class DevtoolsCore {
     _everAttachedKeys = new Set();
     constructor(options) {
         this._timelineCapacity = options?.timelineCapacity ?? DEFAULT_TIMELINE_CAPACITY;
-        this._hiddenStateNames = new Set(options?.hiddenStateNames ?? []);
     }
     get connected() {
         return this._removeListener !== null;
@@ -281,13 +291,6 @@ class DevtoolsCore {
     set paused(value) {
         this._paused = value;
     }
-    /** 表示から除外する state 名か（予約 prefix + hiddenStateNames、protocol §5） */
-    isHiddenStateName(name) {
-        if (name === null) {
-            return false;
-        }
-        return name.startsWith(RESERVED_STATE_NAME_PREFIX) || this._hiddenStateNames.has(name);
-    }
     connect() {
         if (this._removeListener !== null) {
             return;
@@ -325,8 +328,8 @@ class DevtoolsCore {
         this._wiringByPathKey.clear();
         this._wiringEntryByBinding = new WeakMap();
         this._observingSince = null;
-        this._watchFiredCounts.clear();
-        this._tokenEmitCounts.clear();
+        this._watchFiredStats.clear();
+        this._tokenEmitStats.clear();
         this._everAttachedKeys.clear();
         this._notify("sources");
         this._notify("roster");
@@ -367,13 +370,22 @@ class DevtoolsCore {
         this._timeline = [];
         this._notify("timeline");
     }
-    /** 指定パスに束縛された配線（生存している binding のみ） */
-    getWiringForPath(stateName, path) {
-        const set = this._wiringByPathKey.get(pathKeyOf(stateName, path));
+    /**
+     * 指定パスに束縛された配線（生存している binding のみ）。
+     * stateElement を渡すとそのツリーの配線だけに絞る（v2 は名前次元が無いため、
+     * 複数ツリーの同名パスは要素同一性で区別する）。stateElement を持たない
+     * 旧 payload 由来の entry は絞り込みでも残す（欠測を欠落にしない）。
+     */
+    getWiringForPath(path, stateElement) {
+        const set = this._wiringByPathKey.get(pathKeyOf(path));
         if (set === undefined) {
             return [];
         }
-        return this._collectAlive(set);
+        const alive = this._collectAlive(set);
+        if (stateElement === undefined) {
+            return alive;
+        }
+        return alive.filter((entry) => entry.stateElementRef === null || entry.stateElementRef.deref() === stateElement);
     }
     /** 全配線のスナップショット（生存している binding のみ） */
     getAllWiring() {
@@ -421,10 +433,7 @@ class DevtoolsCore {
             }
             for (const root of roots) {
                 for (const declared of source.getDeclaredBindings(root)) {
-                    if (this.isHiddenStateName(declared.stateName)) {
-                        continue;
-                    }
-                    const key = [declared.stateName, declared.statePathName, declared.propName,
+                    const key = [declared.statePathName, declared.propName,
                         declared.bindingType, declared.origin, declared.raw].join(NUL);
                     if (seen.has(key)) {
                         continue;
@@ -440,16 +449,26 @@ class DevtoolsCore {
      * 配線カバレッジ（§4）: 宣言面（watchPaths / token 宣言 / canonical declared）と
      * 実測面（watch-fired・token-emit の台帳・live 配線台帳）の突合。
      * 「観測開始以降」の実測であることは observingSince を UI が常時表示して明示する。
+     *
+     * watch / token の実測は各行の属するツリー（roster entry の element）でスコープする
+     * （protocol v2 追補 — 複数ツリーの同名宣言を合算しない）。ツリー識別の無い
+     * 旧 payload 由来の実測はどの行にも合算で残す（欠測を欠落にしない）。
+     * stateElement を渡すとそのツリーの宣言行だけに絞る（getWiringForPath と同じ流儀）。
+     * binding 節（canonical declared × ever-attach）は宣言・実測ともツリー識別を
+     * 持たないため絞り込みの対象外。
      */
-    getCoverageReport() {
+    getCoverageReport(stateElement) {
         const out = [];
         for (const entry of this.getRoster()) {
             const summary = entry.summary;
-            // --- watch: 宣言（watchPaths）× 実測（watch-fired 台帳） ---
+            if (stateElement !== undefined && summary.element !== stateElement) {
+                continue;
+            }
+            // --- watch: 宣言（watchPaths）× 実測（watch-fired 台帳・自ツリー + 旧 payload 合算） ---
             for (const path of summary.watchPaths ?? []) {
-                const count = this._watchFiredCounts.get(pathKeyOf(entry.name, path)) ?? 0;
+                const count = this._measuredFor(this._watchFiredStats, pathKeyOf(path), summary.element)?.count ?? 0;
                 if (count > 0) {
-                    out.push({ stateName: entry.name, kind: "watch", name: path, status: "fired", count, note: null });
+                    out.push({ kind: "watch", name: path, status: "fired", count, note: null });
                     continue;
                 }
                 // ワイルドカード行 watch に**リスト書き込み**が届く前提 = 各 `.*` 階層の
@@ -473,23 +492,23 @@ class DevtoolsCore {
                 }
                 if (missingList !== null) {
                     out.push({
-                        stateName: entry.name, kind: "watch", name: path, status: "prerequisite-missing", count: 0,
+                        kind: "watch", name: path, status: "prerequisite-missing", count: 0,
                         note: keyedKnown
                             ? `list "${missingList}" has no for binding and no $listKeys declaration — list writes never reach its rows (only explicit-index writes can fire this watch)`
                             : `no for binding observed for list "${missingList}" (a $listKeys declaration would still let list writes fire it)`,
                     });
                     continue;
                 }
-                out.push({ stateName: entry.name, kind: "watch", name: path, status: "never", count: 0, note: null });
+                out.push({ kind: "watch", name: path, status: "never", count: 0, note: null });
             }
             // --- token: 宣言（commandTokenNames / eventTokenNames）× 実測（emit 台帳）。
             // subscriberCount 0 = 空撃ち（§4）: 全 emit が空撃ちなら emitted-unheard として
             // 警告する（emit 側だけ配線されて受け手が一つも居ない構成ミスの検出）。 ---
             for (const name of summary.commandTokenNames) {
-                out.push(tokenCoverageOf(entry.name, "command", name, this._tokenEmitCounts.get(tokenKeyOf(entry.name, "command", name))));
+                out.push(tokenCoverageOf("command", name, this._measuredFor(this._tokenEmitStats, tokenKeyOf("command", name), summary.element)));
             }
             for (const name of summary.eventTokenNames) {
-                out.push(tokenCoverageOf(entry.name, "eventToken", name, this._tokenEmitCounts.get(tokenKeyOf(entry.name, "event", name))));
+                out.push(tokenCoverageOf("eventToken", name, this._measuredFor(this._tokenEmitStats, tokenKeyOf("event", name), summary.element)));
             }
         }
         // --- binding: canonical declared（宣言）× live 配線台帳（実測）。canonical が
@@ -504,7 +523,7 @@ class DevtoolsCore {
                     continue;
                 if (decl.propName.startsWith("eventToken."))
                     continue;
-                const key = attachKeyOf(decl.stateName, decl.statePathName, decl.propName);
+                const key = attachKeyOf(decl.statePathName, decl.propName);
                 if (seen.has(key))
                     continue;
                 seen.add(key);
@@ -512,7 +531,7 @@ class DevtoolsCore {
                 // 破棄や GC（WeakRef pruning）で縮むため、瞬間値だと逆戻りする。
                 const attached = this._everAttachedKeys.has(key);
                 out.push({
-                    stateName: decl.stateName, kind: "binding",
+                    kind: "binding",
                     name: `${decl.propName} ← ${decl.statePathName}`,
                     status: attached ? "attached" : "never-attached",
                     count: attached ? 1 : 0,
@@ -528,21 +547,33 @@ class DevtoolsCore {
         if (source === undefined || typeof source.keys !== "function") {
             return [];
         }
-        return source.keys(entry.name, entry.rootNode);
+        return source.keys(entry.rootNode);
+    }
+    /**
+     * roster entry のツリーに載るマウント記録（overlays — protocol v2・D20 の可視化）。
+     * overlays を実装しないランタイム（v2 より前）では null — UI はセクションごと
+     * 出さない（後方互換）。マウントが無いツリーは空配列。
+     */
+    overlaysOf(entry) {
+        const source = this._sources.get(entry.sourceId);
+        if (source === undefined || typeof source.overlays !== "function") {
+            return null;
+        }
+        return source.overlays(entry.rootNode);
     }
     readValue(entry, path, indexes) {
         const source = this._sources.get(entry.sourceId);
         if (source === undefined) {
             return undefined;
         }
-        return source.read(entry.name, entry.rootNode, path, indexes);
+        return source.read(entry.rootNode, path, indexes);
     }
     writeValue(entry, path, value, indexes) {
         const source = this._sources.get(entry.sourceId);
         if (source === undefined) {
             return;
         }
-        source.write(entry.name, entry.rootNode, path, value, indexes);
+        source.write(entry.rootNode, path, value, indexes);
     }
     // --- internal ---
     _notify(kind) {
@@ -552,19 +583,74 @@ class DevtoolsCore {
     }
     _refreshRosterOf(source) {
         const entries = [];
+        const labelCounts = new Map();
         for (const summary of source.getStateElements()) {
-            if (this.isHiddenStateName(summary.name)) {
-                continue;
-            }
+            const base = rootLabelOf(summary.rootNode);
+            const seen = (labelCounts.get(base) ?? 0) + 1;
+            labelCounts.set(base, seen);
             entries.push({
                 sourceId: source.id,
-                name: summary.name,
+                label: seen === 1 ? base : `${base}#${seen}`,
                 rootNode: summary.rootNode,
                 summary,
             });
         }
         this._roster.set(source.id, entries);
     }
+    /**
+     * key の実測台帳から stateElement 区分の stat を探すか作る（ingest 用）。
+     * payload の stateElement がオブジェクトでない（旧 payload / 直接生成 token）
+     * ときは null 区分 = 全ツリー合算面に積む。
+     */
+    _statFor(map, key, stateElement) {
+        let entries = map.get(key);
+        if (entries === undefined) {
+            entries = [];
+            map.set(key, entries);
+        }
+        const element = typeof stateElement === "object" && stateElement !== null ? stateElement : null;
+        for (const entry of entries) {
+            if (element === null ? entry.stateElementRef === null : entry.stateElementRef?.deref() === element) {
+                return entry;
+            }
+        }
+        const created = {
+            stateElementRef: element === null ? null : new WeakRef(element),
+            count: 0,
+            zeroSubscriberCount: 0,
+        };
+        entries.push(created);
+        return created;
+    }
+    /**
+     * key の実測を element のツリーへスコープして集計する（照会用）。
+     * null 区分（ツリー識別の無い旧 payload）は常に合算に含める。GC 済みツリーの
+     * 区分は遅延剪定（wiring 台帳の WeakRef pruning と同じ）。実測ゼロは undefined
+     * （= 宣言だけあって一度も観測していない）に畳む。
+     */
+    _measuredFor(map, key, element) {
+        const entries = map.get(key);
+        if (entries === undefined) {
+            return undefined;
+        }
+        let count = 0;
+        let zeroSubscriberCount = 0;
+        for (let i = entries.length - 1; i >= 0; i--) {
+            const ref = entries[i].stateElementRef;
+            if (ref !== null && ref.deref() === undefined) {
+                entries.splice(i, 1);
+                continue;
+            }
+            if (ref === null || ref.deref() === element) {
+                count += entries[i].count;
+                zeroSubscriberCount += entries[i].zeroSubscriberCount;
+            }
+        }
+        if (entries.length === 0) {
+            map.delete(key);
+        }
+        return count === 0 ? undefined : { count, zeroSubscriberCount };
+    }
     _collectAlive(set) {
         const alive = [];
         for (const entry of set) {
@@ -600,9 +686,6 @@ class DevtoolsCore {
     _ingest(sourceId, event) {
         switch (event.type) {
             case "state:element-registered": {
-                if (this.isHiddenStateName(event.name)) {
-                    return;
-                }
                 const source = this._sources.get(sourceId);
                 if (source !== undefined) {
                     this._refreshRosterOf(source);
@@ -611,17 +694,13 @@ class DevtoolsCore {
                 this._appendTimeline({
                     sourceId,
                     kind: "element-registered",
-                    stateName: event.name,
-                    label: event.name,
+                    label: rootLabelOf(event.rootNode),
                     detail: "",
                     subscriberCount: null,
                 });
                 return;
             }
             case "state:element-unregistered": {
-                if (this.isHiddenStateName(event.name)) {
-                    return;
-                }
                 const source = this._sources.get(sourceId);
                 if (source !== undefined) {
                     this._refreshRosterOf(source);
@@ -630,25 +709,19 @@ class DevtoolsCore {
                 this._appendTimeline({
                     sourceId,
                     kind: "element-unregistered",
-                    stateName: event.name,
-                    label: event.name,
+                    label: rootLabelOf(event.rootNode),
                     detail: "",
                     subscriberCount: null,
                 });
                 return;
             }
             case "state:write": {
-                const stateName = event.absoluteAddress.absolutePathInfo.stateName;
-                if (this.isHiddenStateName(stateName)) {
-                    return;
-                }
                 const detail = event.hasOldValue
                     ? `${formatValue(event.value)} (was ${formatValue(event.oldValue)})`
                     : formatValue(event.value);
                 this._appendTimeline({
                     sourceId,
                     kind: "write",
-                    stateName,
                     label: this._labelOf(event.absoluteAddress),
                     detail,
                     subscriberCount: null,
@@ -659,9 +732,6 @@ class DevtoolsCore {
                 const labels = [];
                 let total = 0;
                 for (const address of event.addresses) {
-                    if (this.isHiddenStateName(address.absolutePathInfo.stateName)) {
-                        continue;
-                    }
                     total++;
                     if (labels.length < 3) {
                         labels.push(this._labelOf(address));
@@ -674,7 +744,6 @@ class DevtoolsCore {
                 this._appendTimeline({
                     sourceId,
                     kind: "batch",
-                    stateName: null,
                     label: `${total} address${total === 1 ? "" : "es"}`,
                     detail: `${labels.join(", ")}${rest}`,
                     subscriberCount: null,
@@ -682,29 +751,28 @@ class DevtoolsCore {
                 return;
             }
             case "state:binding-added": {
-                const stateName = event.absoluteAddress.absolutePathInfo.stateName;
-                if (this.isHiddenStateName(stateName)) {
-                    return;
-                }
                 const path = event.absoluteAddress.absolutePathInfo.pathInfo.path;
-                const key = pathKeyOf(stateName, path);
+                const key = pathKeyOf(path);
                 let set = this._wiringByPathKey.get(key);
                 if (set === undefined) {
                     set = new Set();
                     this._wiringByPathKey.set(key, set);
                 }
+                const stateElement = event.absoluteAddress.absolutePathInfo.stateElement;
                 const entry = {
                     sourceId,
-                    stateName,
                     path,
                     propName: event.binding.propName,
                     bindingType: event.binding.bindingType,
                     bindingRef: new WeakRef(event.binding),
+                    stateElementRef: typeof stateElement === "object" && stateElement !== null
+                        ? new WeakRef(stateElement)
+                        : null,
                 };
                 set.add(entry);
                 this._wiringEntryByBinding.set(event.binding, entry);
                 // カバレッジの実測面（B2）: attach の観測を ever 台帳へ積む（remove では消さない）
-                this._everAttachedKeys.add(attachKeyOf(stateName, path, event.binding.propName));
+                this._everAttachedKeys.add(attachKeyOf(path, event.binding.propName));
                 this._notify("wiring");
                 this._notify("coverage");
                 return;
@@ -715,7 +783,7 @@ class DevtoolsCore {
                     return;
                 }
                 this._wiringEntryByBinding.delete(event.binding);
-                const key = pathKeyOf(entry.stateName, entry.path);
+                const key = pathKeyOf(entry.path);
                 const set = this._wiringByPathKey.get(key);
                 if (set !== undefined) {
                     set.delete(entry);
@@ -727,41 +795,26 @@ class DevtoolsCore {
                 return;
             }
             case "state:binding-cleared": {
-                const stateName = event.absoluteAddress.absolutePathInfo.stateName;
                 const path = event.absoluteAddress.absolutePathInfo.pathInfo.path;
-                const key = pathKeyOf(stateName, path);
+                const key = pathKeyOf(path);
                 if (this._wiringByPathKey.delete(key)) {
                     this._notify("wiring");
                 }
                 return;
             }
             case "state:token-emit": {
-                if (this.isHiddenStateName(event.stateName)) {
-                    return;
-                }
-                // カバレッジの実測面: emit 回数と空撃ち回数を台帳に積む（§4）。
-                // stateName が null の emit はどの宣言とも突合できないため積まない。
-                if (event.stateName !== null) {
-                    const emitKey = tokenKeyOf(event.stateName, event.kind, event.tokenName);
-                    const stat = this._tokenEmitCounts.get(emitKey);
-                    if (stat === undefined) {
-                        this._tokenEmitCounts.set(emitKey, {
-                            count: 1,
-                            zeroSubscriberCount: event.subscriberCount === 0 ? 1 : 0,
-                        });
-                    }
-                    else {
-                        stat.count += 1;
-                        if (event.subscriberCount === 0) {
-                            stat.zeroSubscriberCount += 1;
-                        }
-                    }
-                    this._notify("coverage");
+                // カバレッジの実測面: emit 回数と空撃ち回数を、発火元ツリー
+                // （payload の stateElement — protocol v2 追補）別の区分に積む（§4）。
+                // 識別の無い旧 payload は null 区分 = 全ツリー合算面へ。
+                const stat = this._statFor(this._tokenEmitStats, tokenKeyOf(event.kind, event.tokenName), event.stateElement);
+                stat.count += 1;
+                if (event.subscriberCount === 0) {
+                    stat.zeroSubscriberCount += 1;
                 }
+                this._notify("coverage");
                 this._appendTimeline({
                     sourceId,
                     kind: event.kind,
-                    stateName: event.stateName,
                     label: event.tokenName,
                     detail: formatArgs(event.args),
                     subscriberCount: event.subscriberCount,
@@ -769,26 +822,19 @@ class DevtoolsCore {
                 return;
             }
             case "state:watch-fired": {
-                if (this.isHiddenStateName(event.stateName)) {
-                    return;
-                }
                 // timeline 行にはしない（発火は高頻度になりうる活動でありカバレッジが受け皿）。
-                const firedKey = pathKeyOf(event.stateName, event.path);
-                this._watchFiredCounts.set(firedKey, (this._watchFiredCounts.get(firedKey) ?? 0) + 1);
+                // 発火元ツリー（payload の stateElement — protocol v2 追補）別に数える。
+                this._statFor(this._watchFiredStats, pathKeyOf(event.path), event.stateElement).count += 1;
                 this._notify("coverage");
                 return;
             }
             case "state:watch-error": {
-                if (this.isHiddenStateName(event.stateName)) {
-                    return;
-                }
                 // ランタイム側は例外を握って drain を守るため、ここに出ないと失敗が
                 // どこにも現れない（console を見ていない限り）。phase を detail の先頭に
                 // 置くのは、getter の評価失敗とハンドラの失敗で直し方が違うため。
                 this._appendTimeline({
                     sourceId,
                     kind: "watch-error",
-                    stateName: event.stateName,
                     label: event.path,
                     detail: `${event.phase}: ${formatError(event.error)}`,
                     subscriberCount: null,
@@ -799,9 +845,7 @@ class DevtoolsCore {
                 this._appendTimeline({
                     sourceId,
                     kind: "watch-chain-limit",
-                    stateName: null,
-                    // 打ち切りはバッチ単位で state 名を持たない（複数 state のアドレスが
-                    // 載りうる）ため、hidden 判定はここでは行わない。
+                    // 打ち切りはバッチ単位（複数ツリーのアドレスが載りうる）— 行の主語は深さ上限
                     label: `depth > ${event.maxDepth}`,
                     detail: event.paths.join(", "),
                     subscriberCount: null,
@@ -809,15 +853,11 @@ class DevtoolsCore {
                 return;
             }
             case "state:path-unresolved": {
-                if (this.isHiddenStateName(event.stateName)) {
-                    return;
-                }
                 // ランタイムは warn で続行する（既存ページを止めないため）。lint を
                 // 走らせていない相手には、ここが「配線が死んでいる」唯一の可視面になる。
                 this._appendTimeline({
                     sourceId,
                     kind: "path-unresolved",
-                    stateName: event.stateName,
                     label: event.path,
                     detail: `${event.source}: "${event.missingSegment}" is not declared`,
                     subscriberCount: null,
@@ -825,15 +865,11 @@ class DevtoolsCore {
                 return;
             }
             case "state:binding-apply-error": {
-                if (this.isHiddenStateName(event.stateName)) {
-                    return;
-                }
                 // 隔離された適用失敗。bindingType を detail 先頭に置くのは、構造
                 // （for / if）の失敗と値の失敗で影響範囲が違うため。
                 this._appendTimeline({
                     sourceId,
                     kind: "binding-apply-error",
-                    stateName: event.stateName,
                     label: event.path,
                     detail: `${event.bindingType}: ${formatError(event.error)}`,
                     subscriberCount: null,
@@ -841,12 +877,10 @@ class DevtoolsCore {
                 return;
             }
             case "propagation:suppressed": {
-                // two-way エコーの辺単位抑止。state 名を持たない（node+member が主語）
-                // ため hidden 判定はここでは行わない。
+                // two-way エコーの辺単位抑止（主語は node + member — パスではない）
                 this._appendTimeline({
                     sourceId,
                     kind: "propagation-suppressed",
-                    stateName: null,
                     label: event.member,
                     detail: `${event.reason} (tx ${event.transactionId}, edge ${event.edgeId})`,
                     subscriberCount: null,
@@ -854,14 +888,9 @@ class DevtoolsCore {
                 return;
             }
             case "propagation:coalesced": {
-                const stateName = event.absoluteAddress.absolutePathInfo.stateName;
-                if (this.isHiddenStateName(stateName)) {
-                    return;
-                }
                 this._appendTimeline({
                     sourceId,
                     kind: "propagation-coalesced",
-                    stateName,
                     label: this._labelOf(event.absoluteAddress),
                     detail: `tx ${event.droppedTransactionId} dropped (winner tx ${event.winnerTransactionId})`,
                     subscriberCount: null,
@@ -869,14 +898,9 @@ class DevtoolsCore {
                 return;
             }
             case "propagation:hop-limit": {
-                const stateName = event.absoluteAddress.absolutePathInfo.stateName;
-                if (this.isHiddenStateName(stateName)) {
-                    return;
-                }
                 this._appendTimeline({
                     sourceId,
                     kind: "propagation-hop-limit",
-                    stateName,
                     label: this._labelOf(event.absoluteAddress),
                     detail: `hop ${event.hop} (tx ${event.transactionId})`,
                     subscriberCount: null,
@@ -894,7 +918,6 @@ class DevtoolsCore {
                 this._appendTimeline({
                     sourceId,
                     kind: "contract-drift",
-                    stateName: null,
                     label: event.tag,
                     detail: `${event.reason}${memberPart}${eventPart}`,
                     subscriberCount: null,
@@ -922,7 +945,7 @@ class DevtoolsCore {
  * 「宣言レベルの配線ビュー」を組む。ライブ台帳と違い binding 実体・
  * 接続状態は分からない（UI では "declared" バッジで区別する）。
  *
- * パースは表示目的の簡易版（`prop[#mod]: path[@state][|filters]` を
+ * パースは表示目的の簡易版（`prop[#mod]: path[|filters]` を
  * `;` 区切りで分解するだけ）。正確なセマンティクスの正本は
  * @wcstack/state の bindTextParser であり、ここでは追随しない。
  */
@@ -943,18 +966,13 @@ function parseEntry(element, raw, origin) {
         return null;
     }
     const [pathPart, ...filterParts] = rhs.split("|").map((part) => part.trim());
-    let path = pathPart;
-    let stateName = "default";
-    const at = pathPart.lastIndexOf("@");
-    if (at > 0) {
-        path = pathPart.slice(0, at).trim();
-        stateName = pathPart.slice(at + 1).trim();
-    }
+    // v2: `@name` セレクタは撤去済み（ランタイムは parse error にする）。
+    // 簡易パーサはパスをそのまま流す — 壊れた宣言の可視化はランタイム側の役目。
+    const path = pathPart;
     return {
         element,
         propName,
         path,
-        stateName,
         filters: filterParts.filter((part) => part.length > 0),
         origin,
         raw: trimmed,
@@ -1108,6 +1126,11 @@ header .spacer { flex: 1; }
 .notice { color: #efe3a0; padding: 2px 0 6px; }
 .notice button { font: inherit; margin-left: 6px; cursor: pointer; }
 .wiring-row .detail { color: #6f88a3; }
+.overlays-heading { margin-top: 10px; }
+.overlay-row { padding: 1px 0; white-space: nowrap; }
+.overlay-row .prop { color: #b7f0c0; }
+.overlay-row .path { color: #9fd0ff; }
+.overlay-row .detail { color: #6f88a3; }
 .wiring-tabs { padding: 0 0 4px; }
 .wiring-tabs button { font: inherit; cursor: pointer; margin-right: 4px; opacity: 0.6; }
 .wiring-tabs button.active { opacity: 1; font-weight: bold; }
@@ -1178,13 +1201,8 @@ class WcsDevtools extends HTMLElement {
             this._buildShadow();
         }
         const capacity = Number(this.getAttribute("buffer") ?? "");
-        const hidden = (this.getAttribute("hidden-states") ?? "")
-            .split(",")
-            .map((name) => name.trim())
-            .filter((name) => name.length > 0);
         this._core = new DevtoolsCore({
             timelineCapacity: Number.isFinite(capacity) && capacity > 0 ? capacity : undefined,
-            hiddenStateNames: hidden,
         });
         this._removeCoreListener = this._core.onChange((kind) => {
             if (kind === "roster" || kind === "sources") {
@@ -1461,7 +1479,7 @@ class WcsDevtools extends HTMLElement {
         }
     }
     _rosterKey(entry) {
-        return `${entry.sourceId}:${entry.name}`;
+        return `${entry.sourceId}:${entry.label}`;
     }
     _selectedRoster() {
         const core = this._core;
@@ -1481,7 +1499,7 @@ class WcsDevtools extends HTMLElement {
         select.replaceChildren(...roster.map((entry) => {
             const option = document.createElement("option");
             option.value = this._rosterKey(entry);
-            option.textContent = `${entry.name} (${entry.sourceId.slice(0, 12)})`;
+            option.textContent = `${entry.label} (${entry.sourceId.slice(0, 12)})`;
             option.selected = selected !== null && this._rosterKey(entry) === this._rosterKey(selected);
             return option;
         }));
@@ -1494,11 +1512,73 @@ class WcsDevtools extends HTMLElement {
         const keys = core.keysOf(selected);
         if (keys.length === 0) {
             body.append(this._emptyRow("no readable keys (runtime without keys() API?)"));
+            // keys が読めないランタイムでも overlays は独立に読める可能性があるため出す
+            this._renderOverlaysSection(body, selected);
             return;
         }
         for (const key of keys) {
             this._renderTreeNode(body, selected, { path: key, indexes: [] }, key, 0);
         }
+        this._renderOverlaysSection(body, selected);
+    }
+    /**
+     * 選択ツリーのマウント記録セクション（overlays — protocol v2・D20 の可視化）。
+     * マウントの私有キー・getter はオーバーレイ専用アドレス空間（マーカー `#m<id>`）に
+     * 住み、上の状態ツリー（keys/read）には現れないため、ここが唯一の可視面。
+     * overlays 未提供の旧ランタイム（null）ではセクションごと出さない（後方互換）。
+     * マウント無し（空配列）も見出しだけ残さない。pull は State ペインの再描画
+     * （roster / sources 変更・ツリー切替）にそのまま乗る — 専用 polling は足さない
+     * （観測者効果の排除、devtools-tag-design.md の rAF 合流と同じ姿勢）。
+     */
+    _renderOverlaysSection(body, entry) {
+        const overlays = this._core.overlaysOf(entry);
+        if (overlays === null || overlays.length === 0) {
+            return;
+        }
+        const heading = document.createElement("h3");
+        heading.className = "overlays-heading";
+        heading.textContent = `Overlays (${overlays.length} mount${overlays.length === 1 ? "" : "s"})`;
+        body.append(heading);
+        for (const overlay of overlays) {
+            body.append(this._overlayRow(overlay));
+        }
+    }
+    /** マウント記録 1 件の描画（マーカー・コンポーネント・マウント表・私有面）。 */
+    _overlayRow(overlay) {
+        const row = document.createElement("div");
+        row.className = "overlay-row";
+        const marker = document.createElement("span");
+        marker.className = "badge-tag";
+        marker.textContent = overlay.marker;
+        const tag = document.createElement("span");
+        tag.className = "prop";
+        tag.textContent = `<${overlay.componentTag}>`;
+        const prop = document.createElement("span");
+        prop.className = "path";
+        // stateProp はホスト側の `state[.sub]:` 宣言の書き手語彙
+        prop.textContent = overlay.stateProp;
+        row.append(marker, document.createTextNode(" "), tag, document.createTextNode(" "), prop);
+        const details = [];
+        for (const entry of overlay.mountTable) {
+            // 内側接頭辞が空 = ルートエントリ。外側パスへの対応で読ませる
+            details.push(`${entry.inner === "" ? "(root)" : entry.inner} → ${entry.outer}`);
+        }
+        if (overlay.delta > 0) {
+            details.push(`Δ${overlay.delta}`);
+        }
+        if (overlay.privateKeys.length > 0) {
+            details.push(`private: ${overlay.privateKeys.join(", ")}`);
+        }
+        if (overlay.getterKeys.length > 0) {
+            details.push(`getters: ${overlay.getterKeys.join(", ")}`);
+        }
+        if (details.length > 0) {
+            const detail = document.createElement("span");
+            detail.className = "detail";
+            detail.textContent = ` ${details.join(" · ")}`;
+            row.append(detail);
+        }
+        return row;
     }
     _renderTreeNode(container, entry, ref, label, depth) {
         const core = this._core;
@@ -1632,8 +1712,9 @@ class WcsDevtools extends HTMLElement {
         }
         else if (this._selectedPath !== null) {
             const selected = this._selectedRoster();
+            // 選択中のツリーでスコープ（複数ツリーの同名パスを混ぜない）
             entries =
-                selected !== null ? core.getWiringForPath(selected.name, this._selectedPath) : [];
+                selected !== null ? core.getWiringForPath(this._selectedPath, selected.summary.element) : [];
             contextLabel = this._selectedPath;
         }
         else {
@@ -1701,7 +1782,10 @@ class WcsDevtools extends HTMLElement {
             ? "not observing"
             : `observing since ${sinceLabel} (declared vs measured after this point)`;
         body.append(info);
-        const report = core.getCoverageReport();
+        // 選択中のツリーでスコープ（複数ツリーの同名 watch パス / token 名を混ぜない —
+        // wiring のパス文脈と同じ流儀。protocol v2 追補のツリー識別が実測面を分ける）
+        const selected = this._selectedRoster();
+        const report = core.getCoverageReport(selected?.summary.element);
         if (report.length === 0) {
             body.append(this._emptyRow("nothing declared to cover"));
             return;
@@ -1726,7 +1810,7 @@ class WcsDevtools extends HTMLElement {
             }
             const label = document.createElement("span");
             label.className = "path";
-            label.textContent = ` ${entry.name}@${entry.stateName} `;
+            label.textContent = ` ${entry.name} `;
             row.append(kind, document.createTextNode(" "), label, status);
             if (entry.note !== null) {
                 // note はホバー頼み（title）にせず常時表示する — 前提未成立の理由は
@@ -1752,7 +1836,7 @@ class WcsDevtools extends HTMLElement {
         const path = document.createElement("span");
         path.className = "path";
         const filters = entry.outFilters.map((f) => ` | ${f.filterName}(${f.args.join(",")})`).join("");
-        path.textContent = `${entry.statePathName}@${entry.stateName}${filters}`;
+        path.textContent = `${entry.statePathName}${filters}`;
         row.append(type, document.createTextNode(" "), prop, document.createTextNode(" ← "), path);
         if (entry.node !== null) {
             const target = entry.node;
@@ -1781,7 +1865,7 @@ class WcsDevtools extends HTMLElement {
         const arrow = document.createTextNode(" ← ");
         const path = document.createElement("span");
         path.className = "path";
-        path.textContent = `${entry.path}@${entry.stateName}`;
+        path.textContent = entry.path;
         const type = document.createElement("span");
         type.className = "badge-tag";
         type.textContent = entry.bindingType;
@@ -1805,7 +1889,7 @@ class WcsDevtools extends HTMLElement {
         prop.textContent = entry.propName;
         const path = document.createElement("span");
         path.className = "path";
-        path.textContent = `${entry.path}@${entry.stateName}`;
+        path.textContent = entry.path;
         row.append(type, document.createTextNode(" "), prop, document.createTextNode(" ← "), path);
         row.addEventListener("click", () => {
             this._highlightNodes([entry.element]);
@@ -1870,8 +1954,7 @@ class WcsDevtools extends HTMLElement {
         }
         const label = document.createElement("span");
         label.className = "label";
-        const stateName = entry.stateName !== null ? `@${entry.stateName}` : "";
-        label.textContent = ` ${entry.label}${stateName} `;
+        label.textContent = ` ${entry.label} `;
         const detail = document.createElement("span");
         detail.className = "detail";
         detail.textContent = entry.detail;
@@ -1888,7 +1971,7 @@ class WcsDevtools extends HTMLElement {
     _highlightPath(entry, path) {
         const core = this._core;
         const nodes = [];
-        for (const wiring of core.getWiringForPath(entry.name, path)) {
+        for (const wiring of core.getWiringForPath(path, entry.summary.element)) {
             const binding = wiring.bindingRef.deref();
             if (binding !== undefined) {
                 nodes.push(binding.node, binding.replaceNode);
@@ -1954,5 +2037,5 @@ function bootstrapDevtools() {
     }
 }
 
-export { DEVTOOLS_HOOK_GLOBAL, DEVTOOLS_PROTOCOL_VERSION, DevtoolsCore, RESERVED_STATE_NAME_PREFIX, WcsDevtools, bootstrapDevtools, formatArgs, formatValue, getOrCreateHookRegistry, scanDeclaredBindings };
+export { DEVTOOLS_HOOK_GLOBAL, DEVTOOLS_PROTOCOL_VERSION, DevtoolsCore, WcsDevtools, bootstrapDevtools, formatArgs, formatValue, getOrCreateHookRegistry, scanDeclaredBindings };
 //# sourceMappingURL=index.esm.js.map