Before we do the final deployment and officially end this tutorial, let's tie up a few loose ends. So this empty page, no workflow selected, Currently doesn't create a new workflow when you click on the button. That's the first thing I want to fix. And then the second thing I want to fix is the ability to stop a workflow. So we are able to start a workflow by clicking on the run button, but there is actually no way of stopping it.
The only thing I can do once I start a run is actually start it again. Instead, this should turn into a stop button and then cancel the run. Luckily for us, we already have the cancel workflow run action developed as well as the workflow runs provider which keeps track of the latest live run. The run button component is located inside of the right sidebar. So make sure that you can find run button inside.
This is where we have to implement that dynamic toggle. Once it's started, it shouldn't display run and the play icon, but instead it should say stop and a stop icon. So just make sure you can find this run button component. Let's construct the following prompt. The run button in our right sidebar component can only start a workflow.
There is no way to stop one that's running. Make it a toggle. While a run is in flight, it becomes a stop button that cancels that run. And when nothing is running, it's run as before. Then we mentioned the workflow runs provider and say it already tracks which runs are live.
And instead of our workflows actions, we have an action that cancels a run by its ID. At most, one run is live at a time. Let's go ahead and run this prompt. My agent decided to add a new function useLiveRun instead of the workflow runs provider. It extracts the run and simply finds the exact run which is currently live.
Then instead of the right sidebar component, it found the run button and it uses the new hook to find the live run and dynamically render between stop, which calls the cancel workflow run action and leaves the usual one which is run otherwise. So go ahead and construct a workflow with an agent node and make it search for something. That should give you enough time to test whether stopping the workflow actually works. So let's click on Run and then let's click on Stop. Once you stop, inside of your console panel, you should see that it didn't manage to complete open URL 1.
As you can see, this step is now infinitely stuck in waiting to finish and agent 1 wasn't even run yet. So we can now officially stop our runs. You can make the stop button look slightly better by using the destructive variant instead of secondary one. So let's take a look again. There we go.
This looks like a destructive action because it's going to stop the run. And now let's fix our empty state. So instead of our dashboard page, the new workflow button in the empty state doesn't do anything yet. Why are we to create a workflow? Keep it simple.
A direct call to create workflow action inside of our actions, no optimistic update, give the new workflow a generated name the same way the sidebar's new workflow button does. My agent decided to fix this by developing a new client component called new workflow button so it can leave the actual page component a server component. If your client simply added use client and then develop the entire logic here, that should also work just fine. But for example, my agent created a new component, new workflow button in which it uses use transition to call create workflow action with a generate a slug function. So let's test it out.
Inside of localhost, I'm going to click new workflow and there we go. We have a new workflow created. Congratulations on implementing the last code change we're going to do in this tutorial. Remember to git stage, git commit, and git push your changes.