@peers-app/peers-ui 0.21.2 → 0.21.4

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

@@ -0,0 +1,333 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("@testing-library/react");
+const moment_1 = __importDefault(require("moment"));
+const network_status_indicator_1 = require("./network-status-indicator");
+const goToTabPath = jest.fn();
+const getConnections = jest.fn();
+let mockViewState = { availability: "loading" };
+jest.mock("./tabs-state", () => ({
+    goToTabPath: (...args) => goToTabPath(...args),
+}));
+jest.mock("./use-network-status", () => ({
+    useNetworkStatus: () => mockViewState,
+}));
+jest.mock("../screens/network-viewer/network-viewer-ipc", () => ({
+    getNetworkDiagnosticsConsumer: () => Promise.resolve({
+        tools: {
+            getConnections: (...args) => getConnections(...args),
+        },
+    }),
+}));
+function status(overrides) {
+    return {
+        state: "synced",
+        connectionCount: 2,
+        syncingContextCount: 0,
+        errorCount: 0,
+        errors: [],
+        ...overrides,
+    };
+}
+function connection(overrides = {}) {
+    return {
+        deviceId: "device-1",
+        userId: "user-1",
+        userName: "Ada",
+        deviceName: "Laptop",
+        userTrustLevel: peers_sdk_1.TrustLevel.Trusted,
+        deviceTrustLevel: peers_sdk_1.TrustLevel.Trusted,
+        connectionState: "connected",
+        sharedGroups: ["group-a"],
+        roles: {},
+        pathType: "direct",
+        latencyMs: 10,
+        errorRate: 0,
+        isServer: false,
+        ...overrides,
+    };
+}
+describe("formatRelativeSyncTime", () => {
+    it("returns now for very recent syncs", () => {
+        const now = Date.parse("2026-07-28T23:43:06.000");
+        expect((0, network_status_indicator_1.formatRelativeSyncTime)(now - 10_000, now)).toBe("now");
+    });
+    it("returns yesterday for the previous calendar day", () => {
+        const now = (0, moment_1.default)("2026-07-28T23:43:06").valueOf();
+        const yesterdayAfternoon = (0, moment_1.default)("2026-07-28T23:43:06")
+            .subtract(1, "day")
+            .hour(18)
+            .minute(0)
+            .second(0)
+            .valueOf();
+        expect((0, network_status_indicator_1.formatRelativeSyncTime)(yesterdayAfternoon, now)).toBe("yesterday");
+    });
+    it("returns a short relative phrase otherwise", () => {
+        const now = Date.parse("2026-07-28T23:43:06.000");
+        expect((0, network_status_indicator_1.formatRelativeSyncTime)(now - 5 * 60_000, now)).toBe("5 minutes ago");
+    });
+});
+describe("connectionIdentityLabel", () => {
+    it("prefers a friendly name", () => {
+        expect((0, network_status_indicator_1.connectionIdentityLabel)("Ada", "00mabcdefghijklmnopqrs")).toEqual({
+            text: "Ada",
+            isId: false,
+            title: "Ada",
+        });
+    });
+    it("middle-ellipsizes raw ids", () => {
+        expect((0, network_status_indicator_1.connectionIdentityLabel)(undefined, "00mabcdefghijklmnopqrs")).toEqual({
+            text: "00ma…pqrs",
+            isId: true,
+            title: "00mabcdefghijklmnopqrs",
+        });
+    });
+});
+describe("getNetworkStatusPresentation", () => {
+    it("uses a compact green check-circle when synced", () => {
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)({ availability: "ready", status: status({ state: "synced" }) })).toMatchObject({
+            shortLabel: "Synced",
+            colorClass: "text-success",
+            iconClass: "bi-check-circle-fill",
+            compactIcon: true,
+        });
+    });
+    it("uses a solid red dot when in error", () => {
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)({
+            availability: "ready",
+            status: status({
+                state: "error",
+                errorCount: 1,
+                errors: [{ dataContextId: "context", message: "failed", occurredAt: 1 }],
+            }),
+        })).toMatchObject({
+            shortLabel: "Error",
+            colorClass: "text-danger",
+            mark: "solid",
+        });
+    });
+    it("pulses green then switches to an indeterminate circle while syncing", () => {
+        const syncing = {
+            availability: "ready",
+            status: status({ state: "syncing", syncingContextCount: 1 }),
+        };
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)(syncing)).toMatchObject({
+            colorClass: "text-success",
+            mark: "pulse",
+        });
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)(syncing, { syncingLongerThanGreenMs: true })).toMatchObject({
+            colorClass: "text-primary",
+            mark: "indeterminate",
+        });
+    });
+    it("holds a green pulse while waiting for stable synced", () => {
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)({ availability: "ready", status: status({ state: "synced" }) }, { holdSyncingVisual: true, syncingLongerThanGreenMs: true })).toMatchObject({
+            shortLabel: "Syncing",
+            colorClass: "text-success",
+            mark: "pulse",
+        });
+    });
+});
+describe("NetworkStatusIndicator", () => {
+    beforeEach(() => {
+        mockViewState = { availability: "loading" };
+        getConnections.mockReset();
+        getConnections.mockResolvedValue({ connections: [] });
+        jest.clearAllMocks();
+    });
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+    it.each([
+        [{ availability: "loading" }, /Network status loading/],
+        [{ availability: "unavailable" }, /Network status unavailable/],
+        [
+            { availability: "ready", status: status({ state: "offline", connectionCount: 0 }) },
+            /Network offline/,
+        ],
+        [
+            {
+                availability: "ready",
+                status: status({ state: "syncing", syncingContextCount: 1 }),
+            },
+            /Network syncing/,
+        ],
+        [{ availability: "ready", status: status({ state: "synced" }) }, /Network synced/],
+        [
+            {
+                availability: "ready",
+                status: status({
+                    state: "error",
+                    errorCount: 1,
+                    errors: [{ dataContextId: "context", message: "failed", occurredAt: 1 }],
+                }),
+            },
+            /Network error/,
+        ],
+    ])("renders an accessible state for %#", (viewState, accessibleName) => {
+        mockViewState = viewState;
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        expect(view.getByRole("button", { name: accessibleName })).toBeTruthy();
+    });
+    it("renders a compact green check-circle when synced and a solid red error dot", () => {
+        mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        const syncedIcon = view.container.querySelector("i.bi-check-circle-fill");
+        expect(syncedIcon).toBeTruthy();
+        expect(syncedIcon).toHaveStyle({ fontSize: "0.7rem" });
+        expect(view.container.querySelector(".spinner-grow")).toBeNull();
+        mockViewState = {
+            availability: "ready",
+            status: status({
+                state: "error",
+                errorCount: 1,
+                errors: [{ dataContextId: "context", message: "failed", occurredAt: 1 }],
+            }),
+        };
+        view.rerender((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        expect(view.container.querySelector(".bg-danger.rounded-circle")).toBeTruthy();
+    });
+    it("uses a slower green pulse while syncing", () => {
+        mockViewState = {
+            availability: "ready",
+            status: status({ state: "syncing", syncingContextCount: 1 }),
+        };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        const pulse = view.container.querySelector(".spinner-grow.text-success");
+        expect(pulse).toHaveStyle({ animationDuration: "1.0s" });
+    });
+    it("pulses green while syncing, then an indeterminate circle after the green window", () => {
+        jest.useFakeTimers();
+        mockViewState = {
+            availability: "ready",
+            status: status({ state: "syncing", syncingContextCount: 1 }),
+        };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+        (0, react_1.act)(() => {
+            jest.advanceTimersByTime(network_status_indicator_1.SYNCING_GREEN_MS);
+        });
+        expect(view.container.querySelector(".spinner-border.text-primary")).toBeTruthy();
+        expect(view.container.querySelector(".spinner-grow.text-success")).toBeNull();
+    });
+    it("keeps the green syncing pulse through brief synced flaps until synced is stable", () => {
+        jest.useFakeTimers();
+        mockViewState = {
+            availability: "ready",
+            status: status({ state: "syncing", syncingContextCount: 1 }),
+        };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+        mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+        view.rerender((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        (0, react_1.act)(() => {
+            jest.advanceTimersByTime(network_status_indicator_1.SYNCED_STABLE_MS - 1);
+        });
+        expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+        expect(view.container.querySelector("i.bi-check-circle-fill")).toBeNull();
+        mockViewState = {
+            availability: "ready",
+            status: status({ state: "syncing", syncingContextCount: 1 }),
+        };
+        view.rerender((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+        mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+        view.rerender((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        (0, react_1.act)(() => {
+            jest.advanceTimersByTime(network_status_indicator_1.SYNCED_STABLE_MS);
+        });
+        expect(view.container.querySelector("i.bi-check-circle-fill")).toBeTruthy();
+        expect(view.container.querySelector(".spinner-grow")).toBeNull();
+    });
+    it("lists connected devices in the details popover", async () => {
+        getConnections.mockResolvedValue({
+            connections: [
+                connection({
+                    deviceId: "device-1",
+                    userName: "Ada",
+                    deviceName: "Laptop",
+                    sharedGroups: ["g1", "g2"],
+                }),
+            ],
+        });
+        mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        react_1.fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+        await (0, react_1.waitFor)(() => {
+            expect(view.getByRole("dialog", { name: "Network status details" })).toHaveTextContent("Ada");
+        });
+        expect(view.getByRole("dialog")).toHaveTextContent("Laptop");
+        expect(view.getByRole("dialog")).toHaveTextContent("2g");
+        expect(getConnections).toHaveBeenCalled();
+    });
+    it("shows middle-ellipsized ids when names are missing", async () => {
+        getConnections.mockResolvedValue({
+            connections: [
+                connection({
+                    deviceId: "00mdeviceidabcdefghijklm",
+                    userId: "00museridabcdefghijklmn",
+                    userName: undefined,
+                    deviceName: undefined,
+                    sharedGroups: [],
+                }),
+            ],
+        });
+        mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        react_1.fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+        await (0, react_1.waitFor)(() => {
+            expect(view.getByRole("dialog")).toHaveTextContent("00mu…klmn");
+        });
+        expect(view.getByRole("dialog")).toHaveTextContent("00md…jklm");
+    });
+    it("shows an empty connected-devices message when there are none", async () => {
+        getConnections.mockResolvedValue({ connections: [] });
+        mockViewState = {
+            availability: "ready",
+            status: status({ state: "offline", connectionCount: 0 }),
+        };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        react_1.fireEvent.click(view.getByRole("button", { name: /Network offline/ }));
+        await (0, react_1.waitFor)(() => {
+            expect(view.getByRole("dialog")).toHaveTextContent("No connected devices");
+        });
+    });
+    it("shows an error when connected devices fail to load", async () => {
+        getConnections.mockRejectedValue(new Error("offline"));
+        mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        react_1.fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+        await (0, react_1.waitFor)(() => {
+            expect(view.getByRole("dialog")).toHaveTextContent("Couldn't load devices");
+        });
+    });
+    it("updates on rerender and opens details before navigating to Network Viewer", async () => {
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        expect(view.getByRole("button", { name: /loading/ })).toBeTruthy();
+        mockViewState = {
+            availability: "ready",
+            status: status({
+                state: "error",
+                connectionCount: 3,
+                errorCount: 1,
+                errors: [{ dataContextId: "context", message: "sync failed", occurredAt: 1 }],
+            }),
+        };
+        view.rerender((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        react_1.fireEvent.click(view.getByRole("button", { name: /Network error/ }));
+        expect(view.getByRole("dialog", { name: "Network status details" })).toHaveTextContent("sync failed");
+        await (0, react_1.waitFor)(() => {
+            expect(getConnections).toHaveBeenCalled();
+        });
+        react_1.fireEvent.keyDown(document, { key: "Escape" });
+        expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
+        react_1.fireEvent.click(view.getByRole("button", { name: /Network error/ }));
+        react_1.fireEvent.click(view.getByRole("button", { name: "Open Network Viewer" }));
+        expect(goToTabPath).toHaveBeenCalledWith("network-viewer");
+    });
+});

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

@@ -48,6 +48,7 @@ const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown")
 const system_apps_1 = require("../system-apps");
 const routes_loader_1 = require("../ui-router/routes-loader");
 const ui_loader_1 = require("../ui-router/ui-loader");
+const network_status_indicator_1 = require("./network-status-indicator");
 const tabs_state_1 = require("./tabs-state");
 /**
  * Wraps a single tab's content so a crash in one tab doesn't take down the whole app.
@@ -167,7 +168,7 @@ function TabsLayoutInternal({ fillContainer = false } = {}) {
                             }, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-search", style: { fontSize: "14px" } }) }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex flex-grow-1 overflow-auto", style: {
                                 scrollbarWidth: "none",
                                 msOverflowStyle: "none",
-                            }, children: tabs.map((tab) => ((0, jsx_runtime_1.jsx)(TabHeader, { tab: tab, isActive: activeTab === tab.tabId, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode }, tab.tabId))) })] })) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1 overflow-hidden", children: tabs.map((tab) => ((0, jsx_runtime_1.jsx)("div", { className: `h-100 ${activeTab === tab.tabId ? "d-block" : "d-none"}`, style: { display: activeTab === tab.tabId ? "block" : "none" }, children: (0, jsx_runtime_1.jsx)(TabErrorBoundary, { tabTitle: tab.title, tabId: tab.tabId, children: (0, jsx_runtime_1.jsx)(TabContent, { tab: tab, isMobile: isMobile, isActive: activeTab === tab.tabId }) }) }, tab.tabId))) })] }, currentlyActiveGroupId));
+                            }, children: tabs.map((tab) => ((0, jsx_runtime_1.jsx)(TabHeader, { tab: tab, isActive: activeTab === tab.tabId, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode }, tab.tabId))) }), (0, jsx_runtime_1.jsx)(network_status_indicator_1.TabsStripIndicators, {})] })) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1 overflow-hidden", children: tabs.map((tab) => ((0, jsx_runtime_1.jsx)("div", { className: `h-100 ${activeTab === tab.tabId ? "d-block" : "d-none"}`, style: { display: activeTab === tab.tabId ? "block" : "none" }, children: (0, jsx_runtime_1.jsx)(TabErrorBoundary, { tabTitle: tab.title, tabId: tab.tabId, children: (0, jsx_runtime_1.jsx)(TabContent, { tab: tab, isMobile: isMobile, isActive: activeTab === tab.tabId }) }) }, tab.tabId))) })] }, currentlyActiveGroupId));
 }
 function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode, }) {
     const [showMenuDropdown, setShowMenuDropdown] = react_1.default.useState(false);
@@ -178,29 +179,29 @@ function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode, }) {
                     transform: "translateX(-50%)",
                     pointerEvents: "none",
                     maxWidth: "calc(100% - 140px)",
-                }, children: [currentTab?.iconClassName && currentTab.packageId !== "launcher" && ((0, jsx_runtime_1.jsx)("i", { className: `${currentTab.iconClassName} me-2` })), (0, jsx_runtime_1.jsx)("span", { className: "fw-medium text-truncate small", children: currentTab?.title || "Apps" })] }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex align-items-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `btn btn-sm ${colorMode === "light" ? "btn-outline-dark" : "btn-outline-light"}`, onClick: () => setShowMenuDropdown(!showMenuDropdown), style: { minWidth: "36px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-list" }), nonLauncherTabs.length > 0 && (0, jsx_runtime_1.jsx)("span", { className: "ms-1", children: nonLauncherTabs.length })] }), showMenuDropdown && ((0, jsx_runtime_1.jsxs)("div", { className: `dropdown-menu show position-absolute ${colorMode === "light" ? "" : "dropdown-menu-dark"}`, style: {
-                                right: 0,
-                                top: "100%",
-                                zIndex: 1000,
-                                minWidth: "280px",
-                                maxHeight: "calc(100vh - 60px)",
-                                overflowY: "auto",
-                            }, children: [(0, jsx_runtime_1.jsxs)("div", { className: `dropdown-item d-flex align-items-center ${activeTab === "launcher" ? "active" : ""}`, style: { cursor: "pointer", padding: "14px 18px", fontSize: "17px" }, onClick: () => {
-                                        onSwitch("launcher");
-                                        setShowMenuDropdown(false);
-                                    }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-grid-3x3-gap me-3", style: { fontSize: "20px" } }), (0, jsx_runtime_1.jsx)("span", { children: "Apps" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "dropdown-item d-flex align-items-center", style: { cursor: "pointer", padding: "14px 18px", fontSize: "17px" }, onClick: () => {
-                                        (0, command_palette_1.openCommandPalette)();
-                                        setShowMenuDropdown(false);
-                                    }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search me-3", style: { fontSize: "20px" } }), (0, jsx_runtime_1.jsx)("span", { children: "Search" })] }), nonLauncherTabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "dropdown-divider", style: { margin: "8px 0" } })), nonLauncherTabs
-                                    .slice()
-                                    .reverse()
-                                    .map((tab) => ((0, jsx_runtime_1.jsxs)("div", { className: `dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? "active" : ""}`, style: { cursor: "pointer", padding: "14px 18px", fontSize: "17px" }, onClick: () => {
-                                        onSwitch(tab.tabId);
-                                        setShowMenuDropdown(false);
-                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [tab.iconClassName && ((0, jsx_runtime_1.jsx)("i", { className: `${tab.iconClassName} me-3`, style: { fontSize: "20px" } })), (0, jsx_runtime_1.jsx)("span", { children: tab.title })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm p-0 ms-3", style: { width: "32px", height: "32px", fontSize: "20px" }, onClick: (e) => {
-                                                e.stopPropagation();
-                                                onClose(tab.tabId);
-                                            }, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x" }) })] }, tab.tabId)))] }))] }) }), showMenuDropdown && ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowMenuDropdown(false) }))] }));
+                }, children: [currentTab?.iconClassName && currentTab.packageId !== "launcher" && ((0, jsx_runtime_1.jsx)("i", { className: `${currentTab.iconClassName} me-2` })), (0, jsx_runtime_1.jsx)("span", { className: "fw-medium text-truncate small", children: currentTab?.title || "Apps" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-1", children: [(0, jsx_runtime_1.jsx)(network_status_indicator_1.TabsStripIndicators, { compact: true }), (0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `btn btn-sm ${colorMode === "light" ? "btn-outline-dark" : "btn-outline-light"}`, onClick: () => setShowMenuDropdown(!showMenuDropdown), style: { minWidth: "36px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-list" }), nonLauncherTabs.length > 0 && (0, jsx_runtime_1.jsx)("span", { className: "ms-1", children: nonLauncherTabs.length })] }), showMenuDropdown && ((0, jsx_runtime_1.jsxs)("div", { className: `dropdown-menu show position-absolute ${colorMode === "light" ? "" : "dropdown-menu-dark"}`, style: {
+                                    right: 0,
+                                    top: "100%",
+                                    zIndex: 1000,
+                                    minWidth: "280px",
+                                    maxHeight: "calc(100vh - 60px)",
+                                    overflowY: "auto",
+                                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: `dropdown-item d-flex align-items-center ${activeTab === "launcher" ? "active" : ""}`, style: { cursor: "pointer", padding: "14px 18px", fontSize: "17px" }, onClick: () => {
+                                            onSwitch("launcher");
+                                            setShowMenuDropdown(false);
+                                        }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-grid-3x3-gap me-3", style: { fontSize: "20px" } }), (0, jsx_runtime_1.jsx)("span", { children: "Apps" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "dropdown-item d-flex align-items-center", style: { cursor: "pointer", padding: "14px 18px", fontSize: "17px" }, onClick: () => {
+                                            (0, command_palette_1.openCommandPalette)();
+                                            setShowMenuDropdown(false);
+                                        }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search me-3", style: { fontSize: "20px" } }), (0, jsx_runtime_1.jsx)("span", { children: "Search" })] }), nonLauncherTabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "dropdown-divider", style: { margin: "8px 0" } })), nonLauncherTabs
+                                        .slice()
+                                        .reverse()
+                                        .map((tab) => ((0, jsx_runtime_1.jsxs)("div", { className: `dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? "active" : ""}`, style: { cursor: "pointer", padding: "14px 18px", fontSize: "17px" }, onClick: () => {
+                                            onSwitch(tab.tabId);
+                                            setShowMenuDropdown(false);
+                                        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [tab.iconClassName && ((0, jsx_runtime_1.jsx)("i", { className: `${tab.iconClassName} me-3`, style: { fontSize: "20px" } })), (0, jsx_runtime_1.jsx)("span", { children: tab.title })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm p-0 ms-3", style: { width: "32px", height: "32px", fontSize: "20px" }, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    onClose(tab.tabId);
+                                                }, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x" }) })] }, tab.tabId)))] }))] })] }), showMenuDropdown && ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowMenuDropdown(false) }))] }));
 }
 function TabHeader({ tab, isActive, onSwitch, onClose, colorMode }) {
     const activeClass = isActive

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

@@ -0,0 +1,8 @@
+import { type INetworkStatusSummary } from "@peers-app/peers-sdk";
+/** Host availability plus the latest reactive network status snapshot. */
+export interface INetworkStatusViewState {
+    availability: "loading" | "ready" | "unavailable";
+    status?: INetworkStatusSummary;
+}
+/** Subscribe to the current host's System Network Diagnostics status observable. */
+export declare function useNetworkStatus(): INetworkStatusViewState;

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNetworkStatus = useNetworkStatus;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+const network_viewer_ipc_1 = require("../screens/network-viewer/network-viewer-ipc");
+/** Subscribe to the current host's System Network Diagnostics status observable. */
+function useNetworkStatus() {
+    const [viewState, setViewState] = (0, react_1.useState)({
+        availability: "loading",
+    });
+    (0, react_1.useEffect)(() => {
+        let active = true;
+        let generation = 0;
+        let statusSubscription;
+        let hadTransport = false;
+        const unsubscribeTransport = (0, peers_sdk_1.subscribeHostContractTransport)((transport) => {
+            generation += 1;
+            const currentGeneration = generation;
+            statusSubscription?.dispose();
+            statusSubscription = undefined;
+            if (!transport) {
+                setViewState({ availability: hadTransport ? "unavailable" : "loading" });
+                return;
+            }
+            hadTransport = true;
+            setViewState({ availability: "loading" });
+            void (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)()
+                .then((diagnostics) => {
+                if (!active || generation !== currentGeneration) {
+                    return;
+                }
+                setViewState({
+                    availability: "ready",
+                    status: diagnostics.observables.status(),
+                });
+                statusSubscription = diagnostics.observables.status.subscribe((status) => {
+                    if (active && generation === currentGeneration) {
+                        setViewState({ availability: "ready", status });
+                    }
+                });
+            })
+                .catch(() => {
+                if (active && generation === currentGeneration) {
+                    setViewState({ availability: "unavailable" });
+                }
+            });
+        });
+        return () => {
+            active = false;
+            generation += 1;
+            statusSubscription?.dispose();
+            unsubscribeTransport();
+        };
+    }, []);
+    return viewState;
+}

package/dist/tabs-layout/use-network-status.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("@testing-library/react");
+const network_viewer_ipc_1 = require("../screens/network-viewer/network-viewer-ipc");
+const use_network_status_1 = require("./use-network-status");
+jest.mock("../screens/network-viewer/network-viewer-ipc", () => ({
+    getNetworkDiagnosticsConsumer: jest.fn(),
+}));
+const mockGetDiagnostics = network_viewer_ipc_1.getNetworkDiagnosticsConsumer;
+function makeStatus(overrides = {}) {
+    return {
+        state: "offline",
+        connectionCount: 0,
+        syncingContextCount: 0,
+        errorCount: 0,
+        errors: [],
+        ...overrides,
+    };
+}
+describe("useNetworkStatus", () => {
+    it("streams status updates and reports host disconnection", async () => {
+        const status = (0, peers_sdk_1.observable)(makeStatus());
+        mockGetDiagnostics.mockResolvedValue({
+            observables: { status },
+        });
+        const [transport] = (0, peers_sdk_1.inProcessTransportPair)();
+        const disposeTransport = (0, peers_sdk_1.registerHostContractTransport)(transport);
+        const hook = (0, react_1.renderHook)(() => (0, use_network_status_1.useNetworkStatus)());
+        await (0, react_1.waitFor)(() => expect(hook.result.current.availability).toBe("ready"));
+        expect(hook.result.current.status?.state).toBe("offline");
+        (0, react_1.act)(() => {
+            status(makeStatus({ state: "syncing", connectionCount: 2, syncingContextCount: 1 }));
+        });
+        await (0, react_1.waitFor)(() => expect(hook.result.current.status?.state).toBe("syncing"));
+        (0, react_1.act)(() => {
+            disposeTransport();
+        });
+        await (0, react_1.waitFor)(() => expect(hook.result.current.availability).toBe("unavailable"));
+        hook.unmount();
+    });
+});

package/package.json

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

package/src/screens/network-viewer/connection-troubleshooter.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { getNetworkViewerApi } from "./network-viewer-ipc";
+import { getNetworkViewerPlatformApi } from "./network-viewer-ipc";
 
 export interface IDiagnosticCheck {
   id: string;
@@ -106,7 +106,7 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
     setChecks([]);
     setExpanded(new Set());
 
-    const api = getNetworkViewerApi();
+    const api = getNetworkViewerPlatformApi();
     if (!api) {
       setChecks([
         {