@tangle-network/sandbox-ui 0.94.2 → 0.95.0

package/dist/{WorkflowGraph-4TQFLY3E.js → WorkflowGraph-MPNVC5FE.js}

@@ -2,19 +2,22 @@ import {
   ProviderIcon
 } from "./chunk-GTJ5PSK5.js";
 import {
+  ACTION_OUTPUT_ROWS,
+  AGENT_BODY_ROWS,
   COMPACT_NODE_SIZE,
   COMPACT_TILE,
   OUTPUT_PREVIEW_CHARS,
-  OUTPUT_ROWS,
+  STRUCTURAL_OUTPUT_ROWS,
   buildWorkflowGraph,
   clampPreview,
   fmtCost,
   fmtDuration,
   fmtTokens,
+  isStructuralKind,
   providerLabel,
   shortModel,
   triggerNodeIndex
-} from "./chunk-7QKAVIZX.js";
+} from "./chunk-O7MHUR4U.js";
 import {
   ModelBrandStack,
   modelBrandFor
@@ -28,7 +31,6 @@ import {
   BaseEdge,
   Controls,
   EdgeLabelRenderer,
-  getNodesBounds,
   getSmoothStepPath,
   getViewportForBounds,
   Handle,
@@ -54,6 +56,12 @@ import {
 // src/workflows/flow-graph.ts
 import { Position } from "@xyflow/react";
 var WF_EDGE_TYPE = "wfEdge";
+var SIDE_POSITION = {
+  left: Position.Left,
+  right: Position.Right,
+  top: Position.Top,
+  bottom: Position.Bottom
+};
 function isNodeStateMap(arg) {
   const values = Object.values(arg);
   return values.length > 0 && values.every(
@@ -62,7 +70,7 @@ function isNodeStateMap(arg) {
 }
 function normalizeFlowGraphOptions(arg) {
   if (!arg) return {};
-  if ("nodeState" in arg || "direction" in arg || "compact" in arg || "edges" in arg) {
+  if ("nodeState" in arg || "direction" in arg || "compact" in arg || "wrap" in arg || "edges" in arg) {
     return arg;
   }
   return isNodeStateMap(arg) ? { nodeState: arg } : {};
@@ -76,6 +84,7 @@ function buildFlowGraph(yaml, optionsOrNodeState) {
     reserveRunState: nodeState !== void 0,
     direction,
     compact,
+    ...options.wrap ? { wrap: true } : {},
     ...options.edges ? { edges: options.edges } : {}
   });
   const isLR = direction === "LR";
@@ -100,8 +109,11 @@ function buildFlowGraph(yaml, optionsOrNodeState) {
         // 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,
+        // A folded layout names each node's own sides (a mirrored row, a corner
+        // that leaves downward); a straight one names none and takes the
+        // direction's answer for every node.
+        sourcePosition: n.sourceSide ? SIDE_POSITION[n.sourceSide] : sourcePosition,
+        targetPosition: n.targetSide ? SIDE_POSITION[n.targetSide] : targetPosition,
         data: nodeState?.[n.id] ? { ...n.data, state: nodeState[n.id] } : n.data
       })
     ),
@@ -203,19 +215,23 @@ function classifyOutput(preview, condenseMarkdown = false) {
 var CLAMP_BY_ROWS = {
   1: "truncate",
   2: "line-clamp-2",
-  3: "line-clamp-3"
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
 };
 function NodeOutputBody({
   shape,
   rows = 2,
   tone = "default"
 }) {
-  const clampClass = CLAMP_BY_ROWS[rows] ?? "line-clamp-2";
+  const unclamped = rows === "none";
+  const clampClass = unclamped ? "" : CLAMP_BY_ROWS[rows] ?? "line-clamp-2";
   const codeWrap = rows === 1 ? "" : "whitespace-pre-wrap break-all";
   if (shape.kind === "empty") return null;
   if (shape.kind === "json") {
-    const overflow = shape.truncated || shape.entries.length > rows;
-    const visible = shape.entries.slice(0, overflow ? Math.max(0, rows - 1) : rows);
+    const overflow = unclamped ? shape.truncated : shape.truncated || shape.entries.length > rows;
+    const visible = unclamped ? shape.entries : shape.entries.slice(0, overflow ? Math.max(0, rows - 1) : rows);
     const isError = tone === "error";
     const keyStyle = isError ? ERROR_TEXT : void 0;
     const keyClass = isError ? "" : "text-muted-foreground";
@@ -283,7 +299,8 @@ import {
   Webhook,
   Zap
 } from "lucide-react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
 var TONE_ACCENT = {
   trigger: "hsl(var(--primary))",
   structural: "var(--surface-warning-text)",
@@ -378,6 +395,62 @@ var KIND_ICON = {
   "script.run": Code,
   "trace.analyze": ScanSearch
 };
+function StatusPill({ status }) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: "shrink-0 whitespace-nowrap rounded-full border px-2 py-[1px] font-medium text-[10px]",
+      style: STATUS_PILL[status],
+      children: STATUS_LABEL[status]
+    }
+  );
+}
+function StatusFooter({
+  status,
+  rounds,
+  cost,
+  tokens,
+  elapsed
+}) {
+  const roundsLabel = rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0;
+  const caption = [roundsLabel, cost, tokens].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs2("div", { className: "wf-node-body-in mt-auto border-border border-t", children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "h-1 w-full overflow-hidden",
+        style: { background: MUTED_TRACK },
+        children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "data-testid": "wf-node-progress",
+            className: `h-full ${status === "running" ? "animate-pulse" : ""}`,
+            style: {
+              width: progressFill(status),
+              background: STATUS_COLOR[status]
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-3.5 py-1 text-[10px] text-muted-foreground leading-[15px]", children: [
+      /* @__PURE__ */ jsx2("span", { className: "min-h-[15px] truncate tabular-nums", children: caption }),
+      /* @__PURE__ */ jsx2("span", { className: "min-h-[15px] shrink-0 tabular-nums", children: elapsed ?? "" })
+    ] })
+  ] });
+}
+function emptySlotLabel(status) {
+  switch (status) {
+    case "queued":
+      return "Not run yet";
+    case "succeeded":
+      return "No output";
+    case "failed":
+      return "No error reported";
+    default:
+      return void 0;
+  }
+}
 function NodeMark({
   kind,
   provider,
@@ -425,12 +498,44 @@ function NodeMark({
 }
 
 // src/workflows/WorkflowGraph.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
-var FIT_VIEW = { padding: 0.16, minZoom: 0.55 };
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var FIT_VIEW = { padding: 0.16 };
 function fitZoomCeiling(compact) {
   return compact ? 1.5 : 1;
 }
+function fitZoomFloor(compact) {
+  return compact ? 0.55 : 0.35;
+}
+function layoutBounds(nodes) {
+  if (nodes.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const node of nodes) {
+    minX = Math.min(minX, node.position.x);
+    minY = Math.min(minY, node.position.y);
+    maxX = Math.max(maxX, node.position.x + (node.width ?? 0));
+    maxY = Math.max(maxY, node.position.y + (node.height ?? 0));
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function framingViewport(bounds, width, height, compact) {
+  const fit = getViewportForBounds(
+    bounds,
+    width,
+    height,
+    fitZoomFloor(compact),
+    fitZoomCeiling(compact),
+    FIT_VIEW.padding
+  );
+  const anchored = (offset, origin) => offset + Math.max(0, -(offset + origin * fit.zoom));
+  return {
+    zoom: fit.zoom,
+    x: anchored(fit.x, bounds.x),
+    y: anchored(fit.y, bounds.y)
+  };
+}
 var LAYOUT_TRANSITION_MS = 220;
 var DENSITY_FLIP_AT = { grow: 0.12, shrink: 0.75 };
 function motionAllowed() {
@@ -455,6 +560,7 @@ function useColorMode() {
 var DirectionContext = createContext("LR");
 var DensityContext = createContext(false);
 var SelectedNodeContext = createContext(void 0);
+var RunModeContext = createContext(false);
 var SELECTION_OUTLINE = {
   outline: "2px solid hsl(var(--primary))",
   outlineOffset: 2
@@ -463,59 +569,6 @@ var ConnectableContext = createContext(false);
 function isEditableEdge(edge) {
   return edge.data?.kind !== "fork" && triggerNodeIndex(edge.source) === null;
 }
-function StatusFooter({
-  status,
-  rounds,
-  elapsed
-}) {
-  const roundsLabel = rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0;
-  return /* @__PURE__ */ jsxs2("div", { className: "wf-node-body-in mt-auto border-border border-t", children: [
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: "h-1 w-full overflow-hidden",
-        style: { background: MUTED_TRACK },
-        children: /* @__PURE__ */ jsx3(
-          "div",
-          {
-            "data-testid": "wf-node-progress",
-            className: `h-full ${status === "running" ? "animate-pulse" : ""}`,
-            style: {
-              width: progressFill(status),
-              background: STATUS_COLOR[status]
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-3.5 py-1 text-[10px] text-muted-foreground leading-[15px]", children: [
-      /* @__PURE__ */ jsx3("span", { className: "min-h-[15px] truncate", children: roundsLabel ?? "" }),
-      /* @__PURE__ */ jsx3("span", { className: "min-h-[15px] shrink-0 tabular-nums", children: elapsed ?? "" })
-    ] })
-  ] });
-}
-function emptySlotLabel(status) {
-  switch (status) {
-    case "queued":
-      return "Not run yet";
-    case "succeeded":
-      return "No output";
-    case "failed":
-      return "No error reported";
-    default:
-      return void 0;
-  }
-}
-function StatusPill({ status }) {
-  return /* @__PURE__ */ jsx3(
-    "span",
-    {
-      className: "shrink-0 rounded-full border px-2 py-[1px] font-medium text-[10px]",
-      style: STATUS_PILL[status],
-      children: STATUS_LABEL[status]
-    }
-  );
-}
 var HANDLE_CLASS = "!h-2 !w-2 !min-w-0 !border-0 !bg-transparent opacity-0";
 var HANDLE_CONNECTABLE_CLASS = "!h-2.5 !w-2.5 !min-w-0 !rounded-full !border !border-border !bg-muted-foreground/70 opacity-100 transition-opacity hover:!bg-primary";
 function compactHandleStyle(position, isLR) {
@@ -539,22 +592,32 @@ function compactHandleStyle(position, isLR) {
       return anchor(tileLeft + center, COMPACT_TILE);
   }
 }
-function WorkflowNode({ id, data }) {
+function WorkflowNode({
+  id,
+  data,
+  // Set only where the LAYOUT decides a node's own sides — a folded row that
+  // runs right-to-left, or the step that turns the corner and leaves downward.
+  // A straight layer flow leaves them to the direction, below.
+  sourcePosition,
+  targetPosition
+}) {
   const d = data;
   const state = d.state;
   const direction = useContext(DirectionContext);
   const compact = useContext(DensityContext);
+  const runMode = useContext(RunModeContext);
   const connectable = useContext(ConnectableContext);
   const hostSelection = useContext(SelectedNodeContext);
   const selected = hostSelection !== void 0 && hostSelection === id;
   const isLR = direction === "LR";
-  const targetPos = isLR ? Position2.Left : Position2.Top;
-  const sourcePos = isLR ? Position2.Right : Position2.Bottom;
+  const targetPos = targetPosition ?? (isLR ? Position2.Left : Position2.Top);
+  const sourcePos = sourcePosition ?? (isLR ? Position2.Right : Position2.Bottom);
   const accent = TONE_ACCENT[d.tone];
   const isAgent = d.kind === "agent.run";
   const subtitle = isAgent && state?.model ? shortModel(state.model) : d.subtitle;
   const markModel = isAgent && state?.model ? state.model : d.model;
-  const runBands = state !== void 0 && d.tone !== "trigger";
+  const runBands = runMode && d.tone !== "trigger";
+  const runStatus = runBands ? state?.status ?? "queued" : state?.status;
   const duration = fmtDuration(state?.durationMs);
   const cost = fmtCost(state?.costUsd);
   const tokens = isAgent ? fmtTokens(state?.inputTokens, state?.outputTokens) : void 0;
@@ -574,7 +637,7 @@ function WorkflowNode({ id, data }) {
     return shape.kind === "empty" ? null : { shape, tone: source.tone, label: source.label };
   })();
   const handleClass = connectable ? HANDLE_CONNECTABLE_CLASS : HANDLE_CLASS;
-  const handles = /* @__PURE__ */ jsxs2(Fragment, { children: [
+  const handles = /* @__PURE__ */ jsxs3(Fragment, { children: [
     !d.isRoot && /* @__PURE__ */ jsx3(
       Handle,
       {
@@ -595,13 +658,13 @@ function WorkflowNode({ id, data }) {
     )
   ] });
   if (compact) {
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3(
       "div",
       {
         className: `relative flex h-full w-full ${isLR ? "flex-col items-center" : "flex-row items-center"}`,
         children: [
           handles,
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs3(
             "span",
             {
               className: "relative flex items-center justify-center rounded-xl border bg-card shadow-sm transition-colors",
@@ -641,7 +704,7 @@ function WorkflowNode({ id, data }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs3(
             "div",
             {
               className: `wf-node-body-in min-w-0 ${isLR ? "mt-2 w-full px-1 text-center" : "ml-2 flex-1 text-left"}`,
@@ -670,82 +733,250 @@ function WorkflowNode({ id, data }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs2(
+  const cardShell = (children) => /* @__PURE__ */ jsxs3(
     "div",
     {
       className: "relative flex h-full w-full flex-col overflow-hidden rounded-xl border bg-card shadow-sm transition-colors",
       style: {
-        ...state ? statusBorder(state.status) : {
+        ...runStatus ? statusBorder(runStatus) : {
           borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
         },
         ...selected ? SELECTION_OUTLINE : {}
       },
       children: [
         handles,
-        /* @__PURE__ */ jsxs2("div", { className: "wf-node-body-in flex min-h-0 flex-1 flex-col overflow-hidden px-3.5 pt-2.5 pb-2", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-2.5", children: [
-            /* @__PURE__ */ jsx3(
-              NodeMark,
+        children
+      ]
+    }
+  );
+  const identityRow = /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-2.5", children: [
+    /* @__PURE__ */ jsx3(
+      NodeMark,
+      {
+        kind: d.kind,
+        provider: d.provider,
+        model: markModel,
+        accent,
+        tile: 34
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "truncate font-semibold text-[13px] text-foreground leading-tight",
+          title: d.title,
+          children: d.title
+        }
+      ),
+      subtitle && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "truncate text-[11px] text-muted-foreground leading-tight",
+          title: subtitle,
+          children: subtitle
+        }
+      )
+    ] }),
+    runStatus ? /* @__PURE__ */ jsx3(StatusPill, { status: runStatus }) : d.badge && /* @__PURE__ */ jsx3("span", { className: "shrink-0 rounded-full border border-border bg-surface-container-high px-2 py-[1px] font-medium text-[10px] text-muted-foreground", children: d.badge })
+  ] });
+  const footer = runStatus ? /* @__PURE__ */ jsx3(
+    StatusFooter,
+    {
+      status: runStatus,
+      rounds: isAgent ? state?.rounds : void 0,
+      cost,
+      tokens,
+      elapsed: duration
+    }
+  ) : null;
+  const descriptionBand = (emphasized) => d.description ? /* @__PURE__ */ jsx3(
+    "p",
+    {
+      className: `mt-2 line-clamp-2 shrink-0 text-[11px] leading-snug ${emphasized ? "text-foreground" : "text-muted-foreground"}`,
+      title: d.description,
+      children: d.description
+    }
+  ) : null;
+  const emptySlot = runStatus && !runOutput && emptySlotLabel(runStatus) ? /* @__PURE__ */ jsx3("div", { className: "mt-2 flex flex-1 items-center text-[11px] text-muted-foreground italic", children: emptySlotLabel(runStatus) }) : null;
+  const outputWell = (rows) => runOutput ? /* @__PURE__ */ jsxs3("div", { className: "mt-2 min-h-0 grow shrink-0 rounded-lg border border-border bg-surface-container-high/60 px-2 py-1.5", children: [
+    /* @__PURE__ */ jsx3("div", { className: "mb-1 font-semibold text-[9px] text-muted-foreground uppercase tracking-[0.09em]", children: runOutput.label }),
+    /* @__PURE__ */ jsx3(
+      NodeOutputBody,
+      {
+        shape: runOutput.shape,
+        tone: runOutput.tone,
+        rows
+      }
+    )
+  ] }) : emptySlot;
+  const body = (children, justify = "") => (
+    /* The content region owns its overflow: each band is `shrink-0`, so a band
+       that renders taller than its reservation (a consumer's font metrics) is
+       CLIPPED here rather than squeezed — a squeezed band cuts a line of text
+       in half, and pushes the pinned footer off the card. Fades in when the
+       density swap lands mid layout-morph; the card's border/surface (the
+       root) stays opaque so the node never blinks out. */
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `wf-node-body-in flex min-h-0 flex-1 flex-col overflow-hidden px-3.5 pt-2.5 pb-2 ${justify}`,
+        children
+      }
+    )
+  );
+  if (!runBands) {
+    return cardShell(body(
+      /* @__PURE__ */ jsxs3(Fragment, { children: [
+        identityRow,
+        descriptionBand(false)
+      ] })
+    ));
+  }
+  if (d.kind === "decision") {
+    return cardShell(
+      /* @__PURE__ */ jsxs3(Fragment, { children: [
+        body(
+          /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-start gap-2.5", children: [
+              /* @__PURE__ */ jsx3(
+                NodeMark,
+                {
+                  kind: d.kind,
+                  provider: d.provider,
+                  model: markModel,
+                  accent,
+                  tile: 34
+                }
+              ),
+              /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: "truncate font-semibold text-[13px] text-foreground leading-tight",
+                    title: d.title,
+                    children: d.title
+                  }
+                ),
+                /* @__PURE__ */ jsxs3("div", { className: "mt-0.5 flex items-center gap-2", children: [
+                  subtitle && /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      className: "truncate text-[11px] text-muted-foreground leading-tight",
+                      title: subtitle,
+                      children: subtitle
+                    }
+                  ),
+                  runStatus && /* @__PURE__ */ jsx3("span", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx3(StatusPill, { status: runStatus }) })
+                ] })
+              ] })
+            ] }),
+            runOutput && runStatus === "failed" ? /* @__PURE__ */ jsx3("div", { className: "mt-2 min-h-0 shrink-0", children: /* @__PURE__ */ jsx3(
+              NodeOutputBody,
               {
-                kind: d.kind,
-                provider: d.provider,
-                model: markModel,
-                accent,
-                tile: 34
+                shape: runOutput.shape,
+                tone: runOutput.tone,
+                rows: 2
               }
-            ),
-            /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+            ) }) : descriptionBand(true)
+          ] })
+        ),
+        footer
+      ] })
+    );
+  }
+  if (isStructuralKind(d.kind)) {
+    return cardShell(
+      /* @__PURE__ */ jsxs3(Fragment, { children: [
+        body(
+          /* @__PURE__ */ jsxs3(Fragment, { children: [
+            identityRow,
+            /* @__PURE__ */ jsx3("div", { className: "mt-1.5 min-h-0 shrink-0", children: runOutput && /* @__PURE__ */ jsx3(
+              NodeOutputBody,
+              {
+                shape: runOutput.shape,
+                tone: runOutput.tone,
+                rows: STRUCTURAL_OUTPUT_ROWS
+              }
+            ) })
+          ] }),
+          // Centered, because the failure slot is empty on every run that does
+          // NOT fail — which is most of them. Reserved space it cannot give back
+          // (the layout is fixed before the run) reads as a gap under a
+          // top-aligned row, and as breathing room around a centered one.
+          "justify-center"
+        ),
+        footer
+      ] })
+    );
+  }
+  if (isAgent) {
+    const strip = [d.title, subtitle].filter(Boolean).join(" \xB7 ");
+    return cardShell(
+      /* @__PURE__ */ jsxs3(Fragment, { children: [
+        body(
+          /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-1.5", children: [
               /* @__PURE__ */ jsx3(
-                "div",
+                NodeMark,
                 {
-                  className: "truncate font-semibold text-[13px] text-foreground leading-tight",
-                  title: d.title,
-                  children: d.title
+                  kind: d.kind,
+                  provider: d.provider,
+                  model: markModel,
+                  accent,
+                  tile: 18
                 }
               ),
-              subtitle && /* @__PURE__ */ jsx3(
-                "div",
+              /* @__PURE__ */ jsx3(
+                "span",
                 {
-                  className: "truncate text-[11px] text-muted-foreground leading-tight",
-                  title: subtitle,
-                  children: subtitle
+                  className: "truncate font-medium text-[11px] text-muted-foreground",
+                  title: strip,
+                  children: strip
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx3("span", { className: "flex-1" }),
+              runStatus && /* @__PURE__ */ jsx3(StatusPill, { status: runStatus })
             ] }),
-            state ? /* @__PURE__ */ jsx3(StatusPill, { status: state.status }) : d.badge && /* @__PURE__ */ jsx3("span", { className: "shrink-0 rounded-full border border-border bg-surface-container-high px-2 py-[1px] font-medium text-[10px] text-muted-foreground", children: d.badge })
-          ] }),
-          d.description && /* @__PURE__ */ jsx3(
-            "p",
-            {
-              className: "mt-2 line-clamp-2 shrink-0 text-[11px] text-muted-foreground leading-snug",
-              title: d.description,
-              children: d.description
-            }
-          ),
-          runBands && (cost || tokens) && /* @__PURE__ */ jsx3("div", { className: "mt-2 shrink-0 truncate text-[11px] text-muted-foreground tabular-nums", children: [cost, tokens].filter(Boolean).join(" \xB7 ") }),
-          runBands && runOutput && /* @__PURE__ */ jsxs2("div", { className: "mt-2 min-h-0 shrink-0 rounded-lg border border-border bg-surface-container-high/60 px-2 py-1.5", children: [
-            /* @__PURE__ */ jsx3("div", { className: "mb-1 font-semibold text-[9px] text-muted-foreground uppercase tracking-[0.09em]", children: runOutput.label }),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx3("div", { className: "mt-2 min-h-0 flex-1 text-foreground leading-snug", children: runOutput ? /* @__PURE__ */ jsx3(
               NodeOutputBody,
               {
                 shape: runOutput.shape,
                 tone: runOutput.tone,
-                rows: OUTPUT_ROWS
+                rows: AGENT_BODY_ROWS
               }
-            )
-          ] }),
-          runBands && state && !runOutput && emptySlotLabel(state.status) && /* @__PURE__ */ jsx3("div", { className: "mt-2 flex flex-1 items-center text-[11px] text-muted-foreground italic", children: emptySlotLabel(state.status) })
-        ] }),
-        runBands && state && /* @__PURE__ */ jsx3(
-          StatusFooter,
-          {
-            status: state.status,
-            rounds: isAgent ? state.rounds : void 0,
-            elapsed: duration
-          }
-        )
-      ]
-    }
+            ) : runStatus && runStatus !== "succeeded" && runStatus !== "failed" && d.description ? (
+              // What it is ABOUT to do, in the muted token — the answer, when it
+              // arrives, is the thing set in the foreground.
+              //
+              // Only while the node is still going to produce one. A FINISHED
+              // node that produced nothing must say so: showing its prompt
+              // there reads as the result it never returned.
+              /* @__PURE__ */ jsx3(
+                "p",
+                {
+                  className: "line-clamp-5 text-[11px] text-muted-foreground leading-snug",
+                  title: d.description,
+                  children: d.description
+                }
+              )
+            ) : runStatus && /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground italic", children: emptySlotLabel(runStatus) }) })
+          ] })
+        ),
+        footer
+      ] })
+    );
+  }
+  return cardShell(
+    /* @__PURE__ */ jsxs3(Fragment, { children: [
+      body(
+        /* @__PURE__ */ jsxs3(Fragment, { children: [
+          identityRow,
+          outputWell(ACTION_OUTPUT_ROWS)
+        ] })
+      ),
+      footer
+    ] })
   );
 }
 var EDGE_CHIP_CLASS = "rounded-full border border-border bg-card/90 px-1.5 py-[1px] text-[10px] leading-tight backdrop-blur";
@@ -772,9 +1003,9 @@ function WfEdgeRenderer({
   const backEdge = data?.backEdge === true;
   const whenLabel = data?.whenLabel;
   const visits = data?.maxNodeVisits;
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsx3(BaseEdge, { id, path, markerEnd, style }),
-    /* @__PURE__ */ jsx3(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx3(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs3(
       "div",
       {
         className: "nodrag nopan absolute flex flex-col items-center gap-0.5",
@@ -837,8 +1068,9 @@ function WorkflowGraph({
   yaml,
   variant = "full",
   direction = "LR",
-  defaultCompact = true,
+  defaultCompact,
   className,
+  wrap = false,
   nodeState,
   edges: declaredEdges,
   maxNodeVisits,
@@ -851,22 +1083,27 @@ function WorkflowGraph({
   const editable = onEdgeConnect !== void 0;
   const colorMode = useColorMode();
   const isPreview = variant === "preview";
-  const [userCompact, setUserCompact] = useState(defaultCompact);
+  const [userCompact, setUserCompact] = useState(
+    defaultCompact ?? nodeState === void 0
+  );
   const compact = isPreview || userCompact;
   const [displayCompact, setDisplayCompact] = useState(compact);
   const rfRef = useRef(
     null
   );
   const wrapperRef = useRef(null);
+  const framedRef = useRef(false);
+  const [framingCue, setFramingCue] = useState(0);
   const hasRunOverlay = nodeState !== void 0;
   const structural = useMemo(
     () => buildFlowGraph(yaml, {
       nodeState: hasRunOverlay ? {} : void 0,
       direction,
       compact,
+      wrap,
       ...declaredEdges ? { edges: declaredEdges } : {}
     }),
-    [yaml, hasRunOverlay, direction, compact, declaredEdges]
+    [yaml, hasRunOverlay, direction, compact, wrap, declaredEdges]
   );
   const styledEdges = useMemo(() => {
     const styled = buildStyledEdges(structural.edges, nodeState, maxNodeVisits);
@@ -910,14 +1147,13 @@ function WorkflowGraph({
       setDisplayCompact(compact);
       return;
     }
-    const endViewport = getViewportForBounds(
-      getNodesBounds(structural.nodes),
+    const endViewport = framingViewport(
+      layoutBounds(structural.nodes),
       frame.width,
       frame.height,
-      FIT_VIEW.minZoom,
-      fitZoomCeiling(compact),
-      FIT_VIEW.padding
+      compact
     );
+    framedRef.current = true;
     const prev = nodesRef.current;
     const prevById = new Map(prev.map((n) => [n.id, n]));
     const sameNodeSet = prev.length === structural.nodes.length && structural.nodes.every((n) => prevById.has(n.id));
@@ -970,6 +1206,34 @@ function WorkflowGraph({
       clearTimeout(flipTimer);
     };
   }, [structural, compact, setNodes]);
+  useEffect(() => {
+    if (framedRef.current) return;
+    const inst = rfRef.current;
+    const frame = wrapperRef.current?.getBoundingClientRect();
+    if (!inst || !frame || frame.width === 0 || frame.height === 0) return;
+    inst.setViewport(
+      framingViewport(
+        layoutBounds(structural.nodes),
+        frame.width,
+        frame.height,
+        compact
+      )
+    );
+    framedRef.current = true;
+  }, [framingCue, structural, compact]);
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (framedRef.current) {
+        observer.disconnect();
+        return;
+      }
+      setFramingCue((cue) => cue + 1);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
   const handleNodeClick = useCallback(
     (_event, node) => {
       onNodeClick?.(node.id, node.data);
@@ -999,7 +1263,7 @@ function WorkflowGraph({
       }
     );
   }
-  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: displayCompact, children: /* @__PURE__ */ jsx3(SelectedNodeContext.Provider, { value: selectedNodeId, children: /* @__PURE__ */ jsx3(ConnectableContext.Provider, { value: editable, children: /* @__PURE__ */ jsx3("div", { ref: wrapperRef, className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: displayCompact, children: /* @__PURE__ */ jsx3(RunModeContext.Provider, { value: hasRunOverlay, children: /* @__PURE__ */ jsx3(SelectedNodeContext.Provider, { value: selectedNodeId, children: /* @__PURE__ */ jsx3(ConnectableContext.Provider, { value: editable, children: /* @__PURE__ */ jsx3("div", { ref: wrapperRef, className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs3(
     ReactFlow,
     {
       nodes,
@@ -1011,11 +1275,16 @@ function WorkflowGraph({
       colorMode,
       onInit: (inst) => {
         rfRef.current = inst;
+        if (!framedRef.current) setFramingCue((cue) => cue + 1);
       },
       onNodeClick: onNodeClick ? handleNodeClick : void 0,
       onKeyDown: onNodeClick ? handleNodeKeyDown : void 0,
       fitView: true,
-      fitViewOptions: { ...FIT_VIEW, maxZoom: fitZoomCeiling(compact) },
+      fitViewOptions: {
+        ...FIT_VIEW,
+        minZoom: fitZoomFloor(compact),
+        maxZoom: fitZoomCeiling(compact)
+      },
       proOptions: { hideAttribution: true },
       nodesDraggable: !isPreview,
       nodesConnectable: editable,
@@ -1049,9 +1318,9 @@ function WorkflowGraph({
       maxZoom: 1.5,
       children: [
         /* @__PURE__ */ jsx3(Background, { gap: 18 }),
-        !isPreview && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        !isPreview && /* @__PURE__ */ jsxs3(Fragment, { children: [
           /* @__PURE__ */ jsx3(Controls, { showInteractive: false, position: "bottom-right" }),
-          /* @__PURE__ */ jsx3(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsx3(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
@@ -1068,17 +1337,22 @@ function WorkflowGraph({
         ] })
       ]
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 }
 export {
   ConnectableContext,
   DensityContext,
   DirectionContext,
+  FIT_VIEW,
   LAYOUT_TRANSITION_MS,
+  RunModeContext,
   SelectedNodeContext,
   WorkflowGraph,
   WorkflowNode,
   buildStyledEdges,
   fitZoomCeiling,
-  isEditableEdge
+  fitZoomFloor,
+  framingViewport,
+  isEditableEdge,
+  layoutBounds
 };