feat: render cancelled tool state in UI after user interrupt

Send tool_state_change(cancelled) events for in-flight tools so the
frontend can flip spinners to a muted "cancelled" state. Keep SSE
stream open (don't call chat.stop()) so backend events arrive.
Show "What should the agent do instead?" placeholder after cancel.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

agent/core/agent_loop.py

@@ -577,6 +577,13 @@ class Handlers:
                             await gather_task
                         except asyncio.CancelledError:
                             pass
+                        # Notify frontend that in-flight tools were cancelled
+                        for tc, name, _args, valid, _ in parsed_tools:
+                            if valid:
+                                await session.send_event(Event(
+                                    event_type="tool_state_change",
+                                    data={"tool_call_id": tc.id, "tool": name, "state": "cancelled"},
+                                ))
                         await _cleanup_on_cancel(session)
                         break
 
@@ -834,6 +841,12 @@ class Handlers:
                     await gather_task
                 except asyncio.CancelledError:
                     pass
+                # Notify frontend that approved tools were cancelled
+                for tc, tool_name, _args, _was_edited in approved_tasks:
+                    await session.send_event(Event(
+                        event_type="tool_state_change",
+                        data={"tool_call_id": tc.id, "tool": tool_name, "state": "cancelled"},
+                    ))
                 await _cleanup_on_cancel(session)
                 await session.send_event(Event(event_type="interrupted"))
                 session.increment_turn()

frontend/src/components/Chat/ToolCallGroup.tsx

@@ -19,6 +19,13 @@ type DynamicToolPart = Extract<UIMessage['parts'][number], { type: 'dynamic-tool
 
 type ToolPartState = DynamicToolPart['state'];
 
+/** Check if a tool part was cancelled (output-error with cancellation message). */
+function isCancelledTool(tool: DynamicToolPart): boolean {
+  return tool.state === 'output-error' &&
+    typeof (tool as Record<string, unknown>).errorText === 'string' &&
+    ((tool as Record<string, unknown>).errorText as string).includes('Cancelled by user');
+}
+
 interface ToolCallGroupProps {
   tools: DynamicToolPart[];
   approveTools: (approvals: Array<{ tool_call_id: string; approved: boolean; feedback?: string | null; edited_script?: string | null }>) => Promise<boolean>;
@@ -54,7 +61,10 @@ function costLabel(hardware: string): string | null {
 // Visual helpers
 // ---------------------------------------------------------------------------
 
-function StatusIcon({ state }: { state: ToolPartState }) {
+function StatusIcon({ state, cancelled }: { state: ToolPartState; cancelled?: boolean }) {
+  if (cancelled) {
+    return <BlockIcon sx={{ fontSize: 16, color: 'var(--muted-text)' }} />;
+  }
   switch (state) {
     case 'approval-requested':
       return <HourglassEmptyIcon sx={{ fontSize: 16, color: 'var(--accent-yellow)' }} />;
@@ -563,10 +573,11 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
             !!tool.input;
           const localDecision = decisions[tool.toolCallId];
 
+          const cancelled = isCancelledTool(tool);
           const displayState = isPending && localDecision
             ? (localDecision.approved ? 'input-available' : 'output-denied')
             : state;
-          const label = statusLabel(displayState as ToolPartState);
+          const label = cancelled ? 'cancelled' : statusLabel(displayState as ToolPartState);
 
           // Parse job metadata from hf_jobs output and store
           const jobUrlFromStore = tool.toolName === 'hf_jobs' ? getJobUrl(tool.toolCallId) : undefined;
@@ -596,11 +607,14 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
                   '&:hover': clickable && !isPending ? { bgcolor: 'var(--hover-bg)' } : {},
                 }}
               >
-                <StatusIcon state={
-                  (tool.toolName === 'hf_jobs' && jobMeta.jobStatus && ['ERROR', 'FAILED', 'CANCELLED'].includes(jobMeta.jobStatus) && displayState === 'output-available')
-                    ? 'output-error'
-                    : displayState as ToolPartState
-                } />
+                <StatusIcon
+                  cancelled={cancelled}
+                  state={
+                    (tool.toolName === 'hf_jobs' && jobMeta.jobStatus && ['ERROR', 'FAILED', 'CANCELLED'].includes(jobMeta.jobStatus) && displayState === 'output-available')
+                      ? 'output-error'
+                      : displayState as ToolPartState
+                  }
+                />
 
                 <Typography
                   variant="body2"
@@ -628,10 +642,11 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
                       height: 20,
                       fontSize: '0.65rem',
                       fontWeight: 600,
-                      bgcolor: displayState === 'output-error' ? 'rgba(224,90,79,0.12)'
+                      bgcolor: cancelled ? 'rgba(255,255,255,0.05)'
+                        : displayState === 'output-error' ? 'rgba(224,90,79,0.12)'
                         : displayState === 'output-denied' ? 'rgba(255,255,255,0.05)'
                         : 'var(--accent-yellow-weak)',
-                      color: statusColor(displayState as ToolPartState),
+                      color: cancelled ? 'var(--muted-text)' : statusColor(displayState as ToolPartState),
                       letterSpacing: '0.03em',
                     }}
                   />

frontend/src/components/SessionChat.tsx

@@ -5,7 +5,7 @@
  * runs — processing events — but only the active session renders visible
  * UI (MessageList + ChatInput).
  */
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useAgentChat } from '@/hooks/useAgentChat';
 import { useAgentStore } from '@/store/agentStore';
 import { useSessionStore } from '@/store/sessionStore';
@@ -24,6 +24,8 @@ export default function SessionChat({ sessionId, isActive, onSessionDead }: Sess
   const { isConnected, isProcessing, activityStatus, updateSession } = useAgentStore();
   const { updateSessionTitle } = useSessionStore();
 
+  const [wasCancelled, setWasCancelled] = useState(false);
+
   const { messages, sendMessage, stop, status, undoLastTurn, approveTools } = useAgentChat({
     sessionId,
     isActive,
@@ -55,6 +57,12 @@ export default function SessionChat({ sessionId, isActive, onSessionDead }: Sess
     return () => document.removeEventListener('visibilitychange', onVisible);
   }, [isActive, sessionId]);
 
+  // Wrap stop to track cancellation
+  const handleStop = useCallback(() => {
+    stop();
+    setWasCancelled(true);
+  }, [stop]);
+
   // SDK status is the ground truth — if it's streaming/submitted, agent is busy
   const sdkBusy = status === 'streaming' || status === 'submitted';
   const busy = isProcessing || sdkBusy;
@@ -63,6 +71,7 @@ export default function SessionChat({ sessionId, isActive, onSessionDead }: Sess
     async (text: string) => {
       if (!text.trim() || busy) return;
 
+      setWasCancelled(false);
       updateSession(sessionId, { isProcessing: true });
       sendMessage({ text: text.trim(), metadata: { createdAt: new Date().toISOString() } });
 
@@ -99,10 +108,16 @@ export default function SessionChat({ sessionId, isActive, onSessionDead }: Sess
       />
       <ChatInput
         onSend={handleSendMessage}
-        onStop={stop}
+        onStop={handleStop}
         isProcessing={busy}
         disabled={!isConnected || activityStatus.type === 'waiting-approval'}
-        placeholder={activityStatus.type === 'waiting-approval' ? 'Approve or reject pending tools first...' : undefined}
+        placeholder={
+          activityStatus.type === 'waiting-approval'
+            ? 'Approve or reject pending tools first...'
+            : wasCancelled
+              ? 'What should the agent do instead?'
+              : undefined
+        }
       />
     </>
   );

frontend/src/hooks/useAgentChat.ts

@@ -223,6 +223,7 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
       onToolRunning: (toolName: string, description?: string) => {
         updateSession(sessionId, { activityStatus: { type: 'tool', toolName, description } });
       },
+      onInterrupted: () => { /* no-op — handled by stop() caller */ },
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sessionId],
@@ -586,11 +587,14 @@ export function useAgentChat({ sessionId, isActive, onReady, onError, onSessionD
     [sessionId, chat, updateSession, setNeedsAttention],
   );
 
-  // -- Stop (abort SSE stream + interrupt backend agent loop) ---------------
+  // -- Stop (interrupt backend agent loop, keep SSE open for events) --------
   const stop = useCallback(() => {
-    chat.stop();
+    // Don't call chat.stop() — keep the SSE stream open so the backend's
+    // tool_state_change(cancelled) and interrupted events reach the frontend.
+    // The stream closes naturally when the backend sends finish events.
+    updateSession(sessionId, { isProcessing: false });
     apiFetch(`/api/interrupt/${sessionId}`, { method: 'POST' }).catch(() => {});
-  }, [sessionId, chat]);
+  }, [sessionId, updateSession]);
 
   return {
     messages: chat.messages,

frontend/src/lib/sse-chat-transport.ts

@@ -31,6 +31,7 @@ export interface SideChannelCallbacks {
   onToolOutputPanel: (tool: string, toolCallId: string, output: string, success: boolean) => void;
   onStreaming: () => void;
   onToolRunning: (toolName: string, description?: string) => void;
+  onInterrupted: () => void;
 }
 
 // ---------------------------------------------------------------------------
@@ -104,6 +105,7 @@ function createEventToChunkStream(sideChannel: SideChannelCallbacks): TransformS
           endTextPart(controller);
           controller.enqueue({ type: 'finish-step' });
           controller.enqueue({ type: 'finish', finishReason: 'stop' });
+          sideChannel.onInterrupted();
           sideChannel.onProcessingDone();
           break;
 
@@ -234,6 +236,9 @@ function createEventToChunkStream(sideChannel: SideChannelCallbacks): TransformS
           if (state === 'rejected' || state === 'abandoned') {
             controller.enqueue({ type: 'tool-output-denied', toolCallId: tcId });
           }
+          if (state === 'cancelled') {
+            controller.enqueue({ type: 'tool-output-error', toolCallId: tcId, errorText: 'Cancelled by user', dynamic: true });
+          }
           break;
         }