Add step list with cache links and Plan JSON to plan page

- Show numbered step list with cache_id links for each completed step
- Add collapsible "Show Plan JSON" section with full plan data
- Steps show type, name, status badge, and clickable output link

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

server.py

@@ -1531,6 +1531,77 @@ async def run_plan_visualization(run_id: str, request: Request):
         </div>
 
         {dag_html}
+
+        <!-- Steps List with Cache IDs -->
+        <div class="mt-8">
+            <h3 class="text-lg font-semibold text-white mb-4">Execution Steps</h3>
+            <div class="space-y-2">
+    '''
+
+    # Build steps list with cache_id links
+    for i, step in enumerate(steps):
+        step_id = step.get("step_id", "")
+        step_name = step.get("name", step_id[:20])
+        node_type = step.get("node_type", "EFFECT")
+        cache_id = step.get("cache_id", "")
+        has_cached = cache_manager.has_content(cache_id) if cache_id else False
+        color = NODE_COLORS.get(node_type, NODE_COLORS["default"])
+
+        status_badge = ""
+        if has_cached:
+            status_badge = '<span class="text-green-400 text-xs">cached</span>'
+        elif run.status == "completed":
+            status_badge = '<span class="text-green-400 text-xs">completed</span>'
+
+        cache_link = ""
+        if cache_id:
+            if has_cached:
+                cache_link = f'''
+                <div class="mt-1 ml-8 flex items-center gap-2">
+                    <span class="text-gray-500 text-xs">Output:</span>
+                    <a href="/cache/{cache_id}" class="font-mono text-xs text-blue-400 hover:text-blue-300">{cache_id}</a>
+                </div>'''
+            else:
+                cache_link = f'''
+                <div class="mt-1 ml-8">
+                    <span class="text-gray-600 text-xs font-mono">{cache_id[:32]}...</span>
+                </div>'''
+
+        content += f'''
+            <div class="bg-dark-600 rounded p-3">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                        <span class="w-6 h-6 rounded-full flex items-center justify-center text-xs text-white" style="background-color: {color}">{i + 1}</span>
+                        <span class="font-medium text-white">{step_name}</span>
+                        <span class="text-gray-500 text-sm">{node_type}</span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        {status_badge}
+                    </div>
+                </div>
+                {cache_link}
+            </div>
+        '''
+
+    content += '''
+            </div>
+        </div>
+    '''
+
+    # Add collapsible Plan JSON section
+    plan_json_str = json.dumps(plan_data, indent=2)
+    # Escape HTML entities in JSON
+    plan_json_str = plan_json_str.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+    content += f'''
+        <!-- Plan JSON -->
+        <details class="mt-6">
+            <summary class="cursor-pointer text-gray-400 hover:text-white text-sm mb-2">
+                Show Plan JSON
+            </summary>
+            <div class="bg-dark-600 rounded-lg border border-dark-500 p-4 overflow-x-auto">
+                <pre class="text-sm text-gray-300 whitespace-pre-wrap">{plan_json_str}</pre>
+            </div>
+        </details>
     </div>
     '''