@peers-app/peers-ui 0.21.3 → 0.21.5

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

@@ -1,13 +1,35 @@
 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;
-    iconClass: 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): INetworkStatusPresentation;
+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;

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

@@ -1,14 +1,29 @@
 "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) {
+function getNetworkStatusPresentation(viewState, opts) {
     if (viewState.availability === "loading") {
         return {
             label: "Network status loading",
@@ -31,17 +46,20 @@ function getNetworkStatusPresentation(viewState) {
         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",
+            mark: "solid",
         };
     }
-    if (state === "syncing") {
+    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 ${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+            label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
             shortLabel: "Syncing",
-            iconClass: "bi-arrow-repeat",
-            colorClass: "text-primary",
-            spinning: true,
+            colorClass: longSync ? "text-primary" : "text-success",
+            mark: longSync ? "indeterminate" : "pulse",
         };
     }
     if (state === "offline") {
@@ -57,18 +75,154 @@ function getNetworkStatusPresentation(viewState) {
         shortLabel: "Synced",
         iconClass: "bi-check-circle-fill",
         colorClass: "text-success",
+        compactIcon: true,
     };
 }
-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" })] }) }));
+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 presentation = getNetworkStatusPresentation(viewState);
+    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;
@@ -94,7 +248,9 @@ function NetworkStatusIndicator({ compact = false }) {
                     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: () => {
+                }, "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");
                 } }))] }));

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

@@ -1,9 +1,15 @@
 "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),
@@ -11,6 +17,13 @@ jest.mock("./tabs-state", () => ({
 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",
@@ -21,11 +34,115 @@ function status(overrides) {
         ...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/],
@@ -57,7 +174,139 @@ describe("NetworkStatusIndicator", () => {
         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", () => {
+    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 = {
@@ -72,6 +321,9 @@ describe("NetworkStatusIndicator", () => {
         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/ }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.21.3",
+  "version": "0.21.5",
   "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.3",
+    "@peers-app/peers-sdk": "^0.21.5",
     "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.3",
+    "@peers-app/peers-sdk": "0.21.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

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

@@ -1,9 +1,19 @@
-import type { INetworkStatusSummary } from "@peers-app/peers-sdk";
-import { fireEvent, render } from "@testing-library/react";
-import { NetworkStatusIndicator } from "./network-status-indicator";
+import type { INetworkConnectionInfo, INetworkStatusSummary } from "@peers-app/peers-sdk";
+import { TrustLevel } from "@peers-app/peers-sdk";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
+import moment from "moment";
+import {
+  connectionIdentityLabel,
+  formatRelativeSyncTime,
+  getNetworkStatusPresentation,
+  NetworkStatusIndicator,
+  SYNCED_STABLE_MS,
+  SYNCING_GREEN_MS,
+} from "./network-status-indicator";
 import type { INetworkStatusViewState } from "./use-network-status";
 
 const goToTabPath = jest.fn();
+const getConnections = jest.fn();
 let mockViewState: INetworkStatusViewState = { availability: "loading" };
 
 jest.mock("./tabs-state", () => ({
@@ -14,6 +24,15 @@ jest.mock("./use-network-status", () => ({
   useNetworkStatus: () => mockViewState,
 }));
 
+jest.mock("../screens/network-viewer/network-viewer-ipc", () => ({
+  getNetworkDiagnosticsConsumer: () =>
+    Promise.resolve({
+      tools: {
+        getConnections: (...args: unknown[]) => getConnections(...args),
+      },
+    }),
+}));
+
 function status(overrides: Partial<INetworkStatusSummary>): INetworkStatusSummary {
   return {
     state: "synced",
@@ -25,12 +44,138 @@ function status(overrides: Partial<INetworkStatusSummary>): INetworkStatusSummar
   };
 }
 
+function connection(overrides: Partial<INetworkConnectionInfo> = {}): INetworkConnectionInfo {
+  return {
+    deviceId: "device-1",
+    userId: "user-1",
+    userName: "Ada",
+    deviceName: "Laptop",
+    userTrustLevel: TrustLevel.Trusted,
+    deviceTrustLevel: 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(formatRelativeSyncTime(now - 10_000, now)).toBe("now");
+  });
+
+  it("returns yesterday for the previous calendar day", () => {
+    const now = moment("2026-07-28T23:43:06").valueOf();
+    const yesterdayAfternoon = moment("2026-07-28T23:43:06")
+      .subtract(1, "day")
+      .hour(18)
+      .minute(0)
+      .second(0)
+      .valueOf();
+    expect(formatRelativeSyncTime(yesterdayAfternoon, now)).toBe("yesterday");
+  });
+
+  it("returns a short relative phrase otherwise", () => {
+    const now = Date.parse("2026-07-28T23:43:06.000");
+    expect(formatRelativeSyncTime(now - 5 * 60_000, now)).toBe("5 minutes ago");
+  });
+});
+
+describe("connectionIdentityLabel", () => {
+  it("prefers a friendly name", () => {
+    expect(connectionIdentityLabel("Ada", "00mabcdefghijklmnopqrs")).toEqual({
+      text: "Ada",
+      isId: false,
+      title: "Ada",
+    });
+  });
+
+  it("middle-ellipsizes raw ids", () => {
+    expect(connectionIdentityLabel(undefined, "00mabcdefghijklmnopqrs")).toEqual({
+      text: "00ma…pqrs",
+      isId: true,
+      title: "00mabcdefghijklmnopqrs",
+    });
+  });
+});
+
+describe("getNetworkStatusPresentation", () => {
+  it("uses a compact green check-circle when synced", () => {
+    expect(
+      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(
+      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: INetworkStatusViewState = {
+      availability: "ready",
+      status: status({ state: "syncing", syncingContextCount: 1 }),
+    };
+    expect(getNetworkStatusPresentation(syncing)).toMatchObject({
+      colorClass: "text-success",
+      mark: "pulse",
+    });
+    expect(getNetworkStatusPresentation(syncing, { syncingLongerThanGreenMs: true })).toMatchObject(
+      {
+        colorClass: "text-primary",
+        mark: "indeterminate",
+      },
+    );
+  });
+
+  it("holds a green pulse while waiting for stable synced", () => {
+    expect(
+      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/],
@@ -65,7 +210,156 @@ describe("NetworkStatusIndicator", () => {
     expect(view.getByRole("button", { name: accessibleName })).toBeTruthy();
   });
 
-  it("updates on rerender and opens details before navigating to Network Viewer", () => {
+  it("renders a compact green check-circle when synced and a solid red error dot", () => {
+    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+    const view = render(<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(<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 = render(<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 = render(<NetworkStatusIndicator />);
+    expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+
+    act(() => {
+      jest.advanceTimersByTime(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 = render(<NetworkStatusIndicator />);
+    expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+
+    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+    view.rerender(<NetworkStatusIndicator />);
+    act(() => {
+      jest.advanceTimersByTime(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(<NetworkStatusIndicator />);
+    expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+
+    mockViewState = { availability: "ready", status: status({ state: "synced" }) };
+    view.rerender(<NetworkStatusIndicator />);
+    act(() => {
+      jest.advanceTimersByTime(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 = render(<NetworkStatusIndicator />);
+    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+
+    await 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 = render(<NetworkStatusIndicator />);
+    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+
+    await 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 = render(<NetworkStatusIndicator />);
+    fireEvent.click(view.getByRole("button", { name: /Network offline/ }));
+
+    await 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 = render(<NetworkStatusIndicator />);
+    fireEvent.click(view.getByRole("button", { name: /Network synced/ }));
+
+    await 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 = render(<NetworkStatusIndicator />);
     expect(view.getByRole("button", { name: /loading/ })).toBeTruthy();
 
@@ -84,6 +378,9 @@ describe("NetworkStatusIndicator", () => {
     expect(view.getByRole("dialog", { name: "Network status details" })).toHaveTextContent(
       "sync failed",
     );
+    await waitFor(() => {
+      expect(getConnections).toHaveBeenCalled();
+    });
     fireEvent.keyDown(document, { key: "Escape" });
     expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
 

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

@@ -1,19 +1,50 @@
-import type { INetworkStatusSummary } from "@peers-app/peers-sdk";
+import type { INetworkConnectionInfo, INetworkStatusSummary } from "@peers-app/peers-sdk";
+import moment from "moment";
 import { useEffect, useId, useRef, useState } from "react";
+import { getNetworkDiagnosticsConsumer } from "../screens/network-viewer/network-viewer-ipc";
 import { goToTabPath } from "./tabs-state";
 import { type INetworkStatusViewState, useNetworkStatus } from "./use-network-status";
 
+/** How long continuous raw syncing stays a green pulse before the indeterminate circle. */
+export const SYNCING_GREEN_MS = 2_000;
+
+/** How long status must stay fully synced before leaving the syncing visual. */
+export const 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";
+
+type NetworkStatusMark = "solid" | "pulse" | "indeterminate";
+
+type ConnectionsLoadState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "ready"; connections: INetworkConnectionInfo[] }
+  | { status: "error" };
+
 interface INetworkStatusPresentation {
   label: string;
   shortLabel: string;
-  iconClass: 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 function getNetworkStatusPresentation(
   viewState: INetworkStatusViewState,
+  opts?: {
+    syncingLongerThanGreenMs?: boolean;
+    /** Keep the calm green syncing pulse while waiting for stable synced. */
+    holdSyncingVisual?: boolean;
+  },
 ): INetworkStatusPresentation {
   if (viewState.availability === "loading") {
     return {
@@ -37,17 +68,21 @@ export function getNetworkStatusPresentation(
     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",
+      mark: "solid",
     };
   }
-  if (state === "syncing") {
+  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 ${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+      label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
       shortLabel: "Syncing",
-      iconClass: "bi-arrow-repeat",
-      colorClass: "text-primary",
-      spinning: true,
+      colorClass: longSync ? "text-primary" : "text-success",
+      mark: longSync ? "indeterminate" : "pulse",
     };
   }
   if (state === "offline") {
@@ -63,18 +98,153 @@ export function getNetworkStatusPresentation(
     shortLabel: "Synced",
     iconClass: "bi-check-circle-fill",
     colorClass: "text-success",
+    compactIcon: true,
   };
 }
 
+function StatusMark({ mode, colorClass }: { mode: NetworkStatusMark; colorClass: string }) {
+  if (mode === "pulse") {
+    return (
+      <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 (
+      <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 (
+    <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). */
+export function formatRelativeSyncTime(timestampMs: number, nowMs = Date.now()): string {
+  const then = moment(timestampMs);
+  const now = moment(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: string, head = 4, tail = 4): string {
+  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. */
+export function connectionIdentityLabel(
+  name: string | undefined,
+  id: string,
+): { text: string; isId: boolean; title: string } {
+  const trimmed = name?.trim();
+  if (trimmed) {
+    return { text: trimmed, isId: false, title: trimmed };
+  }
+  return { text: middleEllipsis(id), isId: true, title: id };
+}
+
+function IdentityPart({ label }: { label: { text: string; isId: boolean; title: string } }) {
+  return (
+    <span
+      className={`text-truncate ${label.isId ? "text-muted" : ""}`}
+      style={{
+        minWidth: 0,
+        ...(label.isId ? { fontSize: "0.7rem" } : undefined),
+      }}
+      title={label.title}
+    >
+      {label.text}
+    </span>
+  );
+}
+
+function ConnectedDeviceRow({ connection }: { connection: INetworkConnectionInfo }) {
+  const user = connectionIdentityLabel(connection.userName, connection.userId);
+  const device = connectionIdentityLabel(connection.deviceName, connection.deviceId);
+  const groupCount = connection.sharedGroups.length;
+
+  return (
+    <li
+      className="d-flex align-items-baseline gap-1 py-1"
+      style={{ listStyle: "none", minWidth: 0 }}
+    >
+      <IdentityPart label={user} />
+      <span className="text-muted flex-shrink-0" aria-hidden="true">
+        ·
+      </span>
+      <IdentityPart label={device} />
+      {groupCount > 0 && (
+        <span
+          className="text-muted flex-shrink-0 ms-auto"
+          style={{ fontSize: "0.7rem" }}
+          title={`${groupCount} ${groupCount === 1 ? "group" : "groups"}`}
+        >
+          {groupCount}g
+        </span>
+      )}
+    </li>
+  );
+}
+
+function ConnectedDevicesList({ loadState }: { loadState: ConnectionsLoadState }) {
+  if (loadState.status === "idle" || loadState.status === "loading") {
+    return <p className="small text-muted mb-2">Loading…</p>;
+  }
+  if (loadState.status === "error") {
+    return <p className="small text-muted mb-2">Couldn't load devices</p>;
+  }
+  if (loadState.connections.length === 0) {
+    return <p className="small text-muted mb-2">No connected devices</p>;
+  }
+  return (
+    <ul className="small mb-0 ps-0" style={{ maxHeight: "180px", overflowY: "auto" }}>
+      {loadState.connections.map((connection) => (
+        <ConnectedDeviceRow key={connection.deviceId} connection={connection} />
+      ))}
+    </ul>
+  );
+}
+
 function NetworkStatusDetails({
   detailsId,
   status,
   unavailable,
+  connectionsLoadState,
   onOpenViewer,
 }: {
   detailsId: string;
   status?: INetworkStatusSummary;
   unavailable: boolean;
+  connectionsLoadState: ConnectionsLoadState;
   onOpenViewer: () => void;
 }) {
   return (
@@ -83,7 +253,7 @@ function NetworkStatusDetails({
       role="dialog"
       aria-label="Network status details"
       className="card shadow position-absolute end-0 mt-1"
-      style={{ top: "100%", width: "280px", zIndex: 1100 }}
+      style={{ top: "100%", width: "320px", zIndex: 1100 }}
     >
       <div className="card-body p-3">
         <h6 className="card-title mb-2">Network status</h6>
@@ -101,21 +271,35 @@ function NetworkStatusDetails({
               <dd className="col-5 text-end">{status.syncingContextCount}</dd>
               <dt className="col-7">Sync errors</dt>
               <dd className="col-5 text-end">{status.errorCount}</dd>
+              {status.lastSuccessfulSyncAt != null && (
+                <>
+                  <dt className="col-7">Last sync</dt>
+                  <dd
+                    className="col-5 text-end text-truncate"
+                    title={new Date(status.lastSuccessfulSyncAt).toLocaleString()}
+                  >
+                    {formatRelativeSyncTime(status.lastSuccessfulSyncAt)}
+                  </dd>
+                </>
+              )}
             </dl>
-            {status.lastSuccessfulSyncAt && (
-              <p className="small text-muted mb-2">
-                Last successful sync: {new Date(status.lastSuccessfulSyncAt).toLocaleString()}
-              </p>
-            )}
             {status.errors.length > 0 && (
               <div className="alert alert-danger py-2 px-2 small mb-2">
                 {status.errors[0].message}
                 {status.errors.length > 1 && ` (+${status.errors.length - 1} more)`}
               </div>
             )}
+            <div className="border-top pt-2 mt-1 mb-2">
+              <div className="small text-muted mb-1">Devices</div>
+              <ConnectedDevicesList loadState={connectionsLoadState} />
+            </div>
           </>
         )}
-        <button type="button" className="btn btn-sm btn-primary w-100" onClick={onOpenViewer}>
+        <button
+          type="button"
+          className="btn btn-sm btn-outline-primary w-100"
+          onClick={onOpenViewer}
+        >
           Open Network Viewer
         </button>
       </div>
@@ -126,11 +310,83 @@ function NetworkStatusDetails({
 /** Accessible reactive network status button and details popover. */
 export function NetworkStatusIndicator({ compact = false }: { compact?: boolean }) {
   const viewState = useNetworkStatus();
-  const presentation = getNetworkStatusPresentation(viewState);
+  const [displaySyncing, setDisplaySyncing] = useState(false);
+  const [syncingLongerThanGreenMs, setSyncingLongerThanGreenMs] = useState(false);
   const [open, setOpen] = useState(false);
+  const [connectionsLoadState, setConnectionsLoadState] = useState<ConnectionsLoadState>({
+    status: "idle",
+  });
   const containerRef = useRef<HTMLDivElement>(null);
   const detailsId = 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";
+
+  useEffect(() => {
+    if (rawIsSyncing) {
+      setDisplaySyncing(true);
+      return;
+    }
+    if (rawIsSynced) {
+      if (!displaySyncing) {
+        return;
+      }
+      const timer = window.setTimeout(() => {
+        setDisplaySyncing(false);
+      }, SYNCED_STABLE_MS);
+      return () => {
+        window.clearTimeout(timer);
+      };
+    }
+    setDisplaySyncing(false);
+  }, [rawIsSyncing, rawIsSynced, displaySyncing]);
+
+  useEffect(() => {
+    if (!rawIsSyncing) {
+      setSyncingLongerThanGreenMs(false);
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      setSyncingLongerThanGreenMs(true);
+    }, SYNCING_GREEN_MS);
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [rawIsSyncing]);
+
+  useEffect(() => {
+    if (!open || !diagnosticsReady) {
+      setConnectionsLoadState({ status: "idle" });
+      return;
+    }
+    let active = true;
+    setConnectionsLoadState({ status: "loading" });
+    void 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,
+  });
+
   useEffect(() => {
     if (!open) {
       return;
@@ -169,10 +425,19 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
         title={presentation.label}
         onClick={() => setOpen((current) => !current)}
       >
-        <i
-          className={`bi ${presentation.iconClass} ${presentation.spinning ? "spin" : ""}`}
-          aria-hidden="true"
-        />
+        {presentation.mark ? (
+          <StatusMark mode={presentation.mark} colorClass={presentation.colorClass} />
+        ) : (
+          <i
+            className={`bi ${presentation.iconClass} ${presentation.spinning ? "spin" : ""}`}
+            style={
+              presentation.compactIcon
+                ? { fontSize: DOT_SIZE, lineHeight: 1, display: "inline-block" }
+                : undefined
+            }
+            aria-hidden="true"
+          />
+        )}
         {!compact && (
           <span className="small">
             {viewState.status?.connectionCount ?? 0}
@@ -185,6 +450,7 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
           detailsId={detailsId}
           status={viewState.status}
           unavailable={viewState.availability !== "ready"}
+          connectionsLoadState={connectionsLoadState}
           onOpenViewer={() => {
             setOpen(false);
             goToTabPath("network-viewer");