@peers-app/peers-ui 0.26.0 → 0.26.2

package/src/app-updates/remote-app-update-panel.test.tsx

@@ -0,0 +1,205 @@
+import type { IAppUpdateStatus } from "@peers-app/peers-sdk";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
+import { REMOTE_UPDATE_POLL_MS, RemoteAppUpdatePanel } from "./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: unknown[]) => getDeviceUpdateStatus(...args),
+        installUpdateAndRestartOnDevice: (...args: unknown[]) =>
+          installUpdateAndRestartOnDevice(...args),
+      },
+    }),
+}));
+
+function remoteStatus(overrides: Partial<IAppUpdateStatus> = {}): IAppUpdateStatus {
+  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 = render(<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" });
+
+    fireEvent.click(button);
+    expect(window.confirm).toHaveBeenCalledWith("Update Desktop to 1.1.0 and restart it?");
+    await 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 = render(<RemoteAppUpdatePanel deviceId="desktop" />);
+    fireEvent.click(await view.findByRole("button", { name: /^Restart$/ }));
+    expect(window.confirm).toHaveBeenCalledWith(
+      "Restart desktop? It will check for an update first.",
+    );
+    await waitFor(() => expect(installUpdateAndRestartOnDevice).toHaveBeenCalled());
+  });
+
+  it("does nothing when the confirmation is declined", async () => {
+    (window.confirm as jest.Mock).mockReturnValue(false);
+    getDeviceUpdateStatus.mockResolvedValue(remoteStatus());
+    const view = render(<RemoteAppUpdatePanel deviceId="desktop" />);
+    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 = render(<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 = render(<RemoteAppUpdatePanel deviceId="linux-box" />);
+    await 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 = render(<RemoteAppUpdatePanel deviceId="desktop" />);
+    await 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 = render(<RemoteAppUpdatePanel deviceId="desktop" />);
+    await view.findByText("Not reachable: Device desktop is not connected");
+    getDeviceUpdateStatus.mockResolvedValue(remoteStatus());
+    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 = render(<RemoteAppUpdatePanel deviceId="desktop" />);
+    await view.findByRole("button", { name: /Update & restart/ });
+    let finish!: (status: IAppUpdateStatus) => void;
+    getDeviceUpdateStatus.mockImplementationOnce(
+      () =>
+        new Promise<IAppUpdateStatus>((resolve) => {
+          finish = resolve;
+        }),
+    );
+    view.rerender(<RemoteAppUpdatePanel deviceId="another-desktop" />);
+    expect(view.queryByRole("button", { name: /Update & restart/ })).toBeNull();
+    expect(view.getByText("Checking this device…")).toBeTruthy();
+    await 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 = render(<RemoteAppUpdatePanel deviceId="desktop" />);
+      await act(async () => {});
+      let finish!: (status: IAppUpdateStatus) => void;
+      getDeviceUpdateStatus.mockImplementationOnce(
+        () =>
+          new Promise<IAppUpdateStatus>((resolve) => {
+            finish = resolve;
+          }),
+      );
+      fireEvent.click(view.getByRole("button", { name: /Update & restart/ }));
+      await act(async () => {});
+      await act(async () => {
+        jest.advanceTimersByTime(REMOTE_UPDATE_POLL_MS * 3);
+      });
+      expect(getDeviceUpdateStatus).toHaveBeenCalledTimes(2);
+      await act(async () => {
+        finish(remoteStatus({ currentVersion: "1.1.0", state: "up-to-date" }));
+      });
+      expect(view.getByText("Version 1.1.0 · Up to date")).toBeTruthy();
+      await act(async () => {
+        jest.advanceTimersByTime(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 = render(<RemoteAppUpdatePanel deviceId="desktop" deviceName="Desktop" />);
+    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 = render(<RemoteAppUpdatePanel deviceId="desktop" />);
+    fireEvent.click(await view.findByRole("button", { name: /Update & restart/ }));
+    await view.findByText(/does not allow other devices to update/);
+  });
+});

package/src/app-updates/remote-app-update-panel.tsx

@@ -0,0 +1,210 @@
+import type { IAppUpdateStatus } from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+import { APP_UPDATE_ICON_CLASS } from "./app-update-controls";
+import {
+  classifyAppUpdatesError,
+  describeAppUpdateStatus,
+  getAppUpdatesConsumer,
+  getAppUpdateVersion,
+  hasAppUpdate,
+  isAppRestarting,
+} from "./app-updates-consumer";
+
+/** How often the panel refreshes the target's status after an update or restart request. */
+export const REMOTE_UPDATE_POLL_MS = 5_000;
+/** How long the panel keeps refreshing after a request. */
+export const REMOTE_UPDATE_POLL_DURATION_MS = 3 * 60_000;
+
+type RemoteUpdateState =
+  | { kind: "loading" }
+  | { kind: "hidden" }
+  | { kind: "unreachable"; message: string }
+  | { kind: "error"; message: string }
+  | { kind: "ready"; status: IAppUpdateStatus };
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+function disabledReason(status: IAppUpdateStatus): string | undefined {
+  if (!status.remoteRestartAllowed) {
+    return "This device does not allow remote restarts. Turn on “Allow my other devices to update and restart this device” in its Settings → Updates.";
+  }
+  if (status.installNeedsElevation) {
+    return "Installing updates on this device needs an administrator password, so update it at the device.";
+  }
+  return undefined;
+}
+
+/**
+ * Card showing another device's app version with an **Update & restart** action.
+ *
+ * The local host relays both calls to the target, which requires that it trusts this user
+ * as `Self` and allows remote restarts. Renders nothing when the target cannot update or
+ * restart itself, runs a build without App Updates, or does not trust this user.
+ *
+ * @param props.deviceId - Target device.
+ * @param props.deviceName - Name used in the confirmation prompt.
+ */
+export function RemoteAppUpdatePanel({
+  deviceId,
+  deviceName,
+}: {
+  deviceId: string;
+  deviceName?: string;
+}) {
+  // Route changes must not keep another device's status, consent switch, or pending request.
+  return <DeviceAppUpdatePanel key={deviceId} deviceId={deviceId} deviceName={deviceName} />;
+}
+
+function DeviceAppUpdatePanel({ deviceId, deviceName }: { deviceId: string; deviceName?: string }) {
+  const [state, setState] = useState<RemoteUpdateState>({ kind: "loading" });
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [requestedAt, setRequestedAt] = useState<number>();
+  const [requestError, setRequestError] = useState<string>();
+  const [sending, setSending] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+    let poll: ReturnType<typeof setTimeout> | undefined;
+    const load = () => {
+      void getAppUpdatesConsumer()
+        .then((appUpdates) => appUpdates.tools.getDeviceUpdateStatus({ deviceId }))
+        .then((status) => {
+          if (active) {
+            setState(status.canRestart ? { kind: "ready", status } : { kind: "hidden" });
+          }
+        })
+        .catch((error: unknown) => {
+          if (!active) return;
+          const kind = classifyAppUpdatesError(error);
+          if (kind === "unavailable" || kind === "denied") {
+            setState({ kind: "hidden" });
+          } else {
+            setState({
+              kind: kind === "unreachable" ? "unreachable" : "error",
+              message: errorMessage(error),
+            });
+          }
+        })
+        .finally(() => {
+          // Wait for the preceding RPC: a slow target can take up to 30s to answer.
+          // An interval would overlap calls and discard every response as stale.
+          if (
+            active &&
+            requestedAt !== undefined &&
+            Date.now() - requestedAt < REMOTE_UPDATE_POLL_DURATION_MS
+          ) {
+            poll = setTimeout(load, REMOTE_UPDATE_POLL_MS);
+          }
+        });
+    };
+    load();
+    return () => {
+      active = false;
+      if (poll) clearTimeout(poll);
+    };
+  }, [deviceId, refreshKey, requestedAt]);
+
+  useEffect(() => {
+    if (requestedAt === undefined) return;
+    const stop = setTimeout(() => setRequestedAt(undefined), REMOTE_UPDATE_POLL_DURATION_MS);
+    return () => {
+      clearTimeout(stop);
+    };
+  }, [requestedAt]);
+
+  if (state.kind === "hidden") {
+    return null;
+  }
+
+  const requestUpdate = (status: IAppUpdateStatus) => {
+    const name = deviceName || deviceId;
+    const prompt = hasAppUpdate(status)
+      ? `Update ${name} to ${getAppUpdateVersion(status)} and restart it?`
+      : `Restart ${name}? It will check for an update first.`;
+    if (!confirm(prompt)) return;
+    setSending(true);
+    setRequestError(undefined);
+    getAppUpdatesConsumer()
+      .then((appUpdates) => appUpdates.tools.installUpdateAndRestartOnDevice({ deviceId }))
+      .then(() => {
+        setRequestedAt(Date.now());
+        setRefreshKey((key) => key + 1);
+      })
+      .catch((error: unknown) => setRequestError(errorMessage(error)))
+      .finally(() => setSending(false));
+  };
+
+  return (
+    <div className="card mt-3" data-testid="remote-app-update">
+      <div className="card-body py-2 px-3 small">
+        <div className="fw-semibold mb-1">App version</div>
+        {state.kind === "loading" && <div className="text-muted">Checking this device…</div>}
+        {state.kind === "unreachable" && (
+          <div className="text-muted">
+            {requestedAt !== undefined ? "Restarting…" : `Not reachable: ${state.message}`}
+          </div>
+        )}
+        {state.kind === "error" && <div className="text-danger">{state.message}</div>}
+        {(state.kind === "unreachable" || state.kind === "error") && (
+          <button
+            type="button"
+            className="btn btn-sm btn-outline-secondary mt-2"
+            onClick={() => {
+              setState({ kind: "loading" });
+              setRefreshKey((key) => key + 1);
+            }}
+          >
+            Retry
+          </button>
+        )}
+        {state.kind === "ready" && (
+          <RemoteStatus
+            status={state.status}
+            sending={sending}
+            requested={requestedAt !== undefined}
+            onRequest={() => requestUpdate(state.status)}
+          />
+        )}
+        {requestError && <div className="text-danger mt-1">{requestError}</div>}
+      </div>
+    </div>
+  );
+}
+
+function RemoteStatus({
+  status,
+  sending,
+  requested,
+  onRequest,
+}: {
+  status: IAppUpdateStatus;
+  sending: boolean;
+  requested: boolean;
+  onRequest: () => void;
+}) {
+  const reason = disabledReason(status);
+  const update = hasAppUpdate(status);
+  return (
+    <>
+      <div className="mb-2">
+        {status.currentVersion ? `Version ${status.currentVersion} · ` : ""}
+        {describeAppUpdateStatus(status)}
+      </div>
+      <button
+        type="button"
+        className={`btn btn-sm ${update ? "btn-warning" : "btn-outline-secondary"}`}
+        disabled={Boolean(reason) || sending || isAppRestarting(status)}
+        onClick={onRequest}
+      >
+        <i className={`bi ${APP_UPDATE_ICON_CLASS} me-1`} aria-hidden="true" />
+        {update ? "Update & restart" : "Restart"}
+      </button>
+      {requested && !isAppRestarting(status) && (
+        <span className="text-muted ms-2">Request sent</span>
+      )}
+      {reason && <div className="text-muted mt-1">{reason}</div>}
+    </>
+  );
+}

package/src/app-updates/use-app-update-status.ts

@@ -0,0 +1,16 @@
+import type { IAppUpdateStatus } from "@peers-app/peers-sdk";
+import { useObservable } from "../hooks";
+import { useHostContract } from "../hooks/use-host-contract";
+import { appUpdatesContract } from "./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`.
+ */
+export function useAppUpdateStatus(): IAppUpdateStatus | undefined {
+  const { consumer } = useHostContract(appUpdatesContract);
+  const [status] = useObservable<IAppUpdateStatus | undefined>(consumer?.observables.status);
+  return status;
+}

package/src/screens/devices/devices-list.tsx

@@ -8,6 +8,7 @@ import {
   thisDeviceId,
 } from "@peers-app/peers-sdk";
 import { useEffect, useState } from "react";
+import { RemoteAppUpdatePanel } from "../../app-updates/remote-app-update-panel";
 import { Input } from "../../components/input";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { mainContentPath } from "../../globals";
@@ -317,6 +318,9 @@ function DeviceDetail(props: {
           Forget
         </button>
       )}
+      {props.isThisDevice ? null : (
+        <RemoteAppUpdatePanel deviceId={props.device.deviceId} deviceName={props.device.name} />
+      )}
     </div>
   );
 }

package/src/screens/network-viewer/device-details-modal.tsx

@@ -1,5 +1,6 @@
 import { type INetworkDeviceDetails, TrustLevel } from "@peers-app/peers-sdk";
 import { useCallback, useEffect, useState } from "react";
+import { RemoteAppUpdatePanel } from "../../app-updates/remote-app-update-panel";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { TrustLevelBadge } from "../../components/trust-level-badge";
 import { getNetworkControlConsumer, getNetworkDiagnosticsConsumer } from "./network-viewer-ipc";
@@ -210,6 +211,11 @@ export function DeviceDetailsModal({ deviceId, onClose, onDisconnect }: IDeviceD
               </div>
 
               {device.canReadRemoteLogs && <RemoteLogsPanel deviceId={device.deviceId} />}
+              {device.canReadRemoteLogs && (
+                <div className="mb-4">
+                  <RemoteAppUpdatePanel deviceId={device.deviceId} deviceName={device.deviceName} />
+                </div>
+              )}
 
               {/* Shared Groups */}
               {device.sharedGroups.length > 0 && (

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

@@ -9,6 +9,7 @@ import {
 } from "@peers-app/peers-sdk";
 import type React from "react";
 import { useEffect, useState } from "react";
+import { AppUpdatesSettings } from "../../app-updates/app-updates-settings";
 import { Input } from "../../components/input";
 import { Tabs } from "../../components/tabs";
 import { Tooltip } from "../../components/tooltip";
@@ -54,6 +55,10 @@ export const SettingsPage: React.FC = () => {
               name: "Appearance",
               content: <AppearanceSettingsTab />,
             },
+            {
+              name: "Updates",
+              content: <AppUpdatesSettings />,
+            },
             {
               name: "Advanced",
               content: <AdvancedSettingsTab />,

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

@@ -1,4 +1,8 @@
-import type { INetworkConnectionInfo, INetworkStatusSummary } from "@peers-app/peers-sdk";
+import type {
+  IAppUpdateStatus,
+  INetworkConnectionInfo,
+  INetworkStatusSummary,
+} from "@peers-app/peers-sdk";
 import { TrustLevel } from "@peers-app/peers-sdk";
 import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import moment from "moment";
@@ -11,12 +15,15 @@ import {
   NetworkStatusIndicator,
   SYNCED_STABLE_MS,
   SYNCING_GREEN_MS,
+  withAppUpdate,
 } from "./network-status-indicator";
 import type { INetworkStatusViewState } from "./use-network-status";
 
 const goToTabPath = jest.fn();
 const getConnections = jest.fn();
 let mockViewState: INetworkStatusViewState = { availability: "loading" };
+let mockAppUpdate: IAppUpdateStatus | undefined;
+const installUpdateAndRestart = jest.fn();
 
 jest.mock("./tabs-state", () => ({
   goToTabPath: (...args: unknown[]) => goToTabPath(...args),
@@ -26,6 +33,36 @@ 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: unknown[]) => installUpdateAndRestart(...args),
+      },
+    }),
+}));
+
+function appUpdate(overrides: Partial<IAppUpdateStatus> = {}): IAppUpdateStatus {
+  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({
@@ -285,9 +322,64 @@ describe("getNetworkStatusPresentation", () => {
   });
 });
 
+describe("withAppUpdate", () => {
+  const synced = getNetworkStatusPresentation({
+    availability: "ready",
+    status: status({ state: "synced" }),
+  });
+
+  it("leaves the presentation alone without an available update", () => {
+    expect(withAppUpdate(synced, undefined)).toBe(synced);
+    expect(withAppUpdate(synced, appUpdate({ state: "up-to-date" }))).toBe(synced);
+    expect(withAppUpdate(synced, appUpdate({ supported: false }))).toBe(synced);
+    expect(
+      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 = 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"] as const) {
+      const presentation = 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 = getNetworkStatusPresentation({
+      availability: "ready",
+      status: status({ state: "offline", connectionCount: 0 }),
+    });
+    expect(withAppUpdate(offline, appUpdate()).updateAvailableOverlay).toBe(true);
+  });
+});
+
 describe("NetworkStatusIndicator", () => {
   beforeEach(() => {
     mockViewState = { availability: "loading" };
+    mockAppUpdate = undefined;
+    installUpdateAndRestart.mockReset();
+    installUpdateAndRestart.mockResolvedValue({ action: "installing" });
     networkViewerSection("main");
     getConnections.mockReset();
     getConnections.mockResolvedValue({ connections: [] });
@@ -353,6 +445,32 @@ describe("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 = render(<NetworkStatusIndicator />);
+    expect(view.container.querySelector(".network-status-update-badge")).toBeNull();
+
+    mockAppUpdate = appUpdate();
+    view.rerender(<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" });
+
+    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");
+    fireEvent.click(view.getByRole("button", { name: /Update & restart/ }));
+    await 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 = render(<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",