@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/dist/panelInspectorView.js

@@ -1,24 +1,29 @@
 import { labelNode, labelResource } from "./panelDomHelpers.js";
 import { createPanelIcon } from "./panelIcons.js";
-import { resolveSelectedDetail } from "./panelSelection.js";
-import { createRelationButton, formatEstimatedBytes, formatResourceDescriptor, groupPath, resourceLabel, } from "./panelWorkbenchHelpers.js";
+import { RawDetailView } from "./panelRawView.js";
+import { resolveNodeSelection, resolveSelectedCanonicalDetail } from "./panelSelection.js";
+import { createRelationButton, formatEstimatedBytes, formatResourceDescriptor, formatTimingCoverage, enableTabKeyboard, writeClipboardText, selectionKey, groupPath, resourceLabel, } from "./panelWorkbenchHelpers.js";
 function formatAccessFacts(access) {
     return [
         access.mode, access.access,
-        ...(access.mode === 'write' ? [access.contents, `producesValue: ${access.producesValue}`] : []),
+        ...(access.mode === 'write' ? [access.contents, access.producesValue ? 'produces a value' : 'does not produce a value'] : []),
         ...(access.bufferRange ? [`bytes ${access.bufferRange.offset}–${access.bufferRange.size === undefined ? 'end' : access.bufferRange.offset + access.bufferRange.size}`] : []),
-        ...(access.textureRegion ? [JSON.stringify(access.textureRegion)] : []),
+        ...(access.textureRegion ? [formatTextureRegion(access.textureRegion)] : []),
         ...(access.textureViewId ? [`view ${access.textureViewId}`] : []),
     ].join(' · ');
 }
+function formatTextureRegion(region) {
+    const end = (start, count) => start === undefined ? 'unknown' : count === undefined ? `${start}–end` : `${start}–${start + count - 1}`;
+    return `mip ${end(region.baseMipLevel, region.mipLevelCount)} · ${region.baseDepthSlice === undefined
+        ? `layers ${end(region.baseArrayLayer, region.arrayLayerCount)}`
+        : `depth ${end(region.baseDepthSlice, region.depthSliceCount)}`} · aspect ${region.aspect}`;
+}
 function formatRootRange(root) {
     if (!root.range)
         return 'Range unavailable';
     if (root.range.kind === 'buffer')
         return `bytes ${root.range.offset}–${root.range.offset + root.range.size}`;
-    return root.range.regions.map((region) => `mip ${region.baseMipLevel}+${region.mipLevelCount} · ${region.baseDepthSlice === undefined
-        ? `layers ${region.baseArrayLayer}+${region.arrayLayerCount}`
-        : `depth ${region.baseDepthSlice}+${region.depthSliceCount}`} · ${region.aspect}`).join('; ');
+    return root.range.regions.map(formatTextureRegion).join('; ');
 }
 export class InspectorView {
     callbacks;
@@ -31,8 +36,9 @@ export class InspectorView {
     snapshot;
     selected;
     activeTab = 'summary';
-    open = true;
+    open = false;
     hoveredLink;
+    rawCache;
     constructor(callbacks, onOpenChange, idPrefix) {
         this.callbacks = callbacks;
         this.onOpenChange = onOpenChange;
@@ -65,6 +71,7 @@ export class InspectorView {
             this.tabs.set(tab, button);
             this.tabList.appendChild(button);
         }
+        enableTabKeyboard(this.tabList);
         this.content.id = `${idPrefix}-inspector-panel`;
         this.content.className = 'zenfg-inspector-inspector-content';
         this.content.setAttribute('role', 'tabpanel');
@@ -73,16 +80,24 @@ export class InspectorView {
         this.render();
     }
     setSnapshot(snapshot) {
+        if (this.snapshot !== snapshot)
+            this.rawCache = undefined;
         this.snapshot = snapshot;
         this.render();
     }
     setSelection(selected, reveal = true) {
+        if (!selected || !this.selected || selectionKey(selected) !== selectionKey(this.selected))
+            this.rawCache = undefined;
         if (selected?.kind === 'resource'
             && (this.selected?.kind !== 'resource' || this.selected.id !== selected.id))
             this.activeTab = 'summary';
         this.selected = selected;
-        if (selected && reveal)
+        if (!selected)
+            this.setOpen(false);
+        else if (reveal && !this.open) {
             this.setOpen(true);
+            return;
+        }
         this.render();
     }
     setOpen(open) {
@@ -92,6 +107,8 @@ export class InspectorView {
             this.clearLinkHover();
         this.open = open;
         this.updateOpenState();
+        if (open)
+            this.render();
         this.onOpenChange(open);
     }
     get isOpen() {
@@ -102,11 +119,13 @@ export class InspectorView {
         this.root.classList.toggle('open', this.open);
     }
     render() {
+        const restoreFocus = this.content.contains(document.activeElement);
         this.clearLinkHover();
         for (const [tab, button] of this.tabs) {
             const active = tab === this.activeTab;
             button.classList.toggle('active', active);
             button.setAttribute('aria-selected', active ? 'true' : 'false');
+            button.tabIndex = active ? 0 : -1;
             if (active)
                 this.content.setAttribute('aria-labelledby', button.id);
         }
@@ -122,33 +141,59 @@ export class InspectorView {
             return;
         }
         this.title.textContent = this.selectionTitle(snapshot, selected);
+        if (!this.open)
+            return;
         if (this.activeTab === 'raw') {
-            const raw = document.createElement('pre');
-            raw.className = 'zenfg-inspector-raw-detail';
-            raw.textContent = JSON.stringify(resolveSelectedDetail(snapshot, selected), null, 2);
-            this.content.appendChild(raw);
+            const key = selectionKey(selected);
+            if (this.rawCache?.snapshot !== snapshot || this.rawCache.key !== key) {
+                const detail = resolveSelectedCanonicalDetail(snapshot, selected);
+                this.rawCache = detail ? { snapshot, key, view: new RawDetailView(detail, Boolean(snapshot.protocol.capture.migration)) } : undefined;
+            }
+            if (this.rawCache)
+                this.content.appendChild(this.rawCache.view.root);
+            else
+                this.content.textContent = 'Canonical object unavailable in this capture.';
         }
         else if (this.activeTab === 'relations') {
             this.content.appendChild(this.createRelations(snapshot, selected));
         }
         else {
-            this.content.appendChild(this.createSummary(snapshot, selected));
+            this.content.append(this.createLocationActions(snapshot, selected), this.createSummary(snapshot, selected));
+            const identity = this.selectionId(snapshot, selected);
+            if (identity)
+                this.content.appendChild(this.summary([['ID', this.copyId(identity)]]));
+            const diagnostics = this.createDiagnostics(snapshot, selected);
+            if (diagnostics)
+                this.content.appendChild(diagnostics);
+            if (selected.kind === 'node' || selected.kind === 'culled') {
+                const node = snapshot.nodeById.get(selected.id) ?? snapshot.culledById.get(selected.id)?.node;
+                if (node) {
+                    const accesses = document.createElement('details');
+                    const heading = document.createElement('summary');
+                    heading.textContent = `Access facts · ${node.reads.length + node.writes.length}`;
+                    accesses.append(heading, this.accessRelations('Reads', node.reads), this.accessRelations('Writes', node.writes));
+                    this.content.appendChild(accesses);
+                }
+            }
         }
+        // Selecting a relation replaces its button. Keep keyboard focus in the pane.
+        if (restoreFocus)
+            this.tabs.get(this.activeTab)?.focus();
     }
     selectionTitle(snapshot, selection) {
         switch (selection.kind) {
             case 'node': {
                 const node = snapshot.nodeById.get(selection.id);
-                return node ? labelNode(node) : `Pass #${selection.id}`;
+                return node ? labelNode(node) : selection.id;
             }
             case 'group': return snapshot.groupByPathKey.get(selection.pathKey)?.label ?? 'Group';
             case 'resource': {
                 const resource = snapshot.resourceById.get(selection.id);
-                return resource ? labelResource(resource) : `Resource #${selection.id}`;
+                return resource ? labelResource(resource) : selection.id;
             }
-            case 'allocation': return `Allocation #${selection.id}`;
+            case 'allocation': return /^allocation[:#-]/i.test(selection.id) ? selection.id : `Allocation ${selection.id}`;
             case 'root': return 'Output root';
-            case 'culled': return `Culled node #${selection.index}`;
+            case 'culled': return `${snapshot.culledById.get(selection.id)?.node.label ?? selection.id} (culled)`;
             case 'segment': return `Segment #${selection.index}`;
         }
     }
@@ -159,12 +204,21 @@ export class InspectorView {
                 if (!node)
                     return this.summary([]);
                 const segment = snapshot.segmentByNodeId.get(node.id);
+                const roots = snapshot.roots.filter((root) => root.nodeId === node.id || root.resolution?.producerNodeIds.includes(node.id));
                 return this.summary([
+                    ['Compile state', 'Retained · compiler included this pass; execution success is not implied'],
+                    ['Retention', roots.length ? roots.map((root) => root.reason).join(', ') : 'No direct output root recorded; inspect dependencies in Relations'],
                     ['Kind', node.kind],
-                    ['Order', String(node.order)],
+                    ['Execution slot', String(node.order)],
                     ['Group', groupPath(snapshot, node.debugGroupId)],
                     ['Segment', segment ? `#${segment.index} ${segment.kind}` : '-'],
-                    ['GPU', node.kind === 'external-submission' ? 'Opaque' : node.gpuDurationMicros === undefined ? 'Not timed' : `${(node.gpuDurationMicros / 1000).toFixed(3)} ms`],
+                    ['CPU duration', node.cpuDurationMicros === undefined ? 'Not collected' : (node.cpuDurationMicros / 1000).toFixed(3) + ' ms'],
+                    ['CPU scope', 'Synchronous elapsed time; zero may reflect clock precision.' + (node.kind === 'external-submission' ? ' Includes synchronous external submission.' : '')],
+                    ['GPU duration', node.kind === 'external-submission' ? 'Opaque · external work is not measured'
+                            : node.kind !== 'render' && node.kind !== 'compute' ? 'Not applicable · this pass kind is not timing eligible'
+                                : node.gpuDurationMicros === undefined ? `Not collected${snapshot.profiling.status === 'unavailable' ? ` · ${snapshot.profiling.reason}` : ''}`
+                                    : `${(node.gpuDurationMicros / 1000).toFixed(3)} ms`],
+                    ['GPU scope', 'GPU timestamp interval for render/compute passes; excludes external work. Zero may reflect timestamp precision.'],
                     ['Accesses', `${node.reads.length} reads · ${node.writes.length} writes`],
                     ['Side effect', node.sideEffect ? 'yes' : 'no'],
                 ]);
@@ -177,9 +231,12 @@ export class InspectorView {
                     ['Path', group.path.join(' / ')],
                     ['Retained', String(group.summary.retainedNodeCount)],
                     ['Culled', String(group.summary.culledNodeCount)],
-                    ['GPU coverage', `${group.summary.timedNodeCount}/${group.summary.timingEligibleNodeCount}`],
-                    ['GPU work', `${(group.summary.gpuWorkDurationMicros / 1000).toFixed(3)} ms`],
-                    ['Allocations', String(group.summary.physicalAllocationCount)],
+                    ['CPU coverage', formatTimingCoverage(group.summary.cpuTimedNodeCount, group.summary.retainedNodeCount)],
+                    ['CPU pass sum', group.summary.cpuTimedNodeCount ? (group.summary.cpuWorkDurationMicros / 1000).toFixed(3) + ' ms' : 'Not collected'],
+                    ['GPU coverage', formatTimingCoverage(group.summary.timedNodeCount, group.summary.timingEligibleNodeCount)],
+                    ['GPU pass sum', group.summary.timingEligibleNodeCount === 0 ? 'Not applicable' : group.summary.timedNodeCount === 0 ? 'Not collected' : (group.summary.gpuWorkDurationMicros / 1000).toFixed(3) + ' ms'],
+                    ['Opaque passes', `${group.summary.externalSubmissionCount} · excluded from GPU pass sum`],
+                    ['Allocations', snapshot.protocol.memory.allocationReport.status === 'available' ? String(group.summary.physicalAllocationCount) : 'Unknown · allocation report unavailable'],
                     ['Segments', String(group.summary.executionSegmentCount)],
                 ]);
             }
@@ -191,9 +248,14 @@ export class InspectorView {
                     ['Kind / origin', `${resource.kind} · ${resource.origin}`],
                     ['Group', groupPath(snapshot, resource.debugGroupId)],
                     ['Descriptor', formatResourceDescriptor(resource)],
-                    ['Estimated', formatEstimatedBytes(resource.estimatedByteSize)],
-                    ['Lifetime', resource.lifetime ? `${resource.lifetime.firstUse}–${resource.lifetime.lastUse}` : '-'],
-                    ['Allocation', resource.physicalResourceId === undefined ? '-' : `#${resource.physicalResourceId}`],
+                    ['Resource estimate', `${formatEstimatedBytes(resource.estimatedByteSize)} · logical descriptor estimate`],
+                    ['Lifetime', resource.lifetime ? `execution slots ${resource.lifetime.firstUse}–${resource.lifetime.lastUse} (inclusive)` : 'Unavailable'],
+                    ['Allocation', resource.physicalResourceId !== undefined
+                            ? this.createDetailLink(resource.physicalResourceId, { kind: 'allocation', id: resource.physicalResourceId })
+                            : resource.origin !== 'transient' ? 'Not applicable · externally owned resource'
+                                : snapshot.protocol.memory.allocationReport.status === 'unavailable' ? 'Unavailable · allocation report not captured'
+                                    : 'Unallocated'],
+                    ['Initial contents', resource.initialContents ?? 'Unknown'],
                     ['Usage', resource.usageFlags.join(', ') || '-'],
                 ]);
             }
@@ -204,7 +266,7 @@ export class InspectorView {
                 return this.summary([
                     ['Kind', allocation.kind],
                     ['Compatibility class', String(allocation.compatibilityClassId)],
-                    ['Estimated', formatEstimatedBytes(allocation.estimatedByteSize)],
+                    ['Physical estimate', `${formatEstimatedBytes(allocation.estimatedByteSize)} · allocation capacity estimate`],
                     ['Logical resources', String(allocation.resourceIds.length)],
                     ['Alias', allocation.resourceIds.length > 1 ? `yes · ×${allocation.resourceIds.length}` : 'single'],
                 ]);
@@ -213,22 +275,24 @@ export class InspectorView {
                 const root = snapshot.roots.find((root) => root.key === selection.key);
                 return this.summary(root ? [
                     ['Reason', root.reason],
-                    ['Node', root.nodeId === undefined ? '-' : `#${root.nodeId}`],
+                    ['Node', root.nodeId === undefined ? 'Not applicable' : this.nodeLink(snapshot, root.nodeId)],
                     ['Resource', root.resource ? this.viewResourceButton(snapshot, root.resource.id) : '-'],
                     ...(root.reason === 'side-effect' ? [] : [
-                        ['Range', root.range ? JSON.stringify(root.range) : 'Unavailable in Legacy capture'],
+                        ['Range', root.range ? formatRootRange(root) : 'Unavailable in Legacy capture'],
                         ['Initial contents', root.resolution ? String(root.resolution.usesInitialContents) : 'Unavailable in Legacy capture'],
                         ['Producers', root.resolution ? root.resolution.producerNodeIds.join(', ') || 'None' : 'Unavailable in Legacy capture'],
                     ]),
                 ] : []);
             }
             case 'culled': {
-                const culled = snapshot.culledNodes[selection.index];
+                const culled = snapshot.culledById.get(selection.id);
                 return this.summary(culled ? [
+                    ['Compile state', 'Culled · excluded by the compiler'],
                     ['Node', labelNode(culled.node)],
                     ['Kind', culled.node.kind],
                     ['Group', groupPath(snapshot, culled.node.debugGroupId)],
                     ['Reason', culled.reason],
+                    ['Execution / segment / CPU / GPU', 'Not applicable · culled passes do not execute'],
                     ['Accesses', `${culled.node.reads.length} reads · ${culled.node.writes.length} writes`],
                 ] : []);
             }
@@ -247,6 +311,7 @@ export class InspectorView {
     createRelations(snapshot, selection) {
         const host = document.createElement('div');
         host.className = 'zenfg-inspector-inspector-relations';
+        host.appendChild(this.createLocationActions(snapshot, selection));
         switch (selection.kind) {
             case 'node': {
                 const node = snapshot.nodeById.get(selection.id);
@@ -257,6 +322,21 @@ export class InspectorView {
                         host.appendChild(this.relationGroup('Segment', [
                             [`#${segment.index} ${segment.kind}`, { kind: 'segment', index: segment.index }],
                         ]));
+                    for (const kind of ['value', 'ordering']) {
+                        const relations = [];
+                        for (const edge of snapshot.edges) {
+                            if (edge.kind !== kind || (edge.fromNodeId !== node.id && edge.toNodeId !== node.id))
+                                continue;
+                            const upstream = edge.toNodeId === node.id;
+                            const otherId = upstream ? edge.fromNodeId : edge.toNodeId;
+                            const other = resolveNodeSelection(snapshot, otherId);
+                            if (other)
+                                relations.push([this.accessNodeLabel(snapshot, otherId), other,
+                                    `${upstream ? 'Upstream' : 'Downstream'} · ${resourceLabel(snapshot, edge.resource.id)} · ${kind} dependency`]);
+                        }
+                        if (relations.length)
+                            host.appendChild(this.relationGroup(kind === 'value' ? 'Value dependencies' : 'Ordering dependencies', relations));
+                    }
                 }
                 break;
             }
@@ -264,7 +344,7 @@ export class InspectorView {
                 const group = snapshot.groupByPathKey.get(selection.pathKey);
                 if (group) {
                     host.append(this.resourceRelations('Inputs', group.summary.inputResources), this.resourceRelations('Outputs', group.summary.outputResources), this.relationGroup('Output roots', group.summary.outputRoots.map((root) => [
-                        `${root.resource ? labelResource(root.resource) : '-'} · ${root.reason} · ${root.range ? JSON.stringify(root.range) : 'Range unavailable'}`,
+                        `${root.resource ? labelResource(root.resource) : '-'} · ${root.reason} · ${formatRootRange(root)}`,
                         { kind: 'root', key: root.key },
                     ])));
                 }
@@ -291,7 +371,7 @@ export class InspectorView {
                     ])));
                 if (resource?.physicalResourceId !== undefined)
                     host.appendChild(this.relationGroup('Allocation', [
-                        [`#${resource.physicalResourceId}`, { kind: 'allocation', id: resource.physicalResourceId }],
+                        [resource.physicalResourceId, { kind: 'allocation', id: resource.physicalResourceId }],
                     ]));
                 break;
             }
@@ -320,7 +400,7 @@ export class InspectorView {
                 break;
             }
             case 'culled': {
-                const culled = snapshot.culledNodes[selection.index];
+                const culled = snapshot.culledById.get(selection.id);
                 if (culled)
                     host.append(this.accessRelations('Reads', culled.node.reads), this.accessRelations('Writes', culled.node.writes));
                 break;
@@ -335,7 +415,7 @@ export class InspectorView {
                 break;
             }
         }
-        if (host.childElementCount === 0) {
+        if (host.childElementCount === 1) {
             const empty = document.createElement('p');
             empty.className = 'zenfg-inspector-muted';
             empty.textContent = 'No related objects.';
@@ -362,18 +442,21 @@ export class InspectorView {
         section.appendChild(heading);
         for (const [label, selection, description] of relations) {
             const link = this.createDetailLink(label, selection);
-            if (description === undefined) {
-                section.appendChild(link);
-            }
-            else {
-                const entry = document.createElement('div');
-                entry.className = 'zenfg-inspector-relation-entry';
+            const entry = document.createElement('div');
+            entry.className = 'zenfg-inspector-relation-entry';
+            const links = document.createElement('div');
+            links.className = 'zenfg-inspector-relation-links';
+            links.appendChild(link);
+            if (this.callbacks.onReveal)
+                links.appendChild(this.revealButton(selection, this.primaryPage(selection)));
+            entry.appendChild(links);
+            if (description !== undefined) {
                 const metadata = document.createElement('span');
                 metadata.className = 'zenfg-inspector-muted';
                 metadata.textContent = description;
-                entry.append(link, metadata);
-                section.appendChild(entry);
+                entry.appendChild(metadata);
             }
+            section.appendChild(entry);
         }
         if (relations.length === 0) {
             const empty = document.createElement('span');
@@ -430,14 +513,125 @@ export class InspectorView {
         const node = snapshot.nodeById.get(nodeId);
         if (node)
             return labelNode(node);
-        const culled = snapshot.culledNodes.find((candidate) => candidate.node.id === nodeId);
-        return culled ? `${labelNode(culled.node)} (culled)` : `node-${nodeId}`;
+        const culled = snapshot.culledById.get(nodeId);
+        return culled ? `${labelNode(culled.node)} (culled)` : nodeId;
     }
     accessNodeSelection(snapshot, nodeId) {
-        if (snapshot.nodeById.has(nodeId))
-            return { kind: 'node', id: nodeId };
-        const index = snapshot.culledNodes.findIndex((candidate) => candidate.node.id === nodeId);
-        return index < 0 ? undefined : { kind: 'culled', index };
+        return resolveNodeSelection(snapshot, nodeId);
+    }
+    nodeLink(snapshot, id) {
+        const selected = resolveNodeSelection(snapshot, id);
+        return selected ? this.createDetailLink(this.accessNodeLabel(snapshot, id), selected) : id;
+    }
+    primaryPage(selection) {
+        switch (selection.kind) {
+            case 'node':
+            case 'culled':
+            case 'group': return 'passes';
+            case 'resource': return 'resources';
+            case 'allocation': return 'memory';
+            case 'root':
+            case 'segment': return 'diagnostics';
+        }
+    }
+    revealButton(selection, page) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'zenfg-inspector-inline-action';
+        button.textContent = `Locate in ${page[0].toUpperCase()}${page.slice(1)}`;
+        button.addEventListener('click', () => {
+            this.clearLinkHover();
+            this.callbacks.onReveal?.(selection, page);
+        });
+        return button;
+    }
+    createLocationActions(snapshot, selection) {
+        const actions = document.createElement('div');
+        actions.className = 'zenfg-inspector-detail-actions';
+        if (!this.callbacks.onReveal)
+            return actions;
+        actions.appendChild(this.revealButton(selection, this.primaryPage(selection)));
+        if (selection.kind === 'node' || selection.kind === 'group' || selection.kind === 'resource' || selection.kind === 'root') {
+            actions.appendChild(this.revealButton(selection, 'graph'));
+        }
+        if (selection.kind === 'resource' && snapshot.resourceById.get(selection.id)?.origin === 'transient')
+            actions.appendChild(this.revealButton(selection, 'memory'));
+        if (selection.kind === 'culled') {
+            const note = document.createElement('span');
+            note.className = 'zenfg-inspector-muted';
+            note.textContent = 'Culled passes are absent from Graph. Locate them in Passes.';
+            actions.appendChild(note);
+        }
+        return actions;
+    }
+    selectionId(snapshot, selection) {
+        if ('id' in selection)
+            return selection.id;
+        if (selection.kind === 'group')
+            return snapshot.groupByPathKey.get(selection.pathKey)?.id;
+        if (selection.kind === 'segment')
+            return snapshot.segmentByIndex.get(selection.index)?.id;
+        return undefined;
+    }
+    copyId(id) {
+        const host = document.createElement('span');
+        host.className = 'zenfg-inspector-copy-id';
+        const code = document.createElement('code');
+        code.textContent = id;
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.textContent = 'Copy ID';
+        button.setAttribute('aria-label', 'Copy full object ID');
+        button.addEventListener('click', () => {
+            void writeClipboardText(id).then(() => { button.textContent = 'Copied'; }, () => { button.textContent = 'Copy failed'; });
+        });
+        host.append(code, button);
+        return host;
+    }
+    createDiagnostics(snapshot, selection) {
+        let diagnostics = [];
+        if (selection.kind === 'node' || selection.kind === 'culled')
+            diagnostics = snapshot.diagnosticsByNodeId.get(selection.id) ?? [];
+        else if (selection.kind === 'resource')
+            diagnostics = snapshot.diagnosticsByResourceId.get(selection.id) ?? [];
+        else if (selection.kind === 'allocation') {
+            const resourceIds = new Set(snapshot.allocationById.get(selection.id)?.resourceIds);
+            diagnostics = snapshot.protocol.diagnostics.filter((diagnostic) => diagnostic.resourceId !== undefined && resourceIds.has(diagnostic.resourceId));
+        }
+        else if (selection.kind === 'group') {
+            const groupId = snapshot.groupByPathKey.get(selection.pathKey)?.id;
+            const groups = new Set(snapshot.debugGroups.filter((group) => groupId !== undefined && group.ancestorIds.includes(groupId)).map((group) => group.id));
+            diagnostics = snapshot.protocol.diagnostics.filter((diagnostic) => {
+                const nodeGroup = diagnostic.nodeId ? snapshot.canonicalNodeById.get(diagnostic.nodeId)?.groupId : undefined;
+                const resourceGroup = diagnostic.resourceId ? snapshot.resourceById.get(diagnostic.resourceId)?.debugGroupId : undefined;
+                return (nodeGroup !== undefined && groups.has(nodeGroup)) || (resourceGroup !== undefined && groups.has(resourceGroup));
+            });
+        }
+        if (!diagnostics.length)
+            return undefined;
+        const section = document.createElement('section');
+        section.className = 'zenfg-inspector-detail-diagnostics';
+        const heading = document.createElement('h3');
+        heading.textContent = `Related diagnostics ${diagnostics.length}`;
+        section.appendChild(heading);
+        for (const diagnostic of diagnostics) {
+            const entry = document.createElement('article');
+            entry.dataset.severity = diagnostic.severity;
+            const label = document.createElement('strong');
+            label.textContent = `${diagnostic.severity} · ${diagnostic.code}`;
+            const message = document.createElement('p');
+            message.textContent = diagnostic.message;
+            entry.append(label, message);
+            if (diagnostic.nodeId) {
+                const node = resolveNodeSelection(snapshot, diagnostic.nodeId);
+                if (node)
+                    entry.appendChild(this.createDetailLink(this.accessNodeLabel(snapshot, diagnostic.nodeId), node));
+            }
+            if (diagnostic.resourceId)
+                entry.appendChild(this.viewResourceButton(snapshot, diagnostic.resourceId));
+            section.appendChild(entry);
+        }
+        return section;
     }
 }
 //# sourceMappingURL=panelInspectorView.js.map