@peers-app/peers-ui 0.26.0 → 0.26.2

package/dist/app-updates/remote-app-update-panel.test.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const remote_app_update_panel_1 = require("./remote-app-update-panel");
+const getDeviceUpdateStatus = jest.fn();
+const installUpdateAndRestartOnDevice = jest.fn();
+jest.mock("./app-updates-consumer", () => ({
+    ...jest.requireActual("./app-updates-consumer"),
+    getAppUpdatesConsumer: () => Promise.resolve({
+        tools: {
+            getDeviceUpdateStatus: (...args) => getDeviceUpdateStatus(...args),
+            installUpdateAndRestartOnDevice: (...args) => installUpdateAndRestartOnDevice(...args),
+        },
+    }),
+}));
+function remoteStatus(overrides = {}) {
+    return {
+        supported: true,
+        canRestart: true,
+        platform: "win32",
+        currentVersion: "1.0.0",
+        latestVersion: "1.1.0",
+        downloadedVersion: "1.1.0",
+        state: "downloaded",
+        installOnRestart: true,
+        installOnQuitArmed: true,
+        remoteRestartAllowed: true,
+        ...overrides,
+    };
+}
+describe("RemoteAppUpdatePanel", () => {
+    beforeEach(() => {
+        getDeviceUpdateStatus.mockReset();
+        installUpdateAndRestartOnDevice.mockReset();
+        installUpdateAndRestartOnDevice.mockResolvedValue({ action: "installing" });
+        jest.spyOn(window, "confirm").mockReturnValue(true);
+    });
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    it("updates the other device after confirmation", async () => {
+        getDeviceUpdateStatus.mockResolvedValue(remoteStatus());
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "desktop", deviceName: "Desktop" }));
+        const button = await view.findByRole("button", { name: /Update & restart/ });
+        expect(view.getByTestId("remote-app-update")).toHaveTextContent("Version 1.0.0 · Version 1.1.0 is ready to install");
+        expect(getDeviceUpdateStatus).toHaveBeenCalledWith({ deviceId: "desktop" });
+        react_1.fireEvent.click(button);
+        expect(window.confirm).toHaveBeenCalledWith("Update Desktop to 1.1.0 and restart it?");
+        await (0, react_1.waitFor)(() => expect(installUpdateAndRestartOnDevice).toHaveBeenCalledWith({ deviceId: "desktop" }));
+        await view.findByText("Request sent");
+    });
+    it("offers a plain restart when the device is up to date", async () => {
+        getDeviceUpdateStatus.mockResolvedValue(remoteStatus({ state: "up-to-date" }));
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "desktop" }));
+        react_1.fireEvent.click(await view.findByRole("button", { name: /^Restart$/ }));
+        expect(window.confirm).toHaveBeenCalledWith("Restart desktop? It will check for an update first.");
+        await (0, react_1.waitFor)(() => expect(installUpdateAndRestartOnDevice).toHaveBeenCalled());
+    });
+    it("does nothing when the confirmation is declined", async () => {
+        window.confirm.mockReturnValue(false);
+        getDeviceUpdateStatus.mockResolvedValue(remoteStatus());
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "desktop" }));
+        react_1.fireEvent.click(await view.findByRole("button", { name: /Update & restart/ }));
+        expect(installUpdateAndRestartOnDevice).not.toHaveBeenCalled();
+    });
+    it("explains why the action is disabled", async () => {
+        getDeviceUpdateStatus.mockResolvedValue(remoteStatus({ remoteRestartAllowed: false }));
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "desktop" }));
+        expect(await view.findByRole("button", { name: /Update & restart/ })).toBeDisabled();
+        expect(view.getByTestId("remote-app-update")).toHaveTextContent("does not allow remote restarts");
+        getDeviceUpdateStatus.mockResolvedValue(remoteStatus({ installNeedsElevation: true }));
+        const elevated = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "linux-box" }));
+        await (0, react_1.waitFor)(() => expect(elevated.getAllByRole("button", { name: /Update & restart/ })[1]).toBeDisabled());
+        expect(elevated.getAllByTestId("remote-app-update")[1]).toHaveTextContent("administrator password");
+    });
+    it.each([
+        [
+            "a device that cannot restart itself",
+            () => Promise.resolve(remoteStatus({ canRestart: false })),
+        ],
+        [
+            "a device that does not trust this user",
+            () => Promise.reject(new Error("Permission denied: tool 'getUpdateStatus'.run on contract x")),
+        ],
+        [
+            "a build without App Updates",
+            () => Promise.reject(new Error("No contract provider registered for x v1")),
+        ],
+    ])("renders nothing for %s", async (_label, result) => {
+        getDeviceUpdateStatus.mockImplementation(result);
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "desktop" }));
+        await (0, react_1.waitFor)(() => expect(view.queryByTestId("remote-app-update")).toBeNull());
+    });
+    it("reports an unreachable device", async () => {
+        getDeviceUpdateStatus.mockRejectedValue(new Error("Device desktop is not connected"));
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "desktop" }));
+        await view.findByText("Not reachable: Device desktop is not connected");
+        getDeviceUpdateStatus.mockResolvedValue(remoteStatus());
+        react_1.fireEvent.click(view.getByRole("button", { name: "Retry" }));
+        await view.findByRole("button", { name: /Update & restart/ });
+    });
+    it("clears the previous device's action while a new target loads", async () => {
+        getDeviceUpdateStatus.mockResolvedValueOnce(remoteStatus());
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "desktop" }));
+        await view.findByRole("button", { name: /Update & restart/ });
+        let finish;
+        getDeviceUpdateStatus.mockImplementationOnce(() => new Promise((resolve) => {
+            finish = resolve;
+        }));
+        view.rerender((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "another-desktop" }));
+        expect(view.queryByRole("button", { name: /Update & restart/ })).toBeNull();
+        expect(view.getByText("Checking this device…")).toBeTruthy();
+        await (0, react_1.act)(async () => {
+            await Promise.resolve();
+            finish(remoteStatus({ remoteRestartAllowed: false }));
+        });
+        expect(view.getByRole("button", { name: /Update & restart/ })).toBeDisabled();
+    });
+    it("accepts slow poll responses without overlapping requests and cleans up timers", async () => {
+        jest.useFakeTimers();
+        try {
+            getDeviceUpdateStatus.mockResolvedValue(remoteStatus());
+            const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "desktop" }));
+            await (0, react_1.act)(async () => { });
+            let finish;
+            getDeviceUpdateStatus.mockImplementationOnce(() => new Promise((resolve) => {
+                finish = resolve;
+            }));
+            react_1.fireEvent.click(view.getByRole("button", { name: /Update & restart/ }));
+            await (0, react_1.act)(async () => { });
+            await (0, react_1.act)(async () => {
+                jest.advanceTimersByTime(remote_app_update_panel_1.REMOTE_UPDATE_POLL_MS * 3);
+            });
+            expect(getDeviceUpdateStatus).toHaveBeenCalledTimes(2);
+            await (0, react_1.act)(async () => {
+                finish(remoteStatus({ currentVersion: "1.1.0", state: "up-to-date" }));
+            });
+            expect(view.getByText("Version 1.1.0 · Up to date")).toBeTruthy();
+            await (0, react_1.act)(async () => {
+                jest.advanceTimersByTime(remote_app_update_panel_1.REMOTE_UPDATE_POLL_MS);
+            });
+            expect(getDeviceUpdateStatus).toHaveBeenCalledTimes(3);
+            view.unmount();
+            expect(jest.getTimerCount()).toBe(0);
+        }
+        finally {
+            jest.useRealTimers();
+        }
+    });
+    it("confirms the newer downloading version instead of the older cached version", async () => {
+        getDeviceUpdateStatus.mockResolvedValue(remoteStatus({ state: "downloading", latestVersion: "1.2.0", downloadedVersion: "1.1.0" }));
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "desktop", deviceName: "Desktop" }));
+        react_1.fireEvent.click(await view.findByRole("button", { name: /Update & restart/ }));
+        expect(window.confirm).toHaveBeenCalledWith("Update Desktop to 1.2.0 and restart it?");
+        await view.findByText("Request sent");
+    });
+    it("shows a failed request", async () => {
+        getDeviceUpdateStatus.mockResolvedValue(remoteStatus());
+        installUpdateAndRestartOnDevice.mockRejectedValue(new Error("Permission denied: this device does not allow other devices to update"));
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: "desktop" }));
+        react_1.fireEvent.click(await view.findByRole("button", { name: /Update & restart/ }));
+        await view.findByText(/does not allow other devices to update/);
+    });
+});

package/dist/app-updates/use-app-update-status.d.ts

@@ -0,0 +1,8 @@
+import type { IAppUpdateStatus } from "@peers-app/peers-sdk";
+/**
+ * Subscribe to the local host's application update status.
+ *
+ * @returns The live status, or `undefined` while the host transport is down. Hosts that
+ *   cannot update themselves (PWA, headless) report `supported: false`.
+ */
+export declare function useAppUpdateStatus(): IAppUpdateStatus | undefined;

package/dist/app-updates/use-app-update-status.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAppUpdateStatus = useAppUpdateStatus;
+const hooks_1 = require("../hooks");
+const use_host_contract_1 = require("../hooks/use-host-contract");
+const app_updates_consumer_1 = require("./app-updates-consumer");
+/**
+ * Subscribe to the local host's application update status.
+ *
+ * @returns The live status, or `undefined` while the host transport is down. Hosts that
+ *   cannot update themselves (PWA, headless) report `supported: false`.
+ */
+function useAppUpdateStatus() {
+    const { consumer } = (0, use_host_contract_1.useHostContract)(app_updates_consumer_1.appUpdatesContract);
+    const [status] = (0, hooks_1.useObservable)(consumer?.observables.status);
+    return status;
+}

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

@@ -6,6 +6,7 @@ exports.devicesForUser = devicesForUser;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
+const remote_app_update_panel_1 = require("../../app-updates/remote-app-update-panel");
 const input_1 = require("../../components/input");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const globals_1 = require("../../globals");
@@ -133,7 +134,7 @@ function DevicesSection(props) {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-laptop me-2" }), "My devices"] }), (0, jsx_runtime_1.jsxs)("div", { className: "small text-muted", children: ["Installations signed in to this account. Connection diagnostics stay in", " ", (0, jsx_runtime_1.jsx)("a", { href: "#network-viewer", children: "Network Viewer" }), "."] })] }), (0, jsx_runtime_1.jsx)(activity_view_1.PendingWorkLink, { type: "device" }), (0, jsx_runtime_1.jsxs)("div", { className: "list-group", children: [mine ? ((0, jsx_runtime_1.jsx)(DeviceRow, { device: mine, connection: byId.get(mine.deviceId), isThisDevice: true })) : null, others.map((device) => ((0, jsx_runtime_1.jsx)(DeviceRow, { device: device, connection: byId.get(device.deviceId), isThisDevice: false }, device.deviceId)))] }), !mine && others.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "border rounded p-4 text-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-laptop fs-2 text-muted" }), (0, jsx_runtime_1.jsx)("h6", { className: "mt-2", children: "No devices are registered yet" }), (0, jsx_runtime_1.jsx)("a", { href: `#${identity_routes_1.IDENTITY_PAIR_PATH}`, className: "btn btn-primary btn-sm", children: "Add a device" })] })) : null, mine && others.length === 0 ? ((0, jsx_runtime_1.jsxs)("p", { className: "small text-muted mt-3", children: ["This is your only device. Use ", (0, jsx_runtime_1.jsx)("a", { href: `#${identity_routes_1.IDENTITY_PAIR_PATH}`, children: "Add device" }), " to sign in somewhere else."] })) : null] }));
 }
 function DeviceDetail(props) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsx)("a", { href: `#${identity_routes_1.IDENTITY_DEVICES_PATH}`, className: "btn btn-link btn-sm px-0 mb-2", children: "Back to devices" }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: props.device.name || "Unnamed device" }), props.isThisDevice ? (0, jsx_runtime_1.jsx)(ThisDeviceCard, { device: props.device }) : null, (0, jsx_runtime_1.jsxs)("dl", { className: "row small mb-3", children: [(0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Trust" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8", children: trustLabel(props.device.trustLevel) }), (0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Connection" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8", children: connectionLabel(props.connection) }), (0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Last seen" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8", children: props.device.lastSeen ? new Date(props.device.lastSeen).toLocaleString() : "Unknown" }), (0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Device ID" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8 text-break", children: props.device.deviceId })] }), (0, jsx_runtime_1.jsx)("a", { href: "#network-viewer", className: "btn btn-outline-secondary btn-sm me-2", children: "Open Network Viewer" }), props.isThisDevice ? null : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-danger btn-sm", onClick: () => void forgetDevice(props.device), children: "Forget" }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-xxl p-3", children: [(0, jsx_runtime_1.jsx)("a", { href: `#${identity_routes_1.IDENTITY_DEVICES_PATH}`, className: "btn btn-link btn-sm px-0 mb-2", children: "Back to devices" }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: props.device.name || "Unnamed device" }), props.isThisDevice ? (0, jsx_runtime_1.jsx)(ThisDeviceCard, { device: props.device }) : null, (0, jsx_runtime_1.jsxs)("dl", { className: "row small mb-3", children: [(0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Trust" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8", children: trustLabel(props.device.trustLevel) }), (0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Connection" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8", children: connectionLabel(props.connection) }), (0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Last seen" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8", children: props.device.lastSeen ? new Date(props.device.lastSeen).toLocaleString() : "Unknown" }), (0, jsx_runtime_1.jsx)("dt", { className: "col-sm-4", children: "Device ID" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-sm-8 text-break", children: props.device.deviceId })] }), (0, jsx_runtime_1.jsx)("a", { href: "#network-viewer", className: "btn btn-outline-secondary btn-sm me-2", children: "Open Network Viewer" }), props.isThisDevice ? null : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-danger btn-sm", onClick: () => void forgetDevice(props.device), children: "Forget" })), props.isThisDevice ? null : ((0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: props.device.deviceId, deviceName: props.device.name }))] }));
 }
 async function forgetDevice(device) {
     const confirmed = confirm(`Forget ${device.name || device.deviceId}?`);

package/dist/screens/network-viewer/device-details-modal.js

@@ -4,6 +4,7 @@ exports.DeviceDetailsModal = DeviceDetailsModal;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
+const remote_app_update_panel_1 = require("../../app-updates/remote-app-update-panel");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
 const network_viewer_ipc_1 = require("./network-viewer-ipc");
@@ -84,7 +85,7 @@ function DeviceDetailsModal({ deviceId, onClose, onDisconnect }) {
             overflowY: "auto",
             paddingTop: "2rem",
             paddingBottom: "2rem",
-        }, onClick: onClose, children: (0, jsx_runtime_1.jsxs)("div", { className: "card", style: { maxWidth: "900px", width: "90%", maxHeight: "90vh" }, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-0", children: loading ? "Loading..." : device?.userName || device?.userId || "Device Details" }), device?.userName && ((0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: (0, jsx_runtime_1.jsx)("code", { children: device.userId }) }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [device && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-danger me-2", onClick: handleDisconnect, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-x-circle" }), " Disconnect"] })), (0, jsx_runtime_1.jsx)("button", { className: "btn-close", onClick: onClose, "aria-label": "Close" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card-body", style: { overflowY: "auto", maxHeight: "calc(90vh - 120px)" }, children: [loading && (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {}), !loading && (notFound || !device) && ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning", children: "Device not found or connection has been closed." })), !loading && device && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h6", { className: "border-bottom pb-2 mb-3", children: "Connection Information" }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [device.deviceName && ((0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device Name:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { children: device.deviceName })] })), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device ID:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: device.deviceId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Connection State:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { className: "badge bg-success", children: device.connectionState })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "User Trust:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: device.userTrustLevel || peers_sdk_1.TrustLevel.Unknown })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device Trust:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: device.deviceTrustLevel || peers_sdk_1.TrustLevel.Unknown })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Path Type:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { className: `badge bg-${device.pathType === "direct" ? "success" : "info"}`, children: device.pathType })] }), device.throughDeviceIds && device.throughDeviceIds.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "col-md-12 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Path:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: device.throughDeviceIds.join(" → ") })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h6", { className: "border-bottom pb-2 mb-3", children: "Throughput" }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Send Rate:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("span", { className: "text-success", children: ["\u2191 ", formatRate(device.sendRateMBps)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Receive Rate:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("span", { className: "text-primary", children: ["\u2193 ", formatRate(device.receiveRateMBps)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Total Sent:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { children: formatBytes(device.bytesSent || 0) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Total Received:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { children: formatBytes(device.bytesReceived || 0) })] })] })] }), device.canReadRemoteLogs && (0, jsx_runtime_1.jsx)(remote_logs_panel_1.RemoteLogsPanel, { deviceId: device.deviceId }), device.sharedGroups.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsxs)("h6", { className: "border-bottom pb-2 mb-3", children: ["Shared Groups (", device.sharedGroups.length, ")"] }), (0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-sm table-hover", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Group ID" }), (0, jsx_runtime_1.jsx)("th", { children: "Role" }), (0, jsx_runtime_1.jsx)("th", { children: "Sync Status" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: device.sharedGroups.map((groupId) => {
+        }, onClick: onClose, children: (0, jsx_runtime_1.jsxs)("div", { className: "card", style: { maxWidth: "900px", width: "90%", maxHeight: "90vh" }, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-0", children: loading ? "Loading..." : device?.userName || device?.userId || "Device Details" }), device?.userName && ((0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: (0, jsx_runtime_1.jsx)("code", { children: device.userId }) }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [device && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-danger me-2", onClick: handleDisconnect, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-x-circle" }), " Disconnect"] })), (0, jsx_runtime_1.jsx)("button", { className: "btn-close", onClick: onClose, "aria-label": "Close" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card-body", style: { overflowY: "auto", maxHeight: "calc(90vh - 120px)" }, children: [loading && (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {}), !loading && (notFound || !device) && ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning", children: "Device not found or connection has been closed." })), !loading && device && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h6", { className: "border-bottom pb-2 mb-3", children: "Connection Information" }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [device.deviceName && ((0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device Name:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { children: device.deviceName })] })), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device ID:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: device.deviceId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Connection State:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { className: "badge bg-success", children: device.connectionState })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "User Trust:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: device.userTrustLevel || peers_sdk_1.TrustLevel.Unknown })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device Trust:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: device.deviceTrustLevel || peers_sdk_1.TrustLevel.Unknown })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Path Type:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { className: `badge bg-${device.pathType === "direct" ? "success" : "info"}`, children: device.pathType })] }), device.throughDeviceIds && device.throughDeviceIds.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "col-md-12 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Path:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: device.throughDeviceIds.join(" → ") })] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h6", { className: "border-bottom pb-2 mb-3", children: "Throughput" }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Send Rate:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("span", { className: "text-success", children: ["\u2191 ", formatRate(device.sendRateMBps)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Receive Rate:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("span", { className: "text-primary", children: ["\u2193 ", formatRate(device.receiveRateMBps)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Total Sent:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { children: formatBytes(device.bytesSent || 0) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Total Received:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { children: formatBytes(device.bytesReceived || 0) })] })] })] }), device.canReadRemoteLogs && (0, jsx_runtime_1.jsx)(remote_logs_panel_1.RemoteLogsPanel, { deviceId: device.deviceId }), device.canReadRemoteLogs && ((0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)(remote_app_update_panel_1.RemoteAppUpdatePanel, { deviceId: device.deviceId, deviceName: device.deviceName }) })), device.sharedGroups.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsxs)("h6", { className: "border-bottom pb-2 mb-3", children: ["Shared Groups (", device.sharedGroups.length, ")"] }), (0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-sm table-hover", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "Group ID" }), (0, jsx_runtime_1.jsx)("th", { children: "Role" }), (0, jsx_runtime_1.jsx)("th", { children: "Sync Status" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: device.sharedGroups.map((groupId) => {
                                                             const syncStats = device.syncStatsByGroup[groupId];
                                                             const role = device.roles[groupId];
                                                             return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: groupId }) }), (0, jsx_runtime_1.jsx)("td", { children: role != null ? String(role) : "N/A" }), (0, jsx_runtime_1.jsx)("td", { children: syncStats ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [syncStats.isPreferred && ((0, jsx_runtime_1.jsx)("span", { className: "badge bg-primary me-2", children: "Preferred" })), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: new Date(syncStats.lastSyncTime).toLocaleString() })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "-" })) })] }, groupId));

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

@@ -37,6 +37,7 @@ exports.SettingsPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
+const app_updates_settings_1 = require("../../app-updates/app-updates-settings");
 const input_1 = require("../../components/input");
 const tabs_1 = require("../../components/tabs");
 const tooltip_1 = require("../../components/tooltip");
@@ -65,6 +66,10 @@ const SettingsPage = () => {
                             name: "Appearance",
                             content: (0, jsx_runtime_1.jsx)(AppearanceSettingsTab, {}),
                         },
+                        {
+                            name: "Updates",
+                            content: (0, jsx_runtime_1.jsx)(app_updates_settings_1.AppUpdatesSettings, {}),
+                        },
                         {
                             name: "Advanced",
                             content: (0, jsx_runtime_1.jsx)(AdvancedSettingsTab, {}),

package/dist/tabs-layout/network-status-indicator.d.ts

@@ -1,3 +1,4 @@
+import type { IAppUpdateStatus } from "@peers-app/peers-sdk";
 import { type INetworkStatusViewState } from "./use-network-status";
 /** How long continuous raw syncing stays a green pulse before the indeterminate circle. */
 export declare const SYNCING_GREEN_MS = 4000;
@@ -30,6 +31,8 @@ interface INetworkStatusPresentation {
         count: number;
         colorClass: "text-success" | "text-danger";
     };
+    /** Bottom-left yellow upgrade arrow when this device has an app update available. */
+    updateAvailableOverlay?: boolean;
 }
 /** Convert host availability and network state into accessible indicator text and styling. */
 export declare function getNetworkStatusPresentation(viewState: INetworkStatusViewState, opts?: {
@@ -37,6 +40,15 @@ export declare function getNetworkStatusPresentation(viewState: INetworkStatusVi
     /** Keep the calm green syncing pulse while waiting for stable synced. */
     holdSyncingVisual?: boolean;
 }): INetworkStatusPresentation;
+/**
+ * Add the app-update badge and label to a network status presentation. Applies in every
+ * network state, offline included, because installing does not depend on connectivity.
+ *
+ * @param presentation - Presentation from {@link getNetworkStatusPresentation}.
+ * @param appUpdate - This device's update status, if known.
+ * @returns The presentation, with `updateAvailableOverlay` when an update is available.
+ */
+export declare function withAppUpdate(presentation: INetworkStatusPresentation, appUpdate: IAppUpdateStatus | undefined): INetworkStatusPresentation;
 /** Compact relative time for the status popover (always short enough for one line). */
 export declare function formatRelativeSyncTime(timestampMs: number, nowMs?: number): string;
 /** Prefer a friendly name; otherwise a compact middle-ellipsis of the id. */

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

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SYNCED_STABLE_MS = exports.SYNCING_GREEN_MS = void 0;
 exports.getNetworkStatusPresentation = getNetworkStatusPresentation;
+exports.withAppUpdate = withAppUpdate;
 exports.formatRelativeSyncTime = formatRelativeSyncTime;
 exports.connectionIdentityLabel = connectionIdentityLabel;
 exports.NetworkStatusIndicator = NetworkStatusIndicator;
@@ -12,6 +13,9 @@ exports.TabsStripIndicators = TabsStripIndicators;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const moment_1 = __importDefault(require("moment"));
 const react_1 = require("react");
+const app_update_controls_1 = require("../app-updates/app-update-controls");
+const app_updates_consumer_1 = require("../app-updates/app-updates-consumer");
+const use_app_update_status_1 = require("../app-updates/use-app-update-status");
 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");
@@ -125,6 +129,24 @@ function getNetworkStatusPresentation(viewState, opts) {
         connectedGroupsOverlay: groupsOverlay,
     }, stuckRecoveryCount);
 }
+/**
+ * Add the app-update badge and label to a network status presentation. Applies in every
+ * network state, offline included, because installing does not depend on connectivity.
+ *
+ * @param presentation - Presentation from {@link getNetworkStatusPresentation}.
+ * @param appUpdate - This device's update status, if known.
+ * @returns The presentation, with `updateAvailableOverlay` when an update is available.
+ */
+function withAppUpdate(presentation, appUpdate) {
+    if (!appUpdate?.supported || !(0, app_updates_consumer_1.hasAppUpdate)(appUpdate)) {
+        return presentation;
+    }
+    return {
+        ...presentation,
+        label: `${presentation.label}; ${(0, app_updates_consumer_1.describeAppUpdateStatus)(appUpdate)}`,
+        updateAvailableOverlay: true,
+    };
+}
 function statusMarkBgClass(colorClass) {
     if (colorClass === "text-danger") {
         return "bg-danger";
@@ -211,14 +233,15 @@ 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
+function NetworkStatusDetails({ detailsId, status, appUpdate, 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)(app_update_controls_1.AppUpdatePopoverSection, { status: appUpdate }), (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 }) {
     const viewState = (0, use_network_status_1.useNetworkStatus)();
+    const appUpdate = (0, use_app_update_status_1.useAppUpdateStatus)();
     const [displaySyncing, setDisplaySyncing] = (0, react_1.useState)(false);
     const [syncingLongerThanGreenMs, setSyncingLongerThanGreenMs] = (0, react_1.useState)(false);
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -286,10 +309,10 @@ function NetworkStatusIndicator({ compact = false }) {
         };
     }, [open, diagnosticsReady, connectionCount]);
     const holdSyncingVisual = displaySyncing && !rawIsSyncing;
-    const presentation = getNetworkStatusPresentation(viewState, {
+    const presentation = withAppUpdate(getNetworkStatusPresentation(viewState, {
         syncingLongerThanGreenMs,
         holdSyncingVisual,
-    });
+    }), appUpdate);
     (0, react_1.useEffect)(() => {
         if (!open) {
             return;
@@ -329,7 +352,12 @@ function NetworkStatusIndicator({ compact = false }) {
                                     fontWeight: 700,
                                     right: "-0.28rem",
                                     bottom: "-0.32rem",
-                                }, "aria-hidden": "true", children: presentation.disconnectedGroupsOverlay.count }))] }), !compact && ((0, jsx_runtime_1.jsxs)("span", { className: "small", children: [viewState.status?.connectionCount ?? 0, (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: " connections" })] }))] }), open && ((0, jsx_runtime_1.jsx)(NetworkStatusDetails, { detailsId: detailsId, status: viewState.status, unavailable: viewState.availability !== "ready", connectionsLoadState: connectionsLoadState, onUseInvite: () => {
+                                }, "aria-hidden": "true", children: presentation.disconnectedGroupsOverlay.count })), presentation.updateAvailableOverlay && ((0, jsx_runtime_1.jsx)("i", { className: `network-status-update-badge bi ${app_update_controls_1.APP_UPDATE_ICON_CLASS} text-warning position-absolute`, style: {
+                                    fontSize: "0.5rem",
+                                    lineHeight: 1,
+                                    left: "-0.3rem",
+                                    bottom: "-0.32rem",
+                                }, "aria-hidden": "true" }))] }), !compact && ((0, jsx_runtime_1.jsxs)("span", { className: "small", children: [viewState.status?.connectionCount ?? 0, (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: " connections" })] }))] }), open && ((0, jsx_runtime_1.jsx)(NetworkStatusDetails, { detailsId: detailsId, status: viewState.status, appUpdate: appUpdate, unavailable: viewState.availability !== "ready", connectionsLoadState: connectionsLoadState, onUseInvite: () => {
                     setOpen(false);
                     (0, tabs_state_1.goToTabPath)(identity_routes_1.IDENTITY_ACCEPT_PATH);
                 }, onOpenIdentity: () => {

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

@@ -13,12 +13,40 @@ const network_status_indicator_1 = require("./network-status-indicator");
 const goToTabPath = jest.fn();
 const getConnections = jest.fn();
 let mockViewState = { availability: "loading" };
+let mockAppUpdate;
+const installUpdateAndRestart = jest.fn();
 jest.mock("./tabs-state", () => ({
     goToTabPath: (...args) => goToTabPath(...args),
 }));
 jest.mock("./use-network-status", () => ({
     useNetworkStatus: () => mockViewState,
 }));
+jest.mock("../app-updates/use-app-update-status", () => ({
+    useAppUpdateStatus: () => mockAppUpdate,
+}));
+jest.mock("../app-updates/app-updates-consumer", () => ({
+    ...jest.requireActual("../app-updates/app-updates-consumer"),
+    getAppUpdatesConsumer: () => Promise.resolve({
+        tools: {
+            installUpdateAndRestart: (...args) => installUpdateAndRestart(...args),
+        },
+    }),
+}));
+function appUpdate(overrides = {}) {
+    return {
+        supported: true,
+        canRestart: true,
+        platform: "darwin",
+        currentVersion: "1.0.0",
+        latestVersion: "1.1.0",
+        downloadedVersion: "1.1.0",
+        state: "downloaded",
+        installOnRestart: true,
+        installOnQuitArmed: true,
+        remoteRestartAllowed: true,
+        ...overrides,
+    };
+}
 jest.mock("../screens/network-viewer/network-viewer-ipc", () => ({
     getNetworkDiagnosticsConsumer: () => Promise.resolve({
         tools: {
@@ -225,9 +253,49 @@ describe("getNetworkStatusPresentation", () => {
         }).colorClass).toBe("text-danger");
     });
 });
+describe("withAppUpdate", () => {
+    const synced = (0, network_status_indicator_1.getNetworkStatusPresentation)({
+        availability: "ready",
+        status: status({ state: "synced" }),
+    });
+    it("leaves the presentation alone without an available update", () => {
+        expect((0, network_status_indicator_1.withAppUpdate)(synced, undefined)).toBe(synced);
+        expect((0, network_status_indicator_1.withAppUpdate)(synced, appUpdate({ state: "up-to-date" }))).toBe(synced);
+        expect((0, network_status_indicator_1.withAppUpdate)(synced, appUpdate({ supported: false }))).toBe(synced);
+        expect((0, network_status_indicator_1.withAppUpdate)(synced, appUpdate({
+            state: "error",
+            latestVersion: "1.0.0",
+            downloadedVersion: undefined,
+            error: "feed unreachable",
+        }))).toBe(synced);
+    });
+    it("keeps the update badge after a failed download while a newer version is known", () => {
+        const presentation = (0, network_status_indicator_1.withAppUpdate)(synced, appUpdate({ state: "error", downloadedVersion: undefined, error: "download failed" }));
+        expect(presentation.updateAvailableOverlay).toBe(true);
+        expect(presentation.label).toBe(`${synced.label}; Version 1.1.0 is available. Update problem: download failed`);
+    });
+    it("adds the update badge and label while an update is available, downloading, or ready", () => {
+        for (const state of ["available", "downloading", "downloaded"]) {
+            const presentation = (0, network_status_indicator_1.withAppUpdate)(synced, appUpdate({ state }));
+            expect(presentation.updateAvailableOverlay).toBe(true);
+            expect(presentation.label).toMatch(/^Network synced; .*1\.1\.0/);
+            expect(presentation.colorClass).toBe(synced.colorClass);
+        }
+    });
+    it("applies offline too", () => {
+        const offline = (0, network_status_indicator_1.getNetworkStatusPresentation)({
+            availability: "ready",
+            status: status({ state: "offline", connectionCount: 0 }),
+        });
+        expect((0, network_status_indicator_1.withAppUpdate)(offline, appUpdate()).updateAvailableOverlay).toBe(true);
+    });
+});
 describe("NetworkStatusIndicator", () => {
     beforeEach(() => {
         mockViewState = { availability: "loading" };
+        mockAppUpdate = undefined;
+        installUpdateAndRestart.mockReset();
+        installUpdateAndRestart.mockResolvedValue({ action: "installing" });
         (0, network_viewer_section_1.networkViewerSection)("main");
         getConnections.mockReset();
         getConnections.mockResolvedValue({ connections: [] });
@@ -286,6 +354,28 @@ describe("NetworkStatusIndicator", () => {
         view.rerender((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
         expect(view.container.querySelector(".bg-danger.rounded-circle")).toBeTruthy();
     });
+    it("shows a bottom-left update badge and an Update & restart action when an update is ready", async () => {
+        mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        expect(view.container.querySelector(".network-status-update-badge")).toBeNull();
+        mockAppUpdate = appUpdate();
+        view.rerender((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        const badge = view.container.querySelector(".network-status-update-badge");
+        expect(badge).toHaveClass("bi-arrow-up-circle-fill", "text-warning");
+        expect(badge).toHaveStyle({ left: "-0.3rem", bottom: "-0.32rem" });
+        react_1.fireEvent.click(view.getByRole("button", { name: /Version 1\.1\.0 is ready to install/ }));
+        const section = view.getByTestId("app-update-section");
+        expect(section).toHaveTextContent("Installs automatically the next time Peers restarts");
+        react_1.fireEvent.click(view.getByRole("button", { name: /Update & restart/ }));
+        await (0, react_1.waitFor)(() => expect(installUpdateAndRestart).toHaveBeenCalledTimes(1));
+    });
+    it("omits the install-on-restart note when nothing is armed to install", async () => {
+        mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+        mockAppUpdate = appUpdate({ installOnRestart: false, installOnQuitArmed: false });
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        await openNetworkDetails(view, /ready to install/);
+        expect(view.getByTestId("app-update-section")).not.toHaveTextContent("Installs automatically");
+    });
     it("shows a yellow disconnected-groups count when synced with offline groups", () => {
         mockViewState = {
             availability: "ready",

package/package.json

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