From d1f6a6850a3b765f7580b172f3a06fd1f9b9e2c8 Mon Sep 17 00:00:00 2001 From: Devin Foley Date: Fri, 10 Jul 2026 14:45:42 -0700 Subject: [PATCH] Fix agent detail URL after agent rename (#9340) ## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - The agent detail page uses route references that can be based on an agent's URL key. > - Renaming an agent can change that URL key while the browser is still on the old route. > - After save or rollback, refetching the stale route reference can render an "Agent not found" state even though the agent still exists. > - This pull request redirects the detail page to the updated canonical route when the saved agent's route reference changes. > - The benefit is that agent renames keep users on the same configuration workflow without landing on a stale URL. ## Linked Issues or Issue Description - Refs #1848 - Related public search performed for agent rename/not-found issues and PRs; no closer in-flight PR was found. - Bug context: after saving a renamed agent or rolling back to a revision with a different name-derived URL key, the agent detail page could continue using the old URL and show "Agent not found". ## What Changed - Added a small route-sync helper that compares the previous and updated agent route refs after mutations. - Redirects the agent detail page with `replace: true` when a save or rollback changes the canonical route ref. - Removes the stale detail-query cache entry so the old route reference is not refetched after a rename. ## Verification - Local outgoing patch scan for common secrets, private paths/emails, and internal issue/link references: no matches. - `corepack pnpm install --frozen-lockfile` - `corepack pnpm --dir ui run typecheck` - `corepack pnpm --dir ui exec vitest run src/pages/AgentDetail.progress.test.ts src/App.test.tsx` - `corepack pnpm check:token-gates` ## Risks - Low risk: the redirect only runs when the updated agent resolves to a different route ref than the current agent. - If a future mutation response omits both URL key and name, the existing route-ref fallback behavior still applies. ## Model Used OpenAI Codex, GPT-5 coding agent via the local Codex adapter, with tool-assisted repository inspection, shell execution, and GitHub API use. ## 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 - [ ] All Paperclip CI gates are green - [ ] 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: Claude --- ui/src/pages/AgentDetail.progress.test.ts | 45 ++++++++++++++++++++++- ui/src/pages/AgentDetail.tsx | 43 +++++++++++++++++++--- 2 files changed, 81 insertions(+), 7 deletions(-) diff --git a/ui/src/pages/AgentDetail.progress.test.ts b/ui/src/pages/AgentDetail.progress.test.ts index 03c62e3722..83c2623556 100644 --- a/ui/src/pages/AgentDetail.progress.test.ts +++ b/ui/src/pages/AgentDetail.progress.test.ts @@ -1,8 +1,11 @@ -import { describe, expect, it } from "vitest"; +import { QueryClient } from "@tanstack/react-query"; +import { describe, expect, it, vi } from "vitest"; +import { queryKeys } from "../lib/queryKeys"; import { buildHeartbeatProgressLogLine, heartbeatProgressLogLineKey, + syncAgentRouteAfterRename, } from "./AgentDetail"; describe("buildHeartbeatProgressLogLine", () => { @@ -59,3 +62,43 @@ describe("heartbeatProgressLogLineKey", () => { ); }); }); + +describe("syncAgentRouteAfterRename", () => { + it("replaces stale agent routes after a rename changes the URL key", () => { + const queryClient = new QueryClient(); + const navigate = vi.fn(); + queryClient.setQueryData(queryKeys.agents.detail("old-agent"), { id: "agent-1" }); + queryClient.setQueryData(queryKeys.agents.detail("renamed-agent"), { id: "agent-1" }); + + const redirected = syncAgentRouteAfterRename( + queryClient, + navigate, + { id: "agent-1", name: "Old Agent", urlKey: "old-agent" }, + { id: "agent-1", name: "Renamed Agent", urlKey: "renamed-agent" }, + "configuration", + ); + + expect(redirected).toBe(true); + expect(navigate).toHaveBeenCalledWith("/agents/renamed-agent/configuration", { replace: true }); + expect(queryClient.getQueryData(queryKeys.agents.detail("old-agent"))).toBeUndefined(); + expect(queryClient.getQueryData(queryKeys.agents.detail("renamed-agent"))).toEqual({ id: "agent-1" }); + }); + + it("does not redirect when the canonical route ref stays the same", () => { + const queryClient = new QueryClient(); + const navigate = vi.fn(); + queryClient.setQueryData(queryKeys.agents.detail("same-agent"), { id: "agent-1" }); + + const redirected = syncAgentRouteAfterRename( + queryClient, + navigate, + { id: "agent-1", name: "Same Agent", urlKey: "same-agent" }, + { id: "agent-1", name: "Same Agent", urlKey: "same-agent" }, + "configuration", + ); + + expect(redirected).toBe(false); + expect(navigate).not.toHaveBeenCalled(); + expect(queryClient.getQueryData(queryKeys.agents.detail("same-agent"))).toEqual({ id: "agent-1" }); + }); +}); diff --git a/ui/src/pages/AgentDetail.tsx b/ui/src/pages/AgentDetail.tsx index 0a8720d52d..ab60cae756 100644 --- a/ui/src/pages/AgentDetail.tsx +++ b/ui/src/pages/AgentDetail.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useMemo, useState, useRef } from "react"; -import { useParams, useNavigate, Link, Navigate, useBeforeUnload } from "@/lib/router"; -import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; +import { useParams, useNavigate, Link, Navigate, useBeforeUnload, type NavigateFunction } from "@/lib/router"; +import { useQuery, useMutation, useQueryClient, type QueryClient } from "@tanstack/react-query"; import { agentsApi, type AgentKey, @@ -1638,6 +1638,29 @@ function CostsSection({ /* ---- Agent Configure Page ---- */ +/** + * Agent detail URLs use a name-derived key, so updates that change the agent's + * name (a rename or a config-revision rollback) can invalidate the reference + * currently in the URL. When that happens, refetching the old reference would + * 404 with "Agent not found". Instead, drop the stale cached queries and + * replace the URL with the new canonical reference. Returns true when a + * redirect happened. + */ +export function syncAgentRouteAfterRename( + queryClient: QueryClient, + navigate: NavigateFunction, + previous: { id: string; urlKey?: string | null; name?: string | null }, + updated: { id: string; urlKey?: string | null; name?: string | null }, + tab: string, +): boolean { + const previousRef = agentRouteRef(previous); + const nextRef = agentRouteRef(updated); + if (nextRef === previousRef) return false; + queryClient.removeQueries({ queryKey: queryKeys.agents.detail(previousRef) }); + navigate(`/agents/${nextRef}/${tab}`, { replace: true }); + return true; +} + function AgentConfigurePage({ agent, agentId, @@ -1658,6 +1681,8 @@ function AgentConfigurePage({ updatePermissions: { mutate: (permissions: AgentPermissionUpdate) => void; isPending: boolean }; }) { const queryClient = useQueryClient(); + const navigate = useNavigate(); + const { tab: urlTab } = useParams<{ tab?: string }>(); const [revisionsOpen, setRevisionsOpen] = useState(false); const { data: configRevisions } = useQuery({ @@ -1667,10 +1692,12 @@ function AgentConfigurePage({ const rollbackConfig = useMutation({ mutationFn: (revisionId: string) => agentsApi.rollbackConfigRevision(agent.id, revisionId, companyId), - onSuccess: () => { + onSuccess: (updated) => { queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.id) }); - queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.urlKey) }); queryClient.invalidateQueries({ queryKey: queryKeys.agents.configRevisions(agent.id) }); + if (!syncAgentRouteAfterRename(queryClient, navigate, agent, updated, urlTab ?? "configuration")) { + queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.urlKey) }); + } }, }); @@ -1770,6 +1797,8 @@ function ConfigurationTab({ hideInstructionsFile?: boolean; }) { const queryClient = useQueryClient(); + const navigate = useNavigate(); + const { tab: urlTab } = useParams<{ tab?: string }>(); const { pushToast } = useToastActions(); const [awaitingRefreshAfterSave, setAwaitingRefreshAfterSave] = useState(false); const lastAgentRef = useRef(agent); @@ -1804,11 +1833,13 @@ function ConfigurationTab({ onMutate: () => { setAwaitingRefreshAfterSave(true); }, - onSuccess: () => { + onSuccess: (updated) => { queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.id) }); - queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.urlKey) }); queryClient.invalidateQueries({ queryKey: queryKeys.agents.configRevisions(agent.id) }); queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(agent.companyId) }); + if (!syncAgentRouteAfterRename(queryClient, navigate, agent, updated, urlTab ?? "configuration")) { + queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.urlKey) }); + } pushToast({ title: "Agent saved", tone: "success" }); }, onError: (err) => {