@zenfg/inspector 0.1.0-beta.2 → 0.1.0-beta.3

package/src/panelGraphView.ts

@@ -22,7 +22,7 @@ export function renderGraphView(
     onToggleGroup: (pathKey: string) => void,
 ): void {
     const scene = resolveGraphScene(graphView, snapshot);
-    renderGraphLegend(graphView.legend, scene);
+    renderGraphLegend(graphView.legend, snapshot);
 	const elementCount = scene.nodes.length + scene.edges.length;
 	const layoutElementBudget = graphView.layoutElementBudget ?? Number.MAX_SAFE_INTEGER;
 	if (elementCount > layoutElementBudget) {
@@ -56,14 +56,12 @@ export function resolveGraphScene(
     snapshot: FrameGraphDebugViewModel,
 ): GraphScene {
     const optionsKey = JSON.stringify([
-        graphView.graphMode,
         graphView.groupsEnabled,
         [...graphView.expandedGroupPaths].sort(),
     ]);
     const cached = graphSceneCache.get(graphView);
     if (cached?.snapshot === snapshot && cached.optionsKey === optionsKey) return cached.scene;
     const scene = createGraphScene(snapshot, {
-        mode: graphView.graphMode,
         groupsEnabled: graphView.groupsEnabled,
         expandedGroupPaths: graphView.expandedGroupPaths,
     });
@@ -85,13 +83,26 @@ export function destroyGraph(graphView: GraphViewState): void {
     graphSceneCache.delete(graphView);
 }
 
-function renderGraphLegend(host: HTMLElement | undefined, scene: GraphScene): void {
+function renderGraphLegend(host: HTMLElement | undefined, snapshot: FrameGraphDebugViewModel): void {
     if (!host) return;
-    const entries = createGraphLegend(scene);
-    const key = entries.map((entry) => entry.key).join('|');
+    const entries = createGraphLegend(snapshot);
+    const key = JSON.stringify(entries);
     if (host.dataset.legendKey === key) return;
     host.dataset.legendKey = key;
-    host.replaceChildren(...entries.map((entry) => {
+    host.replaceChildren();
+    let group: HTMLElement | undefined;
+    for (const entry of entries) {
+        if (group?.getAttribute('aria-label') !== entry.group) {
+            group = document.createElement('span');
+            group.className = 'zenfg-inspector-legend-group';
+            group.setAttribute('role', 'group');
+            group.setAttribute('aria-label', entry.group);
+            const heading = document.createElement('span');
+            heading.className = 'zenfg-inspector-legend-heading';
+            heading.textContent = entry.group;
+            group.appendChild(heading);
+            host.appendChild(group);
+        }
         const item = document.createElement('span');
         item.className = 'zenfg-inspector-legend-item';
         const swatch = document.createElement('span');
@@ -100,9 +111,20 @@ function renderGraphLegend(host: HTMLElement | undefined, scene: GraphScene): vo
         if (entry.lineStyle) swatch.dataset.lineStyle = entry.lineStyle;
         if (entry.hollowArrow) swatch.dataset.hollowArrow = 'true';
         swatch.style.setProperty('--zenfg-inspector-legend-color', entry.color);
+        if (entry.shape === 'cut-rectangle' || entry.shape === 'tag') {
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('viewBox', '0 0 20 14');
+            svg.setAttribute('aria-hidden', 'true');
+            const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+            polygon.setAttribute('points', entry.shape === 'tag'
+                ? '1,1 12,1 19,7 12,13 1,13'
+                : '4,1 16,1 19,4 19,10 16,13 4,13 1,10 1,4');
+            svg.appendChild(polygon);
+            swatch.appendChild(svg);
+        }
         const label = document.createElement('span');
         label.textContent = entry.label;
         item.append(swatch, label);
-        return item;
-    }));
+        group!.appendChild(item);
+    }
 }

package/src/panelGraphVisuals.ts

@@ -2,6 +2,7 @@ import type cytoscape from 'cytoscape';
 
 import type { GraphScene, GraphSceneEdge, GraphSceneNode } from './panelGraphScene.ts';
 import { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';
+import { declarationEntrances, type FrameGraphDebugViewModel } from './debugCaptureModel.ts';
 
 export { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';
 
@@ -16,16 +17,19 @@ export const GRAPH_GEOMETRY = {
     groupPadding: 32,
     elkGroupPadding: { top: 46, right: 24, bottom: 24, left: 24 },
     edgeCornerRadius: 6,
+    outputWidth: 256,
+    outputLabelWidth: 144,
 } as const;
 
 const ENDPOINT_EDGE_DISTANCES = 'endpoints' as unknown as cytoscape.Css.Edge['edge-distances'];
 const EDGE_SEGMENT_RADII = `${GRAPH_GEOMETRY.edgeCornerRadius}px` as unknown as cytoscape.Css.Edge['segment-radii'];
 
 export type GraphLegendEntry = {
+    readonly group: 'Execution' | 'Resources' | 'Relationships';
     readonly key: string;
     readonly label: string;
     readonly color: string;
-    readonly shape: 'box' | 'ellipse' | 'group' | 'line';
+    readonly shape: 'box' | 'cut-rectangle' | 'tag' | 'ellipse' | 'group' | 'line';
     readonly lineStyle?: 'solid' | 'dotted' | 'dashed';
     readonly hollowArrow?: boolean;
 };
@@ -36,50 +40,37 @@ const NODE_LEGEND_ENTRIES = {
     copy: nodeLegend('copy', 'Copy', GRAPH_VISUAL_THEME.copy.stroke),
     'clear-buffer': nodeLegend('clear', 'Clear', GRAPH_VISUAL_THEME.clear.stroke),
     command: nodeLegend('command', 'Command', GRAPH_VISUAL_THEME.command.stroke),
-    'external-submission': nodeLegend('external', 'External', GRAPH_VISUAL_THEME.external.stroke),
+    'external-submission': { ...nodeLegend('external', 'External', GRAPH_VISUAL_THEME.external.stroke), shape: 'cut-rectangle' as const },
 } as const;
 
-export function createGraphLegend(scene: GraphScene): readonly GraphLegendEntry[] {
+export function createGraphLegend(snapshot: FrameGraphDebugViewModel): readonly GraphLegendEntry[] {
     const entries: GraphLegendEntry[] = [];
-    const passKinds = new Set(scene.nodes.flatMap((node) => node.kind === 'pass' || node.kind === 'culled-pass'
-        ? [node.passKind]
-        : []));
+    const passKinds = new Set(snapshot.nodes.map((node) => node.kind));
     for (const kind of ['render', 'compute', 'copy', 'clear-buffer', 'command', 'external-submission'] as const) {
         if (passKinds.has(kind)) entries.push(NODE_LEGEND_ENTRIES[kind]);
     }
-    if (scene.nodes.some((node) => node.kind === 'group')) {
-        entries.push({ key: 'group', label: 'Group', color: GRAPH_VISUAL_THEME.group.stroke, shape: 'group' });
+    const retained = new Set(snapshot.nodes.map((node) => node.id));
+    const used = new Set([
+        ...snapshot.accessEdges.filter((access) => retained.has(access.nodeId)).map((access) => access.resource.id),
+        ...snapshot.roots.flatMap((root) => root.resource ? [root.resource.id] : []),
+    ]);
+    const resources = snapshot.resources.filter((resource) => used.has(resource.id));
+    if (resources.length) entries.push({ group: 'Resources', key: 'declaration', label: 'Declaration', color: GRAPH_VISUAL_THEME.declaration.stroke, shape: 'ellipse' });
+    if (snapshot.roots.some((root) => root.resource)) entries.push({ group: 'Resources', key: 'output', label: 'Output', color: GRAPH_VISUAL_THEME.output.stroke, shape: 'tag' });
+    if ([...snapshot.nodes, ...resources].some((item) => item.debugGroupId !== undefined)) {
+        entries.push({ group: 'Relationships', key: 'group', label: 'Group', color: GRAPH_VISUAL_THEME.group.stroke, shape: 'group' });
     }
-    if (scene.nodes.some((node) => node.kind === 'resource' && node.resourceKind === 'texture')) {
-        entries.push({ key: 'texture', label: 'Texture', color: GRAPH_VISUAL_THEME.texture.stroke, shape: 'ellipse' });
+    if (snapshot.edges.some((edge) => edge.kind === 'value')
+        || declarationEntrances(snapshot.nodes, snapshot.accessEdges, snapshot.edges).length
+        || snapshot.roots.some((root) => root.resource && root.resolution && (root.resolution.usesInitialContents || root.resolution.producerNodeIds.length))) {
+        entries.push(edgeLegend('flow', 'Resource Flow', GRAPH_VISUAL_THEME.dependency.value, 'solid'));
     }
-    if (scene.nodes.some((node) => node.kind === 'resource' && node.resourceKind === 'buffer')) {
-        entries.push({ key: 'buffer', label: 'Buffer', color: GRAPH_VISUAL_THEME.buffer.stroke, shape: 'ellipse' });
-    }
-    if (scene.nodes.some((node) => node.kind === 'culled-pass')) {
-        entries.push({
-            key: 'culled',
-            label: 'Culled',
-            color: GRAPH_VISUAL_THEME.culled.stroke,
-            shape: 'box',
-            lineStyle: 'dashed',
-        });
-    }
-    if (scene.edges.some((edge) => edge.kind === 'dependency' && edge.dependencyKind === 'value')) {
-        entries.push(edgeLegend('value', 'Value', GRAPH_VISUAL_THEME.dependency.value, 'solid'));
-    }
-    if (scene.edges.some((edge) => edge.kind === 'dependency' && edge.dependencyKind === 'ordering')) {
+    if (snapshot.edges.some((edge) => edge.kind === 'ordering')) {
         entries.push({
             ...edgeLegend('ordering', 'Order', GRAPH_VISUAL_THEME.dependency.ordering, 'dotted'),
             hollowArrow: true,
         });
     }
-    if (scene.edges.some((edge) => edge.kind === 'access' && edge.accessMode === 'read')) {
-        entries.push(edgeLegend('read', 'Read', GRAPH_VISUAL_THEME.access.read, 'solid'));
-    }
-    if (scene.edges.some((edge) => edge.kind === 'access' && edge.accessMode === 'write')) {
-        entries.push(edgeLegend('write', 'Write', GRAPH_VISUAL_THEME.access.write, 'solid'));
-    }
     return entries;
 }
 
@@ -102,6 +93,7 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
                 'background-color': theme.surfaceRaised,
                 'border-color': theme.group.stroke,
                 'border-width': 1.25,
+                'border-style': 'solid',
                 'text-valign': 'center',
                 'text-halign': 'center',
                 'overlay-opacity': 0,
@@ -118,34 +110,27 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
             style: {
                 'background-color': theme.external.fill,
                 'border-color': theme.external.stroke,
-                'border-style': 'double',
-                'border-width': 3,
-            },
-        },
-        {
-            selector: 'node[kind = "culled-pass"]',
-            style: {
-                'background-color': theme.culled.fill,
-                'border-color': theme.culled.stroke,
-                'color': theme.muted,
-                'border-style': 'dashed',
-                'opacity': 0.72,
+                'shape': 'cut-rectangle',
+                'corner-radius': '10px',
             },
         },
         {
-            selector: 'node[kind = "resource"][resourceKind = "texture"]',
+            selector: 'node[kind = "resource"]',
             style: {
                 'shape': 'ellipse',
-                'background-color': theme.texture.fill,
-                'border-color': theme.texture.stroke,
+                'background-color': theme.declaration.fill,
+                'border-color': theme.declaration.stroke,
             },
         },
         {
-            selector: 'node[kind = "resource"][resourceKind = "buffer"]',
+            selector: 'node[kind = "root"]',
             style: {
-                'shape': 'ellipse',
-                'background-color': theme.buffer.fill,
-                'border-color': theme.buffer.stroke,
+                'shape': 'tag',
+                'background-color': theme.output.fill,
+                'border-color': theme.output.stroke,
+                'text-max-width': `${GRAPH_GEOMETRY.outputLabelWidth}px`,
+                // Native tag shoulders sit at 5/8 of its width. Center text in the rectangular body.
+                'text-margin-x': -GRAPH_GEOMETRY.outputWidth * 3 / 16,
             },
         },
         {
@@ -183,7 +168,7 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
                 'arrow-scale': 0.8,
                 'curve-style': 'straight',
                 'label': 'data(displayLabel)',
-                'font-family': 'ui-monospace, SFMono-Regular, Consolas, Liberation Mono, monospace',
+                'font-family': 'ui-monospace, SFMono-Regular, Consolas, Liberation Mono, monospace',
                 'font-size': 10,
                 'min-zoomed-font-size': GRAPH_GEOMETRY.minimumZoomedFontSize,
                 'color': theme.text,
@@ -196,7 +181,7 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
             },
         },
         {
-            selector: 'edge[dependencyKind = "ordering"]',
+            selector: 'edge[kind = "ordering"]',
             style: {
                 'line-color': theme.dependency.ordering,
                 'target-arrow-color': theme.dependency.ordering,
@@ -205,24 +190,6 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
                 'line-opacity': 0.72,
             },
         },
-        {
-            selector: 'edge[accessMode = "read"]',
-            style: {
-                'line-color': theme.access.read,
-                'target-arrow-color': theme.access.read,
-            },
-        },
-        {
-            selector: 'edge[accessMode = "write"]',
-            style: {
-                'line-color': theme.access.write,
-                'target-arrow-color': theme.access.write,
-            },
-        },
-        {
-            selector: 'edge[dashed = 1]',
-            style: { 'line-style': 'dashed', 'line-opacity': 0.46, 'opacity': 0.58 },
-        },
         {
             selector: 'edge.elk-route',
             style: {
@@ -263,9 +230,6 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
             style: {
                 'border-color': theme.selected,
                 'border-width': 3,
-                'underlay-color': theme.selected,
-                'underlay-padding': 5,
-                'underlay-opacity': 0.18,
                 'opacity': 1,
                 'z-index': 20,
             },
@@ -287,10 +251,10 @@ export function nodeDimensions(node: GraphSceneNode): { readonly width: number;
     switch (node.kind) {
         case 'pass':
             return { width: 184, height: node.label.includes('\n') ? 62 : 48 };
-        case 'culled-pass':
-            return { width: 184, height: 64 };
+        case 'root':
+            return { width: GRAPH_GEOMETRY.outputWidth, height: Math.max(58, node.label.split('\n').length * 17 + 24) };
         case 'resource':
-            return { width: 166, height: node.label.includes('\n') ? 58 : 46 };
+            return { width: 184, height: Math.max(58, node.label.split('\n').length * 17 + 24) };
         case 'group':
             return node.collapsed ? { width: 224, height: 68 } : { width: 120, height: 80 };
     }
@@ -301,13 +265,13 @@ export function graphLayoutGeometryKey(scene: GraphScene): string {
         topology: scene.topologyKey,
         dimensions: scene.nodes.map((node) => {
             const dimensions = nodeDimensions(node);
-            return [node.id, dimensions.width, dimensions.height];
+            return [node.id, dimensions.width, dimensions.height, node.kind === 'pass' && node.passKind === 'external-submission'];
         }),
     });
 }
 
-export function graphEdgeDisplayLabel(edge: GraphSceneEdge): string {
-    return edge.kind === 'access' ? '' : edge.label ?? '';
+export function graphEdgeDisplayLabel(_edge: GraphSceneEdge): string {
+    return '';
 }
 
 export function expandedGroupLabelMaxWidth(outerWidth: number): number {
@@ -319,7 +283,7 @@ export function isOverviewGraphScale(zoom: number): boolean {
 }
 
 function nodeLegend(key: string, label: string, color: string): GraphLegendEntry {
-    return { key, label, color, shape: 'box' };
+    return { group: 'Execution', key, label, color, shape: 'box' };
 }
 
 function edgeLegend(
@@ -328,7 +292,7 @@ function edgeLegend(
     color: string,
     lineStyle: NonNullable<GraphLegendEntry['lineStyle']>,
 ): GraphLegendEntry {
-    return { key, label, color, shape: 'line', lineStyle };
+    return { group: 'Relationships', key, label, color, shape: 'line', lineStyle };
 }
 
 function passStyle(

package/src/panelInspectorView.ts

@@ -1,5 +1,6 @@
 import type {
 	FrameGraphDebugAccess,
+	FrameGraphDebugRoot,
 	FrameGraphDebugResourceRef,
 	FrameGraphDebugViewModel,
 } from './debugCaptureModel.ts';
@@ -16,6 +17,28 @@ import {
 	type WorkbenchCallbacks,
 } from './panelWorkbenchHelpers.ts';
 
+type DetailRelation = readonly [label: string, selection: Selection, description?: string];
+
+function formatAccessFacts(access: FrameGraphDebugAccess): string {
+	return [
+		access.mode, access.access,
+		...(access.mode === 'write' ? [access.contents, `producesValue: ${access.producesValue}`] : []),
+		...(access.bufferRange ? [`bytes ${access.bufferRange.offset}–${access.bufferRange.size === undefined ? 'end' : access.bufferRange.offset + access.bufferRange.size}`] : []),
+		...(access.textureRegion ? [JSON.stringify(access.textureRegion)] : []),
+		...(access.textureViewId ? [`view ${access.textureViewId}`] : []),
+	].join(' · ');
+}
+
+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('; ');
+}
+
 export class InspectorView {
 	readonly root = document.createElement('aside');
 	private readonly title = document.createElement('strong');
@@ -26,6 +49,7 @@ export class InspectorView {
 	private selected: Selection | undefined;
 	private activeTab: InspectorTab = 'summary';
 	private open = true;
+	private hoveredLink: HTMLButtonElement | undefined;
 
 	constructor(
 		private readonly callbacks: WorkbenchCallbacks,
@@ -39,7 +63,7 @@ export class InspectorView {
 		const close = document.createElement('button');
 		close.type = 'button';
 		close.className = 'zenfg-inspector-inspector-close';
-		close.appendChild(createPanelIcon('close'));
+		close.appendChild(createPanelIcon('close'));
 		close.title = 'Close inspector';
 		close.setAttribute('aria-label', 'Close inspector');
 		close.addEventListener('click', () => this.setOpen(false));
@@ -76,6 +100,8 @@ export class InspectorView {
 	}
 
 	setSelection(selected: Selection | undefined, reveal = true): void {
+		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);
 		this.render();
@@ -83,6 +109,7 @@ export class InspectorView {
 
 	setOpen(open: boolean): void {
 		if (this.open === open) return;
+		if (!open) this.clearLinkHover();
 		this.open = open;
 		this.updateOpenState();
 		this.onOpenChange(open);
@@ -98,6 +125,7 @@ export class InspectorView {
 	}
 
 	private render(): void {
+		this.clearLinkHover();
 		for (const [tab, button] of this.tabs) {
 			const active = tab === this.activeTab;
 			button.classList.toggle('active', active);
@@ -140,7 +168,7 @@ export class InspectorView {
 				return resource ? labelResource(resource) : `Resource #${selection.id}`;
 			}
 			case 'allocation': return `Allocation #${selection.id}`;
-			case 'root': return `Retention root #${selection.index}`;
+			case 'root': return 'Output root';
 			case 'culled': return `Culled node #${selection.index}`;
 			case 'segment': return `Segment #${selection.index}`;
 		}
@@ -200,11 +228,16 @@ export class InspectorView {
 				]);
 			}
 			case 'root': {
-				const root = snapshot.roots[selection.index];
+				const root = snapshot.roots.find((root) => root.key === selection.key);
 				return this.summary(root ? [
 					['Reason', root.reason],
 					['Node', root.nodeId === undefined ? '-' : `#${root.nodeId}`],
-					['Resource', root.resource ? labelResource(root.resource) : '-'],
+					['Resource', root.resource ? this.viewResourceButton(snapshot, root.resource.id) : '-'],
+					...(root.reason === 'side-effect' ? [] : [
+						['Range', root.range ? JSON.stringify(root.range) : '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': {
@@ -254,6 +287,10 @@ export class InspectorView {
 					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'}`,
+							{ kind: 'root', key: root.key },
+						])),
 					);
 				}
 				break;
@@ -261,15 +298,20 @@ export class InspectorView {
 			case 'resource': {
 				const resource = snapshot.resourceById.get(selection.id);
 				const accesses = snapshot.accessesByResourceId.get(selection.id) ?? [];
-				const passRelations: Array<readonly [string, Selection]> = [];
+				const passRelations: DetailRelation[] = [];
 				for (const access of accesses) {
 					const nodeSelection = this.accessNodeSelection(snapshot, access.nodeId);
 					if (nodeSelection) passRelations.push([
-						`${access.mode} · ${this.accessNodeLabel(snapshot, access.nodeId)} · ${access.access}`,
+						this.accessNodeLabel(snapshot, access.nodeId),
 						nodeSelection,
+						formatAccessFacts(access),
 					]);
 				}
 				host.appendChild(this.relationGroup('Pass accesses', passRelations));
+				const roots = snapshot.roots.filter((root) => root.resource?.id === selection.id);
+				if (roots.length) host.appendChild(this.relationGroup('Output roots', roots.map((root) => [
+					`${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 }],
 				]));
@@ -283,13 +325,15 @@ export class InspectorView {
 				break;
 			}
 			case 'root': {
-				const root = snapshot.roots[selection.index];
+				const root = snapshot.roots.find((root) => root.key === selection.key);
 				const relations: Array<readonly [string, Selection]> = [];
 				if (root?.nodeId !== undefined && snapshot.nodeById.has(root.nodeId)) relations.push([
 					this.accessNodeLabel(snapshot, root.nodeId), { kind: 'node', id: root.nodeId },
 				]);
-				if (root?.resource) relations.push([labelResource(root.resource), { kind: 'resource', id: root.resource.id }]);
-				host.appendChild(this.relationGroup('Retained object', relations));
+				if (root?.resource) host.appendChild(this.relationGroup('Resource', [[labelResource(root.resource), { kind: 'resource', id: root.resource.id }]]));
+				if (root?.resource && root.resolution?.usesInitialContents) relations.push([`Initial contents · ${labelResource(root.resource)}`, { kind: 'resource', id: root.resource.id }]);
+				for (const id of root?.resolution?.producerNodeIds ?? []) relations.push([this.accessNodeLabel(snapshot, id), { kind: 'node', id }]);
+				host.appendChild(this.relationGroup('Output sources', relations));
 				break;
 			}
 			case 'culled': {
@@ -320,8 +364,9 @@ export class InspectorView {
 
 	private accessRelations(title: string, accesses: readonly FrameGraphDebugAccess[]): HTMLElement {
 		return this.relationGroup(title, accesses.map((access) => [
-			`${labelResource(access.resource)} · ${access.access}${access.mode === 'write' ? ` · ${access.contents}` : ''}`,
+			labelResource(access.resource),
 			{ kind: 'resource', id: access.resource.id },
+			formatAccessFacts(access),
 		]));
 	}
 
@@ -331,13 +376,24 @@ export class InspectorView {
 		]));
 	}
 
-	private relationGroup(title: string, relations: readonly (readonly [string, Selection])[]): HTMLElement {
+	private relationGroup(title: string, relations: readonly DetailRelation[]): HTMLElement {
 		const section = document.createElement('section');
 		const heading = document.createElement('h3');
 		heading.textContent = `${title} ${relations.length}`;
 		section.appendChild(heading);
-		for (const [label, selection] of relations) {
-			section.appendChild(createRelationButton(label, selection, this.callbacks.onSelect));
+		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 metadata = document.createElement('span');
+				metadata.className = 'zenfg-inspector-muted';
+				metadata.textContent = description;
+				entry.append(link, metadata);
+				section.appendChild(entry);
+			}
 		}
 		if (relations.length === 0) {
 			const empty = document.createElement('span');
@@ -348,15 +404,47 @@ export class InspectorView {
 		return section;
 	}
 
-	private summary(rows: readonly (readonly [string, string])[]): HTMLElement {
+	private selectRelated(selection: Selection): void {
+		this.clearLinkHover();
+		this.callbacks.onSelect(selection);
+	}
+
+	private viewResourceButton(snapshot: FrameGraphDebugViewModel, resourceId: string): HTMLButtonElement {
+		return this.createDetailLink(`View resource · ${resourceLabel(snapshot, resourceId)}`,
+			{ kind: 'resource', id: resourceId });
+	}
+
+	private createDetailLink(label: string, selection: Selection): HTMLButtonElement {
+		const link = createRelationButton(label, selection, (target) => this.selectRelated(target));
+		link.addEventListener('mouseenter', () => {
+			this.hoveredLink = link;
+			this.callbacks.onHover(selection);
+		});
+		link.addEventListener('mouseleave', () => {
+			if (this.hoveredLink === link) this.clearLinkHover();
+		});
+		return link;
+	}
+
+	private clearLinkHover(): void {
+		if (!this.hoveredLink) return;
+		this.hoveredLink = undefined;
+		this.callbacks.onHover(undefined);
+	}
+
+	private summary(rows: readonly (readonly [string, string | HTMLElement])[]): HTMLElement {
 		const summary = document.createElement('dl');
 		summary.className = 'zenfg-inspector-inspector-summary';
 		for (const [label, value] of rows) {
 			const term = document.createElement('dt');
 			term.textContent = label;
 			const description = document.createElement('dd');
-			description.textContent = value;
-			description.title = value;
+			if (typeof value === 'string') {
+				description.textContent = value;
+				description.title = value;
+			} else {
+				description.appendChild(value);
+			}
 			summary.append(term, description);
 		}
 		return summary;

package/src/panelSelection.ts

@@ -26,7 +26,7 @@ export function resolveSelectedDetail(
 		case 'group':
 			return snapshot.groupByPathKey.get(selected.pathKey);
 		case 'root':
-			return snapshot.roots[selected.index];
+			return snapshot.roots.find((root) => root.key === selected.key);
 		case 'culled': {
 			const culled = snapshot.culledNodes[selected.index];
 			return culled ? {
@@ -54,7 +54,7 @@ export function selectionExists(snapshot: FrameGraphDebugViewModel, selected: Se
 		case 'resource':
 			return snapshot.resourceById.has(selected.id);
 		case 'root':
-			return isValidIndex(selected.index, snapshot.roots.length);
+			return snapshot.roots.filter((root) => root.key === selected.key).length === 1;
 		case 'culled':
 			return isValidIndex(selected.index, snapshot.culledNodes.length);
 		case 'allocation':

package/src/panelTypes.ts

@@ -1,10 +1,18 @@
 import type { GraphRenderer } from './panelGraphRenderer.ts';
+import type { FrameGraphDebugEdge } from './debugCaptureModel.ts';
+
+export type GraphFlowRelation = {
+    readonly role: 'declaration' | 'value' | 'ordering' | 'output-producer' | 'output-initial';
+    readonly nodeIds: readonly string[];
+    readonly rootKey?: string;
+    readonly dependency?: FrameGraphDebugEdge;
+};
 
 export type Selection =
     | { kind: 'node'; id: string }
     | { kind: 'group'; pathKey: string }
     | { kind: 'resource'; id: string }
-    | { kind: 'root'; index: number }
+    | { kind: 'root'; key: string }
     | { kind: 'culled'; index: number }
     | { kind: 'allocation'; id: string }
     | { kind: 'segment'; index: number };
@@ -12,14 +20,12 @@ export type Selection =
 export type WorkbenchTab = 'overview' | 'graph' | 'passes' | 'resources' | 'memory' | 'diagnostics';
 export type PassesSubview = 'list' | 'groups';
 export type InspectorTab = 'summary' | 'relations' | 'raw';
-export type GraphViewMode = 'passes' | 'resources';
 
 export type GraphViewState = {
     readonly host: HTMLElement;
     readonly toolbar: HTMLElement;
     readonly legend?: HTMLElement;
 	readonly layoutElementBudget?: number;
-    graphMode: GraphViewMode;
     groupsEnabled: boolean;
     readonly expandedGroupPaths: Set<string>;
     renderer?: GraphRenderer;