@peers-app/peers-ui 0.25.8 → 0.25.10

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/packages/local-folder-grants-panel.d.ts

@@ -0,0 +1,15 @@
+/** Props for {@link LocalFolderGrantsPanel}. */
+export interface ILocalFolderGrantsPanelProps {
+    /**
+     * When set, the list and new grants are limited to this package.
+     * Omit it for the device-wide operator list.
+     */
+    packageId?: string;
+}
+/**
+ * Folder grants on this device, with add and revoke.
+ *
+ * Add opens the host folder picker. A host that does not provide System Local Folders
+ * (the PWA) shows the contract as unavailable.
+ */
+export declare function LocalFolderGrantsPanel(props: ILocalFolderGrantsPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/screens/packages/local-folder-grants-panel.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalFolderGrantsPanel = LocalFolderGrantsPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+const use_host_contract_1 = require("../../hooks/use-host-contract");
+const local_folders_ipc_1 = require("./local-folders-ipc");
+/**
+ * Folder grants on this device, with add and revoke.
+ *
+ * Add opens the host folder picker. A host that does not provide System Local Folders
+ * (the PWA) shows the contract as unavailable.
+ */
+function LocalFolderGrantsPanel(props) {
+    const { consumer, error: transportError } = (0, use_host_contract_1.useHostContract)(local_folders_ipc_1.localFoldersConsumer);
+    const [groupList] = (0, hooks_1.useObservable)(globals_1.groups);
+    const [grants, setGrants] = (0, react_1.useState)();
+    const [loadError, setLoadError] = (0, react_1.useState)();
+    const [actionError, setActionError] = (0, react_1.useState)();
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [groupId, setGroupId] = (0, react_1.useState)("");
+    const [mode, setMode] = (0, react_1.useState)("readwrite");
+    const [refresh, setRefresh] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (!consumer) {
+            return;
+        }
+        let cancelled = false;
+        consumer.tools.listGrants().then((result) => {
+            if (!cancelled) {
+                setGrants(result.grants);
+                setLoadError(undefined);
+            }
+        }, (cause) => {
+            if (!cancelled) {
+                setLoadError(cause instanceof Error ? cause : new Error(String(cause)));
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [consumer, refresh]);
+    const unavailable = isUnavailable(transportError) || isUnavailable(loadError);
+    const visible = (grants ?? []).filter((grant) => props.packageId ? grant.packageId === props.packageId : true);
+    const names = new Map(groupList.map((group) => [group.groupId, group.name || group.groupId]));
+    async function addFolder() {
+        if (!consumer || !groupId) {
+            return;
+        }
+        setBusy(true);
+        setActionError(undefined);
+        try {
+            await consumer.tools.requestGrant({
+                groupId,
+                mode,
+                ...(props.packageId ? { packageId: props.packageId } : {}),
+            });
+            setRefresh((value) => value + 1);
+        }
+        catch (cause) {
+            const message = cause instanceof Error ? cause.message : String(cause);
+            if (!/cancelled/i.test(message)) {
+                setActionError(message);
+            }
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function revoke(grantId) {
+        if (!consumer) {
+            return;
+        }
+        if (!window.confirm("Revoke this folder grant?")) {
+            return;
+        }
+        setBusy(true);
+        setActionError(undefined);
+        try {
+            await consumer.tools.revokeGrant({ grantId });
+            setRefresh((value) => value + 1);
+        }
+        catch (cause) {
+            setActionError(cause instanceof Error ? cause.message : String(cause));
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h5", { children: props.packageId ? "Folders" : "Local folders" }), (0, jsx_runtime_1.jsx)(FolderStatus, { unavailable: unavailable, transportError: transportError, loadError: loadError, loading: !!consumer && grants === undefined && !loadError }), consumer && !unavailable && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GrantTable, { grants: visible, names: names, busy: busy, onRevoke: revoke }), (0, jsx_runtime_1.jsx)(AddFolderForm, { fieldScope: props.packageId ?? "device", groupId: groupId, groups: groupList.map((group) => ({
+                            groupId: group.groupId,
+                            name: group.name || group.groupId,
+                        })), mode: mode, busy: busy, onGroupId: setGroupId, onMode: setMode, onAdd: addFolder }), actionError && (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger mt-2 mb-0", children: actionError })] }))] }));
+}
+function FolderStatus(props) {
+    if (props.unavailable) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-secondary mb-0", children: "System Local Folders is not available on this host." }));
+    }
+    const error = props.loadError ?? props.transportError;
+    if (error) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger mb-0", children: error.message });
+    }
+    if (props.loading) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "text-muted", children: "Loading folder grants\u2026" });
+    }
+    return null;
+}
+function GrantTable(props) {
+    if (props.grants.length === 0) {
+        return (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "No folder grants." });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-sm align-middle", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Path" }), (0, jsx_runtime_1.jsx)("th", { children: "Group" }), (0, jsx_runtime_1.jsx)("th", { children: "Package" }), (0, jsx_runtime_1.jsx)("th", { children: "Mode" }), (0, jsx_runtime_1.jsx)("th", { children: "Created" }), (0, jsx_runtime_1.jsx)("th", {})] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: props.grants.map((grant) => ((0, jsx_runtime_1.jsx)(GrantRow, { grant: grant, groupName: props.names.get(grant.groupId) ?? grant.groupId, busy: props.busy, onRevoke: props.onRevoke }, grant.grantId))) })] }) }));
+}
+function GrantRow(props) {
+    const { grant } = props;
+    return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "text-break", children: grant.absolutePath }), (0, jsx_runtime_1.jsx)("td", { children: props.groupName }), (0, jsx_runtime_1.jsx)("td", { children: grant.packageId ?? "operator" }), (0, jsx_runtime_1.jsx)("td", { children: grant.mode }), (0, jsx_runtime_1.jsx)("td", { children: new Date(grant.createdAt).toLocaleString() }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-danger", disabled: props.busy, onClick: () => props.onRevoke(grant.grantId), children: "Revoke" }) })] }));
+}
+function AddFolderForm(props) {
+    return ((0, jsx_runtime_1.jsxs)("form", { className: "row g-2 align-items-end", onSubmit: (event) => {
+            event.preventDefault();
+            props.onAdd();
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-5", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label", htmlFor: `local-folder-group-${props.fieldScope}`, children: "Group" }), (0, jsx_runtime_1.jsxs)("select", { id: `local-folder-group-${props.fieldScope}`, className: "form-select", value: props.groupId, onChange: (event) => props.onGroupId(event.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select a group" }), props.groups.map((group) => ((0, jsx_runtime_1.jsx)("option", { value: group.groupId, children: group.name }, group.groupId)))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label", htmlFor: `local-folder-mode-${props.fieldScope}`, children: "Mode" }), (0, jsx_runtime_1.jsxs)("select", { id: `local-folder-mode-${props.fieldScope}`, className: "form-select", value: props.mode, onChange: (event) => props.onMode(event.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "readwrite", children: "readwrite" }), (0, jsx_runtime_1.jsx)("option", { value: "read", children: "read" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-4", children: (0, jsx_runtime_1.jsx)("button", { type: "submit", className: "btn btn-primary", disabled: props.busy || !props.groupId, children: props.busy ? "Working…" : "Add folder" }) })] }));
+}
+function isUnavailable(error) {
+    if (!error) {
+        return false;
+    }
+    return /No contract provider registered|not available locally/i.test(error.message);
+}