@tangle-network/sandbox-ui 0.74.0 → 0.76.0

package/dist/WorkflowGraph-64XJBIW2.js

@@ -1,555 +0,0 @@
-import {
-  ProviderIcon
-} from "./chunk-GTJ5PSK5.js";
-import {
-  COMPACT_NODE_SIZE,
-  buildWorkflowGraph,
-  providerLabel
-} from "./chunk-VXGI2XUK.js";
-import "./chunk-U67V476Y.js";
-
-// src/workflows/WorkflowGraph.tsx
-import {
-  Background,
-  Controls,
-  Handle,
-  MarkerType,
-  Panel,
-  Position as Position2,
-  ReactFlow,
-  useEdgesState,
-  useNodesState
-} from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
-import {
-  Bell,
-  Box,
-  Cable,
-  Circle,
-  Clock,
-  Maximize2,
-  Minimize2,
-  Repeat,
-  Sparkles,
-  Split,
-  Webhook
-} from "lucide-react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-
-// src/workflows/flow-graph.ts
-import { Position } from "@xyflow/react";
-function normalizeFlowGraphOptions(arg) {
-  if (!arg) return {};
-  if ("nodeState" in arg || "direction" in arg || "compact" in arg || "measure" in arg) {
-    return arg;
-  }
-  return { nodeState: arg };
-}
-function buildFlowGraph(yaml, optionsOrNodeState) {
-  const options = normalizeFlowGraphOptions(optionsOrNodeState);
-  const nodeState = options.nodeState;
-  const direction = options.direction ?? "LR";
-  const compact = options.compact ?? false;
-  const graph = buildWorkflowGraph(yaml, {
-    reserveRunState: nodeState !== void 0,
-    direction,
-    // Compact nodes are a fixed size; otherwise honor the caller's `measure` (or
-    // fall back to the default content sizing).
-    measure: compact ? () => COMPACT_NODE_SIZE : options?.measure
-  });
-  const isLR = direction === "LR";
-  const sourcePosition = isLR ? Position.Right : Position.Bottom;
-  const targetPosition = isLR ? Position.Left : Position.Top;
-  return {
-    error: graph.error,
-    nodes: graph.nodes.map(
-      (n) => ({
-        id: n.id,
-        type: "wfNode",
-        position: n.position,
-        width: n.width,
-        height: n.height,
-        // Fix the DOM box to the laid-out size so the card can't grow past its
-        // reserved space and overlap a neighbour (see model.ts nodeHeight).
-        style: { width: n.width, height: n.height },
-        sourcePosition,
-        targetPosition,
-        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,
-      type: "smoothstep"
-    }))
-  };
-}
-function sameRunState(a, b) {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) return false;
-  return aKeys.every((k) => a[k] === b[k]);
-}
-function mergeRunState(prev, baseDataById, nodeState) {
-  return prev.map((n) => {
-    const base = baseDataById.get(n.id) ?? n.data;
-    const s = nodeState?.[n.id];
-    const nextData = s ? { ...base, state: s } : base;
-    return sameRunState(n.data.state, nextData.state) ? n : { ...n, data: nextData };
-  });
-}
-
-// 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 { Fragment, 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 DirectionContext = createContext("LR");
-var TONE_ACCENT = {
-  trigger: "hsl(var(--primary))",
-  structural: "var(--surface-warning-text)",
-  action: "hsl(var(--muted-foreground))"
-};
-var EDGE_MUTED = "hsl(var(--muted-foreground))";
-var EDGE_DONE = "#22c55e";
-var EDGE_FAIL = "#ef4444";
-var EDGE_RUNNING = "hsl(var(--primary))";
-var STATUS_COLOR = {
-  queued: EDGE_MUTED,
-  running: EDGE_RUNNING,
-  succeeded: EDGE_DONE,
-  failed: EDGE_FAIL
-};
-var DensityContext = createContext(false);
-var KIND_ICON = {
-  schedule: Clock,
-  provider_event: Webhook,
-  trigger: Webhook,
-  "agent.run": Sparkles,
-  "integration.invoke": Cable,
-  notify: Bell,
-  parallel: Split,
-  foreach: Repeat,
-  "sandbox.spawn": Box
-};
-function NodeIcon({
-  kind,
-  accent,
-  box,
-  glyph
-}) {
-  const Icon = kind && KIND_ICON[kind] || Circle;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: "flex shrink-0 items-center justify-center rounded-md",
-      style: {
-        width: box,
-        height: box,
-        background: `color-mix(in srgb, ${accent} 16%, transparent)`,
-        color: accent
-      },
-      children: /* @__PURE__ */ jsx(Icon, { size: glyph, strokeWidth: 2 })
-    }
-  );
-}
-function ProgressStrip({
-  status,
-  rounds,
-  elapsed
-}) {
-  const color = STATUS_COLOR[status];
-  const fill = status === "succeeded" || status === "failed" ? "100%" : status === "running" ? "58%" : "6%";
-  const roundsLabel = rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: "mt-1.5", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "h-1 w-full overflow-hidden rounded-full",
-        style: {
-          background: "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)"
-        },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `h-full rounded-full ${status === "running" ? "animate-pulse" : ""}`,
-            style: { width: fill, background: color }
-          }
-        )
-      }
-    ),
-    (roundsLabel || elapsed) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between text-[9px] text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { className: "truncate", children: roundsLabel ?? "" }),
-      elapsed && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: elapsed })
-    ] })
-  ] });
-}
-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-surface-container-high text-muted-foreground",
-  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-1 ring-primary/40";
-    case "succeeded":
-      return "border-green-500";
-    case "failed":
-      return "border-red-500";
-    default:
-      return "opacity-70";
-  }
-}
-function MetaChip({ children, title }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      title,
-      className: "inline-block max-w-[150px] truncate rounded bg-surface-container-high px-1.5 py-0.5 align-middle text-[10px] text-muted-foreground",
-      children
-    }
-  );
-}
-function WorkflowNode({ data }) {
-  const d = data;
-  const state = d.state;
-  const direction = useContext(DirectionContext);
-  const compact = useContext(DensityContext);
-  const isLR = direction === "LR";
-  const targetPos = isLR ? Position2.Left : Position2.Top;
-  const sourcePos = isLR ? Position2.Right : Position2.Bottom;
-  const accent = TONE_ACCENT[d.tone];
-  const isAgent = d.kind === "agent.run";
-  const model = state?.model ?? d.model;
-  const duration = fmtDuration(state?.durationMs);
-  const cost = fmtCost(state?.costUsd);
-  const tokens = isAgent ? fmtTokens(state?.inputTokens, state?.outputTokens) : void 0;
-  const errorText = state?.error ? clampPreview(state.error) : void 0;
-  const outputText = state?.outputPreview ? clampPreview(state.outputPreview) : void 0;
-  const wrapperClass = `relative flex h-full w-full flex-col overflow-hidden rounded-lg border bg-card shadow-sm transition-colors ${state ? statusBorder(state.status) : ""}`;
-  const wrapperStyle = state ? state.status === "running" ? { boxShadow: "0 0 22px -6px hsl(var(--primary))" } : void 0 : {
-    borderColor: `color-mix(in srgb, ${accent} 42%, transparent)`,
-    backgroundColor: `color-mix(in srgb, ${accent} 6%, hsl(var(--card)))`
-  };
-  const handles = /* @__PURE__ */ jsxs(Fragment, { children: [
-    !d.isRoot && /* @__PURE__ */ jsx(Handle, { type: "target", position: targetPos, className: HANDLE_CLASS }),
-    /* @__PURE__ */ jsx(Handle, { type: "source", position: sourcePos, className: HANDLE_CLASS })
-  ] });
-  if (compact) {
-    return /* @__PURE__ */ jsxs("div", { className: `${wrapperClass} justify-center px-2.5`, style: wrapperStyle, children: [
-      handles,
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsx(NodeIcon, { kind: d.kind, accent, box: 32, glyph: 16 }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-[12px] text-foreground", children: d.title }),
-            state ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "ml-auto h-1.5 w-1.5 shrink-0 rounded-full",
-                style: { backgroundColor: STATUS_COLOR[state.status] }
-              }
-            ) : d.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 rounded bg-surface-container-high px-1 py-0.5 text-[9px] text-muted-foreground", children: d.badge })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: model ?? d.subtitle ?? d.kind }),
-            cost && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0", children: cost }),
-            duration && /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
-              "\xB7 ",
-              duration
-            ] })
-          ] })
-        ] })
-      ] }),
-      state?.status === "running" && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "mt-1.5 h-0.5 w-full overflow-hidden rounded-full",
-          style: { background: "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)" },
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "h-full w-1/2 animate-pulse rounded-full",
-              style: { background: EDGE_RUNNING }
-            }
-          )
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: `${wrapperClass} px-3 py-2`, style: wrapperStyle, children: [
-    handles,
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(NodeIcon, { kind: d.kind, accent, box: 24, glyph: 14 }),
-      /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-[12px] text-foreground", children: d.title }),
-      state ? /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: `ml-auto shrink-0 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 shrink-0 rounded bg-surface-container-high px-1.5 py-0.5 text-[10px] text-muted-foreground", children: d.badge })
-    ] }),
-    d.subtitle && /* @__PURE__ */ jsx(
-      "p",
-      {
-        className: "mt-1 truncate text-[11px] text-muted-foreground",
-        title: d.subtitle,
-        children: d.subtitle
-      }
-    ),
-    (model || cost || tokens) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: [
-      model && /* @__PURE__ */ jsx(MetaChip, { title: model, children: model }),
-      cost && /* @__PURE__ */ jsx(MetaChip, { children: cost }),
-      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-muted-foreground",
-        title: outputText,
-        children: outputText
-      }
-    ),
-    state && d.tone !== "trigger" && /* @__PURE__ */ jsx(
-      ProgressStrip,
-      {
-        status: state.status,
-        rounds: isAgent ? state.rounds : void 0,
-        elapsed: duration
-      }
-    ),
-    d.provider && /* @__PURE__ */ jsxs("span", { className: "mt-1.5 inline-flex w-fit items-center gap-1 rounded bg-surface-container-high px-1.5 py-0.5 text-[10px] text-muted-foreground", children: [
-      /* @__PURE__ */ jsx(
-        ProviderIcon,
-        {
-          id: d.provider,
-          displayName: providerLabel(d.provider),
-          size: 12,
-          className: "rounded-[2px]"
-        }
-      ),
-      providerLabel(d.provider)
-    ] })
-  ] });
-}
-var NODE_TYPES = { wfNode: WorkflowNode };
-function edgeColor(status) {
-  switch (status) {
-    case "running":
-      return EDGE_RUNNING;
-    case "succeeded":
-      return EDGE_DONE;
-    case "failed":
-      return EDGE_FAIL;
-    default:
-      return EDGE_MUTED;
-  }
-}
-function buildStyledEdges(base, nodeState) {
-  return base.map((e) => {
-    const status = nodeState?.[e.target]?.status;
-    const color = edgeColor(nodeState ? status : void 0);
-    return {
-      ...e,
-      // The active hop flows; everything else is static.
-      animated: status === "running",
-      style: { strokeWidth: 1.75, stroke: color },
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-        width: 15,
-        height: 15,
-        color
-      }
-    };
-  });
-}
-function WorkflowGraph({
-  yaml,
-  variant = "full",
-  direction = "LR",
-  defaultCompact = false,
-  className,
-  nodeState,
-  onNodeClick
-}) {
-  const colorMode = useColorMode();
-  const isPreview = variant === "preview";
-  const [userCompact, setUserCompact] = useState(defaultCompact);
-  const compact = isPreview || userCompact;
-  const rfRef = useRef(null);
-  const hasRunOverlay = nodeState !== void 0;
-  const structural = useMemo(
-    () => buildFlowGraph(yaml, {
-      nodeState: hasRunOverlay ? {} : void 0,
-      direction,
-      compact
-    }),
-    [yaml, hasRunOverlay, direction, compact]
-  );
-  const styledEdges = useMemo(
-    () => buildStyledEdges(structural.edges, nodeState),
-    [structural.edges, nodeState]
-  );
-  const [nodes, setNodes, onNodesChange] = useNodesState(structural.nodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(styledEdges);
-  useEffect(() => {
-    setNodes(structural.nodes);
-  }, [structural, setNodes]);
-  useEffect(() => {
-    setEdges(styledEdges);
-  }, [styledEdges, setEdges]);
-  useEffect(() => {
-    const baseById = new Map(structural.nodes.map((n) => [n.id, n.data]));
-    setNodes((prev) => mergeRunState(prev, baseById, nodeState));
-  }, [nodeState, structural, setNodes]);
-  const didInitialFitRef = useRef(false);
-  useEffect(() => {
-    if (!didInitialFitRef.current) {
-      didInitialFitRef.current = true;
-      return;
-    }
-    const inst = rfRef.current;
-    if (!inst || typeof requestAnimationFrame === "undefined") return;
-    const raf = requestAnimationFrame(() => inst.fitView({ padding: 0.18 }));
-    return () => cancelAnimationFrame(raf);
-  }, [structural]);
-  const handleNodeClick = useCallback(
-    (_event, node) => {
-      onNodeClick?.(node.id, node.data);
-    },
-    [onNodeClick]
-  );
-  if (structural.error || structural.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-muted-foreground text-xs ${className ?? ""}`,
-        children: structural.error ?? "Nothing to show"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx(DensityContext.Provider, { value: compact, children: /* @__PURE__ */ jsx("div", { className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs(
-    ReactFlow,
-    {
-      nodes,
-      edges,
-      onNodesChange,
-      onEdgesChange,
-      nodeTypes: NODE_TYPES,
-      colorMode,
-      onInit: (inst) => {
-        rfRef.current = inst;
-      },
-      onNodeClick: onNodeClick ? handleNodeClick : void 0,
-      fitView: true,
-      fitViewOptions: { padding: 0.18 },
-      proOptions: { hideAttribution: true },
-      nodesDraggable: !isPreview,
-      nodesConnectable: false,
-      deleteKeyCode: null,
-      edgesReconnectable: 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: 18 }),
-        !isPreview && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Controls, { showInteractive: false, position: "bottom-right" }),
-          /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setUserCompact((c) => !c),
-              "aria-pressed": userCompact,
-              title: userCompact ? "Expand nodes" : "Collapse nodes",
-              className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
-              children: [
-                userCompact ? /* @__PURE__ */ jsx(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx(Minimize2, { size: 12 }),
-                userCompact ? "Expand" : "Compact"
-              ]
-            }
-          ) })
-        ] })
-      ]
-    }
-  ) }) }) });
-}
-export {
-  DensityContext,
-  DirectionContext,
-  WorkflowGraph,
-  WorkflowNode,
-  buildStyledEdges
-};