Fix recipe detail to display DAG nodes as steps

The template expects recipe.steps and recipe.yaml but the recipe
data has dag.nodes. Convert nodes (list or dict) to steps format
and add YAML dump for source display.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/routers/recipes.py

@@ -144,30 +144,83 @@ async def get_recipe(
     if wants_json(request):
         return recipe
 
-    # Build DAG elements for visualization
+    # Build DAG elements for visualization and convert nodes to steps format
     dag_elements = []
+    steps = []
     node_colors = {
-        "input": "#3b82f6",
-        "effect": "#8b5cf6",
-        "analyze": "#ec4899",
+        "SOURCE": "#3b82f6",
+        "EFFECT": "#8b5cf6",
+        "SEQUENCE": "#ec4899",
         "transform": "#10b981",
         "output": "#f59e0b",
     }
 
-    for i, step in enumerate(recipe.get("steps", [])):
-        step_id = step.get("id", f"step-{i}")
-        dag_elements.append({
-            "data": {
-                "id": step_id,
-                "label": step.get("name", f"Step {i+1}"),
-                "color": node_colors.get(step.get("type", "effect"), "#6b7280"),
-            }
-        })
-        for inp in step.get("inputs", []):
-            dag_elements.append({
-                "data": {"source": inp, "target": step_id}
+    # Get nodes from dag - can be list or dict
+    dag = recipe.get("dag", {})
+    nodes = dag.get("nodes", [])
+
+    # Convert list of nodes to steps format
+    if isinstance(nodes, list):
+        for node in nodes:
+            node_id = node.get("id", "")
+            node_type = node.get("type", "EFFECT")
+            inputs = node.get("inputs", [])
+            config = node.get("config", {})
+
+            steps.append({
+                "id": node_id,
+                "name": node_id,
+                "type": node_type,
+                "inputs": inputs,
+                "params": config,
             })
 
+            dag_elements.append({
+                "data": {
+                    "id": node_id,
+                    "label": node_id,
+                    "color": node_colors.get(node_type, "#6b7280"),
+                }
+            })
+            for inp in inputs:
+                if isinstance(inp, str):
+                    dag_elements.append({
+                        "data": {"source": inp, "target": node_id}
+                    })
+    elif isinstance(nodes, dict):
+        for node_id, node in nodes.items():
+            node_type = node.get("type", "EFFECT")
+            inputs = node.get("inputs", [])
+            config = node.get("config", {})
+
+            steps.append({
+                "id": node_id,
+                "name": node_id,
+                "type": node_type,
+                "inputs": inputs,
+                "params": config,
+            })
+
+            dag_elements.append({
+                "data": {
+                    "id": node_id,
+                    "label": node_id,
+                    "color": node_colors.get(node_type, "#6b7280"),
+                }
+            })
+            for inp in inputs:
+                if isinstance(inp, str):
+                    dag_elements.append({
+                        "data": {"source": inp, "target": node_id}
+                    })
+
+    # Add steps to recipe for template
+    recipe["steps"] = steps
+
+    # Add YAML source
+    import yaml
+    recipe["yaml"] = yaml.dump(recipe, default_flow_style=False)
+
     templates = get_templates(request)
     return render(templates, "recipes/detail.html", request,
         recipe=recipe,