story-kit: merge 337_story_web_ui_button_to_stop_an_agent_on_a_story

frontend/src/components/Chat.tsx

@@ -798,6 +798,12 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 		setQueuedMessages([...queuedMessagesRef.current]);
 	}, []);
 
+	const handleStopAgent = useCallback((storyId: string, agentName: string) => {
+		agentsApi.stopAgent(storyId, agentName).catch((err: unknown) => {
+			console.error("Failed to stop agent:", err);
+		});
+	}, []);
+
 	return (
 		<div
 			className="chat-container"
@@ -1077,18 +1083,21 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 									items={pipeline.done ?? []}
 									costs={storyTokenCosts}
 									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
+									onStopAgent={handleStopAgent}
 								/>
 								<StagePanel
 									title="To Merge"
 									items={pipeline.merge}
 									costs={storyTokenCosts}
 									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
+									onStopAgent={handleStopAgent}
 								/>
 								<StagePanel
 									title="QA"
 									items={pipeline.qa}
 									costs={storyTokenCosts}
 									onItemClick={(item) => setSelectedWorkItemId(item.story_id)}
+									onStopAgent={handleStopAgent}
 								/>
 								<StagePanel
 									title="Current"
@@ -1098,6 +1107,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 									agentRoster={agentRoster}
 									busyAgentNames={busyAgentNames}
 									onStartAgent={handleStartAgent}
+									onStopAgent={handleStopAgent}
 								/>
 								<StagePanel
 									title="Backlog"
@@ -1107,6 +1117,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 									agentRoster={agentRoster}
 									busyAgentNames={busyAgentNames}
 									onStartAgent={handleStartAgent}
+									onStopAgent={handleStopAgent}
 								/>
 								<ServerLogsPanel logs={serverLogs} />
 							</>