@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/src/FrameGraphInspector.ts

@@ -1,3 +1,6 @@
+import type { FrameGraphCaptureRequest } from './capture.ts';
+import type { InspectorTheme } from './theme.ts';
+import { InspectorThemeController, resolveGraphTheme } from './panelTheme.ts';
 import {
 	FrameGraphSnapshotValidationError,
 	decodeFrameGraphSnapshot,
@@ -11,20 +14,23 @@ import {
 	type FrameGraphDebugViewModel,
 } from './debugCaptureModel.ts';
 import { createToolbarButton } from './panelDomHelpers.ts';
-import { createPanelIcon } from './panelIcons.ts';
 import {
 	destroyGraph,
 	fitGraph,
+	resolveGraphScene,
+	renderGraphLegend,
 } from './panelGraphView.ts';
-import { graphGroupElementId } from './panelGraphScene.ts';
-import { selectionExists } from './panelSelection.ts';
-import type { GraphViewState, Selection } from './panelTypes.ts';
+import { graphGroupElementId, selectionKey } from './panelGraphScene.ts';
+import { resolveNodeSelection, selectionExists } from './panelSelection.ts';
+import type { GraphViewState, Selection, WorkbenchTab } from './panelTypes.ts';
 import { ensureFrameGraphInspectorStyles } from './styles.ts';
 import { sameSelection, type WorkbenchCallbacks } from './panelWorkbenchHelpers.ts';
 import { FrameGraphDebugWorkbench } from './panelWorkbenchView.ts';
 
 /** Construction and safety limits for an embedded {@link FrameGraphInspector}. */
 export type FrameGraphInspectorOptions = {
+	/** Optional CSS theme. Without one, host variables inherit over the Storm defaults. */
+	theme?: InspectorTheme;
 	/**
 	 * Product label shown in the workbench command bar. Pass `false` to hide
 	 * visible branding while retaining the inspector's accessible name.
@@ -36,7 +42,7 @@ export type FrameGraphInspectorOptions = {
 	 * Produces a live snapshot when capture is requested. The inspector awaits
 	 * promises and displays thrown or rejected errors in its status area.
 	 */
-	captureSnapshot?: () => FrameGraphSnapshot | undefined | Promise<FrameGraphSnapshot | undefined>;
+	captureSnapshot?: (request: FrameGraphCaptureRequest) => FrameGraphSnapshot | undefined | Promise<FrameGraphSnapshot | undefined>;
 	/**
 	 * Maximum accepted import size in bytes.
 	 *
@@ -74,11 +80,13 @@ const DEFAULT_BRANDING = 'ZenFG Inspector';
 export class FrameGraphInspector {
 	/** Root element owned by this inspector instance. */
 	readonly dom = document.createElement('section');
+	private readonly themeController = new InspectorThemeController(this.dom);
 
 	private readonly body = document.createElement('div');
 	private readonly content = document.createElement('div');
 	private readonly dropOverlay = document.createElement('div');
 	private readonly groupsButton: HTMLButtonElement;
+	private readonly declarationsButton: HTMLButtonElement;
 	private readonly collapseGroupsButton: HTMLButtonElement;
 	private readonly graphView: GraphViewState;
 	private readonly workbench: FrameGraphDebugWorkbench;
@@ -99,6 +107,7 @@ export class FrameGraphInspector {
 	private copyFeedbackTimeout: number | undefined;
 	private readonly maxImportBytes: number;
 	private dragDepth = 0;
+	private revealRevision = 0;
 	private readonly handleDragEnter = (event: DragEvent): void => {
 		if (!isFileDrag(event)) return;
 		event.preventDefault();
@@ -158,8 +167,10 @@ export class FrameGraphInspector {
 			host: document.createElement('div'),
 			toolbar: document.createElement('div'),
 			legend: graphLegend,
+			refreshTheme: () => this.refreshTheme(),
 			layoutElementBudget: normalizeLimit(options.maxGraphElements, DEFAULT_MAX_GRAPH_ELEMENTS, 'maxGraphElements'),
 			groupsEnabled: true,
+			showResourceDeclarations: true,
 			expandedGroupPaths: new Set(),
 			fitOnNextRender: true,
 		};
@@ -168,23 +179,27 @@ export class FrameGraphInspector {
 		this.graphView.toolbar.setAttribute('role', 'toolbar');
 		this.graphView.toolbar.setAttribute('aria-label', 'Frame graph view controls');
 
+		this.declarationsButton = createToolbarButton('Declarations', 'Show resource declaration nodes', () => this.toggleDeclarations());
 		this.groupsButton = createToolbarButton('Groups', 'Toggle diagnostic group projection', () => this.toggleGroups());
 		this.collapseGroupsButton = createToolbarButton('Collapse All', 'Collapse every diagnostic group', () => this.collapseAllGroups());
 
 		const actionControls = document.createElement('div');
 		actionControls.className = 'zenfg-inspector-graph-action-controls';
 		actionControls.append(
+			this.declarationsButton,
 			this.groupsButton,
 			this.collapseGroupsButton,
-			createGraphIconButton('fit', 'Fit graph to view', () => fitGraph(this.graphView)),
+			createToolbarButton('Fit', 'Fit graph to view', () => fitGraph(this.graphView)),
 		);
-		this.graphView.toolbar.append(graphLegend, actionControls);
+		this.graphView.toolbar.append(actionControls);
 
 		const callbacks: WorkbenchCallbacks = {
 			onSelect: (selection) => this.handleSelect(selection),
 			onHover: (selection) => this.handleHover(selection),
 			onGroupToggle: (pathKey) => this.toggleGroup(pathKey),
 			isGroupExpanded: (pathKey) => this.graphView.expandedGroupPaths.has(pathKey),
+			onReveal: (selection, tab) => this.handleReveal(selection, tab),
+			onNavigate: (tab, filter) => this.workbench.navigate(tab, filter),
 		};
 		this.workbench = new FrameGraphDebugWorkbench(this.graphView, callbacks, {
 			onCapture: () => { void this.captureSnapshot(); },
@@ -206,20 +221,47 @@ export class FrameGraphInspector {
 		this.updateCaptureActions();
 		this.updateGraphControls();
 		this.showEmptyState();
-		queueMicrotask(() => this.maybeAutoCapture());
+		if (options.theme) this.setTheme(options.theme);
+		queueMicrotask(() => { if (!this.destroyed) { this.refreshTheme(); this.maybeAutoCapture(); } });
 	}
 
+    /** Replace API-applied variables on this instance, then synchronize graph styles.
+     * Pass null to restore host CSS and defaults. Does not change capture or interaction state.
+     */
+    setTheme(theme: InspectorTheme | null): void {
+        if (this.destroyed) return;
+        this.themeController.apply(theme);
+        this.refreshTheme();
+    }
+
+    /** Re-read final CSS values after external CSS changes and refresh graph and legend.
+     * Does not write theme variables, recapture, fit, or rebuild the component.
+     */
+    refreshTheme(): void {
+        if (this.destroyed) return;
+        const theme = resolveGraphTheme(this.dom);
+        this.graphView.theme = theme;
+        this.graphView.renderer?.setTheme?.(theme);
+        if (this.viewModel) renderGraphLegend(this.graphView.legend, this.viewModel, theme, this.graphView.showResourceDeclarations);
+    }
+
 	/**
 	 * Replaces or removes the live-capture provider.
 	 *
 	 * @remarks Installing a provider may immediately begin an asynchronous
-	 * capture when no snapshot is displayed.
+	 * capture when no snapshot is displayed. Replacing or removing a provider
+	 * invalidates its pending capture results without cancelling the provider
+	 * promise. An already displayed snapshot and any pending import are preserved.
 	 */
 	setCaptureSnapshotProvider(provider: FrameGraphInspectorOptions['captureSnapshot']): void {
-		const changed = this.captureSnapshotCallback !== provider;
+		if (this.destroyed || this.captureSnapshotCallback === provider) return;
+		if (this.capturing) {
+			this.operationRevision += 1;
+			this.capturing = false;
+		}
 		this.captureSnapshotCallback = provider;
-		if (changed && !this.viewModel) this.initialAutoCaptureAttempted = false;
-		if (!provider && !this.viewModel) this.showEmptyState();
+		if (!this.viewModel) this.initialAutoCaptureAttempted = false;
+		if (!provider && !this.viewModel && !this.importing) this.showEmptyState();
 		this.updateCaptureActions();
 		this.maybeAutoCapture();
 	}
@@ -245,7 +287,8 @@ export class FrameGraphInspector {
 		if (!this.viewModel) this.workbench.showEmptyState('capturing', 'Capturing the next rendered frame…');
 		this.updateCaptureActions();
 		try {
-			const snapshot = await this.captureSnapshotCallback();
+			const request: FrameGraphCaptureRequest = { timing: 'both' };
+			const snapshot = await this.captureSnapshotCallback(request);
 			if (this.destroyed || revision !== this.operationRevision) return;
 			if (!snapshot) {
 				this.reportCaptureIssue('No snapshot was produced. Capture again when rendering is active.');
@@ -270,9 +313,9 @@ export class FrameGraphInspector {
 	}
 
 	/**
-	 * Validates and synchronously displays a programmatic Snapshot 1.1 value.
+	 * Validates and synchronously displays a programmatic Snapshot 1.2 value.
 	 *
-	 * @throws {@link FrameGraphSnapshotValidationError} if `snapshot` is invalid.
+	 * @throws {@link @zenfg/snapshot!index.FrameGraphSnapshotValidationError | FrameGraphSnapshotValidationError} if `snapshot` is invalid.
 	 */
 	setSnapshot(snapshot: FrameGraphSnapshot): void {
 		if (this.destroyed) return;
@@ -322,10 +365,17 @@ export class FrameGraphInspector {
 			});
 			const sourceFormat = decoded.snapshot.capture.migration?.sourceFormat;
 			if (sourceFormat) {
-				const sourceLabel = sourceFormat === 'legacy-v0' ? 'Legacy V0' : 'Legacy Candidate V1';
+				// The current import format can differ from retained historical provenance.
+				const sourceLabel = {
+					'legacy-v0': 'Legacy V0',
+					'legacy-candidate-v1': 'Legacy Candidate V1',
+					'snapshot-v1.1': 'Snapshot 1.1',
+				}[decoded.migrated && decoded.source !== 'v1' ? decoded.source : sourceFormat];
+				const version = decoded.snapshot.version;
+				const targetLabel = `Snapshot ${version.major}.${version.minor}`;
 				this.statusMessage = decoded.migrated
-					? `Imported ${sourceLabel} and migrated it to ZenFG Snapshot V1.`
-					: `Imported Snapshot V1 with ${sourceLabel} migration provenance.`;
+					? `Imported ${sourceLabel} and migrated it to ZenFG ${targetLabel}.`
+					: `Imported ${targetLabel} with ${sourceLabel} migration provenance.`;
 				this.statusTone = 'neutral';
 			}
 		}
@@ -401,15 +451,15 @@ export class FrameGraphInspector {
 		this.protocolSnapshot = snapshot;
 		this.viewModel = viewModel;
 		this.graphView.fitOnNextRender = true;
+		this.graphView.captureRevision = (this.graphView.captureRevision ?? 0) + 1;
+		this.graphView.revealOnNextRender = undefined;
+		this.graphView.renderer?.cancelReveal?.();
 		this.hovered = undefined;
 		this.initialAutoCaptureAttempted = true;
 		this.statusMessage = undefined;
 		this.statusTone = 'neutral';
-		if (!this.selected || !selectionExists(viewModel, this.selected)) {
-			this.selected = viewModel.nodes[0]
-				? { kind: 'node', id: viewModel.nodes[0].id }
-				: undefined;
-		}
+		if (this.selected?.kind === 'node' || this.selected?.kind === 'culled') this.selected = resolveNodeSelection(viewModel, this.selected.id);
+		else if (this.selected && !selectionExists(viewModel, this.selected)) this.selected = undefined;
 		this.workbench.setSnapshot(viewModel, this.selected);
 		this.updateCaptureActions();
 		this.updateGraphControls();
@@ -430,7 +480,9 @@ export class FrameGraphInspector {
 		this.dom.removeEventListener('dragleave', this.handleDragLeave);
 		this.dom.removeEventListener('dragend', this.handleDragEnd);
 		this.dom.removeEventListener('drop', this.handleDrop);
+		this.themeController.destroy();
 		destroyGraph(this.graphView);
+		this.workbench.destroy();
 		this.dom.remove();
 	}
 
@@ -460,10 +512,47 @@ export class FrameGraphInspector {
 		void this.captureSnapshot();
 	}
 	private handleSelect(selection: Selection): void {
+		if (!this.viewModel || !selectionExists(this.viewModel, selection)) return;
 		this.selected = selection;
 		this.workbench.setSelection(selection);
 	}
 
+	private handleReveal(selection: Selection, tab: WorkbenchTab): void {
+		const snapshot = this.viewModel;
+		if (!snapshot || !selectionExists(snapshot, selection)) return;
+		if (tab === 'graph') {
+			const expanded = new Set(this.graphView.expandedGroupPaths);
+			const groupsEnabled = this.graphView.groupsEnabled;
+			const showResourceDeclarations = this.graphView.showResourceDeclarations;
+			if (selection.kind === 'resource') this.graphView.showResourceDeclarations = true;
+			if (selection.kind === 'group') this.graphView.groupsEnabled = true;
+			let groupId: string | undefined;
+			if (selection.kind === 'node') groupId = snapshot.nodeById.get(selection.id)?.debugGroupId;
+			else if (selection.kind === 'resource') groupId = snapshot.resourceById.get(selection.id)?.debugGroupId;
+			else if (selection.kind === 'group') groupId = snapshot.groupByPathKey.get(selection.pathKey)?.parentId;
+			if (this.graphView.groupsEnabled && groupId) {
+				for (const id of snapshot.groupById.get(groupId)?.ancestorIds ?? []) {
+					const group = snapshot.groupById.get(id);
+					if (group) this.graphView.expandedGroupPaths.add(group.pathKey);
+				}
+			}
+			const scene = resolveGraphScene(this.graphView, snapshot);
+			const availableIds = new Set([...scene.nodes, ...scene.edges].map((entry) => entry.id));
+			if (!(scene.interaction.primaryElementIdsBySelection.get(selectionKey(selection))?.some((id) => availableIds.has(id)))) {
+				this.graphView.groupsEnabled = groupsEnabled;
+				this.graphView.showResourceDeclarations = showResourceDeclarations;
+				this.graphView.expandedGroupPaths.clear();
+				for (const path of expanded) this.graphView.expandedGroupPaths.add(path);
+				this.workbench.showNavigationIssue(selection.kind === 'culled' ? 'Culled passes are not part of Frame Flow.' : 'This object has no representation in Frame Flow.', selection);
+				return;
+			}
+			this.graphView.revealOnNextRender = { selection, revision: ++this.revealRevision };
+			this.updateGraphControls();
+		}
+		this.handleSelect(selection);
+		this.workbench.reveal(selection, tab);
+	}
+
 	private handleHover(selection: Selection | undefined): void {
 		if (!this.viewModel || sameSelection(this.hovered, selection)) return;
 		this.hovered = selection;
@@ -471,14 +560,30 @@ export class FrameGraphInspector {
 	}
 
 	private updateGraphControls(): void {
+		const showDeclarations = this.graphView.showResourceDeclarations ?? true;
+		this.declarationsButton.classList.toggle('active', showDeclarations);
+		this.declarationsButton.setAttribute('aria-pressed', String(showDeclarations));
 		const hasGroups = (this.viewModel?.debugGroups.length ?? 0) > 0;
 		this.groupsButton.disabled = !hasGroups;
+		this.groupsButton.hidden = !hasGroups;
+		this.collapseGroupsButton.hidden = !hasGroups;
 		this.groupsButton.classList.toggle('active', hasGroups && this.graphView.groupsEnabled);
 		this.groupsButton.setAttribute('aria-pressed', hasGroups && this.graphView.groupsEnabled ? 'true' : 'false');
 		const hasExpanded = this.viewModel?.debugGroups.some((group) => this.graphView.expandedGroupPaths.has(group.pathKey)) ?? false;
 		this.collapseGroupsButton.disabled = !hasGroups || !this.graphView.groupsEnabled || !hasExpanded;
 	}
 
+	private toggleDeclarations(): void {
+		this.handleHover(undefined);
+		this.graphView.showResourceDeclarations = !(this.graphView.showResourceDeclarations ?? true);
+		this.graphView.renderer?.cancelReveal?.();
+		this.graphView.revealOnNextRender = undefined;
+		this.graphView.anchorElementIdOnNextRender = undefined;
+		this.graphView.fitOnNextRender = true;
+		this.updateGraphControls();
+		this.workbench.refreshGraphStructure();
+	}
+
 	private toggleGroups(): void {
 		if (!this.viewModel?.debugGroups.length) return;
 		this.handleHover(undefined);
@@ -546,16 +651,10 @@ export class FrameGraphInspector {
 export function mountFrameGraphInspector(host: HTMLElement, options?: FrameGraphInspectorOptions): FrameGraphInspector {
 	const inspector = new FrameGraphInspector(options);
 	host.appendChild(inspector.dom);
+	inspector.refreshTheme();
 	return inspector;
 }
 
-function createGraphIconButton(icon: 'fit', title: string, onClick: () => void): HTMLButtonElement {
-	const button = createToolbarButton('', title, onClick);
-	button.classList.add('zenfg-inspector-icon-button');
-	button.appendChild(createPanelIcon(icon));
-	return button;
-}
-
 async function writeTextToClipboard(text: string): Promise<void> {
 	if (navigator.clipboard?.writeText) {
 		await navigator.clipboard.writeText(text);
@@ -596,7 +695,7 @@ function formatImportLimit(bytes: number): string {
 }
 
 function formatIssues(issues: readonly { readonly path: string; readonly message: string }[]): string {
-	return issues.slice(0, 3).map((issue) => `${issue.path || '/'}: ${issue.message}`).join('; ');
+	return issues.map((issue) => `${issue.path || '/'}: ${issue.message}`).join('\n');
 }
 
 function isFileDrag(event: DragEvent): boolean {

package/src/capture.ts

@@ -0,0 +1,4 @@
+/** Requested timing families for the next live capture; never changes imported data. */
+export type FrameGraphCaptureRequest = {
+	readonly timing: 'cpu' | 'gpu' | 'both';
+};

package/src/debugCaptureModel.ts

@@ -59,6 +59,7 @@ export type FrameGraphDebugNode = {
 	readonly sideEffect: boolean;
 	readonly debugGroupId?: string;
     readonly gpuDurationMicros?: number;
+    readonly cpuDurationMicros?: number;
     readonly reads: readonly FrameGraphDebugAccess[];
     readonly writes: readonly FrameGraphDebugAccess[];
 };
@@ -121,6 +122,8 @@ export type FrameGraphDebugGroupSummary = {
 	readonly externalSubmissionCount: number;
 	readonly gpuWorkDurationMicros: number;
 	readonly timedNodeCount: number;
+	readonly cpuTimedNodeCount: number;
+	readonly cpuWorkDurationMicros: number;
 	readonly timingEligibleNodeCount: number;
 };
 
@@ -140,14 +143,23 @@ export type FrameGraphDebugGroup = {
 export type FrameGraphDebugMetrics = {
 	readonly timingEligibleNodeCount: number;
 	readonly timedNodeCount: number;
+	readonly cpuTimedNodeCount: number;
+	readonly cpuWorkDurationMicros: number;
 	readonly slowestNode?: FrameGraphDebugNode;
 	readonly transientEstimatedByteSize?: number;
 	readonly logicalCapacityBytes?: number;
 	readonly physicalEstimatedBytes?: number;
 	readonly aliasReuseBytes?: number;
 	readonly aliasedAllocationCount: number;
+	readonly estimatedCoverage: {
+		readonly transient: EstimateCoverage;
+		readonly logical: EstimateCoverage;
+		readonly physical: EstimateCoverage;
+	};
 };
 
+export type EstimateCoverage = { readonly known: number; readonly total: number };
+
 export type FrameGraphDebugSnapshotSource = {
 	readonly kind: 'live' | 'file' | 'programmatic';
 	readonly label: string;
@@ -169,6 +181,10 @@ export type FrameGraphDebugViewModel = {
 	readonly executionSegments: readonly FrameGraphDebugExecutionSegment[];
 	readonly textureViewById: ReadonlyMap<string, FrameGraphSnapshot['graph']['textureViews'][number]>;
 	readonly nodeById: ReadonlyMap<string, FrameGraphDebugNode>;
+	readonly canonicalNodeById: ReadonlyMap<string, FrameGraphSnapshot['graph']['nodes'][number]>;
+	readonly culledById: ReadonlyMap<string, FrameGraphDebugCulledNode>;
+	readonly diagnosticsByNodeId: ReadonlyMap<string, readonly FrameGraphSnapshot['diagnostics'][number][]>;
+	readonly diagnosticsByResourceId: ReadonlyMap<string, readonly FrameGraphSnapshot['diagnostics'][number][]>;
 	readonly resourceById: ReadonlyMap<string, FrameGraphDebugResource>;
 	readonly groupById: ReadonlyMap<string, FrameGraphDebugGroup>;
 	readonly groupByPathKey: ReadonlyMap<string, FrameGraphDebugGroup>;
@@ -178,6 +194,7 @@ export type FrameGraphDebugViewModel = {
 	readonly segmentByNodeId: ReadonlyMap<string, FrameGraphDebugExecutionSegment>;
 	readonly segmentByIndex: ReadonlyMap<number, FrameGraphDebugExecutionSegment>;
 	readonly metrics: FrameGraphDebugMetrics;
+    readonly cpuProfiling: FrameGraphSnapshot['timings']['cpu'];
     readonly profiling:
         | {
             readonly status: 'available';
@@ -216,6 +233,7 @@ export function createDebugViewModel(
 		? { ...source, migratedFromLegacy: true }
 		: source;
 	const gpuTiming = snapshot.timings.gpu;
+	const cpuTimings = new Map(snapshot.timings.cpu.status === 'available' ? snapshot.timings.cpu.nodes.map(node => [node.nodeId, node.durationMicros]) : []);
 	const resourcePool = snapshot.memory.poolReport;
 	const normalizedGroups = normalizeDebugGroups(compilation);
 	const knownGroupIds = new Set(normalizedGroups.map((group) => group.id));
@@ -278,6 +296,7 @@ export function createDebugViewModel(
 		sideEffect: node.sideEffect,
 		debugGroupId: node.groupId,
 		gpuDurationMicros: timings.get(node.id),
+		cpuDurationMicros: cpuTimings.get(node.id),
 		reads: nodeAccesses(node.id, 'read'),
 		writes: nodeAccesses(node.id, 'write'),
 	}));
@@ -345,6 +364,18 @@ export function createDebugViewModel(
 		executionSegments,
 	});
 	const nodeById = new Map(nodes.map((node) => [node.id, node]));
+	const canonicalNodeById = new Map(compilation.nodes.map((node) => [node.id, node]));
+	const culledById = new Map(culledNodes.map((entry) => [entry.node.id, entry]));
+	const diagnosticsByNodeId = new Map<string, FrameGraphSnapshot['diagnostics'][number][]>();
+	const diagnosticsByResourceId = new Map<string, FrameGraphSnapshot['diagnostics'][number][]>();
+	for (const diagnostic of snapshot.diagnostics) {
+		for (const [id, index] of [[diagnostic.nodeId, diagnosticsByNodeId], [diagnostic.resourceId, diagnosticsByResourceId]] as const) {
+			if (id === undefined) continue;
+			const entries = index.get(id) ?? [];
+			entries.push(diagnostic);
+			index.set(id, entries);
+		}
+	}
 	const resourceById = new Map(resources.map((resource) => [resource.id, resource]));
 	const groupById = new Map(debugGroups.map((group) => [group.id, group]));
 	const groupByPathKey = new Map(debugGroups.map((group) => [group.pathKey, group]));
@@ -362,14 +393,18 @@ export function createDebugViewModel(
 	), undefined);
 	const transientResources = resources.filter((resource) => resource.origin === 'transient');
 	const transientEstimatedByteSize = sumKnown(transientResources.map((resource) => resource.estimatedByteSize));
-	const physicalEstimatedBytes = sumKnown(physicalAllocations.map((allocation) => allocation.estimatedByteSize));
+	const allocationAvailable = snapshot.memory.allocationReport.status === 'available';
+	const physicalSizes = physicalAllocations.map((allocation) => allocation.estimatedByteSize);
+	const physicalEstimatedBytes = allocationAvailable ? sumKnown(physicalSizes) : undefined;
 	const logicalAllocationSizes = transientResources
 		.filter((resource) => resource.physicalResourceId !== undefined)
 		.map((resource) => allocationById.get(resource.physicalResourceId!)?.estimatedByteSize);
-	const logicalCapacityBytes = sumKnown(logicalAllocationSizes);
+	const logicalCapacityBytes = allocationAvailable ? sumKnown(logicalAllocationSizes) : undefined;
 	const metrics: FrameGraphDebugMetrics = {
 		timingEligibleNodeCount: timingEligibleNodes.length,
 		timedNodeCount: timedNodes.length,
+		cpuTimedNodeCount: nodes.filter(node => node.cpuDurationMicros !== undefined).length,
+		cpuWorkDurationMicros: nodes.reduce((sum, node) => sum + (node.cpuDurationMicros ?? 0), 0),
 		slowestNode,
 		transientEstimatedByteSize,
 		logicalCapacityBytes,
@@ -378,6 +413,11 @@ export function createDebugViewModel(
 			? undefined
 			: Math.max(0, logicalCapacityBytes - physicalEstimatedBytes),
 		aliasedAllocationCount: physicalAllocations.filter((allocation) => allocation.resourceIds.length > 1).length,
+		estimatedCoverage: {
+			transient: estimateCoverage(transientResources.map((resource) => resource.estimatedByteSize)),
+			logical: estimateCoverage(logicalAllocationSizes),
+			physical: estimateCoverage(physicalSizes),
+		},
 	};
 
 	return {
@@ -395,6 +435,10 @@ export function createDebugViewModel(
 		executionSegments,
 		textureViewById,
 		nodeById,
+		canonicalNodeById,
+		culledById,
+		diagnosticsByNodeId,
+		diagnosticsByResourceId,
 		resourceById,
 		groupById,
 		groupByPathKey,
@@ -404,6 +448,7 @@ export function createDebugViewModel(
 		segmentByNodeId,
 		segmentByIndex,
 		metrics,
+        cpuProfiling: snapshot.timings.cpu,
         profiling: gpuTiming.status === 'available'
             ? {
                 status: 'available',
@@ -425,6 +470,10 @@ export function createDebugViewModel(
 	};
 }
 
+function estimateCoverage(values: readonly (number | undefined)[]): EstimateCoverage {
+	return { known: values.filter((value) => value !== undefined).length, total: values.length };
+}
+
 function sumKnown(values: readonly (number | undefined)[]): number | undefined {
 	let total = 0;
 	for (const value of values) {
@@ -601,6 +650,8 @@ function buildDebugGroupSummaries(input: {
 				externalSubmissionCount: retained.filter((node) => node.kind === 'external-submission').length,
 				gpuWorkDurationMicros: timed.reduce((sum, node) => sum + node.gpuDurationMicros!, 0),
 				timedNodeCount: timed.length,
+				cpuTimedNodeCount: retained.filter(node => node.cpuDurationMicros !== undefined).length,
+				cpuWorkDurationMicros: retained.reduce((sum, node) => sum + (node.cpuDurationMicros ?? 0), 0),
 				timingEligibleNodeCount: timingEligible.length,
 			},
 		};

package/src/index.ts

@@ -17,5 +17,9 @@ export type {
 } from '@zenfg/snapshot';
 export { FrameGraphInspector, mountFrameGraphInspector } from './FrameGraphInspector.ts';
 export type { FrameGraphInspectorOptions } from './FrameGraphInspector.ts';
-export { ZENFG_INSPECTOR_QUERY_PARAM, isZenFGInspectorRequested } from './query.ts';
-export { ensureFrameGraphInspectorStyles } from './styles.ts';
+export { ZENFG_INSPECTOR_QUERY_PARAM, isZenFGInspectorRequested } from './query.ts';
+export { ensureFrameGraphInspectorStyles } from './styles.ts';
+
+export type { InspectorTheme, InspectorThemeVariables } from './theme.ts';
+
+export type { FrameGraphCaptureRequest } from './capture.ts';

package/src/panelAliasAnalysis.ts

@@ -22,9 +22,16 @@ export type AliasAnalysis = {
     readonly resources: ReadonlyMap<string, AliasAnalysisResource>;
     readonly minUse: number;
     readonly maxUse: number;
+    readonly hasLifetimes: boolean;
 };
 
+// View models are immutable for the lifetime of a capture. Search and selection
+// changes should not rebuild allocation membership or the execution domain.
+const analysisBySnapshot = new WeakMap<FrameGraphDebugViewModel, AliasAnalysis>();
+
 export function analyzeSnapshotAliases(snapshot: FrameGraphDebugViewModel): AliasAnalysis {
+    const cached = analysisBySnapshot.get(snapshot);
+    if (cached) return cached;
     const allocationById = snapshot.allocationById;
     const resourcesById = snapshot.resourceById;
     const allocationGroups = snapshot.physicalAllocations.map((allocation): AliasAnalysisAllocation => {
@@ -43,13 +50,14 @@ export function analyzeSnapshotAliases(snapshot: FrameGraphDebugViewModel): Alia
     let minUse = Number.POSITIVE_INFINITY;
     let maxUse = Number.NEGATIVE_INFINITY;
     for (const resource of snapshot.resources) {
-        if (!resource.lifetime) {
+        if (resource.origin !== 'transient' || !resource.lifetime) {
             continue;
         }
         minUse = Math.min(minUse, resource.lifetime.firstUse);
         maxUse = Math.max(maxUse, resource.lifetime.lastUse);
     }
-    if (!Number.isFinite(minUse) || !Number.isFinite(maxUse)) {
+    const hasLifetimes = Number.isFinite(minUse) && Number.isFinite(maxUse);
+    if (!hasLifetimes) {
         minUse = 0;
         maxUse = 0;
     }
@@ -65,16 +73,19 @@ export function analyzeSnapshotAliases(snapshot: FrameGraphDebugViewModel): Alia
             resource,
             allocation,
             aliasStatus,
-            nonAliasReasons: resolveNonAliasReasons(resource, allocation, allocationGroups),
+            nonAliasReasons: describeAliasStatus(aliasStatus),
         });
     }
 
-    return {
+    const analysis = {
         allocations: allocationGroups,
         resources: resourceAnalysis,
         minUse,
         maxUse,
+        hasLifetimes,
     };
+    analysisBySnapshot.set(snapshot, analysis);
+    return analysis;
 }
 
 function resolveAliasStatus(
@@ -94,71 +105,14 @@ function resolveAliasStatus(
     return allocationResources.length > 1 ? 'aliased' : 'single';
 }
 
-function resolveNonAliasReasons(
-    resource: FrameGraphDebugResource,
-    allocation: FrameGraphDebugPhysicalAllocation | undefined,
-    allocations: readonly AliasAnalysisAllocation[],
-): readonly string[] {
-    if (resource.origin !== 'transient') {
-        return ['Imported or swapchain resources do not participate in transient aliasing.'];
-    }
-    if (!resource.lifetime) {
-        return ['No lifetime is available for this resource in the retained graph.'];
-    }
-    if (!allocation) {
-        return ['No physical allocation is associated with this transient resource.'];
-    }
-
-    const reasons = new Set<string>();
-    for (const group of allocations) {
-        if (group.allocation.id === allocation.id) {
-            continue;
-        }
-        for (const other of group.resources) {
-            if (other.id === resource.id || other.origin !== 'transient') {
-                continue;
-            }
-            if (other.kind !== resource.kind) {
-                reasons.add(`Different kind from ${labelDebugResource(other)}.`);
-                continue;
-            }
-            if (group.allocation.compatibilityClassId !== allocation.compatibilityClassId) {
-                reasons.add(`Different compatibility class from ${labelDebugResource(other)}.`);
-                continue;
-            }
-            if (!other.lifetime) {
-                reasons.add(`Missing lifetime for ${labelDebugResource(other)}.`);
-                continue;
-            }
-            if (lifetimesOverlap(resource.lifetime, other.lifetime)) {
-                reasons.add(`Lifetime overlaps ${labelDebugResource(other)} (${other.lifetime.firstUse}-${other.lifetime.lastUse}).`);
-            }
-        }
-    }
-
-    if (reasons.size === 0) {
-        return allocationResourcesFor(allocations, allocation.id).length > 1
-            ? ['Aliases with resources in the same physical allocation.']
-            : ['No compatible non-overlapping transient resource was found in this snapshot.'];
+function describeAliasStatus(status: AliasAnalysisResource['aliasStatus']): readonly string[] {
+    switch (status) {
+        case 'not-transient': return ['Imported and surface resources do not participate in transient aliasing.'];
+        case 'no-lifetime': return ['No lifetime is available for this resource in the retained graph.'];
+        case 'not-allocated': return ['No physical allocation is associated with this transient resource.'];
+        case 'aliased': return ['Shares a physical allocation with other logical resources.'];
+        // The snapshot states allocation membership; it cannot explain allocator
+        // decisions by comparing every pair of logical resources.
+        case 'single': return ['This physical allocation contains one logical resource.'];
     }
-
-    return Array.from(reasons).slice(0, 6);
-}
-
-function allocationResourcesFor(
-    allocations: readonly AliasAnalysisAllocation[],
-    allocationId: string,
-): readonly FrameGraphDebugResource[] {
-    return allocations.find((group) => group.allocation.id === allocationId)?.resources ?? [];
-}
-
-function lifetimesOverlap(
-    a: NonNullable<FrameGraphDebugResource['lifetime']>,
-    b: NonNullable<FrameGraphDebugResource['lifetime']>,
-): boolean {
-    return a.firstUse <= b.lastUse && b.firstUse <= a.lastUse;
-}
-
-function labelDebugResource(resource: FrameGraphDebugResource): string {
-    return resource.label ?? `${resource.kind}-${resource.id}`;
 }