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

package/dist/panelGraphScene.js

@@ -1,8 +1,8 @@
 import { formatGpuDuration, labelNode, labelResource } from "./panelDomHelpers.js";
+import { declarationEntrances } from "./debugCaptureModel.js";
+import { formatMeasuredGpuWork } from "./panelWorkbenchHelpers.js";
 export function createGraphScene(snapshot, options) {
-    return options.mode === 'resources'
-        ? createResourceGraphScene(snapshot)
-        : createPassGraphScene(snapshot, options.groupsEnabled, options.expandedGroupPaths);
+    return createFrameFlowScene(snapshot, options.groupsEnabled, options.expandedGroupPaths, options.showResourceDeclarations ?? true);
 }
 export function graphGroupElementId(pathKey) {
     return `group:${pathKey}`;
@@ -18,14 +18,14 @@ export function selectionKey(selection) {
         case 'allocation':
             return `allocation:${selection.id}`;
         case 'root':
-            return `root:${selection.index}`;
+            return `root:${selection.key}`;
         case 'culled':
-            return `culled:${selection.index}`;
+            return `culled:${selection.id}`;
         case 'segment':
             return `segment:${selection.index}`;
     }
 }
-function createPassGraphScene(snapshot, groupsEnabled, expandedGroupPaths) {
+function createFrameFlowScene(snapshot, groupsEnabled, expandedGroupPaths, showResourceDeclarations) {
     const interaction = createMutableInteractionIndex();
     const segmentByNodeId = executionSegmentByNodeId(snapshot);
     const groupsById = new Map(snapshot.debugGroups.map((group) => [group.id, group]));
@@ -34,8 +34,21 @@ function createPassGraphScene(snapshot, groupsEnabled, expandedGroupPaths) {
     const hasVisibleAncestors = (group) => group.ancestorIds
         .slice(0, -1)
         .every((id) => isExpanded(groupsById.get(id)));
+    const retainedIds = new Set(snapshot.nodes.map((node) => node.id));
+    const usedResourceIds = new Set([
+        ...snapshot.accessEdges.filter((access) => retainedIds.has(access.nodeId)).map((access) => access.resource.id),
+        ...snapshot.roots.flatMap((root) => root.resource ? [root.resource.id] : []),
+    ]);
+    const resources = showResourceDeclarations ? snapshot.resources.filter((resource) => usedResourceIds.has(resource.id)) : [];
+    const populatedGroupIds = new Set();
+    for (const item of [...snapshot.nodes, ...resources]) {
+        for (const id of groupsById.get(item.debugGroupId ?? '')?.ancestorIds ?? [])
+            populatedGroupIds.add(id);
+    }
+    const visibleResources = resources.filter((resource) => !useGroups || resource.debugGroupId === undefined
+        || groupsById.get(resource.debugGroupId).ancestorIds.every((id) => isExpanded(groupsById.get(id))));
     const includedGroups = useGroups
-        ? snapshot.debugGroups.filter((group) => group.summary.retainedNodeCount > 0 && hasVisibleAncestors(group))
+        ? snapshot.debugGroups.filter((group) => populatedGroupIds.has(group.id) && hasVisibleAncestors(group))
         : [];
     const includedGroupIds = new Set(includedGroups.map((group) => group.id));
     const representedNodeIdsByGroupId = new Map();
@@ -64,6 +77,7 @@ function createPassGraphScene(snapshot, groupsEnabled, expandedGroupPaths) {
                 .map((child) => graphGroupElementId(child.pathKey)),
             ...(visiblePassesByGroupId.get(group.id) ?? [])
                 .map((node) => passElementId(node.id)),
+            ...visibleResources.filter((resource) => resource.debugGroupId === group.id).map((resource) => resourceElementId(resource.id)),
         ];
         const node = {
             id,
@@ -71,8 +85,8 @@ function createPassGraphScene(snapshot, groupsEnabled, expandedGroupPaths) {
             groupId: group.id,
             groupPathKey: group.pathKey,
             label: createGroupLabel(group, collapsed),
-            overviewLabel: `${collapsed ? '▸' : '▾'} ${group.label}`,
-            title: createGroupTitle(group),
+            overviewLabel: `${collapsed ? '▸' : '▾'} ${group.label.replace(/\s+/g, ' ').trim()}`,
+            title: createGroupTitle(group, snapshot),
             parentId: group.parentId !== undefined && includedGroupIds.has(group.parentId)
                 ? graphGroupElementId(groupsById.get(group.parentId).pathKey)
                 : undefined,
@@ -131,174 +145,132 @@ function createPassGraphScene(snapshot, groupsEnabled, expandedGroupPaths) {
     }
     for (const node of snapshot.nodes) {
         const representative = representativeByNodeId.get(node.id);
-        setSelectionElements(interaction, { kind: 'node', id: node.id }, [representative], [representative]);
+        setSelectionElements(interaction, { kind: 'node', id: node.id }, [representative]);
     }
     if (useGroups) {
         for (const group of snapshot.debugGroups) {
-            if (includedGroupIds.has(group.id))
+            if (includedGroupIds.has(group.id) || !populatedGroupIds.has(group.id))
                 continue;
             const collapsedAncestorId = group.ancestorIds.find((id) => !isExpanded(groupsById.get(id)));
             if (collapsedAncestorId !== undefined) {
                 const representative = graphGroupElementId(groupsById.get(collapsedAncestorId).pathKey);
-                setSelectionElements(interaction, { kind: 'group', pathKey: group.pathKey }, [representative], [representative]);
+                setSelectionElements(interaction, { kind: 'group', pathKey: group.pathKey }, [representative]);
             }
         }
     }
-    const dependencyEdges = useGroups
-        ? createFoldedDependencyEdges(snapshot.edges, representativeByNodeId)
-        : snapshot.edges.map((edge, index) => createDependencySceneEdge(edge, passElementId(edge.fromNodeId), passElementId(edge.toNodeId), [edge], index));
-    for (const edge of dependencyEdges) {
-        const selection = { kind: 'resource', id: edge.resourceId };
-        interaction.selectionByElementId.set(edge.id, selection);
-        appendSelectionElement(interaction.primaryElementIdsBySelection, selection, edge.id);
-        appendSelectionElement(interaction.relatedElementIdsBySelection, selection, edge.id);
-        interaction.semanticReferencesByElementId.set(edge.id, {
-            nodeIds: unique(edge.underlyingDependencies.flatMap((dependency) => [dependency.fromNodeId, dependency.toNodeId])),
-            groupPathKeys: [],
-            resourceIds: [edge.resourceId],
-            accessIds: [],
-            dependencies: edge.underlyingDependencies,
-        });
+    const representativeByResourceId = new Map();
+    for (const resource of resources) {
+        const collapsed = useGroups ? groupsById.get(resource.debugGroupId ?? '')?.ancestorIds.find((id) => !isExpanded(groupsById.get(id))) : undefined;
+        const representative = collapsed ? graphGroupElementId(groupsById.get(collapsed).pathKey) : resourceElementId(resource.id);
+        representativeByResourceId.set(resource.id, representative);
     }
-    return finalizeScene('passes', [...groupNodes, ...passNodes], dependencyEdges, interaction);
-}
-function createResourceGraphScene(snapshot) {
-    const interaction = createMutableInteractionIndex();
-    const segmentByNodeId = executionSegmentByNodeId(snapshot);
-    const accessesByResourceId = indexAccessesByResourceId(snapshot.accessEdges);
-    const passNodes = snapshot.nodes.map((node) => {
-        const segment = segmentByNodeId.get(node.id);
-        const sceneNode = {
-            id: passElementId(node.id),
-            kind: 'pass',
-            nodeId: node.id,
-            passKind: node.kind,
-            executionSegmentIndex: segment?.index,
-            gpuDurationMicros: node.gpuDurationMicros,
-            label: formatGraphNodeLabel(`${segmentLabel(segment)} ${labelNode(node)}`),
-            overviewLabel: shortGraphLabel(labelNode(node)),
-            title: createNodeTitle(node, segment, snapshot),
-        };
-        registerElement(interaction, sceneNode.id, { kind: 'node', id: node.id }, emptyReferences({ nodeIds: [node.id] }));
-        return sceneNode;
-    });
-    const culledNodes = snapshot.culledNodes.map((culled, index) => {
-        const sceneNode = {
-            id: culledPassElementId(index, culled.node.id),
-            kind: 'culled-pass',
-            culledIndex: index,
-            nodeId: culled.node.id,
-            passKind: culled.node.kind,
-            reason: culled.reason,
-            label: `${formatGraphNodeLabel(labelNode(culled.node))}\n(culled)`,
-            overviewLabel: `${shortGraphLabel(labelNode(culled.node))} (culled)`,
-            title: createCulledNodeTitle(culled),
-        };
-        registerElement(interaction, sceneNode.id, { kind: 'culled', index }, emptyReferences({ nodeIds: [culled.node.id] }));
-        return sceneNode;
-    });
-    const resourceNodes = snapshot.resources.map((resource) => {
-        const sceneNode = {
-            id: resourceElementId(resource.id),
-            kind: 'resource',
-            resourceId: resource.id,
-            resourceKind: resource.kind,
-            label: formatGraphResourceLabel(labelResource(resource)),
-            overviewLabel: shortGraphLabel(labelResource(resource)),
-            title: createResourceTitle(resource, snapshot, accessesByResourceId.get(resource.id) ?? []),
-        };
-        registerElement(interaction, sceneNode.id, { kind: 'resource', id: resource.id }, emptyReferences({ resourceIds: [resource.id] }));
-        return sceneNode;
-    });
-    const culledNodeIds = new Map(snapshot.culledNodes.map((culled, index) => [
-        culled.node.id,
-        culledPassElementId(index, culled.node.id),
-    ]));
-    const accessEdges = snapshot.accessEdges.map((access) => {
-        const passId = culledNodeIds.get(access.nodeId) ?? passElementId(access.nodeId);
-        const resourceId = resourceElementId(access.resource.id);
-        const edge = {
-            id: accessElementId(access.accessId, access.resource.id),
-            kind: 'access',
-            from: access.mode === 'write' ? passId : resourceId,
-            to: access.mode === 'write' ? resourceId : passId,
-            label: access.access,
-            title: createAccessTitle(access),
-            resourceId: access.resource.id,
-            accessId: access.accessId,
-            accessMode: access.mode,
-            access: access.access,
-            dashed: culledNodeIds.has(access.nodeId),
+    const resourceNodes = visibleResources.map((resource) => {
+        const origin = resource.origin === 'transient' ? 'Created' : resource.origin === 'imported' ? 'Imported' : 'Surface';
+        const node = {
+            id: resourceElementId(resource.id), kind: 'resource', resourceId: resource.id, resourceKind: resource.kind,
+            label: origin + ' · ' + (resource.kind === 'buffer' ? 'Buffer' : 'Texture') + '\n' + formatGraphResourceLabel(labelResource(resource)),
+            overviewLabel: origin + '\n' + formatGraphResourceLabel(shortGraphLabel(labelResource(resource)), 1),
+            title: createResourceTitle(resource, snapshot, snapshot.accessesByResourceId.get(resource.id) ?? [])
+                + '\nDeclaration entrance, not a complete initial-content provenance graph.',
+            parentId: useGroups && resource.debugGroupId ? graphGroupElementId(groupsById.get(resource.debugGroupId).pathKey) : undefined,
         };
-        const selection = { kind: 'resource', id: access.resource.id };
-        interaction.selectionByElementId.set(edge.id, selection);
-        appendSelectionElement(interaction.relatedElementIdsBySelection, selection, edge.id);
-        interaction.semanticReferencesByElementId.set(edge.id, {
-            nodeIds: [access.nodeId],
-            groupPathKeys: [],
-            resourceIds: [access.resource.id],
-            accessIds: [access.accessId],
-            dependencies: [],
-        });
-        return edge;
+        registerElement(interaction, node.id, { kind: 'resource', id: resource.id }, emptyReferences({ resourceIds: [resource.id] }));
+        interaction.resourceElementIdsByResourceId.set(resource.id, [node.id]);
+        return node;
     });
-    return finalizeScene('resources', [...passNodes, ...culledNodes, ...resourceNodes], accessEdges, interaction);
-}
-export function indexAccessesByResourceId(accesses) {
-    const result = new Map();
-    for (const access of accesses) {
-        const resourceAccesses = result.get(access.resource.id);
-        if (resourceAccesses) {
-            resourceAccesses.push(access);
-        }
-        else {
-            result.set(access.resource.id, [access]);
-        }
-    }
-    return result;
-}
-function createFoldedDependencyEdges(dependencies, representativeByNodeId) {
-    const dependenciesByKey = new Map();
-    for (const dependency of dependencies) {
-        const from = representativeByNodeId.get(dependency.fromNodeId);
-        const to = representativeByNodeId.get(dependency.toNodeId);
+    const rootNodes = [];
+    const aggregates = new Map();
+    const addRelation = (from, to, resourceId, relation) => {
         if (from === to)
+            return;
+        const key = JSON.stringify([from, to, resourceId]);
+        const entry = aggregates.get(key) ?? { from, to, resourceId, relations: [] };
+        entry.relations.push(relation);
+        aggregates.set(key, entry);
+    };
+    for (const dependency of snapshot.edges) {
+        addRelation(representativeByNodeId.get(dependency.fromNodeId), representativeByNodeId.get(dependency.toNodeId), dependency.resource.id, { role: dependency.kind, nodeIds: [dependency.fromNodeId, dependency.toNodeId], dependency });
+    }
+    for (const access of showResourceDeclarations ? declarationEntrances(snapshot.nodes, snapshot.accessEdges, snapshot.edges) : []) {
+        addRelation(representativeByResourceId.get(access.resource.id), representativeByNodeId.get(access.nodeId), access.resource.id, { role: 'declaration', nodeIds: [access.nodeId] });
+    }
+    const rootOccurrences = new Map();
+    const rangesByRootFamily = new Map();
+    for (const root of snapshot.roots) {
+        if (!root.resource)
+            continue;
+        const family = JSON.stringify([root.resource.id, root.reason]);
+        const ranges = rangesByRootFamily.get(family) ?? new Set();
+        ranges.add(root.key);
+        rangesByRootFamily.set(family, ranges);
+    }
+    for (const root of snapshot.roots) {
+        if (!root.resource) {
+            if (root.nodeId) {
+                const representative = representativeByNodeId.get(root.nodeId);
+                setSelectionElements(interaction, { kind: 'root', key: root.key }, [representative]);
+            }
             continue;
-        const key = JSON.stringify([from, to, dependency.resource.id]);
-        const existing = dependenciesByKey.get(key);
-        if (existing) {
-            existing.dependencies.push(dependency);
         }
-        else {
-            dependenciesByKey.set(key, { from, to, resource: dependency.resource, dependencies: [dependency] });
+        const occurrence = rootOccurrences.get(root.key) ?? 0;
+        rootOccurrences.set(root.key, occurrence + 1);
+        const id = 'root:' + root.key + (occurrence ? ':' + occurrence : '');
+        const resource = snapshot.resourceById.get(root.resource.id);
+        const rangeLabel = root.range?.kind === 'buffer' ? `bytes ${root.range.offset}–${root.range.offset + root.range.size}`
+            : root.range ? root.range.regions.map((r) => `mip ${r.baseMipLevel}+${r.mipLevelCount} · ${r.baseDepthSlice !== undefined ? 'D' + r.baseDepthSlice + '+' + r.depthSliceCount : 'L' + r.baseArrayLayer + '+' + r.arrayLayerCount} · ${r.aspect}`).join('; ') : 'Range unavailable';
+        const rangeSummary = root.range?.kind === 'texture'
+            ? root.range.regions.map((r) => `m${r.baseMipLevel}+${r.mipLevelCount} ${r.baseDepthSlice !== undefined ? 'D' + r.baseDepthSlice + '+' + r.depthSliceCount : 'L' + r.baseArrayLayer + '+' + r.arrayLayerCount} ${r.aspect === 'depth-only' ? 'depth' : r.aspect === 'stencil-only' ? 'stencil' : 'all'}`).join('; ')
+            : rangeLabel;
+        const reasonLabel = root.reason.split('-').map((word) => word[0].toUpperCase() + word.slice(1)).join(' ');
+        const disambiguate = rangesByRootFamily.get(JSON.stringify([resource.id, root.reason])).size > 1;
+        const initialLabel = !showResourceDeclarations && root.resolution?.usesInitialContents
+            ? '\n' + (root.resolution.producerNodeIds.length ? 'With initial contents' : 'Initial contents only') : '';
+        rootNodes.push({
+            id, kind: 'root', rootKey: root.key, resourceId: resource.id, resourceKind: resource.kind,
+            label: reasonLabel + '\n' + formatGraphResourceLabel(labelResource(resource))
+                + (disambiguate ? '\n' + formatGraphResourceLabel(rangeSummary, 1) : '') + initialLabel,
+            overviewLabel: reasonLabel + '\n' + formatGraphResourceLabel(shortGraphLabel(labelResource(resource)), 1) + initialLabel,
+            title: labelResource(resource) + '\n' + root.reason + '\n' + rangeLabel
+                + (root.resolution ? '\nProducers: ' + (root.resolution.producerNodeIds.join(', ') || 'none') + '\nInitial contents: ' + root.resolution.usesInitialContents : '\nOutput sources unavailable in Legacy capture.'),
+        });
+        registerElement(interaction, id, { kind: 'root', key: root.key }, emptyReferences({ resourceIds: [resource.id], nodeIds: root.resolution?.producerNodeIds ?? [] }));
+        for (const nodeId of root.resolution?.producerNodeIds ?? []) {
+            addRelation(representativeByNodeId.get(nodeId), id, resource.id, { role: 'output-producer', nodeIds: [nodeId], rootKey: root.key });
         }
+        if (showResourceDeclarations && root.resolution?.usesInitialContents)
+            addRelation(representativeByResourceId.get(resource.id), id, resource.id, { role: 'output-initial', nodeIds: [], rootKey: root.key });
     }
-    return [...dependenciesByKey.values()].map((entry, index) => createDependencySceneEdge(entry.dependencies.find((dependency) => dependency.kind === 'value') ?? entry.dependencies[0], entry.from, entry.to, entry.dependencies, index));
-}
-function createDependencySceneEdge(dependency, from, to, underlyingDependencies, occurrence) {
-    const dependencyKind = underlyingDependencies.some((edge) => edge.kind === 'value') ? 'value' : 'ordering';
-    return {
-        id: `dependency:${JSON.stringify([from, to, dependency.resource.id, occurrence])}`,
-        kind: 'dependency',
-        from,
-        to,
-        title: `${labelResource(dependency.resource)}${underlyingDependencies.length > 1
-            ? `\n${underlyingDependencies.length} folded dependencies`
-            : ''}`,
-        resourceId: dependency.resource.id,
-        dependencyKind,
-        underlyingDependencies,
-        underlyingDependencyCount: underlyingDependencies.length,
-    };
+    const edges = [...aggregates.entries()].map(([key, entry]) => {
+        const underlyingDependencies = entry.relations.flatMap((relation) => relation.dependency ? [relation.dependency] : []);
+        const edge = {
+            id: 'flow:' + key, ...entry,
+            kind: entry.relations.every((relation) => relation.role === 'ordering') ? 'ordering' : 'flow',
+            title: labelResource(snapshot.resourceById.get(entry.resourceId)) + '\n'
+                + unique(entry.relations.map((relation) => relation.role)).join(' · '),
+            underlyingDependencies, underlyingDependencyCount: underlyingDependencies.length,
+        };
+        const selection = { kind: 'resource', id: entry.resourceId };
+        registerElement(interaction, edge.id, selection, emptyReferences({
+            nodeIds: unique(entry.relations.flatMap((relation) => relation.nodeIds)), resourceIds: [entry.resourceId], dependencies: underlyingDependencies,
+        }));
+        const resourceElements = interaction.resourceElementIdsByResourceId.get(entry.resourceId) ?? [];
+        resourceElements.push(edge.id);
+        interaction.resourceElementIdsByResourceId.set(entry.resourceId, resourceElements);
+        return edge;
+    });
+    for (const [resourceId, elements] of interaction.resourceElementIdsByResourceId) {
+        const selection = { kind: 'resource', id: resourceId };
+        setSelectionElements(interaction, selection, elements);
+        interaction.hoverElementIdsBySelection.set(selectionKey(selection), [...elements]);
+    }
+    return finalizeScene([...groupNodes, ...passNodes, ...resourceNodes, ...rootNodes], edges, interaction);
 }
-function finalizeScene(mode, nodes, edges, interaction) {
+function finalizeScene(nodes, edges, interaction) {
     const topologyKey = JSON.stringify({
-        mode,
         nodes: nodes.map((node) => [node.id, node.kind, node.parentId, node.kind === 'group' ? node.collapsed : undefined]),
         edges: edges.map((edge) => [edge.id, edge.kind, edge.from, edge.to]),
     });
     const contentKey = JSON.stringify({
-        mode,
         nodes: nodes.map((node) => [
             node.id,
             node.kind,
@@ -306,8 +278,8 @@ function finalizeScene(mode, nodes, edges, interaction) {
             node.label,
             node.overviewLabel,
             node.title,
-            node.kind === 'pass' || node.kind === 'culled-pass' ? node.passKind : undefined,
-            node.kind === 'resource' ? node.resourceKind : undefined,
+            node.kind === 'pass' ? node.passKind : undefined,
+            (node.kind === 'resource' || node.kind === 'root') ? node.resourceKind : undefined,
             node.kind === 'group' ? node.collapsed : undefined,
             node.kind === 'group' ? node.depthBand : undefined,
             node.kind === 'group' ? node.culledNodeCount > 0 : undefined,
@@ -317,15 +289,11 @@ function finalizeScene(mode, nodes, edges, interaction) {
             edge.kind,
             edge.from,
             edge.to,
-            edge.label,
             edge.title,
-            edge.kind === 'dependency' ? edge.dependencyKind : undefined,
-            edge.kind === 'access' ? edge.accessMode : undefined,
-            edge.kind === 'access' ? edge.dashed : undefined,
+            edge.relations,
         ]),
     });
     return {
-        mode,
         nodes,
         edges,
         topologyKey,
@@ -337,25 +305,19 @@ function createMutableInteractionIndex() {
     return {
         selectionByElementId: new Map(),
         primaryElementIdsBySelection: new Map(),
-        relatedElementIdsBySelection: new Map(),
+        hoverElementIdsBySelection: new Map(),
+        resourceElementIdsByResourceId: new Map(),
         semanticReferencesByElementId: new Map(),
     };
 }
 function registerElement(interaction, elementId, selection, references) {
     interaction.selectionByElementId.set(elementId, selection);
-    setSelectionElements(interaction, selection, [elementId], [elementId]);
+    setSelectionElements(interaction, selection, [elementId]);
+    interaction.hoverElementIdsBySelection.set(selectionKey(selection), [elementId]);
     interaction.semanticReferencesByElementId.set(elementId, references);
 }
-function setSelectionElements(interaction, selection, primary, related) {
+function setSelectionElements(interaction, selection, primary) {
     interaction.primaryElementIdsBySelection.set(selectionKey(selection), [...primary]);
-    interaction.relatedElementIdsBySelection.set(selectionKey(selection), [...related]);
-}
-function appendSelectionElement(map, selection, elementId) {
-    const key = selectionKey(selection);
-    const elementIds = map.get(key) ?? [];
-    if (!elementIds.includes(elementId))
-        elementIds.push(elementId);
-    map.set(key, elementIds);
 }
 function emptyReferences(overrides) {
     return {
@@ -370,20 +332,56 @@ function emptyReferences(overrides) {
 function passElementId(nodeId) {
     return `pass:${nodeId}`;
 }
-function culledPassElementId(index, nodeId) {
-    return `culled-pass:${index}:${nodeId}`;
-}
 function resourceElementId(resourceId) {
     return `resource:${resourceId}`;
 }
-function accessElementId(accessId, resourceId) {
-    return `access:${accessId}:${resourceId}`;
-}
 function formatGraphNodeLabel(label) {
     return formatGraphLabel(label, 20, 3);
 }
-function formatGraphResourceLabel(label) {
-    return formatGraphLabel(label, 18, 3);
+function formatGraphResourceLabel(label, maxLines = 2) {
+    let remaining = [...label.replace(/\s+/g, ' ').trim()];
+    // Reserve conservative monospace cells for CJK/emoji fallback glyphs as well.
+    const cells = (glyph) => /\p{Mark}/u.test(glyph) ? 0 : glyph.codePointAt(0) > 255 ? 2 : 1;
+    const take = (limit) => {
+        let width = 0;
+        let count = 0;
+        for (const glyph of remaining) {
+            if (width + cells(glyph) > limit)
+                break;
+            width += cells(glyph);
+            count++;
+        }
+        return count;
+    };
+    const lines = [];
+    while (remaining.length) {
+        let count = take(18);
+        if (count === remaining.length) {
+            lines.push(remaining.join(''));
+            break;
+        }
+        if (lines.length === maxLines - 1) {
+            lines.push(remaining.slice(0, take(17)).join('').trimEnd() + '…');
+            break;
+        }
+        // Prefer a readable namespace/path boundary over splitting a word.
+        let boundary = 0;
+        for (const separators of [/[./]/u, /[_\-\s]/u]) {
+            for (let index = count - 1; index > 0; index--) {
+                if (separators.test(remaining[index])) {
+                    boundary = index + 1;
+                    break;
+                }
+            }
+            if (boundary)
+                break;
+        }
+        if (boundary)
+            count = boundary;
+        lines.push(remaining.slice(0, count).join('').trimEnd());
+        remaining = remaining.slice(count);
+    }
+    return lines.join('\n');
 }
 function formatGraphLabel(label, maxLineLength, maxLines) {
     if (label.length <= maxLineLength)
@@ -468,23 +466,28 @@ function shortGraphLabel(label) {
 }
 function createGroupLabel(group, collapsed) {
     const summary = group.summary;
-    const gpu = summary.timingEligibleNodeCount === 0
-        ? 'no timed passes'
-        : `Σ ${(summary.gpuWorkDurationMicros / 1000).toFixed(3)} ms ${summary.timedNodeCount}/${summary.timingEligibleNodeCount}`;
-    return `${collapsed ? '▸' : '▾'} ${group.label} · ${summary.retainedNodeCount} retained · ${summary.culledNodeCount} culled · ${gpu}`;
+    const parts = [
+        `${collapsed ? '▸' : '▾'} ${group.label.replace(/\s+/g, ' ').trim()}`,
+        `${summary.retainedNodeCount} nodes` + (summary.culledNodeCount ? ` · ${summary.culledNodeCount} culled` : ''),
+    ];
+    return parts.join(collapsed ? '\n' : ' · ');
 }
 function createNodeTitle(node, segment, snapshot) {
+    const gpu = node.kind === 'external-submission' ? 'Opaque'
+        : node.kind !== 'render' && node.kind !== 'compute' ? 'Not applicable'
+            : node.gpuDurationMicros === undefined ? 'Not collected' : `${formatGpuDuration(node)} ms`;
     return [
         labelNode(node),
         `kind: ${node.kind}`,
         `group: ${debugGroupPathForId(node.debugGroupId, snapshot)}`,
         `segment: ${segment ? `${segment.index}:${segment.kind}` : '-'}`,
-        `gpu: ${node.kind === 'external-submission' ? 'opaque' : `${formatGpuDuration(node)} ms`}`,
+        `CPU duration: ${node.cpuDurationMicros === undefined ? 'Not collected' : (node.cpuDurationMicros / 1000).toFixed(3) + ' ms'}`,
+        `GPU duration: ${gpu}`,
         `reads: ${node.reads.map((access) => labelResource(access.resource)).join(', ') || '-'}`,
         `writes: ${node.writes.map((access) => labelResource(access.resource)).join(', ') || '-'}`,
     ].join('\n');
 }
-function createGroupTitle(group) {
+function createGroupTitle(group, snapshot) {
     const summary = group.summary;
     return [
         group.path.join(' / '),
@@ -493,19 +496,11 @@ function createGroupTitle(group) {
         `inputs: ${summary.inputResources.map(labelResource).join(', ') || '-'}`,
         `outputs: ${summary.outputResources.map(labelResource).join(', ') || '-'}`,
         `transient registered/accessed: ${summary.registeredTransientResourceCount}/${summary.accessedTransientResourceCount}`,
-        `physical allocations: ${summary.physicalAllocationCount}`,
+        `physical allocations: ${snapshot.protocol.memory.allocationReport.status === 'available' ? summary.physicalAllocationCount : 'Not collected'}`,
         `segments: ${summary.executionSegmentCount}`,
         `opaque: ${summary.externalSubmissionCount}`,
-        `Σ GPU work: ${(summary.gpuWorkDurationMicros / 1000).toFixed(3)} ms (${summary.timedNodeCount}/${summary.timingEligibleNodeCount})`,
-    ].join('\n');
-}
-function createCulledNodeTitle(culled) {
-    return [
-        `${labelNode(culled.node)} (culled)`,
-        `kind: ${culled.node.kind}`,
-        `reason: ${culled.reason}`,
-        `reads: ${culled.node.reads.map((access) => labelResource(access.resource)).join(', ') || '-'}`,
-        `writes: ${culled.node.writes.map((access) => labelResource(access.resource)).join(', ') || '-'}`,
+        `CPU pass sum: ${summary.cpuTimedNodeCount ? (summary.cpuWorkDurationMicros / 1000).toFixed(3) + ' ms' : 'Not collected'} (${summary.cpuTimedNodeCount}/${summary.retainedNodeCount})`,
+        `GPU pass sum: ${formatMeasuredGpuWork(summary.gpuWorkDurationMicros, summary.timedNodeCount, summary.timingEligibleNodeCount)}`,
     ].join('\n');
 }
 function createResourceTitle(resource, snapshot, accesses) {
@@ -520,18 +515,6 @@ function createResourceTitle(resource, snapshot, accesses) {
         `writes: ${accesses.filter((access) => access.mode === 'write').length}`,
     ].join('\n');
 }
-function createAccessTitle(access) {
-    return [
-        `#${access.accessId} ${access.mode}`,
-        labelResource(access.resource),
-        `access: ${access.access}`,
-        access.mode === 'write' ? `contents: ${access.contents}` : undefined,
-        access.mode === 'write' ? `result: ${access.producesValue ? 'produced' : 'discarded'}` : undefined,
-        access.textureViewId === undefined ? undefined : `texture view: #${access.textureViewId}`,
-        access.textureRegion ? `texture: mip ${access.textureRegion.baseMipLevel}+${access.textureRegion.mipLevelCount}, layer ${access.textureRegion.baseArrayLayer ?? 0}+${access.textureRegion.arrayLayerCount ?? 1}, depth ${access.textureRegion.baseDepthSlice ?? 0}+${access.textureRegion.depthSliceCount ?? 1}, ${access.textureRegion.aspect}` : undefined,
-        access.bufferRange ? `buffer: ${access.bufferRange.offset}+${access.bufferRange.size ?? 'end'}` : undefined,
-    ].filter(Boolean).join('\n');
-}
 function debugGroupPathForId(groupId, snapshot) {
     if (groupId === undefined)
         return '-';