feat(ui): Add stop button to interrupt agent tool execution

[ebarroca]

Summary

Add user-facing stop functionality to allow interrupting agent operations mid-execution. Users can now click a "Stop" button to interrupt long-running tools and provide new instructions without canceling the entire workflow.

Changes

UI Components

• ModernAgentConversation.tsx:

  • Added isStopping state for UI feedback
  • Added handleStop() function that sends "Stop" signal to workflow
  • Connected stop handler to MessageInput component
  • Added toast notifications for success/failure

• MessageInput.tsx:

  • Added onStop and isStopping props
  • Added Stop button with destructive styling (red border/text)
  • Button only shows when agent has active workstreams running
  • Shows spinner during stop operation

User Experience

1. When agent is executing tools, a red "Stop" button appears
2. User clicks Stop → signal sent to Temporal workflow
3. Workflow interrupts current tool execution (best effort)
4. User receives confirmation toast
5. User can type new message to provide different instructions
6. Conversation continues with new context

Technical Notes

This PR contains the UI/client-side implementation. The workflow-side implementation is in the main studio repo PR.

The stop mechanism:

• Sends a "Stop" signal to the Temporal workflow
• Workflow uses race conditions and cancellation scopes to interrupt
• Activities that support cancellation will stop immediately
• Activities that don't will be abandoned (results ignored)

Testing

• ✅ Built successfully with TypeScript
• ✅ ESLint passed
• Ready for manual testing in development environment

Related

• Workflow implementation: vertesia/studio#3397

🤖 Generated with Claude Code

[vertesia-code-review]

Changes

This pull request introduces the ability to stop the agent's current tool execution in the ModernAgentConversation component. It adds a 'Stop' button that, when clicked, sends a signal to the workflow to interrupt the current task. This feature enhances user control over the agent's actions and allows for course correction during long-running processes. A toast notification is displayed to confirm the interruption or report any errors during the stop process.

Here is a breakdown of the changes:

Path	Description
packages/ui/src/features/agent/chat/ModernAgentConversation.tsx	Introduced the handleStop function to send a 'Stop' signal to the agent's workflow, allowing users to interrupt the current task. The isStopping state variable is used to prevent multiple stop requests and indicate the stopping status. A toast notification is displayed to confirm the interruption or report any errors. The handleStop function is now passed to the MessageInput component.
packages/ui/src/features/agent/chat/ModernAgentOutput/MessageInput.tsx	Added an optional onStop prop to the MessageInput component. A 'Stop' button is displayed when the agent is actively working (i.e., activeTaskCount > 0) and the onStop prop is provided. The button is disabled while the stopping process is in progress (isStopping). A spinner is shown while isStopping is true.

Purpose

The motivation behind this pull request is to enhance the user experience by providing a way to interrupt long-running agent tool executions. Currently, users have no way to stop an agent mid-execution without canceling the entire workflow. This enhancement allows users to stop the agent, provide new instructions, and continue the conversation with a different context, offering greater control and flexibility.

The context of this pull request involves adding a "Stop" button to the UI, specifically in the ModernAgentConversation.tsx and MessageInput.tsx components. When the agent is executing tools, the Stop button appears, allowing the user to send a stop signal to the Temporal workflow. The workflow then attempts to interrupt the current tool execution. Upon successful interruption, the user receives a confirmation toast and can provide new instructions. The workflow-side implementation is handled in a separate pull request in the main studio repo.

Related issues: N/A

Code Review

You can start a code review by adding a comment: "Vertesia, please review".

Note that the motivation and context are rated as very clear (5/5). The agent has a very good understanding of the purpose of the pull request.