diff --git a/ui/src/components/IssueProperties.test.tsx b/ui/src/components/IssueProperties.test.tsx index 9144bf8fa1..3e0d5f2233 100644 --- a/ui/src/components/IssueProperties.test.tsx +++ b/ui/src/components/IssueProperties.test.tsx @@ -15,6 +15,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import type { Issue } from "@paperclipai/shared"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { IssueProperties } from "./IssueProperties"; +import { queryKeys } from "../lib/queryKeys"; const mockAgentsApi = vi.hoisted(() => ({ list: vi.fn(), @@ -370,7 +371,7 @@ function createExecutionState(overrides: Partial = {}): Iss }; } -function renderProperties(container: HTMLDivElement, props: ComponentProps) { +function renderPropertiesWithQueryClient(container: HTMLDivElement, props: ComponentProps) { const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, @@ -384,6 +385,11 @@ function renderProperties(container: HTMLDivElement, props: ComponentProps, ); }); + return { root, queryClient }; +} + +function renderProperties(container: HTMLDivElement, props: ComponentProps) { + const { root } = renderPropertiesWithQueryClient(container, props); return root; } @@ -1813,18 +1819,76 @@ describe("IssueProperties", () => { act(() => root.unmount()); }); + it("updates cached issue detail when saving a watchdog", async () => { + mockInstanceSettingsApi.getExperimental.mockResolvedValue({ + enableTaskWatchdogs: true, + }); + mockAgentsApi.list.mockResolvedValue([watchdogAgent]); + const savedWatchdog = createWatchdogSummary({ + instructions: "Watch the deploy", + }); + mockIssuesApi.upsertWatchdog.mockResolvedValueOnce(savedWatchdog); + const issue = createIssue({ watchdog: null }); + const { root, queryClient } = renderPropertiesWithQueryClient(container, { + issue, + childIssues: [], + onUpdate: vi.fn(), + inline: true, + }); + queryClient.setQueryData(queryKeys.issues.detail(issue.id), issue); + await flush(); + + let trigger: HTMLButtonElement | undefined; + await waitForAssertion(() => { + trigger = Array.from(container.querySelectorAll("button")) + .find((button) => button.textContent?.includes("Set watchdog")); + expect(trigger).toBeTruthy(); + }); + + await act(async () => { + trigger!.dispatchEvent(new MouseEvent("click", { bubbles: true })); + }); + await flush(); + + let agentOption: HTMLElement | undefined; + await waitForAssertion(() => { + agentOption = Array.from(container.querySelectorAll("button, [role='option']")) + .find((node) => node.textContent?.includes("ClaudeCoder")) as HTMLElement | undefined; + expect(agentOption).toBeTruthy(); + }); + await act(async () => { + agentOption!.dispatchEvent(new MouseEvent("click", { bubbles: true })); + }); + await flush(); + + const finalSave = Array.from(container.querySelectorAll("button")) + .find((button) => button.textContent === "Set watchdog" && button !== trigger); + expect(finalSave).toBeTruthy(); + await act(async () => { + finalSave!.dispatchEvent(new MouseEvent("click", { bubbles: true })); + }); + await flush(); + + expect(queryClient.getQueryData(queryKeys.issues.detail(issue.id))?.watchdog) + .toEqual(savedWatchdog); + + act(() => root.unmount()); + }); + it("renders an existing watchdog and removes it via the API", async () => { mockInstanceSettingsApi.getExperimental.mockResolvedValue({ enableTaskWatchdogs: true, }); mockAgentsApi.list.mockResolvedValue([watchdogAgent]); const onUpdate = vi.fn(); - const root = renderProperties(container, { - issue: createIssue({ watchdog: createWatchdogSummary() }), + const issue = createIssue({ watchdog: createWatchdogSummary() }); + const { root, queryClient } = renderPropertiesWithQueryClient(container, { + issue, childIssues: [], onUpdate, inline: true, }); + queryClient.setQueryData(queryKeys.issues.detail(issue.id), issue); await flush(); await waitForAssertion(() => { @@ -1847,6 +1911,8 @@ describe("IssueProperties", () => { await flush(); expect(mockIssuesApi.deleteWatchdog).toHaveBeenCalledWith("issue-1"); + expect(queryClient.getQueryData(queryKeys.issues.detail(issue.id))?.watchdog) + .toBeNull(); act(() => root.unmount()); }); diff --git a/ui/src/components/IssueProperties.tsx b/ui/src/components/IssueProperties.tsx index 2524076483..8cb1cf1c1c 100644 --- a/ui/src/components/IssueProperties.tsx +++ b/ui/src/components/IssueProperties.tsx @@ -1212,7 +1212,10 @@ export function IssueProperties({ const upsertWatchdog = useMutation({ mutationFn: (data: { agentId: string; instructions: string | null }) => issuesApi.upsertWatchdog(issue.id, data), - onSuccess: () => { + onSuccess: (watchdog) => { + queryClient.setQueryData(queryKeys.issues.detail(issue.id), (current) => + current ? { ...current, watchdog } : current, + ); void queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issue.id) }); setWatchdogOpen(false); }, @@ -1220,6 +1223,9 @@ export function IssueProperties({ const deleteWatchdog = useMutation({ mutationFn: () => issuesApi.deleteWatchdog(issue.id), onSuccess: () => { + queryClient.setQueryData(queryKeys.issues.detail(issue.id), (current) => + current ? { ...current, watchdog: null } : current, + ); void queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issue.id) }); setWatchdogOpen(false); }, diff --git a/ui/src/lib/issue-properties-panel-key.test.ts b/ui/src/lib/issue-properties-panel-key.test.ts index c1b557fe78..ac7d0cf4d7 100644 --- a/ui/src/lib/issue-properties-panel-key.test.ts +++ b/ui/src/lib/issue-properties-panel-key.test.ts @@ -50,6 +50,33 @@ describe("buildIssuePropertiesPanelKey", () => { expect(second).not.toBe(first); }); + it("changes when watchdog configuration changes", () => { + const first = buildIssuePropertiesPanelKey(createIssue({ watchdog: null }), []); + const second = buildIssuePropertiesPanelKey( + createIssue({ + watchdog: { + id: "watchdog-1", + companyId: "company-1", + issueId: "issue-1", + watchdogAgentId: "agent-1", + instructions: "Keep the tree moving.", + status: "active", + watchdogIssueId: null, + lastObservedFingerprint: null, + lastReviewedFingerprint: null, + lastTriggeredAt: null, + lastCompletedAt: null, + triggerCount: 0, + createdAt: new Date("2026-04-12T12:01:00.000Z"), + updatedAt: new Date("2026-04-12T12:01:00.000Z"), + }, + }), + [], + ); + + expect(second).not.toBe(first); + }); + it("changes when workspace detail hydrates after opening from a cached issue", () => { const first = buildIssuePropertiesPanelKey(createIssue(), []); const second = buildIssuePropertiesPanelKey( diff --git a/ui/src/lib/issue-properties-panel-key.ts b/ui/src/lib/issue-properties-panel-key.ts index 5bb0f6ce21..b75d74cb0c 100644 --- a/ui/src/lib/issue-properties-panel-key.ts +++ b/ui/src/lib/issue-properties-panel-key.ts @@ -22,6 +22,7 @@ type IssuePropertiesPanelKeyIssue = Pick< | "blocks" | "blockedBy" | "ancestors" + | "watchdog" >; type IssuePropertiesPanelKeyChild = Pick; @@ -83,6 +84,15 @@ export function buildIssuePropertiesPanelKey( title: relation.title, status: relation.status, })), + watchdog: issue.watchdog + ? { + id: issue.watchdog.id, + watchdogAgentId: issue.watchdog.watchdogAgentId, + instructions: issue.watchdog.instructions ?? null, + status: issue.watchdog.status, + watchdogIssueId: issue.watchdog.watchdogIssueId ?? null, + } + : null, parentSummary: issue.ancestors?.[0] ? { id: issue.ancestors[0].id,