@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/src/panelDiagnosticsView.ts

@@ -1,33 +1,51 @@
 import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
-import { createCell, labelNode, labelResource } from './panelDomHelpers.ts';
-import type { Selection } from './panelTypes.ts';
+import { labelNode, labelResource } from './panelDomHelpers.ts';
+import { resolveNodeSelection } from './panelSelection.ts';
+import type { Selection, WorkbenchTab } from './panelTypes.ts';
 import {
-	createEmptyTableRow,
-	createKindCell,
-	createRelationButton,
-	createSelectionCell,
-	createTableScroller,
-	registerSelectable,
-	type WorkbenchCallbacks,
-	updateSelectedRows,
+	createFilterSelect, createRelationButton, createSearchInput, createViewToolbar,
+	registerSelectable, selectionKey, type WorkbenchCallbacks, updateSelectedRows,
 } from './panelWorkbenchHelpers.ts';
 
+const severityOrder = { error: 0, warning: 1, info: 2 } as const;
+
 export class DiagnosticsView {
 	readonly root = document.createElement('section');
 	private readonly scroller = document.createElement('div');
 	private readonly content = document.createElement('div');
 	private readonly rows = new Map<string, HTMLElement[]>();
+	private readonly openSections = new Set<string>();
+	private readonly count = document.createElement('span');
+	private readonly searchInput: HTMLInputElement;
+	private readonly severitySelect: HTMLSelectElement;
 	private snapshot: FrameGraphDebugViewModel | undefined;
 	private selected: Selection | undefined;
+	private severity = 'all';
+	private search = '';
 
 	constructor(private readonly callbacks: WorkbenchCallbacks, idPrefix: string) {
 		this.root.className = 'zenfg-inspector-view zenfg-inspector-diagnostics-view';
 		this.root.id = `${idPrefix}-view-diagnostics`;
 		this.root.setAttribute('role', 'tabpanel');
+		const toolbar = createViewToolbar('Diagnostic filters');
+		this.searchInput = createSearchInput('Search diagnostic code or message', '', (value) => {
+			this.search = value.trim().toLocaleLowerCase();
+			this.render();
+		});
+		this.severitySelect = createFilterSelect('Diagnostic severity', this.severity, [
+			['all', 'All severities'], ['error', 'Error'], ['warning', 'Warning'], ['info', 'Info'],
+		], (value) => { this.severity = value; this.render(); });
+		const clear = document.createElement('button');
+		clear.type = 'button';
+		clear.textContent = 'Clear filters';
+		clear.addEventListener('click', () => { this.clearFilters(); this.render(); });
+		this.count.className = 'zenfg-inspector-result-count';
+		this.count.setAttribute('role', 'status');
+		toolbar.append(this.searchInput, this.severitySelect, clear, this.count);
 		this.scroller.className = 'zenfg-inspector-diagnostics-scroller';
-		this.content.className = 'zenfg-inspector-diagnostics-grid';
+		this.content.className = 'zenfg-inspector-diagnostics-sections';
 		this.scroller.appendChild(this.content);
-		this.root.appendChild(this.scroller);
+		this.root.append(toolbar, this.scroller);
 	}
 
 	setSnapshot(snapshot: FrameGraphDebugViewModel): void {
@@ -40,23 +58,107 @@ export class DiagnosticsView {
 		updateSelectedRows(this.rows, selected);
 	}
 
+	reveal(selection: Selection): void {
+		this.clearFilters();
+		if (selection.kind === 'root') this.openSections.add('roots');
+		if (selection.kind === 'culled') this.openSections.add('culled');
+		if (selection.kind === 'segment') {
+			this.openSections.add('segments');
+			this.openSections.add(`segment:${selection.index}`);
+		}
+		this.render();
+		this.rows.get(selectionKey(selection))?.[0]?.scrollIntoView?.({ block: 'nearest' });
+	}
+
+	private clearFilters(): void {
+		this.search = '';
+		this.severity = 'all';
+		this.searchInput.value = '';
+		this.severitySelect.value = 'all';
+	}
+
 	private render(): void {
 		const snapshot = this.snapshot;
 		if (!snapshot) return;
 		this.rows.clear();
 		this.content.replaceChildren(
-			this.createRoots(snapshot),
-			this.createCulled(snapshot),
-			this.createSegments(snapshot),
-			this.createTiming(snapshot),
+			this.createMessages(snapshot), this.createRoots(snapshot), this.createCulled(snapshot), this.createSegments(snapshot),
 		);
 		updateSelectedRows(this.rows, this.selected);
 	}
 
-	private createSection(title: string, description?: string): HTMLElement {
+	private createMessages(snapshot: FrameGraphDebugViewModel): HTMLElement {
 		const section = document.createElement('section');
-		section.className = 'zenfg-inspector-diagnostic-card';
+		section.className = 'zenfg-inspector-diagnostic-messages';
 		const heading = document.createElement('h2');
+		heading.textContent = 'Diagnostics';
+		const summary = document.createElement('p');
+		const all = snapshot.protocol.diagnostics;
+		const errors = all.filter((entry) => entry.severity === 'error').length;
+		const warnings = all.filter((entry) => entry.severity === 'warning').length;
+		const infos = all.length - errors - warnings;
+		summary.textContent = `${errors} errors · ${warnings} warnings · ${infos} info`;
+		section.append(heading, summary);
+		// Sort a copy. Stable sort preserves capture order within each severity, including repeated codes.
+		const messages = all.filter((entry) => (this.severity === 'all' || entry.severity === this.severity)
+			&& (!this.search || `${entry.code} ${entry.message}`.toLocaleLowerCase().includes(this.search)))
+			.sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity]);
+		this.count.textContent = `${messages.length} / ${all.length} diagnostics`;
+		for (const diagnostic of messages) {
+			const article = document.createElement('article');
+			article.className = 'zenfg-inspector-diagnostic-message';
+			article.dataset.severity = diagnostic.severity;
+			const title = document.createElement('h3');
+			const severity = document.createElement('span');
+			severity.className = 'zenfg-inspector-diagnostic-severity';
+			severity.textContent = diagnostic.severity;
+			const code = document.createElement('code');
+			code.textContent = diagnostic.code;
+			title.append(severity, code);
+			const message = document.createElement('p');
+			message.textContent = diagnostic.message;
+			article.append(title, message);
+			if (diagnostic.nodeId !== undefined) {
+				const selection = resolveNodeSelection(snapshot, diagnostic.nodeId);
+				const node = snapshot.canonicalNodeById.get(diagnostic.nodeId);
+				if (selection && node) article.appendChild(this.createObjectLink(labelNode(node), selection, 'passes'));
+			}
+			if (diagnostic.resourceId !== undefined) {
+				const resource = snapshot.resourceById.get(diagnostic.resourceId);
+				if (resource) article.appendChild(this.createObjectLink(labelResource(resource), { kind: 'resource', id: resource.id }, 'resources'));
+			}
+			section.appendChild(article);
+		}
+		if (messages.length === 0) {
+			const empty = document.createElement('p');
+			empty.className = 'zenfg-inspector-muted';
+			empty.textContent = all.length === 0 ? 'No diagnostic messages in this snapshot.' : 'No diagnostics match the current filters.';
+			section.appendChild(empty);
+		}
+		return section;
+	}
+
+	private createObjectLink(label: string, selection: Selection, tab: WorkbenchTab): HTMLElement {
+		const links = document.createElement('span');
+		links.className = 'zenfg-inspector-diagnostic-links';
+		const select = createRelationButton(label, selection, this.callbacks.onSelect);
+		registerSelectable(this.rows, select, selection, this.callbacks);
+		const reveal = document.createElement('button');
+		reveal.type = 'button';
+		reveal.className = 'zenfg-inspector-relation-button zenfg-inspector-diagnostic-reveal';
+		reveal.textContent = `Show in ${tab === 'passes' ? 'Passes' : 'Resources'}`;
+		reveal.setAttribute('aria-label', `${reveal.textContent}: ${label}`);
+		reveal.addEventListener('click', () => this.callbacks.onReveal?.(selection, tab));
+		links.append(select, reveal);
+		return links;
+	}
+
+	private createSection(key: string, title: string, description?: string): HTMLDetailsElement {
+		const section = document.createElement('details');
+		section.className = 'zenfg-inspector-diagnostic-section';
+		section.dataset.section = key;
+		section.open = this.openSections.has(key);
+		const heading = document.createElement('summary');
 		heading.textContent = title;
 		section.appendChild(heading);
 		if (description) {
@@ -64,97 +166,76 @@ export class DiagnosticsView {
 			text.textContent = description;
 			section.appendChild(text);
 		}
+		section.addEventListener('toggle', () => {
+			if (section.open) this.openSections.add(key);
+			else this.openSections.delete(key);
+		});
 		return section;
 	}
 
 	private createRoots(snapshot: FrameGraphDebugViewModel): HTMLElement {
-		const section = this.createSection('Retention roots', 'Roots explain why graph work survived dead-node elimination.');
+		const section = this.createSection('roots', `Retention roots (${snapshot.roots.length})`, 'Roots explain why graph work survived dead-node elimination.');
 		const list = document.createElement('div');
 		list.className = 'zenfg-inspector-diagnostic-list';
-		snapshot.roots.forEach((root) => {
+		for (const root of snapshot.roots) {
 			const selection: Selection = { kind: 'root', key: root.key };
-			const button = createRelationButton(
-				`${root.reason} · ${root.resource ? labelResource(root.resource) : root.nodeId === undefined ? '-' : `node-${root.nodeId}`}`,
-				selection,
-				this.callbacks.onSelect,
-			);
+			const node = root.nodeId === undefined ? undefined : snapshot.canonicalNodeById.get(root.nodeId);
+			const label = root.resource ? labelResource(root.resource) : node ? labelNode(node) : root.nodeId ?? 'Unknown';
+			const button = createRelationButton(`${root.reason} · ${label}`, selection, this.callbacks.onSelect);
 			registerSelectable(this.rows, button, selection, this.callbacks);
 			list.appendChild(button);
-		});
+		}
 		if (snapshot.roots.length === 0) list.textContent = 'No retention roots.';
 		section.appendChild(list);
 		return section;
 	}
 
 	private createCulled(snapshot: FrameGraphDebugViewModel): HTMLElement {
-		const section = this.createSection('Culled nodes', 'Recorded nodes that were not reachable from a retention root.');
-		const table = createTableScroller([{ label: 'Node' }, { label: 'Kind', column: 'kind' }, { label: 'Reason' }]);
-		for (const [index, entry] of snapshot.culledNodes.entries()) {
-			const selection: Selection = { kind: 'culled', index };
-			const row = document.createElement('tr');
-			registerSelectable(this.rows, row, selection, this.callbacks);
-			row.append(
-				createSelectionCell(labelNode(entry.node), selection, this.callbacks),
-				createKindCell(entry.node.kind),
-				createCell(entry.reason),
-			);
-			table.body.appendChild(row);
+		const section = this.createSection('culled', `Culled passes (${snapshot.culledNodes.length})`, 'Recorded passes removed during compilation. Inspect their reasons and accesses in Passes.');
+		const reasons = new Map<string, number>();
+		for (const entry of snapshot.culledNodes) reasons.set(entry.reason, (reasons.get(entry.reason) ?? 0) + 1);
+		const list = document.createElement('ul');
+		for (const [reason, count] of reasons) {
+			const item = document.createElement('li');
+			item.textContent = `${reason}: ${count}`;
+			list.appendChild(item);
+		}
+		section.appendChild(list);
+		if (snapshot.culledNodes.length > 0) {
+			const button = document.createElement('button');
+			button.type = 'button';
+			button.className = 'zenfg-inspector-relation-button';
+			button.textContent = 'Show culled passes';
+			button.addEventListener('click', () => this.callbacks.onNavigate?.('passes', 'culled'));
+			section.appendChild(button);
 		}
-		if (snapshot.culledNodes.length === 0) table.body.appendChild(createEmptyTableRow(3, 'No culled nodes.'));
-		section.appendChild(table.scroller);
 		return section;
 	}
 
 	private createSegments(snapshot: FrameGraphDebugViewModel): HTMLElement {
-		const section = this.createSection(
-			'Execution segments',
-			'An opaque interval is a graph boundary around external work; it is not a count or timing of third-party GPU submissions.',
-		);
-		const table = createTableScroller([{ label: '#', column: 'numeric' }, { label: 'Kind', column: 'kind' }, { label: 'Nodes' }]);
+		const section = this.createSection('segments', `Execution segments (${snapshot.executionSegments.length})`,
+			'An opaque interval marks external work. Its GPU submissions and duration are not measured here.');
 		for (const segment of snapshot.executionSegments) {
 			const selection: Selection = { kind: 'segment', index: segment.index };
-			const row = document.createElement('tr');
-			registerSelectable(this.rows, row, selection, this.callbacks);
-			const labels = segment.nodeIds.map((id) => snapshot.nodeById.get(id))
-				.filter((node) => node !== undefined)
-				.map((node) => labelNode(node));
-			row.append(
-				createSelectionCell(String(segment.index), selection, this.callbacks, 'numeric'),
-				createKindCell(segment.kind, segment.kind === 'frame-graph' ? 'FrameGraph command segment' : 'Opaque interval'),
-				createCell(labels.join(', ') || '-'),
-			);
-			table.body.appendChild(row);
-		}
-		if (snapshot.executionSegments.length === 0) table.body.appendChild(createEmptyTableRow(3, 'No execution segments.'));
-		section.appendChild(table.scroller);
-		return section;
-	}
-
-	private createTiming(snapshot: FrameGraphDebugViewModel): HTMLElement {
-		const metrics = snapshot.metrics;
-		const coverage = metrics.timingEligibleNodeCount === 0
-			? 'No eligible render or compute passes'
-			: `${metrics.timedNodeCount}/${metrics.timingEligibleNodeCount} eligible passes timed (${((metrics.timedNodeCount / metrics.timingEligibleNodeCount) * 100).toFixed(0)}%)`;
-		const section = this.createSection('GPU timing coverage', coverage);
-		if (snapshot.profiling.status === 'unavailable') {
-			const status = document.createElement('p');
-			status.textContent = `Timing unavailable: ${snapshot.profiling.reason}.`;
-			section.appendChild(status);
+			const members = this.createSection(`segment:${segment.index}`, `${segment.index} · ${segment.kind === 'frame-graph' ? 'FrameGraph command segment' : 'Opaque interval'} · ${segment.nodeIds.length} passes`);
+			const button = createRelationButton('Inspect segment', selection, this.callbacks.onSelect);
+			registerSelectable(this.rows, button, selection, this.callbacks);
+			members.appendChild(button);
+			const list = document.createElement('div');
+			list.className = 'zenfg-inspector-diagnostic-list';
+			for (const id of segment.nodeIds) {
+				const node = snapshot.canonicalNodeById.get(id);
+				const nodeSelection = resolveNodeSelection(snapshot, id);
+				if (node && nodeSelection) list.appendChild(this.createObjectLink(labelNode(node), nodeSelection, 'passes'));
+			}
+			members.appendChild(list);
+			section.appendChild(members);
 		}
-		const table = createTableScroller([{ label: 'Pass' }, { label: 'Status', column: 'kind' }, { label: 'GPU (ms)', column: 'numeric' }]);
-		for (const node of snapshot.nodes.filter((candidate) => candidate.kind === 'render' || candidate.kind === 'compute')) {
-			const selection: Selection = { kind: 'node', id: node.id };
-			const row = document.createElement('tr');
-			registerSelectable(this.rows, row, selection, this.callbacks);
-			row.append(
-				createSelectionCell(labelNode(node), selection, this.callbacks),
-				createKindCell(node.gpuDurationMicros === undefined ? 'not-timed' : 'timed', node.gpuDurationMicros === undefined ? 'Not timed' : 'Timed'),
-				createCell(node.gpuDurationMicros === undefined ? '-' : (node.gpuDurationMicros / 1000).toFixed(3), { column: 'numeric' }),
-			);
-			table.body.appendChild(row);
+		if (snapshot.executionSegments.length === 0) {
+			const empty = document.createElement('p');
+			empty.textContent = 'No execution segments.';
+			section.appendChild(empty);
 		}
-		if (table.body.childElementCount === 0) table.body.appendChild(createEmptyTableRow(3, 'No timing-eligible passes.'));
-		section.appendChild(table.scroller);
 		return section;
 	}
 }

package/src/panelDomHelpers.ts

@@ -126,9 +126,8 @@ export function formatGpuFrameDuration(snapshot: FrameGraphDebugViewModel): stri
 
 export function formatPoolHitRate(snapshot: FrameGraphDebugViewModel): string {
     const pool = snapshot.resourcePool;
-    if (!pool || pool.status !== 'available' || pool.acquireCount === 0) {
-        return '-';
-    }
+    if (!pool || pool.status !== 'available') return 'Unavailable';
+    if (pool.acquireCount === 0) return 'Not applicable · no acquisitions';
     return `${((pool.reuseCount / pool.acquireCount) * 100).toFixed(0)}%`;
 }
 
@@ -143,9 +142,9 @@ export function formatBytes(bytes: number): string {
 }
 
 export function labelNode(node: Pick<FrameGraphDebugNode, 'id' | 'label'>): string {
-    return node.label ?? `node-${node.id}`;
+    return node.label ?? node.id;
 }
 
 export function labelResource(resource: { readonly id: string; readonly kind: string; readonly label?: string }): string {
-    return resource.label ?? `${resource.kind}-${resource.id}`;
+    return resource.label ?? resource.id;
 }

package/src/panelGraphLayout.ts

@@ -1,3 +1,4 @@
+import { GRAPH_VISUAL_THEME, type GraphVisualTheme } from './panelVisualTheme.ts';
 import type cytoscape from 'cytoscape';
 import type { ELK, ElkExtendedEdge, ElkNode, ElkPort } from 'elkjs/lib/elk-api';
 
@@ -22,8 +23,8 @@ export type CytoscapeEdgeRouteData = {
     readonly segmentDistances: string;
 };
 
-export async function layoutGraphScene(elk: ELK, scene: GraphScene): Promise<GraphLayoutResult> {
-    const graph = createElkLayoutGraph(scene);
+export async function layoutGraphScene(elk: ELK, scene: GraphScene, theme: GraphVisualTheme = GRAPH_VISUAL_THEME): Promise<GraphLayoutResult> {
+    const graph = createElkLayoutGraph(scene, theme);
     const layout = await elk.layout(graph);
     const positions = new Map<GraphSceneElementId, GraphPosition>();
     collectLayoutPositions(layout, 0, 0, positions);
@@ -39,14 +40,14 @@ function usesCenterPorts(node: GraphSceneNode): boolean {
         || (node.kind === 'pass' && node.passKind === 'external-submission');
 }
 
-export function createElkLayoutGraph(scene: GraphScene): ElkNode {
+export function createElkLayoutGraph(scene: GraphScene, theme: GraphVisualTheme = GRAPH_VISUAL_THEME): ElkNode {
     const childrenByParent = new Map<GraphSceneElementId | undefined, GraphSceneNode[]>();
     const portsByNode = new Map<GraphSceneElementId, ElkPort[]>();
     const nodesById = new Map(scene.nodes.map((node) => [node.id, node]));
     const boundaryPort = (id: string, source: boolean) => {
         const node = nodesById.get(id)!;
         if (!usesCenterPorts(node)) return {};
-        const dimensions = nodeDimensions(node);
+        const dimensions = nodeDimensions(node, theme);
         return { x: source ? dimensions.width : 0, y: dimensions.height / 2 };
     };
     const elkEdges = scene.edges.map((edge): ElkExtendedEdge => {
@@ -79,7 +80,7 @@ export function createElkLayoutGraph(scene: GraphScene): ElkNode {
     }
     const createNode = (node: GraphSceneNode): ElkNode => {
         const children = childrenByParent.get(node.id)?.map(createNode);
-        const dimensions = nodeDimensions(node);
+        const dimensions = nodeDimensions(node, theme);
         return {
             id: node.id,
             width: dimensions.width,

package/src/panelGraphRenderer.ts

@@ -1,12 +1,17 @@
+import type { GraphVisualTheme } from './panelVisualTheme.ts';
 import type { GraphScene, GraphSceneElementId } from './panelGraphScene.ts';
 import type { Selection } from './panelTypes.ts';
 
 export type GraphRenderRequest = {
+    readonly theme?: GraphVisualTheme;
+    readonly onVisible?: () => void;
     readonly scene: GraphScene;
     readonly selected: Selection | undefined;
     readonly hovered: Selection | undefined;
     readonly fit: boolean;
     readonly anchorElementId?: GraphSceneElementId;
+    readonly reveal?: { readonly selection: Selection; readonly revision: number };
+    readonly captureRevision?: number;
     readonly onSelect: (selection: Selection) => void;
     readonly onHover: (selection: Selection | undefined) => void;
     readonly onToggleGroup: (pathKey: string) => void;
@@ -14,8 +19,10 @@ export type GraphRenderRequest = {
 
 export interface GraphRenderer {
     render(request: GraphRenderRequest): void;
+    setTheme?(theme: GraphVisualTheme): void;
     resize(): void;
     fit(): void;
     relayout(): void;
+    cancelReveal?(): void;
     destroy(): void;
 }

package/src/panelGraphScene.ts

@@ -9,6 +9,7 @@ import type {
 import { formatGpuDuration, labelNode, labelResource } from './panelDomHelpers.ts';
 import { declarationEntrances } from './debugCaptureModel.ts';
 import type { GraphFlowRelation, Selection } from './panelTypes.ts';
+import { formatMeasuredGpuWork } from './panelWorkbenchHelpers.ts';
 
 export type GraphSceneElementId = string;
 
@@ -98,6 +99,7 @@ export type GraphScene = {
 
 export type CreateGraphSceneOptions = {
     readonly groupsEnabled: boolean;
+    readonly showResourceDeclarations?: boolean;
     readonly expandedGroupPaths: ReadonlySet<string>;
 };
 
@@ -113,7 +115,7 @@ export function createGraphScene(
     snapshot: FrameGraphDebugViewModel,
     options: CreateGraphSceneOptions,
 ): GraphScene {
-    return createFrameFlowScene(snapshot, options.groupsEnabled, options.expandedGroupPaths);
+    return createFrameFlowScene(snapshot, options.groupsEnabled, options.expandedGroupPaths, options.showResourceDeclarations ?? true);
 }
 
 export function graphGroupElementId(pathKey: string): GraphSceneElementId {
@@ -133,7 +135,7 @@ export function selectionKey(selection: Selection): string {
         case 'root':
             return `root:${selection.key}`;
         case 'culled':
-            return `culled:${selection.index}`;
+            return `culled:${selection.id}`;
         case 'segment':
             return `segment:${selection.index}`;
     }
@@ -143,6 +145,7 @@ function createFrameFlowScene(
     snapshot: FrameGraphDebugViewModel,
     groupsEnabled: boolean,
     expandedGroupPaths: ReadonlySet<string>,
+    showResourceDeclarations: boolean,
 ): GraphScene {
     const interaction = createMutableInteractionIndex();
     const segmentByNodeId = executionSegmentByNodeId(snapshot);
@@ -157,7 +160,7 @@ function createFrameFlowScene(
         ...snapshot.accessEdges.filter((access) => retainedIds.has(access.nodeId)).map((access) => access.resource.id),
         ...snapshot.roots.flatMap((root) => root.resource ? [root.resource.id] : []),
     ]);
-    const resources = snapshot.resources.filter((resource) => usedResourceIds.has(resource.id));
+    const resources = showResourceDeclarations ? snapshot.resources.filter((resource) => usedResourceIds.has(resource.id)) : [];
     const populatedGroupIds = new Set<string>();
     for (const item of [...snapshot.nodes, ...resources]) {
         for (const id of groupsById.get(item.debugGroupId ?? '')?.ancestorIds ?? []) populatedGroupIds.add(id);
@@ -202,8 +205,8 @@ function createFrameFlowScene(
             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,
@@ -269,7 +272,7 @@ function createFrameFlowScene(
     }
     if (useGroups) {
         for (const group of snapshot.debugGroups) {
-            if (includedGroupIds.has(group.id)) continue;
+            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);
@@ -289,7 +292,7 @@ function createFrameFlowScene(
         const node: ResourceSceneNode = {
             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))),
+            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,
@@ -311,7 +314,7 @@ function createFrameFlowScene(
         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 declarationEntrances(snapshot.nodes, snapshot.accessEdges, snapshot.edges)) {
+    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] });
     }
@@ -343,11 +346,13 @@ function createFrameFlowScene(
             : 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) : ''),
-            overviewLabel: reasonLabel + '\n' + formatGraphResourceLabel(shortGraphLabel(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.'),
         });
@@ -356,7 +361,7 @@ function createFrameFlowScene(
         for (const nodeId of root.resolution?.producerNodeIds ?? []) {
             addRelation(representativeByNodeId.get(nodeId)!, id, resource.id, { role: 'output-producer', nodeIds: [nodeId], rootKey: root.key });
         }
-        if (root.resolution?.usesInitialContents) addRelation(representativeByResourceId.get(resource.id)!, id, resource.id,
+        if (showResourceDeclarations && root.resolution?.usesInitialContents) addRelation(representativeByResourceId.get(resource.id)!, id, resource.id,
             { role: 'output-initial', nodeIds: [], rootKey: root.key });
     }
     const edges: GraphSceneEdge[] = [...aggregates.entries()].map(([key, entry]) => {
@@ -479,20 +484,47 @@ function formatGraphNodeLabel(label: string): string {
     return formatGraphLabel(label, 20, 3);
 }
 
-function formatGraphResourceLabel(label: string): string {
-    const singleLine = label.replace(/\s+/g, ' ').trim();
+function formatGraphResourceLabel(label: string, maxLines = 2): string {
+    let remaining = [...label.replace(/\s+/g, ' ').trim()];
     // Reserve conservative monospace cells for CJK/emoji fallback glyphs as well.
-    const glyphs = [...singleLine];
     const cells = (glyph: string) => /\p{Mark}/u.test(glyph) ? 0 : glyph.codePointAt(0)! > 255 ? 2 : 1;
-    if (glyphs.reduce((sum, glyph) => sum + cells(glyph), 0) <= 18) return singleLine;
-    let result = '';
-    let width = 0;
-    for (const glyph of glyphs) {
-        if (width + cells(glyph) > 17) break;
-        result += glyph;
-        width += cells(glyph);
+    const take = (limit: number) => {
+        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: string[] = [];
+    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 result + '…';
+    return lines.join('\n');
 }
 
 function formatGraphLabel(label: string, maxLineLength: number, maxLines: number): string {
@@ -574,10 +606,11 @@ function shortGraphLabel(label: string): string {
 
 function createGroupLabel(group: FrameGraphDebugGroup, collapsed: boolean): string {
     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(
@@ -585,18 +618,22 @@ function createNodeTitle(
     segment: FrameGraphDebugViewModel['executionSegments'][number] | undefined,
     snapshot: FrameGraphDebugViewModel,
 ): string {
+    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: FrameGraphDebugGroup): string {
+function createGroupTitle(group: FrameGraphDebugGroup, snapshot: FrameGraphDebugViewModel): string {
     const summary = group.summary;
     return [
         group.path.join(' / '),
@@ -605,10 +642,11 @@ function createGroupTitle(group: FrameGraphDebugGroup): string {
         `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})`,
+        `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');
 }