Fix: The agent version page exported an incorrect DSL format. (#17736)

web/src/pages/agent/hooks/use-export-json.ts

@@ -1,26 +1,19 @@
 import { useFetchAgent } from '@/hooks/use-agent-request';
-import { downloadJsonFile } from '@/utils/file-util';
 import { useCallback } from 'react';
 import useGraphStore from '../store';
+import { downloadDsl } from '../utils/download-dsl';
 import { exportDsl } from '../utils/dsl-bridge';
-import { clearSensitiveFields } from './clear-sensitive-fields';
 
 export const useHandleExportJsonFile = () => {
   const { data } = useFetchAgent();
   const { nodes, edges } = useGraphStore((state) => state);
 
   const handleExportJson = useCallback(() => {
-    // bridge.exportDsl returns the canonical wire shape from current
-    // graph state plus preserved DSL fields, so export can write it
-    // directly after sensitive-field sanitization.
+    // exportDsl returns the canonical wire shape from current graph
+    // state plus preserved DSL fields; downloadDsl sanitizes
+    // sensitive fields and writes the file.
     const full = exportDsl(nodes, edges, data?.dsl ?? {});
-    const sanitizedDsl = clearSensitiveFields(full);
-    const nextDsl = {
-      ...sanitizedDsl,
-      globals: { ...(sanitizedDsl.globals ?? {}) },
-    };
-
-    downloadJsonFile(nextDsl, `${data.title}.json`);
+    downloadDsl(full, data.title);
   }, [nodes, edges, data?.dsl, data.title]);
 
   return {

web/src/pages/agent/utils/download-dsl.ts

@@ -0,0 +1,20 @@
+import { DSL } from '@/interfaces/database/agent';
+import { downloadJsonFile } from '@/utils/file-util';
+import { clearSensitiveFields } from './clear-sensitive-fields';
+
+/**
+ * Shared agent-DSL download path: strips sensitive fields (api_key)
+ * and writes the canonical wire shape to `<title>.json`. Used by the
+ * canvas export button and the version-history dialog so both emit
+ * the same structure.
+ */
+export const downloadDsl = (
+  dsl: DSL | Record<string, any>,
+  title: string,
+) => {
+  const sanitizedDsl = clearSensitiveFields(dsl);
+  downloadJsonFile(
+    { ...sanitizedDsl, globals: { ...(sanitizedDsl.globals ?? {}) } },
+    `${title}.json`,
+  );
+};

web/src/pages/agent/version-dialog/index.tsx

@@ -19,12 +19,12 @@ import {
 import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
 import { formatDate } from '@/utils/date';
-import { downloadJsonFile } from '@/utils/file-util';
 import { ConnectionMode, ReactFlow, ReactFlowProvider } from '@xyflow/react';
 import { ArrowDownToLine } from 'lucide-react';
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { nodeTypes } from '../canvas';
+import { downloadDsl } from '../utils/download-dsl';
 
 function Dot() {
   return (
@@ -51,11 +51,10 @@ export function VersionDialog({
   );
 
   const downloadFile = useCallback(() => {
-    const graph = agent?.dsl.graph;
-    if (graph) {
-      downloadJsonFile(graph, agent?.title);
+    if (agent?.dsl) {
+      downloadDsl(agent.dsl, agent.title);
     }
-  }, [agent?.dsl.graph, agent?.title]);
+  }, [agent?.dsl, agent?.title]);
 
   useEffect(() => {
     if (data.length > 0) {