@fungi.computer/bonsai 0.0.0-stage → 0.1.0

package/test/ui-errors.test.ts

@@ -0,0 +1,976 @@
+// @vitest-environment jsdom
+import * as z from "zod";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, createElement, Fragment } from "react";
+import { createRoot } from "react-dom/client";
+import {
+  QueryClient,
+  QueryClientProvider,
+  notifyManager,
+  useQuery,
+} from "@tanstack/react-query";
+import { useLive } from "../web/api.js";
+import { RepoPage } from "../web/pages.js";
+import { ChangePage } from "../web/change-page.js";
+import { InsightTile } from "../web/insight-tiles.js";
+import { OverviewBoard } from "../web/insights.js";
+import { CodeTab } from "../web/code-tab.js";
+import { ActivityFeed } from "../web/parts.js";
+import { NetworkGraph } from "../web/network-graph.js";
+import { ChangeGroups } from "../web/change-rows.js";
+import { RouterProvider, Link, href, useRouter } from "../web/router.js";
+import { connect } from "../web/transport.js";
+import { createCapabilityRegistry } from "@fungi.computer/agar";
+import { appMethods } from "@fungi.computer/agar/backend";
+import type { Activity, 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.useFakeTimers();
+  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.useRealTimers();
+  vi.unstubAllGlobals();
+  vi.resetAllMocks();
+});
+const render = async (child: ReturnType<typeof createElement>) => {
+  await act(async () => {
+    root.render(createElement(QueryClientProvider, { client }, child));
+    await Promise.resolve();
+  });
+};
+
+function LiveProbe() {
+  const live = useLive();
+  return createElement("div", { "data-connected": live.connected }, live.error);
+}
+
+function detailFixture(): ChangeDetail {
+  return {
+    change: {
+      repo: "pond",
+      number: 1,
+      sourceRepo: "pond--ada",
+      sourceRef: "main",
+      targetRef: "main",
+      title: "Add ripples",
+      body: "",
+      openedBy: "ada",
+      openedKind: "agent",
+      createdAt: 1,
+      updatedAt: 1,
+      head: "a".repeat(40),
+      target: "b".repeat(40),
+      base: null,
+      ahead: 1,
+      behind: 0,
+      state: "open",
+      status: "ready",
+      mergeable: { allowed: true },
+      revision: 0,
+      conflict: null,
+      lease: null,
+      mergedCommit: null,
+      mergedBy: null,
+      closedBy: null,
+    },
+    actions: { approve: { allowed: true }, close: { allowed: true } },
+    review: { approvals: [], checks: [] },
+    commits: [],
+    diff: { files: [], additions: 0, deletions: 0, omittedFiles: 0 },
+  };
+}
+
+describe("Bonsai failed actions", () => {
+  it("surfaces a failed live poll and clears it after recovery", async () => {
+    vi.mocked(callMethod).mockRejectedValueOnce(new Error("transport failed"));
+    await render(createElement(LiveProbe));
+    expect(container.textContent).toContain("Live updates are unavailable");
+    expect(container.firstElementChild?.getAttribute("data-connected")).toBe(
+      "false",
+    );
+    vi.mocked(callMethod).mockResolvedValue({ events: [] });
+    await act(async () => vi.advanceTimersByTimeAsync(2500));
+    expect(container.textContent).toBe("");
+    expect(container.firstElementChild?.getAttribute("data-connected")).toBe(
+      "true",
+    );
+  });
+
+  it("announces a refused merge as an error, then clears it on a successful retry", async () => {
+    client.setQueryData(["agents"], { agents: [] });
+    const detail = detailFixture();
+    client.setQueryData(["change", "pond", 1], detail);
+    client.setQueryData(["changes", "pond"], { changes: [] });
+    client.setQueryData(["graph", "pond"], { nodes: [], lanes: [] });
+    let attempts = 0;
+    vi.mocked(callMethod).mockImplementation((method) => {
+      if (method === "changes.merge") {
+        attempts++;
+        if (attempts === 1) throw new Error("Merge permission refused.");
+        return Promise.resolve({
+          kind: "merged",
+          before: "b".repeat(40),
+          after: "c".repeat(40),
+        });
+      }
+      if (method === "changes.get")
+        return Promise.resolve(z.json().parse(detail));
+      if (method === "changes.list") return Promise.resolve({ changes: [] });
+      if (method === "graph.get")
+        return Promise.resolve({ nodes: [], lanes: [] });
+      throw new Error(`Unexpected fixture method ${method}`);
+    });
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+    const button = Array.from(container.querySelectorAll("button")).find(
+      (value) => value.textContent.includes("Merge into"),
+    );
+    if (!button) throw new Error("Merge action missing");
+    await act(async () => {
+      button.click();
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="alert"]')?.textContent).toBe(
+      "Merge permission refused.",
+    );
+    expect(button.disabled).toBe(false);
+    expect(callMethod).toHaveBeenCalledWith(
+      "changes.merge",
+      JSON.stringify({ repo: "pond", number: 1, head: "a".repeat(40) }),
+    );
+    await act(async () => {
+      button.click();
+      await Promise.resolve();
+    });
+    expect(container.querySelector('[role="alert"]')).toBeNull();
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "Merged as ccccccc.",
+    );
+  });
+});
+
+function RouteProbe() {
+  const { route } = useRouter();
+  return createElement(
+    "output",
+    null,
+    route.page === "change"
+      ? `${route.repo}#${String(route.number)}`
+      : route.page,
+  );
+}
+
+function cacheChange(detail: ChangeDetail) {
+  client.setQueryData(["agents"], { agents: [] });
+  client.setQueryData(
+    ["change", detail.change.repo, detail.change.number],
+    detail,
+  );
+  client.setQueryData(["changes", detail.change.repo], { changes: [] });
+  client.setQueryData(["graph", detail.change.repo], { nodes: [], lanes: [] });
+}
+
+describe("numbered Change review", () => {
+  it("opens a numbered route with an encoded repository", async () => {
+    const to = href({ page: "change", repo: "pond/with space", number: 12 });
+    expect(to).toBe("#change/pond%2Fwith%20space/12");
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(
+          Fragment,
+          null,
+          createElement(Link, { to }, "Open Change"),
+          createElement(RouteProbe),
+        ),
+      ),
+    );
+    await act(async () => {
+      container.querySelector("a")?.click();
+      await Promise.resolve();
+    });
+    expect(container.querySelector("output")?.textContent).toBe(
+      "pond/with space#12",
+    );
+  });
+
+  it("refreshes a pending merge until its access-change settlement is visible", async () => {
+    vi.useFakeTimers({ toFake: ["setInterval", "clearInterval"] });
+    const detail = detailFixture();
+    detail.change.state = "merging";
+    detail.change.status = "merging";
+    detail.change.mergeable = { allowed: false, reason: "merging" };
+    detail.change.lease = {
+      id: "pending-merge",
+      by: "Levi",
+      head: detail.change.head,
+      at: 1,
+    };
+    cacheChange(detail);
+    const failed = {
+      ...detail,
+      change: {
+        ...detail.change,
+        state: "open",
+        status: "ready",
+        lease: null,
+        mergeFailure: "access_changed",
+      },
+    };
+    callMethod.mockImplementation((method) => {
+      if (method === "changes.get")
+        return Promise.resolve(z.json().parse(failed));
+      throw new Error(`Unexpected method ${method}`);
+    });
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1000);
+    });
+    expect(container.textContent).toContain("Merge failed: access changed");
+    const reads = callMethod.mock.calls.filter(
+      ([method]) => method === "changes.get",
+    ).length;
+    expect(reads).toBe(1);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(5000);
+    });
+    expect(
+      callMethod.mock.calls.filter(([method]) => method === "changes.get"),
+    ).toHaveLength(reads);
+  });
+
+  it("hides actions refused by server policy and an empty Review", async () => {
+    const detail = detailFixture();
+    detail.actions = {
+      approve: { allowed: false, reason: "self-approval" },
+      close: { allowed: false, reason: "not-authorized" },
+    };
+    cacheChange(detail);
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+    expect(container.querySelector("h1")?.textContent).toBe("#1 Add ripples");
+    expect(
+      [...container.querySelectorAll("button")].some(
+        (button) =>
+          button.textContent === "Approve" || button.textContent === "Close",
+      ),
+    ).toBe(false);
+    expect(container.querySelector('[data-tile="review"]')).toBeNull();
+  });
+
+  it("counts only current-head checks and explains earlier approvals", async () => {
+    const detail = detailFixture();
+    detail.review = {
+      approvals: [
+        { actor: "Levi", kind: "human", head: "d".repeat(40), at: 1 },
+      ],
+      checks: [
+        {
+          head: detail.change.head,
+          name: "tests",
+          status: "passed",
+          reporter: "Luna",
+          attemptId: "now",
+          runUrl: "https://example.test/run/1",
+          summary: null,
+          updatedAt: 1,
+        },
+        {
+          head: "d".repeat(40),
+          name: "tests",
+          status: "failed",
+          reporter: "Luna",
+          attemptId: "old",
+          runUrl: null,
+          summary: null,
+          updatedAt: 0,
+        },
+      ],
+    };
+    cacheChange(detail);
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+    const review = container.querySelector('[data-tile="review"]');
+    expect(review?.textContent).toContain("1 of 1 passed");
+    expect(review?.textContent).toContain(
+      "Levi approved ddddddd · before the latest push",
+    );
+    expect(
+      review?.querySelector('a[href="https://example.test/run/1"]')
+        ?.textContent,
+    ).toBe("Run ›");
+  });
+
+  it.each(["approved", "moved", "refused"] as const)(
+    "pins approval to the displayed head and handles %s",
+    async (kind) => {
+      const detail = detailFixture();
+      cacheChange(detail);
+      callMethod.mockImplementation((method) => {
+        if (method === "changes.approve")
+          return Promise.resolve(
+            kind === "approved"
+              ? { kind }
+              : kind === "moved"
+                ? { kind, head: "c".repeat(40) }
+                : { kind, reason: "self-approval" },
+          );
+        if (method === "changes.get")
+          return Promise.resolve(z.json().parse(detail));
+        if (method === "changes.list") return Promise.resolve({ changes: [] });
+        if (method === "graph.get")
+          return Promise.resolve({ nodes: [], lanes: [] });
+        throw new Error(`Unexpected method ${method}`);
+      });
+      await render(
+        createElement(
+          RouterProvider,
+          null,
+          createElement(ChangePage, { repo: "pond", number: 1 }),
+        ),
+      );
+      const button = [...container.querySelectorAll("button")].find(
+        (button) => button.textContent === "Approve",
+      );
+      expect(button).toBeDefined();
+      await act(async () => {
+        button?.click();
+        await Promise.resolve();
+      });
+      expect(callMethod).toHaveBeenCalledWith(
+        "changes.approve",
+        JSON.stringify({ repo: "pond", number: 1, head: "a".repeat(40) }),
+      );
+      expect(container.querySelector('[role="status"]')?.textContent).toContain(
+        kind === "approved"
+          ? "Approved aaaaaaa"
+          : kind === "moved"
+            ? "head moved to ccccccc"
+            : "Approval refused:",
+      );
+    },
+  );
+
+  it("closes the canonical numbered Change", async () => {
+    const detail = detailFixture();
+    cacheChange(detail);
+    callMethod.mockImplementation((method) => {
+      if (method === "changes.close") return Promise.resolve({ allowed: true });
+      if (method === "changes.get")
+        return Promise.resolve(z.json().parse(detail));
+      if (method === "changes.list") return Promise.resolve({ changes: [] });
+      if (method === "graph.get")
+        return Promise.resolve({ nodes: [], lanes: [] });
+      throw new Error(`Unexpected method ${method}`);
+    });
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangePage, { repo: "pond", number: 1 }),
+      ),
+    );
+    await act(async () => {
+      [...container.querySelectorAll("button")]
+        .find((button) => button.textContent === "Close")
+        ?.click();
+      await Promise.resolve();
+    });
+    expect(callMethod).toHaveBeenCalledWith(
+      "changes.close",
+      JSON.stringify({ repo: "pond", number: 1 }),
+    );
+    expect(container.querySelector('[role="status"]')?.textContent).toBe(
+      "Change closed.",
+    );
+  });
+
+  it("groups attention, ready and done Changes without losing in-flight work", async () => {
+    const base = detailFixture().change;
+    await render(
+      createElement(
+        RouterProvider,
+        null,
+        createElement(ChangeGroups, {
+          colors: new Map(),
+          changes: [
+            { ...base, number: 1, status: "needs-approval" },
+            { ...base, number: 2 },
+            { ...base, number: 3, state: "closed", status: "closed" },
+            { ...base, number: 4, status: "checks-running" },
+          ],
+        }),
+      ),
+    );
+    expect(
+      [...container.querySelectorAll("h3")].map(
+        (heading) => heading.textContent,
+      ),
+    ).toEqual(["Needs you", "Ready", "In progress", "Done"]);
+    expect(
+      [...container.querySelectorAll("a")].map((link) => link.textContent),
+    ).toEqual([
+      "#1 · Add ripples",
+      "#2 · Add ripples",
+      "#4 · Add ripples",
+      "#3 · Add ripples",
+    ]);
+  });
+});
+
+it("shows a single time label for a burst of commits", async () => {
+  vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockReturnValue(700);
+  const head = "a".repeat(40);
+  await act(async () => {
+    await Promise.resolve();
+    root.render(
+      createElement(NetworkGraph, {
+        graph: {
+          lanes: [
+            {
+              id: "pond:main",
+              repo: "pond",
+              ref: "main",
+              owner: null,
+              head,
+              canonical: true,
+            },
+          ],
+          nodes: Array.from({ length: 11 }, (_, index) => ({
+            hash: index.toString(16).padStart(40, "0"),
+            parents: [],
+            message: "Real push",
+            author: "morel",
+            agent: "morel",
+            origin: "pond",
+            committedAt: Math.floor(Date.now() / 1000),
+            lanes: ["pond:main"],
+          })),
+        },
+        colors: new Map(),
+        fresh: new Set<string>(),
+        onSelect: vi.fn(),
+      }),
+    );
+  });
+  expect(
+    [...container.querySelectorAll(".bonsai-network-axis text")].map(
+      (node) => node.textContent,
+    ),
+  ).toEqual(["just now"]);
+});
+
+it.each(["merge", "merge.conflict"] as const)(
+  "shows the source lane in %s activity",
+  async (type) => {
+    const identity = {
+      repo: "koi-pond",
+      number: 1,
+      sourceRepo: "koi-pond--morel",
+      sourceRef: "ripples",
+      targetRef: "main",
+      head: "a".repeat(40),
+    };
+    const event: Activity =
+      type === "merge"
+        ? {
+            id: 1,
+            at: Date.now(),
+            actor: "owner",
+            repo: "koi-pond",
+            type,
+            data: {
+              change: identity,
+              from: identity.sourceRepo,
+              ref: "main",
+              before: "b".repeat(40),
+              after: "c".repeat(40),
+            },
+          }
+        : {
+            id: 1,
+            at: Date.now(),
+            actor: "owner",
+            repo: "koi-pond",
+            type,
+            data: {
+              change: identity,
+              from: identity.sourceRepo,
+              ref: "main",
+              paths: ["src/pond.ts"],
+            },
+          };
+    await act(async () => {
+      await Promise.resolve();
+      root.render(
+        createElement(ActivityFeed, {
+          events: [event],
+          colors: new Map(),
+          fresh: new Set<number>(),
+        }),
+      );
+    });
+    expect(container.textContent).toContain("morel/ripples");
+    expect(container.textContent).not.toContain("koi-pond--morel");
+  },
+);
+
+const emptyCodeInsights = {
+  head: null,
+  commits: 0,
+  files: [],
+  ageHistory: [],
+  omittedFiles: 0,
+  partial: false,
+};
+const codeInsightCalls = () =>
+  callMethod.mock.calls.filter(([method]) => method === "insights.code").length;
+const heavyTile = (id: "ages" | "churn") =>
+  createElement(InsightTile, {
+    id,
+    repo: "pond",
+    refName: "main",
+    graph: { nodes: [], lanes: [] },
+    actors: [],
+  });
+
+it("opening the default Overview makes zero code-insight calls", async () => {
+  callMethod.mockImplementation((method) => {
+    if (method === "insights.layout.get")
+      return Promise.resolve({ tiles: null });
+    if (method === "insights.code") return Promise.resolve(emptyCodeInsights);
+    throw new Error(`Unexpected method ${method}`);
+  });
+  await render(
+    createElement(
+      RouterProvider,
+      null,
+      createElement(OverviewBoard, {
+        repo: "pond",
+        controlsTarget: null,
+        definitions: ["ages", "churn"].map((id) => ({
+          id,
+          title: id,
+          body: heavyTile(id === "ages" ? "ages" : "churn"),
+        })),
+      }),
+    ),
+  );
+  expect(
+    callMethod.mock.calls.filter(
+      ([method]) => method === "insights.layout.get",
+    ),
+  ).toHaveLength(1);
+  expect(codeInsightCalls()).toBe(0);
+});
+
+it("opening Code makes zero code-insight calls", async () => {
+  callMethod.mockImplementation((method) => {
+    if (method === "insights.code") return Promise.resolve(emptyCodeInsights);
+    if (method === "files.list")
+      return Promise.resolve({ error: "Fixture file read unavailable" });
+    throw new Error(`Unexpected method ${method}`);
+  });
+  await render(
+    createElement(
+      RouterProvider,
+      null,
+      createElement(CodeTab, {
+        route: {
+          page: "repo",
+          repo: "pond",
+          tab: "code",
+          ref: null,
+          file: null,
+          path: "",
+        },
+        detail: {
+          repo: {
+            name: "pond",
+            description: null,
+            parent: null,
+            owner: null,
+            createdAt: 0,
+            lastPushAt: null,
+            forks: [],
+            openChanges: 0,
+            activity: [],
+          },
+          defaultBranch: "main",
+          refs: [],
+          cloneUrl: "https://example.test/pond.git",
+          empty: false,
+        },
+      }),
+    ),
+  );
+  expect(
+    callMethod.mock.calls.filter(([method]) => method === "files.list"),
+  ).toHaveLength(1);
+  expect(codeInsightCalls()).toBe(0);
+});
+
+it("live events do not reload explicitly selected code-insight tiles", async () => {
+  let eventId = 0;
+  callMethod.mockImplementation((method) => {
+    if (method === "insights.code") return Promise.resolve(emptyCodeInsights);
+    if (method === "activity.list")
+      return Promise.resolve({
+        events: [
+          {
+            id: ++eventId,
+            at: Date.now(),
+            type: "change.closed",
+            repo: "pond",
+            actor: "owner",
+            data: {
+              change: {
+                repo: "pond",
+                number: 1,
+                sourceRepo: "pond--ada",
+                sourceRef: "main",
+                targetRef: "main",
+                head: "a".repeat(40),
+              },
+            },
+          },
+        ],
+      });
+    throw new Error(`Unexpected method ${method}`);
+  });
+  await render(
+    createElement(Fragment, null, createElement(LiveProbe), heavyTile("ages")),
+  );
+  expect(codeInsightCalls()).toBe(1);
+  await act(async () => vi.advanceTimersByTimeAsync(2500));
+  expect(eventId).toBe(2);
+  expect(codeInsightCalls()).toBe(1);
+});
+
+it("a Change event reloads only its Change and lists, once per poll", async () => {
+  const reads = new Map<string, number>();
+  function WatchedQuery({
+    queryKey,
+  }: {
+    queryKey: (string | number | null)[];
+  }) {
+    useQuery({
+      queryKey,
+      queryFn: () => {
+        const key = JSON.stringify(queryKey);
+        reads.set(key, (reads.get(key) ?? 0) + 1);
+        return Promise.resolve(null);
+      },
+    });
+    return null;
+  }
+  const keys = [
+    ["changes", "pond"],
+    ["change", "pond", 1],
+    ["events", "pond"],
+    ["events", null],
+    ["repos"],
+    ["change", "pond", 2],
+    ["changes", "garden"],
+    ["events", "garden"],
+    ["graph", "pond"],
+    ["files", "pond", "main"],
+    ["blob", "garden", "main", "README.md"],
+    ["repo", "garden"],
+    ["agents"],
+  ];
+  callMethod.mockResolvedValueOnce({ events: [] }).mockResolvedValue({
+    events: [1, 2]
+      .map((id) => ({
+        id,
+        at: 1,
+        type: "change.closed",
+        repo: "pond",
+        actor: "owner",
+        data: {
+          change: {
+            repo: "pond",
+            number: 1,
+            sourceRepo: "pond--ada",
+            sourceRef: "main",
+            targetRef: "main",
+            head: "a".repeat(40),
+          },
+        },
+      }))
+      .reverse(),
+  });
+  await render(
+    createElement(
+      Fragment,
+      null,
+      createElement(LiveProbe),
+      ...keys.map((queryKey) =>
+        createElement(WatchedQuery, {
+          key: JSON.stringify(queryKey),
+          queryKey,
+        }),
+      ),
+    ),
+  );
+  await act(async () => vi.advanceTimersByTimeAsync(5000));
+  expect([...reads.values()]).toEqual([2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1]);
+});
+
+it("idle live polls back off and hidden pages make no calls", async () => {
+  const visibility = vi.spyOn(document, "hidden", "get").mockReturnValue(false);
+  callMethod.mockResolvedValue({ events: [] });
+  await render(createElement(LiveProbe));
+  await act(async () => vi.advanceTimersByTimeAsync(2500));
+  expect(callMethod).toHaveBeenCalledTimes(1);
+  await act(async () => vi.advanceTimersByTimeAsync(2500));
+  expect(callMethod).toHaveBeenCalledTimes(2);
+  visibility.mockReturnValue(true);
+  await act(async () => {
+    document.dispatchEvent(new Event("visibilitychange"));
+    await vi.advanceTimersByTimeAsync(15000);
+  });
+  expect(callMethod).toHaveBeenCalledTimes(2);
+  visibility.mockReturnValue(false);
+  await act(async () => {
+    document.dispatchEvent(new Event("visibilitychange"));
+    await Promise.resolve();
+  });
+  expect(callMethod).toHaveBeenCalledTimes(3);
+  visibility.mockRestore();
+});
+
+it("Overview renders its board while graph and actors are still loading", async () => {
+  client.setQueryData(["repo", "pond"], {
+    repo: {
+      name: "pond",
+      description: null,
+      parent: null,
+      owner: null,
+      createdAt: 0,
+      lastPushAt: null,
+      forks: [],
+      activity: [],
+    },
+    defaultBranch: "main",
+    refs: [],
+    cloneUrl: "https://example.test/pond.git",
+    empty: false,
+  });
+  callMethod.mockImplementation((method) =>
+    method === "insights.layout.get"
+      ? Promise.resolve({ tiles: null })
+      : new Promise(() => undefined),
+  );
+  await render(
+    createElement(
+      RouterProvider,
+      null,
+      createElement(RepoPage, {
+        route: {
+          page: "repo",
+          repo: "pond",
+          tab: "overview",
+          ref: null,
+          file: null,
+          path: "",
+        },
+        live: { connected: true, error: null, fresh: new Set<number>() },
+      }),
+    ),
+  );
+  expect(
+    container.querySelector('[data-tile="readme"]')?.textContent,
+  ).toContain("Loading README");
+  expect(
+    container.querySelector('[data-tile="network"]')?.textContent,
+  ).toContain("Loading network");
+});
+
+it("a failed Network tile can retry without reloading the repository", async () => {
+  client.setQueryData(["repo", "pond"], {
+    repo: {
+      name: "pond",
+      description: null,
+      parent: null,
+      owner: null,
+      createdAt: 0,
+      lastPushAt: null,
+      forks: [],
+      activity: [],
+    },
+    defaultBranch: "main",
+    refs: [],
+    cloneUrl: "https://example.test/pond.git",
+    empty: false,
+  });
+  let graphs = 0;
+  callMethod.mockImplementation((method) => {
+    if (method === "graph.get") {
+      graphs++;
+      return graphs === 1
+        ? Promise.reject(new Error("Bonsai could not finish that request"))
+        : Promise.resolve({ nodes: [], lanes: [] });
+    }
+    if (method === "insights.layout.get")
+      return Promise.resolve({ tiles: null });
+    return new Promise(() => undefined);
+  });
+  await render(
+    createElement(
+      RouterProvider,
+      null,
+      createElement(RepoPage, {
+        route: {
+          page: "repo",
+          repo: "pond",
+          tab: "overview",
+          ref: null,
+          file: null,
+          path: "",
+        },
+        live: { connected: true, error: null, fresh: new Set<number>() },
+      }),
+    ),
+  );
+  const tile = container.querySelector('[data-tile="network"]');
+  const retry = Array.from(tile?.querySelectorAll("button") ?? []).find(
+    (button) => button.textContent === "Retry",
+  );
+  expect(retry).toBeDefined();
+  await act(async () => {
+    retry?.click();
+    await Promise.resolve();
+  });
+  expect(graphs).toBe(2);
+  expect(tile?.textContent).not.toContain("Taking longer than usual");
+  expect(
+    callMethod.mock.calls.filter(([method]) => method === "repos.get"),
+  ).toHaveLength(0);
+});
+
+it("a target push refreshes its displayed Changes and new actors, not other repositories", async () => {
+  const reads = new Map<string, number>();
+  function WatchedQuery({ queryKey }: { queryKey: (string | number)[] }) {
+    useQuery({
+      queryKey,
+      queryFn: () => {
+        const key = JSON.stringify(queryKey);
+        reads.set(key, (reads.get(key) ?? 0) + 1);
+        return Promise.resolve(null);
+      },
+    });
+    return null;
+  }
+  const keys = [
+    ["change", "pond", 1],
+    ["change", "garden", 1],
+    ["graph", "pond"],
+    ["graph", "garden"],
+    ["agents"],
+  ];
+  callMethod.mockResolvedValueOnce({ events: [] }).mockResolvedValue({
+    events: [
+      {
+        id: 1,
+        at: 1,
+        type: "push",
+        repo: "pond",
+        actor: "new-contributor",
+        data: {
+          updates: [
+            {
+              ref: "refs/heads/main",
+              before: "a".repeat(40),
+              after: "b".repeat(40),
+            },
+          ],
+          commits: [],
+          paths: [],
+        },
+      },
+    ],
+  });
+  await render(
+    createElement(
+      Fragment,
+      null,
+      createElement(LiveProbe),
+      ...keys.map((queryKey) =>
+        createElement(WatchedQuery, {
+          key: JSON.stringify(queryKey),
+          queryKey,
+        }),
+      ),
+    ),
+  );
+  await act(async () => vi.advanceTimersByTimeAsync(5000));
+  expect([...reads.values()]).toEqual([2, 1, 2, 1, 2]);
+});