@peers-app/peers-ui 0.21.2 → 0.21.3

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

@@ -6,7 +6,6 @@ const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
-const globals_1 = require("../../globals");
 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");
@@ -47,18 +46,12 @@ function NetworkViewerList() {
     const [showTroubleshooter, setShowTroubleshooter] = (0, react_1.useState)(false);
     const loadData = (0, react_1.useCallback)(async () => {
         try {
-            if (!(0, globals_1.isDesktop)())
-                return;
-            const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
-            if (!api) {
-                console.warn("Network Viewer API not available");
-                return;
-            }
-            const [overviewData, connectionsData, groupSyncData, disconnectedData] = await Promise.all([
-                api.getOverview(),
-                api.getConnections(),
-                api.getGroupSyncStatus(),
-                api.getDisconnectedDevices(),
+            const diagnostics = await (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)();
+            const [{ overview: overviewData }, { connections: connectionsData }, { groups: groupSyncData }, { devices: disconnectedData },] = await Promise.all([
+                diagnostics.tools.getOverview(),
+                diagnostics.tools.getConnections(),
+                diagnostics.tools.getGroupSyncStatus(),
+                diagnostics.tools.getDisconnectedDevices(),
             ]);
             setOverview(overviewData);
             setConnections(connectionsData);
@@ -75,11 +68,14 @@ function NetworkViewerList() {
     const handleRefresh = async () => {
         setRefreshing(true);
         try {
-            const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
-            if (api) {
-                await api.refreshNetworkInfo();
+            const control = await (0, network_viewer_ipc_1.getNetworkControlConsumer)();
+            const result = await control.tools.refreshNetworkInfo();
+            if (result.success) {
                 await loadData();
             }
+            else {
+                alert(result.message);
+            }
         }
         catch (error) {
             console.error("Error refreshing network info:", error);
@@ -93,11 +89,14 @@ function NetworkViewerList() {
             return;
         }
         try {
-            const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
-            if (api) {
-                await api.disconnectDevice(deviceId);
+            const control = await (0, network_viewer_ipc_1.getNetworkControlConsumer)();
+            const result = await control.tools.disconnectDevice({ deviceId });
+            if (result.success) {
                 await loadData();
             }
+            else {
+                alert(result.message);
+            }
         }
         catch (error) {
             console.error("Error disconnecting device:", error);
@@ -108,17 +107,14 @@ function NetworkViewerList() {
     };
     const handleConnectToDevice = async (deviceId) => {
         try {
-            const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
-            if (api) {
-                setConnecting((prev) => new Set(prev).add(deviceId));
-                const result = await api.connectToDevice(deviceId);
-                if (result.success) {
-                    // Refresh data to see if connection was established
-                    await loadData();
-                }
-                else {
-                    alert(`Failed to connect: ${result.message}`);
-                }
+            const control = await (0, network_viewer_ipc_1.getNetworkControlConsumer)();
+            setConnecting((prev) => new Set(prev).add(deviceId));
+            const result = await control.tools.connectToDevice({ deviceId });
+            if (result.success) {
+                await loadData();
+            }
+            else {
+                alert(`Failed to connect: ${result.message}`);
             }
         }
         catch (error) {
@@ -135,16 +131,13 @@ function NetworkViewerList() {
     };
     const handleDeleteDevice = async (deviceId) => {
         try {
-            const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
-            if (api) {
-                const result = await api.deleteDevice(deviceId);
-                if (result.success) {
-                    // Refresh data to remove the device from the list
-                    await loadData();
-                }
-                else {
-                    alert(`Failed to delete device: ${result.message}`);
-                }
+            const control = await (0, network_viewer_ipc_1.getNetworkControlConsumer)();
+            const result = await control.tools.deleteDevice({ deviceId });
+            if (result.success) {
+                await loadData();
+            }
+            else {
+                alert(`Failed to delete device: ${result.message}`);
             }
         }
         catch (error) {
@@ -161,41 +154,32 @@ function NetworkViewerList() {
     if (loading) {
         return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
-    if (!(0, globals_1.isDesktop)()) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid p-4", children: (0, jsx_runtime_1.jsx)("div", { className: "alert alert-info", children: "Network Viewer is only available in the desktop application." }) }));
-    }
     if (!overview) {
         return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid p-4", children: (0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning", children: "Unable to load network information." }) }));
     }
     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, 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.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 () => {
-                                        const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
-                                        if (!api)
-                                            return 0;
-                                        const data = (await api.getOverview());
-                                        return data.totalConnections;
+    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.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 () => {
+                                        const diagnostics = await (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)();
+                                        const { overview: currentOverview } = await diagnostics.tools.getOverview();
+                                        return currentOverview.totalConnections;
                                     }, durationMinutes: 5, updateInterval: 5000, color: "rgba(111, 66, 193, 1)", colorZones: [
                                         { maxValue: 1, color: "rgba(220, 53, 69, 1)" },
                                         { maxValue: 2, color: "rgba(255, 193, 7, 1)" },
                                         { maxValue: overview?.maxConnections || 30, color: "rgba(111, 66, 193, 1)" },
                                     ], minValue: 0, maxValue: overview?.maxConnections || 30, formatOverlayText: (value) => `Connections: ${Math.round(value)}` }) }) }) }), (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: "CPU", fetchUsage: async () => {
-                                        const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
-                                        if (!api)
-                                            return 0;
-                                        const data = (await api.getOverview());
-                                        return data.cpuPercent;
+                                        const diagnostics = await (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)();
+                                        const { overview: currentOverview } = await diagnostics.tools.getOverview();
+                                        return currentOverview.cpuPercent;
                                     }, durationMinutes: 5, updateInterval: 5000, color: "rgba(13, 110, 253, 1)", colorZones: [
                                         { maxValue: 60, color: "rgba(13, 110, 253, 1)" },
                                         { maxValue: 80, color: "rgba(255, 193, 7, 1)" },
                                         { maxValue: Infinity, color: "rgba(220, 53, 69, 1)" },
                                     ] }) }) }) }), (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: "Memory", fetchUsage: async () => {
-                                        const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
-                                        if (!api)
-                                            return 0;
-                                        const data = (await api.getOverview());
-                                        return data.memPercent;
+                                        const diagnostics = await (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)();
+                                        const { overview: currentOverview } = await diagnostics.tools.getOverview();
+                                        return currentOverview.memPercent;
                                     }, durationMinutes: 5, updateInterval: 5000, color: "rgba(25, 135, 84, 1)", colorZones: [
                                         { maxValue: 60, color: "rgba(25, 135, 84, 1)" },
                                         { maxValue: 80, color: "rgba(255, 193, 7, 1)" },
@@ -218,7 +202,9 @@ function NetworkViewerList() {
                                                                                         ? "success"
                                                                                         : device.errorRate < 0.2
                                                                                             ? "warning"
-                                                                                            : "danger"}`, children: [(device.errorRate * 100).toFixed(1), "% errors"] }), (0, jsx_runtime_1.jsxs)("span", { className: "badge bg-info", children: ["Last: ", new Date(device.timestampLastApplied).toLocaleString()] })] }), idx < group.connectedDevices.length - 1 && ((0, jsx_runtime_1.jsx)("hr", { className: "my-2" }))] }, device.deviceId))) })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "No connected devices" })) }), (0, jsx_runtime_1.jsx)("td", { children: group.preferredDeviceIds.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("span", { className: "badge bg-primary mb-2", children: [group.preferredDeviceIds.length, " preferred"] }), (0, jsx_runtime_1.jsx)("div", { children: group.preferredDeviceIds.map((deviceId) => ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("small", { children: (0, jsx_runtime_1.jsx)("code", { className: "text-muted", children: deviceId }) }) }, deviceId))) })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "None" })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("small", { children: group.lastSyncTimestamp > 0
+                                                                                            : "danger"}`, children: [(device.errorRate * 100).toFixed(1), "% errors"] }), (0, jsx_runtime_1.jsxs)("span", { className: "badge bg-info", children: ["Last:", " ", device.timestampLastApplied
+                                                                                            ? new Date(device.timestampLastApplied).toLocaleString()
+                                                                                            : "Never"] })] }), idx < group.connectedDevices.length - 1 && ((0, jsx_runtime_1.jsx)("hr", { className: "my-2" }))] }, device.deviceId))) })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "No connected devices" })) }), (0, jsx_runtime_1.jsx)("td", { children: group.preferredDeviceIds.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("span", { className: "badge bg-primary mb-2", children: [group.preferredDeviceIds.length, " preferred"] }), (0, jsx_runtime_1.jsx)("div", { children: group.preferredDeviceIds.map((deviceId) => ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("small", { children: (0, jsx_runtime_1.jsx)("code", { className: "text-muted", children: deviceId }) }) }, deviceId))) })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "None" })) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("small", { children: group.lastSyncTimestamp > 0
                                                             ? new Date(group.lastSyncTimestamp).toLocaleString()
                                                             : "Never" }) }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("button", { className: "btn btn-sm btn-outline-primary", onClick: () => setSelectedGroupId(group.groupId), title: "View Group Details", children: group.totalMembers }) })] }, group.groupId))) })] }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { className: "card", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Disconnected Devices" }), disconnectedDevices.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "No known disconnected devices" })) : ((0, jsx_runtime_1.jsx)("div", { className: "table-responsive", children: (0, jsx_runtime_1.jsxs)("table", { className: "table table-hover", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "User" }), (0, jsx_runtime_1.jsx)("th", { children: "Trust Level" }), (0, jsx_runtime_1.jsx)("th", { children: "Device ID" }), (0, jsx_runtime_1.jsx)("th", { children: "Device Name" }), (0, jsx_runtime_1.jsx)("th", { children: "First Seen" }), (0, jsx_runtime_1.jsx)("th", { children: "Last Seen" }), (0, jsx_runtime_1.jsx)("th", { children: "Actions" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: disconnectedDevices
                                             .sort((a, b) => new Date(b.lastSeen).getTime() - new Date(a.lastSeen).getTime())

package/dist/screens/network-viewer/remote-logs-panel.js

@@ -17,11 +17,6 @@ function RemoteLogsPanel({ deviceId }) {
     const [search, setSearch] = (0, react_1.useState)("");
     const [minutes, setMinutes] = (0, react_1.useState)("60");
     const loadLogs = (0, react_1.useCallback)(async () => {
-        const api = (0, network_viewer_ipc_1.getNetworkViewerApi)();
-        if (!api) {
-            setError("Network Viewer API is unavailable");
-            return;
-        }
         setLoading(true);
         setError(undefined);
         try {
@@ -29,13 +24,17 @@ function RemoteLogsPanel({ deviceId }) {
             const sinceTimestamp = Number.isFinite(minutesNumber) && minutesNumber > 0
                 ? Date.now() - minutesNumber * 60_000
                 : undefined;
-            const response = await api.getRemoteLogs(deviceId, {
-                sinceTimestamp,
-                level: level ? level : undefined,
-                process: processName || undefined,
-                search: search || undefined,
-                pageSize: 100,
-                timeoutMs: 10_000,
+            const diagnostics = await (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)();
+            const response = await diagnostics.tools.queryRemoteLogs({
+                deviceId,
+                query: {
+                    sinceTimestamp,
+                    level: level ? level : undefined,
+                    process: processName || undefined,
+                    search: search || undefined,
+                    pageSize: 100,
+                    timeoutMs: 10_000,
+                },
             });
             setResult(response);
         }

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

@@ -0,0 +1,19 @@
+import { type INetworkStatusViewState } from "./use-network-status";
+interface INetworkStatusPresentation {
+    label: string;
+    shortLabel: string;
+    iconClass: string;
+    colorClass: string;
+    spinning?: boolean;
+}
+/** Convert host availability and network state into accessible indicator text and styling. */
+export declare function getNetworkStatusPresentation(viewState: INetworkStatusViewState): INetworkStatusPresentation;
+/** Accessible reactive network status button and details popover. */
+export declare function NetworkStatusIndicator({ compact }: {
+    compact?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/** Fixed tabs-strip area for built-in shell indicators. */
+export declare function TabsStripIndicators({ compact }: {
+    compact?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNetworkStatusPresentation = getNetworkStatusPresentation;
+exports.NetworkStatusIndicator = NetworkStatusIndicator;
+exports.TabsStripIndicators = TabsStripIndicators;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tabs_state_1 = require("./tabs-state");
+const use_network_status_1 = require("./use-network-status");
+/** Convert host availability and network state into accessible indicator text and styling. */
+function getNetworkStatusPresentation(viewState) {
+    if (viewState.availability === "loading") {
+        return {
+            label: "Network status loading",
+            shortLabel: "Loading",
+            iconClass: "bi-arrow-repeat",
+            colorClass: "text-secondary",
+            spinning: true,
+        };
+    }
+    if (viewState.availability === "unavailable" || !viewState.status) {
+        return {
+            label: "Network status unavailable",
+            shortLabel: "Unavailable",
+            iconClass: "bi-question-circle",
+            colorClass: "text-secondary",
+        };
+    }
+    const { connectionCount, errorCount, state, syncingContextCount } = viewState.status;
+    if (state === "error") {
+        return {
+            label: `Network error; ${errorCount} sync ${errorCount === 1 ? "error" : "errors"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+            shortLabel: "Error",
+            iconClass: "bi-exclamation-triangle-fill",
+            colorClass: "text-danger",
+        };
+    }
+    if (state === "syncing") {
+        return {
+            label: `Network syncing ${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+            shortLabel: "Syncing",
+            iconClass: "bi-arrow-repeat",
+            colorClass: "text-primary",
+            spinning: true,
+        };
+    }
+    if (state === "offline") {
+        return {
+            label: "Network offline; no active connections",
+            shortLabel: "Offline",
+            iconClass: "bi-cloud-slash-fill",
+            colorClass: "text-secondary",
+        };
+    }
+    return {
+        label: `Network synced; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+        shortLabel: "Synced",
+        iconClass: "bi-check-circle-fill",
+        colorClass: "text-success",
+    };
+}
+function NetworkStatusDetails({ detailsId, status, unavailable, onOpenViewer, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { id: detailsId, role: "dialog", "aria-label": "Network status details", className: "card shadow position-absolute end-0 mt-1", style: { top: "100%", width: "280px", zIndex: 1100 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-3", children: [(0, jsx_runtime_1.jsx)("h6", { className: "card-title mb-2", children: "Network status" }), unavailable || !status ? ((0, jsx_runtime_1.jsx)("p", { className: "small text-muted mb-3", children: "Network diagnostics are temporarily unavailable. The local host may still be starting or reconnecting." })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("dl", { className: "row small mb-2", children: [(0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Connections" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end", children: status.connectionCount }), (0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Syncing contexts" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end", children: status.syncingContextCount }), (0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Sync errors" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end", children: status.errorCount })] }), status.lastSuccessfulSyncAt && ((0, jsx_runtime_1.jsxs)("p", { className: "small text-muted mb-2", children: ["Last successful sync: ", new Date(status.lastSuccessfulSyncAt).toLocaleString()] })), status.errors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger py-2 px-2 small mb-2", children: [status.errors[0].message, status.errors.length > 1 && ` (+${status.errors.length - 1} more)`] }))] })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-primary w-100", onClick: onOpenViewer, children: "Open Network Viewer" })] }) }));
+}
+/** Accessible reactive network status button and details popover. */
+function NetworkStatusIndicator({ compact = false }) {
+    const viewState = (0, use_network_status_1.useNetworkStatus)();
+    const presentation = getNetworkStatusPresentation(viewState);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
+    const detailsId = (0, react_1.useId)();
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            return;
+        }
+        const closeOutside = (event) => {
+            if (!containerRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        const closeOnEscape = (event) => {
+            if (event.key === "Escape") {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", closeOutside);
+        document.addEventListener("keydown", closeOnEscape);
+        return () => {
+            document.removeEventListener("mousedown", closeOutside);
+            document.removeEventListener("keydown", closeOnEscape);
+        };
+    }, [open]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: "position-relative d-flex align-items-center", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `btn btn-sm d-flex align-items-center gap-1 px-2 ${presentation.colorClass}`, style: {
+                    border: "none",
+                    background: "transparent",
+                    minWidth: compact ? "30px" : undefined,
+                }, "aria-label": presentation.label, "aria-expanded": open, "aria-controls": detailsId, title: presentation.label, onClick: () => setOpen((current) => !current), children: [(0, jsx_runtime_1.jsx)("i", { className: `bi ${presentation.iconClass} ${presentation.spinning ? "spin" : ""}`, "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, unavailable: viewState.availability !== "ready", onOpenViewer: () => {
+                    setOpen(false);
+                    (0, tabs_state_1.goToTabPath)("network-viewer");
+                } }))] }));
+}
+/** Fixed tabs-strip area for built-in shell indicators. */
+function TabsStripIndicators({ compact = false }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "d-flex align-items-center flex-shrink-0", role: "group", "aria-label": "Application status", children: (0, jsx_runtime_1.jsx)(NetworkStatusIndicator, { compact: compact }) }));
+}

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

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

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const network_status_indicator_1 = require("./network-status-indicator");
+const goToTabPath = jest.fn();
+let mockViewState = { availability: "loading" };
+jest.mock("./tabs-state", () => ({
+    goToTabPath: (...args) => goToTabPath(...args),
+}));
+jest.mock("./use-network-status", () => ({
+    useNetworkStatus: () => mockViewState,
+}));
+function status(overrides) {
+    return {
+        state: "synced",
+        connectionCount: 2,
+        syncingContextCount: 0,
+        errorCount: 0,
+        errors: [],
+        ...overrides,
+    };
+}
+describe("NetworkStatusIndicator", () => {
+    beforeEach(() => {
+        mockViewState = { availability: "loading" };
+        jest.clearAllMocks();
+    });
+    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("updates on rerender and opens details before navigating to Network Viewer", () => {
+        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");
+        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 {};