@peers-app/peers-ui 0.21.2 → 0.21.4

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

@@ -0,0 +1,475 @@
+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;
+  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 {
+      label: "Network status loading",
+      shortLabel: "Loading",
+      iconClass: "bi-arrow-repeat",
+      colorClass: "text-secondary",
+      spinning: true,
+    };
+  }
+  if (viewState.availability === "unavailable" || !viewState.status) {
+    return {
+      label: "Network status unavailable",
+      shortLabel: "Unavailable",
+      iconClass: "bi-question-circle",
+      colorClass: "text-secondary",
+    };
+  }
+  const { connectionCount, errorCount, state, syncingContextCount } = viewState.status;
+  if (state === "error") {
+    return {
+      label: `Network error; ${errorCount} sync ${errorCount === 1 ? "error" : "errors"}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+      shortLabel: "Error",
+      colorClass: "text-danger",
+      mark: "solid",
+    };
+  }
+  if (state === "syncing" || opts?.holdSyncingVisual) {
+    const longSync = state === "syncing" && opts?.syncingLongerThanGreenMs === true;
+    const contextsLabel =
+      state === "syncing"
+        ? `${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}`
+        : "recent activity";
+    return {
+      label: `Network syncing ${contextsLabel}; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+      shortLabel: "Syncing",
+      colorClass: longSync ? "text-primary" : "text-success",
+      mark: longSync ? "indeterminate" : "pulse",
+    };
+  }
+  if (state === "offline") {
+    return {
+      label: "Network offline; no active connections",
+      shortLabel: "Offline",
+      iconClass: "bi-cloud-slash-fill",
+      colorClass: "text-secondary",
+    };
+  }
+  return {
+    label: `Network synced; ${connectionCount} active ${connectionCount === 1 ? "connection" : "connections"}`,
+    shortLabel: "Synced",
+    iconClass: "bi-check-circle-fill",
+    colorClass: "text-success",
+    compactIcon: true,
+  };
+}
+
+function StatusMark({ mode, colorClass }: { 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 (
+    <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 }}
+    >
+      <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>
+              {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.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-outline-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 [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;
+    }
+    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)}
+      >
+        {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}
+            <span className="visually-hidden"> connections</span>
+          </span>
+        )}
+      </button>
+      {open && (
+        <NetworkStatusDetails
+          detailsId={detailsId}
+          status={viewState.status}
+          unavailable={viewState.availability !== "ready"}
+          connectionsLoadState={connectionsLoadState}
+          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;
+}