[codex] Update watchdog properties pane cache (#8786)

## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - The issue detail surface includes an Issue Properties pane that
shows live metadata for a selected issue.
> - Watchdog configuration can be changed from that pane, but cached
issue detail data also feeds the pane key and rerender behavior.
> - If the cache does not reflect watchdog changes immediately, the
properties pane can keep stale watchdog state until a later refetch
completes.
> - This pull request updates the watchdog save/delete paths to write
the returned watchdog state into cached issue detail data.
> - It also includes watchdog fields in the issue properties panel key
so watchdog configuration changes invalidate the memoized panel state.
> - The benefit is a properties pane that updates consistently after
operators set or remove a watchdog.

## Linked Issues or Issue Description

Refs #8789

This PR fixes stale watchdog state in the Issue Properties pane after
watchdog save/delete mutations.

## What Changed

- Write the saved watchdog summary into cached issue detail data after a
successful watchdog upsert using the exact
`queryKeys.issues.detail(issue.id)` key.
- Clear cached issue detail watchdog data after a successful watchdog
delete using the exact `queryKeys.issues.detail(issue.id)` key.
- Include stable watchdog fields in `buildIssuePropertiesPanelKey` so
watchdog configuration changes produce a new panel key.
- Add focused tests for watchdog cache updates and panel-key
invalidation, including save and delete cache assertions.

## Verification

- `pnpm --filter @paperclipai/ui exec vitest run
src/components/IssueProperties.test.tsx
src/lib/issue-properties-panel-key.test.ts`
- Result: 2 files passed, 40 tests passed.

## Risks

Low risk. The change is scoped to UI cache handling for issue detail
watchdog state and panel-key generation. The main risk is an unexpected
query-cache shape, covered by focused tests around the existing issue
detail query key.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

OpenAI Codex coding agent running GPT-5-class model with repository tool
use and local command execution. The exact backend model identifier and
context window are not exposed in this 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
- [ ] 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 <noreply@paperclip.ing>

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<IssueExecutionState> = {}): Iss
   };
 }
 
-function renderProperties(container: HTMLDivElement, props: ComponentProps<typeof IssueProperties>) {
+function renderPropertiesWithQueryClient(container: HTMLDivElement, props: ComponentProps<typeof IssueProperties>) {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: { retry: false },
@@ -384,6 +385,11 @@ function renderProperties(container: HTMLDivElement, props: ComponentProps<typeo
       </QueryClientProvider>,
     );
   });
+  return { root, queryClient };
+}
+
+function renderProperties(container: HTMLDivElement, props: ComponentProps<typeof IssueProperties>) {
+  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<Issue>(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<Issue>(queryKeys.issues.detail(issue.id))?.watchdog)
+      .toBeNull();
 
     act(() => root.unmount());
   });

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<Issue>(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<Issue>(queryKeys.issues.detail(issue.id), (current) =>
+        current ? { ...current, watchdog: null } : current,
+      );
       void queryClient.invalidateQueries({ queryKey: queryKeys.issues.detail(issue.id) });
       setWatchdogOpen(false);
     },

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(

ui/src/lib/issue-properties-panel-key.ts

@@ -22,6 +22,7 @@ type IssuePropertiesPanelKeyIssue = Pick<
   | "blocks"
   | "blockedBy"
   | "ancestors"
+  | "watchdog"
 >;
 
 type IssuePropertiesPanelKeyChild = Pick<Issue, "id" | "updatedAt" | "identifier" | "title">;
@@ -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,