@peers-app/peers-ui 0.21.5 → 0.21.6

package/dist/components/io-schema-values.js

@@ -24,7 +24,6 @@ const IOSchemaValue = (props) => {
     const { field, values, q } = props;
     const [valueObs] = (0, react_1.useState)(() => {
         // Field values are heterogeneous (string | number | boolean | Date | …) at runtime.
-        // biome-ignore lint/suspicious/noExplicitAny: dynamic IO schema binding
         const obs = (0, peers_sdk_1.observable)(values[field.name] ?? "");
         return obs;
     });

package/dist/components/markdown-editor/editor.js

@@ -74,7 +74,7 @@ const editorConfig = {
         list_1.ListNode,
         list_1.ListItemNode,
         mention_node_1.MentionNode,
-        // biome-ignore lint/suspicious/noExplicitAny: Lexical node registry typing is narrower than runtime; AutoLinkNode is required for links.
+        // Lexical node registry typing is narrower than runtime; AutoLinkNode is required for links.
         link_1.AutoLinkNode,
         link_1.LinkNode,
     ],

package/dist/components/save-button.d.ts

@@ -1,6 +1,7 @@
 import type { IDoc } from "@peers-app/peers-sdk";
 import type React from "react";
 export interface ISaveButtonProps {
+    /** Used with many concrete table row shapes; IDoc stays generic at call sites. */
     doc: IDoc<any>;
     onClick?: () => void | Promise<void>;
     addActions?: ({

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

@@ -11,6 +11,8 @@ function setupHost(label) {
                 connectionCount: 0,
                 syncingContextCount: 0,
                 errorCount: 0,
+                disconnectedContextCount: 0,
+                connectedContextCount: 0,
                 errors: [],
             };
         }

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

@@ -1,6 +1,6 @@
 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;
+export declare const SYNCING_GREEN_MS = 4000;
 /** How long status must stay fully synced before leaving the syncing visual. */
 export declare const SYNCED_STABLE_MS = 1000;
 type NetworkStatusMark = "solid" | "pulse" | "indeterminate";
@@ -15,6 +15,21 @@ interface INetworkStatusPresentation {
     compactIcon?: boolean;
     /** Solid / pulsing / indeterminate mark (syncing / error). */
     mark?: NetworkStatusMark;
+    /**
+     * Bottom-right count of sync contexts that have known peers but no live connection.
+     * Warning/yellow when shown; hidden when offline or count is 0.
+     */
+    disconnectedGroupsOverlay?: {
+        count: number;
+    };
+    /**
+     * Top-right connected-groups count when the device has active connections.
+     * Green when > 0; red zero when connected devices exist but no groups are live.
+     */
+    connectedGroupsOverlay?: {
+        count: number;
+        colorClass: "text-success" | "text-danger";
+    };
 }
 /** Convert host availability and network state into accessible indicator text and styling. */
 export declare function getNetworkStatusPresentation(viewState: INetworkStatusViewState, opts?: {

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

@@ -16,12 +16,30 @@ const network_viewer_ipc_1 = require("../screens/network-viewer/network-viewer-i
 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;
+exports.SYNCING_GREEN_MS = 4_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";
+/**
+ * Calm opacity pulse (same feel as kube-tools WatchButton) — not Bootstrap
+ * spinner-grow, which scales the mark and reads as noisy in the tabs strip.
+ */
+const PULSE_ANIMATION = "peers-network-pulse-dot 2s ease-in-out infinite";
 const DOT_SIZE = "0.7rem";
+function disconnectedLabelSuffix(disconnectedContextCount) {
+    return `; ${disconnectedContextCount} ${disconnectedContextCount === 1 ? "group" : "groups"} without a connection`;
+}
+function connectedLabelSuffix(connectedContextCount) {
+    return `; ${connectedContextCount} ${connectedContextCount === 1 ? "group" : "groups"} connected`;
+}
+function connectedGroupsOverlay(connectionCount, connectedContextCount) {
+    if (connectionCount <= 0) {
+        return undefined;
+    }
+    return {
+        count: connectedContextCount,
+        colorClass: connectedContextCount > 0 ? "text-success" : "text-danger",
+    };
+}
 /** Convert host availability and network state into accessible indicator text and styling. */
 function getNetworkStatusPresentation(viewState, opts) {
     if (viewState.availability === "loading") {
@@ -41,13 +59,23 @@ function getNetworkStatusPresentation(viewState, opts) {
             colorClass: "text-secondary",
         };
     }
-    const { connectionCount, errorCount, state, syncingContextCount } = viewState.status;
+    const { connectedContextCount, connectionCount, disconnectedContextCount, errorCount, state, syncingContextCount, } = viewState.status;
+    const disconnectedOverlay = disconnectedContextCount > 0 && state !== "offline"
+        ? { count: disconnectedContextCount }
+        : undefined;
+    const disconnectedSuffix = disconnectedOverlay
+        ? disconnectedLabelSuffix(disconnectedContextCount)
+        : "";
+    const groupsOverlay = connectedGroupsOverlay(connectionCount, connectedContextCount);
+    const connectedSuffix = groupsOverlay ? connectedLabelSuffix(connectedContextCount) : "";
     if (state === "error") {
         return {
-            label: `Network error; ${errorCount} sync ${errorCount === 1 ? "error" : "errors"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+            label: `Network error; ${errorCount} sync ${errorCount === 1 ? "error" : "errors"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
             shortLabel: "Error",
             colorClass: "text-danger",
             mark: "solid",
+            disconnectedGroupsOverlay: disconnectedOverlay,
+            connectedGroupsOverlay: groupsOverlay,
         };
     }
     if (state === "syncing" || opts?.holdSyncingVisual) {
@@ -56,10 +84,12 @@ function getNetworkStatusPresentation(viewState, opts) {
             ? `${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}`
             : "recent activity";
         return {
-            label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+            label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
             shortLabel: "Syncing",
             colorClass: longSync ? "text-primary" : "text-success",
             mark: longSync ? "indeterminate" : "pulse",
+            disconnectedGroupsOverlay: disconnectedOverlay,
+            connectedGroupsOverlay: groupsOverlay,
         };
     }
     if (state === "offline") {
@@ -71,29 +101,42 @@ function getNetworkStatusPresentation(viewState, opts) {
         };
     }
     return {
-        label: `Network synced; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+        label: `Network synced; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
         shortLabel: "Synced",
         iconClass: "bi-check-circle-fill",
         colorClass: "text-success",
         compactIcon: true,
+        disconnectedGroupsOverlay: disconnectedOverlay,
+        connectedGroupsOverlay: groupsOverlay,
     };
 }
-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" }));
+function statusMarkBgClass(colorClass) {
+    if (colorClass === "text-danger") {
+        return "bg-danger";
+    }
+    if (colorClass === "text-primary") {
+        return "bg-primary";
     }
+    return "bg-success";
+}
+function StatusMark({ mode, colorClass }) {
     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";
+    const bgClass = statusMarkBgClass(colorClass);
+    if (mode === "pulse") {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: `network-status-pulse-dot rounded-circle ${bgClass}`, style: {
+                        width: DOT_SIZE,
+                        height: DOT_SIZE,
+                        display: "inline-block",
+                        animation: PULSE_ANIMATION,
+                    }, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("style", { children: `
+          @keyframes peers-network-pulse-dot {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.4; }
+          }
+        ` })] }));
+    }
     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). */
@@ -147,7 +190,7 @@ function ConnectedDevicesList({ loadState }) {
     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" })] }) }));
+    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 }), (0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Groups connected" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end", children: status.connectedContextCount }), (0, jsx_runtime_1.jsx)("dt", { className: "col-7", children: "Groups offline" }), (0, jsx_runtime_1.jsx)("dd", { className: "col-5 text-end", children: status.disconnectedContextCount }), 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 }) {
@@ -248,9 +291,21 @@ 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: [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: () => {
+                }, "aria-label": presentation.label, "aria-expanded": open, "aria-controls": detailsId, title: presentation.label, onClick: () => setOpen((current) => !current), children: [(0, jsx_runtime_1.jsxs)("span", { className: "position-relative d-inline-flex align-items-center justify-content-center", 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" })), presentation.connectedGroupsOverlay && ((0, jsx_runtime_1.jsx)("span", { className: `network-status-connected-count position-absolute ${presentation.connectedGroupsOverlay.colorClass}`, style: {
+                                    fontSize: "0.45rem",
+                                    lineHeight: 1,
+                                    fontWeight: 700,
+                                    right: "-0.22rem",
+                                    top: "-0.32rem",
+                                }, "aria-hidden": "true", children: presentation.connectedGroupsOverlay.count })), presentation.disconnectedGroupsOverlay && ((0, jsx_runtime_1.jsx)("span", { className: "network-status-disconnected-count text-warning position-absolute", style: {
+                                    fontSize: "0.45rem",
+                                    lineHeight: 1,
+                                    fontWeight: 700,
+                                    right: "-0.28rem",
+                                    bottom: "-0.32rem",
+                                }, "aria-hidden": "true", children: presentation.disconnectedGroupsOverlay.count }))] }), !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

@@ -30,6 +30,8 @@ function status(overrides) {
         connectionCount: 2,
         syncingContextCount: 0,
         errorCount: 0,
+        disconnectedContextCount: 0,
+        connectedContextCount: 0,
         errors: [],
         ...overrides,
     };
@@ -132,6 +134,57 @@ describe("getNetworkStatusPresentation", () => {
             mark: "pulse",
         });
     });
+    it("flags a disconnected-group count when some groups lack a connection", () => {
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)({
+            availability: "ready",
+            status: status({ state: "synced", disconnectedContextCount: 2 }),
+        })).toMatchObject({
+            disconnectedGroupsOverlay: { count: 2 },
+            label: expect.stringContaining("2 groups without a connection"),
+        });
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)({
+            availability: "ready",
+            status: status({ state: "offline", connectionCount: 0, disconnectedContextCount: 2 }),
+        })).toMatchObject({
+            iconClass: "bi-cloud-slash-fill",
+        });
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)({
+            availability: "ready",
+            status: status({ state: "offline", connectionCount: 0, disconnectedContextCount: 2 }),
+        }).disconnectedGroupsOverlay).toBeUndefined();
+    });
+    it("shows a green connected-groups count or red zero when the device is online", () => {
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)({
+            availability: "ready",
+            status: status({
+                state: "synced",
+                connectionCount: 2,
+                connectedContextCount: 3,
+            }),
+        })).toMatchObject({
+            connectedGroupsOverlay: { count: 3, colorClass: "text-success" },
+            label: expect.stringContaining("3 groups connected"),
+        });
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)({
+            availability: "ready",
+            status: status({
+                state: "synced",
+                connectionCount: 1,
+                connectedContextCount: 0,
+            }),
+        })).toMatchObject({
+            connectedGroupsOverlay: { count: 0, colorClass: "text-danger" },
+            label: expect.stringContaining("0 groups connected"),
+        });
+        expect((0, network_status_indicator_1.getNetworkStatusPresentation)({
+            availability: "ready",
+            status: status({
+                state: "offline",
+                connectionCount: 0,
+                connectedContextCount: 0,
+            }),
+        }).connectedGroupsOverlay).toBeUndefined();
+    });
 });
 describe("NetworkStatusIndicator", () => {
     beforeEach(() => {
@@ -180,7 +233,8 @@ describe("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();
+        expect(view.container.querySelector(".network-status-pulse-dot")).toBeNull();
+        expect(view.container.querySelector(".network-status-disconnected-count")).toBeNull();
         mockViewState = {
             availability: "ready",
             status: status({
@@ -192,14 +246,78 @@ describe("NetworkStatusIndicator", () => {
         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", () => {
+    it("shows a yellow disconnected-groups count when synced with offline groups", () => {
+        mockViewState = {
+            availability: "ready",
+            status: status({ state: "synced", disconnectedContextCount: 1 }),
+        };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        expect(view.container.querySelector("i.bi-check-circle-fill")).toBeTruthy();
+        const overlay = view.container.querySelector(".network-status-disconnected-count.text-warning");
+        expect(overlay?.textContent).toBe("1");
+        expect(view.getByRole("button", { name: /1 group without a connection/ })).toBeTruthy();
+    });
+    it("shows a green connected-groups overlay when groups are live", () => {
+        mockViewState = {
+            availability: "ready",
+            status: status({
+                state: "synced",
+                connectionCount: 2,
+                connectedContextCount: 2,
+            }),
+        };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        const overlay = view.container.querySelector(".network-status-connected-count.text-success");
+        expect(overlay?.textContent).toBe("2");
+    });
+    it("shows a red zero when the device is connected but no groups are live", () => {
+        mockViewState = {
+            availability: "ready",
+            status: status({
+                state: "synced",
+                connectionCount: 1,
+                connectedContextCount: 0,
+            }),
+        };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        const overlay = view.container.querySelector(".network-status-connected-count.text-danger");
+        expect(overlay?.textContent).toBe("0");
+    });
+    it("hides the connected-groups overlay when fully offline", () => {
+        mockViewState = {
+            availability: "ready",
+            status: status({
+                state: "offline",
+                connectionCount: 0,
+                connectedContextCount: 0,
+            }),
+        };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        expect(view.container.querySelector(".network-status-connected-count")).toBeNull();
+    });
+    it("does not show the disconnected-groups count when fully offline", () => {
+        mockViewState = {
+            availability: "ready",
+            status: status({
+                state: "offline",
+                connectionCount: 0,
+                disconnectedContextCount: 3,
+            }),
+        };
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(network_status_indicator_1.NetworkStatusIndicator, {}));
+        expect(view.container.querySelector("i.bi-cloud-slash-fill")).toBeTruthy();
+        expect(view.container.querySelector(".network-status-disconnected-count")).toBeNull();
+    });
+    it("uses a calm opacity 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" });
+        const pulse = view.container.querySelector(".network-status-pulse-dot.bg-success");
+        expect(pulse).toHaveStyle({
+            animation: "peers-network-pulse-dot 2s ease-in-out infinite",
+        });
     });
     it("pulses green while syncing, then an indeterminate circle after the green window", () => {
         jest.useFakeTimers();
@@ -208,12 +326,12 @@ describe("NetworkStatusIndicator", () => {
             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();
+        expect(view.container.querySelector(".network-status-pulse-dot.bg-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();
+        expect(view.container.querySelector(".network-status-pulse-dot")).toBeNull();
     });
     it("keeps the green syncing pulse through brief synced flaps until synced is stable", () => {
         jest.useFakeTimers();
@@ -222,27 +340,27 @@ describe("NetworkStatusIndicator", () => {
             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();
+        expect(view.container.querySelector(".network-status-pulse-dot.bg-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(".network-status-pulse-dot.bg-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();
+        expect(view.container.querySelector(".network-status-pulse-dot.bg-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();
+        expect(view.container.querySelector(".network-status-pulse-dot")).toBeNull();
     });
     it("lists connected devices in the details popover", async () => {
         getConnections.mockResolvedValue({

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

@@ -14,6 +14,8 @@ function makeStatus(overrides = {}) {
         connectionCount: 0,
         syncingContextCount: 0,
         errorCount: 0,
+        disconnectedContextCount: 0,
+        connectedContextCount: 0,
         errors: [],
         ...overrides,
     };

package/package.json

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

package/src/components/io-schema-values.tsx

@@ -54,7 +54,6 @@ export const IOSchemaValue = (props: {
 
   const [valueObs] = useState(() => {
     // Field values are heterogeneous (string | number | boolean | Date | …) at runtime.
-    // biome-ignore lint/suspicious/noExplicitAny: dynamic IO schema binding
     const obs = observable<any | undefined>(values[field.name] ?? "");
     return obs;
   });

package/src/components/markdown-editor/editor.tsx

@@ -35,7 +35,7 @@ const editorConfig = {
     ListNode,
     ListItemNode,
     MentionNode,
-    // biome-ignore lint/suspicious/noExplicitAny: Lexical node registry typing is narrower than runtime; AutoLinkNode is required for links.
+    // Lexical node registry typing is narrower than runtime; AutoLinkNode is required for links.
     AutoLinkNode as any,
     LinkNode,
   ],

package/src/components/save-button.tsx

@@ -4,7 +4,7 @@ import { isDesktop, mainContentPath } from "../globals";
 import { useObservable } from "../hooks";
 
 export interface ISaveButtonProps {
-  // biome-ignore lint/suspicious/noExplicitAny: SaveButton is used with many concrete table row shapes; IDoc stays generic at call sites.
+  /** Used with many concrete table row shapes; IDoc stays generic at call sites. */
   doc: IDoc<any>;
   onClick?: () => void | Promise<void>;
   addActions?: (

package/src/screens/network-viewer/network-viewer-ipc.test.ts

@@ -15,6 +15,8 @@ function setupHost(label: string) {
         connectionCount: 0,
         syncingContextCount: 0,
         errorCount: 0,
+        disconnectedContextCount: 0,
+        connectedContextCount: 0,
         errors: [],
       };
     }

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

@@ -39,6 +39,8 @@ function status(overrides: Partial<INetworkStatusSummary>): INetworkStatusSummar
     connectionCount: 2,
     syncingContextCount: 0,
     errorCount: 0,
+    disconnectedContextCount: 0,
+    connectedContextCount: 0,
     errors: [],
     ...overrides,
   };
@@ -162,6 +164,71 @@ describe("getNetworkStatusPresentation", () => {
       mark: "pulse",
     });
   });
+
+  it("flags a disconnected-group count when some groups lack a connection", () => {
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({ state: "synced", disconnectedContextCount: 2 }),
+      }),
+    ).toMatchObject({
+      disconnectedGroupsOverlay: { count: 2 },
+      label: expect.stringContaining("2 groups without a connection"),
+    });
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({ state: "offline", connectionCount: 0, disconnectedContextCount: 2 }),
+      }),
+    ).toMatchObject({
+      iconClass: "bi-cloud-slash-fill",
+    });
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({ state: "offline", connectionCount: 0, disconnectedContextCount: 2 }),
+      }).disconnectedGroupsOverlay,
+    ).toBeUndefined();
+  });
+
+  it("shows a green connected-groups count or red zero when the device is online", () => {
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({
+          state: "synced",
+          connectionCount: 2,
+          connectedContextCount: 3,
+        }),
+      }),
+    ).toMatchObject({
+      connectedGroupsOverlay: { count: 3, colorClass: "text-success" },
+      label: expect.stringContaining("3 groups connected"),
+    });
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({
+          state: "synced",
+          connectionCount: 1,
+          connectedContextCount: 0,
+        }),
+      }),
+    ).toMatchObject({
+      connectedGroupsOverlay: { count: 0, colorClass: "text-danger" },
+      label: expect.stringContaining("0 groups connected"),
+    });
+    expect(
+      getNetworkStatusPresentation({
+        availability: "ready",
+        status: status({
+          state: "offline",
+          connectionCount: 0,
+          connectedContextCount: 0,
+        }),
+      }).connectedGroupsOverlay,
+    ).toBeUndefined();
+  });
 });
 
 describe("NetworkStatusIndicator", () => {
@@ -216,7 +283,8 @@ describe("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();
+    expect(view.container.querySelector(".network-status-pulse-dot")).toBeNull();
+    expect(view.container.querySelector(".network-status-disconnected-count")).toBeNull();
 
     mockViewState = {
       availability: "ready",
@@ -230,14 +298,83 @@ describe("NetworkStatusIndicator", () => {
     expect(view.container.querySelector(".bg-danger.rounded-circle")).toBeTruthy();
   });
 
-  it("uses a slower green pulse while syncing", () => {
+  it("shows a yellow disconnected-groups count when synced with offline groups", () => {
+    mockViewState = {
+      availability: "ready",
+      status: status({ state: "synced", disconnectedContextCount: 1 }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    expect(view.container.querySelector("i.bi-check-circle-fill")).toBeTruthy();
+    const overlay = view.container.querySelector(".network-status-disconnected-count.text-warning");
+    expect(overlay?.textContent).toBe("1");
+    expect(view.getByRole("button", { name: /1 group without a connection/ })).toBeTruthy();
+  });
+
+  it("shows a green connected-groups overlay when groups are live", () => {
+    mockViewState = {
+      availability: "ready",
+      status: status({
+        state: "synced",
+        connectionCount: 2,
+        connectedContextCount: 2,
+      }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    const overlay = view.container.querySelector(".network-status-connected-count.text-success");
+    expect(overlay?.textContent).toBe("2");
+  });
+
+  it("shows a red zero when the device is connected but no groups are live", () => {
+    mockViewState = {
+      availability: "ready",
+      status: status({
+        state: "synced",
+        connectionCount: 1,
+        connectedContextCount: 0,
+      }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    const overlay = view.container.querySelector(".network-status-connected-count.text-danger");
+    expect(overlay?.textContent).toBe("0");
+  });
+
+  it("hides the connected-groups overlay when fully offline", () => {
+    mockViewState = {
+      availability: "ready",
+      status: status({
+        state: "offline",
+        connectionCount: 0,
+        connectedContextCount: 0,
+      }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    expect(view.container.querySelector(".network-status-connected-count")).toBeNull();
+  });
+
+  it("does not show the disconnected-groups count when fully offline", () => {
+    mockViewState = {
+      availability: "ready",
+      status: status({
+        state: "offline",
+        connectionCount: 0,
+        disconnectedContextCount: 3,
+      }),
+    };
+    const view = render(<NetworkStatusIndicator />);
+    expect(view.container.querySelector("i.bi-cloud-slash-fill")).toBeTruthy();
+    expect(view.container.querySelector(".network-status-disconnected-count")).toBeNull();
+  });
+
+  it("uses a calm opacity 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" });
+    const pulse = view.container.querySelector(".network-status-pulse-dot.bg-success");
+    expect(pulse).toHaveStyle({
+      animation: "peers-network-pulse-dot 2s ease-in-out infinite",
+    });
   });
 
   it("pulses green while syncing, then an indeterminate circle after the green window", () => {
@@ -247,13 +384,13 @@ describe("NetworkStatusIndicator", () => {
       status: status({ state: "syncing", syncingContextCount: 1 }),
     };
     const view = render(<NetworkStatusIndicator />);
-    expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+    expect(view.container.querySelector(".network-status-pulse-dot.bg-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();
+    expect(view.container.querySelector(".network-status-pulse-dot")).toBeNull();
   });
 
   it("keeps the green syncing pulse through brief synced flaps until synced is stable", () => {
@@ -263,14 +400,14 @@ describe("NetworkStatusIndicator", () => {
       status: status({ state: "syncing", syncingContextCount: 1 }),
     };
     const view = render(<NetworkStatusIndicator />);
-    expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+    expect(view.container.querySelector(".network-status-pulse-dot.bg-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(".network-status-pulse-dot.bg-success")).toBeTruthy();
     expect(view.container.querySelector("i.bi-check-circle-fill")).toBeNull();
 
     mockViewState = {
@@ -278,7 +415,7 @@ describe("NetworkStatusIndicator", () => {
       status: status({ state: "syncing", syncingContextCount: 1 }),
     };
     view.rerender(<NetworkStatusIndicator />);
-    expect(view.container.querySelector(".spinner-grow.text-success")).toBeTruthy();
+    expect(view.container.querySelector(".network-status-pulse-dot.bg-success")).toBeTruthy();
 
     mockViewState = { availability: "ready", status: status({ state: "synced" }) };
     view.rerender(<NetworkStatusIndicator />);
@@ -286,7 +423,7 @@ describe("NetworkStatusIndicator", () => {
       jest.advanceTimersByTime(SYNCED_STABLE_MS);
     });
     expect(view.container.querySelector("i.bi-check-circle-fill")).toBeTruthy();
-    expect(view.container.querySelector(".spinner-grow")).toBeNull();
+    expect(view.container.querySelector(".network-status-pulse-dot")).toBeNull();
   });
 
   it("lists connected devices in the details popover", async () => {

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

@@ -6,13 +6,16 @@ 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;
+export const SYNCING_GREEN_MS = 4_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";
+/**
+ * Calm opacity pulse (same feel as kube-tools WatchButton) — not Bootstrap
+ * spinner-grow, which scales the mark and reads as noisy in the tabs strip.
+ */
+const PULSE_ANIMATION = "peers-network-pulse-dot 2s ease-in-out infinite";
 
 const DOT_SIZE = "0.7rem";
 
@@ -35,6 +38,37 @@ interface INetworkStatusPresentation {
   compactIcon?: boolean;
   /** Solid / pulsing / indeterminate mark (syncing / error). */
   mark?: NetworkStatusMark;
+  /**
+   * Bottom-right count of sync contexts that have known peers but no live connection.
+   * Warning/yellow when shown; hidden when offline or count is 0.
+   */
+  disconnectedGroupsOverlay?: { count: number };
+  /**
+   * Top-right connected-groups count when the device has active connections.
+   * Green when > 0; red zero when connected devices exist but no groups are live.
+   */
+  connectedGroupsOverlay?: { count: number; colorClass: "text-success" | "text-danger" };
+}
+
+function disconnectedLabelSuffix(disconnectedContextCount: number): string {
+  return `; ${disconnectedContextCount} ${disconnectedContextCount === 1 ? "group" : "groups"} without a connection`;
+}
+
+function connectedLabelSuffix(connectedContextCount: number): string {
+  return `; ${connectedContextCount} ${connectedContextCount === 1 ? "group" : "groups"} connected`;
+}
+
+function connectedGroupsOverlay(
+  connectionCount: number,
+  connectedContextCount: number,
+): INetworkStatusPresentation["connectedGroupsOverlay"] {
+  if (connectionCount <= 0) {
+    return undefined;
+  }
+  return {
+    count: connectedContextCount,
+    colorClass: connectedContextCount > 0 ? "text-success" : "text-danger",
+  };
 }
 
 /** Convert host availability and network state into accessible indicator text and styling. */
@@ -63,13 +97,31 @@ export function getNetworkStatusPresentation(
       colorClass: "text-secondary",
     };
   }
-  const { connectionCount, errorCount, state, syncingContextCount } = viewState.status;
+  const {
+    connectedContextCount,
+    connectionCount,
+    disconnectedContextCount,
+    errorCount,
+    state,
+    syncingContextCount,
+  } = viewState.status;
+  const disconnectedOverlay =
+    disconnectedContextCount > 0 && state !== "offline"
+      ? { count: disconnectedContextCount }
+      : undefined;
+  const disconnectedSuffix = disconnectedOverlay
+    ? disconnectedLabelSuffix(disconnectedContextCount)
+    : "";
+  const groupsOverlay = connectedGroupsOverlay(connectionCount, connectedContextCount);
+  const connectedSuffix = groupsOverlay ? connectedLabelSuffix(connectedContextCount) : "";
   if (state === "error") {
     return {
-      label: `Network error; ${errorCount} sync ${errorCount === 1 ? "error" : "errors"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+      label: `Network error; ${errorCount} sync ${errorCount === 1 ? "error" : "errors"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
       shortLabel: "Error",
       colorClass: "text-danger",
       mark: "solid",
+      disconnectedGroupsOverlay: disconnectedOverlay,
+      connectedGroupsOverlay: groupsOverlay,
     };
   }
   if (state === "syncing" || opts?.holdSyncingVisual) {
@@ -79,10 +131,12 @@ export function getNetworkStatusPresentation(
         ? `${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}`
         : "recent activity";
     return {
-      label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+      label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
       shortLabel: "Syncing",
       colorClass: longSync ? "text-primary" : "text-success",
       mark: longSync ? "indeterminate" : "pulse",
+      disconnectedGroupsOverlay: disconnectedOverlay,
+      connectedGroupsOverlay: groupsOverlay,
     };
   }
   if (state === "offline") {
@@ -94,28 +148,27 @@ export function getNetworkStatusPresentation(
     };
   }
   return {
-    label: `Network synced; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+    label: `Network synced; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}${connectedSuffix}${disconnectedSuffix}`,
     shortLabel: "Synced",
     iconClass: "bi-check-circle-fill",
     colorClass: "text-success",
     compactIcon: true,
+    disconnectedGroupsOverlay: disconnectedOverlay,
+    connectedGroupsOverlay: groupsOverlay,
   };
 }
 
-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"
-      />
-    );
+function statusMarkBgClass(colorClass: string): string {
+  if (colorClass === "text-danger") {
+    return "bg-danger";
+  }
+  if (colorClass === "text-primary") {
+    return "bg-primary";
   }
+  return "bg-success";
+}
+
+function StatusMark({ mode, colorClass }: { mode: NetworkStatusMark; colorClass: string }) {
   if (mode === "indeterminate") {
     return (
       <span
@@ -125,12 +178,31 @@ function StatusMark({ mode, colorClass }: { mode: NetworkStatusMark; colorClass:
       />
     );
   }
-  const bgClass =
-    colorClass === "text-danger"
-      ? "bg-danger"
-      : colorClass === "text-primary"
-        ? "bg-primary"
-        : "bg-success";
+
+  const bgClass = statusMarkBgClass(colorClass);
+  if (mode === "pulse") {
+    return (
+      <>
+        <span
+          className={`network-status-pulse-dot rounded-circle ${bgClass}`}
+          style={{
+            width: DOT_SIZE,
+            height: DOT_SIZE,
+            display: "inline-block",
+            animation: PULSE_ANIMATION,
+          }}
+          aria-hidden="true"
+        />
+        <style>{`
+          @keyframes peers-network-pulse-dot {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.4; }
+          }
+        `}</style>
+      </>
+    );
+  }
+
   return (
     <span
       className={`rounded-circle ${bgClass}`}
@@ -271,6 +343,10 @@ 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>
+              <dt className="col-7">Groups connected</dt>
+              <dd className="col-5 text-end">{status.connectedContextCount}</dd>
+              <dt className="col-7">Groups offline</dt>
+              <dd className="col-5 text-end">{status.disconnectedContextCount}</dd>
               {status.lastSuccessfulSyncAt != null && (
                 <>
                   <dt className="col-7">Last sync</dt>
@@ -425,19 +501,51 @@ export function NetworkStatusIndicator({ compact = false }: { compact?: boolean
         title={presentation.label}
         onClick={() => setOpen((current) => !current)}
       >
-        {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"
-          />
-        )}
+        <span className="position-relative d-inline-flex align-items-center justify-content-center">
+          {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"
+            />
+          )}
+          {presentation.connectedGroupsOverlay && (
+            <span
+              className={`network-status-connected-count position-absolute ${presentation.connectedGroupsOverlay.colorClass}`}
+              style={{
+                fontSize: "0.45rem",
+                lineHeight: 1,
+                fontWeight: 700,
+                right: "-0.22rem",
+                top: "-0.32rem",
+              }}
+              aria-hidden="true"
+            >
+              {presentation.connectedGroupsOverlay.count}
+            </span>
+          )}
+          {presentation.disconnectedGroupsOverlay && (
+            <span
+              className="network-status-disconnected-count text-warning position-absolute"
+              style={{
+                fontSize: "0.45rem",
+                lineHeight: 1,
+                fontWeight: 700,
+                right: "-0.28rem",
+                bottom: "-0.32rem",
+              }}
+              aria-hidden="true"
+            >
+              {presentation.disconnectedGroupsOverlay.count}
+            </span>
+          )}
+        </span>
         {!compact && (
           <span className="small">
             {viewState.status?.connectionCount ?? 0}

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

@@ -23,6 +23,8 @@ function makeStatus(overrides: Partial<INetworkStatusSummary> = {}): INetworkSta
     connectionCount: 0,
     syncingContextCount: 0,
     errorCount: 0,
+    disconnectedContextCount: 0,
+    connectedContextCount: 0,
     errors: [],
     ...overrides,
   };

package/src/ui-router/ui-loader.tsx

@@ -597,7 +597,6 @@ export const peersSystemPackageId = "000peers0system000package";
 export async function registerInternalPeersUI(props: {
   component: IPeersUI["content"];
   /** Zod schemas may use a different zod instance than peers-sdk (duplicate resolution); keep loose. */
-  // biome-ignore lint/suspicious/noExplicitAny: see JSDoc
   propsSchema?: any;
   routes?: Omit<IPeersUIRoute, "peersUIId" | "packageId">[];
   peersUIId?: string;