@tangle-network/sandbox-ui 0.47.0 → 0.49.0

package/dist/WorkflowGraph-4JREVTSK.js

@@ -0,0 +1,295 @@
+import {
+  ProviderIcon
+} from "./chunk-GTJ5PSK5.js";
+import {
+  buildWorkflowGraph
+} from "./chunk-46VFHJPQ.js";
+import {
+  providerLabel
+} from "./chunk-7JLB7UZ3.js";
+import "./chunk-U67V476Y.js";
+
+// src/workflows/WorkflowGraph.tsx
+import {
+  Background,
+  Controls,
+  Handle,
+  Position,
+  ReactFlow
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+
+// src/workflows/flow-graph.ts
+function buildFlowGraph(yaml, nodeState) {
+  const graph = buildWorkflowGraph(yaml);
+  return {
+    error: graph.error,
+    nodes: graph.nodes.map(
+      (n) => ({
+        id: n.id,
+        type: "wfNode",
+        position: n.position,
+        data: nodeState?.[n.id] ? { ...n.data, state: nodeState[n.id] } : n.data
+      })
+    ),
+    edges: graph.edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      sourceHandle: e.sourceHandle,
+      type: "smoothstep"
+    }))
+  };
+}
+
+// src/workflows/format.ts
+function fmtDuration(ms) {
+  if (ms === void 0 || !Number.isFinite(ms) || ms < 0) return void 0;
+  if (ms < 1e3) return `${Math.round(ms)}ms`;
+  const s = ms / 1e3;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const totalSeconds = Math.round(s);
+  return `${Math.floor(totalSeconds / 60)}m${totalSeconds % 60}s`;
+}
+function fmtCost(usd) {
+  if (usd === void 0 || !Number.isFinite(usd) || usd < 0) return void 0;
+  if (usd === 0) return "$0";
+  return usd < 0.01 ? `$${usd.toFixed(4)}` : `$${usd.toFixed(2)}`;
+}
+function clampPreview(text, max = 200) {
+  return text.length > max ? `${text.slice(0, max)}\u2026` : text;
+}
+function fmtTokens(input, output) {
+  const valid = (n) => n !== void 0 && Number.isFinite(n) && n >= 0 ? n : void 0;
+  const i = valid(input);
+  const o = valid(output);
+  if (i === void 0 && o === void 0) return void 0;
+  return `${i ?? 0}/${o ?? 0} tok`;
+}
+
+// src/workflows/WorkflowGraph.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function useColorMode() {
+  const [mode, setMode] = useState(
+    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light"
+  );
+  useEffect(() => {
+    const el = document.documentElement;
+    const update = () => setMode(el.classList.contains("dark") ? "dark" : "light");
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  return mode;
+}
+var TONE_CARD = {
+  trigger: "border-primary/60 bg-primary/5",
+  structural: "border-accent-yellow/50 bg-accent-yellow/5",
+  action: "border-border bg-card"
+};
+var TONE_DOT = {
+  trigger: "bg-primary",
+  structural: "bg-accent-yellow",
+  action: "bg-text-muted"
+};
+var HANDLE_CLASS = "!h-2 !w-2 !min-w-0 !border-0 !bg-transparent opacity-0";
+var STATUS_LABEL = {
+  queued: "Queued",
+  running: "Running",
+  succeeded: "Done",
+  failed: "Failed"
+};
+var STATUS_BADGE = {
+  queued: "bg-background-tertiary text-text-muted",
+  running: "bg-primary/15 text-primary",
+  succeeded: "bg-green-600/10 text-green-600",
+  failed: "bg-red-500/10 text-red-400"
+};
+function statusBorder(status) {
+  switch (status) {
+    case "running":
+      return "border-primary ring-2 ring-primary/40 animate-pulse";
+    case "succeeded":
+      return "border-green-500";
+    case "failed":
+      return "border-red-500";
+    default:
+      return "opacity-70";
+  }
+}
+function MetaChip({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "rounded bg-background-tertiary px-1.5 py-0.5 text-[10px] text-text-muted", children });
+}
+function WorkflowNode({ data }) {
+  const d = data;
+  const state = d.state;
+  const model = state?.model ?? d.model;
+  const duration = fmtDuration(state?.durationMs);
+  const cost = fmtCost(state?.costUsd);
+  const tokens = fmtTokens(state?.inputTokens, state?.outputTokens);
+  const errorText = state?.error ? clampPreview(state.error) : void 0;
+  const outputText = state?.outputPreview ? clampPreview(state.outputPreview) : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-[240px] rounded-lg border px-3 py-2 shadow-sm transition-colors ${TONE_CARD[d.tone]} ${state ? statusBorder(state.status) : ""}`,
+      children: [
+        !d.isRoot && /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Top,
+            className: HANDLE_CLASS
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `h-2 w-2 shrink-0 rounded-full ${TONE_DOT[d.tone]}`
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-[12px] text-text", children: d.title }),
+          state ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `ml-auto rounded px-1.5 py-0.5 text-[10px] ${STATUS_BADGE[state.status]}`,
+              children: STATUS_LABEL[state.status]
+            }
+          ) : d.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto rounded bg-background-tertiary px-1.5 py-0.5 text-[10px] text-text-muted", children: d.badge })
+        ] }),
+        d.subtitle && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "mt-1 truncate text-[11px] text-text-muted",
+            title: d.subtitle,
+            children: d.subtitle
+          }
+        ),
+        (model || cost || duration || tokens || state) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: [
+          d.kind && d.tone === "action" && /* @__PURE__ */ jsx(MetaChip, { children: d.kind }),
+          model && /* @__PURE__ */ jsx(MetaChip, { children: model }),
+          cost && /* @__PURE__ */ jsx(MetaChip, { children: cost }),
+          duration && /* @__PURE__ */ jsx(MetaChip, { children: duration }),
+          tokens && /* @__PURE__ */ jsx(MetaChip, { children: tokens })
+        ] }),
+        state?.status === "failed" && errorText && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "mt-1.5 line-clamp-2 text-[10px] text-red-400",
+            title: errorText,
+            children: errorText
+          }
+        ),
+        outputText && state?.status !== "failed" && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "mt-1.5 line-clamp-2 text-[10px] text-text-muted",
+            title: outputText,
+            children: outputText
+          }
+        ),
+        d.provider && /* @__PURE__ */ jsxs("span", { className: "mt-1.5 inline-flex items-center gap-1 rounded bg-background-tertiary px-1.5 py-0.5 text-[10px] text-text-muted", children: [
+          /* @__PURE__ */ jsx(
+            ProviderIcon,
+            {
+              id: d.provider,
+              displayName: providerLabel(d.provider),
+              size: 12,
+              className: "rounded-[2px]"
+            }
+          ),
+          providerLabel(d.provider)
+        ] }),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "source",
+            id: "out",
+            position: Position.Bottom,
+            className: HANDLE_CLASS
+          }
+        ),
+        d.hasBranches && /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "source",
+            id: "branch",
+            position: Position.Right,
+            className: HANDLE_CLASS
+          }
+        )
+      ]
+    }
+  );
+}
+var NODE_TYPES = { wfNode: WorkflowNode };
+function WorkflowGraph({
+  yaml,
+  variant = "full",
+  className,
+  nodeState,
+  onNodeClick
+}) {
+  const colorMode = useColorMode();
+  const { nodes, edges, error } = useMemo(
+    () => buildFlowGraph(yaml, nodeState),
+    [yaml, nodeState]
+  );
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      onNodeClick?.(node.id, node.data);
+    },
+    [onNodeClick]
+  );
+  if (error || nodes.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-text-muted text-xs ${className ?? ""}`,
+        children: error ?? "Nothing to show"
+      }
+    );
+  }
+  const isPreview = variant === "preview";
+  return /* @__PURE__ */ jsx("div", { className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      nodeTypes: NODE_TYPES,
+      colorMode,
+      onNodeClick: onNodeClick ? handleNodeClick : void 0,
+      fitView: true,
+      fitViewOptions: { padding: 0.2 },
+      proOptions: { hideAttribution: true },
+      nodesDraggable: !isPreview,
+      nodesConnectable: false,
+      elementsSelectable: !isPreview,
+      edgesFocusable: false,
+      zoomOnScroll: false,
+      zoomOnPinch: true,
+      zoomOnDoubleClick: !isPreview,
+      panOnDrag: true,
+      preventScrolling: false,
+      minZoom: 0.2,
+      maxZoom: 1.5,
+      children: [
+        /* @__PURE__ */ jsx(Background, { gap: 16 }),
+        /* @__PURE__ */ jsx(Controls, { showInteractive: false, position: "bottom-right" })
+      ]
+    }
+  ) });
+}
+export {
+  WorkflowGraph,
+  WorkflowNode
+};

package/dist/{chunk-PZ62T5PM.js → chunk-3WUSPCPC.js}

@@ -1899,6 +1899,7 @@ function SidebarLayoutInner({
   profileMenuItems,
   showThemeToggle = false,
   railFooter,
+  railCollapseToggle = "footer",
   LinkComponent,
   hideBelow,
   railLabels = false,
@@ -1915,15 +1916,20 @@ function SidebarLayoutInner({
   return /* @__PURE__ */ jsxs14("div", { className: cn("min-h-screen bg-surface text-foreground", className), children: [
     /* @__PURE__ */ jsx15("div", { className: cn(hideBelow && HIDE_BELOW_CLASS[hideBelow]), children: /* @__PURE__ */ jsxs14(Sidebar, { className: sidebarClassName, children: [
       /* @__PURE__ */ jsxs14(SidebarRail, { children: [
-        (railHeaderContent !== void 0 || logo !== void 0) && /* @__PURE__ */ jsx15(SidebarRailHeader, { className: cn(showLabels && (railHeaderContent !== void 0 ? "px-2" : "justify-start px-4")), children: railHeaderContent !== void 0 ? railHeaderContent : /* @__PURE__ */ jsx15(
-          Link,
-          {
-            href: logoHref,
-            to: logoHref,
-            className: "flex items-center justify-center rounded-lg p-1 transition-colors hover:bg-surface-container-high",
-            children: logo
-          }
-        ) }),
+        (railHeaderContent !== void 0 || logo !== void 0 || railLabels && railCollapseToggle === "header") && /* @__PURE__ */ jsxs14(SidebarRailHeader, { className: cn(showLabels && (railHeaderContent !== void 0 ? "px-2" : "justify-start px-4")), children: [
+          railHeaderContent !== void 0 ? railHeaderContent : logo !== void 0 ? /* @__PURE__ */ jsx15(
+            Link,
+            {
+              href: logoHref,
+              to: logoHref,
+              className: "flex items-center justify-center rounded-lg p-1 transition-colors hover:bg-surface-container-high",
+              children: logo
+            }
+          ) : null,
+          railLabels && railCollapseToggle === "header" && // Icon-only in the header row (the labeled, full-width variant is
+          // for the vertical footer stack); sits beside the logo/content.
+          /* @__PURE__ */ jsx15(RailCollapseToggle, { collapsed: railCollapsed, showLabel: false, onToggle: toggleRail, className: "shrink-0" })
+        ] }),
         /* @__PURE__ */ jsx15(SidebarRailNav, { className: showLabels ? "px-2" : void 0, children: navItems.map((item) => {
           if (item.flyoutItems && item.flyoutItems.length > 0) {
             const activeSet = new Set(item.flyoutActiveIds ?? []);
@@ -1983,7 +1989,7 @@ function SidebarLayoutInner({
           ) }, item.id);
         }) }),
         (railLabels || railFooter !== void 0 || hasProfile) && /* @__PURE__ */ jsxs14(SidebarRailFooter, { className: cn("border-t border-[var(--md3-outline-variant)] pt-2", showLabels && "items-stretch px-2"), children: [
-          railLabels && /* @__PURE__ */ jsx15(RailCollapseToggle, { collapsed: railCollapsed, showLabel: showLabels, onToggle: toggleRail }),
+          railLabels && railCollapseToggle === "footer" && /* @__PURE__ */ jsx15(RailCollapseToggle, { collapsed: railCollapsed, showLabel: showLabels, onToggle: toggleRail }),
           railFooter,
           hasProfile && (() => {
             const profile = /* @__PURE__ */ jsx15(

package/dist/{chunk-SUC6ZJZW.js → chunk-46VFHJPQ.js}

@@ -21,6 +21,16 @@ function urlHost(url) {
     return url;
   }
 }
+function pickDetail(cfg, keys) {
+  const out = {};
+  for (const key of keys) {
+    const v = cfg[key];
+    if (v === void 0 || v === null) continue;
+    const text = typeof v === "string" ? v : typeof v === "number" || typeof v === "boolean" ? String(v) : Array.isArray(v) ? `${v.length} item${v.length === 1 ? "" : "s"}` : "\u2026";
+    out[key] = text.length > 200 ? `${text.slice(0, 200)}\u2026` : text;
+  }
+  return Object.keys(out).length > 0 ? out : void 0;
+}
 function describeAction(action) {
   const rec = asRecord(action);
   const [kind] = Object.keys(rec);
@@ -29,7 +39,9 @@ function describeAction(action) {
     case "sandbox.spawn":
       return {
         title: "Spawn sandbox",
+        kind,
         subtitle: str(cfg.template),
+        detail: pickDetail(cfg, ["template", "size", "region"]),
         hasBranches: false,
         isRoot: false,
         tone: "action"
@@ -38,8 +50,11 @@ function describeAction(action) {
       const path = str(cfg.path);
       return {
         title: "Integration",
+        kind,
         subtitle: path,
+        path,
         provider: path?.split(".")[0],
+        detail: pickDetail(cfg, ["path"]),
         hasBranches: false,
         isRoot: false,
         tone: "action"
@@ -49,7 +64,9 @@ function describeAction(action) {
       const url = str(cfg.url);
       return {
         title: "Notify",
+        kind,
         subtitle: url ? urlHost(url) : void 0,
+        detail: pickDetail(cfg, ["url"]),
         hasBranches: false,
         isRoot: false,
         tone: "action"
@@ -58,7 +75,16 @@ function describeAction(action) {
     case "agent.run":
       return {
         title: "Run agent",
+        kind,
         subtitle: str(cfg.model) ?? str(cfg.profile) ?? str(cfg.prompt),
+        model: str(cfg.model),
+        detail: pickDetail(cfg, [
+          "profile",
+          "model",
+          "maxRounds",
+          "size",
+          "prompt"
+        ]),
         hasBranches: false,
         isRoot: false,
         tone: "action"
@@ -67,6 +93,7 @@ function describeAction(action) {
       const branches = Array.isArray(cfg.branches) ? cfg.branches : [];
       return {
         title: "Parallel",
+        kind,
         subtitle: `${branches.length} branch${branches.length === 1 ? "" : "es"}`,
         badge: branches.length > 0 ? `\xD7${branches.length}` : void 0,
         hasBranches: branches.length > 0,
@@ -77,7 +104,9 @@ function describeAction(action) {
     case "foreach":
       return {
         title: "For each",
+        kind,
         subtitle: typeof cfg.items === "string" ? cfg.items : "list",
+        detail: pickDetail(cfg, ["items"]),
         // Only fans out when a `do` template is actually present.
         hasBranches: Boolean(cfg.do),
         isRoot: false,
@@ -86,6 +115,7 @@ function describeAction(action) {
     default:
       return {
         title: kind ? kind : "Action",
+        kind: kind ?? "action",
         hasBranches: false,
         isRoot: false,
         tone: "action"
@@ -106,6 +136,7 @@ function describeTrigger(on) {
     if (repo) subtitle += ` on ${repo}`;
     return {
       title: "Trigger",
+      kind: "provider_event",
       subtitle,
       provider: connection,
       hasBranches: false,
@@ -119,6 +150,7 @@ function describeTrigger(on) {
     const tz = str(sch.timezone);
     return {
       title: "Schedule",
+      kind: "schedule",
       subtitle: cron ? tz ? `${cron} (${tz})` : cron : void 0,
       hasBranches: false,
       isRoot: true,
@@ -127,6 +159,7 @@ function describeTrigger(on) {
   }
   return {
     title: "Trigger",
+    kind: "trigger",
     hasBranches: false,
     isRoot: true,
     tone: "trigger"

package/dist/{chunk-NXUSLH7H.js → chunk-4HLWA2VN.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3J6FG3FJ.js";
 import {
   PortsList
-} from "./chunk-PZ62T5PM.js";
+} from "./chunk-3WUSPCPC.js";
 import {
   TerminalView
 } from "./chunk-VIREDUBF.js";

package/dist/dashboard.d.ts

@@ -806,6 +806,13 @@ interface SidebarLayoutProps {
     showThemeToggle?: boolean;
     /** Extra content in the rail footer, above the profile avatar. */
     railFooter?: React.ReactNode;
+    /**
+     * Where the rail collapse/expand control sits. Defaults to `"footer"` (the
+     * historical placement, above the profile avatar). Set `"header"` to move it
+     * to the top of the rail instead, alongside the logo/`railHeaderContent`.
+     * Only takes effect when `railLabels` is set (the rail is collapsible).
+     */
+    railCollapseToggle?: "header" | "footer";
     LinkComponent?: React.ComponentType<any>;
     /**
      * Controlled panel-open state. Provide it (seeded from a server-readable

package/dist/dashboard.js

@@ -52,7 +52,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-PZ62T5PM.js";
+} from "./chunk-3WUSPCPC.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/globals.css

@@ -1915,6 +1915,9 @@
   .border-foreground {
     border-color: var(--color-foreground);
   }
+  .border-green-500 {
+    border-color: var(--color-green-500);
+  }
   .border-green-500\/30 {
     border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1960,6 +1963,9 @@
       border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
     }
   }
+  .border-red-500 {
+    border-color: var(--color-red-500);
+  }
   .border-red-500\/20 {
     border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2275,6 +2281,12 @@
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
+  .bg-green-600\/10 {
+    background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-600) 10%, transparent);
+    }
+  }
   .bg-green-600\/20 {
     background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3202,6 +3214,9 @@
   .text-green-400 {
     color: var(--color-green-400);
   }
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
   .text-muted-foreground {
     color: var(--color-muted-foreground);
   }
@@ -3455,6 +3470,12 @@
       --tw-ring-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
     }
   }
+  .ring-primary\/40 {
+    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+    }
+  }
   .ring-offset-background {
     --tw-ring-offset-color: var(--color-background);
   }

package/dist/index.js

@@ -148,7 +148,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-NXUSLH7H.js";
+} from "./chunk-4HLWA2VN.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -211,7 +211,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-PZ62T5PM.js";
+} from "./chunk-3WUSPCPC.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/styles.css

@@ -1915,6 +1915,9 @@
   .border-foreground {
     border-color: var(--color-foreground);
   }
+  .border-green-500 {
+    border-color: var(--color-green-500);
+  }
   .border-green-500\/30 {
     border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1960,6 +1963,9 @@
       border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
     }
   }
+  .border-red-500 {
+    border-color: var(--color-red-500);
+  }
   .border-red-500\/20 {
     border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2275,6 +2281,12 @@
   .bg-green-500 {
     background-color: var(--color-green-500);
   }
+  .bg-green-600\/10 {
+    background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-600) 10%, transparent);
+    }
+  }
   .bg-green-600\/20 {
     background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3202,6 +3214,9 @@
   .text-green-400 {
     color: var(--color-green-400);
   }
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
   .text-muted-foreground {
     color: var(--color-muted-foreground);
   }
@@ -3455,6 +3470,12 @@
       --tw-ring-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
     }
   }
+  .ring-primary\/40 {
+    --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+    }
+  }
   .ring-offset-background {
     --tw-ring-offset-color: var(--color-background);
   }

package/dist/workbench.js

@@ -12,9 +12,9 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-NXUSLH7H.js";
+} from "./chunk-4HLWA2VN.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-PZ62T5PM.js";
+import "./chunk-3WUSPCPC.js";
 import "./chunk-OMUIPJQZ.js";
 import "./chunk-VIREDUBF.js";
 import "./chunk-77WVVJA4.js";

package/dist/workflows.d.ts

@@ -12,11 +12,46 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * so the spine stays a single readable column.
  */
 type WfNodeTone = "trigger" | "structural" | "action";
+type WfNodeStatus = "queued" | "running" | "succeeded" | "failed";
+/**
+ * Live RUN state for one node, supplied by the host (keyed by node id) and
+ * merged onto {@link WfNodeData.state} at render time. Absent ⇒ the graph shows
+ * the static definition only (the assistant-proposal preview path). Driven from
+ * a workflow run's per-action results so the graph animates as the run executes.
+ */
+interface WfNodeState {
+    status: WfNodeStatus;
+    /** Amount booked for this action, USD. */
+    costUsd?: number;
+    /** Wall-clock the action took, ms. */
+    durationMs?: number;
+    /** Model the action actually used (may differ from the requested model). */
+    model?: string;
+    /** Failure message, when the node failed. */
+    error?: string;
+    /** Short preview of the action's output (or a failure's partial text). */
+    outputPreview?: string;
+    /** Input/output token usage, when known. */
+    inputTokens?: number;
+    outputTokens?: number;
+}
 interface WfNodeData extends Record<string, unknown> {
     /** Headline for the node, e.g. "Run agent". */
     title: string;
+    /** The action/trigger kind verbatim, e.g. "agent.run", "schedule". Set on every
+     *  node `buildWorkflowGraph` produces so a card can label what it is regardless
+     *  of which subtitle it shows; optional on the type so external consumers
+     *  constructing `WfNodeData` directly aren't forced to supply it (the render
+     *  guards its usage). */
+    kind?: string;
     /** Secondary detail, e.g. an integration path or a cron expression. */
     subtitle?: string;
+    /** Requested model (agent.run), shown as a chip even before a run. */
+    model?: string;
+    /** `integration.invoke` provider.method path. */
+    path?: string;
+    /** Notable config fields for the expand drawer (kept small + stringified). */
+    detail?: Record<string, string>;
     /** Connector slug (e.g. `github`) for the provider chip, when one applies. */
     provider?: string;
     /** Small corner tag, e.g. "×3" for a parallel fan-out. */
@@ -26,6 +61,8 @@ interface WfNodeData extends Record<string, unknown> {
     /** Whether this node is the spine root (no incoming/target handle). */
     isRoot: boolean;
     tone: WfNodeTone;
+    /** Live run state, merged in by the host at render time (never from YAML). */
+    state?: WfNodeState;
 }
 interface WfNode {
     id: string;
@@ -60,8 +97,23 @@ interface WorkflowGraphProps {
     variant?: "full" | "preview";
     /** Sizing for the wrapper; the caller controls height. */
     className?: string;
+    /**
+     * Live per-node run state, keyed by graph node id (`trigger`, `a0`, `a0-b1`).
+     * Absent ⇒ the static definition view (the proposal-card preview passes
+     * nothing). When present, each node shows its status/cost/duration/output and
+     * the running node pulses.
+     *
+     * Immutability contract: the node memo keys on this object's reference, so the
+     * host MUST pass a NEW top-level `nodeState` object whenever any node's state
+     * changes (mutating a nested entry in place will not re-render). Building a
+     * fresh record each update — e.g. from a poll/SSE tick — satisfies this.
+     */
+    nodeState?: Record<string, WfNodeState>;
+    /** Click handler for a node (e.g. open a detail drawer). Absent ⇒ nodes are
+     *  non-interactive on click. */
+    onNodeClick?: (nodeId: string, data: WfNodeData) => void;
 }
 
 declare function WorkflowGraph(props: WorkflowGraphProps): react_jsx_runtime.JSX.Element;
 
-export { type WfEdge, type WfGraph, type WfNode, type WfNodeData, type WfNodeTone, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, buildWorkflowGraph };
+export { type WfEdge, type WfGraph, type WfNode, type WfNodeData, type WfNodeState, type WfNodeStatus, type WfNodeTone, WorkflowGraph as WorkflowGraphLazy, type WorkflowGraphProps, buildWorkflowGraph };

package/dist/workflows.js

@@ -1,6 +1,6 @@
 import {
   buildWorkflowGraph
-} from "./chunk-SUC6ZJZW.js";
+} from "./chunk-46VFHJPQ.js";
 import "./chunk-7JLB7UZ3.js";
 import "./chunk-U67V476Y.js";
 
@@ -27,7 +27,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-EOV2P5AM.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-4JREVTSK.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.47.0",
+  "version": "0.49.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",

package/dist/WorkflowGraph-EOV2P5AM.js

@@ -1,184 +0,0 @@
-import {
-  ProviderIcon
-} from "./chunk-GTJ5PSK5.js";
-import {
-  buildWorkflowGraph
-} from "./chunk-SUC6ZJZW.js";
-import {
-  providerLabel
-} from "./chunk-7JLB7UZ3.js";
-import "./chunk-U67V476Y.js";
-
-// src/workflows/WorkflowGraph.tsx
-import {
-  Background,
-  Controls,
-  Handle,
-  Position,
-  ReactFlow
-} from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
-import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function useColorMode() {
-  const [mode, setMode] = useState(
-    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light"
-  );
-  useEffect(() => {
-    const el = document.documentElement;
-    const update = () => setMode(el.classList.contains("dark") ? "dark" : "light");
-    update();
-    const observer = new MutationObserver(update);
-    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
-    return () => observer.disconnect();
-  }, []);
-  return mode;
-}
-var TONE_CARD = {
-  trigger: "border-primary/60 bg-primary/5",
-  structural: "border-accent-yellow/50 bg-accent-yellow/5",
-  action: "border-border bg-card"
-};
-var TONE_DOT = {
-  trigger: "bg-primary",
-  structural: "bg-accent-yellow",
-  action: "bg-text-muted"
-};
-var HANDLE_CLASS = "!h-2 !w-2 !min-w-0 !border-0 !bg-transparent opacity-0";
-function WorkflowNode({ data }) {
-  const d = data;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `relative w-[240px] rounded-lg border px-3 py-2 shadow-sm ${TONE_CARD[d.tone]}`,
-      children: [
-        !d.isRoot && /* @__PURE__ */ jsx(
-          Handle,
-          {
-            type: "target",
-            position: Position.Top,
-            className: HANDLE_CLASS
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: `h-2 w-2 shrink-0 rounded-full ${TONE_DOT[d.tone]}`
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "font-medium text-[12px] text-text", children: d.title }),
-          d.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto rounded bg-background-tertiary px-1.5 py-0.5 text-[10px] text-text-muted", children: d.badge })
-        ] }),
-        d.subtitle && /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: "mt-1 truncate text-[11px] text-text-muted",
-            title: d.subtitle,
-            children: d.subtitle
-          }
-        ),
-        d.provider && /* @__PURE__ */ jsxs("span", { className: "mt-1.5 inline-flex items-center gap-1 rounded bg-background-tertiary px-1.5 py-0.5 text-[10px] text-text-muted", children: [
-          /* @__PURE__ */ jsx(
-            ProviderIcon,
-            {
-              id: d.provider,
-              displayName: providerLabel(d.provider),
-              size: 12,
-              className: "rounded-[2px]"
-            }
-          ),
-          providerLabel(d.provider)
-        ] }),
-        /* @__PURE__ */ jsx(
-          Handle,
-          {
-            type: "source",
-            id: "out",
-            position: Position.Bottom,
-            className: HANDLE_CLASS
-          }
-        ),
-        d.hasBranches && /* @__PURE__ */ jsx(
-          Handle,
-          {
-            type: "source",
-            id: "branch",
-            position: Position.Right,
-            className: HANDLE_CLASS
-          }
-        )
-      ]
-    }
-  );
-}
-var NODE_TYPES = { wfNode: WorkflowNode };
-function WorkflowGraph({
-  yaml,
-  variant = "full",
-  className
-}) {
-  const colorMode = useColorMode();
-  const { nodes, edges, error } = useMemo(() => {
-    const graph = buildWorkflowGraph(yaml);
-    return {
-      error: graph.error,
-      nodes: graph.nodes.map(
-        (n) => ({
-          id: n.id,
-          type: "wfNode",
-          position: n.position,
-          data: n.data
-        })
-      ),
-      edges: graph.edges.map((e) => ({
-        id: e.id,
-        source: e.source,
-        target: e.target,
-        sourceHandle: e.sourceHandle,
-        type: "smoothstep"
-      }))
-    };
-  }, [yaml]);
-  if (error || nodes.length === 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-text-muted text-xs ${className ?? ""}`,
-        children: error ?? "Nothing to show"
-      }
-    );
-  }
-  const isPreview = variant === "preview";
-  return /* @__PURE__ */ jsx("div", { className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs(
-    ReactFlow,
-    {
-      nodes,
-      edges,
-      nodeTypes: NODE_TYPES,
-      colorMode,
-      fitView: true,
-      fitViewOptions: { padding: 0.2 },
-      proOptions: { hideAttribution: true },
-      nodesDraggable: !isPreview,
-      nodesConnectable: false,
-      elementsSelectable: !isPreview,
-      edgesFocusable: false,
-      zoomOnScroll: false,
-      zoomOnPinch: true,
-      zoomOnDoubleClick: !isPreview,
-      panOnDrag: true,
-      preventScrolling: false,
-      minZoom: 0.2,
-      maxZoom: 1.5,
-      children: [
-        /* @__PURE__ */ jsx(Background, { gap: 16 }),
-        /* @__PURE__ */ jsx(Controls, { showInteractive: false, position: "bottom-right" })
-      ]
-    }
-  ) });
-}
-export {
-  WorkflowGraph
-};