diff --git a/ui/src/components/ExecutionDiagram/ExecutionDiagram.tsx b/ui/src/components/ExecutionDiagram/ExecutionDiagram.tsx
index 96d26154..28e2e7e3 100644
--- a/ui/src/components/ExecutionDiagram/ExecutionDiagram.tsx
+++ b/ui/src/components/ExecutionDiagram/ExecutionDiagram.tsx
@@ -120,6 +120,18 @@ export function ExecutionDiagram({
     }
   }, [detail?.processors]);
 
+  const handleDownloadJson = useCallback(() => {
+    if (!detail) return;
+    const json = JSON.stringify(detail, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `execution-${executionId}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [detail, executionId]);
+
   // Loading state
   if (detailLoading || (detail && diagramLoading)) {
     return (
@@ -154,18 +166,6 @@ export function ExecutionDiagram({
     );
   }
 
-  const handleDownloadJson = useCallback(() => {
-    if (!detail) return;
-    const json = JSON.stringify(detail, null, 2);
-    const blob = new Blob([json], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `execution-${executionId}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-  }, [detail, executionId]);
-
   return (
     <div ref={containerRef} className={`${styles.executionDiagram} ${className ?? ''}`}>
       {/* Diagram area */}