diff --git a/packages/web/src/components/AgentOutputViewer.tsx b/packages/web/src/components/AgentOutputViewer.tsx
index f47eae8..e9e9532 100644
--- a/packages/web/src/components/AgentOutputViewer.tsx
+++ b/packages/web/src/components/AgentOutputViewer.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { ArrowDown, Pause, Play, AlertCircle } from "lucide-react";
+import { ArrowDown, Pause, Play, AlertCircle, Square } from "lucide-react";
 import { trpc } from "@/lib/trpc";
 import { useSubscriptionWithErrorHandling } from "@/hooks";
 import {
@@ -13,9 +13,11 @@ import {
 interface AgentOutputViewerProps {
   agentId: string;
   agentName?: string;
+  status?: string;
+  onStop?: (id: string) => void;
 }
 
-export function AgentOutputViewer({ agentId, agentName }: AgentOutputViewerProps) {
+export function AgentOutputViewer({ agentId, agentName, status, onStop }: AgentOutputViewerProps) {
   const [messages, setMessages] = useState<ParsedMessage[]>([]);
   const [follow, setFollow] = useState(true);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -106,6 +108,17 @@ export function AgentOutputViewer({ agentId, agentName }: AgentOutputViewerProps
           )}
         </div>
         <div className="flex items-center gap-2">
+          {onStop && (status === "running" || status === "waiting_for_input") && (
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={() => onStop(agentId)}
+              className="h-7"
+            >
+              <Square className="mr-1 h-3 w-3" />
+              Stop
+            </Button>
+          )}
           <Button
             variant="ghost"
             size="sm"
diff --git a/packages/web/src/routes/agents.tsx b/packages/web/src/routes/agents.tsx
index 0c77ec1..f1c4681 100644
--- a/packages/web/src/routes/agents.tsx
+++ b/packages/web/src/routes/agents.tsx
@@ -290,6 +290,8 @@ function AgentsPage() {
             <AgentOutputViewer
               agentId={selectedAgent.id}
               agentName={selectedAgent.name}
+              status={selectedAgent.status}
+              onStop={handleStop}
             />
           ) : (
             <div className="flex h-full items-center justify-center rounded-lg border border-dashed">