@peers-app/peers-ui 0.25.8 → 0.25.10

package/dist/screens/packages/local-folders-ipc.d.ts

@@ -0,0 +1,24 @@
+import { type IContractConsumerBase, type IHostContractConsumer, type ILocalFolderGrantInfo, type ILocalFolderRequestGrantInput } from "@peers-app/peers-sdk";
+/** Tools the Packages screens use on System Local Folders. */
+export interface ILocalFoldersUiConsumer extends IContractConsumerBase {
+    tools: {
+        /** Create a grant. Omitting `absolutePath` opens the desktop folder picker. */
+        requestGrant(input: ILocalFolderRequestGrantInput): Promise<ILocalFolderGrantInfo>;
+        /** Active grants on this device. */
+        listGrants(): Promise<{
+            grants: ILocalFolderGrantInfo[];
+        }>;
+        /** Revoke one grant. `revoked` is false when it was already gone. */
+        revokeGrant(input: {
+            grantId: string;
+        }): Promise<{
+            revoked: boolean;
+        }>;
+    };
+}
+/**
+ * Shared System Local Folders consumer for the Packages screens.
+ *
+ * The PWA host does not register this contract. Callers treat a missing provider as unavailable.
+ */
+export declare const localFoldersConsumer: IHostContractConsumer<ILocalFoldersUiConsumer>;

package/dist/screens/packages/local-folders-ipc.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.localFoldersConsumer = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+/**
+ * Shared System Local Folders consumer for the Packages screens.
+ *
+ * The PWA host does not register this contract. Callers treat a missing provider as unavailable.
+ */
+exports.localFoldersConsumer = (0, peers_sdk_1.hostContractConsumer)((0, peers_sdk_1.getLocalFoldersContractDefinition)());

package/dist/screens/packages/package-details.js

@@ -9,6 +9,7 @@ const save_button_1 = require("../../components/save-button");
 const tabs_1 = require("../../components/tabs");
 const hooks_1 = require("../../hooks");
 const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const local_folder_grants_panel_1 = require("./local-folder-grants-panel");
 const package_info_1 = require("./package-info");
 const package_versions_1 = require("./package-versions");
 /** Detail screen for a single package with Info, Versions, Components, and Dependencies tabs. */
@@ -75,6 +76,10 @@ const PackageDetails = (props) => {
                         name: "Dependencies",
                         content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: "TODO - show all of the dependencies of the package" })),
                     },
+                    {
+                        name: "Folders",
+                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(local_folder_grants_panel_1.LocalFolderGrantsPanel, { packageId: pkg.packageId }) })),
+                    },
                 ] }, pkg.packageId)] }));
 };
 exports.PackageDetails = PackageDetails;

package/dist/screens/packages/package-list.d.ts

@@ -1,2 +1,3 @@
 /** Searchable list of installed packages, plus create/import from the search box. */
+/** Packages screen: search, local folder grants, and the installed package list. */
 export declare const PackageList: () => import("react/jsx-runtime").JSX.Element;

package/dist/screens/packages/package-list.js

@@ -11,6 +11,7 @@ const tooltip_1 = require("../../components/tooltip");
 const globals_1 = require("../../globals");
 const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
+const local_folder_grants_panel_1 = require("./local-folder-grants-panel");
 const package_helpers_1 = require("./package-helpers");
 function tagBadgeClass(tag) {
     if (tag === "dev")
@@ -120,6 +121,7 @@ const PackageRow = ({ pkg, onUpdated }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid pb-4 d-flex align-items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", style: { minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-fill" }), "\u00A0\u00A0", (0, jsx_runtime_1.jsx)("a", { href: `#packages/${pkg.packageId}`, children: pkg.name }), isDeviceOverridden && ((0, jsx_runtime_1.jsx)("span", { className: "text-warning ms-1", title: "This device is using a different version than the group", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-pc-display" }) })), status && ((0, jsx_runtime_1.jsxs)("span", { className: "ms-2", children: [(0, jsx_runtime_1.jsxs)("small", { className: "text-muted", children: ["v", status.activePv.version] }), status.activePv.versionTag && ((0, jsx_runtime_1.jsx)("span", { className: `badge ms-1 ${tagBadgeClass(status.activePv.versionTag)}`, style: { fontSize: "0.65em" }, children: status.activePv.versionTag })), hasUpdate ? ((0, jsx_runtime_1.jsxs)("span", { className: `badge ms-1 ${updateBadgeClass(status.newerLevel)}`, style: { fontSize: "0.65em" }, children: ["v", status.newestPv?.version, " available"] })) : isOnDev && hasGroupRelease ? ((0, jsx_runtime_1.jsxs)("span", { className: "badge ms-1 text-bg-secondary", style: { fontSize: "0.65em" }, children: ["release: v", status.groupReleasePv?.version] })) : ((0, jsx_runtime_1.jsx)("span", { className: "badge ms-1 text-bg-success", style: { fontSize: "0.65em" }, children: "up to date" }))] })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: pkg.description, positions: ["bottom", "top", "right", "left"] })] }), hasUpdate && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-primary ms-2 text-nowrap", disabled: updating, onClick: handleUpdate, children: [updating ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-up-circle me-1" })), "Update"] })), isOnDev && hasGroupRelease && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-secondary ms-2 text-nowrap", disabled: updating, onClick: handleUseRelease, children: [updating ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-arrow-in-right me-1" })), "Use Release"] })), hasDevVersion && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-danger ms-2 text-nowrap", disabled: updating, onClick: handleUseDev, children: [updating ? ((0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1" })) : ((0, jsx_runtime_1.jsx)("i", { className: "bi bi-tools me-1" })), "Use Dev"] }))] }));
 };
 /** Searchable list of installed packages, plus create/import from the search box. */
+/** Packages screen: search, local folder grants, and the installed package list. */
 const PackageList = () => {
     const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(""));
     const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
@@ -243,7 +245,7 @@ const PackageList = () => {
     if (addingPackage()) {
         return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "container-fluid d-flex justify-content-center mt-5", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-seam" }), "\u00A0 Adding Package"] }), (0, jsx_runtime_1.jsx)("div", { className: "container-fluid d-flex justify-content-center mt-2", children: (0, jsx_runtime_1.jsx)("div", { className: "progress", role: "progressbar", "aria-label": "Animated striped example", "aria-valuenow": 100, "aria-valuemin": 0, "aria-valuemax": 100, children: (0, jsx_runtime_1.jsx)("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: 150 } }) }) })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-group mt-3 mb-3", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search, add, or create package", autoFocus: !!(0, globals_1.isDesktop)(), onKeyUp: (evt) => searchSubmit(evt) }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary dropdown-toggle sm", type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-plus-lg" }) }), (0, jsx_runtime_1.jsxs)("ul", { className: "dropdown-menu dropdown-menu-end", children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item", href: "#packages/newlocal", children: "New Local Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item disabled", href: "#", children: "Add Local Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item disabled", href: "#", children: "Add Remote Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("hr", { className: "dropdown-divider" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item", onClick: () => peers_sdk_1.rpcServerCalls.openPath(peers_sdk_1.packagesRootDir), style: { cursor: "pointer" }, children: "Open Packages Directory" }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { resetTrigger: `${searchText}_${refreshKey()}`, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (packages) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-group mt-3 mb-3", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search, add, or create package", autoFocus: !!(0, globals_1.isDesktop)(), onKeyUp: (evt) => searchSubmit(evt) }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary dropdown-toggle sm", type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-plus-lg" }) }), (0, jsx_runtime_1.jsxs)("ul", { className: "dropdown-menu dropdown-menu-end", children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item", href: "#packages/newlocal", children: "New Local Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item disabled", href: "#", children: "Add Local Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item disabled", href: "#", children: "Add Remote Package" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("hr", { className: "dropdown-divider" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("a", { className: "dropdown-item", onClick: () => peers_sdk_1.rpcServerCalls.openPath(peers_sdk_1.packagesRootDir), style: { cursor: "pointer" }, children: "Open Packages Directory" }) })] })] }), (0, jsx_runtime_1.jsx)(local_folder_grants_panel_1.LocalFolderGrantsPanel, {}), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { resetTrigger: `${searchText}_${refreshKey()}`, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (packages) => {
                         return packages.map((pkg) => ((0, jsx_runtime_1.jsx)(PackageRow, { pkg: pkg, onUpdated: () => refreshKey(refreshKey() + 1) }, pkg.packageId)));
                     }, loadingIndicator: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", style: { height: 200 }, children: (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {}) }), endOfList: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }) })] }));
 };

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.");
                     }

package/dist/tabs-layout/network-status-indicator.js

@@ -14,6 +14,7 @@ const moment_1 = __importDefault(require("moment"));
 const react_1 = require("react");
 const identity_routes_1 = require("../screens/identity/identity-routes");
 const network_viewer_ipc_1 = require("../screens/network-viewer/network-viewer-ipc");
+const network_viewer_section_1 = require("../screens/network-viewer/network-viewer-section");
 const tabs_state_1 = require("./tabs-state");
 const use_network_status_1 = require("./use-network-status");
 /** How long continuous raw syncing stays a green pulse before the indeterminate circle. */
@@ -32,6 +33,19 @@ function disconnectedLabelSuffix(disconnectedContextCount) {
 function connectedLabelSuffix(connectedContextCount) {
     return `; ${connectedContextCount} ${connectedContextCount === 1 ? "group" : "groups"} connected`;
 }
+function withStuckAttention(presentation, stuckRecoveryCount) {
+    if (stuckRecoveryCount <= 0) {
+        return presentation;
+    }
+    const attention = stuckRecoveryCount === 1
+        ? "1 record needs attention"
+        : `${stuckRecoveryCount} records need attention`;
+    const labeled = { ...presentation, label: `${presentation.label}; ${attention}` };
+    if (presentation.colorClass === "text-danger") {
+        return labeled;
+    }
+    return { ...labeled, colorClass: "text-warning" };
+}
 function connectedGroupsOverlay(connectionCount, connectedContextCount) {
     if (connectionCount <= 0) {
         return undefined;
@@ -60,7 +74,7 @@ function getNetworkStatusPresentation(viewState, opts) {
             colorClass: "text-secondary",
         };
     }
-    const { connectedContextCount, connectionCount, disconnectedContextCount, errorCount, state, syncingContextCount, } = viewState.status;
+    const { connectedContextCount, connectionCount, disconnectedContextCount, errorCount, state, stuckRecoveryCount, syncingContextCount, } = viewState.status;
     const disconnectedOverlay = disconnectedContextCount > 0 && state !== "offline"
         ? { count: disconnectedContextCount }
         : undefined;
@@ -70,38 +84,38 @@ function getNetworkStatusPresentation(viewState, opts) {
     const groupsOverlay = connectedGroupsOverlay(connectionCount, connectedContextCount);
     const connectedSuffix = groupsOverlay ? connectedLabelSuffix(connectedContextCount) : "";
     if (state === "error") {
-        return {
+        return withStuckAttention({
             label: `Network error; ${errorCount} sync ${errorCount === 1 ? "error" : "errors"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
             shortLabel: "Error",
             colorClass: "text-danger",
             mark: "solid",
             disconnectedGroupsOverlay: disconnectedOverlay,
             connectedGroupsOverlay: groupsOverlay,
-        };
+        }, stuckRecoveryCount);
     }
     if (state === "syncing" || opts?.holdSyncingVisual) {
         const longSync = state === "syncing" && opts?.syncingLongerThanGreenMs === true;
         const contextsLabel = state === "syncing"
             ? `${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}`
             : "recent activity";
-        return {
+        return withStuckAttention({
             label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
             shortLabel: "Syncing",
             colorClass: longSync ? "text-primary" : "text-success",
             mark: longSync ? "indeterminate" : "pulse",
             disconnectedGroupsOverlay: disconnectedOverlay,
             connectedGroupsOverlay: groupsOverlay,
-        };
+        }, stuckRecoveryCount);
     }
     if (state === "offline") {
-        return {
+        return withStuckAttention({
             label: "Network offline; no active connections",
             shortLabel: "Offline",
             iconClass: "bi-cloud-slash-fill",
             colorClass: "text-secondary",
-        };
+        }, stuckRecoveryCount);
     }
-    return {
+    return withStuckAttention({
         label: `Network synced; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
         shortLabel: "Synced",
         iconClass: "bi-check-circle-fill",
@@ -109,7 +123,7 @@ function getNetworkStatusPresentation(viewState, opts) {
         compactIcon: true,
         disconnectedGroupsOverlay: disconnectedOverlay,
         connectedGroupsOverlay: groupsOverlay,
-    };
+    }, stuckRecoveryCount);
 }
 function statusMarkBgClass(colorClass) {
     if (colorClass === "text-danger") {
@@ -118,6 +132,9 @@ function statusMarkBgClass(colorClass) {
     if (colorClass === "text-primary") {
         return "bg-primary";
     }
+    if (colorClass === "text-warning") {
+        return "bg-warning";
+    }
     return "bg-success";
 }
 function StatusMark({ mode, colorClass }) {
@@ -190,8 +207,14 @@ function ConnectedDevicesList({ loadState }) {
     }
     return ((0, jsx_runtime_1.jsx)("ul", { className: "small mb-0 ps-0", style: { maxHeight: "180px", overflowY: "auto" }, children: loadState.connections.map((connection) => ((0, jsx_runtime_1.jsx)(ConnectedDeviceRow, { connection: connection }, connection.deviceId))) }));
 }
-function NetworkStatusDetails({ detailsId, status, unavailable, connectionsLoadState, onUseInvite, onOpenIdentity, onOpenViewer, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { id: detailsId, role: "dialog", "aria-label": "Network status details", className: "card shadow position-absolute end-0 mt-1", style: { top: "100%", width: "320px", zIndex: 1100 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 mb-3", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-sm btn-outline-primary flex-fill", onClick: onUseInvite, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-qr-code me-1", "aria-hidden": "true" }), "Use Invite"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-sm btn-outline-primary flex-fill", onClick: onOpenIdentity, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-badge me-1", "aria-hidden": "true" }), "Identity"] })] }), (0, jsx_runtime_1.jsx)("h6", { className: "card-title mb-2", children: "Network status" }), unavailable || !status ? ((0, jsx_runtime_1.jsx)("p", { className: "small text-muted mb-3", children: "Network diagnostics are temporarily unavailable. The local host may still be starting or reconnecting." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("dl", { className: "row small mb-2", children: [(0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Connections" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end", children: status.connectionCount }), (0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Syncing contexts" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end", children: status.syncingContextCount }), (0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Sync errors" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end", children: status.errorCount }), (0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Groups connected" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end", children: status.connectedContextCount }), (0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Groups offline" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end", children: status.disconnectedContextCount }), status.lastSuccessfulSyncAt != null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Last sync" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end text-truncate", title: new Date(status.lastSuccessfulSyncAt).toLocaleString(), children: formatRelativeSyncTime(status.lastSuccessfulSyncAt) })] }))] }), status.errors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger py-2 px-2 small mb-2", children: [status.errors[0].message, status.errors.length > 1 && ` (+${status.errors.length - 1} more)`] })), (0, jsx_runtime_1.jsxs)("div", { className: "border-top pt-2 mt-1 mb-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "small text-muted mb-1", children: "Devices" }), (0, jsx_runtime_1.jsx)(ConnectedDevicesList, { loadState: connectionsLoadState })] })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-primary w-100", onClick: onOpenViewer, children: "Open Network Viewer" })] }) }));
+function StatusCountRow({ label, value, className, }) {
+    const tone = className ? ` ${className}` : "";
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("dt", { className: `col-7${tone}`, children: label }), (0, jsx_runtime_1.jsx)("dd", { className: `col-5 text-end${tone}`, children: value })] }));
+}
+function NetworkStatusDetails({ detailsId, status, unavailable, connectionsLoadState, onUseInvite, onOpenIdentity, onOpenViewer, onOpenRecovery, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { id: detailsId, role: "dialog", "aria-label": "Network status details", className: "card shadow position-absolute end-0 mt-1", style: { top: "100%", width: "320px", zIndex: 1100 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 mb-3", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-sm btn-outline-primary flex-fill", onClick: onUseInvite, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-qr-code me-1", "aria-hidden": "true" }), "Use Invite"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-sm btn-outline-primary flex-fill", onClick: onOpenIdentity, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-badge me-1", "aria-hidden": "true" }), "Identity"] })] }), (0, jsx_runtime_1.jsx)("h6", { className: "card-title mb-2", children: "Network status" }), unavailable || !status ? ((0, jsx_runtime_1.jsx)("p", { className: "small text-muted mb-3", children: "Network diagnostics are temporarily unavailable. The local host may still be starting or reconnecting." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("dl", { className: "row small mb-2", children: [(0, jsx_runtime_1.jsx)(StatusCountRow, { label: "Connections", value: status.connectionCount }), (0, jsx_runtime_1.jsx)(StatusCountRow, { label: "Groups connected", value: status.connectedContextCount }), status.syncingContextCount > 0 && ((0, jsx_runtime_1.jsx)(StatusCountRow, { label: "Syncing contexts", value: status.syncingContextCount })), status.disconnectedContextCount > 0 && ((0, jsx_runtime_1.jsx)(StatusCountRow, { label: "Groups offline", value: status.disconnectedContextCount, className: "text-warning" })), status.errorCount > 0 && ((0, jsx_runtime_1.jsx)(StatusCountRow, { label: "Sync errors", value: status.errorCount })), status.lastSuccessfulSyncAt != null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Last sync" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end text-truncate", title: new Date(status.lastSuccessfulSyncAt).toLocaleString(), children: formatRelativeSyncTime(status.lastSuccessfulSyncAt) })] }))] }), status.errors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger py-2 px-2 small mb-2", children: [status.errors[0].message, status.errors.length > 1 && ` (+${status.errors.length - 1} more)`] })), status.stuckRecoveryCount > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning py-2 px-2 small mb-2", children: status.stuckRecoveryCount === 1
+                                ? "1 record needs attention"
+                                : `${status.stuckRecoveryCount} records need attention` })), (0, jsx_runtime_1.jsxs)("div", { className: "border-top pt-2 mt-1 mb-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "small text-muted mb-1", children: "Connected Devices" }), (0, jsx_runtime_1.jsx)(ConnectedDevicesList, { loadState: connectionsLoadState })] })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: `btn btn-sm btn-outline-primary w-100${status && status.stuckRecoveryCount > 0 ? " mb-2" : ""}`, onClick: onOpenViewer, children: "Open Network Viewer" }), status && status.stuckRecoveryCount > 0 && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-warning w-100", onClick: onOpenRecovery, children: "Sync recovery" }))] }) }));
 }
 /** Accessible reactive network status button and details popover. */
 function NetworkStatusIndicator({ compact = false }) {
@@ -314,6 +337,11 @@ function NetworkStatusIndicator({ compact = false }) {
                     (0, tabs_state_1.goToTabPath)(identity_routes_1.IDENTITY_ACCOUNT_PATH);
                 }, onOpenViewer: () => {
                     setOpen(false);
+                    (0, network_viewer_section_1.networkViewerSection)("main");
+                    (0, tabs_state_1.goToTabPath)("network-viewer");
+                }, onOpenRecovery: () => {
+                    setOpen(false);
+                    (0, network_viewer_section_1.networkViewerSection)("sync-recovery");
                     (0, tabs_state_1.goToTabPath)("network-viewer");
                 } }))] }));
 }

package/dist/tabs-layout/network-status-indicator.test.js

@@ -8,6 +8,7 @@ const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("@testing-library/react");
 const moment_1 = __importDefault(require("moment"));
 const identity_routes_1 = require("../screens/identity/identity-routes");
+const network_viewer_section_1 = require("../screens/network-viewer/network-viewer-section");
 const network_status_indicator_1 = require("./network-status-indicator");
 const goToTabPath = jest.fn();
 const getConnections = jest.fn();
@@ -33,6 +34,7 @@ function status(overrides) {
         errorCount: 0,
         disconnectedContextCount: 0,
         connectedContextCount: 0,
+        stuckRecoveryCount: 0,
         errors: [],
         ...overrides,
     };
@@ -128,6 +130,28 @@ describe("getNetworkStatusPresentation", () => {
             mark: "indeterminate",
         });
     });
+    it("turns yellow for stuck recovery without hiding sync activity or errors", () => {
+        expect((0, network_status_indicator_1.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((0, network_status_indicator_1.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((0, network_status_indicator_1.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((0, network_status_indicator_1.getNetworkStatusPresentation)({ availability: "ready", status: status({ state: "synced" }) }, { holdSyncingVisual: true, syncingLongerThanGreenMs: true })).toMatchObject({
             shortLabel: "Syncing",
@@ -186,10 +210,25 @@ describe("getNetworkStatusPresentation", () => {
             }),
         }).connectedGroupsOverlay).toBeUndefined();
     });
+    it("turns an offline indicator yellow when recovery is stuck and keeps the offline icon", () => {
+        expect((0, network_status_indicator_1.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((0, network_status_indicator_1.getNetworkStatusPresentation)({
+            availability: "ready",
+            status: status({ state: "error", errorCount: 1, stuckRecoveryCount: 2 }),
+        }).colorClass).toBe("text-danger");
+    });
 });
 describe("NetworkStatusIndicator", () => {
     beforeEach(() => {
         mockViewState = { availability: "loading" };
+        (0, network_viewer_section_1.networkViewerSection)("main");
         getConnections.mockReset();
         getConnections.mockResolvedValue({ connections: [] });
         jest.clearAllMocks();
@@ -462,5 +501,75 @@ describe("NetworkStatusIndicator", () => {
         react_1.fireEvent.click(view.getByRole("button", { name: /Network error/ }));
         react_1.fireEvent.click(view.getByRole("button", { name: "Open Network Viewer" }));
         expect(goToTabPath).toHaveBeenCalledWith("network-viewer");
+        expect((0, network_viewer_section_1.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 = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.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 = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.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 () => {
+        (0, network_viewer_section_1.networkViewerSection)("main");
+        mockViewState = {
+            availability: "ready",
+            status: status({ state: "synced", stuckRecoveryCount: 2 }),
+        };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        await openNetworkDetails(view, /Network synced/);
+        react_1.fireEvent.click(view.getByRole("button", { name: "Sync recovery" }));
+        expect((0, network_viewer_section_1.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, name) {
+    react_1.fireEvent.click(view.getByRole("button", { name }));
+    await (0, react_1.waitFor)(() => expect(getConnections).toHaveBeenCalled());
+    await (0, react_1.act)(async () => {
+        await Promise.resolve();
+    });
+}

package/dist/tabs-layout/use-network-status.test.js

@@ -16,6 +16,7 @@ function makeStatus(overrides = {}) {
         errorCount: 0,
         disconnectedContextCount: 0,
         connectedContextCount: 0,
+        stuckRecoveryCount: 0,
         errors: [],
         ...overrides,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.25.8",
+  "version": "0.25.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -28,7 +28,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.25.8",
+    "@peers-app/peers-sdk": "^0.25.10",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -39,7 +39,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.25.8",
+    "@peers-app/peers-sdk": "0.25.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/screens/network-viewer/network-viewer-section.ts

@@ -0,0 +1,12 @@
+import { observable } from "@peers-app/peers-sdk";
+
+/** 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 const networkViewerSection = observable<NetworkViewerSection>("main");

package/src/screens/network-viewer/network-viewer.section.test.tsx

@@ -0,0 +1,68 @@
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { NetworkViewerList } from "./network-viewer";
+import { networkViewerSection } from "./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(() => {
+    networkViewerSection("main");
+  });
+
+  it("shows Sync recovery in place and returns to the overview", async () => {
+    const view = render(<NetworkViewerList />);
+    await waitFor(() => {
+      expect(view.getByRole("heading", { name: "Network Viewer" })).toBeTruthy();
+    });
+
+    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();
+
+    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 () => {
+    networkViewerSection("sync-recovery");
+    const view = render(<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/src/screens/network-viewer/network-viewer.tsx

@@ -8,6 +8,7 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { TrustLevelBadge } from "../../components/trust-level-badge";
+import { useObservable } from "../../hooks";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 import { ConnectionTroubleshooter } from "./connection-troubleshooter";
 import { DeviceDetailsModal } from "./device-details-modal";
@@ -17,6 +18,8 @@ import {
   getNetworkDiagnosticsConsumer,
   getNetworkViewerPlatformApi,
 } from "./network-viewer-ipc";
+import { networkViewerSection } from "./network-viewer-section";
+import { SyncRecoveryScreen } from "./sync-recovery";
 import { UsageGraph } from "./usage-graph";
 
 /** Format bytes to human-readable string (KB, MB, GB) */
@@ -38,6 +41,12 @@ function formatRate(mbps: number | undefined): string {
   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.
+ */
 export function NetworkViewerList() {
   const [overview, setOverview] = useState<INetworkOverview | null>(null);
   const [connections, setConnections] = useState<INetworkConnectionInfo[]>([]);
@@ -49,6 +58,7 @@ export function NetworkViewerList() {
   const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
   const [connecting, setConnecting] = useState<Set<string>>(new Set());
   const [showTroubleshooter, setShowTroubleshooter] = useState(false);
+  const [viewerSection] = useObservable(networkViewerSection);
 
   const loadData = useCallback(async () => {
     try {
@@ -159,6 +169,16 @@ export function NetworkViewerList() {
     return () => clearInterval(interval);
   }, [loadData]);
 
+  useEffect(() => {
+    if (viewerSection === "sync-recovery") {
+      setShowTroubleshooter(false);
+    }
+  }, [viewerSection]);
+
+  if (viewerSection === "sync-recovery") {
+    return <SyncRecoveryScreen onBack={() => networkViewerSection("main")} />;
+  }
+
   if (loading) {
     return <LoadingIndicator />;
   }
@@ -190,6 +210,13 @@ export function NetworkViewerList() {
               Troubleshoot
             </button>
           )}
+          <button
+            className="btn btn-sm btn-outline-secondary"
+            onClick={() => networkViewerSection("sync-recovery")}
+            title="Records that could not be materialized"
+          >
+            Sync recovery
+          </button>
           <button className="btn btn-sm btn-primary" onClick={handleRefresh} disabled={refreshing}>
             <i className={`bi bi-arrow-clockwise ${refreshing ? "spin" : ""}`}></i>
             {refreshing ? " Refreshing..." : " Refresh"}