Add Data Transform and Loop nodes with Workflow Analytics Profiler

frontend/src/flow/AgentNode.tsx

@@ -14,6 +14,8 @@ const KIND_COLOR: Record<string, string> = {
   http: "hsl(var(--node-http))",
   script: "hsl(var(--node-script))",
   note: "hsl(45 90% 48%)",
+  transform: "hsl(185 75% 40%)",
+  loop: "hsl(280 65% 50%)",
 };
 
 interface ExtraData extends AgentNodeData {

frontend/src/flow/Palette.tsx

@@ -17,6 +17,8 @@ const KIND_COLOR: Record<string, string> = {
   http: "hsl(var(--node-http))",
   script: "hsl(var(--node-script))",
   note: "hsl(45 90% 48%)",
+  transform: "hsl(185 75% 40%)",
+  loop: "hsl(280 65% 50%)",
 };
 
 export function Palette({ onAdd }: Props) {

frontend/src/flow/codegen.ts

@@ -432,6 +432,38 @@ export function generatePython(
           `# ${c.content ? c.content.replace(/\n/g, "\n# ") : "(empty note)"}`,
           `return "next"`,
         ].join("\n");
+      case "transform": {
+        const op = (c.operation || "json_map").toLowerCase();
+        const src = pyStr(c.source_path || "state");
+        const tgt = pyStr(c.target_key || "transformed_result");
+        const param = pyStr(c.param || "");
+        return [
+          `# Data Transform op=${op}`,
+          `source_val = state.get(${src}, state.last)`,
+          `param_val = interpolate(${param}, state)`,
+          `result = {"op": ${pyStr(op)}, "source": source_val, "param": param_val}`,
+          `state.set(${tgt}, result)`,
+          `state.last = result`,
+          `return "next"`,
+        ].join("\n");
+      }
+      case "loop": {
+        const itemsPath = pyStr(c.items_path || "state.items");
+        const outputKey = pyStr(c.output_key || "loop_results");
+        const tmpl = pyStr(c.transform_template || "");
+        const maxIter = parseInt(c.max_iterations || "50", 10) || 50;
+        return [
+          `# Loop Iterator items=${itemsPath}`,
+          `raw_items = state.get(${itemsPath}, [])`,
+          `items_list = raw_items if isinstance(raw_items, list) else [raw_items] if raw_items else []`,
+          `mapped_results = []`,
+          `for idx, item in enumerate(items_list[:${maxIter}]):`,
+          `    mapped_results.append(interpolate(${tmpl}, state) if ${tmpl} else item)`,
+          `state.set(${outputKey}, mapped_results)`,
+          `state.last = mapped_results`,
+          `return "next"`,
+        ].join("\n");
+      }
       default: {
         const _exhaustive: never = d.kind as never;
         return `return "next"  # unknown kind ${_exhaustive}`;
@@ -626,6 +658,34 @@ export function generateJavaScript(
           `// ${c.content ? c.content.replace(/\n/g, "\n// ") : "(empty note)"}`,
           `return "next";`,
         ].join("\n");
+      case "transform": {
+        const op = (c.operation || "json_map").toLowerCase();
+        const src = JSON.stringify(c.source_path || "state");
+        const tgt = JSON.stringify(c.target_key || "transformed_result");
+        const param = JSON.stringify(c.param || "");
+        return [
+          `const sourceVal = state.get(${src}) ?? state.last;`,
+          `const paramVal = interpolate(${param}, state);`,
+          `const result = { op: "${op}", source: sourceVal, param: paramVal };`,
+          `state.set(${tgt}, result);`,
+          `state.last = result;`,
+          `return "next";`,
+        ].join("\n");
+      }
+      case "loop": {
+        const itemsPath = JSON.stringify(c.items_path || "state.items");
+        const outputKey = JSON.stringify(c.output_key || "loop_results");
+        const tmpl = JSON.stringify(c.transform_template || "");
+        const maxIter = parseInt(c.max_iterations || "50", 10) || 50;
+        return [
+          `const rawItems = state.get(${itemsPath}) ?? [];`,
+          `const itemsList = Array.isArray(rawItems) ? rawItems : [rawItems];`,
+          `const mapped = itemsList.slice(0, ${maxIter}).map(item => interpolate(${tmpl}, state) || item);`,
+          `state.set(${outputKey}, mapped);`,
+          `state.last = mapped;`,
+          `return "next";`,
+        ].join("\n");
+      }
       default:
         return `return "next";`;
     }
@@ -677,4 +737,4 @@ export function generateCode(
 }
 
 // also export the kind set for sanity
-export const ALL_KINDS: AgentNodeKind[] = ["trigger","llm","tool","router","subagent","memory","human","sink","http","script","note"];
+export const ALL_KINDS: AgentNodeKind[] = ["trigger","llm","tool","router","subagent","memory","human","sink","http","script","note","transform","loop"];

frontend/src/flow/runFlow.ts

@@ -96,6 +96,22 @@ function getPath(obj: Record<string, unknown>, path: string): unknown {
   }, obj);
 }
 
+/**
+ * Recursively flattens a nested object structure into a single-level object with dot-separated keys.
+ */
+function flattenObject(obj: Record<string, unknown>, prefix = ""): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(obj)) {
+    const newKey = prefix ? `${prefix}.${key}` : key;
+    if (value && typeof value === "object" && !Array.isArray(value) && Object.keys(value).length > 0) {
+      Object.assign(result, flattenObject(value as Record<string, unknown>, newKey));
+    } else {
+      result[newKey] = value;
+    }
+  }
+  return result;
+}
+
 /**
  * Evaluates the output state of the current node to select the matching outgoing edge.
  * Prioritizes on_error edges if an error occurred, router conditions, tool_results,
@@ -478,6 +494,149 @@ export async function runNode(
         annotationOnly: true,
       };
     }
+    case "transform": {
+      const op = (cfg.operation || "json_map").toLowerCase();
+      const sourcePath = (cfg.source_path || "state").trim();
+      const targetKey = (cfg.target_key || "transformed_result").trim();
+      const param = cfg.param || "";
+
+      // Resolve source value
+      let sourceVal: unknown;
+      if (!sourcePath || sourcePath === "state") {
+        sourceVal = state;
+      } else {
+        const cleanPath = sourcePath.startsWith("state.") ? sourcePath.slice(6) : sourcePath;
+        sourceVal = getPath(state, cleanPath) ?? state.last_output;
+      }
+
+      let result: unknown;
+
+      if (op === "pick_fields") {
+        const fields = param.split(",").map((f) => f.trim()).filter(Boolean);
+        if (typeof sourceVal === "object" && sourceVal !== null && !Array.isArray(sourceVal)) {
+          const picked: Record<string, unknown> = {};
+          const sourceObj = sourceVal as Record<string, unknown>;
+          fields.forEach((f) => {
+            if (f in sourceObj) picked[f] = sourceObj[f];
+          });
+          result = picked;
+        } else {
+          result = sourceVal;
+        }
+      } else if (op === "template_string") {
+        result = interpolate(param, state, globalsList, secretsList);
+      } else if (op === "set_keys") {
+        let patch: Record<string, unknown> = {};
+        if (param.trim()) {
+          try {
+            const interpolatedParam = interpolate(param, state, globalsList, secretsList);
+            patch = JSON.parse(interpolatedParam);
+          } catch {
+            patch = { value: interpolate(param, state, globalsList, secretsList) };
+          }
+        }
+        if (typeof sourceVal === "object" && sourceVal !== null && !Array.isArray(sourceVal)) {
+          result = { ...(sourceVal as Record<string, unknown>), ...patch };
+        } else {
+          result = { ...patch };
+        }
+      } else if (op === "flatten_object") {
+        if (typeof sourceVal === "object" && sourceVal !== null && !Array.isArray(sourceVal)) {
+          result = flattenObject(sourceVal as Record<string, unknown>);
+        } else {
+          result = sourceVal;
+        }
+      } else {
+        // Default json_map
+        if (param.trim()) {
+          try {
+            const interpolatedParam = interpolate(param, state, globalsList, secretsList);
+            const mapping = JSON.parse(interpolatedParam);
+            if (typeof mapping === "object" && mapping !== null && !Array.isArray(mapping)) {
+              const mappedObj: Record<string, unknown> = {};
+              const sourceObj = (typeof sourceVal === "object" && sourceVal !== null ? sourceVal : state) as Record<string, unknown>;
+              Object.entries(mapping as Record<string, string>).forEach(([newKey, origPath]) => {
+                const cleanOrigPath = String(origPath).startsWith("state.") ? String(origPath).slice(6) : String(origPath);
+                mappedObj[newKey] = getPath(sourceObj, cleanOrigPath) ?? getPath(state, cleanOrigPath) ?? origPath;
+              });
+              result = mappedObj;
+            } else {
+              result = mapping;
+            }
+          } catch {
+            result = interpolate(param, state, globalsList, secretsList);
+          }
+        } else {
+          result = sourceVal;
+        }
+      }
+
+      state[targetKey] = result;
+      return result;
+    }
+    case "loop": {
+      const itemsPath = (cfg.items_path || "state.items").trim();
+      const itemVar = (cfg.item_var || "item").trim();
+      const outputKey = (cfg.output_key || "loop_results").trim();
+      const template = cfg.transform_template || "";
+      const maxIter = parseIntOr(cfg.max_iterations, 50);
+
+      const cleanPath = itemsPath.startsWith("state.") ? itemsPath.slice(6) : itemsPath;
+      const rawItems = getPath(state, cleanPath) ?? (cleanPath in state ? state[cleanPath] : undefined);
+
+      let itemsArray: unknown[] = [];
+      if (Array.isArray(rawItems)) {
+        itemsArray = rawItems;
+      } else if (rawItems !== undefined && rawItems !== null) {
+        itemsArray = [rawItems];
+      }
+
+      const truncatedItems = itemsArray.slice(0, maxIter);
+      const mappedResults: unknown[] = [];
+
+      for (const item of truncatedItems) {
+        const itemScope: Record<string, unknown> = { ...state, [itemVar]: item };
+        if (!template.trim()) {
+          mappedResults.push(item);
+        } else if (template.includes("{{")) {
+          let interpolated = template;
+          if (globalsList) {
+            globalsList.forEach((g) => {
+              interpolated = interpolated.replace(new RegExp(`\\{\\{\\s*global\\.${g.key}\\s*\\}\\}`, "g"), g.value);
+            });
+          }
+          if (secretsList) {
+            secretsList.forEach((s) => {
+              interpolated = interpolated.replace(new RegExp(`\\{\\{\\s*secret\\.${s.key}\\s*\\}\\}`, "g"), s.value);
+            });
+          }
+          interpolated = interpolated.replace(new RegExp(`\\{\\{\\s*${itemVar}\\.([\\w.]+)\\s*\\}\\}`, "g"), (_m, prop) => {
+            if (typeof item === "object" && item !== null) {
+              const val = getPath(item as Record<string, unknown>, String(prop));
+              return val === undefined ? "" : typeof val === "string" ? val : JSON.stringify(val);
+            }
+            return "";
+          });
+          interpolated = interpolated.replace(new RegExp(`\\{\\{\\s*${itemVar}\\s*\\}\\}`, "g"), () => {
+            return typeof item === "string" ? item : JSON.stringify(item);
+          });
+          interpolated = interpolate(interpolated, state, globalsList, secretsList);
+          mappedResults.push(interpolated);
+        } else if (template.startsWith(`${itemVar}.`)) {
+          const propPath = template.slice(itemVar.length + 1);
+          if (typeof item === "object" && item !== null) {
+            mappedResults.push(getPath(item as Record<string, unknown>, propPath) ?? null);
+          } else {
+            mappedResults.push(null);
+          }
+        } else {
+          mappedResults.push(template);
+        }
+      }
+
+      state[outputKey] = mappedResults;
+      return { count: mappedResults.length, items: mappedResults };
+    }
     default:
       return { kind: node.data.kind, note: "no executor" };
   }

frontend/src/flow/types.ts

@@ -9,7 +9,9 @@ export type AgentNodeKind =
   | "sink"
   | "http"
   | "script"
-  | "note";
+  | "note"
+  | "transform"
+  | "loop";
 
 export interface AgentNodeData {
   kind: AgentNodeKind;
@@ -151,6 +153,43 @@ export const NODE_TYPES: NodeTypeMeta[] = [
       { key: "color", label: "color", placeholder: "yellow", type: "select", options: ["yellow", "blue", "green", "pink", "purple"] },
     ],
   },
+  {
+    kind: "transform",
+    label: "Data Transform",
+    description: "Transforms, maps, picks fields, or formats data in state.",
+    defaultName: "transform_data",
+    configFields: [
+      {
+        key: "operation",
+        label: "operation",
+        placeholder: "json_map",
+        type: "select",
+        options: [
+          "json_map",
+          "pick_fields",
+          "template_string",
+          "set_keys",
+          "flatten_object",
+        ],
+      },
+      { key: "source_path", label: "source_path", placeholder: "state.data" },
+      { key: "target_key", label: "target_key", placeholder: "transformed_result" },
+      { key: "param", label: "param / template", placeholder: "e.g. name,email,id or Hello {{state.name}}", type: "textarea" },
+    ],
+  },
+  {
+    kind: "loop",
+    label: "Loop Iterator",
+    description: "Iterates over an array in state and maps or transforms items.",
+    defaultName: "loop_items",
+    configFields: [
+      { key: "items_path", label: "items_path", placeholder: "state.items" },
+      { key: "item_var", label: "item_var", placeholder: "item" },
+      { key: "output_key", label: "output_key", placeholder: "loop_results" },
+      { key: "transform_template", label: "transform_template", placeholder: "{{item.name}}: {{item.status}}", type: "textarea" },
+      { key: "max_iterations", label: "max_iterations", placeholder: "50" },
+    ],
+  },
 ];
 
 export const EDGE_LABELS = ["next", "on_success", "on_error", "tool_result", "true", "false"] as const;

frontend/src/flow/validate.ts

@@ -49,6 +49,26 @@ export function validateGraph(
         });
       }
     }
+    if (n.data.kind === "transform") {
+      const cfg = n.data.config ?? {};
+      if ("target_key" in cfg && !cfg.target_key?.trim()) {
+        issues.push({
+          nodeId: n.id,
+          kind: "orphan",
+          message: `Transform "${n.data.name}" missing target_key`,
+        });
+      }
+    }
+    if (n.data.kind === "loop") {
+      const cfg = n.data.config ?? {};
+      if ("items_path" in cfg && !cfg.items_path?.trim()) {
+        issues.push({
+          nodeId: n.id,
+          kind: "orphan",
+          message: `Loop "${n.data.name}" missing items_path`,
+        });
+      }
+    }
   }
   return issues;
 }

frontend/src/pages/Index.tsx

@@ -66,6 +66,7 @@ import {
   cryptoId as presetCryptoId,
 } from "@/flow/statePresets";
 import { CommandPalette } from "@/flow/CommandPalette";
+import { WorkflowAnalyticsModal } from "@/flow/WorkflowAnalyticsModal";
 
 const nodeTypes = { agent: AgentNode, note: NoteNode };
 
@@ -199,6 +200,7 @@ function Canvas() {
   const [activeWorkflowId, setActiveWorkflowId] = useState<string | null>(() => loadActiveWorkflowId());
   const [showWorkflows, setShowWorkflows] = useState(false);
   const [showCommandPalette, setShowCommandPalette] = useState(false);
+  const [showAnalytics, setShowAnalytics] = useState(false);
 
   // Initialize nodes and edges based on active workflow id
   const [nodes, setNodes] = useState<Node<AgentNodeData>[]>(() => {
@@ -1920,6 +1922,13 @@ function Canvas() {
               </h2>
             </div>
             <div className="flex gap-1.5">
+              <button
+                onClick={() => setShowAnalytics(true)}
+                title="View execution analytics and performance bottlenecks"
+                className="font-mono text-[10px] uppercase px-2 py-1 border border-dashed border-[hsl(var(--ink))] hover:bg-[hsl(var(--ink))] hover:text-[hsl(var(--paper))]"
+              >
+                📊 analytics
+              </button>
               <button
                 onClick={runFlowAction}
                 disabled={running}
@@ -2473,6 +2482,13 @@ function Canvas() {
           }}
         />
       )}
+
+      <WorkflowAnalyticsModal
+        isOpen={showAnalytics}
+        runLogs={runLogs}
+        nodes={nodes}
+        onClose={() => setShowAnalytics(false)}
+      />
     </div>
   );
 }