From 4c8d92f086c41159a03673fe0fe7b82056e5ae3f Mon Sep 17 00:00:00 2001 From: Devin Foley Date: Wed, 29 Jul 2026 12:26:07 -0700 Subject: [PATCH] fix(ui): leave agent detail after termination (#10451) ## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - The agent detail page lets operators inspect one agent and run lifecycle actions from that context > - Terminated agents are removed from the normal active-agent surface, so the current detail route may no longer be fetchable after termination > - Before this change, terminating an agent from its detail page invalidated agent queries while leaving the browser on the now-stale detail route > - That refetch could surface an "Agent not found" error even though the terminate action itself succeeded > - The shared action button already owns the terminate mutation, so it can notify detail-page callers when termination succeeds > - This pull request redirects the detail page back to the agents list after a successful terminate action > - The benefit is that operators land on a valid route and the Back button does not return them to the stale terminated-agent detail route ## Linked Issues or Issue Description No direct public GitHub issue or PR was found for this detail-page termination flow. ### What happened? After terminating an agent from its detail page, the UI could remain on that agent's detail route and show an "Agent not found" error after query invalidation/refetch. ### Expected behavior Once termination succeeds, the operator should leave the now-stale detail page and land on a valid agents view. ### Steps to reproduce 1. Open a non-built-in agent detail page. 2. Use the overflow actions menu to terminate the agent. 3. Observe the post-termination route/error state. ### Paperclip version or commit Current `master` before this PR. ### Deployment mode Browser UI behavior, independent of a specific deployment mode. Duplicate search: searched public GitHub issues and PRs for `agent not found terminate`, `terminate agent detail`, and `Agent not found`; no direct duplicate or viable in-flight PR was found. ## What Changed - Added an optional `onTerminateSuccess` callback to `AgentActionButtons`, fired only after the shared terminate mutation succeeds. - Wired `AgentDetail` to replace-navigate to `/agents/all` after successful termination. - Extended `AgentActionButtons` coverage for the terminate success path, including API args, callback payload, and query invalidations. ## Verification - `corepack pnpm exec vitest run ui/src/components/AgentActionButtons.test.tsx` - `corepack pnpm check:token-gates` - `git diff --check origin/master..HEAD` - Local diff scan for obvious tokens, credential filenames, and email addresses found no matches. ## Risks Low risk. The new callback is optional, only fires for successful terminate actions, and preserves existing behavior for other `AgentActionButtons` callers. ## Model Used OpenAI Codex, GPT-5-based coding agent (`gpt-5`), tool use enabled for repository inspection, editing, local verification, and GitHub CLI operations. Context window details were not exposed by the runtime. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge Co-authored-by: Paperclip --- ui/src/components/AgentActionButtons.test.tsx | 36 +++++++++++++++++-- ui/src/components/AgentActionButtons.tsx | 6 ++++ ui/src/pages/AgentDetail.tsx | 1 + 3 files changed, 40 insertions(+), 3 deletions(-) diff --git a/ui/src/components/AgentActionButtons.test.tsx b/ui/src/components/AgentActionButtons.test.tsx index 6a156c0cee..507530bdbd 100644 --- a/ui/src/components/AgentActionButtons.test.tsx +++ b/ui/src/components/AgentActionButtons.test.tsx @@ -1,6 +1,6 @@ // @vitest-environment jsdom -import type { ReactNode } from "react"; +import type { ComponentProps, ReactNode } from "react"; import { flushSync } from "react-dom"; import { createRoot } from "react-dom/client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; @@ -107,6 +107,7 @@ describe("AgentActionButtons", () => { mockAgentsApi.clearError.mockResolvedValue(makeAgent({ status: "idle" })); mockAgentsApi.pause.mockResolvedValue(makeAgent({ status: "paused" })); mockAgentsApi.resume.mockResolvedValue(makeAgent({ status: "idle" })); + mockAgentsApi.terminate.mockResolvedValue(makeAgent({ status: "terminated" })); mockAgentsApi.invoke.mockResolvedValue({ id: "run-1" }); mockAgentsApi.resetSession.mockResolvedValue(undefined); }); @@ -124,11 +125,11 @@ describe("AgentActionButtons", () => { vi.clearAllMocks(); }); - function render(agent: Agent) { + function render(agent: Agent, props: Partial> = {}) { root = createRoot(container); root.render( - + , ); } @@ -175,4 +176,33 @@ describe("AgentActionButtons", () => { expect(container.textContent).toContain("Pause"); expect(container.textContent).not.toContain("Clear error"); }); + + it("calls the terminate success handler after terminating an agent", async () => { + const onTerminateSuccess = vi.fn(); + render(makeAgent(), { onTerminateSuccess }); + await flushReact(); + + await act(async () => { + container.querySelector('[aria-label="Open actions for Alpha Agent"]')?.click(); + }); + await flushReact(); + + const terminateButton = Array.from(document.body.querySelectorAll("button")) + .find((button) => button.textContent?.includes("Terminate")); + expect(terminateButton).toBeTruthy(); + + await act(async () => { + terminateButton?.click(); + }); + await flushReact(); + + expect(mockAgentsApi.terminate).toHaveBeenCalledWith("agent-1", "company-1"); + expect(onTerminateSuccess).toHaveBeenCalledWith(expect.objectContaining({ + id: "agent-1", + status: "terminated", + })); + expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ["agents", "detail", "agent-1"] }); + expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ["agents", "detail", "alpha"] }); + expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ["agents", "company-1"] }); + }); }); diff --git a/ui/src/components/AgentActionButtons.tsx b/ui/src/components/AgentActionButtons.tsx index dc13464b06..48e444ca92 100644 --- a/ui/src/components/AgentActionButtons.tsx +++ b/ui/src/components/AgentActionButtons.tsx @@ -165,6 +165,7 @@ export function AgentActionButtons({ workActionsDisabledReason, navigateToRunOnInvoke = true, onActionError, + onTerminateSuccess, pauseConfirm, hideTerminate = false, children, @@ -193,6 +194,8 @@ export function AgentActionButtons({ * omitted, failures surface as toasts (used by the list view). */ onActionError?: (message: string | null) => void; + /** Called after termination succeeds so callers can leave now-hidden detail routes. */ + onTerminateSuccess?: (agent: Agent) => void; /** Extra content rendered just before the overflow menu (e.g. live-run link). */ children?: React.ReactNode; className?: string; @@ -246,6 +249,9 @@ export function AgentActionButtons({ onSuccess: (data, action) => { onActionError?.(null); invalidateAgent(); + if (action === "terminate") { + onTerminateSuccess?.(data as Agent); + } if (action === "invoke" && navigateToRunOnInvoke && data && typeof data === "object" && "id" in data) { navigate(`/agents/${canonicalAgentRef}/runs/${(data as HeartbeatRun).id}`); } diff --git a/ui/src/pages/AgentDetail.tsx b/ui/src/pages/AgentDetail.tsx index e97c56c071..1cee14ad96 100644 --- a/ui/src/pages/AgentDetail.tsx +++ b/ui/src/pages/AgentDetail.tsx @@ -1157,6 +1157,7 @@ export function AgentDetail() { workActionsDisabled={hasInvalidOrgChain} workActionsDisabledReason="Repair this agent's reporting chain before assigning tasks or starting runs" onActionError={setActionError} + onTerminateSuccess={() => navigate("/agents/all", { replace: true })} hideTerminate={Boolean(builtInState)} pauseConfirm={ builtInState