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

package/dist/panelGraphVisuals.js

@@ -1,4 +1,5 @@
 import { GRAPH_VISUAL_THEME } from "./panelVisualTheme.js";
+import { declarationEntrances } from "./debugCaptureModel.js";
 export { GRAPH_VISUAL_THEME } from "./panelVisualTheme.js";
 export const GRAPH_GEOMETRY = {
     fitPadding: 28,
@@ -10,6 +11,8 @@ export const GRAPH_GEOMETRY = {
     groupPadding: 32,
     elkGroupPadding: { top: 46, right: 24, bottom: 24, left: 24 },
     edgeCornerRadius: 6,
+    outputWidth: 256,
+    outputLabelWidth: 144,
 };
 const ENDPOINT_EDGE_DISTANCES = 'endpoints';
 const EDGE_SEGMENT_RADII = `${GRAPH_GEOMETRY.edgeCornerRadius}px`;
@@ -19,50 +22,39 @@ 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' },
 };
-export function createGraphLegend(scene) {
+export function createGraphLegend(snapshot) {
     const entries = [];
-    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']) {
         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;
 }
 export function createGraphStyles() {
@@ -84,6 +76,7 @@ export function createGraphStyles() {
                 '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,
@@ -100,34 +93,27 @@ export function createGraphStyles() {
             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,
             },
         },
         {
@@ -178,7 +164,7 @@ export function createGraphStyles() {
             },
         },
         {
-            selector: 'edge[dependencyKind = "ordering"]',
+            selector: 'edge[kind = "ordering"]',
             style: {
                 'line-color': theme.dependency.ordering,
                 'target-arrow-color': theme.dependency.ordering,
@@ -187,24 +173,6 @@ export function createGraphStyles() {
                 '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: {
@@ -245,9 +213,6 @@ export function createGraphStyles() {
             style: {
                 'border-color': theme.selected,
                 'border-width': 3,
-                'underlay-color': theme.selected,
-                'underlay-padding': 5,
-                'underlay-opacity': 0.18,
                 'opacity': 1,
                 'z-index': 20,
             },
@@ -268,10 +233,10 @@ export function nodeDimensions(node) {
     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 };
     }
@@ -281,12 +246,12 @@ export function graphLayoutGeometryKey(scene) {
         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) {
-    return edge.kind === 'access' ? '' : edge.label ?? '';
+export function graphEdgeDisplayLabel(_edge) {
+    return '';
 }
 export function expandedGroupLabelMaxWidth(outerWidth) {
     return Math.max(80, Math.floor(outerWidth - GRAPH_GEOMETRY.groupTitleInset * 2));
@@ -295,10 +260,10 @@ export function isOverviewGraphScale(zoom) {
     return GRAPH_GEOMETRY.baseFontSize * zoom < GRAPH_GEOMETRY.overviewFontThreshold;
 }
 function nodeLegend(key, label, color) {
-    return { key, label, color, shape: 'box' };
+    return { group: 'Execution', key, label, color, shape: 'box' };
 }
 function edgeLegend(key, label, color, lineStyle) {
-    return { key, label, color, shape: 'line', lineStyle };
+    return { group: 'Relationships', key, label, color, shape: 'line', lineStyle };
 }
 function passStyle(kind, colors) {
     return {

package/dist/panelGraphVisuals.js.map

@@ -1 +1 @@
-{"version":3,"file":"panelGraphVisuals.js","sourceRoot":"","sources":["../src/panelGraphVisuals.ts"],"names":[],"mappings":"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","sourcesContent":["import type cytoscape from 'cytoscape';\n\nimport type { GraphScene, GraphSceneEdge, GraphSceneNode } from './panelGraphScene.ts';\nimport { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';\n\nexport { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';\n\n\nexport const GRAPH_GEOMETRY = {\n    fitPadding: 28,\n    baseFontSize: 13,\n    overviewFontThreshold: 9,\n    minimumZoomedFontSize: 5,\n    groupTitleInset: 8,\n    groupTitleLineHeight: 1.2,\n    groupPadding: 32,\n    elkGroupPadding: { top: 46, right: 24, bottom: 24, left: 24 },\n    edgeCornerRadius: 6,\n} as const;\n\nconst ENDPOINT_EDGE_DISTANCES = 'endpoints' as unknown as cytoscape.Css.Edge['edge-distances'];\nconst EDGE_SEGMENT_RADII = `${GRAPH_GEOMETRY.edgeCornerRadius}px` as unknown as cytoscape.Css.Edge['segment-radii'];\n\nexport type GraphLegendEntry = {\n    readonly key: string;\n    readonly label: string;\n    readonly color: string;\n    readonly shape: 'box' | 'ellipse' | 'group' | 'line';\n    readonly lineStyle?: 'solid' | 'dotted' | 'dashed';\n    readonly hollowArrow?: boolean;\n};\n\nconst NODE_LEGEND_ENTRIES = {\n    render: nodeLegend('render', 'Render', GRAPH_VISUAL_THEME.render.stroke),\n    compute: nodeLegend('compute', 'Compute', GRAPH_VISUAL_THEME.compute.stroke),\n    copy: nodeLegend('copy', 'Copy', GRAPH_VISUAL_THEME.copy.stroke),\n    'clear-buffer': nodeLegend('clear', 'Clear', GRAPH_VISUAL_THEME.clear.stroke),\n    command: nodeLegend('command', 'Command', GRAPH_VISUAL_THEME.command.stroke),\n    'external-submission': nodeLegend('external', 'External', GRAPH_VISUAL_THEME.external.stroke),\n} as const;\n\nexport function createGraphLegend(scene: GraphScene): readonly GraphLegendEntry[] {\n    const entries: GraphLegendEntry[] = [];\n    const passKinds = new Set(scene.nodes.flatMap((node) => node.kind === 'pass' || node.kind === 'culled-pass'\n        ? [node.passKind]\n        : []));\n    for (const kind of ['render', 'compute', 'copy', 'clear-buffer', 'command', 'external-submission'] as const) {\n        if (passKinds.has(kind)) entries.push(NODE_LEGEND_ENTRIES[kind]);\n    }\n    if (scene.nodes.some((node) => node.kind === 'group')) {\n        entries.push({ key: 'group', label: 'Group', color: GRAPH_VISUAL_THEME.group.stroke, shape: 'group' });\n    }\n    if (scene.nodes.some((node) => node.kind === 'resource' && node.resourceKind === 'texture')) {\n        entries.push({ key: 'texture', label: 'Texture', color: GRAPH_VISUAL_THEME.texture.stroke, shape: 'ellipse' });\n    }\n    if (scene.nodes.some((node) => node.kind === 'resource' && node.resourceKind === 'buffer')) {\n        entries.push({ key: 'buffer', label: 'Buffer', color: GRAPH_VISUAL_THEME.buffer.stroke, shape: 'ellipse' });\n    }\n    if (scene.nodes.some((node) => node.kind === 'culled-pass')) {\n        entries.push({\n            key: 'culled',\n            label: 'Culled',\n            color: GRAPH_VISUAL_THEME.culled.stroke,\n            shape: 'box',\n            lineStyle: 'dashed',\n        });\n    }\n    if (scene.edges.some((edge) => edge.kind === 'dependency' && edge.dependencyKind === 'value')) {\n        entries.push(edgeLegend('value', 'Value', GRAPH_VISUAL_THEME.dependency.value, 'solid'));\n    }\n    if (scene.edges.some((edge) => edge.kind === 'dependency' && edge.dependencyKind === 'ordering')) {\n        entries.push({\n            ...edgeLegend('ordering', 'Order', GRAPH_VISUAL_THEME.dependency.ordering, 'dotted'),\n            hollowArrow: true,\n        });\n    }\n    if (scene.edges.some((edge) => edge.kind === 'access' && edge.accessMode === 'read')) {\n        entries.push(edgeLegend('read', 'Read', GRAPH_VISUAL_THEME.access.read, 'solid'));\n    }\n    if (scene.edges.some((edge) => edge.kind === 'access' && edge.accessMode === 'write')) {\n        entries.push(edgeLegend('write', 'Write', GRAPH_VISUAL_THEME.access.write, 'solid'));\n    }\n    return entries;\n}\n\nexport function createGraphStyles(): cytoscape.StylesheetJson {\n    const theme = GRAPH_VISUAL_THEME;\n    return [\n        {\n            selector: 'node',\n            style: {\n                'shape': 'round-rectangle',\n                'width': 'data(width)',\n                'height': 'data(height)',\n                'label': 'data(displayLabel)',\n                'text-wrap': 'wrap',\n                'text-max-width': '160px',\n                'font-family': 'ui-monospace, SFMono-Regular, Consolas, Liberation Mono, monospace',\n                'font-size': GRAPH_GEOMETRY.baseFontSize,\n                'min-zoomed-font-size': GRAPH_GEOMETRY.minimumZoomedFontSize,\n                'color': theme.text,\n                'background-color': theme.surfaceRaised,\n                'border-color': theme.group.stroke,\n                'border-width': 1.25,\n                'text-valign': 'center',\n                'text-halign': 'center',\n                'overlay-opacity': 0,\n                'underlay-opacity': 0,\n            },\n        },\n        passStyle('render', theme.render),\n        passStyle('compute', theme.compute),\n        passStyle('copy', theme.copy),\n        passStyle('clear-buffer', theme.clear),\n        passStyle('command', theme.command),\n        {\n            selector: 'node[passKind = \"external-submission\"]',\n            style: {\n                'background-color': theme.external.fill,\n                'border-color': theme.external.stroke,\n                'border-style': 'double',\n                'border-width': 3,\n            },\n        },\n        {\n            selector: 'node[kind = \"culled-pass\"]',\n            style: {\n                'background-color': theme.culled.fill,\n                'border-color': theme.culled.stroke,\n                'color': theme.muted,\n                'border-style': 'dashed',\n                'opacity': 0.72,\n            },\n        },\n        {\n            selector: 'node[kind = \"resource\"][resourceKind = \"texture\"]',\n            style: {\n                'shape': 'ellipse',\n                'background-color': theme.texture.fill,\n                'border-color': theme.texture.stroke,\n            },\n        },\n        {\n            selector: 'node[kind = \"resource\"][resourceKind = \"buffer\"]',\n            style: {\n                'shape': 'ellipse',\n                'background-color': theme.buffer.fill,\n                'border-color': theme.buffer.stroke,\n            },\n        },\n        {\n            selector: 'node[kind = \"group\"]',\n            style: {\n                'text-max-width': (element: cytoscape.SingularElementArgument) => `${element.data('labelMaxWidth') as number}px`,\n            },\n        },\n        {\n            selector: 'node[kind = \"group\"][collapsed = 1]',\n            style: {\n                'background-color': theme.group.fill,\n                'border-color': theme.group.stroke,\n                'border-width': 2,\n                'color': theme.text,\n            },\n        },\n        {\n            selector: 'node[kind = \"group\"][collapsed = 0]',\n            style: expandedGroupStyle(theme.group.fill),\n        },\n        {\n            selector: 'node[kind = \"group\"][collapsed = 0][depthBand = 1]',\n            style: { 'background-color': theme.group.alternateFill },\n        },\n        {\n            selector: 'edge',\n            style: {\n                'width': 1.5,\n                'line-color': theme.dependency.value,\n                'line-opacity': 0.82,\n                'target-arrow-color': theme.dependency.value,\n                'target-arrow-shape': 'triangle',\n                'target-arrow-fill': 'filled',\n                'arrow-scale': 0.8,\n                'curve-style': 'straight',\n                'label': 'data(displayLabel)',\n                'font-family': 'ui-monospace, SFMono-Regular, Consolas, Liberation Mono, monospace',\r\n                'font-size': 10,\n                'min-zoomed-font-size': GRAPH_GEOMETRY.minimumZoomedFontSize,\n                'color': theme.text,\n                'text-background-color': theme.canvas,\n                'text-background-opacity': 0.82,\n                'text-background-padding': '2px',\n                'text-rotation': 'autorotate',\n                'overlay-opacity': 0,\n                'underlay-opacity': 0,\n            },\n        },\n        {\n            selector: 'edge[dependencyKind = \"ordering\"]',\n            style: {\n                'line-color': theme.dependency.ordering,\n                'target-arrow-color': theme.dependency.ordering,\n                'line-style': 'dotted',\n                'target-arrow-fill': 'hollow',\n                'line-opacity': 0.72,\n            },\n        },\n        {\n            selector: 'edge[accessMode = \"read\"]',\n            style: {\n                'line-color': theme.access.read,\n                'target-arrow-color': theme.access.read,\n            },\n        },\n        {\n            selector: 'edge[accessMode = \"write\"]',\n            style: {\n                'line-color': theme.access.write,\n                'target-arrow-color': theme.access.write,\n            },\n        },\n        {\n            selector: 'edge[dashed = 1]',\n            style: { 'line-style': 'dashed', 'line-opacity': 0.46, 'opacity': 0.58 },\n        },\n        {\n            selector: 'edge.elk-route',\n            style: {\n                'source-endpoint': 'data(sourceEndpoint)',\n                'target-endpoint': 'data(targetEndpoint)',\n                'edge-distances': ENDPOINT_EDGE_DISTANCES,\n            },\n        },\n        {\n            selector: 'edge.elk-segments',\n            style: {\n                'curve-style': 'round-segments',\n                'segment-distances': 'data(segmentDistances)',\n                'segment-weights': 'data(segmentWeights)',\n                'segment-radii': EDGE_SEGMENT_RADII,\n            },\n        },\n        {\n            selector: 'node.semantic-hover',\n            style: {\n                'border-color': theme.hover,\n                'border-width': 2,\n                'z-index': 15,\n            },\n        },\n        {\n            selector: 'edge.semantic-hover',\n            style: {\n                'line-color': theme.hover,\n                'target-arrow-color': theme.hover,\n                'line-opacity': 1,\n                'width': 2.5,\n                'z-index': 15,\n            },\n        },\n        {\n            selector: 'node.semantic-selected',\n            style: {\n                'border-color': theme.selected,\n                'border-width': 3,\n                'underlay-color': theme.selected,\n                'underlay-padding': 5,\n                'underlay-opacity': 0.18,\n                'opacity': 1,\n                'z-index': 20,\n            },\n        },\n        {\n            selector: 'edge.semantic-selected',\n            style: {\n                'line-color': theme.selected,\n                'target-arrow-color': theme.selected,\n                'line-opacity': 1,\n                'width': 3,\n                'z-index': 20,\n            },\n        },\n    ];\n}\n\nexport function nodeDimensions(node: GraphSceneNode): { readonly width: number; readonly height: number } {\n    switch (node.kind) {\n        case 'pass':\n            return { width: 184, height: node.label.includes('\\n') ? 62 : 48 };\n        case 'culled-pass':\n            return { width: 184, height: 64 };\n        case 'resource':\n            return { width: 166, height: node.label.includes('\\n') ? 58 : 46 };\n        case 'group':\n            return node.collapsed ? { width: 224, height: 68 } : { width: 120, height: 80 };\n    }\n}\n\nexport function graphLayoutGeometryKey(scene: GraphScene): string {\n    return JSON.stringify({\n        topology: scene.topologyKey,\n        dimensions: scene.nodes.map((node) => {\n            const dimensions = nodeDimensions(node);\n            return [node.id, dimensions.width, dimensions.height];\n        }),\n    });\n}\n\nexport function graphEdgeDisplayLabel(edge: GraphSceneEdge): string {\n    return edge.kind === 'access' ? '' : edge.label ?? '';\n}\n\nexport function expandedGroupLabelMaxWidth(outerWidth: number): number {\n    return Math.max(80, Math.floor(outerWidth - GRAPH_GEOMETRY.groupTitleInset * 2));\n}\n\nexport function isOverviewGraphScale(zoom: number): boolean {\n    return GRAPH_GEOMETRY.baseFontSize * zoom < GRAPH_GEOMETRY.overviewFontThreshold;\n}\n\nfunction nodeLegend(key: string, label: string, color: string): GraphLegendEntry {\n    return { key, label, color, shape: 'box' };\n}\n\nfunction edgeLegend(\n    key: string,\n    label: string,\n    color: string,\n    lineStyle: NonNullable<GraphLegendEntry['lineStyle']>,\n): GraphLegendEntry {\n    return { key, label, color, shape: 'line', lineStyle };\n}\n\nfunction passStyle(\n    kind: string,\n    colors: { readonly stroke: string; readonly fill: string },\n): cytoscape.StylesheetStyle {\n    return {\n        selector: `node[passKind = \"${kind}\"]`,\n        style: { 'background-color': colors.fill, 'border-color': colors.stroke },\n    };\n}\n\nfunction expandedGroupStyle(backgroundColor: string): cytoscape.Css.Node {\n    const geometry = GRAPH_GEOMETRY;\n    return {\n        'background-color': backgroundColor,\n        'background-opacity': 0.34,\n        'border-color': GRAPH_VISUAL_THEME.group.stroke,\n        'border-width': 1.5,\n        'padding': `${geometry.groupPadding}px`,\n        'compound-sizing-wrt-labels': 'include',\n        'min-width': '120px',\n        'min-height': '80px',\n        'text-valign': 'top-inside',\n        'text-halign': 'left-inside',\n        'text-justification': 'left',\n        'text-margin-x': geometry.groupTitleInset - geometry.groupPadding * 2,\n        'text-margin-y': geometry.groupTitleInset - geometry.groupPadding * 2,\n        'line-height': geometry.groupTitleLineHeight,\n        'color': GRAPH_VISUAL_THEME.text,\n        'font-weight': 600,\n    };\n}\n"]}
+{"version":3,"file":"panelGraphVisuals.js","sourceRoot":"","sources":["../src/panelGraphVisuals.ts"],"names":[],"mappings":"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","sourcesContent":["import type cytoscape from 'cytoscape';\n\nimport type { GraphScene, GraphSceneEdge, GraphSceneNode } from './panelGraphScene.ts';\nimport { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';\nimport { declarationEntrances, type FrameGraphDebugViewModel } from './debugCaptureModel.ts';\n\nexport { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';\n\n\nexport const GRAPH_GEOMETRY = {\n    fitPadding: 28,\n    baseFontSize: 13,\n    overviewFontThreshold: 9,\n    minimumZoomedFontSize: 5,\n    groupTitleInset: 8,\n    groupTitleLineHeight: 1.2,\n    groupPadding: 32,\n    elkGroupPadding: { top: 46, right: 24, bottom: 24, left: 24 },\n    edgeCornerRadius: 6,\n    outputWidth: 256,\n    outputLabelWidth: 144,\n} as const;\n\nconst ENDPOINT_EDGE_DISTANCES = 'endpoints' as unknown as cytoscape.Css.Edge['edge-distances'];\nconst EDGE_SEGMENT_RADII = `${GRAPH_GEOMETRY.edgeCornerRadius}px` as unknown as cytoscape.Css.Edge['segment-radii'];\n\nexport type GraphLegendEntry = {\n    readonly group: 'Execution' | 'Resources' | 'Relationships';\n    readonly key: string;\n    readonly label: string;\n    readonly color: string;\n    readonly shape: 'box' | 'cut-rectangle' | 'tag' | 'ellipse' | 'group' | 'line';\n    readonly lineStyle?: 'solid' | 'dotted' | 'dashed';\n    readonly hollowArrow?: boolean;\n};\n\nconst NODE_LEGEND_ENTRIES = {\n    render: nodeLegend('render', 'Render', GRAPH_VISUAL_THEME.render.stroke),\n    compute: nodeLegend('compute', 'Compute', GRAPH_VISUAL_THEME.compute.stroke),\n    copy: nodeLegend('copy', 'Copy', GRAPH_VISUAL_THEME.copy.stroke),\n    'clear-buffer': nodeLegend('clear', 'Clear', GRAPH_VISUAL_THEME.clear.stroke),\n    command: nodeLegend('command', 'Command', GRAPH_VISUAL_THEME.command.stroke),\n    'external-submission': { ...nodeLegend('external', 'External', GRAPH_VISUAL_THEME.external.stroke), shape: 'cut-rectangle' as const },\n} as const;\n\nexport function createGraphLegend(snapshot: FrameGraphDebugViewModel): readonly GraphLegendEntry[] {\n    const entries: GraphLegendEntry[] = [];\n    const passKinds = new Set(snapshot.nodes.map((node) => node.kind));\n    for (const kind of ['render', 'compute', 'copy', 'clear-buffer', 'command', 'external-submission'] as const) {\n        if (passKinds.has(kind)) entries.push(NODE_LEGEND_ENTRIES[kind]);\n    }\n    const retained = new Set(snapshot.nodes.map((node) => node.id));\n    const used = new Set([\n        ...snapshot.accessEdges.filter((access) => retained.has(access.nodeId)).map((access) => access.resource.id),\n        ...snapshot.roots.flatMap((root) => root.resource ? [root.resource.id] : []),\n    ]);\n    const resources = snapshot.resources.filter((resource) => used.has(resource.id));\n    if (resources.length) entries.push({ group: 'Resources', key: 'declaration', label: 'Declaration', color: GRAPH_VISUAL_THEME.declaration.stroke, shape: 'ellipse' });\n    if (snapshot.roots.some((root) => root.resource)) entries.push({ group: 'Resources', key: 'output', label: 'Output', color: GRAPH_VISUAL_THEME.output.stroke, shape: 'tag' });\n    if ([...snapshot.nodes, ...resources].some((item) => item.debugGroupId !== undefined)) {\n        entries.push({ group: 'Relationships', key: 'group', label: 'Group', color: GRAPH_VISUAL_THEME.group.stroke, shape: 'group' });\n    }\n    if (snapshot.edges.some((edge) => edge.kind === 'value')\n        || declarationEntrances(snapshot.nodes, snapshot.accessEdges, snapshot.edges).length\n        || snapshot.roots.some((root) => root.resource && root.resolution && (root.resolution.usesInitialContents || root.resolution.producerNodeIds.length))) {\n        entries.push(edgeLegend('flow', 'Resource Flow', GRAPH_VISUAL_THEME.dependency.value, 'solid'));\n    }\n    if (snapshot.edges.some((edge) => edge.kind === 'ordering')) {\n        entries.push({\n            ...edgeLegend('ordering', 'Order', GRAPH_VISUAL_THEME.dependency.ordering, 'dotted'),\n            hollowArrow: true,\n        });\n    }\n    return entries;\n}\n\nexport function createGraphStyles(): cytoscape.StylesheetJson {\n    const theme = GRAPH_VISUAL_THEME;\n    return [\n        {\n            selector: 'node',\n            style: {\n                'shape': 'round-rectangle',\n                'width': 'data(width)',\n                'height': 'data(height)',\n                'label': 'data(displayLabel)',\n                'text-wrap': 'wrap',\n                'text-max-width': '160px',\n                'font-family': 'ui-monospace, SFMono-Regular, Consolas, Liberation Mono, monospace',\n                'font-size': GRAPH_GEOMETRY.baseFontSize,\n                'min-zoomed-font-size': GRAPH_GEOMETRY.minimumZoomedFontSize,\n                'color': theme.text,\n                'background-color': theme.surfaceRaised,\n                'border-color': theme.group.stroke,\n                'border-width': 1.25,\n                'border-style': 'solid',\n                'text-valign': 'center',\n                'text-halign': 'center',\n                'overlay-opacity': 0,\n                'underlay-opacity': 0,\n            },\n        },\n        passStyle('render', theme.render),\n        passStyle('compute', theme.compute),\n        passStyle('copy', theme.copy),\n        passStyle('clear-buffer', theme.clear),\n        passStyle('command', theme.command),\n        {\n            selector: 'node[passKind = \"external-submission\"]',\n            style: {\n                'background-color': theme.external.fill,\n                'border-color': theme.external.stroke,\n                'shape': 'cut-rectangle',\n                'corner-radius': '10px',\n            },\n        },\n        {\n            selector: 'node[kind = \"resource\"]',\n            style: {\n                'shape': 'ellipse',\n                'background-color': theme.declaration.fill,\n                'border-color': theme.declaration.stroke,\n            },\n        },\n        {\n            selector: 'node[kind = \"root\"]',\n            style: {\n                'shape': 'tag',\n                'background-color': theme.output.fill,\n                'border-color': theme.output.stroke,\n                'text-max-width': `${GRAPH_GEOMETRY.outputLabelWidth}px`,\n                // Native tag shoulders sit at 5/8 of its width. Center text in the rectangular body.\n                'text-margin-x': -GRAPH_GEOMETRY.outputWidth * 3 / 16,\n            },\n        },\n        {\n            selector: 'node[kind = \"group\"]',\n            style: {\n                'text-max-width': (element: cytoscape.SingularElementArgument) => `${element.data('labelMaxWidth') as number}px`,\n            },\n        },\n        {\n            selector: 'node[kind = \"group\"][collapsed = 1]',\n            style: {\n                'background-color': theme.group.fill,\n                'border-color': theme.group.stroke,\n                'border-width': 2,\n                'color': theme.text,\n            },\n        },\n        {\n            selector: 'node[kind = \"group\"][collapsed = 0]',\n            style: expandedGroupStyle(theme.group.fill),\n        },\n        {\n            selector: 'node[kind = \"group\"][collapsed = 0][depthBand = 1]',\n            style: { 'background-color': theme.group.alternateFill },\n        },\n        {\n            selector: 'edge',\n            style: {\n                'width': 1.5,\n                'line-color': theme.dependency.value,\n                'line-opacity': 0.82,\n                'target-arrow-color': theme.dependency.value,\n                'target-arrow-shape': 'triangle',\n                'target-arrow-fill': 'filled',\n                'arrow-scale': 0.8,\n                'curve-style': 'straight',\n                'label': 'data(displayLabel)',\n                'font-family': 'ui-monospace, SFMono-Regular, Consolas, Liberation Mono, monospace',\n                'font-size': 10,\n                'min-zoomed-font-size': GRAPH_GEOMETRY.minimumZoomedFontSize,\n                'color': theme.text,\n                'text-background-color': theme.canvas,\n                'text-background-opacity': 0.82,\n                'text-background-padding': '2px',\n                'text-rotation': 'autorotate',\n                'overlay-opacity': 0,\n                'underlay-opacity': 0,\n            },\n        },\n        {\n            selector: 'edge[kind = \"ordering\"]',\n            style: {\n                'line-color': theme.dependency.ordering,\n                'target-arrow-color': theme.dependency.ordering,\n                'line-style': 'dotted',\n                'target-arrow-fill': 'hollow',\n                'line-opacity': 0.72,\n            },\n        },\n        {\n            selector: 'edge.elk-route',\n            style: {\n                'source-endpoint': 'data(sourceEndpoint)',\n                'target-endpoint': 'data(targetEndpoint)',\n                'edge-distances': ENDPOINT_EDGE_DISTANCES,\n            },\n        },\n        {\n            selector: 'edge.elk-segments',\n            style: {\n                'curve-style': 'round-segments',\n                'segment-distances': 'data(segmentDistances)',\n                'segment-weights': 'data(segmentWeights)',\n                'segment-radii': EDGE_SEGMENT_RADII,\n            },\n        },\n        {\n            selector: 'node.semantic-hover',\n            style: {\n                'border-color': theme.hover,\n                'border-width': 2,\n                'z-index': 15,\n            },\n        },\n        {\n            selector: 'edge.semantic-hover',\n            style: {\n                'line-color': theme.hover,\n                'target-arrow-color': theme.hover,\n                'line-opacity': 1,\n                'width': 2.5,\n                'z-index': 15,\n            },\n        },\n        {\n            selector: 'node.semantic-selected',\n            style: {\n                'border-color': theme.selected,\n                'border-width': 3,\n                'opacity': 1,\n                'z-index': 20,\n            },\n        },\n        {\n            selector: 'edge.semantic-selected',\n            style: {\n                'line-color': theme.selected,\n                'target-arrow-color': theme.selected,\n                'line-opacity': 1,\n                'width': 3,\n                'z-index': 20,\n            },\n        },\n    ];\n}\n\nexport function nodeDimensions(node: GraphSceneNode): { readonly width: number; readonly height: number } {\n    switch (node.kind) {\n        case 'pass':\n            return { width: 184, height: node.label.includes('\\n') ? 62 : 48 };\n        case 'root':\n            return { width: GRAPH_GEOMETRY.outputWidth, height: Math.max(58, node.label.split('\\n').length * 17 + 24) };\n        case 'resource':\n            return { width: 184, height: Math.max(58, node.label.split('\\n').length * 17 + 24) };\n        case 'group':\n            return node.collapsed ? { width: 224, height: 68 } : { width: 120, height: 80 };\n    }\n}\n\nexport function graphLayoutGeometryKey(scene: GraphScene): string {\n    return JSON.stringify({\n        topology: scene.topologyKey,\n        dimensions: scene.nodes.map((node) => {\n            const dimensions = nodeDimensions(node);\n            return [node.id, dimensions.width, dimensions.height, node.kind === 'pass' && node.passKind === 'external-submission'];\n        }),\n    });\n}\n\nexport function graphEdgeDisplayLabel(_edge: GraphSceneEdge): string {\n    return '';\n}\n\nexport function expandedGroupLabelMaxWidth(outerWidth: number): number {\n    return Math.max(80, Math.floor(outerWidth - GRAPH_GEOMETRY.groupTitleInset * 2));\n}\n\nexport function isOverviewGraphScale(zoom: number): boolean {\n    return GRAPH_GEOMETRY.baseFontSize * zoom < GRAPH_GEOMETRY.overviewFontThreshold;\n}\n\nfunction nodeLegend(key: string, label: string, color: string): GraphLegendEntry {\n    return { group: 'Execution', key, label, color, shape: 'box' };\n}\n\nfunction edgeLegend(\n    key: string,\n    label: string,\n    color: string,\n    lineStyle: NonNullable<GraphLegendEntry['lineStyle']>,\n): GraphLegendEntry {\n    return { group: 'Relationships', key, label, color, shape: 'line', lineStyle };\n}\n\nfunction passStyle(\n    kind: string,\n    colors: { readonly stroke: string; readonly fill: string },\n): cytoscape.StylesheetStyle {\n    return {\n        selector: `node[passKind = \"${kind}\"]`,\n        style: { 'background-color': colors.fill, 'border-color': colors.stroke },\n    };\n}\n\nfunction expandedGroupStyle(backgroundColor: string): cytoscape.Css.Node {\n    const geometry = GRAPH_GEOMETRY;\n    return {\n        'background-color': backgroundColor,\n        'background-opacity': 0.34,\n        'border-color': GRAPH_VISUAL_THEME.group.stroke,\n        'border-width': 1.5,\n        'padding': `${geometry.groupPadding}px`,\n        'compound-sizing-wrt-labels': 'include',\n        'min-width': '120px',\n        'min-height': '80px',\n        'text-valign': 'top-inside',\n        'text-halign': 'left-inside',\n        'text-justification': 'left',\n        'text-margin-x': geometry.groupTitleInset - geometry.groupPadding * 2,\n        'text-margin-y': geometry.groupTitleInset - geometry.groupPadding * 2,\n        'line-height': geometry.groupTitleLineHeight,\n        'color': GRAPH_VISUAL_THEME.text,\n        'font-weight': 600,\n    };\n}\n"]}

package/dist/panelInspectorView.d.ts

@@ -13,6 +13,7 @@ export declare class InspectorView {
     private selected;
     private activeTab;
     private open;
+    private hoveredLink;
     constructor(callbacks: WorkbenchCallbacks, onOpenChange: (open: boolean) => void, idPrefix: string);
     setSnapshot(snapshot: FrameGraphDebugViewModel): void;
     setSelection(selected: Selection | undefined, reveal?: boolean): void;
@@ -26,6 +27,10 @@ export declare class InspectorView {
     private accessRelations;
     private resourceRelations;
     private relationGroup;
+    private selectRelated;
+    private viewResourceButton;
+    private createDetailLink;
+    private clearLinkHover;
     private summary;
     private accessNodeLabel;
     private accessNodeSelection;

package/dist/panelInspectorView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panelInspectorView.d.ts","sourceRoot":"","sources":["../src/panelInspectorView.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGX,wBAAwB,EACxB,MAAM,wBAAwB,CAAC;AAIhC,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAMN,KAAK,kBAAkB,EACvB,MAAM,4BAA4B,CAAC;AAEpC,qBAAa,aAAa;IAYxB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,YAAY;IAZ9B,QAAQ,CAAC,IAAI,cAAmC;IAChD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAoC;IAC1D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiC;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiC;IACzD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAA8C;IACnE,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,QAAQ,CAAwB;IACxC,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,IAAI,CAAQ;gBAGF,SAAS,EAAE,kBAAkB,EAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,EACtD,QAAQ,EAAE,MAAM;IAwCjB,WAAW,CAAC,QAAQ,EAAE,wBAAwB,GAAG,IAAI;IAKrD,YAAY,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,MAAM,UAAO,GAAG,IAAI;IAMlE,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAO5B,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,MAAM;IA+Bd,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,aAAa;IAoFrB,OAAO,CAAC,eAAe;IAwFvB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,OAAO;IAcf,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,mBAAmB;CAK3B"}
+{"version":3,"file":"panelInspectorView.d.ts","sourceRoot":"","sources":["../src/panelInspectorView.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIX,wBAAwB,EACxB,MAAM,wBAAwB,CAAC;AAIhC,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAMN,KAAK,kBAAkB,EACvB,MAAM,4BAA4B,CAAC;AAwBpC,qBAAa,aAAa;IAaxB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAC1B,OAAO,CAAC,QAAQ,CAAC,YAAY;IAb9B,QAAQ,CAAC,IAAI,cAAmC;IAChD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAoC;IAC1D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiC;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiC;IACzD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAA8C;IACnE,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,QAAQ,CAAwB;IACxC,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,IAAI,CAAQ;IACpB,OAAO,CAAC,WAAW,CAAgC;gBAGjC,SAAS,EAAE,kBAAkB,EAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,EACtD,QAAQ,EAAE,MAAM;IAwCjB,WAAW,CAAC,QAAQ,EAAE,wBAAwB,GAAG,IAAI;IAKrD,YAAY,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,MAAM,UAAO,GAAG,IAAI;IAQlE,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAQ5B,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,MAAM;IAgCd,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,aAAa;IAyFrB,OAAO,CAAC,eAAe;IAmGvB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,OAAO;IAkBf,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,mBAAmB;CAK3B"}

package/dist/panelInspectorView.js

@@ -2,6 +2,24 @@ 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";
+function formatAccessFacts(access) {
+    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) {
+    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 {
     callbacks;
     onOpenChange;
@@ -14,6 +32,7 @@ export class InspectorView {
     selected;
     activeTab = 'summary';
     open = true;
+    hoveredLink;
     constructor(callbacks, onOpenChange, idPrefix) {
         this.callbacks = callbacks;
         this.onOpenChange = onOpenChange;
@@ -58,6 +77,9 @@ export class InspectorView {
         this.render();
     }
     setSelection(selected, reveal = true) {
+        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);
@@ -66,6 +88,8 @@ export class InspectorView {
     setOpen(open) {
         if (this.open === open)
             return;
+        if (!open)
+            this.clearLinkHover();
         this.open = open;
         this.updateOpenState();
         this.onOpenChange(open);
@@ -78,6 +102,7 @@ export class InspectorView {
         this.root.classList.toggle('open', this.open);
     }
     render() {
+        this.clearLinkHover();
         for (const [tab, button] of this.tabs) {
             const active = tab === this.activeTab;
             button.classList.toggle('active', active);
@@ -122,7 +147,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}`;
         }
@@ -185,11 +210,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'],
+                    ]),
                 ] : []);
             }
             case 'culled': {
@@ -233,7 +263,10 @@ export class InspectorView {
             case 'group': {
                 const group = snapshot.groupByPathKey.get(selection.pathKey);
                 if (group) {
-                    host.append(this.resourceRelations('Inputs', group.summary.inputResources), this.resourceRelations('Outputs', group.summary.outputResources));
+                    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;
             }
@@ -245,11 +278,17 @@ export class InspectorView {
                     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 }],
@@ -265,15 +304,19 @@ export class InspectorView {
                 break;
             }
             case 'root': {
-                const root = snapshot.roots[selection.index];
+                const root = snapshot.roots.find((root) => root.key === selection.key);
                 const relations = [];
                 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));
+                    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': {
@@ -302,8 +345,9 @@ export class InspectorView {
     }
     accessRelations(title, accesses) {
         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),
         ]));
     }
     resourceRelations(title, resources) {
@@ -316,8 +360,20 @@ export class InspectorView {
         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');
@@ -327,6 +383,31 @@ export class InspectorView {
         }
         return section;
     }
+    selectRelated(selection) {
+        this.clearLinkHover();
+        this.callbacks.onSelect(selection);
+    }
+    viewResourceButton(snapshot, resourceId) {
+        return this.createDetailLink(`View resource · ${resourceLabel(snapshot, resourceId)}`, { kind: 'resource', id: resourceId });
+    }
+    createDetailLink(label, selection) {
+        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;
+    }
+    clearLinkHover() {
+        if (!this.hoveredLink)
+            return;
+        this.hoveredLink = undefined;
+        this.callbacks.onHover(undefined);
+    }
     summary(rows) {
         const summary = document.createElement('dl');
         summary.className = 'zenfg-inspector-inspector-summary';
@@ -334,8 +415,13 @@ export class InspectorView {
             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;