@bian-womp/spark-workbench 0.1.21 → 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,6 +830,19 @@ 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 {
@@ -871,19 +897,8 @@ 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
@@ -903,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);
         }
@@ -1085,11 +1090,14 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         const out = {};
         // Local: runtimeTypeId is not stored; derive from typed wrapper in outputsMap
         for (const n of def.nodes) {
-            const handles = Object.keys(registry.nodes.get(n.typeId)?.outputs ?? {});
+            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];
-                cur[h] = sparkGraph.getTypedOutputTypeId(v);
+                const declared = outputsDecl[h];
+                const { typeId } = resolveOutputDisplay(v, declared);
+                cur[h] = typeId;
             }
             if (Object.keys(cur).length > 0)
                 out[n.nodeId] = cur;
@@ -1524,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 ?? "");
@@ -1747,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";
@@ -1981,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)
@@ -2194,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;
@@ -2337,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:")) {
@@ -2400,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"
@@ -2453,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;