From 51281095ea495972bca222dd47bef41131edd34d Mon Sep 17 00:00:00 2001
From: Stephan Cho <195329689+stephan271c@users.noreply.github.com>
Date: Mon, 22 Dec 2025 21:08:04 -0500
Subject: [PATCH] feat: Add a stop button to halt agent execution when
 processing.

---
 apps/ui/src/components/views/agent-view.tsx | 44 ++++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/apps/ui/src/components/views/agent-view.tsx b/apps/ui/src/components/views/agent-view.tsx
index d5a07036..293c11c3 100644
--- a/apps/ui/src/components/views/agent-view.tsx
+++ b/apps/ui/src/components/views/agent-view.tsx
@@ -17,6 +17,7 @@ import {
   ImageIcon,
   ChevronDown,
   FileText,
+  Square,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useElectronAgent } from '@/hooks/use-electron-agent';
@@ -83,6 +84,7 @@ export function AgentView() {
     isConnected,
     sendMessage,
     clearHistory,
+    stopExecution,
     error: agentError,
   } = useElectronAgent({
     sessionId: currentSessionId || '',
@@ -914,21 +916,33 @@ export function AgentView() {
                 <Paperclip className="w-4 h-4" />
               </Button>
 
-              {/* Send Button */}
-              <Button
-                onClick={handleSend}
-                disabled={
-                  (!input.trim() &&
-                    selectedImages.length === 0 &&
-                    selectedTextFiles.length === 0) ||
-                  isProcessing ||
-                  !isConnected
-                }
-                className="h-11 px-4 rounded-xl"
-                data-testid="send-message"
-              >
-                <Send className="w-4 h-4" />
-              </Button>
+              {/* Send / Stop Button */}
+              {isProcessing ? (
+                <Button
+                  onClick={stopExecution}
+                  disabled={!isConnected}
+                  className="h-11 px-4 rounded-xl"
+                  variant="destructive"
+                  data-testid="stop-agent"
+                  title="Stop generation"
+                >
+                  <Square className="w-4 h-4 fill-current" />
+                </Button>
+              ) : (
+                <Button
+                  onClick={handleSend}
+                  disabled={
+                    (!input.trim() &&
+                      selectedImages.length === 0 &&
+                      selectedTextFiles.length === 0) ||
+                    !isConnected
+                  }
+                  className="h-11 px-4 rounded-xl"
+                  data-testid="send-message"
+                >
+                  <Send className="w-4 h-4" />
+                </Button>
+              )}
             </div>
 
             {/* Keyboard hint */}