470 lines
16 KiB
JavaScript
470 lines
16 KiB
JavaScript
import { compileEveDsl } from "./eve-dsl.js";
|
|
|
|
const statusEl = document.querySelector("#status");
|
|
const app = document.querySelector("#app");
|
|
const surfaceId = document.querySelector("#surface-id");
|
|
const surfaceVersion = document.querySelector("#surface-version");
|
|
const voidBotTab = document.querySelector("#voidbot-tab");
|
|
const fensalirTab = document.querySelector("#fensalir-tab");
|
|
const saiTab = document.querySelector("#sai-tab");
|
|
const dslTab = document.querySelector("#dsl-tab");
|
|
|
|
let socket;
|
|
|
|
voidBotTab.addEventListener("click", () => {
|
|
setActiveTab(voidBotTab);
|
|
openVoidBot();
|
|
});
|
|
|
|
fensalirTab.addEventListener("click", async () => {
|
|
setActiveTab(fensalirTab);
|
|
closeSocket();
|
|
const response = await fetch("./fixtures/fensalir-client-surface.json");
|
|
renderSurface(await response.json(), "fixture");
|
|
});
|
|
|
|
saiTab.addEventListener("click", async () => {
|
|
setActiveTab(saiTab);
|
|
closeSocket();
|
|
const response = await fetch("./fixtures/sai-vn-surface.json");
|
|
renderSurface(await response.json(), "fixture");
|
|
});
|
|
|
|
dslTab.addEventListener("click", async () => {
|
|
setActiveTab(dslTab);
|
|
closeSocket();
|
|
const response = await fetch("./fixtures/reactive-composition.eve");
|
|
renderSurface(compileEveDsl(await response.text()), "dsl");
|
|
});
|
|
|
|
openVoidBot();
|
|
|
|
function setActiveTab(tab) {
|
|
for (const button of [voidBotTab, fensalirTab, saiTab, dslTab]) {
|
|
button.classList.toggle("active", button === tab);
|
|
}
|
|
}
|
|
|
|
function openVoidBot() {
|
|
closeSocket();
|
|
const scheme = location.protocol === "https:" ? "wss:" : "ws:";
|
|
const host = location.hostname || "127.0.0.1";
|
|
const url = `${scheme}//${host}:8795/eve/deck`;
|
|
statusEl.textContent = `connecting ${url}`;
|
|
socket = new WebSocket(url);
|
|
socket.addEventListener("open", () => {
|
|
statusEl.textContent = "connected to Mimir Eve broker";
|
|
socket.send(JSON.stringify({ type: "open-provider", providerId: "voidbot.swarm" }));
|
|
});
|
|
socket.addEventListener("message", event => {
|
|
const state = JSON.parse(event.data);
|
|
if (state.providerId === "voidbot.swarm") {
|
|
renderSurface(state, "live");
|
|
}
|
|
});
|
|
socket.addEventListener("close", () => {
|
|
statusEl.textContent = "Mimir broker disconnected";
|
|
});
|
|
socket.addEventListener("error", () => {
|
|
statusEl.textContent = "Mimir broker error; is port 8795 running?";
|
|
});
|
|
}
|
|
|
|
function closeSocket() {
|
|
if (socket) {
|
|
socket.close();
|
|
socket = undefined;
|
|
}
|
|
}
|
|
|
|
function renderSurface(state, source) {
|
|
window.__eveCurrentMesh = state.mesh;
|
|
surfaceId.textContent = state.providerId || "surface unknown";
|
|
surfaceVersion.textContent = `v${state.version ?? "?"}`;
|
|
statusEl.textContent = `${state.title || "surface"} (${source})`;
|
|
applySurfaceStyles(state.surface?.styles);
|
|
if (state.surface?.root) {
|
|
app.replaceChildren(renderCultComponent(state.surface.root));
|
|
} else if (state.providerId === "voidbot.swarm") {
|
|
renderVoidBot(state);
|
|
} else {
|
|
renderGraphSurface(state);
|
|
}
|
|
}
|
|
|
|
function applySurfaceStyles(styles) {
|
|
const tokens = styles?.tokens || {};
|
|
const root = document.documentElement.style;
|
|
const map = {
|
|
colorBackground: "--bg",
|
|
colorPanel: "--panel",
|
|
colorPanelAlt: "--panel-2",
|
|
colorText: "--text",
|
|
colorMuted: "--quiet",
|
|
colorAccent: "--accent",
|
|
colorLink: "--cyan",
|
|
};
|
|
for (const [token, variable] of Object.entries(map)) {
|
|
if (tokens[token]) root.setProperty(variable, tokens[token]);
|
|
}
|
|
if (tokens.fontBody) root.setProperty("--font-body", tokens.fontBody);
|
|
if (tokens.fontTitle) root.setProperty("--font-title", tokens.fontTitle);
|
|
}
|
|
|
|
function renderCultComponent(node) {
|
|
const kind = node.kind || "panel";
|
|
const props = node.props || {};
|
|
const children = node.children || [];
|
|
let rendered;
|
|
|
|
if (kind === "vn.stage") {
|
|
const stage = el("section", "cultui-vn-stage");
|
|
for (const child of children) stage.append(renderCultComponent(child));
|
|
return stage;
|
|
}
|
|
|
|
if (kind === "grid") {
|
|
const grid = el("section", "cultui-grid");
|
|
if (props.columns) grid.style.gridTemplateColumns = props.columns;
|
|
for (const child of children) grid.append(renderCultComponent(child));
|
|
return grid;
|
|
}
|
|
|
|
if (kind === "image.background") {
|
|
const view = el("div", "cultui-background");
|
|
if (props.src) view.style.backgroundImage = `url("${props.src}")`;
|
|
view.setAttribute("aria-label", props.label || "background");
|
|
return placeComponent(view, props.placement);
|
|
}
|
|
|
|
if (kind === "graph" || kind === "embed.norn") {
|
|
return placeComponent(renderCultGraph(props), props.placement);
|
|
}
|
|
|
|
if (kind === "embed.tex") {
|
|
return placeComponent(renderCultTex(props), props.placement);
|
|
}
|
|
|
|
if (
|
|
kind === "layer.sprites" ||
|
|
kind === "layer.cards" ||
|
|
kind === "layer.embedded-surfaces" ||
|
|
kind === "rail.actions"
|
|
) {
|
|
const layer = el("div", `cultui-${kind.replace(".", "-")}`);
|
|
for (const child of children) layer.append(renderCultComponent(child));
|
|
return layer;
|
|
}
|
|
|
|
if (kind === "image.sprite") {
|
|
const figure = el("figure", `cultui-sprite ${props.slot || "center"}`);
|
|
if (props.src) {
|
|
const image = el("img");
|
|
image.src = props.src;
|
|
image.alt = props.alt || props.actor || "";
|
|
figure.append(image);
|
|
}
|
|
return figure;
|
|
}
|
|
|
|
if (kind === "card.external") {
|
|
const card = el("article", "card cultui-card");
|
|
card.append(el("div", "card-title", props.title || props.key || "card"));
|
|
card.append(el("div", "detail", props.selector || props.htmlRef || "provider-owned fragment"));
|
|
return card;
|
|
}
|
|
|
|
if (kind === "card") {
|
|
const card = el("article", "card cultui-card");
|
|
if (props.title) card.append(el("div", "card-title", props.title));
|
|
for (const child of children) card.append(renderCultComponent(child));
|
|
return card;
|
|
}
|
|
|
|
if (kind === "panel.dialogue") {
|
|
const panel = el("section", "cultui-dialogue pane");
|
|
panel.append(el("h2", "", props.speaker || "Speaker"));
|
|
panel.append(el("div", "detail", props.text || ""));
|
|
for (const child of children) {
|
|
if (child.kind !== "text.dialogue") panel.append(renderCultComponent(child));
|
|
}
|
|
return panel;
|
|
}
|
|
|
|
if (kind === "avatar") {
|
|
const image = el("img", "avatar");
|
|
image.src = props.src || "";
|
|
image.alt = props.label || "";
|
|
return image;
|
|
}
|
|
|
|
if (kind === "text.dialogue" || kind === "text" || kind === "text.title") {
|
|
const text = el("div", kind === "text.title" ? "cultui-title" : "detail", props.text || "");
|
|
bindText(text, props);
|
|
return text;
|
|
}
|
|
|
|
if (kind === "metric") {
|
|
return renderCultMetric(props);
|
|
}
|
|
|
|
if (kind === "list") {
|
|
return renderCultList(props);
|
|
}
|
|
|
|
if (kind === "control.button") {
|
|
const button = el("button", "cultui-button", props.label || "Action");
|
|
button.type = "button";
|
|
button.addEventListener("click", () => {
|
|
currentMesh()?.applyAction(props.action);
|
|
statusEl.textContent = props.action
|
|
? `command ${props.action.type} ${props.action.target || ""}`
|
|
: `command ${props.action?.command || "invoke"} ${JSON.stringify(props.action?.payload || {})}`;
|
|
});
|
|
return button;
|
|
}
|
|
|
|
if (kind === "inspector.kv") {
|
|
const panel = el("section", "pane");
|
|
panel.append(el("h2", "", props.title || "Inspector"));
|
|
for (const item of props.items || []) {
|
|
panel.append(el("div", "detail", `${item.key}: ${item.value}`));
|
|
}
|
|
return panel;
|
|
}
|
|
|
|
const fallback = el("section", "pane");
|
|
fallback.append(el("h2", "", kind));
|
|
for (const child of children) fallback.append(renderCultComponent(child));
|
|
rendered = fallback;
|
|
return placeComponent(rendered, props.placement);
|
|
}
|
|
|
|
function placeComponent(element, placement) {
|
|
if (!placement || placement.space !== "scene") return element;
|
|
element.classList.add("cultui-placed");
|
|
element.dataset.placementMode = placement.mode || "overlay";
|
|
element.dataset.placementAnchor = placement.anchor || "";
|
|
if (placement.zIndex !== undefined) element.style.zIndex = placement.zIndex;
|
|
if (placement.opacity !== undefined) element.style.opacity = placement.opacity;
|
|
|
|
const quad = placement.quad;
|
|
if (Array.isArray(quad) && quad.length >= 4) {
|
|
const xs = quad.map(point => point[0]);
|
|
const ys = quad.map(point => point[1]);
|
|
const minX = Math.min(...xs);
|
|
const maxX = Math.max(...xs);
|
|
const minY = Math.min(...ys);
|
|
const maxY = Math.max(...ys);
|
|
element.style.left = `${minX * 100}%`;
|
|
element.style.top = `${minY * 100}%`;
|
|
element.style.width = `${Math.max(0.02, maxX - minX) * 100}%`;
|
|
element.style.height = `${Math.max(0.02, maxY - minY) * 100}%`;
|
|
const skewX = ((quad[1][1] - quad[0][1]) + (quad[2][1] - quad[3][1])) * 18;
|
|
const skewY = ((quad[3][0] - quad[0][0]) + (quad[2][0] - quad[1][0])) * -18;
|
|
element.style.transform = `skew(${skewX}deg, ${skewY}deg)`;
|
|
}
|
|
|
|
if (placement.chromaKey) {
|
|
element.dataset.chromaKey = placement.chromaKey.color || "enabled";
|
|
}
|
|
return element;
|
|
}
|
|
|
|
function bindText(element, props) {
|
|
if (!props.bind) return;
|
|
currentMesh()?.var(props.bind).subscribe(value => {
|
|
element.textContent = `${props.prefix || ""}${value ?? ""}${props.suffix || ""}`;
|
|
});
|
|
}
|
|
|
|
function renderCultMetric(props) {
|
|
const metric = el("div", "metric cultui-reactive-metric");
|
|
const label = el("label", "", props.label || "Metric");
|
|
const valueEl = el("span", "metric-value", "");
|
|
label.append(valueEl);
|
|
const bar = el("div", "bar");
|
|
const fill = el("span");
|
|
bar.append(fill);
|
|
metric.append(label, bar);
|
|
if (props.bind) {
|
|
currentMesh()?.var(props.bind).subscribe(value => {
|
|
const number = Number(value) || 0;
|
|
valueEl.textContent = props.format === "percent" ? `${Math.round(number * 100)}%` : String(value ?? "");
|
|
fill.style.width = `${Math.max(0, Math.min(100, Math.round(number * 100)))}%`;
|
|
});
|
|
}
|
|
return metric;
|
|
}
|
|
|
|
function renderCultList(props) {
|
|
const panel = el("section", "cultui-reactive-list");
|
|
panel.append(el("div", "card-title", props.title || "List"));
|
|
const list = el("div", "list");
|
|
panel.append(list);
|
|
if (props.bind) {
|
|
currentMesh()?.collection(props.bind).subscribe(items => {
|
|
list.replaceChildren(...items.map(item => el("div", "detail cultui-stream-item", String(item))));
|
|
});
|
|
}
|
|
return panel;
|
|
}
|
|
|
|
function currentMesh() {
|
|
return window.__eveCurrentMesh;
|
|
}
|
|
|
|
function renderCultGraph(props) {
|
|
const graph = el("section", "cultui-graph");
|
|
graph.dataset.engine = props.engine?.id || "graph";
|
|
graph.dataset.contract = props.engine?.contract || "";
|
|
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
svg.setAttribute("viewBox", "0 0 1 1");
|
|
svg.setAttribute("preserveAspectRatio", "none");
|
|
const graphState = props.graph || props;
|
|
const nodes = graphState.nodes || [];
|
|
for (const edge of graphState.edges || []) {
|
|
const source = nodes.find(node => node.id === edge.source);
|
|
const target = nodes.find(node => node.id === edge.target);
|
|
if (!source || !target) continue;
|
|
const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
|
|
line.setAttribute("x1", source.x ?? 0);
|
|
line.setAttribute("y1", source.y ?? 0);
|
|
line.setAttribute("x2", target.x ?? 0);
|
|
line.setAttribute("y2", target.y ?? 0);
|
|
svg.append(line);
|
|
}
|
|
graph.append(svg);
|
|
for (const node of nodes) {
|
|
const button = el("button", `cultui-node ${node.current ? "selected" : ""}`, node.label || node.id);
|
|
button.type = "button";
|
|
button.style.left = `${node.x * 100}%`;
|
|
button.style.top = `${node.y * 100}%`;
|
|
button.addEventListener("click", () => {
|
|
statusEl.textContent = `command story.jump {"targetPath":"${node.target || node.id}"}`;
|
|
});
|
|
graph.append(button);
|
|
}
|
|
return graph;
|
|
}
|
|
|
|
function renderCultTex(props) {
|
|
const panel = el("section", "cultui-tex");
|
|
panel.dataset.renderer = props.renderer?.web || "tex";
|
|
if (props.label) panel.append(el("div", "cultui-tex-label", props.label));
|
|
panel.append(el("div", "cultui-tex-source", props.source || props.sourceUri || ""));
|
|
return panel;
|
|
}
|
|
|
|
function renderVoidBot(state) {
|
|
const nodes = state.nodes || [];
|
|
const ctb = nodes.filter(n => n.kind === "ctb-turn");
|
|
const leaves = nodes.filter(n => n.kind === "state-leaf");
|
|
const summary = nodeById(nodes, "voidbot-summary");
|
|
const agent = nodeById(nodes, "agent-detail");
|
|
const detail = nodeById(nodes, state.selectedNodeId) || nodeById(nodes, "state-detail") || agent || summary;
|
|
|
|
app.innerHTML = "";
|
|
const root = el("section", "cockpit");
|
|
const rail = el("div", "ctb");
|
|
for (const turn of ctb) {
|
|
const card = el("button", "card");
|
|
card.type = "button";
|
|
if (turn.avatarUrl) {
|
|
const img = el("img", "avatar");
|
|
img.src = turn.avatarUrl;
|
|
img.alt = "";
|
|
card.append(img);
|
|
}
|
|
card.append(el("div", "card-title", turn.label || turn.id));
|
|
card.append(el("div", "health", turn.health || ""));
|
|
rail.append(card);
|
|
}
|
|
|
|
const left = el("section", "pane");
|
|
left.append(el("h2", "", "Controls / Selected Face"));
|
|
left.append(el("div", "detail", `${summary?.label || "VoidBot Swarm"}\n${summary?.detail || ""}`));
|
|
left.append(metricStack());
|
|
left.append(el("div", "detail", agent?.detail || "No selected Face detail."));
|
|
|
|
const middle = el("section", "pane");
|
|
middle.append(el("h2", "", "State Graph"));
|
|
const list = el("div", "list");
|
|
for (const leaf of leaves) {
|
|
const card = el("div", `card ${leaf.id === state.selectedNodeId ? "selected" : ""}`);
|
|
card.append(el("div", "card-title", leaf.label || leaf.id));
|
|
card.append(el("div", "health", leaf.health || leaf.statePath || ""));
|
|
list.append(card);
|
|
}
|
|
middle.append(list);
|
|
|
|
const right = el("section", "pane");
|
|
right.append(el("h2", "", "State Detail"));
|
|
right.append(el("div", "detail", `${detail?.label || "detail"}\n\n${detail?.detail || ""}`));
|
|
|
|
root.append(rail, left, middle, right);
|
|
app.append(root);
|
|
}
|
|
|
|
function renderGraphSurface(state) {
|
|
app.innerHTML = "";
|
|
const graph = el("section", "graph");
|
|
for (const node of state.nodes || []) {
|
|
const view = el("article", `node ${node.id === state.selectedNodeId ? "selected" : ""}`);
|
|
const width = Math.max(160, graphWidth(node.width));
|
|
const height = Math.max(92, graphHeight(node.height));
|
|
view.style.width = `${width}px`;
|
|
view.style.minHeight = `${height}px`;
|
|
view.style.left = `${((node.x ?? 0) + 1) * 50}%`;
|
|
view.style.top = `${((node.y ?? 0) + 1) * 50}%`;
|
|
view.append(el("div", "card-title", node.label || node.id));
|
|
view.append(el("div", "health", `${node.kind || "node"} ${node.health || ""}`));
|
|
if (node.detail) {
|
|
view.append(el("div", "detail", node.detail));
|
|
}
|
|
graph.append(view);
|
|
}
|
|
app.append(graph);
|
|
}
|
|
|
|
function graphWidth(value) {
|
|
return Math.round((value || 0.25) * Math.max(900, window.innerWidth - 32));
|
|
}
|
|
|
|
function graphHeight(value) {
|
|
return Math.round((value || 0.16) * Math.max(520, window.innerHeight - 150));
|
|
}
|
|
|
|
function metricStack() {
|
|
const wrapper = el("div", "metrics");
|
|
const metrics = [
|
|
["TURN", 0.96],
|
|
["MEMORY", 0.70],
|
|
["PRESSURE", 0.42],
|
|
["HEAT", 0.34],
|
|
["LOAD", 0.99],
|
|
["SPEED", 0.88],
|
|
];
|
|
for (const [label, value] of metrics) {
|
|
const metric = el("div", "metric");
|
|
metric.append(el("label", "", `${label} ${Math.round(value * 100)}%`));
|
|
const bar = el("div", "bar");
|
|
const fill = el("span");
|
|
fill.style.width = `${Math.round(value * 100)}%`;
|
|
bar.append(fill);
|
|
metric.append(bar);
|
|
wrapper.append(metric);
|
|
}
|
|
return wrapper;
|
|
}
|
|
|
|
function nodeById(nodes, id) {
|
|
return nodes.find(node => node.id === id);
|
|
}
|
|
|
|
function el(tag, className = "", text = "") {
|
|
const element = document.createElement(tag);
|
|
if (className) element.className = className;
|
|
if (text) element.textContent = text;
|
|
return element;
|
|
}
|