Let a paused flow be stepped from the dock

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H7LwYgJfpkbLCTeiAf8U4A

frontend/src/components/Flow/FlowEditor.tsx

@@ -211,7 +211,7 @@ function FlowEditorInner({
 }) {
   const navigate = useNavigate()
   const queryClient = useQueryClient()
-  const { showErrorToast } = useCustomToast()
+  const { showErrorToast, showSuccessToast } = useCustomToast()
   const { screenToFlowPosition, fitView } = useReactFlow()
   const updateNodeInternals = useUpdateNodeInternals()
 
@@ -507,6 +507,13 @@ function FlowEditorInner({
     onError: () => showErrorToast("The flow could not be paused."),
   })
 
+  const stepMutation = useMutation({
+    mutationFn: () => FlowsService.stepFlow({ name: flowName }),
+    // Says which node ran, or that nothing was held back — both are answers.
+    onSuccess: (result) => showSuccessToast(result.message),
+    onError: () => showErrorToast("The flow could not be stepped."),
+  })
+
   const deleteMutation = useMutation({
     mutationFn: () => FlowsService.deleteFlow({ name: flowName }),
     onSuccess: () => {
@@ -970,6 +977,8 @@ function FlowEditorInner({
             runMutation.mutate()
           }}
           onTogglePause={() => pauseMutation.mutate(!paused)}
+          onStep={() => stepMutation.mutate()}
+          stepping={stepMutation.isPending}
           onFocusNode={focusNode}
         />
       </div>