@scenario-labs/sdk 2.0.0 → 2.2.0

package/src/lib/workflow_converter.ts

@@ -47,6 +47,7 @@ export type WorkflowEditorNode =
     }
   | { id: string; type: 'transformText'; data: NodeCommonData & { value?: string } }
   | { id: string; type: 'splitText'; data: NodeCommonData & { splitDelimiter?: string } }
+  | { id: string; type: 'aspectRatio'; data: NodeCommonData & { output?: string } }
   | { id: string; type: 'groupItems'; data: NodeCommonData & { value?: string } }
   | {
       id: string;
@@ -60,6 +61,7 @@ export type WorkflowEditorNode =
       type: 'ifElse';
       data: NodeCommonData & { conditionBlocks?: WorkflowEditorConditionBlock[] };
     }
+  | { id: string; type: 'approval'; data: NodeCommonData & { message?: string } }
   | { id: string; type: string; data: NodeCommonData };
 
 export type WorkflowEditorEdge = {
@@ -67,6 +69,7 @@ export type WorkflowEditorEdge = {
   target: string;
   sourceHandle?: string | null;
   targetHandle?: string | null;
+  data?: { isForEachEndEdge?: boolean } | undefined;
 };
 
 export type WorkflowEditorCondition = {
@@ -84,12 +87,55 @@ export type WorkflowEditorModelInput = {
   name: string;
   type: string;
   inputs?: Array<{ name: string; type: string }>;
+  min?: number;
+  max?: number;
+  step?: number;
+  allowedValues?: string[];
+};
+
+export type WorkflowEditorResolutionPreset = {
+  width?: number;
+  height?: number;
 };
 
 export type WorkflowEditorModel = {
   id?: string;
   inputs?: WorkflowEditorModelInput[];
   tags?: string[];
+  uiConfig?: {
+    resolutionComponent?: {
+      widthInput?: string;
+      heightInput?: string;
+      presets?: WorkflowEditorResolutionPreset[];
+    };
+  };
+};
+
+const RUNNABLE_TYPES = new Set(['model', 'llm', 'forEach', 'forEachEnd']);
+export const ASPECT_RATIO_PRESETS = [
+  '16:9',
+  '3:2',
+  '4:3',
+  '5:4',
+  '1:1',
+  '4:5',
+  '3:4',
+  '2:3',
+  '9:16',
+] as const;
+
+export type AspectRatioBounds = {
+  minWidth: number;
+  maxWidth: number;
+  minHeight: number;
+  maxHeight: number;
+  multipleOf: number;
+};
+
+export type AspectRatioModelInputNames = {
+  widthInputName?: string | undefined;
+  heightInputName?: string | undefined;
+  aspectRatioInputName?: string | undefined;
 };
 
 export type WorkflowEditorFlowInputRef = {
@@ -122,6 +168,8 @@ export type WorkflowEditorFlowItem = {
   logicType?: 'if-else' | undefined;
   loopBodyNodeIds?: string[] | undefined;
   includeOutputsInWorkflowJob?: true | undefined;
+  dependsOn?: string[] | undefined;
+  label?: string | undefined;
 };
 
 // ---- Internal types ----
@@ -172,6 +220,119 @@ function getConditionalInputHandleId(nodeId: string): string {
   return `${nodeId}-source-conditional`;
 }
 
+function handleTypeIncludes(handleType: string | string[] | undefined, value: string): boolean {
+  if (Array.isArray(handleType)) return handleType.includes(value);
+  return handleType === value;
+}
+
+type ParsedAspectRatio = { width: number; height: number };
+
+function parseAspectRatio(aspectRatio: string | undefined): ParsedAspectRatio | undefined {
+  if (!aspectRatio) return undefined;
+  const [rawWidth, rawHeight] = aspectRatio.split(':');
+  const width = Number(rawWidth);
+  const height = Number(rawHeight);
+  if (
+    !Number.isFinite(width) ||
+    !Number.isFinite(height) ||
+    width <= 0 ||
+    height <= 0 ||
+    !Number.isInteger(width) ||
+    !Number.isInteger(height)
+  ) {
+    return undefined;
+  }
+  return { width, height };
+}
+
+function getGreatestCommonDivisor(a: number, b: number): number {
+  let x = Math.abs(Math.trunc(a));
+  let y = Math.abs(Math.trunc(b));
+  while (y) {
+    const temp = y;
+    y = x % y;
+    x = temp;
+  }
+  return x || 1;
+}
+
+function makeNumberAMultipleOfX(value: number, multipleOf: number): number {
+  if (multipleOf <= 0) return Math.round(value);
+  return Math.round(value / multipleOf) * multipleOf;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function normalizeAspectRatio(aspectRatio: string | undefined): string | undefined {
+  const parsed = parseAspectRatio(aspectRatio);
+  if (!parsed) return undefined;
+  const divisor = getGreatestCommonDivisor(parsed.width, parsed.height);
+  return `${parsed.width / divisor}:${parsed.height / divisor}`;
+}
+
+export function getAspectRatioModelInputNames(
+  model: WorkflowEditorModel | undefined,
+): AspectRatioModelInputNames {
+  if (!model) return {};
+
+  const widthInputName =
+    model.uiConfig?.resolutionComponent?.widthInput ??
+    model.inputs?.find((input) => input.name === 'width')?.name;
+  const heightInputName =
+    model.uiConfig?.resolutionComponent?.heightInput ??
+    model.inputs?.find((input) => input.name === 'height')?.name;
+  const aspectRatioInputName = model.inputs?.find((input) => input.name === 'aspectRatio')?.name;
+
+  return { widthInputName, heightInputName, aspectRatioInputName };
+}
+
+export function getAspectRatioBounds(
+  model: WorkflowEditorModel | undefined,
+  { widthInputName, heightInputName }: Pick<AspectRatioModelInputNames, 'widthInputName' | 'heightInputName'>,
+): AspectRatioBounds | undefined {
+  if (!model || !widthInputName || !heightInputName) return undefined;
+
+  const widthInput = model.inputs?.find((input) => input.name === widthInputName);
+  const heightInput = model.inputs?.find((input) => input.name === heightInputName);
+  const presets = model.uiConfig?.resolutionComponent?.presets;
+  const widthPresets = (presets ?? [])
+    .map((preset) => preset.width)
+    .filter((value): value is number => typeof value === 'number');
+  const heightPresets = (presets ?? [])
+    .map((preset) => preset.height)
+    .filter((value): value is number => typeof value === 'number');
+  const multipleOf = widthInput?.step ?? 8;
+
+  return {
+    maxWidth: widthInput?.max ?? (widthPresets.length > 0 ? Math.max(...widthPresets) : 2048),
+    minWidth: widthInput?.min ?? (widthPresets.length > 0 ? Math.min(...widthPresets) : 64),
+    maxHeight: heightInput?.max ?? (heightPresets.length > 0 ? Math.max(...heightPresets) : 2048),
+    minHeight: heightInput?.min ?? (heightPresets.length > 0 ? Math.min(...heightPresets) : 64),
+    multipleOf,
+  };
+}
+
+export function getDimensionsFromAspectRatio(args: {
+  aspectRatio: string;
+  bounds: AspectRatioBounds;
+}): { width: number; height: number } | undefined {
+  const parsed = parseAspectRatio(args.aspectRatio);
+  if (!parsed) return undefined;
+
+  const ratio = parsed.width / parsed.height;
+  let width = ratio >= 1 ? args.bounds.maxWidth : Math.round(args.bounds.maxHeight * ratio);
+  let height = ratio >= 1 ? Math.round(args.bounds.maxWidth / ratio) : args.bounds.maxHeight;
+
+  width = makeNumberAMultipleOfX(width, args.bounds.multipleOf);
+  height = makeNumberAMultipleOfX(height, args.bounds.multipleOf);
+  width = clamp(width, args.bounds.minWidth, args.bounds.maxWidth);
+  height = clamp(height, args.bounds.minHeight, args.bounds.maxHeight);
+
+  return { width, height };
+}
+
 function getForEachFlowListInputDescriptor(args: {
   listProvider: WorkflowEditorNode | undefined;
   outputHandle: WorkflowEditorHandleOutput | undefined;
@@ -444,14 +605,14 @@ function toStaticInput(name: string, type: string, value: unknown): WorkflowEdit
   return { name, type, value: value as string | number | string[] | boolean };
 }
 
-function isFormArray(value: unknown): value is Record<string, unknown>[] {
+function getIsFormArray(value: unknown): value is Record<string, unknown>[] {
   return (
     Array.isArray(value) &&
     (value as unknown[]).every((item) => typeof item === 'object' && item !== null && !Array.isArray(item))
   );
 }
 
-function isModelCompose(model: WorkflowEditorModel | undefined): boolean {
+function getIsModelCompose(model: WorkflowEditorModel | undefined): boolean {
   return !!model?.id && (model.tags ?? []).includes('compose');
 }
 
@@ -469,6 +630,120 @@ function getIsConditionallyExecuted(
   });
 }
 
+function buildDimensionLookupCEL(args: {
+  variable: string;
+  presets: Array<{ aspectRatio: string; width: number; height: number }>;
+  dimension: 'width' | 'height';
+  fallback: number;
+}): string {
+  let expression = String(args.fallback);
+  for (let i = args.presets.length - 1; i >= 0; i--) {
+    const preset = args.presets[i]!;
+    expression = `trim(${args.variable}) == '${preset.aspectRatio}' ? ${
+      preset[args.dimension]
+    } : ${expression}`;
+  }
+  return expression;
+}
+
+function applyAspectRatioInputs(args: {
+  flow: WorkflowEditorFlowItem[];
+  flowInputs: WorkflowEditorFlowInput[];
+  flowId: string;
+  aspectRatioRef: WorkflowEditorFlowInputRef;
+  model: WorkflowEditorModel;
+}): void {
+  const modelInputNames = getAspectRatioModelInputNames(args.model);
+  const modelBounds = getAspectRatioBounds(args.model, modelInputNames);
+  const { widthInputName, heightInputName, aspectRatioInputName } = modelInputNames;
+
+  if (aspectRatioInputName) {
+    const transformId = `${args.flowId}_aspectRatio_value`;
+    args.flow.push({
+      id: transformId,
+      type: 'transform',
+      logic: { transform: 'trim(aspectRatio)' },
+      inputs: [{ name: 'aspectRatio', type: 'string', ref: args.aspectRatioRef }],
+    });
+
+    setOrPushFlowInput(
+      args.flowInputs,
+      args.flowInputs.findIndex((inp) => inp.name === aspectRatioInputName),
+      {
+        name: aspectRatioInputName,
+        type: 'string',
+        ref: { node: transformId, name: 'all' },
+      },
+    );
+  }
+
+  if (widthInputName && heightInputName && modelBounds) {
+    const presetDimensions = ASPECT_RATIO_PRESETS.flatMap((preset) => {
+      const dims = getDimensionsFromAspectRatio({ aspectRatio: preset, bounds: modelBounds });
+      if (!dims) return [];
+      const normalized = normalizeAspectRatio(preset);
+      if (!normalized) return [];
+      return [{ aspectRatio: normalized, ...dims }];
+    });
+
+    const fallbackDimensions = presetDimensions.find((preset) => preset.aspectRatio === '1:1') ??
+      presetDimensions[0] ?? {
+        width: modelBounds.maxWidth,
+        height: modelBounds.maxHeight,
+      };
+
+    const widthTransformId = `${args.flowId}_aspectRatio_width`;
+    const heightTransformId = `${args.flowId}_aspectRatio_height`;
+
+    args.flow.push({
+      id: widthTransformId,
+      type: 'transform',
+      logic: {
+        transform: buildDimensionLookupCEL({
+          variable: 'aspectRatio',
+          presets: presetDimensions,
+          dimension: 'width',
+          fallback: fallbackDimensions.width,
+        }),
+      },
+      inputs: [{ name: 'aspectRatio', type: 'string', ref: args.aspectRatioRef }],
+    });
+
+    args.flow.push({
+      id: heightTransformId,
+      type: 'transform',
+      logic: {
+        transform: buildDimensionLookupCEL({
+          variable: 'aspectRatio',
+          presets: presetDimensions,
+          dimension: 'height',
+          fallback: fallbackDimensions.height,
+        }),
+      },
+      inputs: [{ name: 'aspectRatio', type: 'string', ref: args.aspectRatioRef }],
+    });
+
+    setOrPushFlowInput(
+      args.flowInputs,
+      args.flowInputs.findIndex((inp) => inp.name === widthInputName),
+      {
+        name: widthInputName,
+        type: 'number',
+        ref: { node: widthTransformId, name: 'all' },
+      },
+    );
+    setOrPushFlowInput(
+      args.flowInputs,
+      args.flowInputs.findIndex((inp) => inp.name === heightInputName),
+      {
+        name: heightInputName,
+        type: 'number',
+        ref: { node: heightTransformId, name: 'all' },
+      },
+    );
+  }
+}
+
 function getForEachBodyEditorNodeIds(
   forEachId: string,
   forEachEndId: string,
@@ -528,8 +803,6 @@ function getNodeOutputValue(
   return undefined;
 }
 
-const RUNNABLE_TYPES = new Set(['model', 'llm', 'forEach', 'forEachEnd']);
-
 function internalGetConnectedNodes(
   nodes: WorkflowEditorNode[],
   edges: WorkflowEditorEdge[],
@@ -582,21 +855,36 @@ function internalGetConnectedNodes(
   return nodes.filter((n) => idSet.has(n.id));
 }
 
+function resolveIfElseConditionField(
+  field: string,
+  candidateNodes: WorkflowEditorNode[],
+): { nodeId: string; targetHandleId?: string } | undefined {
+  const byExactId = candidateNodes.find((n) => n.id === field);
+  if (byExactId) return { nodeId: field };
+  for (const node of candidateNodes) {
+    for (const handle of node.data.outputHandles ?? []) {
+      if (`${node.id}_${handle.name}` === field) {
+        return { nodeId: node.id, targetHandleId: handle.id };
+      }
+    }
+  }
+  return undefined;
+}
+
 function normalizeNodes(nodes: WorkflowEditorNode[]): WorkflowEditorNode[] {
   return nodes.map((node) => {
     if (node.type !== 'model' && node.type !== 'llm') return node;
-    const hasType = (t: string | string[] | undefined, v: string) =>
-      Array.isArray(t) ? t.includes(v) : t === v;
     const inputHandles = (node.data.inputHandles ?? [])
       .flatMap((h) => (h.subHandles ? h.subHandles : [h]))
       .filter(
         (h) =>
-          hasType(h.type, 'conditional') ||
-          hasType(h.type, 'prompt') ||
-          hasType(h.type, 'image') ||
-          hasType(h.type, 'video') ||
-          hasType(h.type, '3d') ||
-          hasType(h.type, 'audio') ||
+          handleTypeIncludes(h.type, 'conditional') ||
+          handleTypeIncludes(h.type, 'aspectRatio') ||
+          handleTypeIncludes(h.type, 'prompt') ||
+          handleTypeIncludes(h.type, 'image') ||
+          handleTypeIncludes(h.type, 'video') ||
+          handleTypeIncludes(h.type, '3d') ||
+          handleTypeIncludes(h.type, 'audio') ||
           (node.type === 'llm' && h.name === 'textInputs'),
       );
     return { ...node, data: { ...node.data, inputHandles } } as WorkflowEditorNode;
@@ -615,25 +903,31 @@ function normalizeNodes(nodes: WorkflowEditorNode[]): WorkflowEditorNode[] {
  * await client.workflows.update(workflowId, { flow: flow as WorkflowUpdateParams.Flow[] });
  * ```
  */
-export function convertWorkflowEditorToFlow(params: {
+export type ConvertWorkflowEditorToFlowParams = {
   nodes: WorkflowEditorNode[];
   edges: WorkflowEditorEdge[];
   inputKeys: string[];
   /** Optional model resolver — return the model object, 'unknown', or undefined. */
   getModel?: (modelId: string) => WorkflowEditorModel | 'unknown' | undefined;
-}): WorkflowEditorFlowItem[] {
+};
+
+export function convertWorkflowEditorToFlow(
+  params: ConvertWorkflowEditorToFlowParams,
+): WorkflowEditorFlowItem[] {
   const { edges, inputKeys } = params;
   const nodes = normalizeNodes(params.nodes);
 
   const inputNodeIds = nodes.filter((n) => !!n.data.isInput).map((n) => n.id);
 
   const selectedOutputNodes = nodes.filter(
-    (n) => (n.type === 'model' || n.type === 'forEachEnd') && !!n.data.isOutput,
+    (n) => (n.type === 'model' || n.type === 'forEachEnd' || n.type === 'llm') && !!n.data.isOutput,
   );
   const selectedOutputNodeIds = selectedOutputNodes.map((n) => n.id);
   const selectedOutputModelNodeIds = new Set(
     selectedOutputNodes
-      .filter((n): n is WorkflowEditorNode & { type: 'model' } => n.type === 'model')
+      .filter(
+        (n): n is WorkflowEditorNode & { type: 'model' | 'llm' } => n.type === 'model' || n.type === 'llm',
+      )
       .map((n) => n.id),
   );
 
@@ -675,6 +969,12 @@ export function convertWorkflowEditorToFlow(params: {
       .map((n) => [n.id, nodeIdToFlowId(n.id)]),
   );
   const nodeIdToInputNameMap = new Map<string, string>(inputNodeIds.map((id) => [id, nodeIdToFlowId(id)]));
+  const approvalByApprovedNodeId = buildApprovalByApprovedNodeIdMap({
+    nodes,
+    edges,
+    nodesInSelectedBranches,
+    selectedOutputNodeIds,
+  });
   const nodeHandleTransformMap = new Map<string, string>();
 
   const ctx: SourceRefContext = {
@@ -751,12 +1051,17 @@ export function convertWorkflowEditorToFlow(params: {
       const model = remoteModel === 'unknown' ? undefined : remoteModel;
       const modelInputs = model?.inputs;
       const conditionalHandleId = getConditionalInputHandleId(node.id);
+      const aspectRatioEdges: WorkflowEditorEdge[] = [];
 
       const edgesByInput = new Map<string, WorkflowEditorEdge[]>();
       for (const edge of incomingEdges) {
         if (edge.sourceHandle === conditionalHandleId) continue;
         const handle = getInputHandle(edge, node.data.inputHandles);
         if (!handle?.name) continue;
+        if (handleTypeIncludes(handle.type, 'aspectRatio')) {
+          aspectRatioEdges.push(edge);
+          continue;
+        }
         const existing = edgesByInput.get(handle.name);
         if (existing) existing.push(edge);
         else edgesByInput.set(handle.name, [edge]);
@@ -768,7 +1073,7 @@ export function convertWorkflowEditorToFlow(params: {
           const modelInput = modelInputs?.find((inp) => inp.name === key);
 
           if (modelInput?.type === 'inputs_array') {
-            if (!isFormArray(value)) continue;
+            if (!getIsFormArray(value)) continue;
             const nestedInputs = modelInput.inputs ?? [];
             const items: WorkflowEditorFlowInput[][] = [];
 
@@ -787,7 +1092,7 @@ export function convertWorkflowEditorToFlow(params: {
                 }
               }
               const isValid =
-                isModelCompose(model) ? getHasComposeLayerSourceInput(itemInputs) : itemInputs.length > 0;
+                getIsModelCompose(model) ? getHasComposeLayerSourceInput(itemInputs) : itemInputs.length > 0;
               if (isValid) items.push(itemInputs);
             }
             if (items.length > 0) flowInputs.push({ name: key, type: 'inputs_array', items });
@@ -803,6 +1108,19 @@ export function convertWorkflowEditorToFlow(params: {
         }
       }
 
+      if (aspectRatioEdges.length > 0 && model) {
+        const aspectRatioRef = getSourceRef(aspectRatioEdges[0]!, ctx);
+        if (aspectRatioRef) {
+          applyAspectRatioInputs({
+            flow,
+            flowInputs,
+            flowId,
+            aspectRatioRef,
+            model,
+          });
+        }
+      }
+
       for (const [inputName, inputEdges] of edgesByInput) {
         const existingIndex = flowInputs.findIndex((inp) => inp.name === inputName);
         const modelInput = modelInputs?.find((inp) => inp.name === inputName);
@@ -871,7 +1189,7 @@ export function convertWorkflowEditorToFlow(params: {
               const isRequired =
                 (targetNode?.type === 'asset' &&
                   !!(targetNode.data as { isRequired?: boolean }).isRequired) ||
-                isModelCompose(model);
+                getIsModelCompose(model);
               transformVariables.push({ name: targetNodeKey, isArray: isArr, isRequired });
 
               if (
@@ -947,7 +1265,9 @@ export function convertWorkflowEditorToFlow(params: {
         modelId: nodeData.modelId,
         inputs: flowInputs.length > 0 ? flowInputs : undefined,
         includeOutputsInWorkflowJob:
-          node.type === 'model' && selectedOutputModelNodeIds.has(node.id) ? true : undefined,
+          (node.type === 'model' || node.type === 'llm') && selectedOutputModelNodeIds.has(node.id) ?
+            true
+          : undefined,
       });
 
       ensureInputVideoTransformsAdded();
@@ -1011,6 +1331,19 @@ export function convertWorkflowEditorToFlow(params: {
         addVideoFirstLastFrameTransforms(node.id, flowId, node, edges, flow, nodeHandleTransformMap);
       }
 
+      // ------------------------------------
+      // AspectRatio -> transform with ratio literal
+      // ------------------------------------
+    } else if (node.type === 'aspectRatio') {
+      const flowInputs = collectConditionalConnectionInputs(incomingEdges, node.id, ctx);
+      const value = (node.data as { output?: string }).output || '1:1';
+      flow.push({
+        id: flowId,
+        type: 'transform',
+        logic: { transform: `'${escapeCELString(value)}'` },
+        inputs: flowInputs.length > 0 ? flowInputs : undefined,
+      });
+
       // ------------------------------------
       // TransformText -> transform (CEL)
       // ------------------------------------
@@ -1084,7 +1417,7 @@ export function convertWorkflowEditorToFlow(params: {
         if (!ref) continue;
         const outHandle = targetNode.data.outputHandles?.find((h) => h.id === edge.targetHandle);
         const outHandleName = outHandle?.name ?? 'output';
-        const varName = getOutputHandleVarName(targetNode.id, outHandleName);
+        const varName = `${targetNode.id}_${outHandleName}`;
         const isArr =
           (targetNode.type === 'asset' && !!(targetNode.data as { isMultiple?: boolean }).isMultiple) ||
           targetNode.type === 'groupItems' ||
@@ -1199,16 +1532,50 @@ export function convertWorkflowEditorToFlow(params: {
         }
       }
 
-      for (const fieldNodeId of fieldsUsed) {
+      const edgesIntoIfElse = edges.filter((e) => e.target === node.id);
+      for (const fieldKey of fieldsUsed) {
+        const resolved = resolveIfElseConditionField(fieldKey, nodes);
+        const fieldNodeId = resolved?.nodeId;
+        if (!fieldNodeId) continue;
+
+        const outputHandleName =
+          resolved?.targetHandleId !== undefined ?
+            nodes
+              .find((n) => n.id === fieldNodeId)
+              ?.data.outputHandles?.find((h) => h.id === resolved.targetHandleId)?.name ?? 'output'
+          : 'output';
+
+        const celVarName = getOutputHandleVarName(fieldNodeId, outputHandleName);
+        nodeIdToInputNameMap.set(fieldKey, celVarName);
+
+        const edgeToIfElse =
+          edgesIntoIfElse
+            .filter((e) => e.source === fieldNodeId)
+            .find((e) => {
+              if (resolved.targetHandleId === undefined) return true;
+              return e.sourceHandle === resolved.targetHandleId;
+            }) ?? edgesIntoIfElse.find((e) => e.source === fieldNodeId);
+
         if (inputNodeIds.includes(fieldNodeId)) {
-          const inputName = nodeIdToInputNameMap.get(fieldNodeId);
-          if (inputName)
-            flowInputs.push({ name: inputName, type: 'string', ref: { node: 'workflow', name: inputName } });
+          const workflowInputName = nodeIdToInputNameMap.get(fieldNodeId);
+          if (workflowInputName) {
+            const ref =
+              edgeToIfElse ?
+                getSourceRef(edgeToIfElse, ctx)
+              : { node: 'workflow' as const, name: workflowInputName };
+            flowInputs.push({
+              name: celVarName,
+              type: 'string',
+              ref: ref ?? { node: 'workflow', name: workflowInputName },
+            });
+          }
         } else {
+          const refFromEdge = edgeToIfElse ? getSourceRef(edgeToIfElse, ctx) : undefined;
           const targetFlowId = nodeIdToFlowIdMap.get(fieldNodeId);
-          if (targetFlowId) {
-            flowInputs.push({ name: targetFlowId, type: 'string', ref: { node: targetFlowId, name: 'all' } });
-            nodeIdToInputNameMap.set(fieldNodeId, targetFlowId);
+          if (refFromEdge) {
+            flowInputs.push({ name: celVarName, type: 'string', ref: refFromEdge });
+          } else if (targetFlowId) {
+            flowInputs.push({ name: celVarName, type: 'string', ref: { node: targetFlowId, name: 'all' } });
           }
         }
       }
@@ -1246,5 +1613,97 @@ export function convertWorkflowEditorToFlow(params: {
     forEachFlowItem.loopBodyNodeIds = forEachLoopFlowIds.get(forEachId) ?? [];
   }
 
+  applyApprovalsToFlow({ flow, edges, approvalByApprovedNodeId, nodeIdToFlowIdMap });
+
   return flow;
 }
+
+// ---- Approval helpers ----
+
+interface ApprovalInfo {
+  approvalFlowId: string;
+  approvedFlowId: string;
+  message: string;
+}
+
+function buildApprovalByApprovedNodeIdMap({
+  nodes,
+  edges,
+  nodesInSelectedBranches,
+  selectedOutputNodeIds,
+}: {
+  nodes: WorkflowEditorNode[];
+  edges: WorkflowEditorEdge[];
+  nodesInSelectedBranches: Set<string>;
+  selectedOutputNodeIds: string[];
+}): Map<string, ApprovalInfo> {
+  const result = new Map<string, ApprovalInfo>();
+  for (const approvalNode of nodes) {
+    if (approvalNode.type !== 'approval') continue;
+    const approvalEdge = edges.find(
+      (e) => e.source === approvalNode.id && e.sourceHandle === `${approvalNode.id}-source-approval`,
+    );
+    if (!approvalEdge) continue;
+    const approvedNodeId = approvalEdge.target;
+    if (!nodesInSelectedBranches.has(approvedNodeId) && !selectedOutputNodeIds.includes(approvedNodeId))
+      continue;
+    const approvedNode = nodes.find((n) => n.id === approvedNodeId);
+    if (!approvedNode) continue;
+    const approvedFlowId =
+      approvedNode.type === 'forEachEnd' ?
+        (approvedNode.data as { parentNodeId?: string }).parentNodeId ?
+          nodeIdToFlowId((approvedNode.data as { parentNodeId?: string }).parentNodeId!)
+        : undefined
+      : nodeIdToFlowId(approvedNodeId);
+    if (!approvedFlowId) continue;
+    result.set(approvedNodeId, {
+      approvalFlowId: nodeIdToFlowId(approvalNode.id),
+      approvedFlowId,
+      message: (approvalNode.data as { message?: string }).message ?? '',
+    });
+  }
+  return result;
+}
+
+function applyApprovalsToFlow({
+  flow,
+  edges,
+  approvalByApprovedNodeId,
+  nodeIdToFlowIdMap,
+}: {
+  flow: WorkflowEditorFlowItem[];
+  edges: WorkflowEditorEdge[];
+  approvalByApprovedNodeId: Map<string, ApprovalInfo>;
+  nodeIdToFlowIdMap: Map<string, string>;
+}): void {
+  if (approvalByApprovedNodeId.size === 0) return;
+
+  const flowIdToWorkflowNodeId = new Map<string, string>(
+    [...nodeIdToFlowIdMap.entries()].map(([nodeId, flowId]) => [flowId, nodeId]),
+  );
+
+  for (const flowItem of flow) {
+    const workflowNodeId = flowIdToWorkflowNodeId.get(flowItem.id);
+    if (!workflowNodeId) continue;
+    const dependsOn = new Set(flowItem.dependsOn ?? []);
+    const incomingEdges = edges.filter(
+      (e) =>
+        e.source === workflowNodeId &&
+        !(e.data as { isForEachEndEdge?: boolean } | undefined)?.isForEachEndEdge,
+    );
+    for (const edge of incomingEdges) {
+      const approval = approvalByApprovedNodeId.get(edge.target);
+      if (approval) dependsOn.add(approval.approvalFlowId);
+    }
+    if (dependsOn.size > 0) flowItem.dependsOn = [...dependsOn].sort();
+  }
+
+  for (const approvalInfo of approvalByApprovedNodeId.values()) {
+    flow.push({
+      id: approvalInfo.approvalFlowId,
+      type: 'user-approval',
+      dependsOn: [approvalInfo.approvedFlowId],
+      label: approvalInfo.message,
+    });
+  }
+}