@peers-app/peers-ui 0.25.8 → 0.25.9

package/dist/screens/network-viewer/network-viewer-section.d.ts

@@ -0,0 +1,9 @@
+/** Pane shown inside the Network Viewer tab. */
+export type NetworkViewerSection = "main" | "sync-recovery";
+/**
+ * Which Network Viewer pane is showing.
+ *
+ * The status overlay sets this before focusing the Network tab, so Sync recovery
+ * opens inside that tab instead of replacing whatever screen is current.
+ */
+export declare const networkViewerSection: import("@peers-app/peers-sdk").Observable<NetworkViewerSection>;

package/dist/screens/network-viewer/network-viewer-section.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.networkViewerSection = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+/**
+ * Which Network Viewer pane is showing.
+ *
+ * The status overlay sets this before focusing the Network tab, so Sync recovery
+ * opens inside that tab instead of replacing whatever screen is current.
+ */
+exports.networkViewerSection = (0, peers_sdk_1.observable)("main");

package/dist/screens/network-viewer/network-viewer.d.ts

@@ -1 +1,7 @@
+/**
+ * Network Viewer screen.
+ *
+ * Shows connections, group sync, and disconnected devices, and hosts the
+ * Sync Recovery pane selected from the network status indicator.
+ */
 export declare function NetworkViewerList(): import("react/jsx-runtime").JSX.Element;

package/dist/screens/network-viewer/network-viewer.js

@@ -6,11 +6,14 @@ const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
+const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
 const connection_troubleshooter_1 = require("./connection-troubleshooter");
 const device_details_modal_1 = require("./device-details-modal");
 const group_details_modal_1 = require("./group-details-modal");
 const network_viewer_ipc_1 = require("./network-viewer-ipc");
+const network_viewer_section_1 = require("./network-viewer-section");
+const sync_recovery_1 = require("./sync-recovery");
 const usage_graph_1 = require("./usage-graph");
 /** Format bytes to human-readable string (KB, MB, GB) */
 function formatBytes(bytes) {
@@ -33,6 +36,12 @@ function formatRate(mbps) {
     }
     return `${mbps.toFixed(2)} MB/s`;
 }
+/**
+ * Network Viewer screen.
+ *
+ * Shows connections, group sync, and disconnected devices, and hosts the
+ * Sync Recovery pane selected from the network status indicator.
+ */
 function NetworkViewerList() {
     const [overview, setOverview] = (0, react_1.useState)(null);
     const [connections, setConnections] = (0, react_1.useState)([]);
@@ -44,6 +53,7 @@ function NetworkViewerList() {
     const [selectedGroupId, setSelectedGroupId] = (0, react_1.useState)(null);
     const [connecting, setConnecting] = (0, react_1.useState)(new Set());
     const [showTroubleshooter, setShowTroubleshooter] = (0, react_1.useState)(false);
+    const [viewerSection] = (0, hooks_1.useObservable)(network_viewer_section_1.networkViewerSection);
     const loadData = (0, react_1.useCallback)(async () => {
         try {
             const diagnostics = await (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)();
@@ -151,6 +161,14 @@ function NetworkViewerList() {
         const interval = setInterval(loadData, 5000);
         return () => clearInterval(interval);
     }, [loadData]);
+    (0, react_1.useEffect)(() => {
+        if (viewerSection === "sync-recovery") {
+            setShowTroubleshooter(false);
+        }
+    }, [viewerSection]);
+    if (viewerSection === "sync-recovery") {
+        return (0, jsx_runtime_1.jsx)(sync_recovery_1.SyncRecoveryScreen, { onBack: () => (0, network_viewer_section_1.networkViewerSection)("main") });
+    }
     if (loading) {
         return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
@@ -160,7 +178,7 @@ function NetworkViewerList() {
     if (showTroubleshooter) {
         return (0, jsx_runtime_1.jsx)(connection_troubleshooter_1.ConnectionTroubleshooter, { onBack: () => setShowTroubleshooter(false) });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Network Viewer" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, network_viewer_ipc_1.getNetworkViewerPlatformApi)()?.runDiagnostics && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-warning", onClick: () => setShowTroubleshooter(true), title: "Run connection diagnostics", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-stethoscope me-1" }), "Troubleshoot"] })), (0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-primary", onClick: handleRefresh, disabled: refreshing, children: [(0, jsx_runtime_1.jsx)("i", { className: `bi bi-arrow-clockwise ${refreshing ? "spin" : ""}` }), refreshing ? " Refreshing..." : " Refresh"] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Local Device" }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device ID:" }), " ", (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: overview.localDeviceId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("strong", { children: "User ID:" }), " ", (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: overview.localUserId })] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "row mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-md-4", children: (0, jsx_runtime_1.jsx)("div", { className: "card", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-2", children: (0, jsx_runtime_1.jsx)(usage_graph_1.UsageGraph, { label: "Connections", fetchUsage: async () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Network Viewer" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, network_viewer_ipc_1.getNetworkViewerPlatformApi)()?.runDiagnostics && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-warning", onClick: () => setShowTroubleshooter(true), title: "Run connection diagnostics", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-stethoscope me-1" }), "Troubleshoot"] })), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-secondary", onClick: () => (0, network_viewer_section_1.networkViewerSection)("sync-recovery"), title: "Records that could not be materialized", children: "Sync recovery" }), (0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-primary", onClick: handleRefresh, disabled: refreshing, children: [(0, jsx_runtime_1.jsx)("i", { className: `bi bi-arrow-clockwise ${refreshing ? "spin" : ""}` }), refreshing ? " Refreshing..." : " Refresh"] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Local Device" }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device ID:" }), " ", (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: overview.localDeviceId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("strong", { children: "User ID:" }), " ", (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: overview.localUserId })] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "row mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-md-4", children: (0, jsx_runtime_1.jsx)("div", { className: "card", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-2", children: (0, jsx_runtime_1.jsx)(usage_graph_1.UsageGraph, { label: "Connections", fetchUsage: async () => {
                                         const diagnostics = await (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)();
                                         const { overview: currentOverview } = await diagnostics.tools.getOverview();
                                         return currentOverview.totalConnections;

package/dist/screens/network-viewer/network-viewer.section.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/screens/network-viewer/network-viewer.section.test.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const network_viewer_1 = require("./network-viewer");
+const network_viewer_section_1 = require("./network-viewer-section");
+jest.mock("../../ui-router/ui-loader", () => ({
+    registerInternalPeersUI: jest.fn(),
+}));
+jest.mock("./network-viewer-ipc", () => ({
+    getNetworkDiagnosticsConsumer: async () => ({
+        tools: {
+            getOverview: async () => ({
+                overview: {
+                    localDeviceId: "device",
+                    localUserId: "user",
+                    totalConnections: 0,
+                    availableSlots: 8,
+                    maxConnections: 8,
+                    cpuPercent: 0,
+                    memPercent: 0,
+                    groups: [],
+                },
+            }),
+            getConnections: async () => ({ connections: [] }),
+            getGroupSyncStatus: async () => ({ groups: [] }),
+            getDisconnectedDevices: async () => ({ devices: [] }),
+            getSyncRecoveryEntries: async () => ({ entries: [] }),
+        },
+        observables: {
+            status: {
+                subscribe: () => ({ dispose() { } }),
+            },
+        },
+    }),
+    getNetworkControlConsumer: async () => ({ tools: {} }),
+    getNetworkViewerPlatformApi: () => undefined,
+}));
+describe("Network Viewer sections", () => {
+    beforeEach(() => {
+        (0, network_viewer_section_1.networkViewerSection)("main");
+    });
+    it("shows Sync recovery in place and returns to the overview", async () => {
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_viewer_1.NetworkViewerList, {}));
+        await (0, react_1.waitFor)(() => {
+            expect(view.getByRole("heading", { name: "Network Viewer" })).toBeTruthy();
+        });
+        react_1.fireEvent.click(view.getByRole("button", { name: "Sync recovery" }));
+        expect(await view.findByRole("heading", { name: "Sync recovery" })).toBeTruthy();
+        expect(view.queryByRole("heading", { name: "Network Viewer" })).toBeNull();
+        react_1.fireEvent.click(view.getByRole("button", { name: "Back" }));
+        expect(view.getByRole("heading", { name: "Network Viewer" })).toBeTruthy();
+        view.unmount();
+    });
+    it("opens on Sync recovery when the overlay selects that pane", async () => {
+        (0, network_viewer_section_1.networkViewerSection)("sync-recovery");
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_viewer_1.NetworkViewerList, {}));
+        expect(await view.findByRole("heading", { name: "Sync recovery" })).toBeTruthy();
+        expect(await view.findByText("No records are waiting in the recovery queue.")).toBeTruthy();
+        expect(view.queryByRole("heading", { name: "Network Viewer" })).toBeNull();
+        view.unmount();
+    });
+});

package/dist/screens/network-viewer/sync-recovery.d.ts

@@ -0,0 +1,8 @@
+/** Props for {@link SyncRecoveryScreen}. */
+interface ISyncRecoveryScreenProps {
+    /** Return to the Network Viewer overview. */
+    onBack: () => void;
+}
+/** Lists recovery-queue entries and the actions that resolve them. */
+export declare function SyncRecoveryScreen({ onBack }: ISyncRecoveryScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/screens/network-viewer/sync-recovery.js

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SyncRecoveryScreen = SyncRecoveryScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_tiny_popover_1 = require("react-tiny-popover");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const network_viewer_ipc_1 = require("./network-viewer-ipc");
+function formatWhen(timestamp) {
+    return new Date(timestamp).toLocaleString();
+}
+function statusLabel(entry) {
+    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) {
+    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) {
+    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",
+};
+function errorSummary(error) {
+    const line = error.split("\n")[0] ?? error;
+    return line.length > 80 ? `${line.slice(0, 77)}…` : line;
+}
+function InfoTip({ label, children }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(react_tiny_popover_1.Popover, { isOpen: open, positions: ["bottom", "top", "left", "right"], align: "start", onClickOutside: () => setOpen(false), content: () => ((0, jsx_runtime_1.jsx)("div", { className: "card p-2 shadow small", style: { maxWidth: 420, zIndex: 1000001, textAlign: "left" }, children: children })), children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-link btn-sm p-0 ms-1 align-baseline text-info", "aria-label": label, onClick: () => setOpen((current) => !current), children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-info-circle" }) }) }));
+}
+function RecoveryRows({ entry, busy, onRun, }) {
+    const [recordOpen, setRecordOpen] = (0, react_1.useState)(false);
+    const [errorOpen, setErrorOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: entry.tableName }), (0, jsx_runtime_1.jsxs)("td", { children: [(0, jsx_runtime_1.jsx)("code", { title: entry.recordId, children: entry.recordId }), entry.recordSummary && ((0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { maxWidth: 220 }, children: entry.recordSummary })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-link btn-sm p-0", "aria-label": recordOpen ? "Hide record details" : "Show record details", onClick: () => setRecordOpen((current) => !current), children: recordOpen ? "Hide details" : "Details" })] }), (0, jsx_runtime_1.jsx)("td", { className: "text-nowrap small", children: formatWhen(entry.firstFailedAt) }), (0, jsx_runtime_1.jsx)("td", { children: entry.attemptCount }), (0, jsx_runtime_1.jsxs)("td", { className: "text-nowrap", children: [statusLabel(entry), (0, jsx_runtime_1.jsx)(InfoTip, { label: `About status ${statusLabel(entry)}`, children: statusExplanation(entry) })] }), (0, jsx_runtime_1.jsxs)("td", { children: [(0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { maxWidth: 220 }, children: errorSummary(entry.latestError) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-link btn-sm p-0", "aria-label": errorOpen ? "Hide error details" : "Show error details", onClick: () => setErrorOpen((current) => !current), children: errorOpen ? "Hide details" : "Details" })] }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-column gap-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-primary", disabled: busy, onClick: () => onRun(entry, "retry"), children: "Retry" }), (0, jsx_runtime_1.jsx)("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"), children: "Keep this device's version" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-danger", disabled: busy, onClick: () => onRun(entry, "deleteEverywhere"), children: "Delete everywhere" }), (0, jsx_runtime_1.jsx)("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"), children: "Ignore on this device" })] }) })] }), (errorOpen || recordOpen) && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { colSpan: 7, className: "bg-body-tertiary", children: [errorOpen && ((0, jsx_runtime_1.jsx)("pre", { className: "small mb-0 font-monospace", style: detailsBlockStyle, children: formatError(entry.latestError) })), recordOpen && ((0, jsx_runtime_1.jsxs)("div", { className: errorOpen ? "mt-3" : undefined, children: [entry.changeCreatedAt != null && ((0, jsx_runtime_1.jsxs)("p", { className: "small mb-2", children: ["Change written ", formatWhen(entry.changeCreatedAt)] })), entry.conflictingRecordId && ((0, jsx_runtime_1.jsxs)("p", { className: "small mb-2", children: ["Another record holds the same unique value:", " ", (0, jsx_runtime_1.jsx)("code", { children: entry.conflictingRecordId })] })), entry.tombstoneRecordId &&
+                                    entry.tombstoneRecordId === entry.conflictingRecordId && ((0, jsx_runtime_1.jsxs)("p", { className: "small mb-2", children: ["Keep deletes ", (0, jsx_runtime_1.jsx)("code", { children: entry.tombstoneRecordId }), " on every device."] })), entry.tombstoneRecordId && entry.tombstoneRecordId === entry.recordId && ((0, jsx_runtime_1.jsx)("p", { className: "small mb-2", children: "Keep snapshots the other record and tombstones this queued id." })), entry.keptRecordPreview && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "small mb-1", children: "This device's version" }), (0, jsx_runtime_1.jsx)("pre", { className: "small mb-2 font-monospace", style: detailsBlockStyle, children: entry.keptRecordPreview })] })), entry.queuedRecordPreview && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "small mb-1", children: "Queued change" }), (0, jsx_runtime_1.jsx)("pre", { className: "small mb-0 font-monospace", style: detailsBlockStyle, children: entry.queuedRecordPreview })] })), !entry.keptRecordPreview && !entry.queuedRecordPreview && entry.recordPreview && ((0, jsx_runtime_1.jsx)("pre", { className: "small mb-0 font-monospace", style: detailsBlockStyle, children: entry.recordPreview })), !entry.keptRecordPreview && !entry.queuedRecordPreview && !entry.recordPreview && ((0, jsx_runtime_1.jsx)("p", { className: "small text-muted mb-0", children: "This device has no stored copy of the record. The latest error may still quote the rejected value." }))] }))] }) }))] }));
+}
+/** Lists recovery-queue entries and the actions that resolve them. */
+function SyncRecoveryScreen({ onBack }) {
+    const [entries, setEntries] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [busyKey, setBusyKey] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const loadGeneration = (0, react_1.useRef)(0);
+    const load = (0, react_1.useCallback)(async (preserveError = false) => {
+        const generation = ++loadGeneration.current;
+        try {
+            const diagnostics = await (0, network_viewer_ipc_1.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);
+            }
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        void load();
+    }, [load]);
+    (0, react_1.useEffect)(() => {
+        let active = true;
+        let subscription;
+        void (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)().then((diagnostics) => {
+            if (!active) {
+                return;
+            }
+            subscription = diagnostics.observables?.status.subscribe(() => {
+                void load();
+            });
+        });
+        return () => {
+            active = false;
+            subscription?.dispose();
+        };
+    }, [load]);
+    const run = async (entry, action) => {
+        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 (0, network_viewer_ipc_1.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 (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
+    }
+    const groups = new Map();
+    for (const entry of entries) {
+        const group = groups.get(entry.dataContextId) ?? [];
+        group.push(entry);
+        groups.set(entry.dataContextId, group);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-sm btn-outline-secondary", onClick: onBack, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-left me-1" }), "Back"] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-1", children: "Sync recovery" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small mb-0", children: "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." })] })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-primary", onClick: () => void load(), children: "Refresh" })] }), error && (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger py-2 small", children: error }), entries.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-success", children: "No records are waiting in the recovery queue." })) : ([...groups.entries()].map(([dataContextId, groupEntries]) => ((0, jsx_runtime_1.jsxs)("div", { className: "card mb-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "card-header", children: groupEntries[0]?.dataContextName || dataContextId }), (0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-sm align-middle mb-0", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Table" }), (0, jsx_runtime_1.jsx)("th", { children: "Record" }), (0, jsx_runtime_1.jsx)("th", { children: "First failed" }), (0, jsx_runtime_1.jsx)("th", { children: "Attempts" }), (0, jsx_runtime_1.jsx)("th", { children: "Status" }), (0, jsx_runtime_1.jsx)("th", { children: "Latest error" }), (0, jsx_runtime_1.jsxs)("th", { children: ["Actions", (0, jsx_runtime_1.jsx)(InfoTip, { label: "About these actions", children: (0, jsx_runtime_1.jsxs)("ul", { className: "mb-0 ps-3", children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Retry" }), " 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."] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Keep this device's version" }), " 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."] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Delete everywhere" }), " deletes this record on every device, including devices that already have it."] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Ignore on this device" }), " removes the entry here only. Other devices keep their own copy of the problem."] })] }) })] })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: groupEntries.map((entry) => ((0, jsx_runtime_1.jsx)(RecoveryRows, { entry: entry, busy: Boolean(busyKey?.startsWith(`${entry.dataContextId}:${entry.syncRecoveryId}:`)), onRun: (item, action) => void run(item, action) }, entry.syncRecoveryId))) })] }) })] }, dataContextId))))] }));
+}

package/dist/screens/network-viewer/sync-recovery.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/screens/network-viewer/sync-recovery.test.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const sync_recovery_1 = require("./sync-recovery");
+const mockResolveSyncRecovery = jest.fn(async () => ({
+    success: false,
+    message: "Permission denied for Shared Group: requires Owner",
+}));
+jest.mock("./network-viewer-ipc", () => ({
+    getNetworkDiagnosticsConsumer: async () => ({
+        tools: {
+            getSyncRecoveryEntries: async () => ({
+                entries: [
+                    {
+                        dataContextId: "personal",
+                        dataContextName: "Personal",
+                        syncRecoveryId: "queue-1",
+                        tableName: "Messages",
+                        recordId: "00mflddy2sbk393s47smn4tgl",
+                        firstFailedAt: Date.parse("2026-09-10T17:16:02Z"),
+                        lastFailedAt: Date.parse("2026-09-10T17:16:02Z"),
+                        attemptCount: 3,
+                        latestError: 'Validation on insert failed for Messages: [{"code":"custom","message":"assistant id was empty","path":["assistantId"]}]',
+                        status: "parked",
+                        parkedReason: "schema",
+                        stuck: true,
+                        localRowExists: false,
+                        recordSummary: "hello from the stored message",
+                        queuedRecordPreview: '{\n  "message": "hello from the stored message"\n}',
+                        recordPreview: '{\n  "message": "hello from the stored message"\n}',
+                        changeCreatedAt: Date.parse("2026-09-10T17:16:02Z"),
+                    },
+                    {
+                        dataContextId: "personal",
+                        dataContextName: "Personal",
+                        syncRecoveryId: "queue-2",
+                        tableName: "UniqueNames",
+                        recordId: "00mflddy2sbk393s47smn4tgm",
+                        firstFailedAt: Date.parse("2026-09-10T17:16:02Z"),
+                        lastFailedAt: Date.parse("2026-09-10T17:16:02Z"),
+                        attemptCount: 1,
+                        latestError: "UNIQUE constraint failed: UniqueNames.name",
+                        status: "parked",
+                        parkedReason: "unique-conflict",
+                        stuck: true,
+                        localRowExists: true,
+                        conflictingRecordId: "00mflddy2sbk393s47smn4tgn",
+                        tombstoneRecordId: "00mflddy2sbk393s47smn4tgm",
+                        recordSummary: "shared",
+                        keptRecordPreview: '{\n  "name": "shared",\n  "value": "local"\n}',
+                        queuedRecordPreview: '{\n  "name": "shared",\n  "value": "rejected"\n}',
+                        recordPreview: '{\n  "name": "shared",\n  "value": "local"\n}',
+                    },
+                ],
+            }),
+        },
+        observables: {
+            status: {
+                subscribe: () => ({ dispose() { } }),
+            },
+        },
+    }),
+    getNetworkControlConsumer: async () => ({
+        tools: {
+            resolveSyncRecovery: () => mockResolveSyncRecovery(),
+        },
+    }),
+}));
+describe("SyncRecoveryScreen", () => {
+    it("shows the full error, status help, action help, and stored record", async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(sync_recovery_1.SyncRecoveryScreen, { onBack: () => undefined }));
+        expect(await react_1.screen.findByText("hello from the stored message")).toBeTruthy();
+        expect(react_1.screen.getByText(/Validation on insert failed/)).toBeTruthy();
+        expect(react_1.screen.queryByText(/assistant id was empty/)).toBeNull();
+        react_1.fireEvent.click(react_1.screen.getAllByRole("button", { name: "Show error details" })[0]);
+        const error = react_1.screen.getByText(/assistant id was empty/);
+        expect(error.tagName).toBe("PRE");
+        react_1.fireEvent.click(react_1.screen.getByRole("button", { name: "About status Parked, schema" }));
+        expect(react_1.screen.getByText(/does not match this device's rules/)).toBeTruthy();
+        react_1.fireEvent.click(react_1.screen.getByRole("button", { name: "About these actions" }));
+        expect(react_1.screen.getByText(/only the other row is stored/)).toBeTruthy();
+        react_1.fireEvent.click(react_1.screen.getAllByRole("button", { name: "Show record details" })[0]);
+        expect(react_1.screen.getByText(/Change written/)).toBeTruthy();
+        expect(react_1.screen.getByText("Queued change")).toBeTruthy();
+        expect(react_1.screen.getByText(/"message": "hello from the stored message"/)).toBeTruthy();
+    });
+    it("labels the row Keep will snapshot separately from a different queued change", async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(sync_recovery_1.SyncRecoveryScreen, { onBack: () => undefined }));
+        react_1.fireEvent.click((await react_1.screen.findAllByRole("button", { name: "Show record details" }))[1]);
+        expect(react_1.screen.getByText("This device's version")).toBeTruthy();
+        expect(react_1.screen.getByText(/"value": "local"/)).toBeTruthy();
+        expect(react_1.screen.getByText("Queued change")).toBeTruthy();
+        expect(react_1.screen.getByText(/"value": "rejected"/)).toBeTruthy();
+        expect(react_1.screen.getByText(/tombstones this queued id/)).toBeTruthy();
+        expect(react_1.screen.queryByText(/Keep deletes/)).toBeNull();
+    });
+    it("keeps a failed action message after the list reloads", async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(sync_recovery_1.SyncRecoveryScreen, { onBack: () => undefined }));
+        react_1.fireEvent.click((await react_1.screen.findAllByRole("button", { name: "Ignore on this device" }))[0]);
+        expect(await react_1.screen.findByText("Permission denied for Shared Group: requires Owner")).toBeTruthy();
+        expect(react_1.screen.getByText("hello from the stored message")).toBeTruthy();
+    });
+});

package/dist/screens/settings/settings-page.js

@@ -45,6 +45,7 @@ const hooks_1 = require("../../hooks");
 const layout_picker_1 = require("../../root-layout/layout-picker");
 const identity_ipc_1 = require("../device-pairing/identity-ipc");
 const identity_routes_1 = require("../identity/identity-routes");
+const network_viewer_ipc_1 = require("../network-viewer/network-viewer-ipc");
 const color_mode_dropdown_1 = require("./color-mode-dropdown");
 const isBrowserPwaHost = typeof window !== "undefined" &&
     !window.electronAPI &&
@@ -138,11 +139,16 @@ const AutoUpdatePeersCore = () => {
 const ResetDeviceSyncInfos = () => {
     return ((0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary btn-sm ms-2", onClick: async () => {
                 try {
-                    await peers_sdk_1.rpcServerCalls.resetAllDeviceSyncInfo();
+                    const result = await (await (0, network_viewer_ipc_1.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.message || String(err)}`);
                 }
             }, children: "Reset All Device Sync Info" }) }));
 };
@@ -199,13 +205,17 @@ const CleanupOldDataDir = () => {
 };
 const ResetChangeTracking = () => {
     const [busy, setBusy] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 pt-3 border-top", children: [(0, jsx_runtime_1.jsx)("h6", { className: "mb-2", children: "Change tracking" }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mb-2", children: "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." }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-warning btn-sm", disabled: busy, onClick: async () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 pt-3 border-top", children: [(0, jsx_runtime_1.jsx)("h6", { className: "mb-2", children: "Change tracking" }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mb-2", children: "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." }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-warning btn-sm", disabled: busy, onClick: async () => {
                     const confirmed = window.confirm("Reset Change Tracking will clear all change history and rebuild it from scratch. This may take a while. Continue?");
                     if (!confirmed)
                         return;
                     setBusy(true);
                     try {
-                        await peers_sdk_1.rpcServerCalls.resetChangeTracking();
+                        const result = await (await (0, network_viewer_ipc_1.getNetworkControlConsumer)()).tools.resetChangeTracking();
+                        if (!result.success) {
+                            alert(result.message);
+                            return;
+                        }
                         await peers_sdk_1.rpcServerCalls.flushDatabases();
                         alert("Change tracking reset successfully.");
                     }