@peers-app/peers-ui 0.21.2 → 0.21.4

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,41 @@
+import { type INetworkStatusViewState } from "./use-network-status";
+/** How long continuous raw syncing stays a green pulse before the indeterminate circle. */
+export declare const SYNCING_GREEN_MS = 2000;
+/** How long status must stay fully synced before leaving the syncing visual. */
+export declare const SYNCED_STABLE_MS = 1000;
+type NetworkStatusMark = "solid" | "pulse" | "indeterminate";
+interface INetworkStatusPresentation {
+    label: string;
+    shortLabel: string;
+    colorClass: string;
+    /** Bootstrap Icons class when not using a status mark. */
+    iconClass?: string;
+    spinning?: boolean;
+    /** Size the Bootstrap icon to match the status marks. */
+    compactIcon?: boolean;
+    /** Solid / pulsing / indeterminate mark (syncing / error). */
+    mark?: NetworkStatusMark;
+}
+/** Convert host availability and network state into accessible indicator text and styling. */
+export declare function getNetworkStatusPresentation(viewState: INetworkStatusViewState, opts?: {
+    syncingLongerThanGreenMs?: boolean;
+    /** Keep the calm green syncing pulse while waiting for stable synced. */
+    holdSyncingVisual?: boolean;
+}): INetworkStatusPresentation;
+/** Compact relative time for the status popover (always short enough for one line). */
+export declare function formatRelativeSyncTime(timestampMs: number, nowMs?: number): string;
+/** Prefer a friendly name; otherwise a compact middle-ellipsis of the id. */
+export declare function connectionIdentityLabel(name: string | undefined, id: string): {
+    text: string;
+    isId: boolean;
+    title: string;
+};
+/** 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,261 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SYNCED_STABLE_MS = exports.SYNCING_GREEN_MS = void 0;
+exports.getNetworkStatusPresentation = getNetworkStatusPresentation;
+exports.formatRelativeSyncTime = formatRelativeSyncTime;
+exports.connectionIdentityLabel = connectionIdentityLabel;
+exports.NetworkStatusIndicator = NetworkStatusIndicator;
+exports.TabsStripIndicators = TabsStripIndicators;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const moment_1 = __importDefault(require("moment"));
+const react_1 = require("react");
+const network_viewer_ipc_1 = require("../screens/network-viewer/network-viewer-ipc");
+const tabs_state_1 = require("./tabs-state");
+const use_network_status_1 = require("./use-network-status");
+/** How long continuous raw syncing stays a green pulse before the indeterminate circle. */
+exports.SYNCING_GREEN_MS = 2_000;
+/** How long status must stay fully synced before leaving the syncing visual. */
+exports.SYNCED_STABLE_MS = 1_000;
+/** Slightly slower than Bootstrap's default spinner-grow (~0.75s). */
+const PULSE_ANIMATION_DURATION = "1.0s";
+const DOT_SIZE = "0.7rem";
+/** Convert host availability and network state into accessible indicator text and styling. */
+function getNetworkStatusPresentation(viewState, opts) {
+    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",
+            colorClass: "text-danger",
+            mark: "solid",
+        };
+    }
+    if (state === "syncing" || opts?.holdSyncingVisual) {
+        const longSync = state === "syncing" && opts?.syncingLongerThanGreenMs === true;
+        const contextsLabel = state === "syncing"
+            ? `${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}`
+            : "recent activity";
+        return {
+            label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+            shortLabel: "Syncing",
+            colorClass: longSync ? "text-primary" : "text-success",
+            mark: longSync ? "indeterminate" : "pulse",
+        };
+    }
+    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",
+        compactIcon: true,
+    };
+}
+function StatusMark({ mode, colorClass }) {
+    if (mode === "pulse") {
+        return ((0, jsx_runtime_1.jsx)("span", { className: `spinner-grow spinner-grow-sm ${colorClass}`, style: {
+                width: DOT_SIZE,
+                height: DOT_SIZE,
+                animationDuration: PULSE_ANIMATION_DURATION,
+            }, "aria-hidden": "true" }));
+    }
+    if (mode === "indeterminate") {
+        return ((0, jsx_runtime_1.jsx)("span", { className: `spinner-border spinner-border-sm ${colorClass}`, style: { width: DOT_SIZE, height: DOT_SIZE, borderWidth: "0.12em" }, "aria-hidden": "true" }));
+    }
+    const bgClass = colorClass === "text-danger"
+        ? "bg-danger"
+        : colorClass === "text-primary"
+            ? "bg-primary"
+            : "bg-success";
+    return ((0, jsx_runtime_1.jsx)("span", { className: `rounded-circle ${bgClass}`, style: { width: DOT_SIZE, height: DOT_SIZE, display: "inline-block" }, "aria-hidden": "true" }));
+}
+/** Compact relative time for the status popover (always short enough for one line). */
+function formatRelativeSyncTime(timestampMs, nowMs = Date.now()) {
+    const then = (0, moment_1.default)(timestampMs);
+    const now = (0, moment_1.default)(nowMs);
+    if (now.diff(then, "seconds") < 45) {
+        return "now";
+    }
+    if (now.clone().subtract(1, "day").isSame(then, "day")) {
+        return "yesterday";
+    }
+    return then.from(now);
+}
+function middleEllipsis(value, head = 4, tail = 4) {
+    if (value.length <= head + tail + 1) {
+        return value;
+    }
+    return `${value.slice(0, head)}…${value.slice(-tail)}`;
+}
+/** Prefer a friendly name; otherwise a compact middle-ellipsis of the id. */
+function connectionIdentityLabel(name, id) {
+    const trimmed = name?.trim();
+    if (trimmed) {
+        return { text: trimmed, isId: false, title: trimmed };
+    }
+    return { text: middleEllipsis(id), isId: true, title: id };
+}
+function IdentityPart({ label }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: `text-truncate ${label.isId ? "text-muted" : ""}`, style: {
+            minWidth: 0,
+            ...(label.isId ? { fontSize: "0.7rem" } : undefined),
+        }, title: label.title, children: label.text }));
+}
+function ConnectedDeviceRow({ connection }) {
+    const user = connectionIdentityLabel(connection.userName, connection.userId);
+    const device = connectionIdentityLabel(connection.deviceName, connection.deviceId);
+    const groupCount = connection.sharedGroups.length;
+    return ((0, jsx_runtime_1.jsxs)("li", { className: "d-flex align-items-baseline gap-1 py-1", style: { listStyle: "none", minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)(IdentityPart, { label: user }), (0, jsx_runtime_1.jsx)("span", { className: "text-muted flex-shrink-0", "aria-hidden": "true", children: "\u00B7" }), (0, jsx_runtime_1.jsx)(IdentityPart, { label: device }), groupCount > 0 && ((0, jsx_runtime_1.jsxs)("span", { className: "text-muted flex-shrink-0 ms-auto", style: { fontSize: "0.7rem" }, title: `${groupCount} ${groupCount === 1 ? "group" : "groups"}`, children: [groupCount, "g"] }))] }));
+}
+function ConnectedDevicesList({ loadState }) {
+    if (loadState.status === "idle" || loadState.status === "loading") {
+        return (0, jsx_runtime_1.jsx)("p", { className: "small text-muted mb-2", children: "Loading\u2026" });
+    }
+    if (loadState.status === "error") {
+        return (0, jsx_runtime_1.jsx)("p", { className: "small text-muted mb-2", children: "Couldn't load devices" });
+    }
+    if (loadState.connections.length === 0) {
+        return (0, jsx_runtime_1.jsx)("p", { className: "small text-muted mb-2", children: "No connected devices" });
+    }
+    return ((0, jsx_runtime_1.jsx)("ul", { className: "small mb-0 ps-0", style: { maxHeight: "180px", overflowY: "auto" }, children: loadState.connections.map((connection) => ((0, jsx_runtime_1.jsx)(ConnectedDeviceRow, { connection: connection }, connection.deviceId))) }));
+}
+function NetworkStatusDetails({ detailsId, status, unavailable, connectionsLoadState, 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: "320px", 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 != null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Last sync" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end text-truncate", title: new Date(status.lastSuccessfulSyncAt).toLocaleString(), children: formatRelativeSyncTime(status.lastSuccessfulSyncAt) })] }))] }), status.errors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger py-2 px-2 small mb-2", children: [status.errors[0].message, status.errors.length > 1 && ` (+${status.errors.length - 1} more)`] })), (0, jsx_runtime_1.jsxs)("div", { className: "border-top pt-2 mt-1 mb-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "small text-muted mb-1", children: "Devices" }), (0, jsx_runtime_1.jsx)(ConnectedDevicesList, { loadState: connectionsLoadState })] })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-primary w-100", 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 [displaySyncing, setDisplaySyncing] = (0, react_1.useState)(false);
+    const [syncingLongerThanGreenMs, setSyncingLongerThanGreenMs] = (0, react_1.useState)(false);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [connectionsLoadState, setConnectionsLoadState] = (0, react_1.useState)({
+        status: "idle",
+    });
+    const containerRef = (0, react_1.useRef)(null);
+    const detailsId = (0, react_1.useId)();
+    const rawState = viewState.availability === "ready" ? viewState.status?.state : undefined;
+    const rawIsSyncing = rawState === "syncing";
+    const rawIsSynced = rawState === "synced";
+    const connectionCount = viewState.status?.connectionCount;
+    const diagnosticsReady = viewState.availability === "ready";
+    (0, react_1.useEffect)(() => {
+        if (rawIsSyncing) {
+            setDisplaySyncing(true);
+            return;
+        }
+        if (rawIsSynced) {
+            if (!displaySyncing) {
+                return;
+            }
+            const timer = window.setTimeout(() => {
+                setDisplaySyncing(false);
+            }, exports.SYNCED_STABLE_MS);
+            return () => {
+                window.clearTimeout(timer);
+            };
+        }
+        setDisplaySyncing(false);
+    }, [rawIsSyncing, rawIsSynced, displaySyncing]);
+    (0, react_1.useEffect)(() => {
+        if (!rawIsSyncing) {
+            setSyncingLongerThanGreenMs(false);
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            setSyncingLongerThanGreenMs(true);
+        }, exports.SYNCING_GREEN_MS);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [rawIsSyncing]);
+    (0, react_1.useEffect)(() => {
+        if (!open || !diagnosticsReady) {
+            setConnectionsLoadState({ status: "idle" });
+            return;
+        }
+        let active = true;
+        setConnectionsLoadState({ status: "loading" });
+        void (0, network_viewer_ipc_1.getNetworkDiagnosticsConsumer)()
+            .then((diagnostics) => diagnostics.tools.getConnections())
+            .then((result) => {
+            if (active) {
+                setConnectionsLoadState({ status: "ready", connections: result.connections });
+            }
+        })
+            .catch(() => {
+            if (active) {
+                setConnectionsLoadState({ status: "error" });
+            }
+        });
+        return () => {
+            active = false;
+        };
+    }, [open, diagnosticsReady, connectionCount]);
+    const holdSyncingVisual = displaySyncing && !rawIsSyncing;
+    const presentation = getNetworkStatusPresentation(viewState, {
+        syncingLongerThanGreenMs,
+        holdSyncingVisual,
+    });
+    (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: [presentation.mark ? ((0, jsx_runtime_1.jsx)(StatusMark, { mode: presentation.mark, colorClass: presentation.colorClass })) : ((0, jsx_runtime_1.jsx)("i", { className: `bi ${presentation.iconClass} ${presentation.spinning ? "spin" : ""}`, style: presentation.compactIcon
+                            ? { fontSize: DOT_SIZE, lineHeight: 1, display: "inline-block" }
+                            : undefined, "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", connectionsLoadState: connectionsLoadState, 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 {};