From 1b9a3b84a0c03056fb18057f5f57df8dea1d1f3e Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 30 Mar 2026 17:43:02 +0200
Subject: [PATCH] feat: add JSON download button to execution diagram

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../ExecutionDiagram.module.css               | 22 +++++++++++++++++++
 .../ExecutionDiagram/ExecutionDiagram.tsx     | 19 ++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/ui/src/components/ExecutionDiagram/ExecutionDiagram.module.css b/ui/src/components/ExecutionDiagram/ExecutionDiagram.module.css
index 550e4d1f..82418997 100644
--- a/ui/src/components/ExecutionDiagram/ExecutionDiagram.module.css
+++ b/ui/src/components/ExecutionDiagram/ExecutionDiagram.module.css
@@ -61,6 +61,28 @@
   position: relative;
 }
 
+.downloadBtn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  font-size: 10px;
+  font-family: var(--font-mono, monospace);
+  padding: 3px 8px;
+  border: 1px solid var(--border, #E4DFD8);
+  border-radius: 4px;
+  background: var(--bg-surface, #FFFFFF);
+  color: var(--text-secondary, #5C5347);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.downloadBtn:hover {
+  opacity: 1;
+  background: var(--bg-hover, #F5F0EA);
+}
+
 .splitter {
   height: 4px;
   background: var(--border, #E4DFD8);
diff --git a/ui/src/components/ExecutionDiagram/ExecutionDiagram.tsx b/ui/src/components/ExecutionDiagram/ExecutionDiagram.tsx
index 7a2c355c..96d26154 100644
--- a/ui/src/components/ExecutionDiagram/ExecutionDiagram.tsx
+++ b/ui/src/components/ExecutionDiagram/ExecutionDiagram.tsx
@@ -154,10 +154,29 @@ 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 */}
       <div className={styles.diagramArea} style={{ height: `${splitPercent}%` }}>
+        <button
+          className={styles.downloadBtn}
+          onClick={handleDownloadJson}
+          title="Download execution JSON"
+        >
+          ↓ JSON
+        </button>
         <ProcessDiagram
           application={detail.applicationName}
           routeId={detail.routeId}