@fungi.computer/bonsai 0.0.0-stage → 0.0.1

package/test/change-page.test.ts

@@ -0,0 +1,916 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  QueryClient,
+  QueryClientProvider,
+  notifyManager,
+} from "@tanstack/react-query";
+import { createCapabilityRegistry } from "@fungi.computer/agar";
+import { appMethods } from "@fungi.computer/agar/backend";
+import { ChangePage } from "../web/change-page.js";
+import { RouterProvider } from "../web/router.js";
+import { connect } from "../web/transport.js";
+import type { Change, ChangeDetail, JsonValue } from "../shared/contract.js";
+
+const callMethod =
+  vi.fn<(method: string, input: string) => Promise<JsonValue>>();
+
+let container: HTMLDivElement;
+let root: ReturnType<typeof createRoot>;
+let client: QueryClient;
+
+beforeEach(() => {
+  vi.stubGlobal("scrollTo", vi.fn());
+  Object.defineProperty(HTMLElement.prototype, "scrollTo", {
+    configurable: true,
+    value: vi.fn(),
+  });
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn(() => ({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    })),
+  );
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe = vi.fn();
+      disconnect = vi.fn();
+      unobserve = vi.fn();
+    },
+  );
+  const capabilities = createCapabilityRegistry();
+  capabilities.provide(appMethods, { call: callMethod });
+  connect({ capabilities });
+  Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+  notifyManager.setScheduler(queueMicrotask);
+  client = new QueryClient({
+    defaultOptions: { queries: { retry: false, staleTime: Infinity } },
+  });
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => {
+    root.unmount();
+    await Promise.resolve();
+  });
+  connect(null);
+  client.clear();
+  container.remove();
+  vi.unstubAllGlobals();
+  vi.resetAllMocks();
+});
+
+const render = async (child: ReturnType<typeof createElement>) => {
+  await act(async () => {
+    root.render(createElement(QueryClientProvider, { client }, child));
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+};
+
+const HEAD = "a".repeat(40);
+const OPEN_TARGET = "b".repeat(40);
+const CONFLICT_TARGET = "c".repeat(40);
+
+/**
+ * A minimal, schema-valid Change for repo "pond" #1, varied only by the
+ * fields each phase of the test actually cares about. Every field is
+ * required here (never spread from a Partial<Change>) so the inferred
+ * object type never widens `mergeFailure` to include `undefined`.
+ */
+// `satisfies`, not `: Change`/`: ChangeDetail`, so the inferred type stays
+// the plain literal shape: Change's `mergeFailure` is optional, and a
+// declared-`Change` return would widen it to `... | undefined`, which the
+// mocked transport's `Promise<JsonValue>` return type then rejects.
+function buildChange(fields: {
+  state: Change["state"];
+  status: Change["status"];
+  lease: Change["lease"];
+  conflict: Change["conflict"];
+  mergeable: Change["mergeable"];
+}) {
+  return {
+    repo: "pond",
+    number: 1,
+    sourceRepo: "pond--morel",
+    sourceRef: "feature",
+    targetRef: "main",
+    title: "Add waves",
+    body: "",
+    openedBy: "Morel",
+    openedKind: "human",
+    createdAt: 1,
+    updatedAt: 1,
+    head: HEAD,
+    target: OPEN_TARGET,
+    revision: 0,
+    mergedCommit: null,
+    mergedBy: null,
+    closedBy: null,
+    base: OPEN_TARGET,
+    ahead: 1,
+    behind: 0,
+    ...fields,
+  } satisfies Change;
+}
+
+function buildDetail(
+  change: Omit<ReturnType<typeof buildChange>, "mergedCommit" | "mergedBy"> &
+    Pick<Change, "mergedCommit" | "mergedBy">,
+) {
+  return {
+    change,
+    actions: {
+      approve: { allowed: false, reason: "self-approval" },
+      close: { allowed: true },
+    },
+    commits: [],
+    diff: { files: [], additions: 0, deletions: 0, omittedFiles: 0 },
+    review: { approvals: [], checks: [] },
+  } satisfies ChangeDetail;
+}
+
+/**
+ * A separate helper, not a `buildChange` option: adding `mergeFailure` as an
+ * optional field on `buildChange`'s own parameter would spread it back into
+ * an optional (`... | undefined`) property, hitting the same widening issue
+ * the comment above `buildChange` explains.
+ */
+function withMergeFailure(
+  change: ReturnType<typeof buildChange>,
+  reason: "access_changed" | "sync_failed",
+) {
+  return { ...change, mergeFailure: reason } satisfies Change;
+}
+
+/**
+ * Same reasoning as `withMergeFailure`: a dedicated helper, not an optional
+ * `withMergeFailure` parameter, so a "head_moved" settlement that also
+ * named what landed never widens `mergedCommit`/`mergedBy` to include
+ * `undefined`.
+ */
+function withHeadMoved(
+  change: Omit<ReturnType<typeof buildChange>, "mergedCommit" | "mergedBy">,
+  landed: { commit: string; by: string } | null,
+) {
+  return landed === null
+    ? ({
+        ...change,
+        mergeFailure: "head_moved",
+        mergedCommit: null,
+        mergedBy: null,
+      } satisfies Change)
+    : ({
+        ...change,
+        mergeFailure: "head_moved",
+        mergedCommit: landed.commit,
+        mergedBy: landed.by,
+      } satisfies Change);
+}
+
+describe("Bonsai change page", () => {
+  it("shows the real settled outcome instead of a stuck Merging… when a background merge lands", async () => {
+    let phase: "open" | "merging" | "conflict" = "open";
+    callMethod.mockImplementation((method) => {
+      switch (method) {
+        case "changes.get":
+          return Promise.resolve(
+            buildDetail(
+              phase === "open"
+                ? buildChange({
+                    state: "open",
+                    status: "ready",
+                    lease: null,
+                    conflict: null,
+                    mergeable: { allowed: true },
+                  })
+                : phase === "merging"
+                  ? buildChange({
+                      state: "merging",
+                      status: "merging",
+                      lease: { id: "lease-1", by: "Levi", head: HEAD, at: 1 },
+                      conflict: null,
+                      mergeable: { allowed: false, reason: "merging" },
+                    })
+                  : buildChange({
+                      state: "open",
+                      status: "conflict",
+                      lease: null,
+                      conflict: {
+                        head: HEAD,
+                        target: CONFLICT_TARGET,
+                        paths: ["README.md"],
+                      },
+                      mergeable: { allowed: false, reason: "conflict" },
+                    }),
+            ),
+          );
+        case "changes.list":
+          return Promise.resolve({ changes: [] });
+        case "graph.get":
+          return Promise.resolve({ lanes: [], nodes: [] });
+        case "actors.list":
+          return Promise.resolve({ agents: [] });
+        case "repos.get":
+          return Promise.resolve({
+            repo: {
+              name: "pond",
+              description: null,
+              parent: null,
+              owner: null,
+              createdAt: 1,
+              lastPushAt: null,
+              forks: [],
+              openChanges: 0,
+              activity: [],
+            },
+            defaultBranch: "main",
+            refs: [],
+            cloneUrl: "https://bonsai.local/git/pond",
+            empty: false,
+          });
+        case "activity.list":
+          return Promise.resolve({ events: [] });
+        case "changes.merge":
+          return Promise.resolve({ kind: "merging" });
+        default:
+          return Promise.reject(new Error(`unexpected method ${method}`));
+      }
+    });
+
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+
+    const mergeButton = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent.startsWith("Merge into"),
+    );
+    if (!mergeButton) throw new Error("Merge button not found");
+    await act(async () => {
+      mergeButton.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "Merging…",
+    );
+
+    // Polling observes the Change as "merging" at least once before settlement.
+    phase = "merging";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "Merging…",
+    );
+
+    // The background merge settles as a real conflict on README.md.
+    phase = "conflict";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "Conflicts in README.md. Update the source branch, resolve and push again.",
+    );
+  });
+
+  it("shows Merge failed · Retry once a background merge exhausts its retries, instead of hanging on Merging…", async () => {
+    let phase: "open" | "merging" | "failed" = "open";
+    callMethod.mockImplementation((method) => {
+      switch (method) {
+        case "changes.get":
+          return Promise.resolve(
+            buildDetail(
+              phase === "open"
+                ? buildChange({
+                    state: "open",
+                    status: "ready",
+                    lease: null,
+                    conflict: null,
+                    mergeable: { allowed: true },
+                  })
+                : phase === "merging"
+                  ? buildChange({
+                      state: "merging",
+                      status: "merging",
+                      lease: { id: "lease-1", by: "Levi", head: HEAD, at: 1 },
+                      conflict: null,
+                      mergeable: { allowed: false, reason: "merging" },
+                    })
+                  : withMergeFailure(
+                      buildChange({
+                        state: "open",
+                        status: "ready",
+                        lease: null,
+                        conflict: null,
+                        mergeable: { allowed: true },
+                      }),
+                      "sync_failed",
+                    ),
+            ),
+          );
+        case "changes.list":
+          return Promise.resolve({ changes: [] });
+        case "graph.get":
+          return Promise.resolve({ lanes: [], nodes: [] });
+        case "actors.list":
+          return Promise.resolve({ agents: [] });
+        case "repos.get":
+          return Promise.resolve({
+            repo: {
+              name: "pond",
+              description: null,
+              parent: null,
+              owner: null,
+              createdAt: 1,
+              lastPushAt: null,
+              forks: [],
+              openChanges: 0,
+              activity: [],
+            },
+            defaultBranch: "main",
+            refs: [],
+            cloneUrl: "https://bonsai.local/git/pond",
+            empty: false,
+          });
+        case "activity.list":
+          return Promise.resolve({ events: [] });
+        case "changes.merge":
+          return Promise.resolve({ kind: "merging" });
+        default:
+          return Promise.reject(new Error(`unexpected method ${method}`));
+      }
+    });
+
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+
+    const mergeButton = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent.startsWith("Merge into"),
+    );
+    if (!mergeButton) throw new Error("Merge button not found");
+    await act(async () => {
+      mergeButton.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    phase = "merging";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "Merging…",
+    );
+
+    // The background lane exhausted its stale-CAS retries and recorded its
+    // own mergeFailure; the page must say so rather than hang forever.
+    phase = "failed";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "Merge failed · Retry",
+    );
+  });
+
+  it("names a moved branch, not an unchanged head, when a foreground merge exhausts its retries", async () => {
+    callMethod.mockImplementation((method) => {
+      switch (method) {
+        case "changes.get":
+          return Promise.resolve(
+            buildDetail(
+              buildChange({
+                state: "open",
+                status: "ready",
+                lease: null,
+                conflict: null,
+                mergeable: { allowed: true },
+              }),
+            ),
+          );
+        case "changes.list":
+          return Promise.resolve({ changes: [] });
+        case "graph.get":
+          return Promise.resolve({ lanes: [], nodes: [] });
+        case "actors.list":
+          return Promise.resolve({ agents: [] });
+        case "repos.get":
+          return Promise.resolve({
+            repo: {
+              name: "pond",
+              description: null,
+              parent: null,
+              owner: null,
+              createdAt: 1,
+              lastPushAt: null,
+              forks: [],
+              openChanges: 0,
+              activity: [],
+            },
+            defaultBranch: "main",
+            refs: [],
+            cloneUrl: "https://bonsai.local/git/pond",
+            empty: false,
+          });
+        case "activity.list":
+          return Promise.resolve({ events: [] });
+        case "changes.merge":
+          // The foreground path's own 3x inline retry exhausted and
+          // settled synchronously: the target moved, not the reviewed
+          // (unchanged) head, so `head` here is just `change.head` again.
+          return Promise.resolve({ kind: "moved", head: HEAD });
+        default:
+          return Promise.reject(new Error(`unexpected method ${method}`));
+      }
+    });
+
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+
+    const mergeButton = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent.startsWith("Merge into"),
+    );
+    if (!mergeButton) throw new Error("Merge button not found");
+    await act(async () => {
+      mergeButton.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "The merge did not complete because the branch moved. Review the refreshed Change and merge again.",
+    );
+  });
+
+  it("shows a defensive message, never a stuck Merging…, if a settled merge leaves neither a failure nor a matching conflict", async () => {
+    let phase: "open" | "merging" | "unexplained" = "open";
+    callMethod.mockImplementation((method) => {
+      switch (method) {
+        case "changes.get":
+          return Promise.resolve(
+            buildDetail(
+              phase === "open"
+                ? buildChange({
+                    state: "open",
+                    status: "ready",
+                    lease: null,
+                    conflict: null,
+                    mergeable: { allowed: true },
+                  })
+                : phase === "merging"
+                  ? buildChange({
+                      state: "merging",
+                      status: "merging",
+                      lease: { id: "lease-1", by: "Levi", head: HEAD, at: 1 },
+                      conflict: null,
+                      mergeable: { allowed: false, reason: "merging" },
+                    })
+                  : buildChange({
+                      // No mergeFailure, no conflict, and not merged: the
+                      // defensive fallback, not another "Merging…" render.
+                      state: "open",
+                      status: "ready",
+                      lease: null,
+                      conflict: null,
+                      mergeable: { allowed: true },
+                    }),
+            ),
+          );
+        case "changes.list":
+          return Promise.resolve({ changes: [] });
+        case "graph.get":
+          return Promise.resolve({ lanes: [], nodes: [] });
+        case "actors.list":
+          return Promise.resolve({ agents: [] });
+        case "repos.get":
+          return Promise.resolve({
+            repo: {
+              name: "pond",
+              description: null,
+              parent: null,
+              owner: null,
+              createdAt: 1,
+              lastPushAt: null,
+              forks: [],
+              openChanges: 0,
+              activity: [],
+            },
+            defaultBranch: "main",
+            refs: [],
+            cloneUrl: "https://bonsai.local/git/pond",
+            empty: false,
+          });
+        case "activity.list":
+          return Promise.resolve({ events: [] });
+        case "changes.merge":
+          return Promise.resolve({ kind: "merging" });
+        default:
+          return Promise.reject(new Error(`unexpected method ${method}`));
+      }
+    });
+
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+
+    const mergeButton = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent.startsWith("Merge into"),
+    );
+    if (!mergeButton) throw new Error("Merge button not found");
+    await act(async () => {
+      mergeButton.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "Merging…",
+    );
+
+    phase = "merging";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "Merging…",
+    );
+
+    phase = "unexplained";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "The merge did not complete. Review the Change and try again.",
+    );
+  });
+
+  it("says the source moved when a background merge settles head_moved without landing anything", async () => {
+    let phase: "open" | "merging" | "head_moved" = "open";
+    callMethod.mockImplementation((method) => {
+      switch (method) {
+        case "changes.get":
+          return Promise.resolve(
+            buildDetail(
+              phase === "open"
+                ? buildChange({
+                    state: "open",
+                    status: "ready",
+                    lease: null,
+                    conflict: null,
+                    mergeable: { allowed: true },
+                  })
+                : phase === "merging"
+                  ? buildChange({
+                      state: "merging",
+                      status: "merging",
+                      lease: { id: "lease-1", by: "Levi", head: HEAD, at: 1 },
+                      conflict: null,
+                      mergeable: { allowed: false, reason: "merging" },
+                    })
+                  : withHeadMoved(
+                      buildChange({
+                        state: "open",
+                        status: "ready",
+                        lease: null,
+                        conflict: null,
+                        mergeable: { allowed: true },
+                      }),
+                      null,
+                    ),
+            ),
+          );
+        case "changes.list":
+          return Promise.resolve({ changes: [] });
+        case "graph.get":
+          return Promise.resolve({ lanes: [], nodes: [] });
+        case "actors.list":
+          return Promise.resolve({ agents: [] });
+        case "repos.get":
+          return Promise.resolve({
+            repo: {
+              name: "pond",
+              description: null,
+              parent: null,
+              owner: null,
+              createdAt: 1,
+              lastPushAt: null,
+              forks: [],
+              openChanges: 0,
+              activity: [],
+            },
+            defaultBranch: "main",
+            refs: [],
+            cloneUrl: "https://bonsai.local/git/pond",
+            empty: false,
+          });
+        case "activity.list":
+          return Promise.resolve({ events: [] });
+        case "changes.merge":
+          return Promise.resolve({ kind: "merging" });
+        default:
+          return Promise.reject(new Error(`unexpected method ${method}`));
+      }
+    });
+
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+
+    const mergeButton = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent.startsWith("Merge into"),
+    );
+    if (!mergeButton) throw new Error("Merge button not found");
+    await act(async () => {
+      mergeButton.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    phase = "merging";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+
+    phase = "head_moved";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "The source moved. Review the refreshed Change and merge again.",
+    );
+  });
+
+  it("names the commit and asks for a review of the new head when a background merge lands for a superseded head", async () => {
+    let phase: "open" | "merging" | "head_moved" = "open";
+    const landedCommit = "d".repeat(40);
+    callMethod.mockImplementation((method) => {
+      switch (method) {
+        case "changes.get":
+          return Promise.resolve(
+            buildDetail(
+              phase === "open"
+                ? buildChange({
+                    state: "open",
+                    status: "ready",
+                    lease: null,
+                    conflict: null,
+                    mergeable: { allowed: true },
+                  })
+                : phase === "merging"
+                  ? buildChange({
+                      state: "merging",
+                      status: "merging",
+                      lease: { id: "lease-1", by: "Levi", head: HEAD, at: 1 },
+                      conflict: null,
+                      mergeable: { allowed: false, reason: "merging" },
+                    })
+                  : withHeadMoved(
+                      buildChange({
+                        state: "open",
+                        status: "ready",
+                        lease: null,
+                        conflict: null,
+                        mergeable: { allowed: true },
+                      }),
+                      { commit: landedCommit, by: "Levi" },
+                    ),
+            ),
+          );
+        case "changes.list":
+          return Promise.resolve({ changes: [] });
+        case "graph.get":
+          return Promise.resolve({ lanes: [], nodes: [] });
+        case "actors.list":
+          return Promise.resolve({ agents: [] });
+        case "repos.get":
+          return Promise.resolve({
+            repo: {
+              name: "pond",
+              description: null,
+              parent: null,
+              owner: null,
+              createdAt: 1,
+              lastPushAt: null,
+              forks: [],
+              openChanges: 0,
+              activity: [],
+            },
+            defaultBranch: "main",
+            refs: [],
+            cloneUrl: "https://bonsai.local/git/pond",
+            empty: false,
+          });
+        case "activity.list":
+          return Promise.resolve({ events: [] });
+        case "changes.merge":
+          return Promise.resolve({ kind: "merging" });
+        default:
+          return Promise.reject(new Error(`unexpected method ${method}`));
+      }
+    });
+
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+
+    const mergeButton = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent.startsWith("Merge into"),
+    );
+    if (!mergeButton) throw new Error("Merge button not found");
+    await act(async () => {
+      mergeButton.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    phase = "merging";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+
+    phase = "head_moved";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      `Merged as ${landedCommit.slice(0, 7)}. Review the new head before merging again.`,
+    );
+  });
+
+  it("does not flash the defensive fallback on a second merge click after the first settled unexplained", async () => {
+    let phase: "open" | "merging" | "unexplained" = "open";
+    callMethod.mockImplementation((method) => {
+      switch (method) {
+        case "changes.get":
+          return Promise.resolve(
+            buildDetail(
+              phase === "open" || phase === "unexplained"
+                ? buildChange({
+                    state: "open",
+                    status: "ready",
+                    lease: null,
+                    conflict: null,
+                    mergeable: { allowed: true },
+                  })
+                : buildChange({
+                    state: "merging",
+                    status: "merging",
+                    lease: { id: "lease-1", by: "Levi", head: HEAD, at: 1 },
+                    conflict: null,
+                    mergeable: { allowed: false, reason: "merging" },
+                  }),
+            ),
+          );
+        case "changes.list":
+          return Promise.resolve({ changes: [] });
+        case "graph.get":
+          return Promise.resolve({ lanes: [], nodes: [] });
+        case "actors.list":
+          return Promise.resolve({ agents: [] });
+        case "repos.get":
+          return Promise.resolve({
+            repo: {
+              name: "pond",
+              description: null,
+              parent: null,
+              owner: null,
+              createdAt: 1,
+              lastPushAt: null,
+              forks: [],
+              openChanges: 0,
+              activity: [],
+            },
+            defaultBranch: "main",
+            refs: [],
+            cloneUrl: "https://bonsai.local/git/pond",
+            empty: false,
+          });
+        case "activity.list":
+          return Promise.resolve({ events: [] });
+        case "changes.merge":
+          return Promise.resolve({ kind: "merging" });
+        default:
+          return Promise.reject(new Error(`unexpected method ${method}`));
+      }
+    });
+
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+
+    const mergeButton = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent.startsWith("Merge into"),
+    );
+    if (!mergeButton) throw new Error("Merge button not found");
+
+    // First attempt: observe "merging", then settle unexplained (neither
+    // a failure nor a matching conflict) -- the defensive fallback.
+    await act(async () => {
+      mergeButton.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    phase = "merging";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    phase = "unexplained";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "The merge did not complete. Review the Change and try again.",
+    );
+
+    // Second click: sawMerging must reset, or this click's own optimistic
+    // "Merging…" would immediately flash the stale fallback again, before
+    // this attempt's own first poll has confirmed "merging". Re-find the
+    // button: the board tile re-rendered under the first settlement, and
+    // a cached node from before that render may no longer be attached.
+    await act(async () => {
+      const secondClick = [...container.querySelectorAll("button")].find(
+        (button) => button.textContent.startsWith("Merge into"),
+      );
+      if (!secondClick) throw new Error("Merge button not found");
+      secondClick.click();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "Merging…",
+    );
+
+    // And the fallback still works on this second attempt once polling
+    // has observed "merging" again before it settles unexplained again.
+    phase = "merging";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    phase = "unexplained";
+    await act(async () => {
+      await client.invalidateQueries({ queryKey: ["change", "pond", 1] });
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "The merge did not complete. Review the Change and try again.",
+    );
+  });
+});