From 1135e9342e4516499723eda8e6a8d38e691be3dc Mon Sep 17 00:00:00 2001
From: Johannes du Plessis <johannes@langchain.dev>
Date: Wed, 10 Jun 2026 13:27:04 -0700
Subject: [PATCH] feat: add cancel run button to agent UI (#1485)

* feat: add cancel run button to agent UI

Wire the existing cancel-thread mutation into the agent thread view by
adding a stop button to the prompt bar that appears while a run is active.

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>

* fix: preserve thread messages when cancel response omits them

---------

Co-authored-by: open-swe[bot] <open-swe@users.noreply.github.com>
---
 ui/src/components/agents/AgentThreadView.tsx  | 17 ++++++++-
 .../agents/ported/CloudPromptBar.tsx          | 37 ++++++++++++++++++-
 ui/src/lib/agents/queries.ts                  | 12 +++++-
 3 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/agents/AgentThreadView.tsx b/ui/src/components/agents/AgentThreadView.tsx
index 296bb7b1..f867d137 100644
--- a/ui/src/components/agents/AgentThreadView.tsx
+++ b/ui/src/components/agents/AgentThreadView.tsx
@@ -6,7 +6,11 @@ import type { AgentThread, ImageChunk, Message } from "@/lib/agents/types"
 import type { ModelSelection } from "@/lib/agents/useModelOptions"
 import { AgentPromptBar } from "@/components/agents/AgentPromptBar"
 import { MessageView } from "@/components/agents/ported"
-import { agentThreadKeys, useSendAgentMessage } from "@/lib/agents/queries"
+import {
+  agentThreadKeys,
+  useCancelAgentThread,
+  useSendAgentMessage,
+} from "@/lib/agents/queries"
 import {
   addPendingPrompt,
   dropPendingPrompts,
@@ -55,6 +59,7 @@ function isPendingPromptConfirmed(
 export function AgentThreadView({ thread }: AgentThreadViewProps) {
   const queryClient = useQueryClient()
   const sendMessage = useSendAgentMessage(thread.id)
+  const cancelThread = useCancelAgentThread(thread.id)
   useAgentThreadStream(thread.id, thread.status === "running")
   const [pendingPrompts, setPendingPrompts] = useState<Array<PendingPrompt>>(
     () => getPendingPrompts(thread.id)
@@ -134,6 +139,10 @@ export function AgentThreadView({ thread }: AgentThreadViewProps) {
     ]
   )
 
+  const handleCancel = useCallback(() => {
+    cancelThread.mutate()
+  }, [cancelThread])
+
   const displayMessages = useMemo<Array<Message>>(() => {
     if (pendingPrompts.length === 0) return thread.messages
     const baseTimestamp = new Date().toISOString()
@@ -177,6 +186,9 @@ export function AgentThreadView({ thread }: AgentThreadViewProps) {
                   compact
                   busy={isStreaming}
                   disabled={sendMessage.isPending}
+                  canCancel={hasActiveRun}
+                  cancelling={cancelThread.isPending}
+                  onCancel={handleCancel}
                   onSubmit={handleSubmit}
                   models={models}
                   selection={activeSelection}
@@ -196,6 +208,9 @@ export function AgentThreadView({ thread }: AgentThreadViewProps) {
                 compact
                 busy={isStreaming}
                 disabled={sendMessage.isPending}
+                canCancel={hasActiveRun}
+                cancelling={cancelThread.isPending}
+                onCancel={handleCancel}
                 onSubmit={handleSubmit}
                 models={models}
                 selection={activeSelection}
diff --git a/ui/src/components/agents/ported/CloudPromptBar.tsx b/ui/src/components/agents/ported/CloudPromptBar.tsx
index 26e4585b..f60e2a40 100644
--- a/ui/src/components/agents/ported/CloudPromptBar.tsx
+++ b/ui/src/components/agents/ported/CloudPromptBar.tsx
@@ -1,4 +1,11 @@
-import { ArrowUp, ChevronDown, ImagePlus, LoaderCircle, X } from "lucide-react"
+import {
+  ArrowUp,
+  ChevronDown,
+  ImagePlus,
+  LoaderCircle,
+  Square,
+  X,
+} from "lucide-react"
 import {
   memo,
   useCallback,
@@ -31,6 +38,10 @@ export interface CloudPromptBarProps {
   compact?: boolean
   disabled?: boolean
   busy?: boolean
+  /** When true, a stop button is shown next to send to cancel the active run. */
+  canCancel?: boolean
+  cancelling?: boolean
+  onCancel?: () => void
   onSubmit?: (value: string, images: Array<ImageChunk>) => void
   models?: Array<ModelOption>
   selection?: ModelSelection | null
@@ -73,6 +84,9 @@ export const CloudPromptBar = memo(function CloudPromptBarComponent({
   compact = false,
   disabled = false,
   busy = false,
+  canCancel = false,
+  cancelling = false,
+  onCancel,
   onSubmit,
   models = [],
   selection = null,
@@ -346,6 +360,27 @@ export const CloudPromptBar = memo(function CloudPromptBarComponent({
             <ImagePlus className="size-4" />
           </button>
 
+          {canCancel && (
+            <button
+              type="button"
+              onClick={onCancel}
+              disabled={cancelling}
+              aria-label="Cancel run"
+              title="Cancel run"
+              className="flex size-7 shrink-0 items-center justify-center rounded-full border border-[var(--ui-border)] bg-[var(--ui-panel-2)] text-[color:var(--ui-text-muted)] transition-colors hover:text-[color:var(--ui-text)] disabled:cursor-default disabled:opacity-60"
+            >
+              {cancelling ? (
+                <LoaderCircle className="size-3.5 animate-spin" />
+              ) : (
+                <Square
+                  className="size-3"
+                  fill="currentColor"
+                  strokeWidth={0}
+                />
+              )}
+            </button>
+          )}
+
           <button
             type="button"
             onClick={handleSubmit}
diff --git a/ui/src/lib/agents/queries.ts b/ui/src/lib/agents/queries.ts
index 9e872d52..d6f149a8 100644
--- a/ui/src/lib/agents/queries.ts
+++ b/ui/src/lib/agents/queries.ts
@@ -167,7 +167,17 @@ export function useCancelAgentThread(threadId: string) {
   return useMutation({
     mutationFn: () => agentsApi.cancelThread(threadId),
     onSuccess: (thread) => {
-      queryClient.setQueryData(agentThreadKeys.detail(threadId), thread)
+      queryClient.setQueryData(
+        agentThreadKeys.detail(threadId),
+        (prev: typeof thread | undefined) => {
+          if (!prev) return thread
+          return {
+            ...thread,
+            messages:
+              thread.messages.length > 0 ? thread.messages : prev.messages,
+          }
+        }
+      )
       queryClient.invalidateQueries({ queryKey: agentThreadKeys.all })
     },
   })