@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/src/panelInspectorView.ts

@@ -6,12 +6,17 @@ import type {
 } from './debugCaptureModel.ts';
 import { labelNode, labelResource } from './panelDomHelpers.ts';
 import { createPanelIcon } from './panelIcons.ts';
-import { resolveSelectedDetail } from './panelSelection.ts';
-import type { InspectorTab, Selection } from './panelTypes.ts';
+import { RawDetailView } from './panelRawView.ts';
+import { resolveNodeSelection, resolveSelectedCanonicalDetail } from './panelSelection.ts';
+import type { InspectorTab, Selection, WorkbenchTab } from './panelTypes.ts';
 import {
 	createRelationButton,
 	formatEstimatedBytes,
 	formatResourceDescriptor,
+	formatTimingCoverage,
+	enableTabKeyboard,
+	writeClipboardText,
+	selectionKey,
 	groupPath,
 	resourceLabel,
 	type WorkbenchCallbacks,
@@ -22,21 +27,24 @@ type DetailRelation = readonly [label: string, selection: Selection, description
 function formatAccessFacts(access: FrameGraphDebugAccess): string {
 	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: NonNullable<FrameGraphDebugAccess['textureRegion']>): string {
+	const end = (start: number | undefined, count: number | undefined) => 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: FrameGraphDebugRoot): string {
 	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 {
@@ -48,8 +56,9 @@ export class InspectorView {
 	private snapshot: FrameGraphDebugViewModel | undefined;
 	private selected: Selection | undefined;
 	private activeTab: InspectorTab = 'summary';
-	private open = true;
+	private open = false;
 	private hoveredLink: HTMLButtonElement | undefined;
+	private rawCache: { readonly snapshot: FrameGraphDebugViewModel; readonly key: string; readonly view: RawDetailView } | undefined;
 
 	constructor(
 		private readonly callbacks: WorkbenchCallbacks,
@@ -86,6 +95,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');
@@ -95,15 +105,21 @@ export class InspectorView {
 	}
 
 	setSnapshot(snapshot: FrameGraphDebugViewModel): void {
+		if (this.snapshot !== snapshot) this.rawCache = undefined;
 		this.snapshot = snapshot;
 		this.render();
 	}
 
 	setSelection(selected: Selection | undefined, reveal = true): void {
+		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) this.setOpen(true);
+		if (!selected) this.setOpen(false);
+		else if (reveal && !this.open) {
+			this.setOpen(true);
+			return;
+		}
 		this.render();
 	}
 
@@ -112,6 +128,7 @@ export class InspectorView {
 		if (!open) this.clearLinkHover();
 		this.open = open;
 		this.updateOpenState();
+		if (open) this.render();
 		this.onOpenChange(open);
 	}
 
@@ -125,11 +142,13 @@ export class InspectorView {
 	}
 
 	private render(): void {
+		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);
 		}
 		const snapshot = this.snapshot;
@@ -144,32 +163,52 @@ 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();
 	}
 
 	private selectionTitle(snapshot: FrameGraphDebugViewModel, selection: Selection): string {
 		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}`;
 		}
 	}
@@ -180,12 +219,21 @@ export class InspectorView {
 				const node = snapshot.nodeById.get(selection.id);
 				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'],
 				]);
@@ -197,9 +245,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)],
 				]);
 			}
@@ -210,9 +261,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(', ') || '-'],
 				]);
 			}
@@ -222,7 +278,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'],
 				]);
@@ -231,22 +287,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'],
 					] as [string, string][]),
 				] : []);
 			}
 			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`],
 				] : []);
 			}
@@ -266,6 +324,7 @@ export class InspectorView {
 	private createRelations(snapshot: FrameGraphDebugViewModel, selection: Selection): HTMLElement {
 		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);
@@ -278,6 +337,18 @@ export class InspectorView {
 					if (segment) host.appendChild(this.relationGroup('Segment', [
 						[`#${segment.index} ${segment.kind}`, { kind: 'segment', index: segment.index }],
 					]));
+					for (const kind of ['value', 'ordering'] as const) {
+						const relations: DetailRelation[] = [];
+						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;
 			}
@@ -288,7 +359,7 @@ export class InspectorView {
 						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 },
 						])),
 					);
@@ -313,7 +384,7 @@ export class InspectorView {
 					`${root.reason} · ${formatRootRange(root)}`, { kind: 'root', key: root.key },
 				])));
 				if (resource?.physicalResourceId !== undefined) host.appendChild(this.relationGroup('Allocation', [
-					[`#${resource.physicalResourceId}`, { kind: 'allocation', id: resource.physicalResourceId }],
+					[resource.physicalResourceId, { kind: 'allocation', id: resource.physicalResourceId }],
 				]));
 				break;
 			}
@@ -337,7 +408,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),
@@ -353,7 +424,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.';
@@ -383,17 +454,20 @@ 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');
@@ -453,13 +527,118 @@ export class InspectorView {
 	private accessNodeLabel(snapshot: FrameGraphDebugViewModel, nodeId: string): string {
 		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;
 	}
 
 	private accessNodeSelection(snapshot: FrameGraphDebugViewModel, nodeId: string): Selection | undefined {
-		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);
+	}
+
+	private nodeLink(snapshot: FrameGraphDebugViewModel, id: string): string | HTMLButtonElement {
+		const selected = resolveNodeSelection(snapshot, id);
+		return selected ? this.createDetailLink(this.accessNodeLabel(snapshot, id), selected) : id;
+	}
+
+	private primaryPage(selection: Selection): WorkbenchTab {
+		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';
+		}
+	}
+
+	private revealButton(selection: Selection, page: WorkbenchTab): HTMLButtonElement {
+		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;
+	}
+
+	private createLocationActions(snapshot: FrameGraphDebugViewModel, selection: Selection): HTMLElement {
+		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;
+	}
+
+	private selectionId(snapshot: FrameGraphDebugViewModel, selection: Selection): string | undefined {
+		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;
+	}
+
+	private copyId(id: string): HTMLElement {
+		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;
+	}
+
+	private createDiagnostics(snapshot: FrameGraphDebugViewModel, selection: Selection): HTMLElement | undefined {
+		let diagnostics: FrameGraphDebugViewModel['protocol']['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;
 	}
 }

package/src/panelListStyles.ts

@@ -0,0 +1,154 @@
+/** Content-width layout and message styles for the diagnostic workbench lists. */
+export const PANEL_LIST_CSS = `
+.zenfg-inspector-view-toolbar[hidden],
+.zenfg-inspector-subview[hidden],
+.zenfg-inspector-list-context[hidden] { display: none; }
+.zenfg-inspector-result-count {
+	color: var(--fgd-muted);
+	white-space: nowrap;
+	font: var(--fgd-font-size-small)/1.4 var(--fgd-font-ui);
+}
+.zenfg-inspector-list-context {
+	flex: 0 0 auto;
+	margin: 0;
+	padding: 7px 10px;
+	border-bottom: 1px solid var(--fgd-border-subtle);
+	color: var(--fgd-muted);
+	font: var(--fgd-font-size-small)/1.5 var(--fgd-font-ui);
+}
+.zenfg-inspector-view-toolbar button {
+	min-height: var(--fgd-control-height);
+	padding: var(--fgd-space-1) var(--fgd-space-2);
+	border: 1px solid var(--fgd-border);
+	border-radius: var(--fgd-radius-sm);
+	background: var(--fgd-panel);
+	color: var(--fgd-text-secondary);
+	font: var(--fgd-font-size)/1.3 var(--fgd-font-ui);
+	cursor: pointer;
+}
+.zenfg-inspector-view-toolbar button:hover { background: var(--fgd-surface-hover); }
+.zenfg-inspector-view-toolbar input,
+.zenfg-inspector-view-toolbar select { font-size: var(--fgd-font-size); }
+.zenfg-inspector-passes-view .zenfg-inspector-workbench-table,
+.zenfg-inspector-resources-view .zenfg-inspector-workbench-table {
+	min-width: 580px;
+	border-collapse: separate;
+	border-spacing: 0;
+	font: var(--fgd-font-size-small)/1.5 var(--fgd-font-ui);
+}
+.zenfg-inspector-passes-view .zenfg-inspector-workbench-table [data-column='numeric'],
+.zenfg-inspector-resources-view .zenfg-inspector-workbench-table [data-column='numeric'] {
+	font-family: var(--fgd-font-mono);
+}
+.zenfg-inspector-passes-view .zenfg-inspector-workbench-table th:first-child,
+.zenfg-inspector-resources-view .zenfg-inspector-workbench-table th:first-child,
+.zenfg-inspector-passes-view .zenfg-inspector-workbench-table td:first-child,
+.zenfg-inspector-resources-view .zenfg-inspector-workbench-table td:first-child {
+	position: sticky;
+	left: 0;
+	max-width: 290px;
+	background: var(--fgd-canvas);
+	z-index: 1;
+}
+.zenfg-inspector-passes-view .zenfg-inspector-workbench-table th:first-child,
+.zenfg-inspector-resources-view .zenfg-inspector-workbench-table th:first-child {
+	z-index: 3;
+	background: var(--fgd-panel);
+}
+.zenfg-inspector-passes-view .zenfg-inspector-workbench-table tr.selected td:first-child,
+.zenfg-inspector-resources-view .zenfg-inspector-workbench-table tr.selected td:first-child {
+	background: color-mix(in srgb, var(--fgd-accent) 12%, var(--fgd-canvas));
+}
+.zenfg-inspector-passes-view .zenfg-inspector-workbench-table tbody tr:hover td:first-child,
+.zenfg-inspector-resources-view .zenfg-inspector-workbench-table tbody tr:hover td:first-child {
+	background: var(--fgd-surface-hover);
+}
+.zenfg-inspector-passes-view .zenfg-inspector-group-toggle { margin-right: 5px; }
+.zenfg-inspector-diagnostics-view { display: flex; flex-direction: column; }
+.zenfg-inspector-diagnostics-view .zenfg-inspector-diagnostics-scroller {
+	flex: 1 1 auto;
+	min-height: 0;
+	height: auto;
+}
+.zenfg-inspector-diagnostics-sections {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	padding: 14px;
+	min-width: 0;
+}
+.zenfg-inspector-diagnostic-messages > h2 { margin: 0; font: 600 14px/1.5 var(--fgd-font-ui); }
+.zenfg-inspector-diagnostic-messages > p,
+.zenfg-inspector-diagnostic-section > p {
+	margin: 5px 0 10px;
+	color: var(--fgd-muted);
+	font: var(--fgd-font-size-small)/1.5 var(--fgd-font-ui);
+}
+.zenfg-inspector-diagnostic-message {
+	--diagnostic-color: var(--fgd-accent);
+	margin-top: 9px;
+	padding: 10px var(--fgd-space-3);
+	border-left: 3px solid var(--diagnostic-color);
+	background: var(--fgd-surface);
+	overflow-wrap: anywhere;
+}
+.zenfg-inspector-diagnostic-message[data-severity='error'] { --diagnostic-color: var(--fgd-danger); }
+.zenfg-inspector-diagnostic-message[data-severity='warning'] { --diagnostic-color: var(--fgd-warning); }
+.zenfg-inspector-diagnostic-message h3 {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--fgd-space-2);
+	margin: 0;
+	font: 600 var(--fgd-font-size-small)/1.5 var(--fgd-font-ui);
+}
+.zenfg-inspector-diagnostic-severity { color: var(--diagnostic-color); text-transform: capitalize; }
+.zenfg-inspector-diagnostic-message code { font: var(--fgd-font-size-small)/1.5 var(--fgd-font-mono); }
+.zenfg-inspector-diagnostic-message p { margin: 6px 0; white-space: pre-wrap; font: var(--fgd-font-size)/1.55 var(--fgd-font-ui); }
+.zenfg-inspector-diagnostic-links {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	gap: 5px var(--fgd-space-3);
+	min-width: 0;
+	margin-top: var(--fgd-space-1);
+}
+.zenfg-inspector-diagnostic-links .zenfg-inspector-relation-button {
+	min-width: 0;
+	max-width: 100%;
+	white-space: normal;
+	overflow-wrap: anywhere;
+	text-align: left;
+	font: var(--fgd-font-size)/1.5 var(--fgd-font-ui);
+}
+.zenfg-inspector-diagnostic-reveal { color: var(--fgd-muted); }
+.zenfg-inspector-diagnostic-section {
+	min-width: 0;
+	padding: 10px 0 0;
+	border-top: 1px solid var(--fgd-border-subtle);
+	overflow-wrap: anywhere;
+}
+.zenfg-inspector-diagnostic-section > summary {
+	padding: 3px 0;
+	font: 600 var(--fgd-font-size)/1.5 var(--fgd-font-ui);
+	cursor: pointer;
+}
+.zenfg-inspector-diagnostic-section > .zenfg-inspector-diagnostic-section { margin: var(--fgd-space-2) 0 0 var(--fgd-space-3); }
+.zenfg-inspector-diagnostic-section .zenfg-inspector-diagnostic-list { overflow: visible; padding: var(--fgd-space-1) 0; }
+.zenfg-inspector-diagnostic-section ul { padding-left: 20px; }
+.zenfg-inspector-diagnostic-section > .zenfg-inspector-relation-button { margin: 5px 0; }
+.zenfg-inspector-diagnostic-links .selected { background: var(--fgd-accent-soft); }
+.zenfg-inspector-diagnostic-section summary:focus-visible,
+.zenfg-inspector-view-toolbar button:focus-visible { outline: 2px solid var(--fgd-accent); outline-offset: 2px; }
+@container zenfg-inspector-main (max-width: 640px) {
+	.zenfg-inspector-passes-view .zenfg-inspector-workbench-table,
+	.zenfg-inspector-resources-view .zenfg-inspector-workbench-table { min-width: 420px; }
+	.zenfg-inspector-passes-view [id$='pass-list-panel'] tr > :nth-child(3),
+	.zenfg-inspector-passes-view [id$='pass-list-panel'] tr > :nth-child(6),
+	.zenfg-inspector-passes-view [id$='group-list-panel'] tr > :nth-child(5),
+	.zenfg-inspector-passes-view [id$='group-list-panel'] tr > :nth-child(6),
+	.zenfg-inspector-resources-view tr > :nth-child(4),
+	.zenfg-inspector-resources-view tr > :nth-child(5) { display: none; }
+	.zenfg-inspector-passes-view .zenfg-inspector-workbench-table td:first-child,
+	.zenfg-inspector-resources-view .zenfg-inspector-workbench-table td:first-child { max-width: 190px; }
+}
+`;