@peers-app/peers-ui 0.25.8 → 0.25.9

package/src/screens/network-viewer/sync-recovery.tsx

@@ -0,0 +1,461 @@
+import type { INetworkSyncRecoveryEntry, SyncRecoveryResolution } from "@peers-app/peers-sdk";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { Popover } from "react-tiny-popover";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { getNetworkControlConsumer, getNetworkDiagnosticsConsumer } from "./network-viewer-ipc";
+
+/** Props for {@link SyncRecoveryScreen}. */
+interface ISyncRecoveryScreenProps {
+  /** Return to the Network Viewer overview. */
+  onBack: () => void;
+}
+
+function formatWhen(timestamp: number): string {
+  return new Date(timestamp).toLocaleString();
+}
+
+function statusLabel(entry: INetworkSyncRecoveryEntry): string {
+  if (entry.status === "retrying") {
+    return "Retrying";
+  }
+  if (entry.parkedReason === "schema") {
+    return "Parked, schema";
+  }
+  if (entry.parkedReason === "unique-conflict") {
+    return "Parked, conflict";
+  }
+  if (entry.parkedReason === "unresolvable") {
+    return "Parked, needs a decision";
+  }
+  return "Parked";
+}
+
+function statusExplanation(entry: INetworkSyncRecoveryEntry): string {
+  if (entry.status === "retrying") {
+    return "This device is still asking others for a copy it can write. The wait starts at one minute and doubles after each try, up to one hour. It is marked as needing attention after 5 tries spanning at least 10 minutes.";
+  }
+  if (entry.parkedReason === "schema") {
+    return "The saved change does not match this device's rules for the table — a missing field, an empty id, or an id in the wrong format. Every device has the same change, so asking them again will not help. It is tried again from history once each time this device starts, when a newer change arrives, and when you press Retry. After an upgrade that accepts the row, the next startup or Retry can write it.";
+  }
+  if (entry.parkedReason === "unique-conflict") {
+    return "Two records want the same unique value, such as one variable name. This table has no automatic way to choose a winner, so nothing is deleted until you pick an action.";
+  }
+  if (entry.parkedReason === "unresolvable") {
+    return "An automatic fix could not be applied safely — the other record was missing, more than one row matched, or the write failed. The rows were left as they are. Choose an action when you know which version should remain.";
+  }
+  return "This entry is waiting and is not being sent to other devices. Retry tries it again. The other actions clear it.";
+}
+
+/** Show a validation payload as indented JSON when the error ends with one. */
+function formatError(error: string): string {
+  const marker = error.search(/[[{]/);
+  if (marker < 0) {
+    return error;
+  }
+  const head = error.slice(0, marker).trimEnd();
+  try {
+    return `${head}\n${JSON.stringify(JSON.parse(error.slice(marker)), null, 2)}`;
+  } catch {
+    return error;
+  }
+}
+
+const detailsBlockStyle = {
+  maxHeight: "16.8em",
+  lineHeight: 1.4,
+  overflow: "auto",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+} as const;
+
+function errorSummary(error: string): string {
+  const line = error.split("\n")[0] ?? error;
+  return line.length > 80 ? `${line.slice(0, 77)}…` : line;
+}
+
+function InfoTip({ label, children }: { label: string; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Popover
+      isOpen={open}
+      positions={["bottom", "top", "left", "right"]}
+      align="start"
+      onClickOutside={() => setOpen(false)}
+      content={() => (
+        <div
+          className="card p-2 shadow small"
+          style={{ maxWidth: 420, zIndex: 1000001, textAlign: "left" }}
+        >
+          {children}
+        </div>
+      )}
+    >
+      <button
+        type="button"
+        className="btn btn-link btn-sm p-0 ms-1 align-baseline text-info"
+        aria-label={label}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <i className="bi bi-info-circle" />
+      </button>
+    </Popover>
+  );
+}
+
+function RecoveryRows({
+  entry,
+  busy,
+  onRun,
+}: {
+  entry: INetworkSyncRecoveryEntry;
+  busy: boolean;
+  onRun: (entry: INetworkSyncRecoveryEntry, action: "retry" | SyncRecoveryResolution) => void;
+}) {
+  const [recordOpen, setRecordOpen] = useState(false);
+  const [errorOpen, setErrorOpen] = useState(false);
+  return (
+    <>
+      <tr>
+        <td>{entry.tableName}</td>
+        <td>
+          <code title={entry.recordId}>{entry.recordId}</code>
+          {entry.recordSummary && (
+            <div className="small text-muted" style={{ maxWidth: 220 }}>
+              {entry.recordSummary}
+            </div>
+          )}
+          <button
+            type="button"
+            className="btn btn-link btn-sm p-0"
+            aria-label={recordOpen ? "Hide record details" : "Show record details"}
+            onClick={() => setRecordOpen((current) => !current)}
+          >
+            {recordOpen ? "Hide details" : "Details"}
+          </button>
+        </td>
+        <td className="text-nowrap small">{formatWhen(entry.firstFailedAt)}</td>
+        <td>{entry.attemptCount}</td>
+        <td className="text-nowrap">
+          {statusLabel(entry)}
+          <InfoTip label={`About status ${statusLabel(entry)}`}>{statusExplanation(entry)}</InfoTip>
+        </td>
+        <td>
+          <div className="small text-muted" style={{ maxWidth: 220 }}>
+            {errorSummary(entry.latestError)}
+          </div>
+          <button
+            type="button"
+            className="btn btn-link btn-sm p-0"
+            aria-label={errorOpen ? "Hide error details" : "Show error details"}
+            onClick={() => setErrorOpen((current) => !current)}
+          >
+            {errorOpen ? "Hide details" : "Details"}
+          </button>
+        </td>
+        <td>
+          <div className="d-flex flex-column gap-1">
+            <button
+              type="button"
+              className="btn btn-sm btn-outline-primary"
+              disabled={busy}
+              onClick={() => onRun(entry, "retry")}
+            >
+              Retry
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm btn-outline-primary"
+              disabled={busy || !entry.localRowExists}
+              title={
+                entry.localRowExists
+                  ? "Write this device's row as a snapshot every device will adopt"
+                  : "This device has no row to keep"
+              }
+              onClick={() => onRun(entry, "keepLocal")}
+            >
+              Keep this device's version
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm btn-outline-danger"
+              disabled={busy}
+              onClick={() => onRun(entry, "deleteEverywhere")}
+            >
+              Delete everywhere
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm btn-outline-secondary"
+              disabled={busy}
+              title="Removes the entry on this device only. Other devices keep theirs."
+              onClick={() => onRun(entry, "ignoreLocal")}
+            >
+              Ignore on this device
+            </button>
+          </div>
+        </td>
+      </tr>
+      {(errorOpen || recordOpen) && (
+        <tr>
+          <td colSpan={7} className="bg-body-tertiary">
+            {errorOpen && (
+              <pre className="small mb-0 font-monospace" style={detailsBlockStyle}>
+                {formatError(entry.latestError)}
+              </pre>
+            )}
+            {recordOpen && (
+              <div className={errorOpen ? "mt-3" : undefined}>
+                {entry.changeCreatedAt != null && (
+                  <p className="small mb-2">Change written {formatWhen(entry.changeCreatedAt)}</p>
+                )}
+                {entry.conflictingRecordId && (
+                  <p className="small mb-2">
+                    Another record holds the same unique value:{" "}
+                    <code>{entry.conflictingRecordId}</code>
+                  </p>
+                )}
+                {entry.tombstoneRecordId &&
+                  entry.tombstoneRecordId === entry.conflictingRecordId && (
+                    <p className="small mb-2">
+                      Keep deletes <code>{entry.tombstoneRecordId}</code> on every device.
+                    </p>
+                  )}
+                {entry.tombstoneRecordId && entry.tombstoneRecordId === entry.recordId && (
+                  <p className="small mb-2">
+                    Keep snapshots the other record and tombstones this queued id.
+                  </p>
+                )}
+                {entry.keptRecordPreview && (
+                  <>
+                    <p className="small mb-1">This device's version</p>
+                    <pre className="small mb-2 font-monospace" style={detailsBlockStyle}>
+                      {entry.keptRecordPreview}
+                    </pre>
+                  </>
+                )}
+                {entry.queuedRecordPreview && (
+                  <>
+                    <p className="small mb-1">Queued change</p>
+                    <pre className="small mb-0 font-monospace" style={detailsBlockStyle}>
+                      {entry.queuedRecordPreview}
+                    </pre>
+                  </>
+                )}
+                {!entry.keptRecordPreview && !entry.queuedRecordPreview && entry.recordPreview && (
+                  <pre className="small mb-0 font-monospace" style={detailsBlockStyle}>
+                    {entry.recordPreview}
+                  </pre>
+                )}
+                {!entry.keptRecordPreview && !entry.queuedRecordPreview && !entry.recordPreview && (
+                  <p className="small text-muted mb-0">
+                    This device has no stored copy of the record. The latest error may still quote
+                    the rejected value.
+                  </p>
+                )}
+              </div>
+            )}
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+/** Lists recovery-queue entries and the actions that resolve them. */
+export function SyncRecoveryScreen({ onBack }: ISyncRecoveryScreenProps) {
+  const [entries, setEntries] = useState<INetworkSyncRecoveryEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [busyKey, setBusyKey] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const loadGeneration = useRef(0);
+
+  const load = useCallback(async (preserveError = false) => {
+    const generation = ++loadGeneration.current;
+    try {
+      const diagnostics = await getNetworkDiagnosticsConsumer();
+      const result = await diagnostics.tools.getSyncRecoveryEntries();
+      if (generation !== loadGeneration.current) {
+        return;
+      }
+      setEntries(result.entries);
+      if (!preserveError) {
+        setError(null);
+      }
+    } catch (loadError) {
+      if (generation !== loadGeneration.current) {
+        return;
+      }
+      setError(loadError instanceof Error ? loadError.message : String(loadError));
+    } finally {
+      if (generation === loadGeneration.current) {
+        setLoading(false);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  useEffect(() => {
+    let active = true;
+    let subscription: { dispose(): void } | undefined;
+    void getNetworkDiagnosticsConsumer().then((diagnostics) => {
+      if (!active) {
+        return;
+      }
+      subscription = diagnostics.observables?.status.subscribe(() => {
+        void load();
+      });
+    });
+    return () => {
+      active = false;
+      subscription?.dispose();
+    };
+  }, [load]);
+
+  const run = async (
+    entry: INetworkSyncRecoveryEntry,
+    action: "retry" | SyncRecoveryResolution,
+  ) => {
+    if (action === "deleteEverywhere") {
+      const confirmed = window.confirm(
+        `Delete ${entry.tableName}/${entry.recordId} on every device? This writes a synced delete.`,
+      );
+      if (!confirmed) {
+        return;
+      }
+    }
+    const key = `${entry.dataContextId}:${entry.syncRecoveryId}:${action}`;
+    setBusyKey(key);
+    setError(null);
+    try {
+      const control = await getNetworkControlConsumer();
+      const result =
+        action === "retry"
+          ? await control.tools.retrySyncRecovery({
+              dataContextId: entry.dataContextId,
+              tableName: entry.tableName,
+              recordId: entry.recordId,
+              syncRecoveryId: entry.syncRecoveryId,
+            })
+          : await control.tools.resolveSyncRecovery({
+              dataContextId: entry.dataContextId,
+              tableName: entry.tableName,
+              recordId: entry.recordId,
+              resolution: action,
+              syncRecoveryId: entry.syncRecoveryId,
+            });
+      if (!result.success) {
+        setError(result.message);
+        await load(true);
+      } else {
+        setError(null);
+        await load();
+      }
+    } catch (actionError) {
+      setError(actionError instanceof Error ? actionError.message : String(actionError));
+    } finally {
+      setBusyKey(null);
+    }
+  };
+
+  if (loading) {
+    return <LoadingIndicator />;
+  }
+
+  const groups = new Map<string, INetworkSyncRecoveryEntry[]>();
+  for (const entry of entries) {
+    const group = groups.get(entry.dataContextId) ?? [];
+    group.push(entry);
+    groups.set(entry.dataContextId, group);
+  }
+
+  return (
+    <div className="container-fluid p-4">
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <div className="d-flex align-items-center gap-3">
+          <button type="button" className="btn btn-sm btn-outline-secondary" onClick={onBack}>
+            <i className="bi bi-arrow-left me-1" />
+            Back
+          </button>
+          <div>
+            <h2 className="mb-1">Sync recovery</h2>
+            <p className="text-muted small mb-0">
+              These records have change history, but this device could not write the row. Parked
+              entries are not asked of other devices until you retry them.
+            </p>
+          </div>
+        </div>
+        <button type="button" className="btn btn-sm btn-primary" onClick={() => void load()}>
+          Refresh
+        </button>
+      </div>
+      {error && <div className="alert alert-danger py-2 small">{error}</div>}
+      {entries.length === 0 ? (
+        <div className="alert alert-success">No records are waiting in the recovery queue.</div>
+      ) : (
+        [...groups.entries()].map(([dataContextId, groupEntries]) => (
+          <div key={dataContextId} className="card mb-3">
+            <div className="card-header">{groupEntries[0]?.dataContextName || dataContextId}</div>
+            <div className="table-responsive">
+              <table className="table table-sm align-middle mb-0">
+                <thead>
+                  <tr>
+                    <th>Table</th>
+                    <th>Record</th>
+                    <th>First failed</th>
+                    <th>Attempts</th>
+                    <th>Status</th>
+                    <th>Latest error</th>
+                    <th>
+                      Actions
+                      <InfoTip label="About these actions">
+                        <ul className="mb-0 ps-3">
+                          <li>
+                            <strong>Retry</strong> writes the record again from this device's
+                            history, then asks another device once. If a schema or unique-key entry
+                            is still queued after that, it is parked again. Use it after an upgrade
+                            that might accept a row this device rejected before.
+                          </li>
+                          <li>
+                            <strong>Keep this device's version</strong> snapshots the row this
+                            device will keep. That is the queued row when it is already stored here,
+                            and otherwise the other row that holds the same unique value. When both
+                            rows are stored, the other record is deleted everywhere. When only the
+                            other row is stored, that row is kept and this queued id is tombstoned.
+                            Disabled when this device has no row to keep.
+                          </li>
+                          <li>
+                            <strong>Delete everywhere</strong> deletes this record on every device,
+                            including devices that already have it.
+                          </li>
+                          <li>
+                            <strong>Ignore on this device</strong> removes the entry here only.
+                            Other devices keep their own copy of the problem.
+                          </li>
+                        </ul>
+                      </InfoTip>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {groupEntries.map((entry) => (
+                    <RecoveryRows
+                      key={entry.syncRecoveryId}
+                      entry={entry}
+                      busy={Boolean(
+                        busyKey?.startsWith(`${entry.dataContextId}:${entry.syncRecoveryId}:`),
+                      )}
+                      onRun={(item, action) => void run(item, action)}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

package/src/screens/settings/settings-page.tsx

@@ -17,6 +17,7 @@ import { useObservable, usePromise } from "../../hooks";
 import { LayoutPicker } from "../../root-layout/layout-picker";
 import { identityTools } from "../device-pairing/identity-ipc";
 import { IDENTITY_ACCOUNT_PATH, IDENTITY_PAIR_PATH } from "../identity/identity-routes";
+import { getNetworkControlConsumer } from "../network-viewer/network-viewer-ipc";
 import { ColorModeDropdown } from "./color-mode-dropdown";
 
 /** Electron file picker attaches a filesystem path on `File`. */
@@ -262,10 +263,15 @@ const ResetDeviceSyncInfos: React.FC = () => {
         className="btn btn-secondary btn-sm ms-2"
         onClick={async () => {
           try {
-            await rpcServerCalls.resetAllDeviceSyncInfo();
+            const result = await (await getNetworkControlConsumer()).tools.resetDeviceSyncInfo();
+            if (!result.success) {
+              alert(result.message);
+              return;
+            }
             alert("All device sync info has been reset.  Syncing in progress...");
           } catch (err) {
             console.error("Error while resetting all device sync info", err);
+            alert(`Failed to reset device sync info: ${(err as Error).message || String(err)}`);
           }
         }}
       >
@@ -362,9 +368,9 @@ const ResetChangeTracking: React.FC = () => {
     <div className="mt-4 pt-3 border-top">
       <h6 className="mb-2">Change tracking</h6>
       <small className="text-muted d-block mb-2">
-        Clears all change history for the current group and rebuilds it from your current database
-        rows. Device sync cursors are cleared; a full resync with peers may follow. Use when
-        debugging sync issues.
+        Clears change history for every personal and group context on this device and rebuilds it
+        from current rows. Device sync cursors are cleared; a full resync with peers may follow. Use
+        when debugging sync issues.
       </small>
       <button
         className="btn btn-warning btn-sm"
@@ -376,7 +382,11 @@ const ResetChangeTracking: React.FC = () => {
           if (!confirmed) return;
           setBusy(true);
           try {
-            await rpcServerCalls.resetChangeTracking();
+            const result = await (await getNetworkControlConsumer()).tools.resetChangeTracking();
+            if (!result.success) {
+              alert(result.message);
+              return;
+            }
             await rpcServerCalls.flushDatabases();
             alert("Change tracking reset successfully.");
           } catch (err) {

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

@@ -3,6 +3,7 @@ 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,
@@ -42,6 +43,7 @@ function status(overrides: Partial<INetworkStatusSummary>): INetworkStatusSummar
     errorCount: 0,
     disconnectedContextCount: 0,
     connectedContextCount: 0,
+    stuckRecoveryCount: 0,
     errors: [],
     ...overrides,
   };
@@ -153,6 +155,38 @@ describe("getNetworkStatusPresentation", () => {
     );
   });
 
+  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(
@@ -230,11 +264,31 @@ describe("getNetworkStatusPresentation", () => {
       }).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("NetworkStatusIndicator", () => {
   beforeEach(() => {
     mockViewState = { availability: "loading" };
+    networkViewerSection("main");
     getConnections.mockReset();
     getConnections.mockResolvedValue({ connections: [] });
     jest.clearAllMocks();
@@ -546,5 +600,82 @@ describe("NetworkStatusIndicator", () => {
     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();
+  });
+}