@peers-app/peers-ui 0.21.2 → 0.21.3

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

@@ -0,0 +1,94 @@
+import type { INetworkStatusSummary } from "@peers-app/peers-sdk";
+import { fireEvent, render } from "@testing-library/react";
+import { NetworkStatusIndicator } from "./network-status-indicator";
+import type { INetworkStatusViewState } from "./use-network-status";
+
+const goToTabPath = jest.fn();
+let mockViewState: INetworkStatusViewState = { availability: "loading" };
+
+jest.mock("./tabs-state", () => ({
+  goToTabPath: (...args: unknown[]) => goToTabPath(...args),
+}));
+
+jest.mock("./use-network-status", () => ({
+  useNetworkStatus: () => mockViewState,
+}));
+
+function status(overrides: Partial<INetworkStatusSummary>): INetworkStatusSummary {
+  return {
+    state: "synced",
+    connectionCount: 2,
+    syncingContextCount: 0,
+    errorCount: 0,
+    errors: [],
+    ...overrides,
+  };
+}
+
+describe("NetworkStatusIndicator", () => {
+  beforeEach(() => {
+    mockViewState = { availability: "loading" };
+    jest.clearAllMocks();
+  });
+
+  it.each([
+    [{ availability: "loading" }, /Network status loading/],
+    [{ availability: "unavailable" }, /Network status unavailable/],
+    [
+      { availability: "ready", status: status({ state: "offline", connectionCount: 0 }) },
+      /Network offline/,
+    ],
+    [
+      {
+        availability: "ready",
+        status: status({ state: "syncing", syncingContextCount: 1 }),
+      },
+      /Network syncing/,
+    ],
+    [{ availability: "ready", status: status({ state: "synced" }) }, /Network synced/],
+    [
+      {
+        availability: "ready",
+        status: status({
+          state: "error",
+          errorCount: 1,
+          errors: [{ dataContextId: "context", message: "failed", occurredAt: 1 }],
+        }),
+      },
+      /Network error/,
+    ],
+  ] satisfies Array<
+    [INetworkStatusViewState, RegExp]
+  >)("renders an accessible state for %#", (viewState, accessibleName) => {
+    mockViewState = viewState;
+    const view = render(<NetworkStatusIndicator />);
+    expect(view.getByRole("button", { name: accessibleName })).toBeTruthy();
+  });
+
+  it("updates on rerender and opens details before navigating to Network Viewer", () => {
+    const view = render(<NetworkStatusIndicator />);
+    expect(view.getByRole("button", { name: /loading/ })).toBeTruthy();
+
+    mockViewState = {
+      availability: "ready",
+      status: status({
+        state: "error",
+        connectionCount: 3,
+        errorCount: 1,
+        errors: [{ dataContextId: "context", message: "sync failed", occurredAt: 1 }],
+      }),
+    };
+    view.rerender(<NetworkStatusIndicator />);
+    fireEvent.click(view.getByRole("button", { name: /Network error/ }));
+
+    expect(view.getByRole("dialog", { name: "Network status details" })).toHaveTextContent(
+      "sync failed",
+    );
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(view.queryByRole("dialog", { name: "Network status details" })).toBeNull();
+
+    fireEvent.click(view.getByRole("button", { name: /Network error/ }));
+    fireEvent.click(view.getByRole("button", { name: "Open Network Viewer" }));
+    expect(goToTabPath).toHaveBeenCalledWith("network-viewer");
+  });
+});

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

@@ -0,0 +1,209 @@
+import type { INetworkStatusSummary } from "@peers-app/peers-sdk";
+import { useEffect, useId, useRef, useState } from "react";
+import { goToTabPath } from "./tabs-state";
+import { type INetworkStatusViewState, useNetworkStatus } from "./use-network-status";
+
+interface INetworkStatusPresentation {
+  label: string;
+  shortLabel: string;
+  iconClass: string;
+  colorClass: string;
+  spinning?: boolean;
+}
+
+/** Convert host availability and network state into accessible indicator text and styling. */
+export function getNetworkStatusPresentation(
+  viewState: INetworkStatusViewState,
+): INetworkStatusPresentation {
+  if (viewState.availability === "loading") {
+    return {
+      label: "Network status loading",
+      shortLabel: "Loading",
+      iconClass: "bi-arrow-repeat",
+      colorClass: "text-secondary",
+      spinning: true,
+    };
+  }
+  if (viewState.availability === "unavailable" || !viewState.status) {
+    return {
+      label: "Network status unavailable",
+      shortLabel: "Unavailable",
+      iconClass: "bi-question-circle",
+      colorClass: "text-secondary",
+    };
+  }
+  const { connectionCount, errorCount, state, syncingContextCount } = viewState.status;
+  if (state === "error") {
+    return {
+      label: `Network error; ${errorCount} sync ${errorCount === 1 ? "error" : "errors"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+      shortLabel: "Error",
+      iconClass: "bi-exclamation-triangle-fill",
+      colorClass: "text-danger",
+    };
+  }
+  if (state === "syncing") {
+    return {
+      label: `Network syncing ${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+      shortLabel: "Syncing",
+      iconClass: "bi-arrow-repeat",
+      colorClass: "text-primary",
+      spinning: true,
+    };
+  }
+  if (state === "offline") {
+    return {
+      label: "Network offline; no active connections",
+      shortLabel: "Offline",
+      iconClass: "bi-cloud-slash-fill",
+      colorClass: "text-secondary",
+    };
+  }
+  return {
+    label: `Network synced; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+    shortLabel: "Synced",
+    iconClass: "bi-check-circle-fill",
+    colorClass: "text-success",
+  };
+}
+
+function NetworkStatusDetails({
+  detailsId,
+  status,
+  unavailable,
+  onOpenViewer,
+}: {
+  detailsId: string;
+  status?: INetworkStatusSummary;
+  unavailable: boolean;
+  onOpenViewer: () => void;
+}) {
+  return (
+    <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 }}
+    >
+      <div className="card-body p-3">
+        <h6 className="card-title mb-2">Network status</h6>
+        {unavailable || !status ? (
+          <p className="small text-muted mb-3">
+            Network diagnostics are temporarily unavailable. The local host may still be starting or
+            reconnecting.
+          </p>
+        ) : (
+          <>
+            <dl className="row small mb-2">
+              <dt className="col-7">Connections</dt>
+              <dd className="col-5 text-end">{status.connectionCount}</dd>
+              <dt className="col-7">Syncing contexts</dt>
+              <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>
+            </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>
+            )}
+          </>
+        )}
+        <button type="button" className="btn btn-sm btn-primary w-100" onClick={onOpenViewer}>
+          Open Network Viewer
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/** Accessible reactive network status button and details popover. */
+export function NetworkStatusIndicator({ compact = false }: { compact?: boolean }) {
+  const viewState = useNetworkStatus();
+  const presentation = getNetworkStatusPresentation(viewState);
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const detailsId = useId();
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const closeOutside = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", closeOutside);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("mousedown", closeOutside);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [open]);
+
+  return (
+    <div ref={containerRef} className="position-relative d-flex align-items-center">
+      <button
+        type="button"
+        className={`btn btn-sm d-flex align-items-center gap-1 px-2 ${presentation.colorClass}`}
+        style={{
+          border: "none",
+          background: "transparent",
+          minWidth: compact ? "30px" : undefined,
+        }}
+        aria-label={presentation.label}
+        aria-expanded={open}
+        aria-controls={detailsId}
+        title={presentation.label}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <i
+          className={`bi ${presentation.iconClass} ${presentation.spinning ? "spin" : ""}`}
+          aria-hidden="true"
+        />
+        {!compact && (
+          <span className="small">
+            {viewState.status?.connectionCount ?? 0}
+            <span className="visually-hidden"> connections</span>
+          </span>
+        )}
+      </button>
+      {open && (
+        <NetworkStatusDetails
+          detailsId={detailsId}
+          status={viewState.status}
+          unavailable={viewState.availability !== "ready"}
+          onOpenViewer={() => {
+            setOpen(false);
+            goToTabPath("network-viewer");
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Fixed tabs-strip area for built-in shell indicators. */
+export function TabsStripIndicators({ compact = false }: { compact?: boolean }) {
+  return (
+    <div
+      className="d-flex align-items-center flex-shrink-0"
+      role="group"
+      aria-label="Application status"
+    >
+      <NetworkStatusIndicator compact={compact} />
+    </div>
+  );
+}

package/src/tabs-layout/tabs-layout.tsx

@@ -14,6 +14,7 @@ import { colorMode } from "../screens/settings/color-mode-dropdown";
 import { systemPackage } from "../system-apps";
 import { allPackages } from "../ui-router/routes-loader";
 import { UIRouter } from "../ui-router/ui-loader";
+import { TabsStripIndicators } from "./network-status-indicator";
 import {
   activeTabId,
   activeTabs,
@@ -246,6 +247,7 @@ export function TabsLayoutInternal({ fillContainer = false }: { fillContainer?:
                 />
               ))}
             </div>
+            <TabsStripIndicators />
           </div>
         )}
       </div>
@@ -314,7 +316,8 @@ function MobileTabsHeader({
       </div>
 
       {/* Right Side - Hamburger Menu */}
-      <div className="d-flex align-items-center">
+      <div className="d-flex align-items-center gap-1">
+        <TabsStripIndicators compact />
         <div className="dropdown">
           <button
             type="button"

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

@@ -0,0 +1,55 @@
+import {
+  type INetworkDiagnosticsConsumer,
+  type INetworkStatusSummary,
+  inProcessTransportPair,
+  observable,
+  registerHostContractTransport,
+} from "@peers-app/peers-sdk";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { getNetworkDiagnosticsConsumer } from "../screens/network-viewer/network-viewer-ipc";
+import { useNetworkStatus } from "./use-network-status";
+
+jest.mock("../screens/network-viewer/network-viewer-ipc", () => ({
+  getNetworkDiagnosticsConsumer: jest.fn(),
+}));
+
+const mockGetDiagnostics = getNetworkDiagnosticsConsumer as jest.MockedFunction<
+  typeof getNetworkDiagnosticsConsumer
+>;
+
+function makeStatus(overrides: Partial<INetworkStatusSummary> = {}): INetworkStatusSummary {
+  return {
+    state: "offline",
+    connectionCount: 0,
+    syncingContextCount: 0,
+    errorCount: 0,
+    errors: [],
+    ...overrides,
+  };
+}
+
+describe("useNetworkStatus", () => {
+  it("streams status updates and reports host disconnection", async () => {
+    const status = observable(makeStatus());
+    mockGetDiagnostics.mockResolvedValue({
+      observables: { status },
+    } as INetworkDiagnosticsConsumer);
+    const [transport] = inProcessTransportPair();
+    const disposeTransport = registerHostContractTransport(transport);
+    const hook = renderHook(() => useNetworkStatus());
+
+    await waitFor(() => expect(hook.result.current.availability).toBe("ready"));
+    expect(hook.result.current.status?.state).toBe("offline");
+
+    act(() => {
+      status(makeStatus({ state: "syncing", connectionCount: 2, syncingContextCount: 1 }));
+    });
+    await waitFor(() => expect(hook.result.current.status?.state).toBe("syncing"));
+
+    act(() => {
+      disposeTransport();
+    });
+    await waitFor(() => expect(hook.result.current.availability).toBe("unavailable"));
+    hook.unmount();
+  });
+});

package/src/tabs-layout/use-network-status.ts

@@ -0,0 +1,68 @@
+import {
+  type INetworkStatusSummary,
+  type Subscription,
+  subscribeHostContractTransport,
+} from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+import { getNetworkDiagnosticsConsumer } from "../screens/network-viewer/network-viewer-ipc";
+
+/** Host availability plus the latest reactive network status snapshot. */
+export interface INetworkStatusViewState {
+  availability: "loading" | "ready" | "unavailable";
+  status?: INetworkStatusSummary;
+}
+
+/** Subscribe to the current host's System Network Diagnostics status observable. */
+export function useNetworkStatus(): INetworkStatusViewState {
+  const [viewState, setViewState] = useState<INetworkStatusViewState>({
+    availability: "loading",
+  });
+
+  useEffect(() => {
+    let active = true;
+    let generation = 0;
+    let statusSubscription: Subscription | undefined;
+    let hadTransport = false;
+    const unsubscribeTransport = subscribeHostContractTransport((transport) => {
+      generation += 1;
+      const currentGeneration = generation;
+      statusSubscription?.dispose();
+      statusSubscription = undefined;
+      if (!transport) {
+        setViewState({ availability: hadTransport ? "unavailable" : "loading" });
+        return;
+      }
+      hadTransport = true;
+      setViewState({ availability: "loading" });
+      void getNetworkDiagnosticsConsumer()
+        .then((diagnostics) => {
+          if (!active || generation !== currentGeneration) {
+            return;
+          }
+          setViewState({
+            availability: "ready",
+            status: diagnostics.observables.status(),
+          });
+          statusSubscription = diagnostics.observables.status.subscribe((status) => {
+            if (active && generation === currentGeneration) {
+              setViewState({ availability: "ready", status });
+            }
+          });
+        })
+        .catch(() => {
+          if (active && generation === currentGeneration) {
+            setViewState({ availability: "unavailable" });
+          }
+        });
+    });
+
+    return () => {
+      active = false;
+      generation += 1;
+      statusSubscription?.dispose();
+      unsubscribeTransport();
+    };
+  }, []);
+
+  return viewState;
+}