@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/src/panelResourcesView.ts

@@ -1,69 +1,60 @@
-import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import type { FrameGraphDebugResource, FrameGraphDebugViewModel } from './debugCaptureModel.ts';
 import { createCell, labelResource } from './panelDomHelpers.ts';
 import type { Selection } from './panelTypes.ts';
 import {
-	createEmptyTableRow,
-	createKindCell,
-	createFilterSelect,
-	createSearchInput,
-	createSelectionCell,
-	createTableScroller,
-	createViewToolbar,
-	formatEstimatedBytes,
-	formatResourceDescriptor,
-	groupPath,
-	registerSelectable,
-	resourceAccessCounts,
-	type WorkbenchCallbacks,
-	updateSelectedRows,
+	createEmptyTableRow, createKindCell, createFilterSelect, createSearchInput, createSelectionCell,
+	createTableScroller, createViewToolbar, formatEstimatedBytes, groupPath, registerSelectable,
+	resourceAccessCounts, selectionKey, type WorkbenchCallbacks, updateSelectedRows,
 } from './panelWorkbenchHelpers.ts';
 
+type ResourceSort = 'name' | 'size' | 'lifetime';
+
 export class ResourcesView {
 	readonly root = document.createElement('section');
 	private readonly table = createTableScroller([
-		{ label: 'Resource / Group' },
+		{ label: 'Name' },
 		{ label: 'Type / Origin', column: 'kind' },
-		{ label: 'Descriptor', column: 'code' },
 		{ label: 'Estimated', column: 'numeric' },
 		{ label: 'Lifetime', column: 'code' },
-		{ label: 'Physical', column: 'numeric' },
 		{ label: 'R / W', column: 'numeric' },
 	]);
 	private readonly rows = new Map<string, HTMLElement[]>();
+	private readonly count = document.createElement('span');
+	private readonly searchInput: HTMLInputElement;
+	private readonly kindSelect: HTMLSelectElement;
+	private readonly originSelect: HTMLSelectElement;
 	private snapshot: FrameGraphDebugViewModel | undefined;
 	private selected: Selection | undefined;
 	private search = '';
 	private kind = 'all';
 	private origin = 'all';
+	private sort: ResourceSort = 'name';
 
 	constructor(private readonly callbacks: WorkbenchCallbacks, idPrefix: string) {
 		this.root.className = 'zenfg-inspector-view zenfg-inspector-resources-view';
 		this.root.id = `${idPrefix}-view-resources`;
 		this.root.setAttribute('role', 'tabpanel');
-		const toolbar = createViewToolbar('Resource filters');
-		toolbar.append(
-			createSearchInput('Search resource or group', this.search, (value) => {
-				this.search = value.trim().toLocaleLowerCase();
-				this.renderRows();
-			}),
-			createFilterSelect('Resource kind', this.kind, [
-				['all', 'All kinds'],
-				['texture', 'Texture'],
-				['buffer', 'Buffer'],
-			], (value) => {
-				this.kind = value;
-				this.renderRows();
-			}),
-			createFilterSelect('Resource origin', this.origin, [
-				['all', 'All origins'],
-				['transient', 'Transient'],
-				['imported', 'Imported'],
-				['swapchain', 'Swapchain'],
-			], (value) => {
-				this.origin = value;
-				this.renderRows();
-			}),
-		);
+		const toolbar = createViewToolbar('Resource filters and sorting');
+		this.searchInput = createSearchInput('Search resource, ID or group', this.search, (value) => {
+			this.search = value.trim().toLocaleLowerCase();
+			this.renderRows();
+		});
+		this.kindSelect = createFilterSelect('Resource kind', this.kind, [
+			['all', 'All kinds'], ['texture', 'Texture'], ['buffer', 'Buffer'],
+		], (value) => { this.kind = value; this.renderRows(); });
+		this.originSelect = createFilterSelect('Resource origin', this.origin, [
+			['all', 'All origins'], ['transient', 'Transient'], ['imported', 'Imported'], ['surface', 'Surface'],
+		], (value) => { this.origin = value; this.renderRows(); });
+		const sort = createFilterSelect('Sort resources', this.sort, [
+			['name', 'Name'], ['size', 'Size: largest first'], ['lifetime', 'Lifetime: first use'],
+		], (value) => { this.sort = value as ResourceSort; this.renderRows(); });
+		const clear = document.createElement('button');
+		clear.type = 'button';
+		clear.textContent = 'Clear filters';
+		clear.addEventListener('click', () => { this.clearFilters(); this.renderRows(); });
+		this.count.className = 'zenfg-inspector-result-count';
+		this.count.setAttribute('role', 'status');
+		toolbar.append(this.searchInput, this.kindSelect, this.originSelect, sort, clear, this.count);
 		this.root.append(toolbar, this.table.scroller);
 	}
 
@@ -77,6 +68,18 @@ export class ResourcesView {
 		updateSelectedRows(this.rows, selected);
 	}
 
+	reveal(selection: Selection): void {
+		if (selection.kind !== 'resource') return;
+		this.clearFilters();
+		this.renderRows();
+		this.rows.get(selectionKey(selection))?.[0]?.scrollIntoView?.({ block: 'nearest' });
+	}
+
+	private clearFilters(): void {
+		this.search = ''; this.kind = 'all'; this.origin = 'all';
+		this.searchInput.value = ''; this.kindSelect.value = 'all'; this.originSelect.value = 'all';
+	}
+
 	private renderRows(): void {
 		const snapshot = this.snapshot;
 		if (!snapshot) return;
@@ -85,31 +88,41 @@ export class ResourcesView {
 		const resources = snapshot.resources.filter((resource) => {
 			if (this.kind !== 'all' && resource.kind !== this.kind) return false;
 			if (this.origin !== 'all' && resource.origin !== this.origin) return false;
-			if (this.search.length === 0) return true;
-			return `${labelResource(resource)} ${groupPath(snapshot, resource.debugGroupId)}`
+			return !this.search || `${labelResource(resource)} ${resource.id} ${groupPath(snapshot, resource.debugGroupId)}`
 				.toLocaleLowerCase().includes(this.search);
-		});
+		}).sort((a, b) => this.compareResources(a, b));
+		this.count.textContent = `${resources.length} / ${snapshot.resources.length} resources`;
 		for (const resource of resources) {
 			const selection: Selection = { kind: 'resource', id: resource.id };
 			const row = document.createElement('tr');
 			registerSelectable(this.rows, row, selection, this.callbacks);
 			const [reads, writes] = resourceAccessCounts(snapshot, resource.id);
 			const resourceCell = createSelectionCell(labelResource(resource), selection, this.callbacks);
-			const group = document.createElement('small');
-			group.textContent = groupPath(snapshot, resource.debugGroupId);
-			resourceCell.appendChild(group);
-			row.append(
-				resourceCell,
+			resourceCell.title = resource.id;
+			if (resource.debugGroupId !== undefined) {
+				const group = document.createElement('small');
+				group.textContent = groupPath(snapshot, resource.debugGroupId);
+				resourceCell.appendChild(group);
+			}
+			row.append(resourceCell,
 				createKindCell(resource.kind, `${resource.kind} · ${resource.origin}`),
-				createCell(formatResourceDescriptor(resource), { column: 'code' }),
 				createCell(formatEstimatedBytes(resource.estimatedByteSize), { column: 'numeric' }),
-				createCell(resource.lifetime ? `${resource.lifetime.firstUse}–${resource.lifetime.lastUse}` : '-', { column: 'code' }),
-				createCell(resource.physicalResourceId === undefined ? '-' : `#${resource.physicalResourceId}`, { column: 'numeric' }),
-				createCell(`${reads} / ${writes}`, { column: 'numeric' }),
-			);
+				createCell(resource.lifetime ? `${resource.lifetime.firstUse}–${resource.lifetime.lastUse}` : 'Unknown', { column: 'code' }),
+				createCell(`${reads} / ${writes}`, { column: 'numeric' }));
 			this.table.body.appendChild(row);
 		}
-		if (resources.length === 0) this.table.body.appendChild(createEmptyTableRow(7, 'No resources match the current filters.'));
+		if (resources.length === 0) this.table.body.appendChild(createEmptyTableRow(5, 'No resources match the current filters.'));
 		updateSelectedRows(this.rows, this.selected);
 	}
+
+	private compareResources(a: FrameGraphDebugResource, b: FrameGraphDebugResource): number {
+		const byName = () => labelResource(a).localeCompare(labelResource(b)) || a.id.localeCompare(b.id);
+		const knownFirst = (left: number | undefined, right: number | undefined, descending: boolean): number => (
+			left === undefined ? right === undefined ? 0 : 1
+				: right === undefined ? -1 : descending ? right - left : left - right
+		);
+		if (this.sort === 'size') return knownFirst(a.estimatedByteSize, b.estimatedByteSize, true) || byName();
+		if (this.sort === 'lifetime') return knownFirst(a.lifetime?.firstUse, b.lifetime?.firstUse, false) || byName();
+		return byName();
+	}
 }

package/src/panelSelection.ts

@@ -1,4 +1,4 @@
-import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import { rootKey, type FrameGraphDebugViewModel } from './debugCaptureModel.ts';
 import type { Selection } from './panelTypes.ts';
 
 export function resolveSelectedDetail(
@@ -28,7 +28,7 @@ export function resolveSelectedDetail(
 		case 'root':
 			return snapshot.roots.find((root) => root.key === selected.key);
 		case 'culled': {
-			const culled = snapshot.culledNodes[selected.index];
+			const culled = snapshot.culledById.get(selected.id);
 			return culled ? {
 				...culled,
 				node: {
@@ -56,7 +56,7 @@ export function selectionExists(snapshot: FrameGraphDebugViewModel, selected: Se
 		case 'root':
 			return snapshot.roots.filter((root) => root.key === selected.key).length === 1;
 		case 'culled':
-			return isValidIndex(selected.index, snapshot.culledNodes.length);
+			return snapshot.culledById.has(selected.id);
 		case 'allocation':
 			return snapshot.allocationById.has(selected.id);
 		case 'segment':
@@ -94,6 +94,38 @@ function debugGroupPath(snapshot: FrameGraphDebugViewModel, groupId: string | un
 	return snapshot.groupById.get(groupId)?.path.join(' / ') ?? `#${groupId}`;
 }
 
-function isValidIndex(index: number, length: number): boolean {
-	return Number.isInteger(index) && index >= 0 && index < length;
+/** Resolve identity again after a capture, including retained/culled transitions. */
+export function resolveNodeSelection(snapshot: FrameGraphDebugViewModel, id: string): Selection | undefined {
+	if (snapshot.nodeById.has(id)) return { kind: 'node', id };
+	if (snapshot.culledById.has(id)) return { kind: 'culled', id };
+	return undefined;
+}
+
+export type SelectedCanonicalDetail = { readonly path: string; readonly value: unknown };
+
+/** Raw shows the canonical source object, never the presentation model. */
+export function resolveSelectedCanonicalDetail(
+	snapshot: FrameGraphDebugViewModel,
+	selected: Selection | undefined,
+): SelectedCanonicalDetail | undefined {
+	if (!selected) return undefined;
+	const protocol = snapshot.protocol;
+	function at<T>(values: readonly T[], path: string, predicate: (value: T) => boolean): SelectedCanonicalDetail | undefined {
+		const index = values.findIndex(predicate);
+		return index < 0 ? undefined : { path: `${path}[${index}]`, value: values[index] };
+	}
+	switch (selected.kind) {
+		case 'node':
+		case 'culled': return at(protocol.graph.nodes, '$.graph.nodes', (node) => node.id === selected.id);
+		case 'resource': return at(protocol.graph.resources, '$.graph.resources', (resource) => resource.id === selected.id);
+		case 'group': {
+			const id = snapshot.groupByPathKey.get(selected.pathKey)?.id;
+			return at(protocol.graph.groups, '$.graph.groups', (group) => group.id === id);
+		}
+		case 'root': return at(protocol.graph.roots, '$.graph.roots', (root) => rootKey(root) === selected.key);
+		case 'allocation': return protocol.memory.allocationReport.status === 'available'
+			? at(protocol.memory.allocationReport.allocations, '$.memory.allocationReport.allocations', (allocation) => allocation.id === selected.id)
+			: undefined;
+		case 'segment': return at(protocol.graph.segments, '$.graph.segments', (segment) => segment.order === selected.index);
+	}
 }

package/src/panelTheme.ts

@@ -0,0 +1,85 @@
+import type { InspectorTheme, InspectorThemeVariables } from './theme.ts';
+import { internalThemeProperty, stormVariables } from './themeDefinitions.ts';
+import { createGraphVisualTheme, defaultThemeValue, type GraphVisualTheme } from './panelVisualTheme.ts';
+
+/** Own only declarations written by this API, restoring pre-existing inline styles on reset. */
+export class InspectorThemeController {
+    private readonly owned = new Map<string, { previous: string; priority: string; applied: string }>();
+    constructor(private readonly root: HTMLElement) {}
+
+    apply(theme: InspectorTheme | null): void {
+        const style = this.root.style;
+        for (const [key, entry] of this.owned) {
+            if (style.getPropertyValue(key) !== entry.applied || style.getPropertyPriority(key)) continue;
+            if (entry.previous) style.setProperty(key, entry.previous, entry.priority);
+            else style.removeProperty(key);
+        }
+        this.owned.clear();
+        const entries = Object.entries(theme?.variables ?? {}).filter(([key]) => Object.hasOwn(stormVariables, key));
+        if (theme?.colorScheme) entries.push(['--zfgi-color-scheme', theme.colorScheme]);
+        for (const [key, value] of entries) {
+            if (typeof value !== 'string') continue;
+            const previous = style.getPropertyValue(key);
+            const priority = style.getPropertyPriority(key);
+            style.setProperty(key, value);
+            this.owned.set(key, { previous, priority, applied: style.getPropertyValue(key) });
+        }
+    }
+
+    destroy(): void { this.owned.clear(); }
+}
+
+/** Resolve through the DOM once per refresh, including var(), color-mix(), and CSS lengths. */
+export function resolveGraphTheme(root: HTMLElement): GraphVisualTheme {
+    const document = root.ownerDocument;
+    const view = document?.defaultView;
+    if (!view || !root.isConnected) return createGraphVisualTheme();
+    const styles = view.getComputedStyle(root);
+    const probe = document.createElement('span');
+    probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;width:0;height:0;overflow:hidden;';
+    probe.setAttribute('aria-hidden', 'true');
+    root.appendChild(probe);
+    const cache = new Map<string, string>();
+    let context: CanvasRenderingContext2D | null | undefined;
+    const color = (value: string): string | undefined => {
+        probe.style.color = '';
+        probe.style.color = value;
+        if (!probe.style.color) return undefined;
+        const resolved = view.getComputedStyle(probe).color;
+        if (/^(#[\da-f]{3,8}|rgba?\([\d.,\s]+\))$/i.test(resolved)) return resolved;
+        // Normalize newer CSS color spaces into sRGB supported by Cytoscape.
+        if (context === undefined) {
+            const canvas = document.createElement('canvas'); canvas.width = canvas.height = 1;
+            context = canvas.getContext('2d', { willReadFrequently: true });
+        }
+        if (!context) return undefined;
+        context.clearRect(0, 0, 1, 1);
+        context.fillStyle = resolved;
+        context.fillRect(0, 0, 1, 1);
+        const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+        return `rgba(${r}, ${g}, ${b}, ${a! / 255})`;
+    };
+    const read = (key: keyof InspectorThemeVariables): string => {
+        const cached = cache.get(key);
+        if (cached !== undefined) return cached;
+        const value = styles.getPropertyValue(internalThemeProperty(key)).trim() || defaultThemeValue(key);
+        let result = value;
+        if (key.endsWith('font-family')) {
+            probe.style.fontFamily = value;
+            result = view.getComputedStyle(probe).fontFamily;
+        } else if (key.endsWith('size') || key.endsWith('width')) {
+            probe.style.fontSize = ''; probe.style.fontSize = value;
+            result = probe.style.fontSize ? view.getComputedStyle(probe).fontSize : defaultThemeValue(key);
+            if (!(parseFloat(result) > 0)) result = defaultThemeValue(key);
+        } else if (key.endsWith('opacity') || key.endsWith('scale')) {
+            const n = Number(value);
+            result = Number.isFinite(n) && n >= 0 && (!key.endsWith('opacity') || n <= 1) ? value : defaultThemeValue(key);
+        } else {
+            result = color(value) ?? defaultThemeValue(key);
+        }
+        cache.set(key, result);
+        return result;
+    };
+    try { return createGraphVisualTheme(read); }
+    finally { probe.remove(); }
+}

package/src/panelTypes.ts

@@ -1,3 +1,4 @@
+import type { GraphVisualTheme } from './panelVisualTheme.ts';
 import type { GraphRenderer } from './panelGraphRenderer.ts';
 import type { FrameGraphDebugEdge } from './debugCaptureModel.ts';
 
@@ -13,7 +14,7 @@ export type Selection =
     | { kind: 'group'; pathKey: string }
     | { kind: 'resource'; id: string }
     | { kind: 'root'; key: string }
-    | { kind: 'culled'; index: number }
+    | { kind: 'culled'; id: string }
     | { kind: 'allocation'; id: string }
     | { kind: 'segment'; index: number };
 
@@ -22,13 +23,18 @@ export type PassesSubview = 'list' | 'groups';
 export type InspectorTab = 'summary' | 'relations' | 'raw';
 
 export type GraphViewState = {
+    theme?: GraphVisualTheme;
+    readonly refreshTheme?: () => void;
     readonly host: HTMLElement;
     readonly toolbar: HTMLElement;
     readonly legend?: HTMLElement;
 	readonly layoutElementBudget?: number;
     groupsEnabled: boolean;
+    showResourceDeclarations?: boolean;
     readonly expandedGroupPaths: Set<string>;
     renderer?: GraphRenderer;
     fitOnNextRender: boolean;
     anchorElementIdOnNextRender?: string;
+    revealOnNextRender?: { readonly selection: Selection; readonly revision: number };
+    captureRevision?: number;
 };

package/src/panelVisualTheme.ts

@@ -1,50 +1,39 @@
-export const FRAME_GRAPH_DEBUG_VISUAL_THEME = {
-	canvas: '#0b0f14',
-	panel: '#0f151d',
-	surface: '#131b24',
-	surfaceRaised: '#18222d',
-	surfaceHover: '#1d2935',
-	border: '#263341',
-	text: '#e6edf3',
-	textSecondary: '#b4beca',
-	muted: '#8b98a5',
-	accent: '#38bdf8',
-	success: '#34d399',
-	warning: '#fbbf24',
-	danger: '#fb7185',
-	fontUi: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-	fontMono: 'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace',
-} as const;
-
-function category(stroke: string) {
-	const canvas = FRAME_GRAPH_DEBUG_VISUAL_THEME.canvas;
-	const fill = '#' + [1, 3, 5].map((offset) => Math.round(
-		parseInt(stroke.slice(offset, offset + 2), 16) * 0.18
-		+ parseInt(canvas.slice(offset, offset + 2), 16) * 0.82,
-	).toString(16).padStart(2, '0')).join('');
-	return { stroke, fill };
+import { stormVariables } from './themeDefinitions.ts';
+import type { InspectorThemeVariables } from './theme.ts';
+type Variable = keyof InspectorThemeVariables;
+export function mixHex(front: string, back: string, amount: number): string {
+    return '#' + [1, 3, 5].map(offset => Math.round(parseInt(front.slice(offset, offset + 2), 16) * amount + parseInt(back.slice(offset, offset + 2), 16) * (1 - amount)).toString(16).padStart(2, '0')).join('');
+}
+export function defaultThemeValue(key: Variable, variables: InspectorThemeVariables = stormVariables): string {
+    let value: string = variables[key];
+    value = value.replace(/var\((--zfgi-[\w-]+), ([^()]+)\)/g, (_match, name: Variable) => defaultThemeValue(name, variables));
+    const mix = /^color-mix\(in srgb, (#[\da-f]+) ([\d.]+)%, (#[\da-f]+)\)$/i.exec(value);
+    return mix ? mixHex(mix[1]!, mix[3]!, Number(mix[2]) / 100) : value;
 }
-
-export const GRAPH_VISUAL_THEME = {
-	canvas: FRAME_GRAPH_DEBUG_VISUAL_THEME.canvas,
-	surface: FRAME_GRAPH_DEBUG_VISUAL_THEME.surface,
-	surfaceRaised: FRAME_GRAPH_DEBUG_VISUAL_THEME.surfaceRaised,
-	text: FRAME_GRAPH_DEBUG_VISUAL_THEME.text,
-	muted: FRAME_GRAPH_DEBUG_VISUAL_THEME.muted,
-	render: category('#57C785'),
-	compute: category('#9AA5FF'),
-	copy: category('#F2CD60'),
-	clear: category('#C4CF89'),
-	command: category('#CF91E8'),
-	external: category('#F29A67'),
-	declaration: category('#B9AB94'),
-	output: category('#EC91AE'),
-	texture: { stroke: '#f472b6', fill: '#3c1f32' },
-	buffer: { stroke: '#2dd4bf', fill: '#123632' },
-	group: { stroke: '#64748b', fill: '#141c29', alternateFill: '#172033' },
-	dependency: { value: '#94a3b8', ordering: '#8593a6' },
-	access: { read: '#2dd4bf', write: '#f59e0b' },
-	selected: FRAME_GRAPH_DEBUG_VISUAL_THEME.accent,
-	hover: '#cbd5e1',
-	culled: { stroke: '#64748b', fill: '#171d24' },
-} as const;
+export function createGraphVisualTheme(read: (key: Variable) => string = defaultThemeValue) {
+    const category = (kind: 'render' | 'compute' | 'copy' | 'clear' | 'command' | 'external' | 'declaration' | 'output' | 'texture' | 'buffer') => ({
+        stroke: read(('--zfgi-graph-' + kind + '-stroke') as Variable), fill: read(('--zfgi-graph-' + kind + '-fill') as Variable),
+    });
+    const number = (key: Variable) => parseFloat(read(key));
+    return {
+        canvas: read('--zfgi-canvas'), surface: read('--zfgi-surface'), surfaceRaised: read('--zfgi-surface-raised'),
+        text: read('--zfgi-graph-text'), muted: read('--zfgi-graph-muted'),
+        render: category('render'), compute: category('compute'), copy: category('copy'), clear: category('clear'),
+        command: category('command'), external: category('external'), declaration: category('declaration'), output: category('output'), texture: category('texture'), buffer: category('buffer'),
+        group: { stroke: read('--zfgi-graph-group-stroke'), fill: read('--zfgi-graph-group-fill'), alternateFill: read('--zfgi-graph-group-alternate-fill') },
+        dependency: { value: read('--zfgi-graph-value'), ordering: read('--zfgi-graph-ordering') },
+        access: { read: read('--zfgi-graph-read'), write: read('--zfgi-graph-write') },
+        selected: read('--zfgi-graph-selected'), hover: read('--zfgi-graph-hover'),
+        activeBackground: { color: read('--zfgi-graph-active-bg'), opacity: number('--zfgi-graph-active-bg-opacity'), size: number('--zfgi-graph-active-bg-size') },
+        culled: { stroke: read('--zfgi-graph-culled-stroke'), fill: read('--zfgi-graph-culled-fill') },
+        fontFamily: read('--zfgi-graph-font-family'), fontSize: number('--zfgi-graph-font-size'),
+        nodeBorderWidth: number('--zfgi-graph-node-border-width'), groupBorderWidth: number('--zfgi-graph-group-border-width'),
+        edgeWidth: number('--zfgi-graph-edge-width'), edgeOpacity: number('--zfgi-graph-edge-opacity'), orderingOpacity: number('--zfgi-graph-ordering-opacity'), groupOpacity: number('--zfgi-graph-group-opacity'),
+        arrowScale: number('--zfgi-graph-arrow-scale'), hoverWidth: number('--zfgi-graph-hover-width'), selectedWidth: number('--zfgi-graph-selected-width'),
+    };
+}
+export type GraphVisualTheme = ReturnType<typeof createGraphVisualTheme>;
+export const GRAPH_VISUAL_THEME = createGraphVisualTheme();
+export const FRAME_GRAPH_DEBUG_VISUAL_THEME = {
+    canvas: defaultThemeValue('--zfgi-canvas'), panel: defaultThemeValue('--zfgi-background'), surface: defaultThemeValue('--zfgi-surface'), surfaceRaised: defaultThemeValue('--zfgi-surface-raised'), surfaceHover: defaultThemeValue('--zfgi-surface-hover'), text: defaultThemeValue('--zfgi-text'), textSecondary: defaultThemeValue('--zfgi-text-secondary'), muted: defaultThemeValue('--zfgi-muted'),
+};

package/src/panelWorkbenchHelpers.ts

@@ -3,13 +3,15 @@ import type {
 	FrameGraphDebugViewModel,
 } from './debugCaptureModel.ts';
 import { createCell, formatBytes, labelResource } from './panelDomHelpers.ts';
-import type { Selection } from './panelTypes.ts';
+import type { Selection, WorkbenchTab } 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;
+	readonly onReveal?: (selection: Selection, tab: WorkbenchTab) => void;
+	readonly onNavigate?: (tab: WorkbenchTab, filter?: 'culled') => void;
 };
 export type WorkbenchTableColumn = {
 	readonly label: string;
@@ -23,7 +25,7 @@ export function selectionKey(selection: Selection): string {
 		case 'group': return `group:${selection.pathKey}`;
 		case 'resource': return `resource:${selection.id}`;
 		case 'root': return `root:${selection.key}`;
-		case 'culled': return `culled:${selection.index}`;
+		case 'culled': return `culled:${selection.id}`;
 		case 'allocation': return `allocation:${selection.id}`;
 		case 'segment': return `segment:${selection.index}`;
 	}
@@ -214,3 +216,59 @@ export function resourceLabel(snapshot: FrameGraphDebugViewModel, resourceId: st
 	const resource = snapshot.resourceById.get(resourceId);
 	return resource ? labelResource(resource) : `resource-${resourceId}`;
 }
+
+/** All tablists use a single tab stop and automatic keyboard activation. */
+export function enableTabKeyboard(tabList: HTMLElement): void {
+	const buttons = () => Array.from(tabList.querySelectorAll<HTMLButtonElement>('[role="tab"]'));
+	const sync = () => {
+		for (const button of buttons()) button.tabIndex = button.getAttribute('aria-selected') === 'true' && !button.disabled ? 0 : -1;
+	};
+	tabList.addEventListener('click', sync);
+	tabList.addEventListener('keydown', (event) => {
+		if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+		const available = buttons().filter((button) => !button.disabled && !button.hidden);
+		if (!available.length) return;
+		const index = Math.max(0, available.indexOf(document.activeElement as HTMLButtonElement));
+		const next = event.key === 'Home' ? 0 : event.key === 'End' ? available.length - 1
+			: (index + (event.key === 'ArrowRight' ? 1 : -1) + available.length) % available.length;
+		event.preventDefault();
+		event.stopPropagation();
+		available[next]!.click();
+		available[next]!.focus();
+		sync();
+	});
+	sync();
+}
+
+export function formatTimingCoverage(timed: number, eligible: number): string {
+	if (eligible === 0) return 'Not applicable · no eligible passes';
+	if (timed === 0) return `Not collected · 0/${eligible}`;
+	return `${timed === eligible ? 'Complete' : 'Partial'} · ${timed}/${eligible} timed`;
+}
+
+export function formatMeasuredGpuWork(micros: number, timed: number, eligible: number): string {
+	if (eligible === 0) return 'Not applicable';
+	if (timed === 0) return 'Not collected';
+	return `${(micros / 1000).toFixed(3)} ms · ${formatTimingCoverage(timed, eligible)}`;
+}
+
+export function formatEstimateCoverage(bytes: number | undefined, coverage: { known: number; total: number }): string {
+	return bytes === undefined ? `Unknown · ${coverage.known}/${coverage.total} sizes known` : formatBytes(bytes);
+}
+
+export async function writeClipboardText(text: string): Promise<void> {
+	if (navigator.clipboard?.writeText) return navigator.clipboard.writeText(text);
+	const input = document.createElement('textarea');
+	input.value = text;
+	input.readOnly = true;
+	input.style.cssText = 'position:fixed;left:-9999px;top:0';
+	document.body.append(input);
+	const previous = document.activeElement as HTMLElement | null;
+	input.select();
+	try {
+		if (!document.execCommand('copy')) throw new Error('Clipboard is unavailable.');
+	} finally {
+		input.remove();
+		previous?.focus();
+	}
+}

package/src/panelWorkbenchStyles.ts

@@ -0,0 +1,100 @@
+export const PANEL_WORKBENCH_CSS = `
+.zenfg-inspector [hidden] { display: none !important; }
+.zenfg-inspector { font-size: var(--fgd-font-size); }
+.zenfg-inspector-workbench { display: flex; flex-direction: column; gap: 6px; }
+.zenfg-inspector-workbench-command-bar,
+.zenfg-inspector-feedback { flex: 0 0 auto; }
+.zenfg-inspector-workspace { flex: 1 1 0; gap: 0; }
+.zenfg-inspector-main { container-name: zenfg-inspector-main; container-type: inline-size; }
+.zenfg-inspector-workspace.inspector-open { grid-template-columns: minmax(0, 1fr) 8px var(--fgd-detail-width, 300px); }
+.zenfg-inspector-workspace.inspector-open::after { display: none; }
+.zenfg-inspector-workspace:not(.detail-drawer) .zenfg-inspector-inspector {
+  position: static; width: auto; grid-column: 3; box-shadow: none;
+}
+.zenfg-inspector-workspace.detail-drawer { grid-template-columns: minmax(0, 1fr); }
+.zenfg-inspector-workspace.detail-drawer .zenfg-inspector-inspector {
+  position: absolute; z-index: 20; top: 0; right: 0; bottom: 0;
+  width: min(340px, calc(100% - 24px)); box-shadow: var(--fgd-shadow);
+}
+.zenfg-inspector-detail-divider {
+  grid-column: 2; cursor: col-resize; touch-action: none; align-self: stretch; border-radius: var(--fgd-radius-sm);
+}
+.zenfg-inspector-detail-divider:hover,
+.zenfg-inspector-detail-divider:focus-visible { background: var(--fgd-accent-soft); outline: 1px solid var(--fgd-accent); }
+.zenfg-inspector-detail-backdrop {
+  position: absolute; z-index: 10; inset: 0; border: 0; padding: 0; background: var(--fgd-backdrop); cursor: default;
+}
+.zenfg-inspector-diagnostic-badge { margin-left: 5px; padding: 1px var(--fgd-space-1); border-radius: var(--fgd-radius-sm); color: var(--fgd-warning); background: var(--fgd-surface-raised); font: var(--fgd-font-size-small)/1.2 var(--fgd-font-mono); }
+.zenfg-inspector-feedback { border: 1px solid var(--fgd-border); border-radius: var(--fgd-radius-sm); padding: 6px 10px; }
+.zenfg-inspector-feedback summary { color: var(--fgd-text-secondary); cursor: pointer; }
+.zenfg-inspector-feedback[data-tone='error'] { border-color: var(--fgd-danger); }
+.zenfg-inspector-feedback[data-tone='error'] summary { color: var(--fgd-danger); }
+.zenfg-inspector-feedback .zenfg-inspector-command-status {
+  display: block; max-width: none; max-height: 140px; margin-top: 5px; overflow: auto;
+  white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fgd-font-size-small);
+}
+.zenfg-inspector-capture-summary { gap: var(--fgd-space-3); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
+.zenfg-inspector-capture-summary section > div { font-size: var(--fgd-font-size-small); margin-top: var(--fgd-space-1); grid-template-columns: minmax(90px, auto) minmax(0, 1fr); }
+.zenfg-inspector-capture-summary strong { white-space: normal; overflow-wrap: anywhere; font-size: var(--fgd-font-size-small); }
+.zenfg-inspector-capture-summary > section { background: var(--fgd-surface); padding: 14px; }
+.zenfg-inspector-capture-summary h2 { font-size: var(--fgd-font-size-small); letter-spacing: 0; text-transform: none; }
+.zenfg-inspector-capture-summary section > button { margin-top: var(--fgd-space-3); font-size: var(--fgd-font-size); }
+.zenfg-inspector-capture-details { grid-column: 1 / -1; padding: 10px var(--fgd-space-3); border-top: 1px solid var(--fgd-border); }
+.zenfg-inspector-capture-details > summary { cursor: pointer; color: var(--fgd-text-secondary); }
+.zenfg-inspector-capture-details > section { margin-top: var(--fgd-space-3); max-width: 760px; }
+.zenfg-inspector-capture-details h2 { display: none; }
+.zenfg-inspector-view-toolbar input,
+.zenfg-inspector-view-toolbar select { height: var(--fgd-control-height); }
+.zenfg-inspector-workbench-table { min-width: 620px; font: var(--fgd-font-size-small)/1.5 var(--fgd-font-ui); }
+.zenfg-inspector-workbench-table th { font-size: var(--fgd-font-size-small); }
+.zenfg-inspector-workbench-table td { height: var(--fgd-row-height); }
+.zenfg-inspector-workbench-table [data-column='numeric'] { font-family: var(--fgd-font-mono); }
+.zenfg-inspector-relation-button { overflow: hidden; }
+.zenfg-inspector-muted { font-size: var(--fgd-font-size-small); }
+.zenfg-inspector-graph-toolbar {
+  position: absolute; z-index: 5; top: var(--fgd-space-2); left: var(--fgd-space-2); right: var(--fgd-space-2);
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; pointer-events: none;
+}
+.zenfg-inspector-graph-toolbar > * { pointer-events: auto; }
+.zenfg-inspector-graph-toolbar > .zenfg-inspector-graph-action-controls,
+.zenfg-inspector-graph-search > button { box-shadow: var(--fgd-shadow); }
+.zenfg-inspector-graph-toolbar [hidden] { display: none !important; }
+.zenfg-inspector-graph-search { min-width: 0; }
+.zenfg-inspector-graph-search-popover {
+  position: absolute; top: calc(100% + var(--fgd-space-2)); left: 0; width: min(360px, 100%);
+  padding: var(--fgd-space-2); border: 1px solid var(--fgd-border); border-radius: var(--fgd-radius-sm);
+  background: var(--fgd-surface-raised); box-shadow: var(--fgd-shadow);
+}
+.zenfg-inspector-graph-search input { width: 100%; min-width: 0; height: var(--fgd-control-height); padding: var(--fgd-space-1) var(--fgd-space-2); border: 1px solid var(--fgd-border); border-radius: var(--fgd-radius-sm); color: var(--fgd-text); background: var(--fgd-panel); font: var(--fgd-font-size) var(--fgd-font-ui); }
+.zenfg-inspector-graph-search-results {
+  max-height: min(240px, 40vh); margin-top: var(--fgd-space-1); overflow: auto;
+}
+.zenfg-inspector-graph-search-results > p { margin: 0 var(--fgd-space-1) 5px; color: var(--fgd-muted); font-size: var(--fgd-font-size-small); }
+.zenfg-inspector-graph-search-results > button { display: block; width: 100%; height: auto; min-height: var(--fgd-control-height); text-align: left; padding: 6px; margin: 2px 0; white-space: normal; overflow-wrap: anywhere; font-size: var(--fgd-font-size); }
+.zenfg-inspector-graph-viewport { position: relative; isolation: isolate; display: flex; flex: 1 1 0; min-width: 0; min-height: 0; }
+.zenfg-inspector-legend-details {
+  position: absolute; z-index: 4; right: var(--fgd-space-2); bottom: var(--fgd-space-2);
+  max-width: calc(100% - 2 * var(--fgd-space-2)); max-height: calc(100% - 2 * var(--fgd-space-2)); overflow: auto;
+  border: 1px solid var(--fgd-border); border-radius: var(--fgd-radius-sm);
+  background: var(--fgd-surface-raised); box-shadow: var(--fgd-shadow); font-size: var(--fgd-font-size-small);
+}
+.zenfg-inspector-legend-details > summary { min-height: var(--fgd-control-height); padding: var(--fgd-space-2); cursor: pointer; color: var(--fgd-text-secondary); }
+.zenfg-inspector-legend-details[open] { width: 360px; }
+.zenfg-inspector-legend-details .zenfg-inspector-graph-legend {
+  flex-direction: column; align-items: stretch; gap: var(--fgd-space-2); padding: 0 var(--fgd-space-2) var(--fgd-space-2);
+  border: 0; font-size: var(--fgd-font-size-small); line-height: 1.5; white-space: normal;
+}
+.zenfg-inspector-legend-details .zenfg-inspector-legend-group + .zenfg-inspector-legend-group {
+  border-left: 0; border-top: 1px solid var(--fgd-border-subtle); padding: var(--fgd-space-2) 0 0;
+}
+.zenfg-inspector-legend-group { flex-wrap: wrap; }
+.zenfg-inspector button:focus-visible,
+.zenfg-inspector input:focus-visible,
+.zenfg-inspector select:focus-visible,
+.zenfg-inspector summary:focus-visible { outline: 2px solid var(--fgd-accent); outline-offset: 1px; }
+@container zenfg-inspector (max-width: 560px) {
+  .zenfg-inspector-workbench-command-bar.branding-hidden { grid-template-columns: minmax(0, 1fr); }
+  .zenfg-inspector-workbench-command-bar.branding-hidden .zenfg-inspector-workbench-tabs { grid-column: 1; grid-row: 2; }
+  .zenfg-inspector-workbench-command-bar.branding-hidden .zenfg-inspector-workbench-actions { grid-column: 1; grid-row: 1; justify-content: end; }
+}
+`;