feat(web): Add stop button to agent detail view header

Allows stopping running agents directly from the output viewer
instead of requiring the card dropdown menu.

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"

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">