feat: add DAG definition improvement flow from the spec editor

ui/src/features/dags/components/dag-details/DAGDetailsContent.tsx

@@ -27,6 +27,7 @@ type DAGDetailsContentProps = {
   filePath?: string;
   dag: components['schemas']['DAGDetails'];
   currentDAGRun?: components['schemas']['DAGRunDetails'];
+  latestDAGRun?: components['schemas']['DAGRunDetails'];
   refreshFn: () => void;
   formatDuration: (startDate: string, endDate: string) => string;
   activeTab: string;
@@ -60,6 +61,7 @@ const DAGDetailsContent: React.FC<DAGDetailsContentProps> = ({
   filePath,
   dag,
   currentDAGRun,
+  latestDAGRun,
   refreshFn,
   formatDuration,
   activeTab,
@@ -333,7 +335,11 @@ const DAGDetailsContent: React.FC<DAGDetailsContentProps> = ({
           </div>
 
           <div className={activeTab === 'spec' ? 'visible' : 'hidden'}>
-            <DAGEditButtons fileName={fileName || ''} />
+            <DAGEditButtons
+              fileName={fileName || ''}
+              dagName={dag?.name || fileName || ''}
+              latestDAGRun={latestDAGRun}
+            />
           </div>
         </div>
         <div className="flex-1 flex flex-col min-h-0">
@@ -344,7 +350,11 @@ const DAGDetailsContent: React.FC<DAGDetailsContentProps> = ({
             </>
           ) : null}
           {activeTab === 'spec' ? (
-            <DAGSpec key={fileName} fileName={fileName} localDags={localDags} />
+            <DAGSpec
+              key={fileName}
+              fileName={fileName}
+              localDags={localDags}
+            />
           ) : null}
           {activeTab === 'history' ? (
             <>

ui/src/features/dags/components/dag-details/DAGDetailsPanel.tsx

@@ -229,6 +229,7 @@ function DAGDetailsPanel({
                 filePath={data.filePath}
                 dag={data.dag}
                 currentDAGRun={data.latestDAGRun}
+                latestDAGRun={data.latestDAGRun}
                 refreshFn={refreshFn}
                 formatDuration={formatDuration}
                 activeTab={activeTab}

ui/src/features/dags/components/dag-editor/DAGEditButtons.tsx

@@ -3,34 +3,57 @@
  *
  * @module features/dags/components/dag-editor
  */
+import { useAgentChatContext } from '@/features/agent';
 import { Button } from '@/components/ui/button';
 import { useErrorModal } from '@/components/ui/error-modal';
-import { PencilLine, Trash2 } from 'lucide-react';
+import { Sparkles, PencilLine, Trash2 } from 'lucide-react';
 import React from 'react';
+import { components } from '../../../../api/v1/schema';
 import { DAGNameInputModal } from '../../../../components/DAGNameInputModal';
 import { AppBarContext } from '../../../../contexts/AppBarContext';
 import { useConfig } from '../../../../contexts/ConfigContext';
+import { useUnsavedChanges } from '../../../../contexts/UnsavedChangesContext';
+import { useUserPreferences } from '../../../../contexts/UserPreference';
 import { useClient } from '../../../../hooks/api';
+import ImproveDAGDefinitionModal from './ImproveDAGDefinitionModal';
+import { buildImproveDAGDefinitionPrompt } from './improveDagDefinitionPrompt';
 
 /**
  * Props for the DAGEditButtons component
  */
 type Props = {
   /** DAG file name */
   fileName: string;
+  /** DAG display name */
+  dagName?: string;
+  /** Latest DAG run details for improvement context */
+  latestDAGRun?: components['schemas']['DAGRunDetails'];
 };
 
 /**
  * DAGEditButtons provides buttons for renaming and deleting a DAG
  */
-function DAGEditButtons({ fileName }: Props) {
+function DAGEditButtons({ fileName, dagName, latestDAGRun }: Props) {
   const appBarContext = React.useContext(AppBarContext);
   const client = useClient();
   const config = useConfig();
+  const { preferences } = useUserPreferences();
   const { showError } = useErrorModal();
+  const { hasUnsavedChanges } = useUnsavedChanges();
+  const {
+    clearSession: clearAgentSession,
+    openChat,
+    setPendingUserMessage,
+    setSessionId,
+    setSessionState,
+  } = useAgentChatContext();
   const [isRenameModalOpen, setIsRenameModalOpen] = React.useState(false);
   const [renameError, setRenameError] = React.useState<string | null>(null);
   const [isRenameLoading, setIsRenameLoading] = React.useState(false);
+  const [isImproveModalOpen, setIsImproveModalOpen] = React.useState(false);
+  const [isLaunchingImproveSession, setIsLaunchingImproveSession] =
+    React.useState(false);
+  const improveLaunchInFlightRef = React.useRef(false);
 
   if (!config.permissions.writeDags) {
     return null;
@@ -78,13 +101,133 @@ function DAGEditButtons({ fileName }: Props) {
     }
   };
 
+  const handleImproveClose = React.useCallback(() => {
+    if (isLaunchingImproveSession) {
+      return;
+    }
+    setIsImproveModalOpen(false);
+  }, [isLaunchingImproveSession]);
+
+  const handleImproveSubmit = React.useCallback(
+    async (userPrompt: string) => {
+      if (improveLaunchInFlightRef.current) {
+        return;
+      }
+
+      if (!config.agentEnabled) {
+        showError(
+          'Agent is disabled',
+          'Enable the agent in settings before starting a DAG improvement session.'
+        );
+        return;
+      }
+
+      if (hasUnsavedChanges) {
+        showError(
+          'Save or discard local edits first',
+          'The agent can only improve the saved DAG definition that exists on disk.'
+        );
+        return;
+      }
+
+      improveLaunchInFlightRef.current = true;
+      setIsLaunchingImproveSession(true);
+
+      try {
+        clearAgentSession();
+        setPendingUserMessage(userPrompt);
+
+        const { data: sessionData, error } = await client.POST('/agent/sessions', {
+          params: {
+            query: {
+              remoteNode: appBarContext.selectedRemoteNode || 'local',
+            },
+          },
+          body: {
+            message: buildImproveDAGDefinitionPrompt({
+              dagFile: fileName,
+              dagName: dagName || fileName,
+              latestDAGRun,
+              userPrompt,
+            }),
+            dagContexts: [
+              {
+                dagFile: fileName,
+                dagRunId: latestDAGRun?.dagRunId,
+              },
+            ],
+            safeMode: preferences.safeMode,
+          },
+        });
+
+        if (error || !sessionData) {
+          setPendingUserMessage(null);
+          showError(
+            error?.message || 'Failed to start improvement session',
+            'Please try again after the agent service is available.'
+          );
+          return;
+        }
+
+        setSessionId(sessionData.sessionId);
+        setSessionState({
+          session_id: sessionData.sessionId,
+          working: true,
+        });
+        setIsImproveModalOpen(false);
+        openChat();
+      } catch {
+        setPendingUserMessage(null);
+        showError(
+          'Failed to start improvement session',
+          'Please try again after the agent service is available.'
+        );
+      } finally {
+        improveLaunchInFlightRef.current = false;
+        setIsLaunchingImproveSession(false);
+      }
+    },
+    [
+      appBarContext.selectedRemoteNode,
+      clearAgentSession,
+      client,
+      config.agentEnabled,
+      dagName,
+      fileName,
+      hasUnsavedChanges,
+      latestDAGRun,
+      openChat,
+      preferences.safeMode,
+      setPendingUserMessage,
+      setSessionId,
+      setSessionState,
+      showError,
+    ]
+  );
+
   return (
     <div className="flex items-center gap-2">
       <Button onClick={() => setIsRenameModalOpen(true)}>
         <PencilLine className="h-4 w-4" />
         Rename
       </Button>
 
+      {config.agentEnabled && (
+        <Button
+          variant="outline"
+          title={
+            hasUnsavedChanges
+              ? 'Save or discard local changes before using agent improvement'
+              : 'Start a fresh agent session to improve this DAG definition'
+          }
+          disabled={hasUnsavedChanges || isLaunchingImproveSession}
+          onClick={() => setIsImproveModalOpen(true)}
+        >
+          <Sparkles className="h-4 w-4" />
+          Improve
+        </Button>
+      )}
+
       <Button
         variant="destructive"
         onClick={async () => {
@@ -126,6 +269,15 @@ function DAGEditButtons({ fileName }: Props) {
         isLoading={isRenameLoading}
         externalError={renameError}
       />
+      <ImproveDAGDefinitionModal
+        isOpen={isImproveModalOpen}
+        onClose={handleImproveClose}
+        onSubmit={handleImproveSubmit}
+        dagFile={fileName}
+        dagName={dagName}
+        latestDAGRun={latestDAGRun}
+        isLoading={isLaunchingImproveSession}
+      />
     </div>
   );
 }