@peers-app/peers-ui 0.30.5 → 0.31.0

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { Typeahead, type TypeaheadItem } from "./components/typeahead";
 export { isDesktop, mainContentPath } from "./globals";
 export * from "./hooks";
 export { openLink } from "./host-shell/host-shell-consumer";
+export * from "./local-network/local-network-access";
+export * from "./local-network/local-network-offer";
 export * from "./operator-console/operator-console";
 export * from "./operator-console/operator-console-state";
 export { type GlobalOverlay, globalOverlays, registerGlobalOverlay, unregisterGlobalOverlay, } from "./root-layout/global-overlays";

package/dist/index.js

@@ -32,6 +32,8 @@ Object.defineProperty(exports, "mainContentPath", { enumerable: true, get: funct
 __exportStar(require("./hooks"), exports);
 var host_shell_consumer_1 = require("./host-shell/host-shell-consumer");
 Object.defineProperty(exports, "openLink", { enumerable: true, get: function () { return host_shell_consumer_1.openLink; } });
+__exportStar(require("./local-network/local-network-access"), exports);
+__exportStar(require("./local-network/local-network-offer"), exports);
 __exportStar(require("./operator-console/operator-console"), exports);
 __exportStar(require("./operator-console/operator-console-state"), exports);
 var global_overlays_1 = require("./root-layout/global-overlays");

package/dist/local-network/local-network-access.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Direct connections on the home network, as the UI sees them.
+ *
+ * In the PWA, Chrome gates connections to LAN addresses behind a site permission ("devices on
+ * your local network"). A denial sticks, so the app asks only when it can explain why and has a
+ * desktop to connect to: a card on the home screen, once, and a row on the Network page. The
+ * PWA fills {@link localNetworkAccess} and registers the dial with
+ * {@link setLocalNetworkConnectHandler}; other hosts leave it undefined and show nothing.
+ */
+/**
+ * Chrome's local-network permission for peers.app: `prompt` until the user answers, then
+ * `granted` or `denied`. `unsupported` when the browser has no such permission to query.
+ */
+export type LocalNetworkPermission = "granted" | "prompt" | "denied" | "unsupported";
+/** One of the user's desktops the PWA can offer to connect to directly. */
+export interface LocalNetworkDesktop {
+    deviceId: string;
+    /** What the user calls it, or a generic name. */
+    name: string;
+}
+/** What the PWA knows about reaching the user's desktops directly on the LAN. */
+export interface LocalNetworkAccessState {
+    permission: LocalNetworkPermission;
+    /** The phone is on mobile data, where the home network isn't reachable. */
+    cellular: boolean;
+    /** A desktop of the user's that publishes a direct address; none means nothing to offer. */
+    desktop?: LocalNetworkDesktop;
+    /** A connect the user asked for is running (Chrome's prompt may be up). */
+    connecting: boolean;
+    /** The last connect the user asked for. */
+    lastResult?: {
+        ok: boolean;
+        message: string;
+        at: number;
+    };
+    /**
+     * Android may be blocking Chrome from the LAN: Chrome's own permission is granted, but direct
+     * dials to an online desktop fail at once. This is a heuristic, not an OS permission check.
+     */
+    androidBlocked: boolean;
+}
+/** Undefined outside the PWA, where the app reaches the LAN on its own. */
+export declare const localNetworkAccess: import("@peers-app/peers-sdk").Observable<LocalNetworkAccessState | undefined>;
+/** The user tapped Not now (or Connect) on the home-screen card: it isn't shown again. */
+export declare const localNetworkOfferDismissed: import("@peers-app/peers-sdk").PersistentVar<boolean>;
+/** The user dismissed the one-time notice that Android is blocking Chrome. */
+export declare const localNetworkAndroidNoticeDismissed: import("@peers-app/peers-sdk").PersistentVar<boolean>;
+/** The PWA registers the dial that a tap on Connect runs (it brings up Chrome's prompt). */
+export declare function setLocalNetworkConnectHandler(handler: (() => Promise<void>) | undefined): void;
+/**
+ * Runs the registered connect, if any. A failed dial lands in
+ * {@link LocalNetworkAccessState.lastResult}; anything thrown is logged, never left unhandled
+ * (the UI calls this without awaiting it).
+ */
+export declare function connectOnLocalNetwork(): Promise<void>;
+/** Whether the home-screen card should show now; see the module doc. */
+export declare function shouldOfferLocalNetwork(state: LocalNetworkAccessState | undefined, dismissed: boolean): boolean;
+/** The Android guidance, shared by the notice and the Network page. */
+export declare const ANDROID_LOCAL_NETWORK_HELP = "Android may be blocking Chrome from your local network. Check Settings \u2192 Apps \u2192 Chrome \u2192 Permissions \u2192 Nearby devices \u2192 Allow. If it is already allowed, check the desktop and its firewall.";
+/** The guidance for a permission the user denied in Chrome. */
+export declare const CHROME_LOCAL_NETWORK_HELP = "Chrome is blocking peers.app from devices on your local network. To allow it: Chrome \u2192 Settings \u2192 Site settings \u2192 All sites \u2192 peers.app \u2192 allow devices on your local network.";

package/dist/local-network/local-network-access.js

@@ -0,0 +1,55 @@
+"use strict";
+/**
+ * Direct connections on the home network, as the UI sees them.
+ *
+ * In the PWA, Chrome gates connections to LAN addresses behind a site permission ("devices on
+ * your local network"). A denial sticks, so the app asks only when it can explain why and has a
+ * desktop to connect to: a card on the home screen, once, and a row on the Network page. The
+ * PWA fills {@link localNetworkAccess} and registers the dial with
+ * {@link setLocalNetworkConnectHandler}; other hosts leave it undefined and show nothing.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHROME_LOCAL_NETWORK_HELP = exports.ANDROID_LOCAL_NETWORK_HELP = exports.localNetworkAndroidNoticeDismissed = exports.localNetworkOfferDismissed = exports.localNetworkAccess = void 0;
+exports.setLocalNetworkConnectHandler = setLocalNetworkConnectHandler;
+exports.connectOnLocalNetwork = connectOnLocalNetwork;
+exports.shouldOfferLocalNetwork = shouldOfferLocalNetwork;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+/** Undefined outside the PWA, where the app reaches the LAN on its own. */
+exports.localNetworkAccess = (0, peers_sdk_1.observable)(undefined);
+/** The user tapped Not now (or Connect) on the home-screen card: it isn't shown again. */
+exports.localNetworkOfferDismissed = (0, peers_sdk_1.deviceVar)("localNetwork:offerDismissed", {
+    defaultValue: false,
+});
+/** The user dismissed the one-time notice that Android is blocking Chrome. */
+exports.localNetworkAndroidNoticeDismissed = (0, peers_sdk_1.deviceVar)("localNetwork:androidNoticeDismissed", { defaultValue: false });
+let connectHandler;
+/** The PWA registers the dial that a tap on Connect runs (it brings up Chrome's prompt). */
+function setLocalNetworkConnectHandler(handler) {
+    connectHandler = handler;
+}
+/**
+ * Runs the registered connect, if any. A failed dial lands in
+ * {@link LocalNetworkAccessState.lastResult}; anything thrown is logged, never left unhandled
+ * (the UI calls this without awaiting it).
+ */
+async function connectOnLocalNetwork() {
+    try {
+        await connectHandler?.();
+    }
+    catch (error) {
+        console.warn("[LocalNetwork] Connect failed", error);
+    }
+}
+/** Whether the home-screen card should show now; see the module doc. */
+function shouldOfferLocalNetwork(state, dismissed) {
+    return (!!state &&
+        !dismissed &&
+        state.permission === "prompt" &&
+        !!state.desktop &&
+        !state.cellular &&
+        !state.connecting);
+}
+/** The Android guidance, shared by the notice and the Network page. */
+exports.ANDROID_LOCAL_NETWORK_HELP = "Android may be blocking Chrome from your local network. Check Settings → Apps → Chrome → Permissions → Nearby devices → Allow. If it is already allowed, check the desktop and its firewall.";
+/** The guidance for a permission the user denied in Chrome. */
+exports.CHROME_LOCAL_NETWORK_HELP = "Chrome is blocking peers.app from devices on your local network. To allow it: Chrome → Settings → Site settings → All sites → peers.app → allow devices on your local network.";

package/dist/local-network/local-network-offer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The home screen's one-time cards: the offer to connect directly on this Wi-Fi (which brings
+ * up Chrome's local-network prompt), and the notice when Android is blocking Chrome. Renders
+ * nothing outside the PWA or once dismissed.
+ */
+export declare function LocalNetworkHomeCards(): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * The Network page's row for direct connections on the home network: the permission state, a
+ * Connect button while Chrome hasn't been asked, and how to undo a block. PWA only.
+ */
+export declare function LocalNetworkRow(): import("react/jsx-runtime").JSX.Element | null;

package/dist/local-network/local-network-offer.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalNetworkHomeCards = LocalNetworkHomeCards;
+exports.LocalNetworkRow = LocalNetworkRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../hooks");
+const local_network_access_1 = require("./local-network-access");
+/**
+ * The home screen's one-time cards: the offer to connect directly on this Wi-Fi (which brings
+ * up Chrome's local-network prompt), and the notice when Android is blocking Chrome. Renders
+ * nothing outside the PWA or once dismissed.
+ */
+function LocalNetworkHomeCards() {
+    const [state] = (0, hooks_1.useObservable)(local_network_access_1.localNetworkAccess);
+    const [offerDismissed] = (0, hooks_1.useObservable)(local_network_access_1.localNetworkOfferDismissed);
+    const [noticeDismissed] = (0, hooks_1.useObservable)(local_network_access_1.localNetworkAndroidNoticeDismissed);
+    if (state?.androidBlocked && !noticeDismissed) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", "data-testid": "local-network-android-notice", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("p", { className: "card-text mb-2", children: local_network_access_1.ANDROID_LOCAL_NETWORK_HELP }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-secondary", onClick: () => (0, local_network_access_1.localNetworkAndroidNoticeDismissed)(true), children: "OK" })] }) }));
+    }
+    if (!(0, local_network_access_1.shouldOfferLocalNetwork)(state, offerDismissed))
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "card mb-3", "data-testid": "local-network-offer", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsxs)("h6", { className: "card-title", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-wifi me-2" }), "Connect directly to your devices on this Wi-Fi"] }), (0, jsx_runtime_1.jsx)("p", { className: "card-text small mb-2", children: "Works even when Peers' server can't be reached. Chrome will ask to let peers.app connect to devices on your local network." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-primary me-2", onClick: () => {
+                        (0, local_network_access_1.localNetworkOfferDismissed)(true);
+                        void (0, local_network_access_1.connectOnLocalNetwork)();
+                    }, children: "Connect" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-secondary", onClick: () => (0, local_network_access_1.localNetworkOfferDismissed)(true), children: "Not now" })] }) }));
+}
+/**
+ * The Network page's row for direct connections on the home network: the permission state, a
+ * Connect button while Chrome hasn't been asked, and how to undo a block. PWA only.
+ */
+function LocalNetworkRow() {
+    const [state] = (0, hooks_1.useObservable)(local_network_access_1.localNetworkAccess);
+    if (!state)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", "data-testid": "local-network-row", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Direct on Wi-Fi:" }), " ", (0, jsx_runtime_1.jsx)(LocalNetworkStatus, { state: state })] }));
+}
+function LocalNetworkStatus({ state }) {
+    if (state.androidBlocked)
+        return (0, jsx_runtime_1.jsx)("span", { className: "text-warning", children: local_network_access_1.ANDROID_LOCAL_NETWORK_HELP });
+    if (state.permission === "denied")
+        return (0, jsx_runtime_1.jsx)("span", { className: "text-warning", children: local_network_access_1.CHROME_LOCAL_NETWORK_HELP });
+    if (state.permission === "unsupported")
+        return (0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "Not available in this browser" });
+    const result = state.lastResult && ((0, jsx_runtime_1.jsx)("span", { className: `ms-2 small ${state.lastResult.ok ? "text-success" : "text-warning"}`, children: state.lastResult.message }));
+    if (state.permission === "granted")
+        return ((0, jsx_runtime_1.jsxs)("span", { children: ["Allowed", state.cellular ? " (not used on mobile data)" : "", result] }));
+    if (!state.desktop)
+        return (0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "No desktop of yours offers a direct connection yet" });
+    return ((0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-primary", disabled: state.connecting || state.cellular, onClick: () => void (0, local_network_access_1.connectOnLocalNetwork)(), title: "Chrome will ask to let peers.app connect to devices on your local network", children: state.connecting ? "Connecting…" : `Connect to ${state.desktop.name}` }), state.cellular && (0, jsx_runtime_1.jsx)("span", { className: "ms-2 small text-muted", children: "Join your Wi-Fi first" }), result] }));
+}

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

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
 const hooks_1 = require("../../hooks");
+const local_network_offer_1 = require("../../local-network/local-network-offer");
 const ui_loader_1 = require("../../ui-router/ui-loader");
 const connection_troubleshooter_1 = require("./connection-troubleshooter");
 const device_details_modal_1 = require("./device-details-modal");
@@ -178,7 +179,7 @@ function NetworkViewerList() {
     if (showTroubleshooter) {
         return (0, jsx_runtime_1.jsx)(connection_troubleshooter_1.ConnectionTroubleshooter, { onBack: () => setShowTroubleshooter(false) });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Network Viewer" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, network_viewer_ipc_1.getNetworkViewerPlatformApi)()?.runDiagnostics && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-warning", onClick: () => setShowTroubleshooter(true), title: "Run connection diagnostics", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-stethoscope me-1" }), "Troubleshoot"] })), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-secondary", onClick: () => (0, network_viewer_section_1.networkViewerSection)("sync-recovery"), title: "Records that could not be materialized", children: "Sync recovery" }), (0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-primary", onClick: handleRefresh, disabled: refreshing, children: [(0, jsx_runtime_1.jsx)("i", { className: `bi bi-arrow-clockwise ${refreshing ? "spin" : ""}` }), refreshing ? " Refreshing..." : " Refresh"] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Local Device" }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device ID:" }), " ", (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: overview.localDeviceId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("strong", { children: "User ID:" }), " ", (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: overview.localUserId })] })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "row mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-md-4", children: (0, jsx_runtime_1.jsx)("div", { className: "card", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-2", children: (0, jsx_runtime_1.jsx)(usage_graph_1.UsageGraph, { label: "Connections", fetchUsage: async () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Network Viewer" }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2", children: [(0, network_viewer_ipc_1.getNetworkViewerPlatformApi)()?.runDiagnostics && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline-warning", onClick: () => setShowTroubleshooter(true), title: "Run connection diagnostics", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-stethoscope me-1" }), "Troubleshoot"] })), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-secondary", onClick: () => (0, network_viewer_section_1.networkViewerSection)("sync-recovery"), title: "Records that could not be materialized", children: "Sync recovery" }), (0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-primary", onClick: handleRefresh, disabled: refreshing, children: [(0, jsx_runtime_1.jsx)("i", { className: `bi bi-arrow-clockwise ${refreshing ? "spin" : ""}` }), refreshing ? " Refreshing..." : " Refresh"] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Local Device" }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Device ID:" }), " ", (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: overview.localDeviceId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6", children: [(0, jsx_runtime_1.jsx)("strong", { children: "User ID:" }), " ", (0, jsx_runtime_1.jsx)("code", { className: "text-muted small", children: overview.localUserId })] })] }), (0, jsx_runtime_1.jsx)(local_network_offer_1.LocalNetworkRow, {})] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "row mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-md-4", children: (0, jsx_runtime_1.jsx)("div", { className: "card", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-2", children: (0, jsx_runtime_1.jsx)(usage_graph_1.UsageGraph, { label: "Connections", fetchUsage: async () => {
                                         const diagnostics = await (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)();
                                         const { overview: currentOverview } = await diagnostics.tools.getOverview();
                                         return currentOverview.totalConnections;

package/dist/tabs-layout/tabs-layout.js

@@ -44,6 +44,7 @@ const group_switcher_1 = require("../components/group-switcher");
 const router_1 = require("../components/router");
 const globals_1 = require("../globals");
 const hooks_1 = require("../hooks");
+const local_network_offer_1 = require("../local-network/local-network-offer");
 const identity_routes_1 = require("../screens/identity/identity-routes");
 const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown");
 const system_apps_1 = require("../system-apps");
@@ -351,7 +352,7 @@ function AppLauncherTab({ isMobile }) {
         }
         (0, tabs_state_1.goToTabPath)(appItem.path);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `container-fluid ${isMobile ? "p-2" : "p-4"}`, style: { maxHeight: "100%", overflowY: "auto" }, children: [(0, jsx_runtime_1.jsx)("div", { className: isMobile ? "mb-3" : "mb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "position-relative", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search position-absolute", style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `container-fluid ${isMobile ? "p-2" : "p-4"}`, style: { maxHeight: "100%", overflowY: "auto" }, children: [(0, jsx_runtime_1.jsx)(local_network_offer_1.LocalNetworkHomeCards, {}), (0, jsx_runtime_1.jsx)("div", { className: isMobile ? "mb-3" : "mb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "position-relative", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search position-absolute", style: {
                                 left: "12px",
                                 top: "50%",
                                 transform: "translateY(-50%)",

package/package.json

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