@bian-womp/spark-workbench 0.1.15 → 0.1.17

package/lib/cjs/index.cjs

@@ -439,6 +439,7 @@ class GraphRunner {
                     rc.valueCache.set(`${e.nodeId}.${e.handle}`, {
                         io: e.io,
                         value: e.value,
+                        runtimeTypeId: e.runtimeTypeId,
                     });
                     this.emit("value", e);
                 });
@@ -808,12 +809,115 @@ function useQueryParamString(key, defaultValue) {
     return [val, set];
 }
 
+function resolveOutputDisplay(raw, declared) {
+    if (sparkGraph.isTypedOutput(raw)) {
+        return { typeId: String(raw.__spark_type), value: raw.__spark_value };
+    }
+    let typeId = undefined;
+    if (Array.isArray(declared)) {
+        typeId = declared.length === 1 ? declared[0] : undefined;
+    }
+    else if (typeof declared === "string") {
+        typeId = declared.includes("|") ? undefined : declared;
+    }
+    return { typeId, value: raw };
+}
+function formatDeclaredTypeSignature(declared) {
+    if (Array.isArray(declared))
+        return declared.join(" | ");
+    return declared ?? "";
+}
+// Pre-format common structures for display; return undefined to defer to caller
+function preformatValueForDisplay(typeId, value, registry) {
+    if (value === undefined || value === null)
+        return "";
+    // Unwrap typed outputs
+    if (sparkGraph.isTypedOutput(value)) {
+        return preformatValueForDisplay(String(value.__spark_type), value.__spark_value, registry);
+    }
+    // Enums
+    if (typeId && typeId.includes("enum:") && registry) {
+        const n = Number(value);
+        const label = registry.enums.get(typeId)?.valueToLabel.get(n);
+        if (label)
+            return label;
+    }
+    // Use deep summarization for strings, arrays and nested objects to avoid huge HTML payloads
+    const summarized = summarizeDeep(value);
+    if (typeof summarized === "string")
+        return summarized;
+    // Resource-like objects with url/title (after summarization)
+    if (summarized && typeof summarized === "object") {
+        const urlMaybe = summarized.url;
+        if (typeof urlMaybe === "string") {
+            const title = summarized.title || "";
+            const shortUrl = urlMaybe.length > 32 ? urlMaybe.slice(0, 32) + "…" : urlMaybe;
+            return title ? `${title} (${shortUrl})` : shortUrl;
+        }
+    }
+    return undefined;
+}
+function summarizeDeep(value, registry) {
+    // 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;
+            }
+        }
+        return value.length > 512 ? value.slice(0, 512) + "…" : value;
+    }
+    // Typed output wrapper
+    if (sparkGraph.isTypedOutput(value)) {
+        return summarizeDeep(value.__spark_value);
+    }
+    // Arrays
+    if (Array.isArray(value)) {
+        return value.map((v) => summarizeDeep(v));
+    }
+    // Objects
+    if (value && typeof value === "object") {
+        const obj = value;
+        const out = {};
+        for (const [k, v] of Object.entries(obj)) {
+            // Special-case any 'url' field
+            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] = summarizeDeep(v);
+        }
+        return out;
+    }
+    return value;
+}
+
 function toReactFlow(def, positions, registry, opts) {
     const nodeHandleMap = {};
     const nodes = def.nodes.map((n) => {
         const desc = registry.nodes.get(n.typeId);
         const inputHandles = Object.entries(desc?.inputs ?? {}).map(([id, typeId]) => ({ id, typeId }));
-        const outputHandles = Object.entries(desc?.outputs ?? {}).map(([id, typeId]) => ({ id, typeId }));
+        const outputHandles = Object.entries(desc?.outputs ?? {}).map(([id, typeId]) => ({ id, typeId: formatDeclaredTypeSignature(typeId) }));
         nodeHandleMap[n.nodeId] = {
             inputs: new Set(inputHandles.map((h) => h.id)),
             outputs: new Set(outputHandles.map((h) => h.id)),
@@ -873,6 +977,7 @@ function toReactFlow(def, positions, registry, opts) {
                 : undefined,
             animated: isRunning,
             style,
+            label: e.typeId || undefined,
         };
     });
     return { nodes, edges };
@@ -913,6 +1018,41 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
     const [edgeStatus, setEdgeStatus] = React.useState({});
     const [events, setEvents] = React.useState([]);
     const clearEvents = React.useCallback(() => setEvents([]), []);
+    // Fallback progress animation: drive progress to 100% over ~2 minutes
+    const FALLBACK_TOTAL_MS = 2 * 60 * 1000;
+    const [fallbackStarts, setFallbackStarts] = React.useState({});
+    // Track runs that emitted an error so we can keep progress on completion
+    const [errorRuns, setErrorRuns] = React.useState({});
+    // Periodically advance fallback progress for running nodes without explicit progress
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setNodeStatus((prev) => {
+                let changed = false;
+                const next = { ...prev };
+                const now = Date.now();
+                for (const id of Object.keys(prev)) {
+                    const st = prev[id];
+                    if (!st)
+                        continue;
+                    const runs = st.activeRuns ?? 0;
+                    const startAt = fallbackStarts[id];
+                    if (runs > 0 && startAt) {
+                        const cur = Math.max(0, Math.min(1, Number(st.progress) || 0));
+                        const elapsed = Math.max(0, now - startAt);
+                        // Approach 100% over the target window, but cap below 1 until done
+                        const target = Math.max(0, Math.min(0.99, elapsed / FALLBACK_TOTAL_MS));
+                        const merged = Math.max(cur, target);
+                        if (merged > cur + 0.005 && merged <= 1) {
+                            next[id] = { ...st, progress: merged };
+                            changed = true;
+                        }
+                    }
+                }
+                return changed ? next : prev;
+            });
+        }, 200);
+        return () => clearInterval(interval);
+    }, [fallbackStarts]);
     // Validation
     const [validation, setValidation] = React.useState(undefined);
     // Selection (mirror workbench selectionChanged)
@@ -970,8 +1110,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             layers.push(layer);
             q.splice(0, q.length, ...next);
         }
-        const X = 360;
-        const Y = 180;
+        const X = 480;
+        const Y = 240;
         const pos = {};
         layers.forEach((layer, layerIndex) => {
             layer.forEach((id, itemIndex) => {
@@ -1025,6 +1165,13 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
                         lastError: nodeError.err,
                     },
                 }));
+                // Mark this runId as errored
+                if (nodeError.runId) {
+                    setErrorRuns((prev) => ({
+                        ...prev,
+                        [nodeId]: { ...(prev[nodeId] || {}), [nodeError.runId]: true },
+                    }));
+                }
             }
             return add("runner", "error")(e);
         });
@@ -1057,6 +1204,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
                         },
                     };
                 });
+                // Start fallback animation window
+                setFallbackStarts((prev) => ({ ...prev, [id]: Date.now() }));
             }
             else if (s.kind === "node-progress") {
                 const id = s.nodeId;
@@ -1070,16 +1219,42 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             }
             else if (s.kind === "node-done") {
                 const id = s.nodeId;
+                const runId = s.runId;
                 setNodeStatus((prev) => {
                     const current = prev[id]?.activeRuns ?? 0;
+                    const nextActive = current - 1;
+                    const hadError = !!(runId && errorRuns[id]?.[runId]);
+                    const keepProgress = hadError || nextActive > 0;
                     return {
                         ...prev,
                         [id]: {
                             ...prev[id],
-                            activeRuns: current - 1,
+                            activeRuns: nextActive,
+                            progress: keepProgress ? prev[id]?.progress : 0,
                         },
                     };
                 });
+                // Clear fallback start timestamp if no more active runs
+                setFallbackStarts((prev) => {
+                    prev[id];
+                    const nextPrev = { ...prev };
+                    // If we don't know nextActive here, conservatively clear to stop animation
+                    delete nextPrev[id];
+                    return nextPrev;
+                });
+                // Clear error flag for this runId
+                if (runId) {
+                    setErrorRuns((prev) => {
+                        const nodeMap = { ...(prev[id] || {}) };
+                        delete nodeMap[runId];
+                        const next = { ...prev };
+                        if (Object.keys(nodeMap).length === 0)
+                            delete next[id];
+                        else
+                            next[id] = nodeMap;
+                        return next;
+                    });
+                }
             }
             else if (s.kind === "edge-start") {
                 const id = s.edgeId;
@@ -1306,7 +1481,8 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
     }, [rows, autoScroll]);
     const renderPayload = (v) => {
         try {
-            return JSON.stringify(v, null, 0);
+            const summarized = summarizeDeep(v);
+            return JSON.stringify(summarized, null, 0);
         }
         catch {
             return String(v);
@@ -1318,9 +1494,18 @@ function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWork
 function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, toElement, setInput, }) {
     const safeToString = (typeId, value) => {
         try {
-            return typeof toString === "function"
-                ? toString(typeId, value)
-                : String(value ?? "");
+            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 ?? "");
         }
         catch {
             return String(value ?? "");
@@ -1431,7 +1616,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                     const title = inIssues
                                         .map((v) => `${v.code}: ${v.message}`)
                                         .join("; ");
-                                    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-28", children: [h, jsxRuntime.jsx("span", { className: "text-gray-500 ml-1 text-[11px]", children: selectedDesc?.inputs?.[h] })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: current !== undefined && current !== null
+                                    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-32", children: [h, jsxRuntime.jsx("span", { className: "text-gray-500 ml-1 text-[11px]", children: selectedDesc?.inputs?.[h] })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: current !== undefined && current !== null
                                                     ? String(current)
                                                     : "", onChange: (e) => {
                                                     const val = e.target.value;
@@ -1447,7 +1632,10 @@ 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: toElement(selectedDesc?.outputs?.[h], nodeOutputs[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: (() => {
+                                                const { typeId, value } = resolveOutputDisplay(nodeOutputs[h], selectedDesc?.outputs?.[h]);
+                                                return toElement(typeId, value);
+                                            })() }), (() => {
                                             const outIssues = selectedNodeHandleValidation.outputs.filter((m) => m.handle === h);
                                             if (outIssues.length === 0)
                                                 return null;
@@ -1514,7 +1702,8 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                 const title = vIssues
                     .map((v) => `${v.code}: ${v.message}`)
                     .join("; ");
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "source", position: ReactFlow.Position.Right, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400 !rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { right: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute right-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: { top: topFor(i) - 8, textAlign: "right" }, 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(entry.typeId, outputValues?.[entry.id]) }))] })] }, `out-${entry.id}`));
+                const resolved = resolveOutputDisplay(outputValues?.[entry.id], entry.typeId);
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "source", position: ReactFlow.Position.Right, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400 !rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { right: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute right-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: { top: topFor(i) - 8, textAlign: "right" }, 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}`));
             })] }));
 });
 DefaultNode.displayName = "DefaultNode";
@@ -2010,6 +2199,37 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     const baseToString = React.useCallback((typeId, value) => {
         if (value === undefined || value === null)
             return "";
+        // Normalize typed wrapper
+        if (sparkGraph.isTypedOutput(value)) {
+            return baseToString(String(value.__spark_type), value.__spark_value);
+        }
+        const pre = preformatValueForDisplay(typeId, value, registry);
+        if (pre !== undefined)
+            return pre;
+        if (typeof value === "object" &&
+            value !== null &&
+            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 ? "…" : "");
+                }
+            }
+            return title || url.slice(0, 32) + (url.length > 32 ? "…" : "");
+        }
         if (typeId && typeId.includes("enum:")) {
             const n = Number(value);
             const label = registry.enums.get(typeId)?.valueToLabel.get(n);
@@ -2107,7 +2327,11 @@ exports.WorkbenchCanvas = WorkbenchCanvas;
 exports.WorkbenchContext = WorkbenchContext;
 exports.WorkbenchProvider = WorkbenchProvider;
 exports.WorkbenchStudio = WorkbenchStudio;
+exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
 exports.getNodeBorderClassNames = getNodeBorderClassNames;
+exports.preformatValueForDisplay = preformatValueForDisplay;
+exports.resolveOutputDisplay = resolveOutputDisplay;
+exports.summarizeDeep = summarizeDeep;
 exports.toReactFlow = toReactFlow;
 exports.useQueryParamBoolean = useQueryParamBoolean;
 exports.useQueryParamString = useQueryParamString;