feat: implement cooperative agent cancellation with cancel button

agent/core/agent_loop.py

@@ -164,6 +164,36 @@ async def _compact_and_notify(session: Session) -> None:
         )
 
 
+def _patch_dangling_tool_calls(session: Session) -> None:
+    """Add stub tool results for any tool_calls that lack a matching result.
+
+    After cancellation the last assistant message may contain tool_calls
+    whose results were never recorded.  LLM APIs require every tool_call
+    to have a corresponding tool-result message, so we inject placeholders.
+    """
+    items = session.context_manager.items
+    if not items:
+        return
+    last = items[-1]
+    if getattr(last, "role", None) != "assistant" or not getattr(last, "tool_calls", None):
+        return
+    answered_ids = {
+        getattr(m, "tool_call_id", None)
+        for m in items
+        if getattr(m, "role", None) == "tool"
+    }
+    for tc in last.tool_calls:
+        if tc.id not in answered_ids:
+            items.append(
+                Message(
+                    role="tool",
+                    content="Cancelled by user.",
+                    tool_call_id=tc.id,
+                    name=tc.function.name,
+                )
+            )
+
+
 class Handlers:
     """Handler functions for each operation type"""
 
@@ -218,6 +248,9 @@ class Handlers:
 
             Laminar.set_trace_session_id(session_id=session.session_id)
 
+        # Clear any stale cancellation flag from a previous run
+        session.reset_cancel()
+
         # If there's a pending approval and the user sent a new message,
         # abandon the pending tools so the LLM context stays valid.
         if text and session.pending_approval:
@@ -238,6 +271,10 @@ class Handlers:
         final_response = None
 
         while iteration < max_iterations:
+            # ── Cancellation check: before LLM call ──
+            if session.is_cancelled:
+                break
+
             # Compact before calling the LLM if context is near the limit
             await _compact_and_notify(session)
 
@@ -344,6 +381,11 @@ class Handlers:
                 )
                 session.context_manager.add_message(assistant_msg, token_count)
 
+                # ── Cancellation check: before tool execution ──
+                if session.is_cancelled:
+                    _patch_dangling_tool_calls(session)
+                    break
+
                 # Separate tools into those requiring approval and those that don't
                 approval_required_tools = []
                 non_approval_tools = []
@@ -436,6 +478,10 @@ class Handlers:
                             )
                         )
 
+                # ── Cancellation check: after tool execution ──
+                if session.is_cancelled:
+                    break
+
                 # If there are tools requiring approval, ask for batch approval
                 if approval_required_tools:
                     # Prepare batch approval data
@@ -493,12 +539,15 @@ class Handlers:
                 )
                 break
 
-        await session.send_event(
-            Event(
-                event_type="turn_complete",
-                data={"history_size": len(session.context_manager.items)},
+        if session.is_cancelled:
+            await session.send_event(Event(event_type="interrupted"))
+        else:
+            await session.send_event(
+                Event(
+                    event_type="turn_complete",
+                    data={"history_size": len(session.context_manager.items)},
+                )
             )
-        )
 
         # Increment turn counter and check for auto-save
         session.increment_turn()
@@ -506,12 +555,6 @@ class Handlers:
 
         return final_response
 
-    @staticmethod
-    async def interrupt(session: Session) -> None:
-        """Handle interrupt (like interrupt in codex.rs:1266)"""
-        session.interrupt()
-        await session.send_event(Event(event_type="interrupted"))
-
     @staticmethod
     async def undo(session: Session) -> None:
         """Remove the last complete turn (user msg + all assistant/tool msgs that follow).
@@ -771,10 +814,6 @@ async def process_submission(session: Session, submission) -> bool:
         await Handlers.run_agent(session, text)
         return True
 
-    if op.op_type == OpType.INTERRUPT:
-        await Handlers.interrupt(session)
-        return True
-
     if op.op_type == OpType.COMPACT:
         await _compact_and_notify(session)
         return True

agent/core/session.py

@@ -95,7 +95,7 @@ class Session:
             model_name="anthropic/claude-sonnet-4-5-20250929",
         )
         self.is_running = True
-        self.current_task: asyncio.Task | None = None
+        self._cancelled = asyncio.Event()
         self.pending_approval: Optional[dict[str, Any]] = None
         # User's HF OAuth token — set by session_manager after construction
         self.hf_token: Optional[str] = None
@@ -120,10 +120,17 @@ class Session:
             }
         )
 
-    def interrupt(self) -> None:
-        """Interrupt current running task"""
-        if self.current_task and not self.current_task.done():
-            self.current_task.cancel()
+    def cancel(self) -> None:
+        """Signal cancellation to the running agent loop."""
+        self._cancelled.set()
+
+    def reset_cancel(self) -> None:
+        """Clear the cancellation flag before a new run."""
+        self._cancelled.clear()
+
+    @property
+    def is_cancelled(self) -> bool:
+        return self._cancelled.is_set()
 
     def increment_turn(self) -> None:
         """Increment turn counter (called after each user interaction)"""

backend/session_manager.py

@@ -265,9 +265,12 @@ class SessionManager:
         return await self.submit(session_id, operation)
 
     async def interrupt(self, session_id: str) -> bool:
-        """Interrupt a session."""
-        operation = Operation(op_type=OpType.INTERRUPT)
-        return await self.submit(session_id, operation)
+        """Interrupt a session by signalling cancellation directly (bypasses queue)."""
+        agent_session = self.sessions.get(session_id)
+        if not agent_session or not agent_session.is_active:
+            return False
+        agent_session.session.cancel()
+        return True
 
     async def undo(self, session_id: str) -> bool:
         """Undo last turn in a session."""

frontend/src/components/Chat/ChatInput.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useEffect, useRef, KeyboardEvent } from 'react';
 import { Box, TextField, IconButton, CircularProgress, Typography, Menu, MenuItem, ListItemIcon, ListItemText, Chip } from '@mui/material';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import CloseIcon from '@mui/icons-material/Close';
 import { apiFetch } from '@/utils/api';
 
 // Model configuration
@@ -58,12 +59,15 @@ const findModelByPath = (path: string): ModelOption | undefined => {
 
 interface ChatInputProps {
   onSend: (text: string) => void;
+  onStop?: () => void;
+  isProcessing?: boolean;
   disabled?: boolean;
   placeholder?: string;
 }
 
-export default function ChatInput({ onSend, disabled = false, placeholder = 'Ask anything...' }: ChatInputProps) {
+export default function ChatInput({ onSend, onStop, isProcessing = false, disabled = false, placeholder = 'Ask anything...' }: ChatInputProps) {
   const [input, setInput] = useState('');
+  const [stopHovered, setStopHovered] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [selectedModelId, setSelectedModelId] = useState<string>(() => {
     try {
@@ -92,12 +96,12 @@ export default function ChatInput({ onSend, disabled = false, placeholder = 'Ask
 
   const selectedModel = MODEL_OPTIONS.find(m => m.id === selectedModelId) || MODEL_OPTIONS[0];
 
-  // Auto-focus the textarea when the session becomes ready (disabled -> false)
+  // Auto-focus the textarea when the session becomes ready
   useEffect(() => {
-    if (!disabled && inputRef.current) {
+    if (!disabled && !isProcessing && inputRef.current) {
       inputRef.current.focus();
     }
-  }, [disabled]);
+  }, [disabled, isProcessing]);
 
   const handleSend = useCallback(() => {
     if (input.trim() && !disabled) {
@@ -173,7 +177,7 @@ export default function ChatInput({ onSend, disabled = false, placeholder = 'Ask
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder={placeholder}
-            disabled={disabled}
+            disabled={disabled || isProcessing}
             variant="standard"
             inputRef={inputRef}
             InputProps={{
@@ -200,26 +204,46 @@ export default function ChatInput({ onSend, disabled = false, placeholder = 'Ask
                 }
             }}
           />
-          <IconButton
-            onClick={handleSend}
-            disabled={disabled || !input.trim()}
-            sx={{
-              mt: 1,
-              p: 1,
-              borderRadius: '10px',
-              color: 'var(--muted-text)',
-              transition: 'all 0.2s',
-              '&:hover': {
-                color: 'var(--accent-yellow)',
-                bgcolor: 'var(--hover-bg)',
-              },
-              '&.Mui-disabled': {
-                opacity: 0.3,
-              },
-            }}
-          >
-            {disabled ? <CircularProgress size={20} color="inherit" /> : <ArrowUpwardIcon fontSize="small" />}
-          </IconButton>
+          {isProcessing ? (
+            <IconButton
+              onClick={onStop}
+              onMouseEnter={() => setStopHovered(true)}
+              onMouseLeave={() => setStopHovered(false)}
+              sx={{
+                mt: 1,
+                p: 1,
+                borderRadius: '10px',
+                color: stopHovered ? 'var(--accent-yellow)' : 'var(--muted-text)',
+                transition: 'all 0.2s',
+                '&:hover': {
+                  bgcolor: 'var(--hover-bg)',
+                },
+              }}
+            >
+              {stopHovered ? <CloseIcon fontSize="small" /> : <CircularProgress size={20} color="inherit" />}
+            </IconButton>
+          ) : (
+            <IconButton
+              onClick={handleSend}
+              disabled={disabled || !input.trim()}
+              sx={{
+                mt: 1,
+                p: 1,
+                borderRadius: '10px',
+                color: 'var(--muted-text)',
+                transition: 'all 0.2s',
+                '&:hover': {
+                  color: 'var(--accent-yellow)',
+                  bgcolor: 'var(--hover-bg)',
+                },
+                '&.Mui-disabled': {
+                  opacity: 0.3,
+                },
+              }}
+            >
+              <ArrowUpwardIcon fontSize="small" />
+            </IconButton>
+          )}
         </Box>
 
         {/* Powered By Badge */}

frontend/src/components/Layout/AppLayout.tsx

@@ -110,7 +110,7 @@ export default function AppLayout() {
 
   const hasAnySessions = sessions.length > 0;
 
-  const { messages, sendMessage, undoLastTurn, approveTools } = useAgentChat({
+  const { messages, sendMessage, stop, undoLastTurn, approveTools } = useAgentChat({
     sessionId: activeSessionId,
     onReady: () => logger.log('Agent ready'),
     onError: (error) => logger.error('Agent error:', error),
@@ -345,7 +345,9 @@ export default function AppLayout() {
                 <MessageList messages={messages} isProcessing={isProcessing} approveTools={approveTools} onUndoLastTurn={undoLastTurn} />
                 <ChatInput
                   onSend={handleSendMessage}
-                  disabled={isProcessing || !isConnected || activityStatus.type === 'waiting-approval'}
+                  onStop={stop}
+                  isProcessing={isProcessing}
+                  disabled={!isConnected || activityStatus.type === 'waiting-approval'}
                   placeholder={activityStatus.type === 'waiting-approval' ? 'Approve or reject pending tools first...' : undefined}
                 />
               </>
@@ -439,7 +441,7 @@ export default function AppLayout() {
           onClose={() => setShowExpiredToast(false)}
           sx={{ fontFamily: 'monospace', fontSize: '0.8rem' }}
         >
-          Session expired — create a new session to continue.
+          Task expired — create a new task to continue.
         </Alert>
       </Snackbar>
       <Snackbar

frontend/src/hooks/useAgentChat.ts

@@ -270,6 +270,7 @@ export function useAgentChat({ sessionId, onReady, onError, onSessionDead }: Use
   return {
     messages: chat.messages,
     sendMessage: chat.sendMessage,
+    stop: chat.stop,
     status: chat.status,
     undoLastTurn,
     approveTools,