@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/tabs-layout/network-status-indicator.test.tsx

@@ -1,799 +0,0 @@
-import type {
-  IAppUpdateStatus,
-  INetworkConnectionInfo,
-  INetworkStatusSummary,
-} from "@peers-app/peers-sdk";
-import { TrustLevel } from "@peers-app/peers-sdk";
-import { act, fireEvent, render, waitFor } from "@testing-library/react";
-import moment from "moment";
-import { IDENTITY_ACCEPT_PATH, IDENTITY_ACCOUNT_PATH } from "../screens/identity/identity-routes";
-import { networkViewerSection } from "../screens/network-viewer/network-viewer-section";
-import {
-  connectionIdentityLabel,
-  formatRelativeSyncTime,
-  getNetworkStatusPresentation,
-  NetworkStatusIndicator,
-  SYNCED_STABLE_MS,
-  SYNCING_GREEN_MS,
-  withAppUpdate,
-} from "./network-status-indicator";
-import type { INetworkStatusViewState } from "./use-network-status";
-
-const goToTabPath = jest.fn();
-const getConnections = jest.fn();
-let mockViewState: INetworkStatusViewState = { availability: "loading" };
-let mockAppUpdate: IAppUpdateStatus | undefined;
-const installUpdateAndRestart = jest.fn();
-
-jest.mock("./tabs-state", () => ({
-  goToTabPath: (...args: unknown[]) => goToTabPath(...args),
-}));
-
-jest.mock("./use-network-status", () => ({
-  useNetworkStatus: () => mockViewState,
-}));
-
-jest.mock("../app-updates/use-app-update-status", () => ({
-  useAppUpdateStatus: () => mockAppUpdate,
-}));
-
-jest.mock("../app-updates/app-updates-consumer", () => ({
-  ...jest.requireActual("../app-updates/app-updates-consumer"),
-  getAppUpdatesConsumer: () =>
-    Promise.resolve({
-      tools: {
-        installUpdateAndRestart: (...args: unknown[]) => installUpdateAndRestart(...args),
-      },
-    }),
-}));
-
-function appUpdate(overrides: Partial<IAppUpdateStatus> = {}): IAppUpdateStatus {
-  return {
-    supported: true,
-    canRestart: true,
-    platform: "darwin",
-    currentVersion: "1.0.0",
-    latestVersion: "1.1.0",
-    downloadedVersion: "1.1.0",
-    state: "downloaded",
-    installOnRestart: true,
-    installOnQuitArmed: true,
-    remoteRestartAllowed: true,
-    ...overrides,
-  };
-}
-
-jest.mock("../screens/network-viewer/network-viewer-ipc", () => ({
-  getNetworkDiagnosticsConsumer: () =>
-    Promise.resolve({
-      tools: {
-        getConnections: (...args: unknown[]) => getConnections(...args),
-      },
-    }),
-}));
-
-function status(overrides: Partial<INetworkStatusSummary>): INetworkStatusSummary {
-  return {
-    state: "synced",
-    connectionCount: 2,
-    syncingContextCount: 0,
-    errorCount: 0,
-    disconnectedContextCount: 0,
-    connectedContextCount: 0,
-    stuckRecoveryCount: 0,
-    errors: [],
-    ...overrides,
-  };
-}
-
-function connection(overrides: Partial<INetworkConnectionInfo> = {}): INetworkConnectionInfo {
-  return {
-    deviceId: "device-1",
-    userId: "user-1",
-    userName: "Ada",
-    deviceName: "Laptop",
-    userTrustLevel: TrustLevel.Trusted,
-    deviceTrustLevel: TrustLevel.Trusted,
-    connectionState: "connected",
-    sharedGroups: ["group-a"],
-    roles: {},
-    pathType: "direct",
-    latencyMs: 10,
-    errorRate: 0,
-    isServer: false,
-    ...overrides,
-  };
-}
-
-describe("formatRelativeSyncTime", () => {
-  it("returns now for very recent syncs", () => {
-    const now = Date.parse("2026-07-28T23:43:06.000");
-    expect(formatRelativeSyncTime(now - 10_000, now)).toBe("now");
-  });
-
-  it("returns yesterday for the previous calendar day", () => {
-    const now = moment("2026-07-28T23:43:06").valueOf();
-    const yesterdayAfternoon = moment("2026-07-28T23:43:06")
-      .subtract(1, "day")
-      .hour(18)
-      .minute(0)
-      .second(0)
-      .valueOf();
-    expect(formatRelativeSyncTime(yesterdayAfternoon, now)).toBe("yesterday");
-  });
-
-  it("returns a short relative phrase otherwise", () => {
-    const now = Date.parse("2026-07-28T23:43:06.000");
-    expect(formatRelativeSyncTime(now - 5 * 60_000, now)).toBe("5 minutes ago");
-  });
-});
-
-describe("connectionIdentityLabel", () => {
-  it("prefers a friendly name", () => {
-    expect(connectionIdentityLabel("Ada", "00mabcdefghijklmnopqrs")).toEqual({
-      text: "Ada",
-      isId: false,
-      title: "Ada",
-    });
-  });
-
-  it("middle-ellipsizes raw ids", () => {
-    expect(connectionIdentityLabel(undefined, "00mabcdefghijklmnopqrs")).toEqual({
-      text: "00ma…pqrs",
-      isId: true,
-      title: "00mabcdefghijklmnopqrs",
-    });
-  });
-});
-
-describe("getNetworkStatusPresentation", () => {
-  it("uses a compact green check-circle when synced", () => {
-    expect(
-      getNetworkStatusPresentation({ availability: "ready", status: status({ state: "synced" }) }),
-    ).toMatchObject({
-      shortLabel: "Synced",
-      colorClass: "text-success",
-      iconClass: "bi-check-circle-fill",
-      compactIcon: true,
-    });
-  });
-
-  it("uses a solid red dot when in error", () => {
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({
-          state: "error",
-          errorCount: 1,
-          errors: [{ dataContextId: "context", message: "failed", occurredAt: 1 }],
-        }),
-      }),
-    ).toMatchObject({
-      shortLabel: "Error",
-      colorClass: "text-danger",
-      mark: "solid",
-    });
-  });
-
-  it("pulses green then switches to an indeterminate circle while syncing", () => {
-    const syncing: INetworkStatusViewState = {
-      availability: "ready",
-      status: status({ state: "syncing", syncingContextCount: 1 }),
-    };
-    expect(getNetworkStatusPresentation(syncing)).toMatchObject({
-      colorClass: "text-success",
-      mark: "pulse",
-    });
-    expect(getNetworkStatusPresentation(syncing, { syncingLongerThanGreenMs: true })).toMatchObject(
-      {
-        colorClass: "text-primary",
-        mark: "indeterminate",
-      },
-    );
-  });
-
-  it("turns yellow for stuck recovery without hiding sync activity or errors", () => {
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({ state: "synced", stuckRecoveryCount: 2 }),
-      }),
-    ).toMatchObject({
-      colorClass: "text-warning",
-      iconClass: "bi-check-circle-fill",
-      label: expect.stringContaining("2 records need attention"),
-    });
-    expect(
-      getNetworkStatusPresentation(
-        {
-          availability: "ready",
-          status: status({ state: "syncing", syncingContextCount: 1, stuckRecoveryCount: 1 }),
-        },
-        { syncingLongerThanGreenMs: true },
-      ),
-    ).toMatchObject({
-      colorClass: "text-warning",
-      mark: "indeterminate",
-      label: expect.stringContaining("1 record needs attention"),
-    });
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({ state: "error", errorCount: 1, stuckRecoveryCount: 4 }),
-      }).colorClass,
-    ).toBe("text-danger");
-  });
-
-  it("holds a green pulse while waiting for stable synced", () => {
-    expect(
-      getNetworkStatusPresentation(
-        { availability: "ready", status: status({ state: "synced" }) },
-        { holdSyncingVisual: true, syncingLongerThanGreenMs: true },
-      ),
-    ).toMatchObject({
-      shortLabel: "Syncing",
-      colorClass: "text-success",
-      mark: "pulse",
-    });
-  });
-
-  it("flags a disconnected-group count when some groups lack a connection", () => {
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({ state: "synced", disconnectedContextCount: 2 }),
-      }),
-    ).toMatchObject({
-      disconnectedGroupsOverlay: { count: 2 },
-      label: expect.stringContaining("2 groups without a connection"),
-    });
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({ state: "offline", connectionCount: 0, disconnectedContextCount: 2 }),
-      }),
-    ).toMatchObject({
-      iconClass: "bi-cloud-slash-fill",
-    });
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({ state: "offline", connectionCount: 0, disconnectedContextCount: 2 }),
-      }).disconnectedGroupsOverlay,
-    ).toBeUndefined();
-  });
-
-  it("shows a green connected-groups count or red zero when the device is online", () => {
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({
-          state: "synced",
-          connectionCount: 2,
-          connectedContextCount: 3,
-        }),
-      }),
-    ).toMatchObject({
-      connectedGroupsOverlay: { count: 3, colorClass: "text-success" },
-      label: expect.stringContaining("3 groups connected"),
-    });
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({
-          state: "synced",
-          connectionCount: 1,
-          connectedContextCount: 0,
-        }),
-      }),
-    ).toMatchObject({
-      connectedGroupsOverlay: { count: 0, colorClass: "text-danger" },
-      label: expect.stringContaining("0 groups connected"),
-    });
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({
-          state: "offline",
-          connectionCount: 0,
-          connectedContextCount: 0,
-        }),
-      }).connectedGroupsOverlay,
-    ).toBeUndefined();
-  });
-
-  it("turns an offline indicator yellow when recovery is stuck and keeps the offline icon", () => {
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({ state: "offline", connectionCount: 0, stuckRecoveryCount: 2 }),
-      }),
-    ).toMatchObject({
-      iconClass: "bi-cloud-slash-fill",
-      colorClass: "text-warning",
-      label: expect.stringContaining("2 records need attention"),
-    });
-    expect(
-      getNetworkStatusPresentation({
-        availability: "ready",
-        status: status({ state: "error", errorCount: 1, stuckRecoveryCount: 2 }),
-      }).colorClass,
-    ).toBe("text-danger");
-  });
-});
-
-describe("withAppUpdate", () => {
-  const synced = getNetworkStatusPresentation({
-    availability: "ready",
-    status: status({ state: "synced" }),
-  });
-
-  it("leaves the presentation alone without an available update", () => {
-    expect(withAppUpdate(synced, undefined)).toBe(synced);
-    expect(withAppUpdate(synced, appUpdate({ state: "up-to-date" }))).toBe(synced);
-    expect(withAppUpdate(synced, appUpdate({ supported: false }))).toBe(synced);
-    expect(
-      withAppUpdate(
-        synced,
-        appUpdate({
-          state: "error",
-          latestVersion: "1.0.0",
-          downloadedVersion: undefined,
-          error: "feed unreachable",
-        }),
-      ),
-    ).toBe(synced);
-  });
-
-  it("keeps the update badge after a failed download while a newer version is known", () => {
-    const presentation = withAppUpdate(
-      synced,
-      appUpdate({ state: "error", downloadedVersion: undefined, error: "download failed" }),
-    );
-    expect(presentation.updateAvailableOverlay).toBe(true);
-    expect(presentation.label).toBe(
-      `${synced.label}; Version 1.1.0 is available. Update problem: download failed`,
-    );
-  });
-
-  it("adds the update badge and label while an update is available, downloading, or ready", () => {
-    for (const state of ["available", "downloading", "downloaded"] as const) {
-      const presentation = withAppUpdate(synced, appUpdate({ state }));
-      expect(presentation.updateAvailableOverlay).toBe(true);
-      expect(presentation.label).toMatch(/^Network synced; .*1\.1\.0/);
-      expect(presentation.colorClass).toBe(synced.colorClass);
-    }
-  });
-
-  it("applies offline too", () => {
-    const offline = getNetworkStatusPresentation({
-      availability: "ready",
-      status: status({ state: "offline", connectionCount: 0 }),
-    });
-    expect(withAppUpdate(offline, appUpdate()).updateAvailableOverlay).toBe(true);
-  });
-});
-
-describe("NetworkStatusIndicator", () => {
-  beforeEach(() => {
-    mockViewState = { availability: "loading" };
-    mockAppUpdate = undefined;
-    installUpdateAndRestart.mockReset();
-    installUpdateAndRestart.mockResolvedValue({ action: "installing" });
-    networkViewerSection("main");
-    getConnections.mockReset();
-    getConnections.mockResolvedValue({ connections: [] });
-    jest.clearAllMocks();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  it.each([
-    [{ availability: "loading" }, /Network status loading/],
-    [{ availability: "unavailable" }, /Network status unavailable/],
-    [
-      { availability: "ready", status: status({ state: "offline", connectionCount: 0 }) },
-      /Network offline/,
-    ],
-    [
-      {
-        availability: "ready",
-        status: status({ state: "syncing", syncingContextCount: 1 }),
-      },
-      /Network syncing/,
-    ],
-    [{ availability: "ready", status: status({ state: "synced" }) }, /Network synced/],
-    [
-      {
-        availability: "ready",
-        status: status({
-          state: "error",
-          errorCount: 1,
-          errors: [{ dataContextId: "context", message: "failed", occurredAt: 1 }],
-        }),
-      },
-      /Network error/,
-    ],
-  ] satisfies Array<
-    [INetworkStatusViewState, RegExp]
-  >)("renders an accessible state for %#", (viewState, accessibleName) => {
-    mockViewState = viewState;
-    const view = render(<NetworkStatusIndicator />);
-    expect(view.getByRole("button", { name: accessibleName })).toBeTruthy();
-  });
-
-  it("renders a compact green check-circle when synced and a solid red error dot", () => {
-    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
-    const view = render(<NetworkStatusIndicator />);
-    const syncedIcon = view.container.querySelector("i.bi-check-circle-fill");
-    expect(syncedIcon).toBeTruthy();
-    expect(syncedIcon).toHaveStyle({ fontSize: "0.7rem" });
-    expect(view.container.querySelector(".network-status-pulse-dot")).toBeNull();
-    expect(view.container.querySelector(".network-status-disconnected-count")).toBeNull();
-
-    mockViewState = {
-      availability: "ready",
-      status: status({
-        state: "error",
-        errorCount: 1,
-        errors: [{ dataContextId: "context", message: "failed", occurredAt: 1 }],
-      }),
-    };
-    view.rerender(<NetworkStatusIndicator />);
-    expect(view.container.querySelector(".bg-danger.rounded-circle")).toBeTruthy();
-  });
-
-  it("shows a bottom-left update badge and an Update & restart action when an update is ready", async () => {
-    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
-    const view = render(<NetworkStatusIndicator />);
-    expect(view.container.querySelector(".network-status-update-badge")).toBeNull();
-
-    mockAppUpdate = appUpdate();
-    view.rerender(<NetworkStatusIndicator />);
-    const badge = view.container.querySelector(".network-status-update-badge");
-    expect(badge).toHaveClass("bi-arrow-up-circle-fill", "text-warning");
-    expect(badge).toHaveStyle({ left: "-0.46rem", bottom: "-0.08rem" });
-
-    fireEvent.click(view.getByRole("button", { name: /Version 1\.1\.0 is ready to install/ }));
-    const section = view.getByTestId("app-update-section");
-    expect(section).toHaveTextContent("Installs automatically the next time Peers restarts");
-    fireEvent.click(view.getByRole("button", { name: /Update & restart/ }));
-    await waitFor(() => expect(installUpdateAndRestart).toHaveBeenCalledTimes(1));
-  });
-
-  it("omits the install-on-restart note when nothing is armed to install", async () => {
-    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
-    mockAppUpdate = appUpdate({ installOnRestart: false, installOnQuitArmed: false });
-    const view = render(<NetworkStatusIndicator />);
-    await openNetworkDetails(view, /ready to install/);
-    expect(view.getByTestId("app-update-section")).not.toHaveTextContent("Installs automatically");
-  });
-
-  it("shows a yellow disconnected-groups count when synced with offline groups", () => {
-    mockViewState = {
-      availability: "ready",
-      status: status({ state: "synced", disconnectedContextCount: 1 }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    expect(view.container.querySelector("i.bi-check-circle-fill")).toBeTruthy();
-    const overlay = view.container.querySelector(".network-status-disconnected-count.text-warning");
-    expect(overlay?.textContent).toBe("1");
-    expect(view.getByRole("button", { name: /1 group without a connection/ })).toBeTruthy();
-  });
-
-  it("shows a green connected-groups overlay when groups are live", () => {
-    mockViewState = {
-      availability: "ready",
-      status: status({
-        state: "synced",
-        connectionCount: 2,
-        connectedContextCount: 2,
-      }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    const overlay = view.container.querySelector(".network-status-connected-count.text-success");
-    expect(overlay?.textContent).toBe("2");
-  });
-
-  it("shows a red zero when the device is connected but no groups are live", () => {
-    mockViewState = {
-      availability: "ready",
-      status: status({
-        state: "synced",
-        connectionCount: 1,
-        connectedContextCount: 0,
-      }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    const overlay = view.container.querySelector(".network-status-connected-count.text-danger");
-    expect(overlay?.textContent).toBe("0");
-  });
-
-  it("hides the connected-groups overlay when fully offline", () => {
-    mockViewState = {
-      availability: "ready",
-      status: status({
-        state: "offline",
-        connectionCount: 0,
-        connectedContextCount: 0,
-      }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    expect(view.container.querySelector(".network-status-connected-count")).toBeNull();
-  });
-
-  it("does not show the disconnected-groups count when fully offline", () => {
-    mockViewState = {
-      availability: "ready",
-      status: status({
-        state: "offline",
-        connectionCount: 0,
-        disconnectedContextCount: 3,
-      }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    expect(view.container.querySelector("i.bi-cloud-slash-fill")).toBeTruthy();
-    expect(view.container.querySelector(".network-status-disconnected-count")).toBeNull();
-  });
-
-  it("uses a calm opacity pulse while syncing", () => {
-    mockViewState = {
-      availability: "ready",
-      status: status({ state: "syncing", syncingContextCount: 1 }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    const pulse = view.container.querySelector(".network-status-pulse-dot.bg-success");
-    expect(pulse).toHaveStyle({
-      animation: "peers-network-pulse-dot 2s ease-in-out infinite",
-    });
-  });
-
-  it("pulses green while syncing, then an indeterminate circle after the green window", () => {
-    jest.useFakeTimers();
-    mockViewState = {
-      availability: "ready",
-      status: status({ state: "syncing", syncingContextCount: 1 }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    expect(view.container.querySelector(".network-status-pulse-dot.bg-success")).toBeTruthy();
-
-    act(() => {
-      jest.advanceTimersByTime(SYNCING_GREEN_MS);
-    });
-    expect(view.container.querySelector(".spinner-border.text-primary")).toBeTruthy();
-    expect(view.container.querySelector(".network-status-pulse-dot")).toBeNull();
-  });
-
-  it("keeps the green syncing pulse through brief synced flaps until synced is stable", () => {
-    jest.useFakeTimers();
-    mockViewState = {
-      availability: "ready",
-      status: status({ state: "syncing", syncingContextCount: 1 }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    expect(view.container.querySelector(".network-status-pulse-dot.bg-success")).toBeTruthy();
-
-    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
-    view.rerender(<NetworkStatusIndicator />);
-    act(() => {
-      jest.advanceTimersByTime(SYNCED_STABLE_MS - 1);
-    });
-    expect(view.container.querySelector(".network-status-pulse-dot.bg-success")).toBeTruthy();
-    expect(view.container.querySelector("i.bi-check-circle-fill")).toBeNull();
-
-    mockViewState = {
-      availability: "ready",
-      status: status({ state: "syncing", syncingContextCount: 1 }),
-    };
-    view.rerender(<NetworkStatusIndicator />);
-    expect(view.container.querySelector(".network-status-pulse-dot.bg-success")).toBeTruthy();
-
-    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
-    view.rerender(<NetworkStatusIndicator />);
-    act(() => {
-      jest.advanceTimersByTime(SYNCED_STABLE_MS);
-    });
-    expect(view.container.querySelector("i.bi-check-circle-fill")).toBeTruthy();
-    expect(view.container.querySelector(".network-status-pulse-dot")).toBeNull();
-  });
-
-  it("lists connected devices in the details popover", async () => {
-    getConnections.mockResolvedValue({
-      connections: [
-        connection({
-          deviceId: "device-1",
-          userName: "Ada",
-          deviceName: "Laptop",
-          sharedGroups: ["g1", "g2"],
-        }),
-      ],
-    });
-    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
-    const view = render(<NetworkStatusIndicator />);
-    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
-
-    await waitFor(() => {
-      expect(view.getByRole("dialog", { name: "Network status details" })).toHaveTextContent("Ada");
-    });
-    expect(view.getByRole("dialog")).toHaveTextContent("Laptop");
-    expect(view.getByRole("dialog")).toHaveTextContent("2g");
-    expect(getConnections).toHaveBeenCalled();
-  });
-
-  it("shows middle-ellipsized ids when names are missing", async () => {
-    getConnections.mockResolvedValue({
-      connections: [
-        connection({
-          deviceId: "00mdeviceidabcdefghijklm",
-          userId: "00museridabcdefghijklmn",
-          userName: undefined,
-          deviceName: undefined,
-          sharedGroups: [],
-        }),
-      ],
-    });
-    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
-    const view = render(<NetworkStatusIndicator />);
-    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
-
-    await waitFor(() => {
-      expect(view.getByRole("dialog")).toHaveTextContent("00mu…klmn");
-    });
-    expect(view.getByRole("dialog")).toHaveTextContent("00md…jklm");
-  });
-
-  it("shows an empty connected-devices message when there are none", async () => {
-    getConnections.mockResolvedValue({ connections: [] });
-    mockViewState = {
-      availability: "ready",
-      status: status({ state: "offline", connectionCount: 0 }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    fireEvent.click(view.getByRole("button", { name: /Network offline/ }));
-
-    await waitFor(() => {
-      expect(view.getByRole("dialog")).toHaveTextContent("No connected devices");
-    });
-  });
-
-  it("shows an error when connected devices fail to load", async () => {
-    getConnections.mockRejectedValue(new Error("offline"));
-    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
-    const view = render(<NetworkStatusIndicator />);
-    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
-
-    await waitFor(() => {
-      expect(view.getByRole("dialog")).toHaveTextContent("Couldn't load devices");
-    });
-  });
-
-  it("offers shortcuts to use an invite and open the Identity account", () => {
-    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
-    const view = render(<NetworkStatusIndicator />);
-
-    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
-    expect(
-      view.getByRole("button", { name: "Use Invite" }).querySelector(".bi-qr-code"),
-    ).toBeTruthy();
-    expect(
-      view.getByRole("button", { name: "Identity" }).querySelector(".bi-person-badge"),
-    ).toBeTruthy();
-    fireEvent.click(view.getByRole("button", { name: "Use Invite" }));
-    expect(goToTabPath).toHaveBeenCalledWith(IDENTITY_ACCEPT_PATH);
-    expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
-
-    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
-    fireEvent.click(view.getByRole("button", { name: "Identity" }));
-    expect(goToTabPath).toHaveBeenCalledWith(IDENTITY_ACCOUNT_PATH);
-    expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
-  });
-
-  it("updates on rerender and opens details before navigating to Network Viewer", async () => {
-    const view = render(<NetworkStatusIndicator />);
-    expect(view.getByRole("button", { name: /loading/ })).toBeTruthy();
-
-    mockViewState = {
-      availability: "ready",
-      status: status({
-        state: "error",
-        connectionCount: 3,
-        errorCount: 1,
-        errors: [{ dataContextId: "context", message: "sync failed", occurredAt: 1 }],
-      }),
-    };
-    view.rerender(<NetworkStatusIndicator />);
-    fireEvent.click(view.getByRole("button", { name: /Network error/ }));
-
-    expect(view.getByRole("dialog", { name: "Network status details" })).toHaveTextContent(
-      "sync failed",
-    );
-    await waitFor(() => {
-      expect(getConnections).toHaveBeenCalled();
-    });
-    fireEvent.keyDown(document, { key: "Escape" });
-    expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
-
-    fireEvent.click(view.getByRole("button", { name: /Network error/ }));
-    fireEvent.click(view.getByRole("button", { name: "Open Network Viewer" }));
-    expect(goToTabPath).toHaveBeenCalledWith("network-viewer");
-    expect(networkViewerSection()).toBe("main");
-  });
-
-  it("hides zero problem counts and Sync recovery when nothing needs attention", async () => {
-    mockViewState = {
-      availability: "ready",
-      status: status({
-        state: "synced",
-        connectionCount: 4,
-        connectedContextCount: 5,
-        lastSuccessfulSyncAt: Date.parse("2026-09-27T16:00:00.000Z"),
-      }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    await openNetworkDetails(view, /Network synced/);
-
-    const labels = [...view.getByRole("dialog").querySelectorAll("dt")].map((el) => el.textContent);
-    expect(labels).toEqual(["Connections", "Groups connected", "Last sync"]);
-    expect(view.queryByRole("button", { name: "Sync recovery" })).toBeNull();
-  });
-
-  it("orders non-zero status rows and offers Sync recovery when records are stuck", async () => {
-    mockViewState = {
-      availability: "ready",
-      status: status({
-        state: "error",
-        connectionCount: 4,
-        connectedContextCount: 5,
-        disconnectedContextCount: 1,
-        syncingContextCount: 2,
-        errorCount: 3,
-        stuckRecoveryCount: 1,
-        lastSuccessfulSyncAt: Date.parse("2026-09-27T16:00:00.000Z"),
-        errors: [{ dataContextId: "context", message: "sync failed", occurredAt: 1 }],
-      }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    await openNetworkDetails(view, /Network error/);
-
-    const labels = [...view.getByRole("dialog").querySelectorAll("dt")].map((el) => el.textContent);
-    expect(labels).toEqual([
-      "Connections",
-      "Groups connected",
-      "Syncing contexts",
-      "Groups offline",
-      "Sync errors",
-      "Last sync",
-    ]);
-    const groupsOffline = view.getByText("Groups offline");
-    expect(groupsOffline.className).toContain("text-warning");
-    expect(groupsOffline.nextElementSibling?.textContent).toBe("1");
-    expect(groupsOffline.nextElementSibling?.className).toContain("text-warning");
-    expect(view.getByRole("button", { name: "Sync recovery" }).className).toContain("btn-warning");
-  });
-
-  it("opens Sync recovery inside the Network tab", async () => {
-    networkViewerSection("main");
-    mockViewState = {
-      availability: "ready",
-      status: status({ state: "synced", stuckRecoveryCount: 2 }),
-    };
-    const view = render(<NetworkStatusIndicator />);
-    await openNetworkDetails(view, /Network synced/);
-    fireEvent.click(view.getByRole("button", { name: "Sync recovery" }));
-
-    expect(networkViewerSection()).toBe("sync-recovery");
-    expect(goToTabPath).toHaveBeenCalledWith("network-viewer");
-    expect(goToTabPath).not.toHaveBeenCalledWith("sync-recovery");
-    expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
-  });
-});
-
-async function openNetworkDetails(view: ReturnType<typeof render>, name: RegExp): Promise<void> {
-  fireEvent.click(view.getByRole("button", { name }));
-  await waitFor(() => expect(getConnections).toHaveBeenCalled());
-  await act(async () => {
-    await Promise.resolve();
-  });
-}