Tool cancellation support

client/src/components/ChatTabV2.tsx

@@ -28,6 +28,11 @@ import {
 import { useJsonRpcPanelVisibility } from "@/hooks/use-json-rpc-panel";
 import { CollapsedPanelStrip } from "@/components/ui/collapsed-panel-strip";
 import { useChatSession } from "@/hooks/use-chat-session";
+import {
+  isToolPart,
+  isDynamicTool,
+  getToolInfo,
+} from "@/components/chat-v2/thread/thread-helpers";
 
 interface ChatTabProps {
   connectedServerConfigs: Record<string, ServerWithName>;
@@ -76,6 +81,9 @@ export function ChatTabV2({
   );
   const [elicitationLoading, setElicitationLoading] = useState(false);
   const [isWidgetFullscreen, setIsWidgetFullscreen] = useState(false);
+  const [cancelledToolIds, setCancelledToolIds] = useState<Set<string>>(
+    new Set(),
+  );
 
   // Filter to only connected servers
   const selectedConnectedServerNames = useMemo(
@@ -122,9 +130,42 @@ export function ChatTabV2({
     onReset: () => {
       setInput("");
       setWidgetStateQueue([]);
+      setCancelledToolIds(new Set());
     },
   });
 
+  // Wrapped stop function that tracks cancelled tool IDs
+  const handleStop = useCallback(() => {
+    // Find all in-progress tool calls and mark them as cancelled
+    const inProgressToolIds = new Set<string>();
+    for (const msg of messages) {
+      for (const part of msg.parts ?? []) {
+        if (isToolPart(part) || isDynamicTool(part)) {
+          const toolInfo = getToolInfo(part);
+          if (
+            toolInfo.toolCallId &&
+            toolInfo.toolState !== "output-available" &&
+            toolInfo.toolState !== "output-error"
+          ) {
+            inProgressToolIds.add(toolInfo.toolCallId);
+          }
+        }
+      }
+    }
+
+    if (inProgressToolIds.size > 0) {
+      setCancelledToolIds((prev) => {
+        const next = new Set(prev);
+        for (const id of inProgressToolIds) {
+          next.add(id);
+        }
+        return next;
+      });
+    }
+
+    stop();
+  }, [messages, stop]);
+
   // Check if thread is empty
   const isThreadEmpty = !messages.some(
     (msg) => msg.role === "user" || msg.role === "assistant",
@@ -395,7 +436,7 @@ export function ChatTabV2({
     value: input,
     onChange: setInput,
     onSubmit,
-    stop,
+    stop: handleStop,
     disabled: inputDisabled,
     isLoading: isStreaming,
     placeholder,
@@ -514,6 +555,7 @@ export function ChatTabV2({
                       enableFullscreenChatOverlay
                       fullscreenChatPlaceholder={placeholder}
                       fullscreenChatDisabled={inputDisabled}
+                      cancelledToolIds={cancelledToolIds}
                     />
                     {errorMessage && (
                       <div className="px-4 pb-4 pt-4">

client/src/components/chat-v2/thread.tsx

@@ -22,6 +22,8 @@ interface ThreadProps {
   enableFullscreenChatOverlay?: boolean;
   fullscreenChatPlaceholder?: string;
   fullscreenChatDisabled?: boolean;
+  /** Set of tool call IDs that have been cancelled */
+  cancelledToolIds?: Set<string>;
 }
 
 export function Thread({
@@ -38,6 +40,7 @@ export function Thread({
   enableFullscreenChatOverlay = false,
   fullscreenChatPlaceholder = "Message…",
   fullscreenChatDisabled = false,
+  cancelledToolIds,
 }: ThreadProps) {
   const [pipWidgetId, setPipWidgetId] = useState<string | null>(null);
   const [fullscreenWidgetId, setFullscreenWidgetId] = useState<string | null>(
@@ -105,6 +108,7 @@ export function Thread({
             onExitFullscreen={handleExitFullscreen}
             displayMode={displayMode}
             onDisplayModeChange={onDisplayModeChange}
+            cancelledToolIds={cancelledToolIds}
           />
         ))}
         {isLoading && <ThinkingIndicator model={model} />}

client/src/components/chat-v2/thread/mcp-apps-renderer.tsx

@@ -90,6 +90,10 @@ interface MCPAppsRendererProps {
   onDisplayModeChange?: (mode: DisplayMode) => void;
   onRequestFullscreen?: (toolCallId: string) => void;
   onExitFullscreen?: (toolCallId: string) => void;
+  /** Whether the tool was cancelled (SEP-1865 ui/notifications/tool-cancelled) */
+  toolCancelled?: boolean;
+  /** Reason for tool cancellation */
+  toolCancelReason?: string;
 }
 
 class LoggingTransport implements Transport {
@@ -171,6 +175,8 @@ export function MCPAppsRenderer({
   onDisplayModeChange,
   onRequestFullscreen,
   onExitFullscreen,
+  toolCancelled,
+  toolCancelReason,
 }: MCPAppsRendererProps) {
   const sandboxRef = useRef<SandboxedIframeHandle>(null);
   const themeMode = usePreferencesStore((s) => s.themeMode);
@@ -322,6 +328,7 @@ export function MCPAppsRenderer({
   const lastToolInputRef = useRef<string | null>(null);
   const lastToolOutputRef = useRef<string | null>(null);
   const lastToolErrorRef = useRef<string | null>(null);
+  const lastToolCancelledRef = useRef<boolean>(false);
   const isReadyRef = useRef(false);
 
   const onSendFollowUpRef = useRef(onSendFollowUp);
@@ -335,9 +342,10 @@ export function MCPAppsRenderer({
   const toolCallIdRef = useRef(toolCallId);
   const pipWidgetIdRef = useRef(pipWidgetId);
 
-  // Fetch widget HTML when tool output is available or CSP mode changes
+  // Fetch widget HTML when tool input is available (for cancellation support) or output is available
+  // Loading early allows us to send cancellation notifications to the widget during execution
   useEffect(() => {
-    if (toolState !== "output-available") return;
+    if (toolState !== "input-available" && toolState !== "output-available") return;
     // Re-fetch if CSP mode changed (widget needs to reload with new CSP policy)
     if (widgetHtml && loadedCspMode === cspMode) return;
 
@@ -860,8 +868,10 @@ export function MCPAppsRenderer({
     bridge.setHostContext(hostContext);
   }, [hostContext, isReady]);
 
+  // Send tool input when available (works with input-available for early widget loading)
   useEffect(() => {
-    if (!isReady || toolState !== "output-available") return;
+    if (!isReady) return;
+    if (toolState !== "input-available" && toolState !== "output-available") return;
     const bridge = bridgeRef.current;
     if (!bridge || lastToolInputRef.current !== null) return;
 
@@ -902,10 +912,26 @@ export function MCPAppsRenderer({
     });
   }, [isReady, toolErrorText, toolOutput, toolState]);
 
+  // SEP-1865: Send tool cancellation notification
+  useEffect(() => {
+    if (!isReady || !toolCancelled) return;
+    const bridge = bridgeRef.current;
+    if (!bridge) return;
+
+    // Prevent duplicate cancellation notifications
+    if (lastToolCancelledRef.current) return;
+    lastToolCancelledRef.current = true;
+
+    bridge.sendToolCancelled?.({
+      reason: toolCancelReason ?? "Tool execution was cancelled",
+    });
+  }, [isReady, toolCancelled, toolCancelReason]);
+
   useEffect(() => {
     lastToolInputRef.current = null;
     lastToolOutputRef.current = null;
     lastToolErrorRef.current = null;
+    lastToolCancelledRef.current = false;
   }, [toolCallId]);
 
   const handleSandboxMessage = (event: MessageEvent) => {
@@ -945,11 +971,23 @@ export function MCPAppsRenderer({
     );
   };
 
-  // Loading states
-  if (toolState !== "output-available") {
+  // Loading states - show placeholder only during input-streaming (before input is complete)
+  // Once input-available, we load the widget for cancellation support
+  if (toolState !== "input-available" && toolState !== "output-available" && toolState !== "output-error") {
+    // Show cancelled state if tool was cancelled before input was available
+    if (toolCancelled) {
+      return (
+        <div className="border border-orange-500/40 rounded-md bg-orange-500/10 text-xs text-orange-600 dark:text-orange-400 px-3 py-2">
+          <div className="font-medium">Tool Cancelled</div>
+          <div className="text-orange-500/80 mt-1">
+            {toolCancelReason ?? "Operation was cancelled"}
+          </div>
+        </div>
+      );
+    }
     return (
       <div className="border border-border/40 rounded-md bg-muted/30 text-xs text-muted-foreground px-3 py-2">
-        Waiting for tool to finish executing...
+        Waiting for tool input...
       </div>
     );
   }

client/src/components/chat-v2/thread/message-view.tsx

@@ -25,6 +25,7 @@ export function MessageView({
   onExitFullscreen,
   displayMode,
   onDisplayModeChange,
+  cancelledToolIds,
 }: {
   message: UIMessage;
   model: ModelDefinition;
@@ -40,6 +41,7 @@ export function MessageView({
   onExitFullscreen: (toolCallId: string) => void;
   displayMode?: DisplayMode;
   onDisplayModeChange?: (mode: DisplayMode) => void;
+  cancelledToolIds?: Set<string>;
 }) {
   const themeMode = usePreferencesStore((s) => s.themeMode);
   const logoSrc = getProviderLogoFromModel(model, themeMode);
@@ -67,6 +69,7 @@ export function MessageView({
             onExitFullscreen={onExitFullscreen}
             displayMode={displayMode}
             onDisplayModeChange={onDisplayModeChange}
+            cancelledToolIds={cancelledToolIds}
           />
         ))}
       </UserMessageBubble>
@@ -108,6 +111,7 @@ export function MessageView({
                 onExitFullscreen={onExitFullscreen}
                 displayMode={displayMode}
                 onDisplayModeChange={onDisplayModeChange}
+                cancelledToolIds={cancelledToolIds}
               />
             ))}
           </div>

client/src/components/chat-v2/thread/part-switch.tsx

@@ -47,6 +47,7 @@ export function PartSwitch({
   onExitFullscreen,
   displayMode,
   onDisplayModeChange,
+  cancelledToolIds,
 }: {
   part: AnyPart;
   role: UIMessage["role"];
@@ -62,6 +63,7 @@ export function PartSwitch({
   onExitFullscreen: (toolCallId: string) => void;
   displayMode?: DisplayMode;
   onDisplayModeChange?: (mode: DisplayMode) => void;
+  cancelledToolIds?: Set<string>;
 }) {
   if (isToolPart(part) || isDynamicTool(part)) {
     const toolPart = part as ToolUIPart<UITools> | DynamicToolUIPart;
@@ -134,6 +136,12 @@ export function PartSwitch({
             onDisplayModeChange={onDisplayModeChange}
             onRequestFullscreen={onRequestFullscreen}
             onExitFullscreen={onExitFullscreen}
+            toolCancelled={
+              toolInfo.toolCallId
+                ? cancelledToolIds?.has(toolInfo.toolCallId)
+                : false
+            }
+            toolCancelReason="Operation was cancelled by user"
           />
         </>
       );

client/src/components/ui-playground/PlaygroundLeft.tsx

@@ -41,6 +41,7 @@ interface PlaygroundLeftProps {
   onToggleField: (name: string, isSet: boolean) => void;
   isExecuting: boolean;
   onExecute: () => void;
+  onCancel: () => void;
   onSave: () => void;
   // Saved requests
   savedRequests: SavedRequest[];
@@ -69,6 +70,7 @@ export function PlaygroundLeft({
   onToggleField,
   isExecuting,
   onExecute,
+  onCancel,
   onSave,
   savedRequests,
   filteredSavedRequests,
@@ -166,6 +168,7 @@ export function PlaygroundLeft({
         canSave={!!selectedToolName}
         fetchingTools={fetchingTools}
         onExecute={onExecute}
+        onCancel={onCancel}
         onSave={onSave}
         onRefresh={onRefresh}
         onClose={onClose}