From 2f2f93f37ecd808c789690cd2e3b42abb96b3f3e Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 30 Mar 2026 17:47:17 +0200
Subject: [PATCH] fix: move useCallback before early returns to fix hooks order

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../ExecutionDiagram/ExecutionDiagram.tsx     | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

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 */}