@bian-womp/spark-workbench 0.1.2 → 0.1.4

package/lib/cjs/index.cjs

@@ -3,11 +3,11 @@
 var sparkGraph = require('@bian-womp/spark-graph');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var sparkRemote = require('@bian-womp/spark-remote');
 var ReactFlow = require('reactflow');
 require('reactflow/dist/style.css');
 var cx = require('classnames');
 var react = require('@phosphor-icons/react');
-var sparkRemote = require('@bian-womp/spark-remote');
 
 class DefaultUIExtensionRegistry {
     constructor() {
@@ -1157,7 +1157,8 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
     return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
                                         selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
                                     const typeId = (selectedDesc?.inputs ?? {})[h];
-                                    const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId && e.target.handle === h);
+                                    const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&
+                                        e.target.handle === h);
                                     const commonProps = {
                                         style: { flex: 1 },
                                         disabled: isLinked,
@@ -1176,7 +1177,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                         const orig = originals[h] ?? toDisplay(typeId, current);
                                         setDrafts((d) => ({ ...d, [h]: orig }));
                                     };
-                                    const isEnum = typeId?.startsWith("enum:");
+                                    const isEnum = typeId?.includes("enum:");
                                     const inIssues = selectedNodeHandleValidation.inputs.filter((m) => m.handle === h);
                                     const hasValidation = inIssues.length > 0;
                                     const hasErr = inIssues.some((m) => m.level === "error");
@@ -1539,6 +1540,60 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         setExampleState(key);
         onExampleChange?.(key);
     }, [runner, wb, onExampleChange, runAutoLayout]);
+    const hydrateFromBackend = React.useCallback(async (kind, base) => {
+        try {
+            const transport = kind === "remote-http"
+                ? new sparkRemote.HttpPollingTransport(base)
+                : new sparkRemote.WebSocketTransport(base);
+            await transport.connect();
+            const rr = new sparkRemote.RemoteRunner(transport);
+            const desc = await rr.describeRegistry();
+            const r = new sparkGraph.Registry();
+            // Types
+            for (const t of desc.types) {
+                r.registerType({
+                    id: t.id,
+                    displayName: t.displayName,
+                    validate: (_v) => true,
+                });
+            }
+            // Categories: create placeholders for display name
+            for (const c of desc.categories || []) {
+                // If you later expose real category descriptors, register them here
+                // For now, rely on ComputeCategory for behavior
+                const category = {
+                    id: c.id,
+                    displayName: c.displayName,
+                    createRuntime: () => ({
+                        async onInputsChanged() { },
+                    }),
+                    policy: { mode: "push", asyncConcurrency: "switch" },
+                };
+                r.categories.register(category);
+            }
+            // Coercions (client-side no-op to satisfy validation) if provided
+            for (const c of desc.coercions) {
+                r.registerCoercion(c.from, c.to, (v) => v);
+            }
+            // Nodes (use no-op impl for compute)
+            for (const n of desc.nodes) {
+                r.registerNode({
+                    id: n.id,
+                    categoryId: n.categoryId,
+                    displayName: n.displayName,
+                    inputs: n.inputs || {},
+                    outputs: n.outputs || {},
+                    impl: () => { },
+                });
+            }
+            setRegistry(r);
+            wb.setRegistry(r);
+            await transport.close();
+        }
+        catch (err) {
+            console.error("Failed to hydrate registry from backend:", err);
+        }
+    }, [setRegistry, wb]);
     // Ensure initial example is loaded (and sync when example prop changes)
     React.useEffect(() => {
         applyExample(example ?? "simple");
@@ -1561,6 +1616,15 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             // ignore
         }
     }, [engine, runner, wb]);
+    // When switching to remote backend, auto-hydrate registry from backend
+    React.useEffect(() => {
+        if (backendKind === "remote-http" && httpBaseUrl) {
+            void hydrateFromBackend("remote-http", httpBaseUrl);
+        }
+        else if (backendKind === "remote-ws" && wsUrl) {
+            void hydrateFromBackend("remote-ws", wsUrl);
+        }
+    }, [backendKind, httpBaseUrl, wsUrl, hydrateFromBackend]);
     React.useEffect(() => {
         if (autoLayoutRan.current)
             return;
@@ -1597,33 +1661,33 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                 .map(map);
         };
         switch (typeId) {
-            case "float": {
+            case "base.float": {
                 const n = Number(raw);
                 value = Number.isFinite(n) ? n : 0;
                 break;
             }
-            case "bool": {
+            case "base.bool": {
                 value = Boolean(raw);
                 break;
             }
-            case "string": {
+            case "base.string": {
                 value = String(raw);
                 break;
             }
-            case "float[]": {
+            case "base.float[]": {
                 value = parseArray(String(raw), (x) => Number(x));
                 break;
             }
-            case "bool[]": {
+            case "base.bool[]": {
                 value = parseArray(String(raw), (x) => /^(true|1)$/i.test(x));
                 break;
             }
-            case "vec3": {
+            case "base.vec3": {
                 const arr = parseArray(String(raw), (x) => Number(x));
                 value = [arr[0] ?? 0, arr[1] ?? 0, arr[2] ?? 0];
                 break;
             }
-            case "vec3[]": {
+            case "base.vec3[]": {
                 try {
                     const parsed = JSON.parse(String(raw));
                     if (Array.isArray(parsed)) {
@@ -1655,13 +1719,13 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     const toDisplay = React.useCallback((typeId, value) => {
         if (value === undefined || value === null)
             return "";
-        if (typeId && typeId.startsWith("enum:")) {
+        if (typeId && typeId.includes("enum:")) {
             const n = Number(value);
             const label = registry.getEnumLabel(typeId, n);
             return label ?? String(n);
         }
         const round4 = (n) => Math.round(Number(n) * 10000) / 10000;
-        if (typeId === "vec3" && Array.isArray(value)) {
+        if (typeId === "base.vec3" && Array.isArray(value)) {
             const a = value;
             return [round4(a[0] ?? 0), round4(a[1] ?? 0), round4(a[2] ?? 0)].join(",");
         }