@tangle-network/sandbox-ui 0.48.0 → 0.50.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-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-4HLWA2VN.js → chunk-MGIOO3RL.js}

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

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

@@ -1516,7 +1516,7 @@ function PlanCards({ plans, className }) {
 
 // src/dashboard/dashboard-layout.tsx
 import * as React7 from "react";
-import { Plus as Plus2, Bell } from "lucide-react";
+import { Plus as Plus2, Bell, ChevronsLeft, ChevronsRight } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function SettingsIconSmall({ className }) {
   return /* @__PURE__ */ jsxs13("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
@@ -1571,6 +1571,7 @@ function DashboardLayoutInner({
   contentClassName,
   topNavLinks,
   activeTopNavHref,
+  topBarLeading,
   LinkComponent = DefaultLink2,
   logoHref = "/",
   onLogoClick,
@@ -1621,16 +1622,29 @@ function DashboardLayoutInner({
             className: "p-1 rounded-md transition-colors hover:bg-surface-container-high",
             children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
           }
-        ) : labeledRail ? /* @__PURE__ */ jsx14(
-          "button",
-          {
-            type: "button",
-            onClick: toggleRail,
-            "aria-label": railCollapsed ? "Expand navigation" : "Collapse navigation",
-            "aria-expanded": !railCollapsed,
-            className: "p-1 rounded-md transition-colors hover:bg-surface-container-high",
-            children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true })
-          }
+        ) : allowCollapse ? (
+          // The logo IS the collapse/expand control on the desktop rail
+          // (allowCollapse). The mobile drawer never collapses, so it falls
+          // through to the plain logo link. Expanded: full logotype with a
+          // collapse chevron that fades in on hover. Collapsed: the mark,
+          // with an expand chevron overlay on hover.
+          /* @__PURE__ */ jsxs13(
+            "button",
+            {
+              type: "button",
+              onClick: toggleRail,
+              "aria-label": railCollapsed ? "Expand navigation" : "Collapse navigation",
+              "aria-expanded": !railCollapsed,
+              className: cn(
+                "group/logo relative flex items-center gap-2 rounded-md p-1 transition-colors hover:bg-surface-container-high",
+                showLabels && "w-full"
+              ),
+              children: [
+                /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: !showLabels }),
+                showLabels ? /* @__PURE__ */ jsx14(ChevronsLeft, { className: "ml-auto h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/logo:opacity-100" }) : /* @__PURE__ */ jsx14("span", { className: "absolute inset-0 flex items-center justify-center rounded-md bg-surface-container-high opacity-0 transition-opacity group-hover/logo:opacity-100", children: /* @__PURE__ */ jsx14(ChevronsRight, { className: "h-4 w-4 text-foreground" }) })
+              ]
+            }
+          )
         ) : /* @__PURE__ */ jsx14(
           Link,
           {
@@ -1674,18 +1688,39 @@ function DashboardLayoutInner({
           ] }, item.id);
         }) }),
         /* @__PURE__ */ jsxs13(SidebarRailFooter, { className: cn(showLabels && "items-stretch px-2"), children: [
-          allowCollapse && /* @__PURE__ */ jsx14(
-            RailCollapseToggle,
-            {
-              collapsed: railCollapsed,
-              showLabel: showLabels,
-              onToggle: toggleRail
-            }
-          ),
           onSettingsClick ? /* @__PURE__ */ jsx14(RailButton, { icon: SettingsIconSmall, label: "Settings", onClick: onSettingsClick, showLabel: showLabels }) : /* @__PURE__ */ jsx14(RailButton, { icon: SettingsIconSmall, label: "Settings", showLabel: showLabels, asChild: true, children: /* @__PURE__ */ jsx14(Link, { href: settingsHref, to: settingsHref }) }),
-          railFooter,
           /* @__PURE__ */ jsx14(RailSeparator, { className: showLabels ? "w-full" : void 0 }),
-          /* @__PURE__ */ jsx14(
+          railFooter !== void 0 ? showLabels ? /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-1", children: [
+            /* @__PURE__ */ jsx14("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx14(
+              ProfileAvatar,
+              {
+                user: sidebarUser,
+                isLoading,
+                onLogout,
+                onSettingsClick,
+                settingsHref,
+                showDetails: showLabels,
+                LinkComponent,
+                children: profileMenuItems
+              }
+            ) }),
+            /* @__PURE__ */ jsx14("div", { className: "shrink-0", children: railFooter })
+          ] }) : /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center gap-1", children: [
+            railFooter,
+            /* @__PURE__ */ jsx14(
+              ProfileAvatar,
+              {
+                user: sidebarUser,
+                isLoading,
+                onLogout,
+                onSettingsClick,
+                settingsHref,
+                showDetails: showLabels,
+                LinkComponent,
+                children: profileMenuItems
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx14(
             ProfileAvatar,
             {
               user: sidebarUser,
@@ -1748,6 +1783,7 @@ function DashboardLayoutInner({
         children: [
           /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-8", children: [
             /* @__PURE__ */ jsx14(Link, { href: logoHref, to: logoHref, className: "lg:hidden flex items-center p-1 rounded-md hover:bg-surface-container-high transition-colors", children: /* @__PURE__ */ jsx14(Logo, { variant, size: "sm", iconOnly: true }) }),
+            topBarLeading,
             topNavLinks && topNavLinks.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hidden md:flex gap-6", children: topNavLinks.map((link) => /* @__PURE__ */ jsx14(
               Link,
               {

package/dist/dashboard.d.ts

@@ -688,6 +688,9 @@ interface DashboardLayoutProps {
     contentClassName?: string;
     topNavLinks?: TopNavLink[];
     activeTopNavHref?: string;
+    /** Arbitrary content rendered at the leading (left) edge of the top bar —
+     * e.g. a workspace/team switcher — so consumers don't need a second bar. */
+    topBarLeading?: React.ReactNode;
     LinkComponent?: React.ComponentType<any>;
     /**
      * Where the in-app logo links. Defaults to "/" (backward compatible);

package/dist/dashboard.js

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

package/dist/globals.css

@@ -392,6 +392,9 @@
   .bottom-1 {
     bottom: calc(var(--spacing) * 1);
   }
+  .bottom-1\.5 {
+    bottom: calc(var(--spacing) * 1.5);
+  }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
@@ -437,6 +440,9 @@
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-30 {
     z-index: 30;
   }
@@ -1915,6 +1921,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 +1969,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 +2287,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 +3220,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 +3476,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);
   }
@@ -3605,6 +3632,11 @@
       rotate: 180deg;
     }
   }
+  .group-focus-within\:opacity-100 {
+    &:is(:where(.group):focus-within *) {
+      opacity: 100%;
+    }
+  }
   .group-focus-within\/tip\:translate-x-0 {
     &:is(:where(.group\/tip):focus-within *) {
       --tw-translate-x: calc(var(--spacing) * 0);
@@ -3655,6 +3687,13 @@
       }
     }
   }
+  .group-hover\/logo\:opacity-100 {
+    &:is(:where(.group\/logo):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-hover\/tip\:translate-x-0 {
     &:is(:where(.group\/tip):hover *) {
       @media (hover: hover) {

package/dist/index.js

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

package/dist/integrations.d.ts

@@ -60,6 +60,24 @@ interface IntegrationsPanelProps {
      * thrown error inline.
      */
     onDisconnect: (connectionId: string) => void | Promise<void>;
+    /**
+     * Resolver for a connected app's management page URL. When it returns a URL,
+     * the connected tile's body and the overflow menu's "Manage" item become a
+     * real link opened in a new tab (so cmd/middle-click and "open in new tab"
+     * work). Return undefined to omit Manage for a given connection. Preferred
+     * over `onManage` — only fall back to the callback when the URL must be minted
+     * imperatively on click (e.g. a one-time token).
+     */
+    getManageHref?: (connection: IntegrationConnection) => string | undefined;
+    /**
+     * Imperative fallback for opening a connected app's management page, used only
+     * when `getManageHref` is not supplied (or returns undefined). The consumer is
+     * responsible for opening the page (e.g. `window.open(...)`).
+     */
+    onManage?: (input: {
+        connectionId: string;
+        providerId: string;
+    }) => void | Promise<void>;
     /** Empty-state message when the catalog hasn't loaded any providers. */
     emptyCatalogLabel?: string;
     /**
@@ -72,7 +90,7 @@ interface IntegrationsPanelProps {
     defaultSort?: IntegrationSort;
     className?: string;
 }
-declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, emptyCatalogLabel, featuredIds, defaultSort, className, }: IntegrationsPanelProps): react_jsx_runtime.JSX.Element;
+declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, emptyCatalogLabel, featuredIds, defaultSort, className, }: IntegrationsPanelProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Endpoint contract expected on the consumer app's server (which

package/dist/integrations.js

@@ -16,10 +16,15 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   EmptyState
 } from "@tangle-network/ui/primitives";
 import { cn } from "@tangle-network/ui/utils";
-import { Check, Search, Unplug } from "lucide-react";
+import { Check, ExternalLink, MoreVertical, Search, Unplug } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_FEATURED_IDS = [
   "gmail",
@@ -99,6 +104,8 @@ function IntegrationsPanel({
   error,
   onConnect,
   onDisconnect,
+  getManageHref,
+  onManage,
   emptyCatalogLabel = "No integrations available yet.",
   featuredIds = DEFAULT_FEATURED_IDS,
   defaultSort = "featured",
@@ -252,6 +259,8 @@ function IntegrationsPanel({
       const name = displayNameOf(provider);
       const connected = Boolean(live);
       if (connected && live) {
+        const manageHref = getManageHref?.(live);
+        const canManage = Boolean(manageHref) || Boolean(onManage);
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -259,56 +268,118 @@ function IntegrationsPanel({
             "data-connected": "true",
             title: live.accountDisplay ? `${name} \u2014 ${live.accountDisplay}` : name,
             className: cn(
-              "relative flex aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center",
+              "group relative flex aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center",
               "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"
             ),
             children: [
-              /* @__PURE__ */ jsx("span", { className: "absolute left-2 top-2 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--surface-success-text)] text-white", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3", strokeWidth: 3 }) }),
-              /* @__PURE__ */ jsx(
-                "button",
+              manageHref ? /* @__PURE__ */ jsx(
+                "a",
                 {
-                  type: "button",
-                  onClick: () => setDisconnectTarget({
-                    connectionId: live.id,
-                    name,
-                    accountDisplay: live.accountDisplay
-                  }),
-                  "data-testid": `disconnect-${provider.providerId}`,
-                  "aria-label": `Disconnect ${name}`,
-                  title: "Disconnect",
-                  className: "absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
-                  children: /* @__PURE__ */ jsx(Unplug, { className: "h-3.5 w-3.5" })
+                  href: manageHref,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  "aria-label": `Manage ${name} (opens in new window)`,
+                  "data-testid": `manage-${provider.providerId}`,
+                  className: "absolute inset-0 z-10 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                ProviderIcon,
-                {
-                  id: provider.providerId,
-                  iconUrl: provider.iconUrl,
-                  displayName: provider.displayName,
-                  size: LOGO_SIZE,
-                  className: "rounded-2xl"
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex h-8 w-full flex-col justify-center leading-4", children: [
+              ) : null,
+              /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 top-2 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--surface-success-text)] text-white", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3", strokeWidth: 3 }) }),
+              /* @__PURE__ */ jsxs("div", { className: "pointer-events-none flex flex-col items-center gap-2", children: [
                 /* @__PURE__ */ jsx(
-                  "span",
+                  ProviderIcon,
                   {
-                    className: cn(
-                      "w-full text-xs font-medium text-foreground",
-                      live.accountDisplay ? "truncate" : "line-clamp-2"
-                    ),
-                    children: name
+                    id: provider.providerId,
+                    iconUrl: provider.iconUrl,
+                    displayName: provider.displayName,
+                    size: LOGO_SIZE,
+                    className: "rounded-2xl"
                   }
                 ),
-                live.accountDisplay ? /* @__PURE__ */ jsx(
-                  "span",
+                /* @__PURE__ */ jsxs("div", { className: "flex h-8 w-full flex-col justify-center leading-4", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "w-full text-xs font-medium text-foreground",
+                        live.accountDisplay ? "truncate" : "line-clamp-2"
+                      ),
+                      children: name
+                    }
+                  ),
+                  live.accountDisplay ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "w-full truncate text-[11px] leading-4 text-muted-foreground",
+                      "data-testid": `account-${provider.providerId}`,
+                      children: live.accountDisplay
+                    }
+                  ) : null
+                ] })
+              ] }),
+              manageHref ? /* @__PURE__ */ jsx(
+                ExternalLink,
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute bottom-1.5 right-1.5 h-3.5 w-3.5 text-muted-foreground/70 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    className: "w-full truncate text-[11px] leading-4 text-muted-foreground",
-                    "data-testid": `account-${provider.providerId}`,
-                    children: live.accountDisplay
+                    type: "button",
+                    "data-testid": `menu-${provider.providerId}`,
+                    "aria-label": `More actions for ${name}`,
+                    title: "More actions",
+                    className: "absolute right-1.5 top-1.5 z-20 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                    children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3.5 w-3.5" })
                   }
-                ) : null
+                ) }),
+                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
+                  manageHref ? /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: manageHref,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      "data-testid": `manage-item-${provider.providerId}`,
+                      children: [
+                        /* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }),
+                        " Manage"
+                      ]
+                    }
+                  ) }) : onManage ? /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      "data-testid": `manage-item-${provider.providerId}`,
+                      onClick: () => onManage({
+                        connectionId: live.id,
+                        providerId: provider.providerId
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }),
+                        " Manage"
+                      ]
+                    }
+                  ) : null,
+                  canManage ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+                  /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      "data-testid": `disconnect-${provider.providerId}`,
+                      className: "text-destructive focus:text-destructive",
+                      onClick: () => setDisconnectTarget({
+                        connectionId: live.id,
+                        name,
+                        accountDisplay: live.accountDisplay
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsx(Unplug, { className: "mr-2 h-4 w-4" }),
+                        " Disconnect"
+                      ]
+                    }
+                  )
+                ] })
               ] })
             ]
           },

package/dist/pages.d.ts

@@ -202,7 +202,7 @@ interface ProvisioningConfig {
         key: string;
         value: string;
     }[];
-    driver: "docker" | "firecracker" | "host-agent-docker" | "host-agent-firecracker" | "tangle";
+    driver: "docker" | "firecracker" | "host-agent" | "tangle";
     bare: boolean;
     startupScriptIds?: string[];
 }

package/dist/styles.css

@@ -392,6 +392,9 @@
   .bottom-1 {
     bottom: calc(var(--spacing) * 1);
   }
+  .bottom-1\.5 {
+    bottom: calc(var(--spacing) * 1.5);
+  }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
   }
@@ -437,6 +440,9 @@
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-30 {
     z-index: 30;
   }
@@ -1915,6 +1921,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 +1969,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 +2287,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 +3220,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 +3476,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);
   }
@@ -3605,6 +3632,11 @@
       rotate: 180deg;
     }
   }
+  .group-focus-within\:opacity-100 {
+    &:is(:where(.group):focus-within *) {
+      opacity: 100%;
+    }
+  }
   .group-focus-within\/tip\:translate-x-0 {
     &:is(:where(.group\/tip):focus-within *) {
       --tw-translate-x: calc(var(--spacing) * 0);
@@ -3655,6 +3687,13 @@
       }
     }
   }
+  .group-hover\/logo\:opacity-100 {
+    &:is(:where(.group\/logo):hover *) {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
   .group-hover\/tip\:translate-x-0 {
     &:is(:where(.group\/tip):hover *) {
       @media (hover: hover) {

package/dist/workbench.js

@@ -12,9 +12,9 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-4HLWA2VN.js";
+} from "./chunk-MGIOO3RL.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-3WUSPCPC.js";
+import "./chunk-RT4MLYYM.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.48.0",
+  "version": "0.50.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
-};