skynet-graph 1.2.0

package/lib/studio/public/styles.css

@@ -0,0 +1,185 @@
+:root {
+	--bg: #0f1419; --panel: #161c25; --border: #2a3340;
+	--fg: #cdd6e0; --muted: #7c8b9c; --accent: #6ea8fe;
+	--good: #3ad29f; --warn: #f5a524; --bad: #ff6b6b;
+}
+* { box-sizing: border-box; }
+body { margin: 0; font: 13px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--fg); }
+.studio { display: flex; flex-direction: column; height: 100vh; }
+
+.toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--border); }
+.toolbar strong { color: var(--accent); letter-spacing: .02em; }
+.toolbar select, .toolbar button { background: #222b36; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; font: inherit; }
+.toolbar button { cursor: pointer; }
+.toolbar button:hover:not(:disabled) { border-color: var(--accent); }
+.toolbar button:disabled { opacity: .4; cursor: default; }
+.toolbar .sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
+.toolbar .lyt { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
+.status { margin-left: auto; font-weight: 600; }
+.status.live { color: var(--good); }
+.status.down, .status.connecting { color: var(--warn); }
+.rev { color: var(--muted); font-family: ui-monospace, monospace; }
+
+.panels { flex: 1; display: flex; min-height: 0; }
+.cy { flex: 1; min-width: 0; background: radial-gradient(circle at 50% 40%, #131a23, #0f1419); }
+
+.inspector { width: 320px; border-left: 1px solid var(--border); padding: 12px 14px; overflow: auto; background: var(--panel); }
+.inspector h3 { margin: 0 0 10px; color: var(--accent); font-family: ui-monospace, monospace; }
+.inspector h4 { margin: 14px 0 6px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
+.inspector .empty { color: var(--muted); }
+.fact { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-family: ui-monospace, monospace; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.04); }
+.fact .k { color: var(--fg); }
+.fact .v { color: var(--muted); text-align: right; word-break: break-word; }
+.cast { margin: 6px 0; padding: 6px 8px; background: #11171f; border-left: 2px solid var(--good); border-radius: 0 4px 4px 0; }
+.cast .cn { color: var(--good); font-family: ui-monospace, monospace; font-size: 12px; }
+.cast .ms { color: var(--muted); }
+.cast .why { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; padding-left: 8px; }
+
+.bottom { border-top: 1px solid var(--border); padding: 8px 14px; background: var(--panel); max-height: 150px; overflow: auto; }
+.bottom h3 { margin: 0 0 6px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
+.tracerow { display: flex; flex-wrap: wrap; gap: 6px; }
+.tchip { font-family: ui-monospace, monospace; font-size: 11px; padding: 2px 7px; background: #11171f; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); }
+.tchip b { color: var(--good); font-weight: 600; }
+
+/* timeline (T9) */
+.timeline { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: #11171f; border-bottom: 1px solid var(--border); }
+.timeline .tl-lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
+.timeline .tl-range { flex: 1; accent-color: var(--accent); }
+.timeline .tl-cur { color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; min-width: 96px; }
+.timeline button { background: #222b36; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; cursor: pointer; font: inherit; }
+.timeline button:hover:not(:disabled) { border-color: var(--accent); }
+.timeline button:disabled { opacity: .4; cursor: default; }
+
+/* diff panel (T9) */
+.diffpanel { position: fixed; right: 16px; bottom: 16px; width: 360px; max-height: 50vh; overflow: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.5); z-index: 10; }
+.dp-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--accent); font-family: ui-monospace, monospace; }
+.dp-head button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
+.dp-body { padding: 10px 12px; font-family: ui-monospace, monospace; font-size: 12px; }
+.dp-sec { margin: 4px 0; }
+.dp-sec.added { color: var(--good); }
+.dp-sec.removed { color: var(--bad); }
+.dp-sec.changed { color: var(--warn); }
+.dp-chg { color: var(--muted); padding-left: 12px; }
+
+/* concept tree (T10) */
+.concepts { width: 220px; border-right: 1px solid var(--border); padding: 10px 0; overflow: auto; background: var(--panel); flex-shrink: 0; }
+.concepts h3 { margin: 0 0 8px 14px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
+.concepts .empty { color: var(--muted); padding: 0 14px; }
+.cset { margin-bottom: 8px; }
+.csetname { color: var(--accent); font-family: ui-monospace, monospace; font-size: 11px; padding: 2px 14px; opacity: .8; }
+.cname { display: block; padding: 2px 14px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--fg); cursor: pointer; }
+.cname:hover { background: #11171f; color: var(--accent); }
+
+/* concept editor modal (T10) */
+.editor-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 20; }
+.em-box { width: 560px; max-width: 92vw; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; }
+.em-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--fg); }
+.em-head b { color: var(--accent); font-family: ui-monospace, monospace; }
+.em-head button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; }
+.em-text { margin: 12px 14px 0; height: 320px; background: #0d1218; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-family: ui-monospace, monospace; font-size: 12px; resize: vertical; }
+.em-validation { margin: 8px 14px 0; font-family: ui-monospace, monospace; font-size: 12px; }
+.em-validation.ok { color: var(--good); }
+.em-validation.bad { color: var(--bad); }
+.em-warn { color: var(--warn); margin-top: 4px; }
+.em-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 14px; }
+.em-actions button { background: #222b36; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer; font: inherit; }
+.em-actions button.primary { background: var(--accent); color: #0b1017; border-color: var(--accent); font-weight: 600; }
+.em-actions button.danger { background: #3a1f24; color: #ff9a9a; border-color: #6b2b33; margin-right: auto; }
+.em-actions button:disabled { opacity: .4; cursor: default; }
+
+/* fork tree (T11) — footer becomes a row: trace | forks */
+.bottom { display: flex; padding: 0; }
+.trace-wrap { flex: 1; min-width: 0; padding: 8px 14px; overflow: auto; }
+.forks { width: 240px; border-left: 1px solid var(--border); padding: 8px 12px; overflow: auto; flex-shrink: 0; }
+.fk-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
+.fk-head button { background: #222b36; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 11px; text-transform: none; letter-spacing: 0; }
+.fk-head button:hover { border-color: var(--accent); }
+.fk-item { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }
+.fk-item.active .fk-id { color: var(--accent); font-weight: 600; }
+.fk-id { font-family: ui-monospace, monospace; font-size: 12px; color: var(--fg); cursor: pointer; }
+.fk-id:hover { color: var(--accent); }
+.fk-merge { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 1px 7px; cursor: pointer; font-size: 11px; }
+.fk-merge:hover { border-color: var(--good); color: var(--good); }
+
+/* prompt console (T12) */
+.prompt { border-top: 1px solid var(--border); background: var(--panel); }
+.pr-out { max-height: 180px; overflow: auto; padding: 8px 14px; font-family: ui-monospace, monospace; font-size: 12px; border-bottom: 1px solid var(--border); }
+.pr-err { color: var(--bad); }
+.pr-step { color: var(--muted); padding: 1px 0; }
+.pr-step.pr-eval { color: var(--accent); }
+.pr-step.pr-expand { color: var(--warn); }
+.pr-step.pr-answer { color: var(--good); }
+.pr-step.pr-rollup { color: #c792ea; }
+.pr-answer { margin-top: 8px; color: var(--fg); }
+.pr-answer b { color: var(--good); display: block; margin-bottom: 4px; }
+.pr-bar { display: flex; gap: 8px; padding: 8px 14px; }
+.pr-bar input { flex: 1; background: #0d1218; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font: inherit; }
+.pr-bar input:focus { outline: none; border-color: var(--accent); }
+.pr-bar button { background: var(--accent); color: #0b1017; border: none; border-radius: 6px; padding: 6px 16px; font-weight: 600; cursor: pointer; }
+.pr-bar button:disabled { opacity: .4; cursor: default; }
+
+/* --- grammar workbench + corpus exchange --- */
+.viewtoggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
+.viewtoggle button { background: transparent; color: var(--muted); border: none; padding: 4px 12px; cursor: pointer; font: inherit; }
+.viewtoggle button.on { background: var(--accent); color: #0b1017; font-weight: 600; }
+.grammar-cy { flex: 1; min-width: 0; background: #0b1017; }
+.corpus-panel { width: 280px; overflow: auto; padding: 10px; border-left: 1px solid var(--border); font-size: 12px; }
+.cp-actions { display: flex; gap: 6px; margin-bottom: 10px; }
+.cp-actions button { flex: 1; background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; }
+.cp-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
+.cp-legend .lg { font-size: 10px; padding: 1px 6px; border-radius: 4px; }
+.lg-w { background: #14392e; color: var(--good); } .lg-rp { background: #16294a; color: var(--accent); }
+.lg-rn { background: #3a1620; color: var(--bad); } .lg-sep { background: #3a2a12; color: var(--warn); }
+.cp-manifest .cp-row { padding: 2px 0; color: var(--muted); }
+.cp-manifest b { color: var(--fg); } .cp-v { color: var(--accent); }
+.cp-prov, .cp-alpha { color: var(--fg); }
+.cp-prov { background: var(--panel); border-radius: 4px; padding: 0 5px; margin-right: 4px; }
+.cp-cross, .cp-coll { margin-top: 10px; }
+.cp-cross h4, .cp-coll h4 { margin: 0 0 4px; font-size: 11px; color: var(--muted); }
+.cp-coll h4 { color: var(--warn); }
+.cp-link, .cp-clash { padding: 1px 0; color: var(--muted); } .cp-link b, .cp-clash b { color: var(--fg); }
+.ptrace { flex: 1; min-width: 180px; max-width: 360px; overflow: hidden; display: flex; flex-direction: column; }
+.pt-head { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; padding: 2px 0; }
+.pt-refresh { background: transparent; border: none; color: var(--muted); cursor: pointer; }
+.pt-rows { overflow: auto; font-family: ui-monospace, monospace; font-size: 10px; }
+.pt-empty { color: var(--muted); opacity: .6; }
+.pt-row { padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pt-lvl { color: var(--muted); margin-right: 4px; } .pt-concept { color: var(--accent); } .pt-target { color: var(--good); }
+.pt-aid { color: var(--muted); opacity: .6; margin-left: 4px; }
+.split-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
+.split-box { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; width: 88vw; height: 80vh; display: flex; flex-direction: column; }
+.split-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
+.split-head button { background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; cursor: pointer; }
+.split-canvases { flex: 1; display: flex; min-height: 0; }
+.split-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border); }
+.split-label { font-size: 11px; color: var(--muted); padding: 4px 8px; }
+.split-merge { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); }
+.split-prev { font-size: 12px; color: var(--muted); }
+.split-do { background: var(--accent); color: #0b1017; border: none; border-radius: 6px; padding: 6px 16px; font-weight: 600; cursor: pointer; }
+
+/* --- learning panel (typed lattice registry — track 4) --- */
+.learning { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; overflow: auto; background: var(--panel); }
+.lp-head { font-weight: 600; }
+.lp-ver { color: var(--muted); font-size: 11px; margin-left: 8px; }
+.lp-block { padding: 10px 12px; background: #11171f; border: 1px solid var(--border); border-radius: 8px; }
+.lp-grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.lp-title { font-size: 12px; margin-bottom: 8px; }
+.lp-note { color: var(--muted); font-weight: 400; font-size: 11px; }
+.lp-row { display: flex; gap: 8px; align-items: center; }
+.lp-row input, .lp-row select { background: #222b36; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font: inherit; }
+.lp-row input.lp-enum { flex: 1; }
+.lp-row button { background: #222b36; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; }
+.lp-row button:disabled { opacity: .4; cursor: default; }
+.lp-keys { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
+.lp-kchip { font-family: ui-monospace, monospace; font-size: 11px; padding: 2px 8px; background: #0f1419; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); }
+.lp-verdict { margin-top: 8px; font-family: ui-monospace, monospace; font-size: 12px; padding: 5px 8px; border-radius: 6px; }
+.lp-verdict.ok { background: rgba(70, 180, 110, .12); border-left: 2px solid var(--good, #4b6); }
+.lp-verdict.ko { background: rgba(220, 90, 90, .12); border-left: 2px solid #d55; }
+.lp-rings { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
+.lp-ring { display: flex; gap: 8px; align-items: center; font-family: ui-monospace, monospace; font-size: 12px; padding: 3px 8px; background: #0f1419; border: 1px solid var(--border); border-radius: 6px; }
+.lp-rkey { color: var(--muted); }
+.lp-ralias { font-weight: 600; }
+.lp-rvia { color: var(--muted); font-size: 11px; margin-left: auto; }
+.lp-retract { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; }
+.lp-retract:hover { color: #d55; }
+.lp-empty { color: var(--muted); font-size: 12px; }

package/lib/studio/public/ws.js

@@ -0,0 +1,58 @@
+/*
+ * 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/>.
+ */
+// Tiny studio ws client: request/response correlated by id, plus event push.
+// Auto-reconnects; queues calls issued before the socket is open.
+export function connect( url, onEvent ) {
+	let ws, nextId = 0;
+	const pending = new Map();
+	const queue = [];
+	let statusCb = () => {};
+
+	function setStatus( s ) { statusCb(s); }
+
+	function open() {
+		ws = new WebSocket(url);
+		ws.onopen = () => { setStatus('live'); while ( queue.length ) ws.send(queue.shift()); };
+		ws.onclose = () => { setStatus('down'); setTimeout(open, 1000); };
+		ws.onerror = () => { try { ws.close(); } catch ( e ) {} };
+		ws.onmessage = ( ev ) => {
+			let m; try { m = JSON.parse(ev.data); } catch ( e ) { return; }
+			if ( m.id != null && pending.has(m.id) ) {
+				const { resolve, reject } = pending.get(m.id);
+				pending.delete(m.id);
+				m.ok ? resolve(m.result) : reject(new Error(m.error));
+			} else if ( m.type ) {
+				onEvent(m);
+			}
+		};
+	}
+	open();
+
+	return {
+		onStatus( cb ) { statusCb = cb; },
+		call( op, args, sessionId ) {
+			const id = 'r' + (++nextId);
+			const payload = JSON.stringify({ id, op, args: args || {}, sessionId });
+			return new Promise(( resolve, reject ) => {
+				pending.set(id, { resolve, reject });
+				if ( ws && ws.readyState === WebSocket.OPEN ) ws.send(payload);
+				else queue.push(payload);
+			});
+		}
+	};
+}

package/lib/studio/server.js

@@ -0,0 +1,130 @@
+/*
+ * 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/>.
+ */
+'use strict';
+/**
+ * The studio server: serves the static frontend (lib/studio/public) over http and
+ * bridges a WebSocket to the Studio (ops in, events out). Thin — all logic lives in
+ * studio.js / session.js.
+ *
+ *   const { createServer } = require('skynet-graph/lib/studio/server');
+ *   const srv = createServer({ Graph: require('skynet-graph'), root: './' , ask });
+ *   srv.listen(4848, () => console.log('sg studio on http://localhost:4848'));
+ */
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const { WebSocketServer } = require('ws');
+const Studio = require('./studio.js');
+const { OPS } = require('./protocol.js');
+
+const PUBLIC = path.join(__dirname, 'public');
+const MIME = {
+	'.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css',
+	'.json': 'application/json', '.svg': 'image/svg+xml', '.map': 'application/json'
+};
+
+// route an op to a studio-level or session-level method
+function dispatch( studio, sessionId, op, args ) {
+	switch ( op ) {
+		case 'listCorpora':   return studio.listCorpora();
+		case 'loadCorpus':    return studio.loadCorpus(args);
+		case 'fork':          return studio.fork(sessionId || 'root', args);
+		case 'merge':         return studio.merge(args.childId, args.targetId, args.project);
+		case 'selectSession': { const ok = !!studio.getSession(args.sessionId); if ( ok ) studio.setActive(args.sessionId); return { ok }; }
+		case 'importCorpus':  return studio.importCorpus(args.bundle, args.opts || {});
+	}
+	const s = studio.getSession(sessionId || 'root');
+	if ( !s ) throw new Error('no such session: ' + sessionId);
+	switch ( op ) {
+		case 'reset':           s._destroy(); return { ok: true };
+		case 'mutate':          return s.mutate(args.template, args.targetId);
+		case 'run':             return s.run();
+		case 'state':           return s.state();
+		case 'conceptTree':     return s.conceptTree();
+		case 'grammarGraph':    return s.grammarGraph();
+		case 'corpusManifest':  return s.corpusManifest(args.meta);
+		case 'exportCorpus':    return s.exportCorpus(args.meta);
+		case 'providerTrace':   return s.providerTrace(args.n, args.filter);
+		case 'mergePreview':    return s.mergePreview(args.template, args.opts);
+		case 'getConcept':      return s.getConcept(args.nameOrId);
+		case 'validateConcept': return s.validateConcept(args.schema);
+		case 'patchConcept':    return s.patchConcept(args.nameOrId, args.updates);
+		case 'addConcept':      return s.addConcept(args.parentNameOrId, args.schema);
+		case 'deleteConcept':   return s.deleteConcept(args.nameOrId);
+		case 'registry':        return s.registry();
+		case 'declareKey':      return s.declareKey(args);
+		case 'proposeAlias':    return s.proposeAlias(args);
+		case 'retractAlias':    return s.retractAlias(args);
+		case 'creditAlias':     return s.creditAlias(args);
+		case 'exportLattice':   return s.exportLattice(args.meta);
+		case 'importLattice':   return s.importLattice(args);
+		case 'revisions':       return s.revisions();
+		case 'snapshot':        return s.snapshot(args.rev);
+		case 'rollback':        return s.rollback(args.rev);
+		case 'diff':            return s.diff(args.a, args.b);
+		case 'prompt':
+			if ( typeof s.prompt !== 'function' ) throw new Error('prompt not available (no LLM backend wired)');
+			return s.prompt(args.text, args.opts);
+	}
+	throw new Error('unhandled op: ' + op);
+}
+
+function serveStatic( req, res ) {
+	let urlPath = decodeURIComponent((req.url || '/').split('?')[0]);
+	if ( urlPath === '/favicon.ico' ) { res.writeHead(204); return res.end(); }
+	if ( urlPath === '/' ) urlPath = '/index.html';
+	const filePath = path.normalize(path.join(PUBLIC, urlPath));
+	if ( !filePath.startsWith(PUBLIC) ) { res.writeHead(403); return res.end('forbidden'); }
+	fs.readFile(filePath, ( err, buf ) => {
+		if ( err ) { res.writeHead(404); return res.end('not found'); }
+		res.writeHead(200, { 'Content-Type': MIME[path.extname(filePath)] || 'application/octet-stream' });
+		res.end(buf);
+	});
+}
+
+function createServer( { Graph, ask, root, logger } = {} ) {
+	const studio = new Studio({ Graph, ask, root, logger });
+	const httpServer = http.createServer(serveStatic);
+	const wss = new WebSocketServer({ server: httpServer });
+
+	wss.on('connection', ( ws ) => {
+		const onEvent = ( e ) => { if ( ws.readyState === ws.OPEN ) ws.send(JSON.stringify(e)); };
+		studio.on('event', onEvent);
+		ws.on('close', () => studio.off('event', onEvent));
+		ws.on('message', async ( data ) => {
+			let msg;
+			try { msg = JSON.parse(data.toString()); } catch ( e ) { return; }
+			const { id, sessionId, op, args } = msg;
+			try {
+				if ( !OPS.includes(op) ) throw new Error('unknown op: ' + op);
+				const result = await dispatch(studio, sessionId, op, args || {});
+				ws.send(JSON.stringify({ id, ok: true, result }));
+			} catch ( e ) {
+				ws.send(JSON.stringify({ id, ok: false, error: e.message }));
+			}
+		});
+	});
+
+	return {
+		httpServer, studio,
+		listen( port, cb ) { httpServer.listen(port, cb); return this; },
+		close( cb ) { wss.close(); httpServer.close(cb); }
+	};
+}
+
+module.exports = { createServer };