From c1c22e02c133b41f66aecf346992bcf520b6e0c6 Mon Sep 17 00:00:00 2001
From: Jacobcdsmith <88069592+Jacobcdsmith@users.noreply.github.com>
Date: Sat, 8 Aug 2026 14:55:40 +0000
Subject: [PATCH] feat: implement fully functional recursive subagent node
 execution, UI inspector dropdown configuration, nested collapsible logs
 rendering, and codegen sub-workflow documentation. Also add comprehensive
 unit tests.

---
 frontend/src/flow/Inspector.tsx              |  35 +++-
 frontend/src/flow/codegen.ts                 |  45 +++-
 frontend/src/flow/runFlow.ts                 |  70 ++++++-
 frontend/src/pages/Index.tsx                 | 205 +++++++++++++------
 frontend/src/test/subagentRecursion.test.tsx | 190 +++++++++++++++++
 server.log                                   |   2 +-
 6 files changed, 477 insertions(+), 70 deletions(-)
 create mode 100644 frontend/src/test/subagentRecursion.test.tsx

diff --git a/frontend/src/flow/Inspector.tsx b/frontend/src/flow/Inspector.tsx
index 69ab6ab..aedec0d 100644
--- a/frontend/src/flow/Inspector.tsx
+++ b/frontend/src/flow/Inspector.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Edge, Node } from "reactflow";
 import { AgentNodeData, NODE_TYPES } from "./types";
 import type { Gateway } from "./gateways";
+import { TEMPLATES, Workflow } from "./workflows";
 
 interface Props {
   node: Node<AgentNodeData> | null;
@@ -10,9 +11,20 @@ interface Props {
   gateways?: Gateway[];
   onChange: (id: string, data: Partial<AgentNodeData>) => void;
   onDelete: (id: string) => void;
+  activeWorkflowId?: string | null;
+  workflows?: Workflow[];
 }
 
-export function Inspector({ node, edges, nodes, gateways = [], onChange, onDelete }: Props) {
+export function Inspector({
+  node,
+  edges,
+  nodes,
+  gateways = [],
+  onChange,
+  onDelete,
+  activeWorkflowId = null,
+  workflows = [],
+}: Props) {
   const [confirming, setConfirming] = useState(false);
 
   if (!node) {
@@ -48,7 +60,26 @@ export function Inspector({ node, edges, nodes, gateways = [], onChange, onDelet
       {meta.configFields.map((f) => (
         <label key={f.key} className="block">
           <span className="text-[10px] text-[hsl(var(--ink-faint))]">{f.label}</span>
-          {f.type === "textarea" ? (
+          {node.data.kind === "subagent" && f.key === "graph" ? (
+            <select
+              value={node.data.config?.[f.key] ?? ""}
+              onChange={(e) =>
+                onChange(node.id, {
+                  config: { ...node.data.config, [f.key]: e.target.value },
+                })
+              }
+              className="mt-1 w-full bg-[hsl(var(--paper))] border border-dashed border-[hsl(var(--ink-faint))] focus:border-[hsl(var(--ink))] outline-none py-1.5 px-2 text-[hsl(var(--ink))]"
+            >
+              <option value="">-- select a subagent workflow --</option>
+              {[...TEMPLATES, ...workflows]
+                .filter((w) => w.id !== activeWorkflowId)
+                .map((w) => (
+                  <option key={w.id} value={w.id}>
+                    {w.name} ({w.isTemplate ? "template" : "custom"})
+                  </option>
+                ))}
+            </select>
+          ) : f.type === "textarea" ? (
             <textarea
               value={node.data.config?.[f.key] ?? ""}
               placeholder={f.placeholder}
diff --git a/frontend/src/flow/codegen.ts b/frontend/src/flow/codegen.ts
index 741729b..9ca82d6 100644
--- a/frontend/src/flow/codegen.ts
+++ b/frontend/src/flow/codegen.ts
@@ -1,6 +1,7 @@
 import { Edge, Node } from "reactflow";
 import { AgentNodeData, AgentNodeKind } from "./types";
 import { GlobalVar, SecretVar } from "./globals";
+import { Workflow } from "./workflows";
 
 // =====================================================================
 // codegen.ts
@@ -73,6 +74,7 @@ export function generatePython(
   edges: Edge[],
   globals?: GlobalVar[],
   secrets?: SecretVar[],
+  workflows?: Workflow[],
 ): CodegenResult {
   const errors: string[] = [];
   if (nodes.length === 0) {
@@ -357,14 +359,27 @@ export function generatePython(
           `decision = bool(state.last) if state.last is not None else True`,
           `return "true" if decision else "false"`,
         ].join("\n");
-      case "subagent":
+      case "subagent": {
+        const subWfId = c.graph || "";
+        const subWf = workflows?.find((w) => w.id === subWfId || w.name === subWfId);
+        const docComment = subWf
+          ? [
+              `# Nested Subagent Workflow Details:`,
+              `# Name: ${subWf.name}`,
+              `# Nodes: ${subWf.nodes.length}`,
+              `# Edges: ${subWf.edges.length}`,
+            ].join("\n")
+          : `# Nested Subagent Workflow Details: Not Found`;
+
         return [
+          docComment,
           `input_val = interpolate(${pyStr(c.input || "input")}, state)`,
           `payload = state.get(input_val, state.last) if input_val in state.data else input_val`,
           `result = await run_subgraph(${pyStr(c.graph || "sub")}, payload, state)`,
           `state.last = result`,
           `return "on_success"`,
         ].join("\n");
+      }
       case "memory":
         if ((c.op || "read") === "write") {
           return [
@@ -429,6 +444,7 @@ export function generateJavaScript(
   edges: Edge[],
   globals?: GlobalVar[],
   secrets?: SecretVar[],
+  workflows?: Workflow[],
 ): CodegenResult {
   const errors: string[] = [];
   if (nodes.length === 0) return { code: "// empty graph\n", errors };
@@ -564,8 +580,26 @@ export function generateJavaScript(
         return `const argsVal = interpolate(${JSON.stringify(c.args || "")}, state);\nstate.last = await callTool(${JSON.stringify(c.tool || "noop")}, { raw: argsVal });\nreturn "tool_result";`;
       case "router":
         return `// predicate: ${(c.predicate || "true").replace(/\n/g, " ")}\nreturn state.last ? "true" : "false";`;
-      case "subagent":
-        return `const inputVal = interpolate(${JSON.stringify(c.input || "input")}, state);\nconst payload = state.get(inputVal) ?? inputVal;\nstate.last = await runSubgraph(${JSON.stringify(c.graph || "sub")}, payload);\nreturn "on_success";`;
+      case "subagent": {
+        const subWfId = c.graph || "";
+        const subWf = workflows?.find((w) => w.id === subWfId || w.name === subWfId);
+        const docComment = subWf
+          ? [
+              `// Nested Subagent Workflow Details:`,
+              `// Name: ${subWf.name}`,
+              `// Nodes: ${subWf.nodes.length}`,
+              `// Edges: ${subWf.edges.length}`,
+            ].join("\n")
+          : `// Nested Subagent Workflow Details: Not Found`;
+
+        return [
+          docComment,
+          `const inputVal = interpolate(${JSON.stringify(c.input || "input")}, state);`,
+          `const payload = state.get(inputVal) ?? inputVal;`,
+          `state.last = await runSubgraph(${JSON.stringify(c.graph || "sub")}, payload);`,
+          `return "on_success";`,
+        ].join("\n");
+      }
       case "memory":
         return (c.op || "read") === "write"
           ? `await memoryWrite(${JSON.stringify(c.key || "key")}, state.last, state);\nreturn "next";`
@@ -634,10 +668,11 @@ export function generateCode(
   edges: Edge[],
   globals?: GlobalVar[],
   secrets?: SecretVar[],
+  workflows?: Workflow[],
 ): CodegenResult {
   return lang === "python"
-    ? generatePython(nodes, edges, globals, secrets)
-    : generateJavaScript(nodes, edges, globals, secrets);
+    ? generatePython(nodes, edges, globals, secrets, workflows)
+    : generateJavaScript(nodes, edges, globals, secrets, workflows);
 }
 
 // also export the kind set for sanity
diff --git a/frontend/src/flow/runFlow.ts b/frontend/src/flow/runFlow.ts
index ff305df..f5816c6 100644
--- a/frontend/src/flow/runFlow.ts
+++ b/frontend/src/flow/runFlow.ts
@@ -3,6 +3,8 @@ import type { AgentNodeData } from "./types";
 import type { Gateway } from "./gateways";
 import { callLLM, ChatMessage } from "./adapters";
 import { loadGlobals, loadSecrets } from "./globals";
+import type { Workflow } from "./workflows";
+import { loadWorkflows, TEMPLATES } from "./workflows";
 
 export interface RunLog {
   step: number;
@@ -32,6 +34,7 @@ export interface RunOptions {
   }) => Promise<string>;
   globals?: { key: string; value: string }[];
   secrets?: { key: string; value: string }[];
+  workflows?: Workflow[];
 }
 
 /**
@@ -310,11 +313,70 @@ export async function runNode(
       return { read: key, value: memory[key] ?? null };
     }
     case "subagent": {
+      const subWfId = cfg.graph || "";
+      const allWfs = opts.workflows ?? [...TEMPLATES, ...loadWorkflows()];
+      const subWf = allWfs.find((w) => w.id === subWfId || w.name === subWfId);
+      if (!subWf) {
+        throw new Error(`Subagent workflow with ID or Name "${subWfId}" not found`);
+      }
+
+      let subState: Record<string, unknown> = { query: "" };
+      const inputVal = cfg.input || "";
+      if (inputVal.trim()) {
+        try {
+          // Evaluate as JS expression against current parent state
+          const fn = new Function("state", `return ${inputVal};`);
+          const evaluated = fn(state);
+          if (evaluated && typeof evaluated === "object" && !Array.isArray(evaluated)) {
+            subState = { ...evaluated };
+          } else {
+            subState = { query: String(evaluated) };
+          }
+        } catch {
+          // Fallback to interpolation
+          const interpolated = interpolate(inputVal, state, globalsList, secretsList);
+          try {
+            const parsed = JSON.parse(interpolated);
+            if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+              subState = parsed;
+            } else {
+              subState = { query: interpolated };
+            }
+          } catch {
+            subState = { query: interpolated };
+          }
+        }
+      } else {
+        subState = { query: String(state.query ?? "") };
+      }
+
+      const subLogs = await runFlow({
+        nodes: subWf.nodes,
+        edges: subWf.edges,
+        gateways,
+        initialState: subState,
+        stepDelay: opts.stepDelay,
+        onHumanApproval: opts.onHumanApproval,
+        globals: globalsList,
+        secrets: secretsList,
+        workflows: allWfs,
+      });
+
+      const lastLog = subLogs[subLogs.length - 1];
+      let finalResult: unknown = undefined;
+      if (lastLog) {
+        if (lastLog.stateSnapshot && "last_output" in lastLog.stateSnapshot) {
+          finalResult = lastLog.stateSnapshot.last_output;
+        } else {
+          finalResult = lastLog.output;
+        }
+      }
+
       return {
-        simulated: true,
-        subagent: cfg.graph || "unknown",
-        input: interpolate(cfg.input || "", state, globalsList, secretsList),
-        note: "subagent execution is schematic",
+        workflowId: subWf.id,
+        workflowName: subWf.name,
+        subLogs,
+        result: finalResult,
       };
     }
     case "human": {
diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx
index d604158..339645e 100644
--- a/frontend/src/pages/Index.tsx
+++ b/frontend/src/pages/Index.tsx
@@ -63,6 +63,109 @@ const nodeTypes = { agent: AgentNode };
 let idCounter = 100;
 const nextId = () => `n${++idCounter}`;
 
+interface RunLogItemProps {
+  log: RunLog;
+  expandedLogSnapshots: Record<string, boolean>;
+  setExpandedLogSnapshots: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+  depth?: number;
+}
+
+function RunLogItem({ log, expandedLogSnapshots, setExpandedLogSnapshots, depth = 0 }: RunLogItemProps) {
+  const uniqueKey = `${log.step}-${log.nodeId}-${depth}`;
+  const isExpanded = !!expandedLogSnapshots[uniqueKey];
+
+  const hasSubLogs = log.kind === "subagent" &&
+    log.output &&
+    typeof log.output === "object" &&
+    "subLogs" in (log.output as any) &&
+    Array.isArray((log.output as any).subLogs);
+
+  const subLogs: RunLog[] = hasSubLogs ? (log.output as any).subLogs : [];
+  const subLogsKey = `${uniqueKey}-sublogs`;
+  const isSubLogsExpanded = expandedLogSnapshots[subLogsKey] !== false;
+
+  return (
+    <div
+      className="border border-dashed border-[hsl(var(--grid-line))] p-2 font-mono text-[10px]"
+      style={{
+        borderColor: log.error ? "hsl(var(--issue))" : undefined,
+        marginLeft: depth > 0 ? `${depth * 12}px` : undefined,
+      }}
+    >
+      <div className="flex items-center gap-2 mb-1">
+        <span className="text-[hsl(var(--ink-faint))]">#{log.step}</span>
+        <span className="font-semibold text-[hsl(var(--ink))]">{log.name}</span>
+        <span className="uppercase tracking-[0.15em] text-[9px] text-[hsl(var(--ink-soft))]">{log.kind}</span>
+        <span className="ml-auto text-[hsl(var(--ink-faint))]">{log.ms}ms</span>
+      </div>
+      <div className="text-[hsl(var(--ink-soft))]">
+        → <span className="uppercase tracking-wider">{log.label}</span>
+      </div>
+      {log.error ? (
+        <pre className="mt-1 whitespace-pre-wrap text-[hsl(var(--issue))]">{log.error}</pre>
+      ) : (
+        <pre className="mt-1 whitespace-pre-wrap text-[hsl(var(--ink))] max-h-40 overflow-auto">
+          {typeof log.output === "string" ? log.output : JSON.stringify(log.output, null, 2)}
+        </pre>
+      )}
+
+      {log.stateSnapshot && (
+        <div className="mt-1.5 border-t border-dashed border-[hsl(var(--grid-line))] pt-1.5">
+          <button
+            type="button"
+            onClick={() => {
+              setExpandedLogSnapshots((prev) => ({
+                ...prev,
+                [uniqueKey]: !prev[uniqueKey],
+              }));
+            }}
+            className="select-none font-semibold text-[hsl(var(--ink-soft))] hover:text-[hsl(var(--ink))] flex items-center gap-1 font-mono text-[9px] uppercase tracking-[0.1em]"
+          >
+            <span className={`transition-transform duration-100 ${isExpanded ? "rotate-90" : ""}`}>▶</span>
+            <span>state snapshot</span>
+          </button>
+          {isExpanded && (
+            <pre className="mt-1.5 p-2 bg-[hsl(var(--ink)/0.02)] border border-dashed border-[hsl(var(--grid-line))] overflow-auto max-h-48 text-[9px] leading-relaxed text-[hsl(var(--ink))] whitespace-pre">
+              {JSON.stringify(log.stateSnapshot, null, 2)}
+            </pre>
+          )}
+        </div>
+      )}
+
+      {hasSubLogs && (
+        <div className="mt-1.5 border-t border-dashed border-[hsl(var(--grid-line))] pt-1.5">
+          <button
+            type="button"
+            onClick={() => {
+              setExpandedLogSnapshots((prev) => ({
+                ...prev,
+                [subLogsKey]: !prev[subLogsKey],
+              }));
+            }}
+            className="select-none font-semibold text-[hsl(var(--ink-soft))] hover:text-[hsl(var(--ink))] flex items-center gap-1 font-mono text-[9px] uppercase tracking-[0.1em] text-[hsl(var(--edge-selected))]"
+          >
+            <span className={`transition-transform duration-100 ${isSubLogsExpanded ? "rotate-90" : ""}`}>▶</span>
+            <span>nested execution ({subLogs.length} steps)</span>
+          </button>
+          {isSubLogsExpanded && (
+            <div className="mt-1.5 space-y-2 border-l-2 border-dotted border-[hsl(var(--edge-selected))/0.4] pl-2">
+              {subLogs.map((sl) => (
+                <RunLogItem
+                  key={`${sl.step}-${sl.nodeId}`}
+                  log={sl}
+                  expandedLogSnapshots={expandedLogSnapshots}
+                  setExpandedLogSnapshots={setExpandedLogSnapshots}
+                  depth={depth + 1}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function Canvas() {
   const rf = useReactFlow();
   const isMobile = useIsMobile();
@@ -497,8 +600,8 @@ function Canvas() {
   );
 
   const generated = useMemo(
-    () => generateCode(codeLang, nodes, edges, globals, secrets),
-    [nodes, edges, codeLang, globals, secrets],
+    () => generateCode(codeLang, nodes, edges, globals, secrets, [...TEMPLATES, ...workflows]),
+    [nodes, edges, codeLang, globals, secrets, workflows],
   );
   const pseudocode = generated.code;
   const codeLintIssues = useMemo(
@@ -762,6 +865,7 @@ function Canvas() {
           edges,
           gateways,
           onHumanApproval: approvalPromise,
+          workflows: [...TEMPLATES, ...workflows],
         },
         globals,
         secrets
@@ -961,6 +1065,7 @@ function Canvas() {
             edges,
             gateways,
             onHumanApproval: approvalPromise,
+            workflows: [...TEMPLATES, ...workflows],
           },
           globals,
           secrets
@@ -1117,6 +1222,7 @@ function Canvas() {
         stepDelay,
         globals,
         secrets,
+        workflows: [...TEMPLATES, ...workflows],
         onLog: (log) => {
           setRunLogs((prev) => [...(prev ?? []), log]);
           if (log.nodeId && log.nodeId !== "_error" && log.nodeId !== "_runtime") {
@@ -1180,11 +1286,25 @@ function Canvas() {
   const handleLogsExpandAll = () => {
     if (!runLogs) return;
     const patch: Record<string, boolean> = {};
-    runLogs.forEach((l) => {
-      if (l.stateSnapshot) {
-        patch[`${l.step}-${l.nodeId}`] = true;
-      }
-    });
+    const recurseExpand = (logsList: RunLog[], d = 0) => {
+      logsList.forEach((l) => {
+        const uniqueKey = `${l.step}-${l.nodeId}-${d}`;
+        if (l.stateSnapshot) {
+          patch[uniqueKey] = true;
+        }
+        const hasSubLogs = l.kind === "subagent" &&
+          l.output &&
+          typeof l.output === "object" &&
+          "subLogs" in (l.output as any) &&
+          Array.isArray((l.output as any).subLogs);
+        if (hasSubLogs) {
+          const subLogsKey = `${uniqueKey}-sublogs`;
+          patch[subLogsKey] = true;
+          recurseExpand((l.output as any).subLogs, d + 1);
+        }
+      });
+    };
+    recurseExpand(runLogs, 0);
     setExpandedLogSnapshots(patch);
   };
 
@@ -1495,6 +1615,8 @@ function Canvas() {
               gateways={gateways}
               onChange={updateNode}
               onDelete={deleteNode}
+              activeWorkflowId={activeWorkflowId}
+              workflows={workflows}
             />
           </div>
 
@@ -1591,7 +1713,16 @@ function Canvas() {
             <button onClick={() => setMobilePanel("none")} className="font-mono text-[11px] px-2 py-1 border border-dashed border-[hsl(var(--ink))]">close</button>
           </div>
           <div className="flex-1 overflow-y-auto">
-            <Inspector node={selected} edges={edges} nodes={nodes} gateways={gateways} onChange={updateNode} onDelete={deleteNode} />
+            <Inspector
+              node={selected}
+              edges={edges}
+              nodes={nodes}
+              gateways={gateways}
+              onChange={updateNode}
+              onDelete={deleteNode}
+              activeWorkflowId={activeWorkflowId}
+              workflows={workflows}
+            />
           </div>
         </div>
       )}
@@ -1971,56 +2102,14 @@ function Canvas() {
                 no logs — see toast for error
               </div>
             )}
-            {filteredLogs.map((l) => {
-              const uniqueKey = `${l.step}-${l.nodeId}`;
-              const isExpanded = !!expandedLogSnapshots[uniqueKey];
-              return (
-                <div
-                  key={uniqueKey}
-                  className="border border-dashed border-[hsl(var(--grid-line))] p-2 font-mono text-[10px]"
-                  style={l.error ? { borderColor: "hsl(var(--issue))" } : undefined}
-                >
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="text-[hsl(var(--ink-faint))]">#{l.step}</span>
-                    <span className="font-semibold text-[hsl(var(--ink))]">{l.name}</span>
-                    <span className="uppercase tracking-[0.15em] text-[9px] text-[hsl(var(--ink-soft))]">{l.kind}</span>
-                    <span className="ml-auto text-[hsl(var(--ink-faint))]">{l.ms}ms</span>
-                  </div>
-                  <div className="text-[hsl(var(--ink-soft))]">
-                    → <span className="uppercase tracking-wider">{l.label}</span>
-                  </div>
-                  {l.error ? (
-                    <pre className="mt-1 whitespace-pre-wrap text-[hsl(var(--issue))]">{l.error}</pre>
-                  ) : (
-                    <pre className="mt-1 whitespace-pre-wrap text-[hsl(var(--ink))] max-h-40 overflow-auto">
-  {typeof l.output === "string" ? l.output : JSON.stringify(l.output, null, 2)}
-                    </pre>
-                  )}
-                  {l.stateSnapshot && (
-                    <div className="mt-1.5 border-t border-dashed border-[hsl(var(--grid-line))] pt-1.5">
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setExpandedLogSnapshots((prev) => ({
-                            ...prev,
-                            [uniqueKey]: !prev[uniqueKey],
-                          }));
-                        }}
-                        className="select-none font-semibold text-[hsl(var(--ink-soft))] hover:text-[hsl(var(--ink))] flex items-center gap-1 font-mono text-[9px] uppercase tracking-[0.1em]"
-                      >
-                        <span className={`transition-transform duration-100 ${isExpanded ? "rotate-90" : ""}`}>▶</span>
-                        <span>state snapshot</span>
-                      </button>
-                      {isExpanded && (
-                        <pre className="mt-1.5 p-2 bg-[hsl(var(--ink)/0.02)] border border-dashed border-[hsl(var(--grid-line))] overflow-auto max-h-48 text-[9px] leading-relaxed text-[hsl(var(--ink))] whitespace-pre">
-  {JSON.stringify(l.stateSnapshot, null, 2)}
-                        </pre>
-                      )}
-                    </div>
-                  )}
-                </div>
-              );
-            })}
+            {filteredLogs.map((l) => (
+              <RunLogItem
+                key={`${l.step}-${l.nodeId}`}
+                log={l}
+                expandedLogSnapshots={expandedLogSnapshots}
+                setExpandedLogSnapshots={setExpandedLogSnapshots}
+              />
+            ))}
           </div>
         </div>
       )}
diff --git a/frontend/src/test/subagentRecursion.test.tsx b/frontend/src/test/subagentRecursion.test.tsx
new file mode 100644
index 0000000..73a9d54
--- /dev/null
+++ b/frontend/src/test/subagentRecursion.test.tsx
@@ -0,0 +1,190 @@
+import { describe, it, expect } from "vitest";
+import { runFlow } from "../flow/runFlow";
+import { generatePython, generateJavaScript } from "../flow/codegen";
+import { Inspector } from "../flow/Inspector";
+import { render } from "@testing-library/react";
+import { Node, Edge, ReactFlowProvider } from "reactflow";
+import { AgentNodeData } from "../flow/types";
+import { Workflow } from "../flow/workflows";
+
+describe("Subagent Recursion & UI & Codegen Features", () => {
+  const childNodes: Node<AgentNodeData>[] = [
+    {
+      id: "c1",
+      type: "agent",
+      position: { x: 0, y: 0 },
+      data: {
+        kind: "trigger",
+        name: "sub_start",
+        config: {},
+        isEntry: true,
+      },
+    },
+    {
+      id: "c2",
+      type: "agent",
+      position: { x: 100, y: 100 },
+      data: {
+        kind: "script",
+        name: "sub_process",
+        config: {
+          code: "state.query = state.query + '_processed'; return { done: true };",
+        },
+      },
+    },
+    {
+      id: "c3",
+      type: "agent",
+      position: { x: 200, y: 200 },
+      data: {
+        kind: "sink",
+        name: "sub_finish",
+        config: { target: "response" },
+        isTerminal: true,
+      },
+    },
+  ];
+
+  const childEdges: Edge[] = [
+    { id: "ce1", source: "c1", target: "c2", label: "next" },
+    { id: "ce2", source: "c2", target: "c3", label: "next" },
+  ];
+
+  const subWf: Workflow = {
+    id: "child-researcher",
+    name: "Child Researcher",
+    description: "Takes input and appends processed.",
+    nodes: childNodes,
+    edges: childEdges,
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+  };
+
+  const parentNodes: Node<AgentNodeData>[] = [
+    {
+      id: "p1",
+      type: "agent",
+      position: { x: 0, y: 0 },
+      data: {
+        kind: "trigger",
+        name: "parent_start",
+        config: {},
+        isEntry: true,
+      },
+    },
+    {
+      id: "p2",
+      type: "agent",
+      position: { x: 100, y: 100 },
+      data: {
+        kind: "subagent",
+        name: "call_child",
+        config: {
+          graph: "child-researcher",
+          input: "state.query",
+        },
+      },
+    },
+    {
+      id: "p3",
+      type: "agent",
+      position: { x: 200, y: 200 },
+      data: {
+        kind: "sink",
+        name: "parent_finish",
+        config: { target: "response" },
+        isTerminal: true,
+      },
+    },
+  ];
+
+  const parentEdges: Edge[] = [
+    { id: "pe1", source: "p1", target: "p2", label: "next" },
+    { id: "pe2", source: "p2", target: "p3", label: "on_success" },
+  ];
+
+  it("should execute subagent recursive runFlow run with input/output propagation", async () => {
+    const parentLogs = await runFlow({
+      nodes: parentNodes,
+      edges: parentEdges,
+      gateways: [],
+      initialState: { query: "hello" },
+      workflows: [subWf],
+    });
+
+    // Parent run should have 3 steps: trigger, subagent, sink
+    expect(parentLogs.length).toBe(3);
+
+    const subagentStep = parentLogs.find((l) => l.nodeId === "p2");
+    expect(subagentStep).toBeDefined();
+    expect(subagentStep?.error).toBeUndefined();
+
+    // Verify subagent output format has nested subLogs and correct final result
+    const output = subagentStep?.output as any;
+    expect(output).toBeDefined();
+    expect(output.workflowId).toBe("child-researcher");
+    expect(output.workflowName).toBe("Child Researcher");
+    expect(output.subLogs).toBeDefined();
+    expect(output.subLogs.length).toBe(3);
+
+    // Verify subLogs steps were executed properly on subagent
+    const subScriptStep = output.subLogs.find((l: any) => l.nodeId === "c2");
+    expect(subScriptStep).toBeDefined();
+    expect(subScriptStep.stateSnapshot.query).toBe("hello_processed");
+
+    // Parent terminal/sink node should have propagated output in parent stateSnapshot/result
+    const parentSinkStep = parentLogs.find((l) => l.nodeId === "p3");
+    expect(parentSinkStep).toBeDefined();
+    expect(parentSinkStep?.stateSnapshot?.last_output).toBeDefined();
+    expect((parentSinkStep?.stateSnapshot?.last_output as any).result.result).toEqual({
+      result: { done: true },
+      target: "response"
+    });
+  });
+
+  it("should generate self-documenting comments with node/edge counts in Python & JavaScript", () => {
+    const pyRes = generatePython(parentNodes, parentEdges, [], [], [subWf]);
+    expect(pyRes.code).toContain("# Nested Subagent Workflow Details:");
+    expect(pyRes.code).toContain("# Name: Child Researcher");
+    expect(pyRes.code).toContain("# Nodes: 3");
+    expect(pyRes.code).toContain("# Edges: 2");
+
+    const jsRes = generateJavaScript(parentNodes, parentEdges, [], [], [subWf]);
+    expect(jsRes.code).toContain("// Nested Subagent Workflow Details:");
+    expect(jsRes.code).toContain("// Name: Child Researcher");
+    expect(jsRes.code).toContain("// Nodes: 3");
+    expect(jsRes.code).toContain("// Edges: 2");
+  });
+
+  it("should render dropdown menu with other workflows in Inspector UI, excluding active", () => {
+    const activeWorkflowId = "parent-wf-id";
+    const changeMock = () => {};
+    const deleteMock = () => {};
+
+    const nodeUnderTest: Node<AgentNodeData> = parentNodes.find((n) => n.id === "p2")!;
+
+    const { container } = render(
+      <ReactFlowProvider>
+        <Inspector
+          node={nodeUnderTest}
+          edges={parentEdges}
+          nodes={parentNodes}
+          activeWorkflowId={activeWorkflowId}
+          workflows={[subWf]}
+          onChange={changeMock}
+          onDelete={deleteMock}
+        />
+      </ReactFlowProvider>
+    );
+
+    // Verify dropdown is rendered for graph selection
+    const selectElem = container.querySelector("select");
+    expect(selectElem).not.toBeNull();
+
+    // It should have options: child-researcher, and exclude the parent active graph
+    const options = container.querySelectorAll("option");
+    const optionValues = Array.from(options).map((o) => o.value);
+    expect(optionValues).toContain("child-researcher");
+    expect(optionValues).not.toContain("parent-wf-id");
+  });
+});
diff --git a/server.log b/server.log
index 9a4850b..6d53f2f 100644
--- a/server.log
+++ b/server.log
@@ -1,6 +1,6 @@
 $ vite --host 0.0.0.0 --port 3000
 
-  VITE v5.4.21  ready in 338 ms
+  VITE v5.4.21  ready in 304 ms
 
   ➜  Local:   http://localhost:3000/
   ➜  Network: http://192.168.0.2:3000/