@zenfg/inspector 0.1.0-beta.1

package/src/panelWorkbenchHelpers.ts

@@ -0,0 +1,216 @@
+import type {
+	FrameGraphDebugResource,
+	FrameGraphDebugViewModel,
+} from './debugCaptureModel.ts';
+import { createCell, formatBytes, labelResource } from './panelDomHelpers.ts';
+import type { Selection } from './panelTypes.ts';
+
+export type WorkbenchCallbacks = {
+	readonly onSelect: (selection: Selection) => void;
+	readonly onHover: (selection: Selection | undefined) => void;
+	readonly onGroupToggle: (pathKey: string) => void;
+	readonly isGroupExpanded: (pathKey: string) => boolean;
+};
+export type WorkbenchTableColumn = {
+	readonly label: string;
+	readonly column?: 'code' | 'kind' | 'numeric';
+};
+
+
+export function selectionKey(selection: Selection): string {
+	switch (selection.kind) {
+		case 'node': return `node:${selection.id}`;
+		case 'group': return `group:${selection.pathKey}`;
+		case 'resource': return `resource:${selection.id}`;
+		case 'root': return `root:${selection.index}`;
+		case 'culled': return `culled:${selection.index}`;
+		case 'allocation': return `allocation:${selection.id}`;
+		case 'segment': return `segment:${selection.index}`;
+	}
+}
+
+export function sameSelection(a: Selection | undefined, b: Selection | undefined): boolean {
+	return a === undefined || b === undefined ? a === b : selectionKey(a) === selectionKey(b);
+}
+
+export function updateSelectedRows(rows: ReadonlyMap<string, readonly HTMLElement[]>, selected: Selection | undefined): void {
+	const key = selected ? selectionKey(selected) : undefined;
+	for (const [rowKey, elements] of rows) {
+		for (const element of elements) {
+			const active = rowKey === key;
+			element.classList.toggle('selected', active);
+			if (element.getAttribute('role') === 'option') {
+				element.setAttribute('aria-selected', active ? 'true' : 'false');
+			}
+		}
+	}
+}
+
+export function registerSelectable(
+	rows: Map<string, HTMLElement[]>,
+	element: HTMLElement,
+	selection: Selection,
+	callbacks: WorkbenchCallbacks,
+): void {
+	const key = selectionKey(selection);
+	const elements = rows.get(key) ?? [];
+	elements.push(element);
+	rows.set(key, elements);
+	element.dataset.selectionKey = key;
+	element.addEventListener('mouseenter', () => callbacks.onHover(selection));
+	element.addEventListener('mouseleave', () => callbacks.onHover(undefined));
+}
+
+export function createViewToolbar(label: string): HTMLDivElement {
+	const toolbar = document.createElement('div');
+	toolbar.className = 'zenfg-inspector-view-toolbar';
+	toolbar.setAttribute('role', 'toolbar');
+	toolbar.setAttribute('aria-label', label);
+	return toolbar;
+}
+
+export function createSearchInput(
+	placeholder: string,
+	value: string,
+	onInput: (value: string) => void,
+): HTMLInputElement {
+	const input = document.createElement('input');
+	input.type = 'search';
+	input.placeholder = placeholder;
+	input.value = value;
+	input.setAttribute('aria-label', placeholder);
+	input.addEventListener('input', () => onInput(input.value));
+	return input;
+}
+
+export function createFilterSelect(
+	label: string,
+	value: string,
+	options: readonly (readonly [value: string, label: string])[],
+	onChange: (value: string) => void,
+): HTMLSelectElement {
+	const select = document.createElement('select');
+	select.setAttribute('aria-label', label);
+	for (const [optionValue, optionLabel] of options) {
+		const option = document.createElement('option');
+		option.value = optionValue;
+		option.textContent = optionLabel;
+		select.appendChild(option);
+	}
+	select.value = value;
+	select.addEventListener('change', () => onChange(select.value));
+	return select;
+}
+
+export function createTableScroller(headers: readonly WorkbenchTableColumn[]): {
+	readonly scroller: HTMLDivElement;
+	readonly table: HTMLTableElement;
+	readonly body: HTMLTableSectionElement;
+} {
+	const scroller = document.createElement('div');
+	scroller.className = 'zenfg-inspector-table-scroller';
+	const table = document.createElement('table');
+	table.className = 'zenfg-inspector-workbench-table';
+	const head = document.createElement('thead');
+	const row = document.createElement('tr');
+	for (const header of headers) {
+		const cell = document.createElement('th');
+		cell.textContent = header.label;
+		if (header.column) cell.dataset.column = header.column;
+		row.appendChild(cell);
+	}
+	head.appendChild(row);
+	const body = document.createElement('tbody');
+	table.append(head, body);
+	scroller.appendChild(table);
+	return { scroller, table, body };
+}
+
+export function createSelectionCell(
+	text: string,
+	selection: Selection,
+	callbacks: WorkbenchCallbacks,
+	column?: WorkbenchTableColumn['column'],
+): HTMLTableCellElement {
+	const cell = document.createElement('td');
+	const button = createRelationButton(text, selection, callbacks.onSelect);
+	cell.appendChild(button);
+	if (column) cell.dataset.column = column;
+	return cell;
+}
+
+export function createRelationButton(
+	text: string,
+	selection: Selection,
+	onSelect: (selection: Selection) => void,
+): HTMLButtonElement {
+	const button = document.createElement('button');
+	button.type = 'button';
+	button.className = 'zenfg-inspector-relation-button';
+	button.textContent = text;
+	button.addEventListener('click', () => onSelect(selection));
+	return button;
+}
+
+export function createKindCell(kind: string, label = kind): HTMLTableCellElement {
+	const cell = createCell('', { column: 'kind', kind });
+	const marker = document.createElement('span');
+	marker.className = 'zenfg-inspector-kind-label';
+	marker.dataset.kind = kind;
+	marker.textContent = label;
+	cell.appendChild(marker);
+	return cell;
+}
+
+export function groupPath(snapshot: FrameGraphDebugViewModel, groupId: string | undefined): string {
+	if (groupId === undefined) return '-';
+	return snapshot.groupById.get(groupId)?.path.join(' / ') ?? `group-${groupId}`;
+}
+
+export function formatEstimatedBytes(bytes: number | undefined): string {
+	return bytes === undefined ? 'Unknown' : formatBytes(bytes);
+}
+
+export function formatResourceDescriptor(resource: FrameGraphDebugResource): string {
+	const descriptor = resource.descriptor;
+	if (!descriptor) return 'Unknown';
+	if (resource.kind === 'buffer' && 'size' in descriptor && typeof descriptor.size === 'number') {
+		return `${formatBytes(descriptor.size)} buffer`;
+	}
+	if ('format' in descriptor) {
+		const size = descriptor.size;
+		const extent = `${size.width}×${size.height}×${size.depthOrArrayLayers}`;
+		const extras = [
+			descriptor.dimension !== '2d' ? descriptor.dimension : undefined,
+			descriptor.mipLevelCount > 1 ? `${descriptor.mipLevelCount} mips` : undefined,
+			descriptor.sampleCount > 1 ? `${descriptor.sampleCount}× MSAA` : undefined,
+			descriptor.viewFormats.length > 0 ? `views ${descriptor.viewFormats.join(', ')}` : undefined,
+		].filter(Boolean);
+		return `${descriptor.format} · ${extent}${extras.length ? ` · ${extras.join(' · ')}` : ''}`;
+	}
+	return 'Unknown';
+}
+
+export function resourceAccessCounts(snapshot: FrameGraphDebugViewModel, resourceId: string): readonly [number, number] {
+	let reads = 0;
+	let writes = 0;
+	for (const access of snapshot.accessesByResourceId.get(resourceId) ?? []) {
+		if (access.mode === 'read') reads++;
+		else writes++;
+	}
+	return [reads, writes];
+}
+
+export function createEmptyTableRow(columnCount: number, text: string): HTMLTableRowElement {
+	const row = document.createElement('tr');
+	const cell = createCell(text);
+	cell.colSpan = columnCount;
+	cell.className = 'zenfg-inspector-empty-row';
+	row.appendChild(cell);
+	return row;
+}
+
+export function resourceLabel(snapshot: FrameGraphDebugViewModel, resourceId: string): string {
+	const resource = snapshot.resourceById.get(resourceId);
+	return resource ? labelResource(resource) : `resource-${resourceId}`;
+}

package/src/panelWorkbenchView.ts

@@ -0,0 +1,465 @@
+import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import {
+	formatBytes,
+	formatGpuFrameDuration,
+	formatPoolHitRate,
+	labelNode,
+} from './panelDomHelpers.ts';
+import { createPanelIcon, setPanelButtonContent } from './panelIcons.ts';
+import { DiagnosticsView } from './panelDiagnosticsView.ts';
+import { InspectorView } from './panelInspectorView.ts';
+import { MemoryView } from './panelMemoryView.ts';
+import { PassesView } from './panelPassesView.ts';
+import { ResourcesView } from './panelResourcesView.ts';
+import { renderGraphView, resizeGraph } from './panelGraphView.ts';
+import type { GraphViewState, Selection, WorkbenchTab } from './panelTypes.ts';
+import { formatEstimatedBytes, type WorkbenchCallbacks } from './panelWorkbenchHelpers.ts';
+
+export type FrameGraphDebugWorkbenchActions = {
+	onCapture(): void;
+	onImport(file: File): void;
+	onDownload(): void;
+	onCopyJson(): void;
+};
+export type FrameGraphDebugWorkbenchOptions = {
+	branding: string | false;
+	idPrefix: string;
+};
+export type FrameGraphDebugEmptyStateKind = 'waiting' | 'capturing' | 'empty' | 'error';
+
+
+export type FrameGraphDebugSnapshotActionState = {
+	providerAvailable: boolean;
+	hasCapture: boolean;
+	capturing: boolean;
+	importing: boolean;
+	copying: boolean;
+	copied: boolean;
+	message?: string;
+	messageTone?: 'neutral' | 'error';
+};
+
+export class FrameGraphDebugWorkbench {
+	readonly root = document.createElement('div');
+	private readonly summary = document.createElement('div');
+	private readonly commandBar = document.createElement('div');
+	private readonly brand = document.createElement('div');
+	private readonly tabList = document.createElement('div');
+	private readonly commandActions = document.createElement('div');
+	private readonly commandStatus = document.createElement('span');
+	private readonly workspace = document.createElement('div');
+	private readonly main = document.createElement('main');
+	private readonly emptyHost = document.createElement('div');
+	private readonly overviewRoot = document.createElement('section');
+	private readonly graphRoot = document.createElement('section');
+	private readonly passes: PassesView;
+	private readonly resources: ResourcesView;
+	private readonly memory: MemoryView;
+	private readonly diagnostics: DiagnosticsView;
+	private readonly inspector: InspectorView;
+	private readonly inspectorOpenButton = document.createElement('button');
+	private readonly captureButton = document.createElement('button');
+	private readonly importButton = document.createElement('button');
+	private readonly importInput = document.createElement('input');
+	private readonly exportButton = document.createElement('button');
+	private readonly exportMenu = document.createElement('div');
+	private readonly downloadButton = document.createElement('button');
+	private readonly copyButton = document.createElement('button');
+	private readonly tabButtons = new Map<WorkbenchTab, HTMLButtonElement>();
+	private readonly views = new Map<WorkbenchTab, HTMLElement>();
+	private activeTab: WorkbenchTab = 'graph';
+	private hasSnapshot = false;
+	private snapshot: FrameGraphDebugViewModel | undefined;
+	private selected: Selection | undefined;
+	private hovered: Selection | undefined;
+
+	constructor(
+		private readonly graphView: GraphViewState,
+		private readonly callbacks: WorkbenchCallbacks,
+		actions: FrameGraphDebugWorkbenchActions,
+		options: FrameGraphDebugWorkbenchOptions,
+	) {
+		this.root.className = 'zenfg-inspector-workbench';
+		this.summary.className = 'zenfg-inspector-capture-summary';
+		this.commandBar.className = 'zenfg-inspector-workbench-command-bar';
+		this.brand.className = 'zenfg-inspector-brand';
+		if (options.branding === false) this.commandBar.classList.add('branding-hidden');
+		else this.brand.textContent = options.branding;
+		this.tabList.className = 'zenfg-inspector-workbench-tabs';
+		this.tabList.setAttribute('role', 'tablist');
+		this.tabList.setAttribute('aria-label', 'FrameGraph debug views');
+		this.commandActions.className = 'zenfg-inspector-workbench-actions';
+		this.commandActions.setAttribute('role', 'toolbar');
+		this.commandActions.setAttribute('aria-label', 'FrameGraph commands');
+		this.commandStatus.className = 'zenfg-inspector-command-status';
+		this.commandStatus.setAttribute('role', 'status');
+		this.commandStatus.setAttribute('aria-live', 'polite');
+		this.workspace.className = 'zenfg-inspector-workspace inspector-open';
+		this.main.className = 'zenfg-inspector-main';
+		this.emptyHost.className = 'zenfg-inspector-workbench-empty';
+		this.emptyHost.setAttribute('role', 'status');
+		this.emptyHost.setAttribute('aria-live', 'polite');
+
+		this.overviewRoot.className = 'zenfg-inspector-view zenfg-inspector-overview-view';
+		this.overviewRoot.id = `${options.idPrefix}-view-overview`;
+		this.overviewRoot.setAttribute('role', 'tabpanel');
+		this.overviewRoot.append(this.summary);
+		this.graphRoot.className = 'zenfg-inspector-view zenfg-inspector-graph-view';
+		this.graphRoot.id = `${options.idPrefix}-view-graph`;
+		this.graphRoot.setAttribute('role', 'tabpanel');
+		this.graphRoot.append(this.graphView.toolbar, this.graphView.host);
+		this.passes = new PassesView(callbacks, options.idPrefix);
+		this.resources = new ResourcesView(callbacks, options.idPrefix);
+		this.memory = new MemoryView(callbacks, options.idPrefix);
+		this.diagnostics = new DiagnosticsView(callbacks, options.idPrefix);
+		this.inspector = new InspectorView(callbacks, (open) => this.handleInspectorOpenChange(open), options.idPrefix);
+
+		this.views.set('overview', this.overviewRoot);
+		this.views.set('graph', this.graphRoot);
+		this.views.set('passes', this.passes.root);
+		this.views.set('resources', this.resources.root);
+		this.views.set('memory', this.memory.root);
+		this.views.set('diagnostics', this.diagnostics.root);
+		for (const [tab, label] of [
+			['overview', 'Overview'],
+			['graph', 'Graph'],
+			['passes', 'Passes'],
+			['resources', 'Resources'],
+			['memory', 'Memory'],
+			['diagnostics', 'Diagnostics'],
+		] as const) {
+			const button = document.createElement('button');
+			button.type = 'button';
+			button.id = `${options.idPrefix}-tab-${tab}`;
+			button.textContent = label;
+			button.setAttribute('role', 'tab');
+			button.setAttribute('aria-controls', `${options.idPrefix}-view-${tab}`);
+			button.addEventListener('click', () => this.setActiveTab(tab));
+			this.tabButtons.set(tab, button);
+			this.tabList.appendChild(button);
+		}
+
+		this.inspectorOpenButton.type = 'button';
+		this.inspectorOpenButton.hidden = true;
+		this.inspectorOpenButton.className = 'zenfg-inspector-open-inspector';
+		setPanelButtonContent(this.inspectorOpenButton, 'inspector', 'Inspector');
+		this.inspectorOpenButton.title = 'Open selection inspector';
+		this.inspectorOpenButton.addEventListener('click', () => this.inspector.setOpen(true));
+
+		this.captureButton.type = 'button';
+		this.captureButton.className = 'zenfg-inspector-capture-action';
+		this.captureButton.addEventListener('click', actions.onCapture);
+		this.importButton.type = 'button';
+		this.importButton.textContent = 'Import';
+		this.importButton.addEventListener('click', () => this.importInput.click());
+		this.importInput.type = 'file';
+		this.importInput.accept = '.fgsnapshot.json,.json,application/json';
+		this.importInput.hidden = true;
+		this.importInput.addEventListener('change', () => {
+			const file = this.importInput.files?.[0];
+			this.importInput.value = '';
+			if (file) actions.onImport(file);
+		});
+		this.exportButton.type = 'button';
+		this.exportButton.textContent = 'Export';
+		this.exportButton.setAttribute('aria-haspopup', 'menu');
+		this.exportButton.setAttribute('aria-expanded', 'false');
+		this.exportButton.setAttribute('aria-controls', `${options.idPrefix}-export-menu`);
+		this.exportButton.addEventListener('click', () => {
+			this.setExportMenuOpen(this.exportMenu.hidden !== false);
+		});
+		this.exportMenu.className = 'zenfg-inspector-export-menu';
+		this.exportMenu.id = `${options.idPrefix}-export-menu`;
+		this.exportMenu.setAttribute('role', 'menu');
+		this.exportMenu.hidden = true;
+		this.downloadButton.type = 'button';
+		this.downloadButton.textContent = 'Download JSON';
+		this.downloadButton.setAttribute('role', 'menuitem');
+		this.downloadButton.addEventListener('click', () => {
+			this.setExportMenuOpen(false);
+			actions.onDownload();
+		});
+		this.copyButton.type = 'button';
+		this.copyButton.className = 'zenfg-inspector-copy-action';
+		this.copyButton.textContent = 'Copy JSON';
+		this.copyButton.setAttribute('role', 'menuitem');
+		this.copyButton.addEventListener('click', () => {
+			this.setExportMenuOpen(false);
+			actions.onCopyJson();
+		});
+		this.exportMenu.append(this.downloadButton, this.copyButton);
+
+		this.commandActions.append(
+			this.commandStatus,
+			this.inspectorOpenButton,
+			this.captureButton,
+			this.importButton,
+			this.exportButton,
+			this.importInput,
+		);
+		if (options.branding === false) this.commandBar.append(this.tabList, this.commandActions, this.exportMenu);
+		else this.commandBar.append(this.brand, this.tabList, this.commandActions, this.exportMenu);
+		this.root.addEventListener('click', (event) => {
+			const target = event.target;
+			if (!target || typeof (target as Node).nodeType !== 'number' || this.exportMenu.hidden) return;
+			const targetNode = target as Node;
+			if (!this.exportButton.contains(targetNode) && !this.exportMenu.contains(targetNode)) this.setExportMenuOpen(false);
+		});
+		this.root.addEventListener('keydown', (event) => {
+			if (event.key !== 'Escape' || this.exportMenu.hidden) return;
+			this.setExportMenuOpen(false);
+			this.exportButton.focus();
+		});
+		this.main.append(this.emptyHost, ...this.views.values());
+		this.workspace.append(this.main, this.inspector.root);
+		this.root.append(this.commandBar, this.workspace);
+		this.showEmptyState('empty', 'Drop a ZenFG Snapshot here or choose Import.', 'Files are processed locally in your browser.');
+		this.setSnapshotActionState({
+			providerAvailable: false,
+			hasCapture: false,
+			capturing: false,
+			importing: false,
+			copying: false,
+			copied: false,
+		});
+	}
+
+	setSnapshot(snapshot: FrameGraphDebugViewModel, selected: Selection | undefined): void {
+		this.hasSnapshot = true;
+		this.snapshot = snapshot;
+		this.selected = selected;
+		this.hovered = undefined;
+		this.renderSummary(snapshot);
+		this.passes.setSnapshot(snapshot);
+		this.resources.setSnapshot(snapshot);
+		this.memory.setSnapshot(snapshot);
+		this.diagnostics.setSnapshot(snapshot);
+		this.inspector.setSnapshot(snapshot);
+		this.passes.setSelection(selected);
+		this.resources.setSelection(selected);
+		this.memory.setSelection(selected);
+		this.diagnostics.setSelection(selected);
+		this.inspector.setSelection(selected, false);
+		this.emptyHost.hidden = true;
+		this.updateActiveTab();
+		this.updateWorkspaceState();
+		if (this.activeTab === 'graph') this.renderGraph();
+	}
+
+	showEmptyState(kind: FrameGraphDebugEmptyStateKind, message: string, detail?: string): void {
+		this.hasSnapshot = false;
+		this.snapshot = undefined;
+		this.selected = undefined;
+		this.hovered = undefined;
+		this.emptyHost.hidden = false;
+		this.emptyHost.dataset.state = kind;
+		const icon = createPanelIcon(kind === 'capturing' ? 'spinner' : kind === 'error' ? 'error' : kind === 'waiting' ? 'waiting' : 'empty');
+		const label = document.createElement('span');
+		label.className = 'zenfg-inspector-empty-message';
+		label.textContent = message;
+		const detailLabel = document.createElement('span');
+		detailLabel.className = 'zenfg-inspector-empty-detail';
+		detailLabel.textContent = detail ?? '';
+		this.emptyHost.replaceChildren(icon, label, ...(detail ? [detailLabel] : []));
+		this.updateActiveTab();
+		this.updateWorkspaceState();
+	}
+
+	setSnapshotActionState(state: FrameGraphDebugSnapshotActionState): void {
+		const captureLabel = state.capturing ? 'Capturing…' : 'Capture';
+		setPanelButtonContent(this.captureButton, state.capturing ? 'spinner' : 'capture', captureLabel);
+		this.captureButton.disabled = state.capturing || !state.providerAvailable;
+		this.captureButton.hidden = !state.providerAvailable;
+		this.captureButton.classList.toggle('active', state.capturing);
+		this.captureButton.setAttribute('aria-busy', state.capturing ? 'true' : 'false');
+		this.captureButton.dataset.tone = state.capturing ? 'pending' : 'accent';
+		this.captureButton.title = !state.providerAvailable
+			? 'Waiting for a FrameGraph capture source.'
+			: state.capturing
+				? 'Capturing the next rendered frame.'
+				: 'Capture and display the next rendered frame.';
+
+		this.importButton.textContent = state.importing ? 'Importing…' : 'Import';
+		this.importButton.disabled = state.importing;
+		this.importButton.setAttribute('aria-busy', state.importing ? 'true' : 'false');
+		this.exportButton.disabled = !state.hasCapture;
+		this.downloadButton.disabled = !state.hasCapture;
+		if (!state.hasCapture) this.setExportMenuOpen(false);
+
+		const copyLabel = state.copying ? 'Copying…' : state.copied ? 'Copied' : 'Copy JSON';
+		const copyIcon = state.copying ? 'spinner' : state.copied ? 'check' : 'copy';
+		setPanelButtonContent(this.copyButton, copyIcon, copyLabel);
+		this.copyButton.disabled = !state.hasCapture || state.copying;
+		this.copyButton.classList.toggle('active', state.copying || state.copied);
+		this.copyButton.setAttribute('aria-busy', state.copying ? 'true' : 'false');
+		this.copyButton.dataset.tone = state.copied ? 'success' : state.copying ? 'pending' : 'neutral';
+		this.copyButton.title = state.hasCapture
+			? 'Copy the current canonical FrameGraph Snapshot JSON.'
+			: 'Load a snapshot before exporting.';
+
+		this.commandStatus.textContent = state.message ?? '';
+		this.commandStatus.hidden = !state.message;
+		this.commandStatus.dataset.tone = state.message ? state.messageTone ?? 'error' : 'neutral';
+		if (state.message) this.commandStatus.title = state.message;
+		else this.commandStatus.removeAttribute('title');
+	}
+
+	setSelection(selected: Selection | undefined): void {
+		this.selected = selected;
+		this.passes.setSelection(selected);
+		this.resources.setSelection(selected);
+		this.memory.setSelection(selected);
+		this.diagnostics.setSelection(selected);
+		this.inspector.setSelection(selected);
+		if (this.activeTab === 'graph') this.renderGraph();
+	}
+
+	setHovered(hovered: Selection | undefined): void {
+		this.hovered = hovered;
+		if (this.activeTab === 'graph') this.renderGraph();
+	}
+
+	setActiveTab(tab: WorkbenchTab): void {
+		if (this.activeTab === tab) return;
+		this.activeTab = tab;
+		this.updateActiveTab();
+		if (tab === 'graph') {
+			window.requestAnimationFrame(() => {
+				resizeGraph(this.graphView);
+				this.renderGraph();
+			});
+		}
+	}
+
+	refreshGraphStructure(): void {
+		if (!this.snapshot) return;
+		this.passes.setSnapshot(this.snapshot);
+		if (this.activeTab === 'graph') this.renderGraph();
+	}
+
+	resizeGraph(fit = false): void {
+		if (fit) this.graphView.fitOnNextRender = true;
+		window.requestAnimationFrame(() => {
+			resizeGraph(this.graphView);
+			if (this.activeTab === 'graph') this.renderGraph();
+		});
+	}
+
+	private updateActiveTab(): void {
+		for (const [tab, button] of this.tabButtons) {
+			const active = tab === this.activeTab;
+			button.disabled = !this.hasSnapshot;
+			button.classList.toggle('active', active);
+			button.setAttribute('aria-selected', active ? 'true' : 'false');
+			const view = this.views.get(tab)!;
+			view.hidden = !this.hasSnapshot || !active;
+			view.setAttribute('aria-labelledby', button.id);
+		}
+	}
+
+	private renderGraph(): void {
+		if (!this.snapshot) return;
+		renderGraphView(
+			this.graphView,
+			this.snapshot,
+			this.selected,
+			this.hovered,
+			this.callbacks.onSelect,
+			this.callbacks.onHover,
+			this.callbacks.onGroupToggle,
+		);
+	}
+
+	private renderSummary(snapshot: FrameGraphDebugViewModel): void {
+		const frameGraphSegments = snapshot.executionSegments.filter((segment) => segment.kind === 'frame-graph').length;
+		const opaqueIntervals = snapshot.executionSegments.length - frameGraphSegments;
+		const metrics = snapshot.metrics;
+		const coverage = metrics.timingEligibleNodeCount === 0
+			? 'No eligible passes'
+			: `${metrics.timedNodeCount}/${metrics.timingEligibleNodeCount} timed`;
+		const slowest = metrics.slowestNode
+			? `${labelNode(metrics.slowestNode)} · ${(metrics.slowestNode.gpuDurationMicros! / 1000).toFixed(3)} ms`
+			: 'Unknown';
+		const protocol = snapshot.protocol;
+		const runtime = protocol.producer.runtime;
+		const producer = [
+			protocol.producer.name,
+			protocol.producer.version,
+			protocol.producer.language,
+		].filter(Boolean).join(' · ');
+		const runtimeLabel = runtime
+			? [runtime.implementation, runtime.graphicsApi, runtime.backend].filter(Boolean).join(' · ') || 'Unknown'
+			: 'Unknown';
+		const poolRetained = snapshot.resourcePool.status === 'available'
+			? `${snapshot.resourcePool.estimatedRetainedBytes === undefined ? 'Unknown' : formatBytes(snapshot.resourcePool.estimatedRetainedBytes)} · ${snapshot.resourcePool.retainedCount} allocations`
+			: 'Unavailable';
+		this.summary.replaceChildren(
+			this.createSummaryGroup('Capture', [
+				['Source', snapshot.source.label],
+				['Schema', `${protocol.format} v${protocol.version.major}.${protocol.version.minor}`],
+				['Producer', producer],
+				['Runtime', runtimeLabel],
+				['Frame', String(snapshot.frameIndex)],
+				...(snapshot.source.migratedFromLegacy ? [['Migration', 'Legacy V0 → V1'] as const] : []),
+				['Timing', snapshot.profiling.status === 'available' ? 'Available' : snapshot.profiling.reason],
+			]),
+			this.createSummaryGroup('GPU', [
+				['GPU Span', snapshot.profiling.status === 'available' ? `${formatGpuFrameDuration(snapshot)} ms` : 'Unknown'],
+				['Coverage', coverage],
+				['Slowest', slowest],
+			]),
+			this.createSummaryGroup('Work', [
+				['Nodes', `${snapshot.nodes.length} retained · ${snapshot.culledNodes.length} culled`],
+				['Segments', `${frameGraphSegments} FG · ${opaqueIntervals} opaque`],
+				['Groups', snapshot.availability.groups ? String(snapshot.debugGroups.length) : 'Unknown'],
+				['Recording order', snapshot.availability.recordingOrder ? 'Available' : 'Unknown'],
+			]),
+			this.createSummaryGroup('Resources', [
+				['Logical / physical', `${snapshot.resources.length} / ${snapshot.physicalAllocations.length}`],
+				['Texture views', snapshot.availability.textureViews ? String(snapshot.textureViewById.size) : 'Unknown'],
+				['Access regions', snapshot.availability.accessRegions ? 'Available' : 'Unknown'],
+				['Transient estimate', formatEstimatedBytes(metrics.transientEstimatedByteSize)],
+			]),
+			this.createSummaryGroup('Pool', [
+				['Retained', poolRetained],
+				['Reuse', formatPoolHitRate(snapshot)],
+			]),
+		);
+	}
+
+	private createSummaryGroup(title: string, rows: readonly (readonly [string, string])[]): HTMLElement {
+		const group = document.createElement('section');
+		const heading = document.createElement('h2');
+		heading.textContent = title;
+		group.appendChild(heading);
+		for (const [label, value] of rows) {
+			const row = document.createElement('div');
+			const term = document.createElement('span');
+			term.textContent = label;
+			const description = document.createElement('strong');
+			description.textContent = value;
+			description.title = value;
+			row.append(term, description);
+			group.appendChild(row);
+		}
+		return group;
+	}
+
+	private setExportMenuOpen(open: boolean): void {
+		this.exportMenu.hidden = !open;
+		this.exportButton.setAttribute('aria-expanded', open ? 'true' : 'false');
+	}
+
+	private handleInspectorOpenChange(_open: boolean): void {
+		this.updateWorkspaceState();
+		if (this.activeTab === 'graph') this.resizeGraph(false);
+	}
+
+	private updateWorkspaceState(): void {
+		const inspectorOpen = this.hasSnapshot && this.inspector.isOpen;
+		this.workspace.classList.toggle('has-capture', this.hasSnapshot);
+		this.workspace.classList.toggle('inspector-open', inspectorOpen);
+		this.inspector.root.classList.toggle('unavailable', !this.hasSnapshot);
+		this.inspectorOpenButton.hidden = !this.hasSnapshot || inspectorOpen;
+	}
+}