skynet-graph 1.2.0

package/lib/studio/public/components/GraphCanvas.js

@@ -0,0 +1,156 @@
+/*
+ * Copyright 2026 Nathanael Braun
+ * @author : Nathanael BRAUN <pp9ping@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import React, { useRef, useEffect } from 'react';
+import { html } from 'htm/react';
+import cytoscape from 'cytoscape';
+import fcose from 'cytoscape-fcose';
+import dagre from 'cytoscape-dagre';
+import ELK from 'elkjs';
+
+// register the cytoscape-native layout extensions once (idempotent)
+let _registered = false;
+function registerLayouts() {
+	if ( _registered ) return;
+	try { cytoscape.use(fcose); } catch ( e ) {}
+	try { cytoscape.use(dagre); } catch ( e ) {}
+	_registered = true;
+}
+
+// ELK is driven DIRECTLY (the bundled build = no web worker) rather than via the
+// cytoscape-elk wrapper, whose `new ELK()` breaks under esm.sh interop. Tuning carried
+// over from the rocinante workflow editor: layered + NETWORK_SIMPLEX, cleaner than dagre
+// for directed/DAG graphs.
+const elk = new ELK();
+const ELK_OPTS = {
+	'elk.algorithm'                            : 'layered',
+	'elk.direction'                            : 'RIGHT',
+	'elk.spacing.nodeNode'                     : '60',
+	'elk.layered.spacing.nodeNodeBetweenLayers': '120',
+	'elk.edgeRouting'                          : 'ORTHOGONAL',
+	'elk.layered.nodePlacement.strategy'       : 'NETWORK_SIMPLEX'
+};
+
+async function runElk( cy ) {
+	const children = cy.nodes().map(( n ) => ({ id: n.id(), width: Math.max(n.width() || 40, 40), height: Math.max(n.height() || 40, 40) }));
+	if ( !children.length ) return;
+	const edges = cy.edges().map(( e, i ) => ({ id: e.id() || ('e' + i), sources: [e.source().id()], targets: [e.target().id()] }));
+	const res = await elk.layout({ id: 'root', layoutOptions: ELK_OPTS, children, edges });
+	const pos = {};
+	(res.children || []).forEach(( n ) => { pos[n.id] = { x: n.x, y: n.y }; });
+	cy.nodes().forEach(( n ) => { const p = pos[n.id()]; if ( p ) n.position(p); });
+	cy.fit(undefined, 40);
+}
+
+// cytoscape-native layouts (ELK is handled separately above)
+const CY_LAYOUTS = {
+	fcose       : { name: 'fcose', animate: true, animationDuration: 400, randomize: false, padding: 40, nodeSeparation: 90, idealEdgeLength: 90 },
+	dagre       : { name: 'dagre', rankDir: 'LR', nodeSep: 30, rankSep: 70, padding: 40, animate: true, animationDuration: 400 },
+	breadthfirst: { name: 'breadthfirst', directed: true, padding: 40, animate: true, spacingFactor: 1.2 },
+	concentric  : { name: 'concentric', animate: true, padding: 40, minNodeSpacing: 40 },
+	circle      : { name: 'circle', animate: true, padding: 40 },
+	grid        : { name: 'grid', animate: true, padding: 40 }
+};
+export const LAYOUT_NAMES = ['elk', ...Object.keys(CY_LAYOUTS)];
+
+// concept self-flags on an object (keys whose value === true) = "what cast here"
+function castFlags( o ) { return Object.keys(o).filter(( k ) => k[0] !== '_' && o[k] === true); }
+
+function toElements( objects ) {
+	const nodeIds = new Set(objects.filter(( o ) => !o.Segment).map(( o ) => o._id));
+	const els = [];
+	for ( const o of objects ) {
+		const flags = castFlags(o).filter(( k ) => k !== 'Node' && k !== 'Segment');
+		if ( o.Segment && nodeIds.has(o.originNode) && nodeIds.has(o.targetNode) ) {
+			els.push({ group: 'edges', data: { id: o._id, source: o.originNode, target: o.targetNode, label: flags.join(' ') } });
+		} else {
+			els.push({ group: 'nodes', data: { id: o._id, label: o._id }, classes: o.Segment ? 'dangling' : '' });
+		}
+	}
+	return els;
+}
+
+const STYLE = [
+	{ selector: 'node', style: { 'background-color': '#6ea8fe', 'label': 'data(label)', 'color': '#cdd6e0', 'font-size': '10px', 'text-valign': 'center', 'text-halign': 'center', 'width': 34, 'height': 34, 'text-outline-color': '#0f1419', 'text-outline-width': 2 } },
+	{ selector: 'node.dangling', style: { 'background-color': '#f5a524', 'shape': 'round-rectangle' } },
+	{ selector: 'node:selected', style: { 'border-color': '#fff', 'border-width': 2 } },
+	{ selector: 'edge', style: { 'curve-style': 'bezier', 'target-arrow-shape': 'triangle', 'line-color': '#3ad29f', 'target-arrow-color': '#3ad29f', 'width': 2, 'label': 'data(label)', 'font-size': '9px', 'color': '#9fb0c0', 'text-rotation': 'autorotate', 'text-background-color': '#0f1419', 'text-background-opacity': 0.85, 'text-background-padding': 2 } },
+	{ selector: 'edge:selected', style: { 'line-color': '#fff', 'target-arrow-color': '#fff' } },
+	{ selector: '.pulse', style: { 'background-color': '#ff6b6b', 'line-color': '#ff6b6b', 'target-arrow-color': '#ff6b6b', 'width': 5 } },
+	{ selector: '.retract-flash', style: { 'background-color': '#fb7185', 'border-color': '#fb7185', 'border-width': 4, 'line-color': '#fb7185', 'target-arrow-color': '#fb7185' } }
+];
+
+export function GraphCanvas( { objects, lastApply, lastRetract, onSelect, layout = 'elk', relayout = 0 } ) {
+	const ref = useRef(null);
+	const cyRef = useRef(null);
+	const layoutRef = useRef(layout);
+	useEffect(() => { layoutRef.current = layout; }, [layout]);
+
+	function runLayout() {
+		const cy = cyRef.current;
+		if ( !cy || cy.elements().length === 0 ) return;
+		if ( layoutRef.current === 'elk' ) { runElk(cy).catch(( e ) => console.warn('elk layout failed:', e && e.message)); return; }
+		cy.layout(CY_LAYOUTS[layoutRef.current] || CY_LAYOUTS.fcose).run();
+	}
+
+	useEffect(() => {
+		registerLayouts();
+		const cy = cytoscape({ container: ref.current, style: STYLE, wheelSensitivity: 0.2 });
+		cy.on('tap', 'node, edge', ( e ) => onSelect && onSelect(e.target.id()));
+		cy.on('tap', ( e ) => { if ( e.target === cy ) onSelect && onSelect(null); });
+		cyRef.current = cy;
+		try { window.__sgCy = cy; } catch ( e ) {} // test hook (puppeteer introspection)
+		return () => cy.destroy();
+	}, []);
+
+	// reconcile elements on each state update (keep positions; re-layout on topology change)
+	useEffect(() => {
+		const cy = cyRef.current;
+		if ( !cy ) return;
+		const want = toElements(objects);
+		const wantIds = new Set(want.map(( e ) => e.data.id));
+		let topo = false;
+		cy.elements().forEach(( el ) => { if ( !wantIds.has(el.id()) ) { el.remove(); topo = true; } });
+		want.forEach(( e ) => {
+			const ex = cy.getElementById(e.data.id);
+			if ( ex.length ) ex.data(e.data);
+			else { cy.add(e); topo = true; }
+		});
+		if ( topo ) runLayout();
+	}, [objects]);
+
+	// explicit re-layout (selector change or the relayout button)
+	useEffect(() => { runLayout(); }, [layout, relayout]);
+
+	// pulse the target of the most recent concept-apply
+	useEffect(() => {
+		const cy = cyRef.current;
+		if ( !cy || !lastApply ) return;
+		const el = cy.getElementById(lastApply.targetId);
+		if ( el && el.length ) { el.addClass('pulse'); setTimeout(() => el.removeClass('pulse'), 600); }
+	}, [lastApply]);
+
+	// flash red the object a concept was just RETRACTED from (JTMS defeasance / cascade)
+	useEffect(() => {
+		const cy = cyRef.current;
+		if ( !cy || !lastRetract ) return;
+		const el = cy.getElementById(lastRetract.targetId);
+		if ( el && el.length ) { el.addClass('retract-flash'); setTimeout(() => el.removeClass('retract-flash'), 900); }
+	}, [lastRetract]);
+
+	return html`<div class="cy" ref=${ref}></div>`;
+}

package/lib/studio/public/components/Inspector.js

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2026 Nathanael Braun
+ * @author : Nathanael BRAUN <pp9ping@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import { html } from 'htm/react';
+
+function fmt( v ) {
+	if ( v === true ) return '✓';
+	if ( v && typeof v === 'object' ) return JSON.stringify(v);
+	return String(v);
+}
+
+export function Inspector( { object, applies } ) {
+	if ( !object ) {
+		return html`<aside class="inspector"><div class="empty">select a node or segment</div></aside>`;
+	}
+	const facts = Object.keys(object).filter(( k ) => k[0] !== '_');
+	const castHere = applies.filter(( a ) => a.targetId === object._id);
+	return html`
+		<aside class="inspector">
+			<h3>${object._id}${object.Segment ? ' (segment)' : ''}</h3>
+			<div class="facts">
+				${facts.map(( k ) => html`
+					<div key=${k} class="fact"><span class="k">${k}</span><span class="v">${fmt(object[k])}</span></div>`)}
+			</div>
+			<h4>cast here ${castHere.length ? '(' + castHere.length + ')' : ''}</h4>
+			${castHere.length === 0 ? html`<div class="empty">—</div>` : castHere.map(( a, i ) => html`
+				<div key=${i} class="cast">
+					<div class="cn">${a.conceptName} ✓ <span class="ms">${Math.round(a.ms || 0)}ms</span></div>
+					${(a.why || []).map(( w, j ) => html`
+						<div key=${j} class="why">${w.require} = ${fmt(w.value)}</div>`)}
+				</div>`)}
+		</aside>`;
+}

package/lib/studio/public/components/LearningPanel.js

@@ -0,0 +1,85 @@
+/*
+ * Copyright 2026 Nathanael Braun
+ * @author : Nathanael BRAUN <pp9ping@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import React, { useState } from 'react';
+import { html } from 'htm/react';
+
+// The LEARNING panel (track 4) — the session's typed lattice registry, visually: declare a vocab key
+// (authoring), PROPOSE an alias through THE admission gate (member ∈ enum ∧ confluence — a rejection shows
+// its reason), RETRACT an alias (the recoverability guarantee). Every admitted ring row shows its
+// provenance; nothing here writes the registry outside the gate.
+export function LearningPanel( { learning, onDeclare, onPropose, onRetract, verdict } ) {
+	const reg = (learning && learning.registry) || { keys: {} };
+	const rings = (learning && learning.rings) || [];
+	const keys = Object.keys(reg.keys || {});
+	const [kName, setKName] = useState('');
+	const [kEnum, setKEnum] = useState('');
+	const [pKey, setPKey] = useState('');
+	const [pMember, setPMember] = useState('');
+	const [pAlias, setPAlias] = useState('');
+	const prov = reg.ringProvenance || {};
+	const provOf = ( r ) => { const p = prov[r.key + '::' + String(r.alias).trim().toLowerCase()]; return p ? p.via : ''; };
+
+	return html`
+		<div class="learning">
+			<div class="lp-head">learning — typed lattice registry <span class="lp-ver">${reg.version || ''}</span></div>
+
+			<div class="lp-block">
+				<div class="lp-title">declare a vocab key <span class="lp-note">(authoring — enums are host-declared)</span></div>
+				<div class="lp-row">
+					<input class="lp-key" placeholder="key (e.g. unit)" value=${kName} onChange=${( e ) => setKName(e.target.value)} />
+					<input class="lp-enum" placeholder="members, comma-separated" value=${kEnum} onChange=${( e ) => setKEnum(e.target.value)} />
+					<button class="lp-declare" disabled=${!kName.trim() || !kEnum.trim()}
+						onClick=${() => { onDeclare(kName.trim(), kEnum); setKName(''); setKEnum(''); }}>declare</button>
+				</div>
+				${keys.length ? html`<div class="lp-keys">${keys.map(( k ) => html`
+					<span key=${k} class="lp-kchip"><b>${k}</b>: ${(reg.keys[k].enum || []).join(' · ')}</span>`)}</div>` : null}
+			</div>
+
+			<div class="lp-block">
+				<div class="lp-title">propose an alias <span class="lp-note">(through THE gate: member ∈ enum ∧ confluence)</span></div>
+				<div class="lp-row">
+					<select class="lp-pkey" value=${pKey} onChange=${( e ) => { setPKey(e.target.value); setPMember(''); }}>
+						<option value="" disabled>key…</option>
+						${keys.map(( k ) => html`<option key=${k} value=${k}>${k}</option>`)}
+					</select>
+					<select class="lp-pmember" value=${pMember} onChange=${( e ) => setPMember(e.target.value)}>
+						<option value="" disabled>member…</option>
+						${(pKey && reg.keys[pKey] && reg.keys[pKey].enum || []).map(( m ) => html`<option key=${m} value=${m}>${m}</option>`)}
+					</select>
+					<input class="lp-palias" placeholder="alias" value=${pAlias} onChange=${( e ) => setPAlias(e.target.value)} />
+					<button class="lp-propose" disabled=${!pKey || !pMember || !pAlias.trim()}
+						onClick=${() => { onPropose(pKey, pMember, pAlias.trim()); setPAlias(''); }}>propose</button>
+				</div>
+				${verdict ? html`<div class="lp-verdict ${verdict.ok ? 'ok' : 'ko'}">${verdict.text}</div>` : null}
+			</div>
+
+			<div class="lp-block lp-grow">
+				<div class="lp-title">admitted rings <span class="lp-note">(${rings.length} — retract = the recoverability guarantee)</span></div>
+				<div class="lp-rings">
+					${rings.length === 0 ? html`<div class="lp-empty">no admitted alias yet — declare a key, then propose</div>`
+						: rings.map(( r, i ) => html`
+							<div key=${i} class="lp-ring">
+								<span class="lp-rkey">${r.key}</span>
+								<span class="lp-ralias">${r.alias}</span> → <span class="lp-rmember">${r.member}</span>
+								${provOf(r) ? html`<span class="lp-rvia">via ${provOf(r)}</span>` : null}
+								<button class="lp-retract" title="retract this alias" onClick=${() => onRetract(r.key, r.alias)}>✕</button>
+							</div>`)}
+				</div>
+			</div>
+		</div>`;
+}

package/lib/studio/public/components/PromptConsole.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2026 Nathanael Braun
+ * @author : Nathanael BRAUN <pp9ping@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import React, { useState } from 'react';
+import { html } from 'htm/react';
+
+// bottom bar: type a prompt -> decompose & synthesize (answer-loop). The decomposition
+// builds live on the canvas; steps stream here and the synthesized answer lands at the end.
+export function PromptConsole( { onRun, progress, answer, running, error } ) {
+	const [text, setText] = useState('');
+	const hasOut = (progress && progress.length) || answer || error;
+	return html`
+		<div class="prompt">
+			${hasOut ? html`
+				<div class="pr-out">
+					${error ? html`<div class="pr-err">${error}</div>` : null}
+					${(progress || []).map(( p, i ) => html`
+						<div key=${i} class="pr-step pr-${p.kind}">
+							[${p.kind}${p.depth != null ? ' d' + p.depth : ''}] ${p.label || ''}
+							${p.atomic != null ? (p.atomic ? '→ atomic' : '→ split') : ''}
+							${p.into ? '→ ' + p.into.join(' | ') : ''}
+							${p.children != null ? '← ' + p.children + ' children' : ''}
+						</div>`)}
+					${answer ? html`<div class="pr-answer"><b>answer</b><div>${answer}</div></div>` : null}
+				</div>` : null}
+			<form class="pr-bar" onSubmit=${( e ) => { e.preventDefault(); if ( text.trim() ) onRun(text.trim()); }}>
+				<input placeholder="prompt → decompose & synthesize (needs LLM_BASE)" value=${text}
+					onInput=${( e ) => setText(e.target.value)} disabled=${running} />
+				<button type="submit" disabled=${running || !text.trim()}>${running ? 'running…' : 'run'}</button>
+			</form>
+		</div>`;
+}

package/lib/studio/public/components/ProviderTrace.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2026 Nathanael Braun
+ * @author : Nathanael BRAUN <pp9ping@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import { html } from 'htm/react';
+
+// Apply-correlated provider / log records (graph.logger.tail) — joins an apply's logs by applyId.
+export function ProviderTrace( { records, onRefresh } ) {
+	const recs = records || [];
+	return html`
+		<div class="ptrace">
+			<div class="pt-head">provider trace <button class="pt-refresh" onClick=${onRefresh}>↻</button></div>
+			<div class="pt-rows">
+				${recs.length === 0 ? html`<div class="pt-empty">no records (raise the log level / run a provider)</div>`
+					: recs.slice(-60).map(( r, i ) => html`
+						<div key=${i} class="pt-row pt-${r.level || 'log'}">
+							<span class="pt-lvl">${r.level || 'log'}</span>
+							${r.concept ? html`<span class="pt-concept">${r.concept}</span>` : null}
+							${r.target ? html`<span class="pt-target">→${r.target}</span>` : null}
+							<span class="pt-msg">${r.message || r.msg || ''}</span>
+							${r.applyId ? html`<span class="pt-aid">#${String(r.applyId).slice(-4)}</span>` : null}
+						</div>`)}
+			</div>
+		</div>`;
+}

package/lib/studio/public/components/SessionSplit.js

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2026 Nathanael Braun
+ * @author : Nathanael BRAUN <pp9ping@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import { html } from 'htm/react';
+import { GraphCanvas } from '/components/GraphCanvas.js';
+
+// Side-by-side parent ↔ fork sub-graphs (track 5 / G3). Shows both graphs at once + the
+// merge-projection PREVIEW: what the projection crosses the frontier, and any frontier-leak.
+export function SessionSplit( { open, parentId, forkId, parentObjects, forkObjects, preview, onClose, onMerge } ) {
+	if ( !open ) return null;
+	const warns = (preview && preview.warnings) || [];
+	const leaks = warns.filter(( w ) => w.kind === 'frontier-leak');
+	return html`
+		<div class="split-modal" onClick=${onClose}>
+			<div class="split-box" onClick=${( e ) => e.stopPropagation()}>
+				<div class="split-head">
+					<span>sub-graphs: <b>${parentId}</b> ↔ <b>${forkId}</b></span>
+					<button onClick=${onClose}>close</button>
+				</div>
+				<div class="split-canvases">
+					<div class="split-pane"><div class="split-label">${parentId} (parent)</div>
+						<${GraphCanvas} objects=${parentObjects || []} layout="elk" /></div>
+					<div class="split-pane"><div class="split-label">${forkId} (fork)</div>
+						<${GraphCanvas} objects=${forkObjects || []} layout="elk" /></div>
+				</div>
+				<div class="split-merge">
+					${preview ? html`<span class="split-prev">${leaks.length ? '⚠ ' + leaks.length + ' frontier-leak(s): ' + leaks.map(( l ) => l.ref).join(', ') : 'projection clean — frontier respected'}</span>` : null}
+					<button class="split-do" onClick=${onMerge}>merge fork → parent</button>
+				</div>
+			</div>
+		</div>`;
+}

package/lib/studio/public/components/TilingOverlay.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2026 Nathanael Braun
+ * @author : Nathanael BRAUN <pp9ping@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import { html } from 'htm/react';
+
+// the tree-decomposition TILING (pavage) of the active corpus: the derived separator
+// interface (the narrow waist) + each tile/fork with its frontier alphabet. Fed by the
+// `forkPlan` Session op (a pure derivation off the concept-dependency graph).
+export function TilingOverlay( { plan } ) {
+	if ( !plan ) return null;
+	return html`
+		<div class="tiling">
+			<div class="tl-head">tiling
+				<span class="tl-meta">tw ${plan.treewidth} · ${plan.nTiles} tiles · ${plan.partitionPays ? 'partition pays' : 'one tile'}</span>
+			</div>
+			<div class="tl-seps">separators:${(plan.separators || []).map(( s ) => html`<span key=${s} class="tl-sep">${s}</span>`)}</div>
+			<div class="tl-forks">
+				${(plan.forks || []).map(( f, i ) => html`
+					<div key=${i} class="tl-fork">
+						<span class="tl-fconc">${(f.concepts || []).join(', ')}</span>
+						<span class="tl-ffront">⟶ ${(f.frontier || []).join(', ') || '∅'}</span>
+					</div>`)}
+			</div>
+		</div>`;
+}

package/lib/studio/public/components/Timeline.js

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2026 Nathanael Braun
+ * @author : Nathanael BRAUN <pp9ping@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import React, { useState, useEffect } from 'react';
+import { html } from 'htm/react';
+
+// revision scrubber. Steps through the CHECKPOINTED revs only (getRevisions —
+// snapshots are captured per settle, not per intermediate rev), so rollback/diff
+// never target a rev that has no snapshot.
+export function Timeline( { revs, currentRev, onRollback, onDiff } ) {
+	const list = (revs && revs.length) ? revs : [currentRev];
+	const [idx, setIdx] = useState(list.length - 1);
+	useEffect(() => { setIdx(list.length - 1); }, [currentRev, list.length]);
+	const i = Math.min(idx, list.length - 1);
+	const at = list[i] != null ? list[i] : currentRev;
+	const isLast = at >= currentRev;
+	return html`
+		<div class="timeline">
+			<span class="tl-lbl">timeline</span>
+			<input class="tl-range" type="range" min="0" max=${Math.max(list.length - 1, 0)} value=${i}
+				onInput=${( e ) => setIdx(Number(e.target.value))} />
+			<span class="tl-cur">rev ${at} / ${currentRev} · ${list.length} ckpt</span>
+			<button disabled=${isLast} onClick=${() => onRollback(at)}>rollback</button>
+			<button disabled=${isLast} onClick=${() => onDiff(at, currentRev)}>diff → ${currentRev}</button>
+		</div>`;
+}
+
+// added/removed/changed between two revs (diffRevisions output)
+export function DiffPanel( { result, onClose } ) {
+	if ( !result ) return null;
+	const { a, b, d } = result;
+	const ids = ( o ) => Object.keys(o || {});
+	return html`
+		<div class="diffpanel">
+			<div class="dp-head">diff rev ${a} → ${b}<button onClick=${onClose}>✕</button></div>
+			<div class="dp-body">
+				<div class="dp-sec added">+ added: ${ids(d.added).join(', ') || '—'}</div>
+				<div class="dp-sec removed">− removed: ${ids(d.removed).join(', ') || '—'}</div>
+				<div class="dp-sec changed">~ changed: ${ids(d.changed).length === 0 ? '—' : ids(d.changed).map(( id ) => html`
+					<div key=${id} class="dp-chg">${id}: ${Object.keys(d.changed[id]).join(', ')}</div>`)}</div>
+			</div>
+		</div>`;
+}

package/lib/studio/public/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>sg studio</title>
+	<link rel="stylesheet" href="/styles.css" />
+	<script type="importmap">
+	{
+		"imports": {
+			"react": "https://esm.sh/react@18.3.1",
+			"react-dom/client": "https://esm.sh/react-dom@18.3.1/client?deps=react@18.3.1",
+			"htm/react": "https://esm.sh/htm@3.1.1/react?deps=react@18.3.1",
+			"cytoscape": "https://esm.sh/cytoscape@3.30.2",
+			"cytoscape-fcose": "https://esm.sh/cytoscape-fcose@2.2.0?deps=cytoscape@3.30.2",
+			"cytoscape-dagre": "https://esm.sh/cytoscape-dagre@2.5.0?deps=cytoscape@3.30.2",
+			"elkjs": "https://esm.sh/elkjs@0.9.3/lib/elk.bundled.js"
+		}
+	}
+	</script>
+</head>
+<body>
+	<div id="app">booting sg studio…</div>
+	<script type="module" src="/app.js"></script>
+</body>
+</html>