@pipelex/mthds-ui 0.9.0 → 0.11.0

package/dist/graph/react/index.js

@@ -16,8 +16,10 @@ import {
   getPipeBlueprint,
   resolveConceptRef,
   stuffDigestFromId,
+  toolbarOrientation,
+  toolbarSide,
   validateGraphSpec
-} from "../../chunk-WNSV4E7G.js";
+} from "../../chunk-R34J4GFM.js";
 import {
   __spreadProps,
   __spreadValues
@@ -823,9 +825,6 @@ function PipeLLMSection({
     )
   ] });
 }
-function LLMExecutionData(_props) {
-  return null;
-}
 
 // src/graph/react/detail/sections/PipeImgGenDetail.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -870,9 +869,6 @@ function PipeImgGenSection({
     )
   ] });
 }
-function ImgGenExecutionData(_props) {
-  return null;
-}
 
 // src/graph/react/detail/sections/PipeExtractDetail.tsx
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -893,9 +889,6 @@ function PipeExtractSection({
     /* @__PURE__ */ jsx6(KV, { label: "Image Variable", value: blueprint.image_stuff_name })
   ] });
 }
-function ExtractExecutionData(_props) {
-  return null;
-}
 
 // src/graph/react/detail/sections/PipeSearchDetail.tsx
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -924,12 +917,46 @@ function PipeSearchSection({
     blueprint.exclude_domains && blueprint.exclude_domains.length > 0 && /* @__PURE__ */ jsx7(KV, { label: "Exclude Domains", value: blueprint.exclude_domains.join(", ") })
   ] });
 }
-function SearchExecutionData(_props) {
-  return null;
+
+// src/graph/react/detail/sections/llmChoice.ts
+var LLM_CHOICE_LABEL_KEYS = ["model", "llm_handle", "handle", "llm_name", "name"];
+function nonEmptyString(value) {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : void 0;
+}
+function labelFromLlmChoice(choice) {
+  if (typeof choice === "string") return nonEmptyString(choice);
+  if (choice && typeof choice === "object") {
+    for (const key of LLM_CHOICE_LABEL_KEYS) {
+      const label = nonEmptyString(choice[key]);
+      if (label) return label;
+    }
+  }
+  return void 0;
 }
 
-// src/graph/react/detail/sections/PipeComposeDetail.tsx
+// src/graph/react/detail/sections/PipeStructureDetail.tsx
 import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function PipeStructureSection({
+  blueprint,
+  executionData
+}) {
+  const resolvedModel = executionData == null ? void 0 : executionData.resolved_model;
+  const isMultipleOutput = executionData == null ? void 0 : executionData.is_multiple_output;
+  const renderedUser = executionData == null ? void 0 : executionData.rendered_user_prompt;
+  const modelDisplay = resolvedModel || labelFromLlmChoice(blueprint.llm_choice);
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    /* @__PURE__ */ jsx8(KV, { label: "Model", value: modelDisplay }),
+    /* @__PURE__ */ jsx8(KV, { label: "Text Variable", value: blueprint.text_input_name }),
+    /* @__PURE__ */ jsx8(KV, { label: "Multiple Output", value: isMultipleOutput }),
+    /* @__PURE__ */ jsx8(KV, { label: "Output Multiplicity", value: blueprint.output_multiplicity }),
+    /* @__PURE__ */ jsx8(PromptToggle, { label: "Prompt", templateText: void 0, renderedText: renderedUser })
+  ] });
+}
+
+// src/graph/react/detail/sections/PipeComposeDetail.tsx
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function formatLeafField(field) {
   var _a, _b;
   switch (field.method) {
@@ -950,9 +977,9 @@ function isLongValue(text) {
   return text.length > LONG_VALUE_THRESHOLD_CHARS || text.includes("\n");
 }
 function FieldBlock({ label, value }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "detail-field-block", children: [
-    /* @__PURE__ */ jsx8("div", { className: "detail-field-block-label", children: label }),
-    /* @__PURE__ */ jsx8("div", { className: "detail-field-block-value", children: value })
+  return /* @__PURE__ */ jsxs9("div", { className: "detail-field-block", children: [
+    /* @__PURE__ */ jsx9("div", { className: "detail-field-block-label", children: label }),
+    /* @__PURE__ */ jsx9("div", { className: "detail-field-block-value", children: value })
   ] });
 }
 function ConstructFieldsBlock({
@@ -973,18 +1000,18 @@ function ConstructFieldsBlock({
     }
   }
   const indentStyle = depth > 0 ? { paddingLeft: depth * 12 } : void 0;
-  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment6, { children: [
     leafFields.map(([name, field]) => {
       const display = formatLeafField(field);
       if (isLongValue(display)) {
-        return /* @__PURE__ */ jsx8("div", { style: indentStyle, children: /* @__PURE__ */ jsx8(FieldBlock, { label: name, value: display }) }, name);
+        return /* @__PURE__ */ jsx9("div", { style: indentStyle, children: /* @__PURE__ */ jsx9(FieldBlock, { label: name, value: display }) }, name);
       }
-      return /* @__PURE__ */ jsx8("div", { style: indentStyle, children: /* @__PURE__ */ jsx8(KV, { label: name, value: display }) }, name);
+      return /* @__PURE__ */ jsx9("div", { style: indentStyle, children: /* @__PURE__ */ jsx9(KV, { label: name, value: display }) }, name);
     }),
     templateFields.map(([name, field]) => {
       var _a, _b;
       const renderedForField = (_a = fieldResolutions == null ? void 0 : fieldResolutions[name]) == null ? void 0 : _a.rendered;
-      return /* @__PURE__ */ jsx8("div", { style: indentStyle, children: /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9("div", { style: indentStyle, children: /* @__PURE__ */ jsx9(
         PromptToggle,
         {
           label: `Template \u2014 ${name}`,
@@ -995,15 +1022,15 @@ function ConstructFieldsBlock({
     }),
     nestedFields.map(([name, field]) => {
       if (!field.nested) return null;
-      return /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsxs8(
+      return /* @__PURE__ */ jsxs9("div", { children: [
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             className: "detail-nested-header",
             style: depth > 0 ? { paddingLeft: depth * 12 } : void 0,
             children: [
-              /* @__PURE__ */ jsx8("span", { className: "detail-nested-header-name", children: name }),
-              /* @__PURE__ */ jsxs8("span", { className: "detail-nested-header-meta", children: [
+              /* @__PURE__ */ jsx9("span", { className: "detail-nested-header-name", children: name }),
+              /* @__PURE__ */ jsxs9("span", { className: "detail-nested-header-meta", children: [
                 "nested \xB7 ",
                 Object.keys(field.nested.fields).length,
                 " field",
@@ -1012,7 +1039,7 @@ function ConstructFieldsBlock({
             ]
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           ConstructFieldsBlock,
           {
             blueprint: field.nested,
@@ -1034,11 +1061,11 @@ function PipeComposeSection({
   const fieldResolutions = (_a = executionData == null ? void 0 : executionData.fields) != null ? _a : null;
   const constructBlueprint = blueprint.construct_blueprint;
   const hasConstruct = constructBlueprint !== null && Object.keys(constructBlueprint.fields).length > 0;
-  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    /* @__PURE__ */ jsx8(KV, { label: "Mode", value: composeMode || (hasConstruct ? "construct" : "template") }),
-    /* @__PURE__ */ jsx8(KV, { label: "Category", value: blueprint.category }),
-    /* @__PURE__ */ jsx8(KV, { label: "Templating Style", value: blueprint.templating_style }),
-    blueprint.template && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    /* @__PURE__ */ jsx9(KV, { label: "Mode", value: composeMode || (hasConstruct ? "construct" : "template") }),
+    /* @__PURE__ */ jsx9(KV, { label: "Category", value: blueprint.category }),
+    /* @__PURE__ */ jsx9(KV, { label: "Templating Style", value: blueprint.templating_style }),
+    blueprint.template && /* @__PURE__ */ jsx9(
       PromptToggle,
       {
         label: "Template",
@@ -1046,9 +1073,9 @@ function PipeComposeSection({
         renderedText
       }
     ),
-    hasConstruct && /* @__PURE__ */ jsxs8(Fragment5, { children: [
-      /* @__PURE__ */ jsx8("div", { className: "detail-section-label", children: "FIELDS" }),
-      /* @__PURE__ */ jsx8(
+    hasConstruct && /* @__PURE__ */ jsxs9(Fragment6, { children: [
+      /* @__PURE__ */ jsx9("div", { className: "detail-section-label", children: "FIELDS" }),
+      /* @__PURE__ */ jsx9(
         ConstructFieldsBlock,
         {
           blueprint: constructBlueprint,
@@ -1059,31 +1086,28 @@ function PipeComposeSection({
     ] })
   ] });
 }
-function ComposeExecutionData(_props) {
-  return null;
-}
 
 // src/graph/react/detail/sections/PipeConditionDetail.tsx
-import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function PipeConditionSection({
   blueprint,
   executionData
 }) {
   const evaluatedExpression = executionData == null ? void 0 : executionData.evaluated_expression;
   const selectedOutcome = executionData == null ? void 0 : executionData.selected_outcome;
-  return /* @__PURE__ */ jsxs9(Fragment6, { children: [
-    /* @__PURE__ */ jsx9(PromptBlock, { label: "Expression", text: blueprint.expression }),
-    evaluatedExpression && /* @__PURE__ */ jsx9(KV, { label: "Expression Result", value: evaluatedExpression }),
-    /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx9("div", { className: "detail-section-label", children: "Outcomes" }),
-      Object.entries(blueprint.outcome_map).map(([outcome, pipeCode]) => /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(Fragment7, { children: [
+    /* @__PURE__ */ jsx10(PromptBlock, { label: "Expression", text: blueprint.expression }),
+    evaluatedExpression && /* @__PURE__ */ jsx10(KV, { label: "Expression Result", value: evaluatedExpression }),
+    /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsx10("div", { className: "detail-section-label", children: "Outcomes" }),
+      Object.entries(blueprint.outcome_map).map(([outcome, pipeCode]) => /* @__PURE__ */ jsxs10(
         "div",
         {
           className: "detail-kv-row",
           style: selectedOutcome === pipeCode ? { background: "rgba(80,250,123,0.08)" } : void 0,
           children: [
-            /* @__PURE__ */ jsx9("span", { className: "detail-kv-key", children: outcome }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10("span", { className: "detail-kv-key", children: outcome }),
+            /* @__PURE__ */ jsx10(
               "span",
               {
                 className: "detail-kv-value",
@@ -1095,83 +1119,89 @@ function PipeConditionSection({
         },
         outcome
       )),
-      /* @__PURE__ */ jsxs9("div", { className: "detail-kv-row", children: [
-        /* @__PURE__ */ jsx9("span", { className: "detail-kv-key", children: "default" }),
-        /* @__PURE__ */ jsx9("span", { className: "detail-kv-value", children: blueprint.default_outcome })
+      /* @__PURE__ */ jsxs10("div", { className: "detail-kv-row", children: [
+        /* @__PURE__ */ jsx10("span", { className: "detail-kv-key", children: "default" }),
+        /* @__PURE__ */ jsx10("span", { className: "detail-kv-value", children: blueprint.default_outcome })
       ] })
     ] }),
-    /* @__PURE__ */ jsx9(KV, { label: "Alias Expression To", value: blueprint.add_alias_from_expression_to })
+    /* @__PURE__ */ jsx10(KV, { label: "Alias Expression To", value: blueprint.add_alias_from_expression_to })
   ] });
 }
-function ConditionExecutionData(_props) {
-  return null;
-}
 
 // src/graph/react/detail/sections/PipeSequenceDetail.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function PipeSequenceSection({
   blueprint
 }) {
-  return /* @__PURE__ */ jsxs10("div", { children: [
-    /* @__PURE__ */ jsx10("div", { className: "detail-section-label", children: "Steps" }),
-    /* @__PURE__ */ jsx10("div", { className: "detail-steps-list", children: blueprint.sequential_sub_pipes.map((step, idx) => /* @__PURE__ */ jsxs10("div", { className: "detail-step-item", children: [
-      /* @__PURE__ */ jsx10("span", { className: "detail-step-index", children: idx + 1 }),
-      /* @__PURE__ */ jsx10("span", { className: "detail-step-code", children: step.pipe_code }),
-      step.output_name && /* @__PURE__ */ jsxs10("span", { className: "detail-io-concept", children: [
+  return /* @__PURE__ */ jsxs11("div", { children: [
+    /* @__PURE__ */ jsx11("div", { className: "detail-section-label", children: "Steps" }),
+    /* @__PURE__ */ jsx11("div", { className: "detail-steps-list", children: blueprint.sequential_sub_pipes.map((step, idx) => /* @__PURE__ */ jsxs11("div", { className: "detail-step-item", children: [
+      /* @__PURE__ */ jsx11("span", { className: "detail-step-index", children: idx + 1 }),
+      /* @__PURE__ */ jsx11("span", { className: "detail-step-code", children: step.pipe_code }),
+      step.output_name && /* @__PURE__ */ jsxs11("span", { className: "detail-io-concept", children: [
         "-> ",
         step.output_name
       ] })
     ] }, idx)) })
   ] });
 }
-function SequenceExecutionData(_props) {
-  return null;
-}
 
 // src/graph/react/detail/sections/PipeParallelDetail.tsx
-import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function PipeParallelSection({
   blueprint
 }) {
-  return /* @__PURE__ */ jsxs11(Fragment7, { children: [
-    /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx11("div", { className: "detail-section-label", children: "Branches" }),
-      /* @__PURE__ */ jsx11("div", { className: "detail-steps-list", children: blueprint.parallel_sub_pipes.map((branch, idx) => /* @__PURE__ */ jsxs11("div", { className: "detail-step-item", children: [
-        /* @__PURE__ */ jsx11("span", { className: "detail-step-code", children: branch.pipe_code }),
-        branch.output_name && /* @__PURE__ */ jsxs11("span", { className: "detail-io-concept", children: [
+  return /* @__PURE__ */ jsxs12(Fragment8, { children: [
+    /* @__PURE__ */ jsxs12("div", { children: [
+      /* @__PURE__ */ jsx12("div", { className: "detail-section-label", children: "Branches" }),
+      /* @__PURE__ */ jsx12("div", { className: "detail-steps-list", children: blueprint.parallel_sub_pipes.map((branch, idx) => /* @__PURE__ */ jsxs12("div", { className: "detail-step-item", children: [
+        /* @__PURE__ */ jsx12("span", { className: "detail-step-code", children: branch.pipe_code }),
+        branch.output_name && /* @__PURE__ */ jsxs12("span", { className: "detail-io-concept", children: [
           "-> ",
           branch.output_name
         ] })
       ] }, idx)) })
     ] }),
-    /* @__PURE__ */ jsx11(KV, { label: "Add Each Output", value: blueprint.add_each_output }),
-    /* @__PURE__ */ jsx11(KV, { label: "Combined Output", value: blueprint.combined_output })
+    /* @__PURE__ */ jsx12(KV, { label: "Add Each Output", value: blueprint.add_each_output }),
+    /* @__PURE__ */ jsx12(KV, { label: "Combined Output", value: blueprint.combined_output })
   ] });
 }
-function ParallelExecutionData(_props) {
-  return null;
-}
 
 // src/graph/react/detail/sections/PipeBatchDetail.tsx
-import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function PipeBatchSection({
   blueprint,
   executionData
 }) {
   const itemCount = executionData == null ? void 0 : executionData.item_count;
-  return /* @__PURE__ */ jsxs12(Fragment8, { children: [
-    /* @__PURE__ */ jsx12(KV, { label: "Branch Pipe", value: blueprint.branch_pipe_code }),
-    /* @__PURE__ */ jsx12(KV, { label: "Input List Variable", value: blueprint.batch_params.input_list_stuff_name }),
-    /* @__PURE__ */ jsx12(KV, { label: "Input Item Variable", value: blueprint.batch_params.input_item_stuff_name }),
-    itemCount != null && /* @__PURE__ */ jsx12(KV, { label: "Items Processed", value: itemCount })
+  return /* @__PURE__ */ jsxs13(Fragment9, { children: [
+    /* @__PURE__ */ jsx13(KV, { label: "Branch Pipe", value: blueprint.branch_pipe_code }),
+    /* @__PURE__ */ jsx13(KV, { label: "Input List Variable", value: blueprint.batch_params.input_list_stuff_name }),
+    /* @__PURE__ */ jsx13(KV, { label: "Input Item Variable", value: blueprint.batch_params.input_item_stuff_name }),
+    itemCount != null && /* @__PURE__ */ jsx13(KV, { label: "Items Processed", value: itemCount })
   ] });
 }
-function BatchExecutionData(_props) {
-  return null;
+
+// src/graph/react/detail/sections/executionData.ts
+var MERGED_EXECUTION_DATA_TYPES = /* @__PURE__ */ new Set([
+  "PipeLLM",
+  "PipeImgGen",
+  "PipeExtract",
+  "PipeSearch",
+  "PipeStructure",
+  "PipeCompose",
+  "PipeSequence",
+  "PipeParallel",
+  "PipeCondition",
+  "PipeBatch"
+]);
+function shouldDumpExecutionData(pipeType, hasBlueprint) {
+  if (MERGED_EXECUTION_DATA_TYPES.has(pipeType)) return !hasBlueprint;
+  return true;
 }
 
 // src/graph/react/detail/PipeDetailPanel.tsx
-import { Fragment as Fragment9, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 var PIPE_TYPE_BADGES = {
   PipeLLM: "LLM",
   PipeExtract: "Extract",
@@ -1179,6 +1209,7 @@ var PIPE_TYPE_BADGES = {
   PipeImgGen: "ImgGen",
   PipeSearch: "Search",
   PipeFunc: "Func",
+  PipeStructure: "Structure",
   PipeSignature: "Signature",
   PipeSequence: "Seq",
   PipeParallel: "Par",
@@ -1220,17 +1251,17 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
   const inputs = (_c = (_b = node.io) == null ? void 0 : _b.inputs) != null ? _c : [];
   const outputs = (_e = (_d = node.io) == null ? void 0 : _d.outputs) != null ? _e : [];
   const description = (_f = blueprint == null ? void 0 : blueprint.description) != null ? _f : node.description;
-  return /* @__PURE__ */ jsxs13(Fragment9, { children: [
-    /* @__PURE__ */ jsxs13("div", { className: "detail-sticky-header", children: [
-      /* @__PURE__ */ jsxs13("div", { className: "detail-header", children: [
-        /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
+    /* @__PURE__ */ jsxs14("div", { className: "detail-sticky-header", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "detail-header", children: [
+        /* @__PURE__ */ jsx14(
           "span",
           {
             className: `detail-badge ${isController ? "detail-badge--controller" : "detail-badge--operator"}`,
             children: badge
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "span",
           {
             className: `detail-pipe-code ${isController ? "detail-pipe-code--controller" : ""}`,
@@ -1238,56 +1269,63 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs13("div", { className: "detail-status", children: [
-        /* @__PURE__ */ jsx13("span", { className: "detail-status-dot", style: { background: statusColor } }),
-        /* @__PURE__ */ jsx13("span", { className: "detail-status-label", style: { color: statusColor }, children: status }),
-        ((_g = node.timing) == null ? void 0 : _g.duration) != null && /* @__PURE__ */ jsx13("span", { className: "detail-duration", children: formatDuration(node.timing.duration) })
+      /* @__PURE__ */ jsxs14("div", { className: "detail-status", children: [
+        /* @__PURE__ */ jsx14("span", { className: "detail-status-dot", style: { background: statusColor } }),
+        /* @__PURE__ */ jsx14("span", { className: "detail-status-label", style: { color: statusColor }, children: status }),
+        ((_g = node.timing) == null ? void 0 : _g.duration) != null && /* @__PURE__ */ jsx14("span", { className: "detail-duration", children: formatDuration(node.timing.duration) })
       ] }),
-      description && /* @__PURE__ */ jsx13("div", { className: "detail-description", children: description }),
-      inputs.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Inputs" }),
-        /* @__PURE__ */ jsx13("div", { className: "detail-io-list", children: inputs.map((input, idx) => /* @__PURE__ */ jsxs13(
+      description && /* @__PURE__ */ jsx14("div", { className: "detail-description", children: description }),
+      inputs.length > 0 && /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Inputs" }),
+        /* @__PURE__ */ jsx14("div", { className: "detail-io-list", children: inputs.map((input, idx) => /* @__PURE__ */ jsxs14(
           "div",
           {
             className: "detail-io-pill",
             style: { cursor: input.concept && onConceptClick ? "pointer" : void 0 },
             onClick: () => input.concept && (onConceptClick == null ? void 0 : onConceptClick(input.concept)),
             children: [
-              /* @__PURE__ */ jsx13("span", { className: "detail-io-name", children: input.name }),
-              input.concept && /* @__PURE__ */ jsx13("span", { className: "detail-io-concept", children: input.concept })
+              /* @__PURE__ */ jsx14("span", { className: "detail-io-name", children: input.name }),
+              input.concept && /* @__PURE__ */ jsx14("span", { className: "detail-io-concept", children: input.concept })
             ]
           },
           idx
         )) })
       ] }),
-      outputs.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Output" }),
-        /* @__PURE__ */ jsx13("div", { className: "detail-io-list", children: outputs.map((output, idx) => /* @__PURE__ */ jsxs13(
+      outputs.length > 0 && /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Output" }),
+        /* @__PURE__ */ jsx14("div", { className: "detail-io-list", children: outputs.map((output, idx) => /* @__PURE__ */ jsxs14(
           "div",
           {
             className: "detail-io-pill",
             style: { cursor: output.concept && onConceptClick ? "pointer" : void 0 },
             onClick: () => output.concept && (onConceptClick == null ? void 0 : onConceptClick(output.concept)),
             children: [
-              /* @__PURE__ */ jsx13("span", { className: "detail-io-name", children: output.name }),
-              output.concept && /* @__PURE__ */ jsx13("span", { className: "detail-io-concept", children: output.concept })
+              /* @__PURE__ */ jsx14("span", { className: "detail-io-name", children: output.name }),
+              output.concept && /* @__PURE__ */ jsx14("span", { className: "detail-io-concept", children: output.concept })
             ]
           },
           idx
         )) })
       ] }),
-      (inputs.length > 0 || outputs.length > 0) && /* @__PURE__ */ jsx13("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)", margin: "4px 0" } })
+      (inputs.length > 0 || outputs.length > 0) && /* @__PURE__ */ jsx14("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)", margin: "4px 0" } })
     ] }),
-    blueprint && /* @__PURE__ */ jsx13(BlueprintSection, { blueprint, executionData: node.execution_data }),
-    node.execution_data && Object.keys(node.execution_data).length > 0 && /* @__PURE__ */ jsx13(ExecutionDataSection, { executionData: node.execution_data, pipeType }),
-    node.error && /* @__PURE__ */ jsxs13("div", { className: "detail-error", children: [
-      /* @__PURE__ */ jsx13("div", { className: "detail-error-type", children: node.error.error_type }),
-      /* @__PURE__ */ jsx13("div", { className: "detail-error-message", children: node.error.message }),
-      node.error.stack && /* @__PURE__ */ jsx13("div", { className: "detail-error-stack", children: node.error.stack })
+    blueprint && /* @__PURE__ */ jsx14(BlueprintSection, { blueprint, executionData: node.execution_data }),
+    node.execution_data && Object.keys(node.execution_data).length > 0 && /* @__PURE__ */ jsx14(
+      ExecutionDataSection,
+      {
+        executionData: node.execution_data,
+        pipeType,
+        hasBlueprint: !!blueprint
+      }
+    ),
+    node.error && /* @__PURE__ */ jsxs14("div", { className: "detail-error", children: [
+      /* @__PURE__ */ jsx14("div", { className: "detail-error-type", children: node.error.error_type }),
+      /* @__PURE__ */ jsx14("div", { className: "detail-error-message", children: node.error.message }),
+      node.error.stack && /* @__PURE__ */ jsx14("div", { className: "detail-error-stack", children: node.error.stack })
     ] }),
-    node.metrics && Object.keys(node.metrics).length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
-      /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Metrics" }),
-      Object.entries(node.metrics).map(([key, value]) => /* @__PURE__ */ jsx13(
+    node.metrics && Object.keys(node.metrics).length > 0 && /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Metrics" }),
+      Object.entries(node.metrics).map(([key, value]) => /* @__PURE__ */ jsx14(
         KV,
         {
           label: key,
@@ -1296,17 +1334,17 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
         key
       ))
     ] }),
-    node.tags && Object.keys(node.tags).length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
-      /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Tags" }),
-      /* @__PURE__ */ jsx13("div", { className: "detail-tags", children: Object.entries(node.tags).map(([key, value]) => /* @__PURE__ */ jsxs13("span", { className: "detail-tag", children: [
-        /* @__PURE__ */ jsxs13("span", { className: "detail-tag-key", children: [
+    node.tags && Object.keys(node.tags).length > 0 && /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Tags" }),
+      /* @__PURE__ */ jsx14("div", { className: "detail-tags", children: Object.entries(node.tags).map(([key, value]) => /* @__PURE__ */ jsxs14("span", { className: "detail-tag", children: [
+        /* @__PURE__ */ jsxs14("span", { className: "detail-tag-key", children: [
           key,
           ": "
         ] }),
-        /* @__PURE__ */ jsx13("span", { className: "detail-tag-value", children: value })
+        /* @__PURE__ */ jsx14("span", { className: "detail-tag-value", children: value })
       ] }, key)) })
     ] }),
-    !blueprint && /* @__PURE__ */ jsx13("div", { className: "detail-not-available", children: "Blueprint not available" })
+    !blueprint && /* @__PURE__ */ jsx14("div", { className: "detail-not-available", children: "Blueprint not available" })
   ] });
 }
 function BlueprintSection({
@@ -1315,70 +1353,53 @@ function BlueprintSection({
 }) {
   switch (blueprint.type) {
     case "PipeLLM":
-      return /* @__PURE__ */ jsx13(PipeLLMSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx14(PipeLLMSection, { blueprint, executionData });
     case "PipeImgGen":
-      return /* @__PURE__ */ jsx13(PipeImgGenSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx14(PipeImgGenSection, { blueprint, executionData });
     case "PipeCompose":
-      return /* @__PURE__ */ jsx13(PipeComposeSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx14(PipeComposeSection, { blueprint, executionData });
     case "PipeExtract":
-      return /* @__PURE__ */ jsx13(PipeExtractSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx14(PipeExtractSection, { blueprint, executionData });
     case "PipeSearch":
-      return /* @__PURE__ */ jsx13(PipeSearchSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx14(PipeSearchSection, { blueprint, executionData });
+    case "PipeStructure":
+      return /* @__PURE__ */ jsx14(PipeStructureSection, { blueprint, executionData });
     case "PipeSequence":
-      return /* @__PURE__ */ jsx13(PipeSequenceSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx14(PipeSequenceSection, { blueprint, executionData });
     case "PipeParallel":
-      return /* @__PURE__ */ jsx13(PipeParallelSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx14(PipeParallelSection, { blueprint, executionData });
     case "PipeCondition":
-      return /* @__PURE__ */ jsx13(PipeConditionSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx14(PipeConditionSection, { blueprint, executionData });
     case "PipeBatch":
-      return /* @__PURE__ */ jsx13(PipeBatchSection, { blueprint, executionData });
+      return /* @__PURE__ */ jsx14(PipeBatchSection, { blueprint, executionData });
     case "PipeFunc":
       return null;
     case "PipeSignature":
-      return /* @__PURE__ */ jsx13("div", { className: "detail-not-available", children: "Signature stub \u2014 declared but not yet implemented." });
+      return /* @__PURE__ */ jsx14("div", { className: "detail-not-available", children: "Signature stub \u2014 declared but not yet implemented." });
     default:
       return null;
   }
 }
 function ExecutionDataSection({
   executionData,
-  pipeType
+  pipeType,
+  hasBlueprint
 }) {
-  switch (pipeType) {
-    case "PipeLLM":
-      return /* @__PURE__ */ jsx13(LLMExecutionData, { data: executionData });
-    case "PipeImgGen":
-      return /* @__PURE__ */ jsx13(ImgGenExecutionData, { data: executionData });
-    case "PipeExtract":
-      return /* @__PURE__ */ jsx13(ExtractExecutionData, { data: executionData });
-    case "PipeSearch":
-      return /* @__PURE__ */ jsx13(SearchExecutionData, { data: executionData });
-    case "PipeCompose":
-      return /* @__PURE__ */ jsx13(ComposeExecutionData, { data: executionData });
-    case "PipeCondition":
-      return /* @__PURE__ */ jsx13(ConditionExecutionData, { data: executionData });
-    case "PipeSequence":
-      return /* @__PURE__ */ jsx13(SequenceExecutionData, { data: executionData });
-    case "PipeParallel":
-      return /* @__PURE__ */ jsx13(ParallelExecutionData, { data: executionData });
-    case "PipeBatch":
-      return /* @__PURE__ */ jsx13(BatchExecutionData, { data: executionData });
-    default:
-      return /* @__PURE__ */ jsx13(GenericExecutionData, { data: executionData });
-  }
+  if (!shouldDumpExecutionData(pipeType, hasBlueprint)) return null;
+  return /* @__PURE__ */ jsx14(GenericExecutionData, { data: executionData });
 }
 function GenericExecutionData({ data }) {
   const entries = Object.entries(data);
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsxs13(Fragment9, { children: [
-    /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Execution" }),
-    entries.map(([key, value]) => /* @__PURE__ */ jsx13(KV, { label: key, value: String(value) }, key))
+  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
+    /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Execution" }),
+    entries.map(([key, value]) => /* @__PURE__ */ jsx14(KV, { label: key, value: String(value) }, key))
   ] });
 }
 
 // src/graph/react/detail/ConceptDetailPanel.tsx
 import React7 from "react";
-import { Fragment as Fragment10, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 function ConceptDetailPanel({
   concept,
   ioData,
@@ -1389,17 +1410,17 @@ function ConceptDetailPanel({
   instanceKey
 }) {
   var _a;
-  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
-    /* @__PURE__ */ jsxs14("div", { className: "detail-header", children: [
-      /* @__PURE__ */ jsx14("span", { className: "detail-concept-code", children: concept.code }),
-      /* @__PURE__ */ jsx14("span", { className: "detail-concept-domain", children: concept.domain_code })
+  return /* @__PURE__ */ jsxs15(Fragment11, { children: [
+    /* @__PURE__ */ jsxs15("div", { className: "detail-header", children: [
+      /* @__PURE__ */ jsx15("span", { className: "detail-concept-code", children: concept.code }),
+      /* @__PURE__ */ jsx15("span", { className: "detail-concept-domain", children: concept.domain_code })
     ] }),
-    concept.description && /* @__PURE__ */ jsx14("div", { className: "detail-description", children: concept.description }),
-    concept.refines && /* @__PURE__ */ jsxs14("div", { className: "detail-refines", children: [
+    concept.description && /* @__PURE__ */ jsx15("div", { className: "detail-description", children: concept.description }),
+    concept.refines && /* @__PURE__ */ jsxs15("div", { className: "detail-refines", children: [
       "refines ",
-      /* @__PURE__ */ jsx14("span", { className: "detail-refines-code", children: concept.refines })
+      /* @__PURE__ */ jsx15("span", { className: "detail-refines-code", children: concept.refines })
     ] }),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       ConceptBody,
       {
         concept,
@@ -1426,10 +1447,10 @@ function ConceptBody({
   const baseId = React7.useId();
   const tabId = (tab) => `${baseId}-tab-${tab}`;
   const panelId = (tab) => `${baseId}-tabpanel-${tab}`;
-  const structure = concept.json_schema ? /* @__PURE__ */ jsxs14("div", { children: [
-    /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Structure" }),
-    /* @__PURE__ */ jsx14(SchemaTable, { schema: concept.json_schema, isDryRun })
-  ] }) : /* @__PURE__ */ jsx14("div", { className: "detail-not-available", children: "Schema not available" });
+  const structure = concept.json_schema ? /* @__PURE__ */ jsxs15("div", { children: [
+    /* @__PURE__ */ jsx15("div", { className: "detail-section-label", children: "Structure" }),
+    /* @__PURE__ */ jsx15(SchemaTable, { schema: concept.json_schema, isDryRun })
+  ] }) : /* @__PURE__ */ jsx15("div", { className: "detail-not-available", children: "Schema not available" });
   if (!hasData) return structure;
   const onTabKeyDown = (event) => {
     var _a;
@@ -1452,7 +1473,7 @@ function ConceptBody({
     setActiveTab(next);
     (_a = document.getElementById(tabId(next))) == null ? void 0 : _a.focus();
   };
-  const renderTab = (tab, label) => /* @__PURE__ */ jsx14(
+  const renderTab = (tab, label) => /* @__PURE__ */ jsx15(
     "button",
     {
       type: "button",
@@ -1467,12 +1488,12 @@ function ConceptBody({
       children: label
     }
   );
-  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
-    /* @__PURE__ */ jsxs14("div", { className: "detail-tabs", role: "tablist", "aria-label": "Concept views", children: [
+  return /* @__PURE__ */ jsxs15(Fragment11, { children: [
+    /* @__PURE__ */ jsxs15("div", { className: "detail-tabs", role: "tablist", "aria-label": "Concept views", children: [
       renderTab("data", "Data"),
       renderTab("structure", "Structure")
     ] }),
-    /* @__PURE__ */ jsx14("div", { role: "tabpanel", id: panelId(activeTab), "aria-labelledby": tabId(activeTab), children: activeTab === "data" ? /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15("div", { role: "tabpanel", id: panelId(activeTab), "aria-labelledby": tabId(activeTab), children: activeTab === "data" ? /* @__PURE__ */ jsx15(
       StuffViewer,
       {
         stuff: toStuffViewerData(ioData),
@@ -1491,42 +1512,43 @@ function SchemaTable({
   const properties = schema.properties;
   const required = new Set((_a = schema.required) != null ? _a : []);
   if (!properties || Object.keys(properties).length === 0) {
-    return /* @__PURE__ */ jsx14("div", { className: "detail-not-available", children: "No fields defined" });
+    return /* @__PURE__ */ jsx15("div", { className: "detail-not-available", children: "No fields defined" });
   }
   const fields = Object.entries(properties);
   const visibleFields = isDryRun ? fields.filter(([name]) => required.has(name)) : fields;
-  return /* @__PURE__ */ jsxs14("table", { className: "detail-schema-table", children: [
-    /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs14("tr", { children: [
-      /* @__PURE__ */ jsx14("th", { children: "Field" }),
-      /* @__PURE__ */ jsx14("th", { children: "Type" }),
-      /* @__PURE__ */ jsx14("th", {}),
-      /* @__PURE__ */ jsx14("th", { children: "Description" })
+  return /* @__PURE__ */ jsxs15("table", { className: "detail-schema-table", children: [
+    /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsxs15("tr", { children: [
+      /* @__PURE__ */ jsx15("th", { children: "Field" }),
+      /* @__PURE__ */ jsx15("th", { children: "Type" }),
+      /* @__PURE__ */ jsx15("th", {}),
+      /* @__PURE__ */ jsx15("th", { children: "Description" })
     ] }) }),
-    /* @__PURE__ */ jsx14("tbody", { children: visibleFields.map(([fieldName, fieldSchema]) => {
+    /* @__PURE__ */ jsx15("tbody", { children: visibleFields.map(([fieldName, fieldSchema]) => {
       var _a2;
-      return /* @__PURE__ */ jsxs14("tr", { children: [
-        /* @__PURE__ */ jsx14("td", { className: "detail-schema-field", children: fieldName }),
-        /* @__PURE__ */ jsx14("td", { className: "detail-schema-type", children: extractType(fieldSchema) }),
-        /* @__PURE__ */ jsx14("td", { children: required.has(fieldName) && /* @__PURE__ */ jsx14("span", { className: "detail-schema-required", children: "req" }) }),
-        /* @__PURE__ */ jsx14("td", { children: (_a2 = fieldSchema.description) != null ? _a2 : "" })
+      return /* @__PURE__ */ jsxs15("tr", { children: [
+        /* @__PURE__ */ jsx15("td", { className: "detail-schema-field", children: fieldName }),
+        /* @__PURE__ */ jsx15("td", { className: "detail-schema-type", children: extractType(fieldSchema) }),
+        /* @__PURE__ */ jsx15("td", { children: required.has(fieldName) && /* @__PURE__ */ jsx15("span", { className: "detail-schema-required", children: "req" }) }),
+        /* @__PURE__ */ jsx15("td", { children: (_a2 = fieldSchema.description) != null ? _a2 : "" })
       ] }, fieldName);
     }) })
   ] });
 }
 function extractType(schema) {
   var _a;
-  if (schema.type) return String(schema.type);
+  if (typeof schema.type === "string") return schema.type;
+  if (Array.isArray(schema.type)) return schema.type.join(" | ");
   if (schema.anyOf) return "union";
   if (schema.allOf) return "all";
-  if (schema.$ref) {
-    const ref = String(schema.$ref);
+  if (typeof schema.$ref === "string") {
+    const ref = schema.$ref;
     return (_a = ref.split("/").pop()) != null ? _a : "(unresolved type)";
   }
   return "(unresolved type)";
 }
 function toStuffViewerData(ioData) {
   var _a;
-  if ("digest" in ioData) return ioData;
+  if (isStuffViewerData(ioData)) return ioData;
   return {
     digest: (_a = ioData.digest) != null ? _a : "",
     name: ioData.name,
@@ -1537,6 +1559,9 @@ function toStuffViewerData(ioData) {
     dataHtml: ioData.data_html
   };
 }
+function isStuffViewerData(ioData) {
+  return "contentType" in ioData || "dataText" in ioData || "dataHtml" in ioData;
+}
 
 // src/graph/react/rfTypes.ts
 function toAppNodes(nodes) {
@@ -1571,10 +1596,10 @@ function toAppEdges(edges) {
 }
 
 // src/graph/react/viewer/renderLabel.tsx
-import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 function renderLabel(desc) {
   if (desc.kind === "pipe") {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       "div",
       {
         style: {
@@ -1588,7 +1613,7 @@ function renderLabel(desc) {
           minWidth: 0
         },
         title: desc.label,
-        children: /* @__PURE__ */ jsx15(
+        children: /* @__PURE__ */ jsx16(
           "span",
           {
             style: {
@@ -1607,7 +1632,7 @@ function renderLabel(desc) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       style: {
@@ -1623,7 +1648,7 @@ function renderLabel(desc) {
       },
       title: desc.concept ? `${desc.label}: ${desc.concept}` : desc.label,
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           "span",
           {
             style: {
@@ -1639,7 +1664,7 @@ function renderLabel(desc) {
             children: desc.label
           }
         ),
-        desc.concept && /* @__PURE__ */ jsx15(
+        desc.concept && /* @__PURE__ */ jsx16(
           "span",
           {
             style: {
@@ -1669,8 +1694,10 @@ function hydrateLabels(nodes) {
 }
 
 // src/graph/react/viewer/GraphToolbar.tsx
-import { Fragment as Fragment11, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
-var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs16(
+import { Panel } from "@xyflow/react";
+import { Fragment as Fragment12, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+var REACTFLOW_PANEL_MARGIN = 15;
+var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1682,12 +1709,12 @@ var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs16(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx16("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "12 5 19 12 12 19" })
+      /* @__PURE__ */ jsx17("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "12 5 19 12 12 19" })
     ]
   }
 );
-var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs16(
+var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1699,12 +1726,12 @@ var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs16(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "19 12 12 19 5 12" })
+      /* @__PURE__ */ jsx17("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "19 12 12 19 5 12" })
     ]
   }
 );
-var MINUS_ICON = /* @__PURE__ */ jsx16(
+var MINUS_ICON = /* @__PURE__ */ jsx17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1715,10 +1742,10 @@ var MINUS_ICON = /* @__PURE__ */ jsx16(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx16("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    children: /* @__PURE__ */ jsx17("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   }
 );
-var PLUS_ICON = /* @__PURE__ */ jsxs16(
+var PLUS_ICON = /* @__PURE__ */ jsxs17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1730,12 +1757,12 @@ var PLUS_ICON = /* @__PURE__ */ jsxs16(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-      /* @__PURE__ */ jsx16("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      /* @__PURE__ */ jsx17("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx17("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
     ]
   }
 );
-var FIT_VIEW_ICON = /* @__PURE__ */ jsxs16(
+var FIT_VIEW_ICON = /* @__PURE__ */ jsxs17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1747,14 +1774,14 @@ var FIT_VIEW_ICON = /* @__PURE__ */ jsxs16(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx16("polyline", { points: "15 3 21 3 21 9" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "9 21 3 21 3 15" }),
-      /* @__PURE__ */ jsx16("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-      /* @__PURE__ */ jsx16("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      /* @__PURE__ */ jsx17("polyline", { points: "15 3 21 3 21 9" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "9 21 3 21 3 15" }),
+      /* @__PURE__ */ jsx17("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+      /* @__PURE__ */ jsx17("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
     ]
   }
 );
-var BOXES_ICON = /* @__PURE__ */ jsxs16(
+var BOXES_ICON = /* @__PURE__ */ jsxs17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1766,22 +1793,22 @@ var BOXES_ICON = /* @__PURE__ */ jsxs16(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx16("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
-      /* @__PURE__ */ jsx16("path", { d: "m7 16.5-4.74-2.85" }),
-      /* @__PURE__ */ jsx16("path", { d: "m7 16.5 5-3" }),
-      /* @__PURE__ */ jsx16("path", { d: "M7 16.5v5.17" }),
-      /* @__PURE__ */ jsx16("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
-      /* @__PURE__ */ jsx16("path", { d: "m17 16.5-5-3" }),
-      /* @__PURE__ */ jsx16("path", { d: "m17 16.5 4.74-2.85" }),
-      /* @__PURE__ */ jsx16("path", { d: "M17 16.5v5.17" }),
-      /* @__PURE__ */ jsx16("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
-      /* @__PURE__ */ jsx16("path", { d: "M12 8 7.26 5.15" }),
-      /* @__PURE__ */ jsx16("path", { d: "m12 8 4.74-2.85" }),
-      /* @__PURE__ */ jsx16("path", { d: "M12 13.5V8" })
+      /* @__PURE__ */ jsx17("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
+      /* @__PURE__ */ jsx17("path", { d: "m7 16.5-4.74-2.85" }),
+      /* @__PURE__ */ jsx17("path", { d: "m7 16.5 5-3" }),
+      /* @__PURE__ */ jsx17("path", { d: "M7 16.5v5.17" }),
+      /* @__PURE__ */ jsx17("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
+      /* @__PURE__ */ jsx17("path", { d: "m17 16.5-5-3" }),
+      /* @__PURE__ */ jsx17("path", { d: "m17 16.5 4.74-2.85" }),
+      /* @__PURE__ */ jsx17("path", { d: "M17 16.5v5.17" }),
+      /* @__PURE__ */ jsx17("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
+      /* @__PURE__ */ jsx17("path", { d: "M12 8 7.26 5.15" }),
+      /* @__PURE__ */ jsx17("path", { d: "m12 8 4.74-2.85" }),
+      /* @__PURE__ */ jsx17("path", { d: "M12 13.5V8" })
     ]
   }
 );
-var FOLD_ALL_ICON = /* @__PURE__ */ jsxs16(
+var FOLD_ALL_ICON = /* @__PURE__ */ jsxs17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1793,15 +1820,15 @@ var FOLD_ALL_ICON = /* @__PURE__ */ jsxs16(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx16("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "2 2 6 6 2 6" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "22 2 18 6 22 6" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "2 22 6 18 2 18" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "22 22 18 18 22 18" })
+      /* @__PURE__ */ jsx17("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "2 2 6 6 2 6" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "22 2 18 6 22 6" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "2 22 6 18 2 18" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "22 22 18 18 22 18" })
     ]
   }
 );
-var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs16(
+var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1813,15 +1840,15 @@ var EXPAND_ALL_ICON = /* @__PURE__ */ jsxs16(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx16("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "3 3 7 7 3 7" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "21 3 17 7 21 7" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "3 21 7 17 3 17" }),
-      /* @__PURE__ */ jsx16("polyline", { points: "21 21 17 17 21 17" })
+      /* @__PURE__ */ jsx17("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "3 3 7 7 3 7" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "21 3 17 7 21 7" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "3 21 7 17 3 17" }),
+      /* @__PURE__ */ jsx17("polyline", { points: "21 21 17 17 21 17" })
     ]
   }
 );
-var SUN_ICON = /* @__PURE__ */ jsxs16(
+var SUN_ICON = /* @__PURE__ */ jsxs17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1833,19 +1860,19 @@ var SUN_ICON = /* @__PURE__ */ jsxs16(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "4" }),
-      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
-      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
-      /* @__PURE__ */ jsx16("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }),
-      /* @__PURE__ */ jsx16("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }),
-      /* @__PURE__ */ jsx16("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
-      /* @__PURE__ */ jsx16("line", { x1: "20", y1: "12", x2: "22", y2: "12" }),
-      /* @__PURE__ */ jsx16("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }),
-      /* @__PURE__ */ jsx16("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })
+      /* @__PURE__ */ jsx17("circle", { cx: "12", cy: "12", r: "4" }),
+      /* @__PURE__ */ jsx17("line", { x1: "12", y1: "2", x2: "12", y2: "4" }),
+      /* @__PURE__ */ jsx17("line", { x1: "12", y1: "20", x2: "12", y2: "22" }),
+      /* @__PURE__ */ jsx17("line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }),
+      /* @__PURE__ */ jsx17("line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }),
+      /* @__PURE__ */ jsx17("line", { x1: "2", y1: "12", x2: "4", y2: "12" }),
+      /* @__PURE__ */ jsx17("line", { x1: "20", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ jsx17("line", { x1: "4.93", y1: "19.07", x2: "6.34", y2: "17.66" }),
+      /* @__PURE__ */ jsx17("line", { x1: "17.66", y1: "6.34", x2: "19.07", y2: "4.93" })
     ]
   }
 );
-var MOON_ICON = /* @__PURE__ */ jsx16(
+var MOON_ICON = /* @__PURE__ */ jsx17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1856,10 +1883,10 @@ var MOON_ICON = /* @__PURE__ */ jsx16(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx16("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    children: /* @__PURE__ */ jsx17("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
   }
 );
-var MONITOR_ICON = /* @__PURE__ */ jsxs16(
+var MONITOR_ICON = /* @__PURE__ */ jsxs17(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1871,9 +1898,9 @@ var MONITOR_ICON = /* @__PURE__ */ jsxs16(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx16("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
-      /* @__PURE__ */ jsx16("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+      /* @__PURE__ */ jsx17("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+      /* @__PURE__ */ jsx17("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+      /* @__PURE__ */ jsx17("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
     ]
   }
 );
@@ -1914,17 +1941,21 @@ function GraphToolbar({
   expandAllDisabled = false,
   themeMode,
   onThemeModeChange,
-  rightOffset = 0
+  rightOffset = 0,
+  position
 }) {
   const themeToggleEnabled = themeMode !== void 0 && onThemeModeChange !== void 0;
+  const orientation = toolbarOrientation(position);
+  const dodgesDetailPanel = toolbarSide(position) === "right" && rightOffset > 0;
+  const panelStyle = dodgesDetailPanel ? { marginRight: REACTFLOW_PANEL_MARGIN + rightOffset } : void 0;
   const isVertical = direction === GRAPH_DIRECTION.TB || direction === GRAPH_DIRECTION.BT;
   const directionLabel = isVertical ? "Switch to horizontal layout" : "Switch to vertical layout";
   const controllersLabel = showControllers ? "Hide pipe controllers" : "Show pipe controllers \u2014 groups pipes by their controlling pipe";
   const foldAllSection = onFoldAll || onExpandAll;
   const foldAllTitle = foldAllDisabled ? "Fold all controllers (nothing to fold)" : "Fold all controllers";
   const expandAllTitle = expandAllDisabled ? "Expand all controllers (nothing to expand)" : "Expand all controllers";
-  return /* @__PURE__ */ jsxs16("div", { className: "graph-toolbar", style: { right: `${rightOffset + 8}px` }, children: [
-    onFoldAll && /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(Panel, { position, className: "graph-toolbar-panel", style: panelStyle, children: /* @__PURE__ */ jsxs17("div", { className: `graph-toolbar graph-toolbar--${orientation}`, children: [
+    onFoldAll && /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -1936,7 +1967,7 @@ function GraphToolbar({
         children: FOLD_ALL_ICON
       }
     ),
-    onExpandAll && /* @__PURE__ */ jsx16(
+    onExpandAll && /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -1948,8 +1979,8 @@ function GraphToolbar({
         children: EXPAND_ALL_ICON
       }
     ),
-    foldAllSection && /* @__PURE__ */ jsx16("div", { className: "graph-toolbar-separator" }),
-    /* @__PURE__ */ jsx16(
+    foldAllSection && /* @__PURE__ */ jsx17("div", { className: "graph-toolbar-separator" }),
+    /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -1960,7 +1991,7 @@ function GraphToolbar({
         children: BOXES_ICON
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -1971,8 +2002,8 @@ function GraphToolbar({
         children: isVertical ? ARROW_RIGHT_ICON : ARROW_DOWN_ICON
       }
     ),
-    (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx16("div", { className: "graph-toolbar-separator" }),
-    onZoomOut && /* @__PURE__ */ jsx16(
+    (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx17("div", { className: "graph-toolbar-separator" }),
+    onZoomOut && /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -1983,7 +2014,7 @@ function GraphToolbar({
         children: MINUS_ICON
       }
     ),
-    onZoomIn && /* @__PURE__ */ jsx16(
+    onZoomIn && /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -1994,7 +2025,7 @@ function GraphToolbar({
         children: PLUS_ICON
       }
     ),
-    onFitView && /* @__PURE__ */ jsx16(
+    onFitView && /* @__PURE__ */ jsx17(
       "button",
       {
         type: "button",
@@ -2005,9 +2036,9 @@ function GraphToolbar({
         children: FIT_VIEW_ICON
       }
     ),
-    themeToggleEnabled && /* @__PURE__ */ jsxs16(Fragment11, { children: [
-      /* @__PURE__ */ jsx16("div", { className: "graph-toolbar-separator" }),
-      /* @__PURE__ */ jsx16(
+    themeToggleEnabled && /* @__PURE__ */ jsxs17(Fragment12, { children: [
+      /* @__PURE__ */ jsx17("div", { className: "graph-toolbar-separator" }),
+      /* @__PURE__ */ jsx17(
         "button",
         {
           type: "button",
@@ -2019,11 +2050,11 @@ function GraphToolbar({
         }
       )
     ] })
-  ] });
+  ] }) });
 }
 
 // src/graph/react/nodes/controller/ControllerGroupNode.tsx
-import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
 var CONTROLLER_CONFIG = {
   PipeSequence: { badge: "Sequence", icon: "\u2192" },
   PipeParallel: { badge: "Parallel", icon: "//" },
@@ -2045,12 +2076,12 @@ function ControllerGroupNode({ data }) {
   const modifier = getControllerModifier(data.pipeType);
   const isCollapsible = (data.pipeType === "PipeParallel" || data.pipeType === "PipeBatch") && ((_a = data.childCount) != null ? _a : 0) > MAX_VISIBLE_CONTROLLER_CHILDREN;
   const hiddenCount = isCollapsible ? ((_b = data.childCount) != null ? _b : 0) - MAX_VISIBLE_CONTROLLER_CHILDREN : 0;
-  return /* @__PURE__ */ jsxs17("div", { className: `controller-group-node ${modifier}`, children: [
-    /* @__PURE__ */ jsxs17("div", { className: "controller-group-header", children: [
-      /* @__PURE__ */ jsx17("span", { className: "controller-group-icon", children: config.icon }),
-      /* @__PURE__ */ jsx17("span", { className: "controller-group-badge", children: config.badge }),
-      data.label && /* @__PURE__ */ jsx17("span", { className: "controller-group-label", children: data.label }),
-      data.onToggleFold && /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs18("div", { className: `controller-group-node ${modifier}`, children: [
+    /* @__PURE__ */ jsxs18("div", { className: "controller-group-header", children: [
+      /* @__PURE__ */ jsx18("span", { className: "controller-group-icon", children: config.icon }),
+      /* @__PURE__ */ jsx18("span", { className: "controller-group-badge", children: config.badge }),
+      data.label && /* @__PURE__ */ jsx18("span", { className: "controller-group-label", children: data.label }),
+      data.onToggleFold && /* @__PURE__ */ jsx18(
         "button",
         {
           type: "button",
@@ -2066,7 +2097,7 @@ function ControllerGroupNode({ data }) {
         }
       )
     ] }),
-    isCollapsible && /* @__PURE__ */ jsx17(
+    isCollapsible && /* @__PURE__ */ jsx18(
       "button",
       {
         className: "controller-group-collapse",
@@ -2087,7 +2118,7 @@ import { Handle, Position } from "@xyflow/react";
 
 // src/graph/react/nodes/pipe/PipeCardBase.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
 var PIPE_TYPE_BADGES2 = {
   PipeLLM: "LLM",
   PipeExtract: "Extract",
@@ -2095,6 +2126,7 @@ var PIPE_TYPE_BADGES2 = {
   PipeImgGen: "ImgGen",
   PipeSearch: "Search",
   PipeFunc: "Func",
+  PipeStructure: "Structure",
   PipeSignature: "Signature",
   PipeSequence: "Sequence",
   PipeParallel: "Parallel",
@@ -2136,17 +2168,17 @@ function PipeCardBase({ data, children }) {
   const controllerClass = isController ? " pipe-card--controller" : "";
   const signatureClass = isSignature ? " pipe-card--signature" : "";
   const badgeClass = isController ? "pipe-card-badge pipe-card-badge--controller" : isSignature ? "pipe-card-badge pipe-card-badge--signature" : "pipe-card-badge";
-  return /* @__PURE__ */ jsxs18("div", { className: `pipe-card ${dirClass}${controllerClass}${signatureClass}`, children: [
-    /* @__PURE__ */ jsxs18("div", { className: "pipe-card-header", children: [
-      /* @__PURE__ */ jsx18("span", { className: badgeClass, children: badge }),
-      /* @__PURE__ */ jsx18("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
-      /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs19("div", { className: `pipe-card ${dirClass}${controllerClass}${signatureClass}`, children: [
+    /* @__PURE__ */ jsxs19("div", { className: "pipe-card-header", children: [
+      /* @__PURE__ */ jsx19("span", { className: badgeClass, children: badge }),
+      /* @__PURE__ */ jsx19("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
+      /* @__PURE__ */ jsx19(
         "span",
         {
           className: "pipe-card-status",
           style: { color: statusConfig.color },
           title: statusConfig.label,
-          children: /* @__PURE__ */ jsx18(
+          children: /* @__PURE__ */ jsx19(
             "span",
             {
               className: `pipe-card-status-dot ${isRunning ? "pipe-card-status-dot--pulse" : ""}`,
@@ -2155,7 +2187,7 @@ function PipeCardBase({ data, children }) {
           )
         }
       ),
-      data.onExpand && /* @__PURE__ */ jsx18(
+      data.onExpand && /* @__PURE__ */ jsx19(
         "button",
         {
           type: "button",
@@ -2171,23 +2203,23 @@ function PipeCardBase({ data, children }) {
         }
       )
     ] }),
-    data.description && /* @__PURE__ */ jsx18("span", { className: "pipe-card-description", title: data.description, children: data.description }),
-    data.inputs.length > 0 && /* @__PURE__ */ jsxs18("div", { className: "pipe-card-io", children: [
-      /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-label", children: "INPUTS" }),
-      /* @__PURE__ */ jsxs18("div", { className: "pipe-card-io-pills", children: [
-        visibleInputs.map((input) => /* @__PURE__ */ jsxs18(
+    data.description && /* @__PURE__ */ jsx19("span", { className: "pipe-card-description", title: data.description, children: data.description }),
+    data.inputs.length > 0 && /* @__PURE__ */ jsxs19("div", { className: "pipe-card-io", children: [
+      /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-label", children: "INPUTS" }),
+      /* @__PURE__ */ jsxs19("div", { className: "pipe-card-io-pills", children: [
+        visibleInputs.map((input) => /* @__PURE__ */ jsxs19(
           "span",
           {
             className: "pipe-card-io-pill",
             title: `${input.name}: ${input.concept}`,
             children: [
-              /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-pill-name", children: input.name }),
-              /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-pill-concept", children: input.concept })
+              /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-pill-name", children: input.name }),
+              /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-pill-concept", children: input.concept })
             ]
           },
           input.name
         )),
-        hasMany && /* @__PURE__ */ jsx18(
+        hasMany && /* @__PURE__ */ jsx19(
           "button",
           {
             className: "pipe-card-io-more",
@@ -2200,16 +2232,16 @@ function PipeCardBase({ data, children }) {
         )
       ] })
     ] }),
-    data.outputs.length > 0 && /* @__PURE__ */ jsxs18("div", { className: "pipe-card-io", children: [
-      /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
-      /* @__PURE__ */ jsx18("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs18(
+    data.outputs.length > 0 && /* @__PURE__ */ jsxs19("div", { className: "pipe-card-io", children: [
+      /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
+      /* @__PURE__ */ jsx19("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs19(
         "span",
         {
           className: "pipe-card-io-pill",
           title: `${output.name}: ${output.concept}`,
           children: [
-            /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-pill-name", children: output.name }),
-            /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-pill-concept", children: output.concept })
+            /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-pill-name", children: output.name }),
+            /* @__PURE__ */ jsx19("span", { className: "pipe-card-io-pill-concept", children: output.concept })
           ]
         },
         output.name
@@ -2227,6 +2259,7 @@ var PIPE_CARD_REGISTRY = {
   PipeImgGen: PipeCardBase,
   PipeSearch: PipeCardBase,
   PipeFunc: PipeCardBase,
+  PipeStructure: PipeCardBase,
   PipeSignature: PipeCardBase,
   PipeSequence: PipeCardBase,
   PipeParallel: PipeCardBase,
@@ -2238,11 +2271,11 @@ function getPipeCardComponent(pipeType) {
 }
 
 // src/graph/react/nodes/pipe/PipeCardNode.tsx
-import { Fragment as Fragment12, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
 function PipeCardNode({ data }) {
   var _a;
   const Card = (_a = getPipeCardComponent(data.pipeType)) != null ? _a : PipeCardBase;
-  return /* @__PURE__ */ jsx19(Card, { data });
+  return /* @__PURE__ */ jsx20(Card, { data });
 }
 function PipeCardRFNode({
   data,
@@ -2251,15 +2284,15 @@ function PipeCardRFNode({
 }) {
   const payload = data.pipeCardData;
   if (!payload) return null;
-  return /* @__PURE__ */ jsxs19(Fragment12, { children: [
-    /* @__PURE__ */ jsx19(Handle, { type: "target", position: targetPosition }),
-    /* @__PURE__ */ jsx19(PipeCardNode, { data: payload }),
-    /* @__PURE__ */ jsx19(Handle, { type: "source", position: sourcePosition })
+  return /* @__PURE__ */ jsxs20(Fragment13, { children: [
+    /* @__PURE__ */ jsx20(Handle, { type: "target", position: targetPosition }),
+    /* @__PURE__ */ jsx20(PipeCardNode, { data: payload }),
+    /* @__PURE__ */ jsx20(Handle, { type: "source", position: sourcePosition })
   ] });
 }
 
 // src/graph/react/viewer/GraphViewer.tsx
-import { Fragment as Fragment13, jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
 var nodeTypes = __spreadProps(__spreadValues({}, controllerNodeTypes), {
   pipeCard: PipeCardRFNode
 });
@@ -2272,7 +2305,7 @@ function StuffNodeDetail({
   onOpenExternally
 }) {
   const conceptInfo = stuffData.concept && graphspec ? resolveConceptRef(graphspec, stuffData.concept) : void 0;
-  return /* @__PURE__ */ jsx20(Fragment13, { children: conceptInfo ? /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(Fragment14, { children: conceptInfo ? /* @__PURE__ */ jsx21(
     ConceptDetailPanel,
     {
       concept: conceptInfo,
@@ -2284,7 +2317,7 @@ function StuffNodeDetail({
     }
   ) : (
     /* Fallback: just show the StuffViewer if no concept info */
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       StuffViewer,
       {
         stuff: stuffData,
@@ -2306,6 +2339,10 @@ function resolveExternalThemeMode(themeProp, configTheme) {
 function resolveActiveTheme(mode, systemTheme) {
   return mode === GRAPH_THEME_MODE.SYSTEM ? systemTheme : mode;
 }
+function resolveToolbarPosition(positionProp, configPosition) {
+  var _a;
+  return (_a = positionProp != null ? positionProp : configPosition) != null ? _a : DEFAULT_GRAPH_CONFIG.toolbarPosition;
+}
 function cloneCachedNodes(nodes) {
   return nodes.map((n) => __spreadProps(__spreadValues({}, n), {
     position: __spreadValues({}, n.position),
@@ -2339,6 +2376,7 @@ function GraphViewer(props) {
     initialFoldMode,
     hideToolbar = false,
     theme: themeProp,
+    toolbarPosition: toolbarPositionProp,
     systemTheme: systemThemeProp,
     showThemeToggle = true,
     onThemeChange,
@@ -2483,7 +2521,7 @@ function GraphViewer(props) {
   React9.useEffect(() => {
     if (!initialDataRef.current) return;
     let cancelled = false;
-    (async () => {
+    void (async () => {
       try {
         const data = initialDataRef.current;
         if (!data) return;
@@ -2521,7 +2559,7 @@ function GraphViewer(props) {
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
           if (!cancelled && reactFlowRef.current) {
-            reactFlowRef.current.fitView({ padding: 0.1 });
+            void reactFlowRef.current.fitView({ padding: 0.1 });
           }
         }, 50);
       } catch (err) {
@@ -2593,7 +2631,7 @@ function GraphViewer(props) {
       _analysis: folded.analysis,
       _graphspec: graphspec
     };
-    (async () => {
+    void (async () => {
       try {
         const currentDirection = directionRef.current;
         const currentLayoutConfig = layoutConfigRef.current;
@@ -2638,13 +2676,13 @@ function GraphViewer(props) {
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
           if (!cancelled && reactFlowRef.current) {
-            reactFlowRef.current.fitView({ padding: 0.1 });
+            void reactFlowRef.current.fitView({ padding: 0.1 });
             if (initialZoomRef.current !== void 0 && initialZoomRef.current !== null) {
-              reactFlowRef.current.zoomTo(initialZoomRef.current);
+              void reactFlowRef.current.zoomTo(initialZoomRef.current);
             }
             if (panToTopRef.current) {
               const vp = reactFlowRef.current.getViewport();
-              reactFlowRef.current.setViewport({ x: vp.x, y: 20, zoom: vp.zoom });
+              void reactFlowRef.current.setViewport({ x: vp.x, y: 20, zoom: vp.zoom });
             }
           }
         }, 100);
@@ -2689,7 +2727,7 @@ function GraphViewer(props) {
       _analysis: folded.analysis,
       _graphspec: currentGraphspec
     };
-    (async () => {
+    void (async () => {
       try {
         const layouted = await getLayoutedElements(
           folded.nodes,
@@ -2725,7 +2763,7 @@ function GraphViewer(props) {
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
           if (!cancelled && reactFlowRef.current) {
-            reactFlowRef.current.fitView({ padding: 0.1 });
+            void reactFlowRef.current.fitView({ padding: 0.1 });
           }
         }, 50);
       } catch (err) {
@@ -2820,6 +2858,10 @@ function GraphViewer(props) {
   );
   const selectedSpecNode = (detailSelection == null ? void 0 : detailSelection.kind) === "pipe" && graphspec ? graphspec.nodes.find((n) => n.pipe_code === detailSelection.nodeData.pipeCode) : void 0;
   const detailOpen = detailSelection !== null || conceptOverride !== null;
+  const effectiveToolbarPosition = resolveToolbarPosition(
+    toolbarPositionProp,
+    config.toolbarPosition
+  );
   const rawAnalysis = (_c = rawGraphDataRef.current) == null ? void 0 : _c.analysis;
   const allControllerIds = rawAnalysis == null ? void 0 : rawAnalysis.controllerNodeIds;
   const foldAllProps = React9.useMemo(() => {
@@ -2838,13 +2880,13 @@ function GraphViewer(props) {
       expandAllDisabled: foldedControllers.size === 0
     };
   }, [showControllers, allControllerIds, foldedControllers]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       ref: containerRef,
       className: `react-flow-container react-flow-container--theme-${resolvedTheme} react-flow-container--mode-${mode}`,
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs21(
           ReactFlow,
           {
             nodes,
@@ -2862,18 +2904,49 @@ function GraphViewer(props) {
             minZoom: 0.1,
             proOptions: { hideAttribution: true },
             panActivationKeyCode: null,
-            children: /* @__PURE__ */ jsx20(
-              Background,
-              {
-                variant: BackgroundVariant.Dots,
-                gap: 20,
-                size: 1,
-                color: "var(--color-bg-dots)"
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx21(
+                Background,
+                {
+                  variant: BackgroundVariant.Dots,
+                  gap: 20,
+                  size: 1,
+                  color: "var(--color-bg-dots)"
+                }
+              ),
+              !hideToolbar && /* @__PURE__ */ jsx21(
+                GraphToolbar,
+                {
+                  direction,
+                  onDirectionChange: setDirection,
+                  showControllers,
+                  onShowControllersChange: setShowControllers,
+                  onZoomIn: () => {
+                    var _a2;
+                    void ((_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn());
+                  },
+                  onZoomOut: () => {
+                    var _a2;
+                    void ((_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut());
+                  },
+                  onFitView: () => {
+                    var _a2;
+                    void ((_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 }));
+                  },
+                  onFoldAll: foldAllProps.onFoldAll,
+                  onExpandAll: foldAllProps.onExpandAll,
+                  foldAllDisabled: foldAllProps.foldAllDisabled,
+                  expandAllDisabled: foldAllProps.expandAllDisabled,
+                  themeMode: showThemeToggle ? mode : void 0,
+                  onThemeModeChange: showThemeToggle ? setMode : void 0,
+                  rightOffset: detailOpen ? panelWidth : 0,
+                  position: effectiveToolbarPosition
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsxs21(
           DetailPanel,
           {
             isOpen: detailOpen,
@@ -2882,14 +2955,14 @@ function GraphViewer(props) {
             isDragging: isPanelDragging,
             onResizeHandleMouseDown: onResizeMouseDown,
             children: [
-              conceptOverride ? /* @__PURE__ */ jsx20(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx20(
+              conceptOverride ? /* @__PURE__ */ jsx21(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx21(
                 PipeDetailPanel,
                 {
                   node: selectedSpecNode,
                   spec: graphspec,
                   onConceptClick: handleConceptClick
                 }
-              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx20(
+              ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx21(
                 StuffNodeDetail,
                 {
                   nodeId: detailSelection.nodeId,
@@ -2903,34 +2976,6 @@ function GraphViewer(props) {
               renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)
             ]
           }
-        ),
-        !hideToolbar && /* @__PURE__ */ jsx20(
-          GraphToolbar,
-          {
-            direction,
-            onDirectionChange: setDirection,
-            showControllers,
-            onShowControllersChange: setShowControllers,
-            onZoomIn: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn();
-            },
-            onZoomOut: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut();
-            },
-            onFitView: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 });
-            },
-            onFoldAll: foldAllProps.onFoldAll,
-            onExpandAll: foldAllProps.onExpandAll,
-            foldAllDisabled: foldAllProps.foldAllDisabled,
-            expandAllDisabled: foldAllProps.expandAllDisabled,
-            themeMode: showThemeToggle ? mode : void 0,
-            onThemeModeChange: showThemeToggle ? setMode : void 0,
-            rightOffset: detailOpen ? panelWidth : 0
-          }
         )
       ]
     }