Merge pull request #231 from stephan271c/add-pause-button

feat: Add a stop button to halt agent execution when processing.

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 */}
+              {/* Send / Stop Button */}
-              <Button
+              {isProcessing ? (
-                onClick={handleSend}
+                <Button
-                disabled={
+                  onClick={stopExecution}
-                  (!input.trim() &&
+                  disabled={!isConnected}
-                    selectedImages.length === 0 &&
+                  className="h-11 px-4 rounded-xl"
-                    selectedTextFiles.length === 0) ||
+                  variant="destructive"
-                  isProcessing ||
+                  data-testid="stop-agent"
-                  !isConnected
+                  title="Stop generation"
-                }
+                >
-                className="h-11 px-4 rounded-xl"
+                  <Square className="w-4 h-4 fill-current" />
-                data-testid="send-message"
+                </Button>
-              >
+              ) : (
-                <Send className="w-4 h-4" />
+                <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 */}