@bian-womp/spark-workbench 0.1.20 → 0.1.22

package/lib/cjs/index.cjs

@@ -327,6 +327,9 @@ class GraphRunner {
         this.backend = { kind: "local" };
         if (backend)
             this.backend = backend;
+        // Emit initial transport status
+        if (this.backend.kind === "local")
+            this.emit("transport", { state: "local" });
     }
     build(def) {
         if (this.backend.kind === "local") {
@@ -615,6 +618,13 @@ class GraphRunner {
             this.runningKind = undefined;
             this.emit("status", { running: false, engine: undefined });
         }
+        const kind = this.backend.kind === "local"
+            ? undefined
+            : this.backend.kind;
+        this.emit("transport", {
+            state: this.backend.kind === "local" ? "local" : "disconnected",
+            kind,
+        });
     }
     isRunning() {
         return !!this.engine;
@@ -627,6 +637,8 @@ class GraphRunner {
         if (this.remote)
             return this.remote;
         let transport;
+        const kind = this.backend.kind === "remote-http" ? "remote-http" : "remote-ws";
+        this.emit("transport", { state: "connecting", kind });
         if (this.backend.kind === "remote-http") {
             if (!sparkRemote.HttpPollingTransport)
                 throw new Error("HttpPollingTransport not available");
@@ -649,6 +661,7 @@ class GraphRunner {
             valueCache: new Map(),
             listenersBound: false,
         };
+        this.emit("transport", { state: "connected", kind });
         return this.remote;
     }
 }
@@ -817,9 +830,25 @@ function useQueryParamString(key, defaultValue) {
     return [val, set];
 }
 
+function formatDataUrlAsLabel(dataUrl) {
+    try {
+        const semi = dataUrl.indexOf(";");
+        const comma = dataUrl.indexOf(",");
+        const mime = dataUrl.slice(5, semi > 0 ? semi : undefined).toUpperCase();
+        const b64 = comma >= 0 ? dataUrl.slice(comma + 1) : "";
+        const bytes = Math.floor((b64.length * 3) / 4);
+        return `${mime} Data (${bytes} bytes)`;
+    }
+    catch {
+        return dataUrl.length > 64 ? dataUrl.slice(0, 64) + "…" : dataUrl;
+    }
+}
 function resolveOutputDisplay(raw, declared) {
     if (sparkGraph.isTypedOutput(raw)) {
-        return { typeId: String(raw.__spark_type), value: raw.__spark_value };
+        return {
+            typeId: sparkGraph.getTypedOutputTypeId(raw),
+            value: sparkGraph.getTypedOutputValue(raw),
+        };
     }
     let typeId = undefined;
     if (Array.isArray(declared)) {
@@ -841,7 +870,7 @@ function preformatValueForDisplay(typeId, value, registry) {
         return "";
     // Unwrap typed outputs
     if (sparkGraph.isTypedOutput(value)) {
-        return preformatValueForDisplay(String(value.__spark_type), value.__spark_value, registry);
+        return preformatValueForDisplay(sparkGraph.getTypedOutputTypeId(value), sparkGraph.getTypedOutputValue(value), registry);
     }
     // Enums
     if (typeId && typeId.includes("enum:") && registry) {
@@ -868,24 +897,13 @@ function preformatValueForDisplay(typeId, value, registry) {
 function summarizeDeep(value) {
     // Strings: summarize data URLs and trim extremely long strings
     if (typeof value === "string") {
-        if (value.startsWith("data:")) {
-            try {
-                const semi = value.indexOf(";");
-                const comma = value.indexOf(",");
-                const mime = value.slice(5, semi > 0 ? semi : undefined).toUpperCase();
-                const b64 = comma >= 0 ? value.slice(comma + 1) : "";
-                const bytes = Math.floor((b64.length * 3) / 4);
-                return `${mime} Data (${bytes} bytes)`;
-            }
-            catch {
-                return value.length > 64 ? value.slice(0, 64) + "…" : value;
-            }
-        }
+        if (value.startsWith("data:"))
+            return formatDataUrlAsLabel(value);
         return value.length > 512 ? value.slice(0, 512) + "…" : value;
     }
     // Typed output wrapper
     if (sparkGraph.isTypedOutput(value)) {
-        return summarizeDeep(value.__spark_value);
+        return summarizeDeep(sparkGraph.getTypedOutputValue(value));
     }
     // Arrays
     if (Array.isArray(value)) {
@@ -900,18 +918,8 @@ function summarizeDeep(value) {
             if (typeof v === "string" &&
                 k.toLowerCase() === "url" &&
                 v.startsWith("data:")) {
-                try {
-                    const semi = v.indexOf(";");
-                    const comma = v.indexOf(",");
-                    const mime = v.slice(5, semi > 0 ? semi : undefined).toUpperCase();
-                    const b64 = comma >= 0 ? v.slice(comma + 1) : "";
-                    const bytes = Math.floor((b64.length * 3) / 4);
-                    out[k] = `${mime} Data (${bytes} bytes)`;
-                    continue;
-                }
-                catch {
-                    // fallthrough
-                }
+                out[k] = formatDataUrlAsLabel(v);
+                continue;
             }
             out[k] = summarizeDeep(v);
         }
@@ -1078,6 +1086,24 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
     const def = wb.export();
     const inputsMap = React.useMemo(() => runner.getInputs(def), [runner, def, valuesTick]);
     const outputsMap = React.useMemo(() => runner.getOutputs(def), [runner, def, valuesTick]);
+    const outputTypesMap = React.useMemo(() => {
+        const out = {};
+        // Local: runtimeTypeId is not stored; derive from typed wrapper in outputsMap
+        for (const n of def.nodes) {
+            const outputsDecl = registry.nodes.get(n.typeId)?.outputs ?? {};
+            const handles = Object.keys(outputsDecl);
+            const cur = {};
+            for (const h of handles) {
+                const v = outputsMap[n.nodeId]?.[h];
+                const declared = outputsDecl[h];
+                const { typeId } = resolveOutputDisplay(v, declared);
+                cur[h] = typeId;
+            }
+            if (Object.keys(cur).length > 0)
+                out[n.nodeId] = cur;
+        }
+        return out;
+    }, [def, outputsMap, registry]);
     // Initialize nodes as invalidated by default until first successful run
     React.useEffect(() => {
         setNodeStatus((prev) => {
@@ -1425,6 +1451,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         valuesTick,
         inputsMap,
         outputsMap,
+        outputTypesMap,
         validationByNode,
         validationByEdge,
         validationGlobal,
@@ -1505,14 +1532,6 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
     const safeToString = (typeId, value) => {
         try {
             if (typeof toString === "function") {
-                // Special-case data URLs for readability
-                if (typeof value === "string" && value.startsWith("data:image/")) {
-                    const comma = value.indexOf(",");
-                    const b64 = comma >= 0 ? value.slice(comma + 1) : "";
-                    const bytes = Math.floor((b64.length * 3) / 4);
-                    const fmt = value.slice(5, value.indexOf(";")) || "image";
-                    return `${fmt.toUpperCase()} Data (${bytes} bytes)`;
-                }
                 return toString(typeId, value);
             }
             return String(value ?? "");
@@ -1521,7 +1540,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             return String(value ?? "");
         }
     };
-    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, } = useWorkbenchContext();
+    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, outputTypesMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
     const nodeValidationHandles = validationByNode;
@@ -1644,7 +1663,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                     if (e.key === "Escape")
                                                         revert();
                                                 }, ...commonProps }))] }, h));
-                                }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsx("label", { className: "w-20", children: h }), jsxRuntime.jsx("div", { className: "flex-1", children: (() => {
+                                }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-20 flex flex-col", children: [jsxRuntime.jsx("span", { children: h }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsxRuntime.jsx("div", { className: "flex-1", children: (() => {
                                                 const { typeId, value } = resolveOutputDisplay(nodeOutputs[h], selectedDesc?.outputs?.[h]);
                                                 return toElement(typeId, value);
                                             })() }), (() => {
@@ -1728,7 +1747,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                                 whiteSpace: "nowrap",
                                 overflow: "hidden",
                                 textOverflow: "ellipsis",
-                            }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, resolved.typeId && (jsxRuntime.jsxs("span", { className: "ml-1 opacity-60", children: ["(", resolved.typeId, ")"] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: toString(resolved.typeId, resolved.value) }))] })] }, `out-${entry.id}`));
+                            }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: toString(resolved.typeId, resolved.value) }))] })] }, `out-${entry.id}`));
             })] }));
 });
 DefaultNode.displayName = "DefaultNode";
@@ -1962,6 +1981,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
     const { wb, runner, registry, def, selectedNodeId, runAutoLayout } = useWorkbenchContext();
+    const [transportStatus, setTransportStatus] = React.useState({
+        state: "local",
+    });
     const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
     const selectedDesc = selectedNode
         ? registry.nodes.get(selectedNode.typeId)
@@ -2175,6 +2197,10 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return;
         applyExample(example);
     }, [example, wb]);
+    React.useEffect(() => {
+        const off = runner.on("transport", (s) => setTransportStatus(s));
+        return () => off();
+    }, [runner]);
     React.useEffect(() => {
         if (!engine)
             return;
@@ -2308,7 +2334,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return "";
         // Normalize typed wrapper
         if (sparkGraph.isTypedOutput(value)) {
-            return baseToString(String(value.__spark_type), value.__spark_value);
+            return baseToString(sparkGraph.getTypedOutputTypeId(value), sparkGraph.getTypedOutputValue(value));
         }
         const pre = preformatValueForDisplay(typeId, value, registry);
         if (pre !== undefined)
@@ -2318,23 +2344,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             typeof value.url === "string") {
             const title = value.title || "";
             const url = String(value.url || "");
-            if (url.startsWith("data:image/")) {
-                try {
-                    const semi = url.indexOf(";");
-                    const comma = url.indexOf(",");
-                    const mime = url
-                        .slice(5, semi > 0 ? semi : undefined)
-                        .toUpperCase();
-                    const b64 = comma >= 0 ? url.slice(comma + 1) : "";
-                    const bytes = Math.floor((b64.length * 3) / 4);
-                    return title
-                        ? `${title} (${mime} ${bytes} bytes)`
-                        : `${mime} Data (${bytes} bytes)`;
-                }
-                catch {
-                    return title || url.slice(0, 32) + (url.length > 32 ? "…" : "");
-                }
-            }
+            // value.ts handles data URL formatting
             return title || url.slice(0, 32) + (url.length > 32 ? "…" : "");
         }
         if (typeId && typeId.includes("enum:")) {
@@ -2381,7 +2391,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return overrides.toElement(baseToElement, { registry });
         return baseToElement;
     }, [overrides, baseToElement, registry]);
-    return (jsxRuntime.jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxRuntime.jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [runner.isRunning() ? (jsxRuntime.jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runner.getRunningEngine()] })) : (jsxRuntime.jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Example:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
+    return (jsxRuntime.jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxRuntime.jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [runner.isRunning() ? (jsxRuntime.jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runner.getRunningEngine()] })) : (jsxRuntime.jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxRuntime.jsxs("span", { className: "ml-2 flex items-center gap-1 text-xs", title: transportStatus.kind || undefined, children: [transportStatus.state === "local" && (jsxRuntime.jsx(react.PlugsConnectedIcon, { size: 14, className: "text-gray-500" })), transportStatus.state === "connecting" && (jsxRuntime.jsx(react.ClockClockwiseIcon, { size: 14, className: "text-amber-600 animate-pulse" })), transportStatus.state === "connected" && (jsxRuntime.jsx(react.WifiHighIcon, { size: 14, className: "text-green-600" })), transportStatus.state === "disconnected" && (jsxRuntime.jsx(react.WifiSlashIcon, { size: 14, className: "text-red-600" })), transportStatus.state === "retrying" && (jsxRuntime.jsx(react.ClockClockwiseIcon, { size: 14, className: "text-amber-700 animate-pulse" }))] }), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Example:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
                             ? "Stop engine before switching example"
                             : undefined, children: [jsxRuntime.jsx("option", { value: "", children: "Select Example\u2026" }), examples.map((ex) => (jsxRuntime.jsx("option", { value: ex.id, children: ex.label }, ex.id)))] }), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Backend:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
                             ? "Stop engine before switching backend"
@@ -2434,6 +2444,7 @@ exports.WorkbenchCanvas = WorkbenchCanvas;
 exports.WorkbenchContext = WorkbenchContext;
 exports.WorkbenchProvider = WorkbenchProvider;
 exports.WorkbenchStudio = WorkbenchStudio;
+exports.formatDataUrlAsLabel = formatDataUrlAsLabel;
 exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
 exports.getNodeBorderClassNames = getNodeBorderClassNames;
 exports.preformatValueForDisplay = preformatValueForDisplay;