@peers-app/peers-ui 0.27.3 → 0.27.5

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

@@ -1,756 +0,0 @@
-import type {
-  IAppUpdateStatus,
-  INetworkConnectionInfo,
-  INetworkStatusSummary,
-} from "@peers-app/peers-sdk";
-import moment from "moment";
-import { useEffect, useId, useRef, useState } from "react";
-import { APP_UPDATE_ICON_CLASS, AppUpdatePopoverSection } from "../app-updates/app-update-controls";
-import { describeAppUpdateStatus, hasAppUpdate } from "../app-updates/app-updates-consumer";
-import { useAppUpdateStatus } from "../app-updates/use-app-update-status";
-import { IDENTITY_ACCEPT_PATH, IDENTITY_ACCOUNT_PATH } from "../screens/identity/identity-routes";
-import { getNetworkDiagnosticsConsumer } from "../screens/network-viewer/network-viewer-ipc";
-import { networkViewerSection } from "../screens/network-viewer/network-viewer-section";
-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 = 4_000;
-
-/** How long status must stay fully synced before leaving the syncing visual. */
-export const SYNCED_STABLE_MS = 1_000;
-
-/**
- * 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";
-
-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;
-  /**
-   * Bottom-right count of sync contexts that have known sync 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" };
-  /**
-   * Yellow upgrade arrow on the lower-left corner of the status mark when this device
-   * has an app update available. Kept on the mark so it does not hang below the tab strip.
-   */
-  updateAvailableOverlay?: boolean;
-}
-
-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 withStuckAttention(
-  presentation: INetworkStatusPresentation,
-  stuckRecoveryCount: number,
-): INetworkStatusPresentation {
-  if (stuckRecoveryCount <= 0) {
-    return presentation;
-  }
-  const attention =
-    stuckRecoveryCount === 1
-      ? "1 record needs attention"
-      : `${stuckRecoveryCount} records need attention`;
-  const labeled = { ...presentation, label: `${presentation.label}; ${attention}` };
-  if (presentation.colorClass === "text-danger") {
-    return labeled;
-  }
-  return { ...labeled, colorClass: "text-warning" };
-}
-
-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. */
-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 {
-    connectedContextCount,
-    connectionCount,
-    disconnectedContextCount,
-    errorCount,
-    state,
-    stuckRecoveryCount,
-    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 withStuckAttention(
-      {
-        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,
-      },
-      stuckRecoveryCount,
-    );
-  }
-  if (state === "syncing" || opts?.holdSyncingVisual) {
-    const longSync = state === "syncing" && opts?.syncingLongerThanGreenMs === true;
-    const contextsLabel =
-      state === "syncing"
-        ? `${syncingContextCount} ${syncingContextCount === 1 ? "context" : "contexts"}`
-        : "recent activity";
-    return withStuckAttention(
-      {
-        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,
-      },
-      stuckRecoveryCount,
-    );
-  }
-  if (state === "offline") {
-    return withStuckAttention(
-      {
-        label: "Network offline; no active connections",
-        shortLabel: "Offline",
-        iconClass: "bi-cloud-slash-fill",
-        colorClass: "text-secondary",
-      },
-      stuckRecoveryCount,
-    );
-  }
-  return withStuckAttention(
-    {
-      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,
-    },
-    stuckRecoveryCount,
-  );
-}
-
-/**
- * Add the app-update badge and label to a network status presentation. Applies in every
- * network state, offline included, because installing does not depend on connectivity.
- *
- * @param presentation - Presentation from {@link getNetworkStatusPresentation}.
- * @param appUpdate - This device's update status, if known.
- * @returns The presentation, with `updateAvailableOverlay` when an update is available.
- */
-export function withAppUpdate(
-  presentation: INetworkStatusPresentation,
-  appUpdate: IAppUpdateStatus | undefined,
-): INetworkStatusPresentation {
-  if (!appUpdate?.supported || !hasAppUpdate(appUpdate)) {
-    return presentation;
-  }
-  return {
-    ...presentation,
-    label: `${presentation.label}; ${describeAppUpdateStatus(appUpdate)}`,
-    updateAvailableOverlay: true,
-  };
-}
-
-function statusMarkBgClass(colorClass: string): string {
-  if (colorClass === "text-danger") {
-    return "bg-danger";
-  }
-  if (colorClass === "text-primary") {
-    return "bg-primary";
-  }
-  if (colorClass === "text-warning") {
-    return "bg-warning";
-  }
-  return "bg-success";
-}
-
-function StatusMark({ mode, colorClass }: { mode: NetworkStatusMark; colorClass: string }) {
-  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 = 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}`}
-      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 StatusCountRow({
-  label,
-  value,
-  className,
-}: {
-  label: string;
-  value: number;
-  className?: string;
-}) {
-  const tone = className ? ` ${className}` : "";
-  return (
-    <>
-      <dt className={`col-7${tone}`}>{label}</dt>
-      <dd className={`col-5 text-end${tone}`}>{value}</dd>
-    </>
-  );
-}
-
-function NetworkStatusDetails({
-  detailsId,
-  status,
-  appUpdate,
-  unavailable,
-  connectionsLoadState,
-  onUseInvite,
-  onOpenIdentity,
-  onOpenViewer,
-  onOpenRecovery,
-}: {
-  detailsId: string;
-  status?: INetworkStatusSummary;
-  appUpdate?: IAppUpdateStatus;
-  unavailable: boolean;
-  connectionsLoadState: ConnectionsLoadState;
-  onUseInvite: () => void;
-  onOpenIdentity: () => void;
-  onOpenViewer: () => void;
-  onOpenRecovery: () => 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">
-        <div className="d-flex gap-2 mb-3">
-          <button
-            type="button"
-            className="btn btn-sm btn-outline-primary flex-fill"
-            onClick={onUseInvite}
-          >
-            <i className="bi bi-qr-code me-1" aria-hidden="true" />
-            Use Invite
-          </button>
-          <button
-            type="button"
-            className="btn btn-sm btn-outline-primary flex-fill"
-            onClick={onOpenIdentity}
-          >
-            <i className="bi bi-person-badge me-1" aria-hidden="true" />
-            Identity
-          </button>
-        </div>
-        <AppUpdatePopoverSection status={appUpdate} />
-        <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">
-              <StatusCountRow label="Connections" value={status.connectionCount} />
-              <StatusCountRow label="Groups connected" value={status.connectedContextCount} />
-              {status.syncingContextCount > 0 && (
-                <StatusCountRow label="Syncing contexts" value={status.syncingContextCount} />
-              )}
-              {status.disconnectedContextCount > 0 && (
-                <StatusCountRow
-                  label="Groups offline"
-                  value={status.disconnectedContextCount}
-                  className="text-warning"
-                />
-              )}
-              {status.errorCount > 0 && (
-                <StatusCountRow label="Sync errors" value={status.errorCount} />
-              )}
-              {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>
-            )}
-            {status.stuckRecoveryCount > 0 && (
-              <div className="alert alert-warning py-2 px-2 small mb-2">
-                {status.stuckRecoveryCount === 1
-                  ? "1 record needs attention"
-                  : `${status.stuckRecoveryCount} records need attention`}
-              </div>
-            )}
-            <div className="border-top pt-2 mt-1 mb-2">
-              <div className="small text-muted mb-1">Connected Devices</div>
-              <ConnectedDevicesList loadState={connectionsLoadState} />
-            </div>
-          </>
-        )}
-        <button
-          type="button"
-          className={`btn btn-sm btn-outline-primary w-100${status && status.stuckRecoveryCount > 0 ? " mb-2" : ""}`}
-          onClick={onOpenViewer}
-        >
-          Open Network Viewer
-        </button>
-        {status && status.stuckRecoveryCount > 0 && (
-          <button type="button" className="btn btn-sm btn-warning w-100" onClick={onOpenRecovery}>
-            Sync recovery
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/** Accessible reactive network status button and details popover. */
-export function NetworkStatusIndicator({ compact = false }: { compact?: boolean }) {
-  const viewState = useNetworkStatus();
-  const appUpdate = useAppUpdateStatus();
-  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 = withAppUpdate(
-    getNetworkStatusPresentation(viewState, {
-      syncingLongerThanGreenMs,
-      holdSyncingVisual,
-    }),
-    appUpdate,
-  );
-
-  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)}
-      >
-        <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>
-          )}
-          {presentation.updateAvailableOverlay && (
-            <>
-              <i
-                className={`network-status-update-badge bi ${APP_UPDATE_ICON_CLASS} text-warning position-absolute`}
-                style={{
-                  fontSize: "0.5rem",
-                  lineHeight: 1,
-                  width: "0.5rem",
-                  height: "0.5rem",
-                  left: "-0.46rem",
-                  bottom: "-0.08rem",
-                }}
-                aria-hidden="true"
-              />
-              {/* Bootstrap Icons shift the glyph below the em box; keep it inside this badge. */}
-              <style>{`
-                .network-status-update-badge.bi::before {
-                  vertical-align: 0;
-                }
-              `}</style>
-            </>
-          )}
-        </span>
-        {!compact && (
-          <span className="small">
-            {viewState.status?.connectionCount ?? 0}
-            <span className="visually-hidden"> connections</span>
-          </span>
-        )}
-      </button>
-      {open && (
-        <NetworkStatusDetails
-          detailsId={detailsId}
-          status={viewState.status}
-          appUpdate={appUpdate}
-          unavailable={viewState.availability !== "ready"}
-          connectionsLoadState={connectionsLoadState}
-          onUseInvite={() => {
-            setOpen(false);
-            goToTabPath(IDENTITY_ACCEPT_PATH);
-          }}
-          onOpenIdentity={() => {
-            setOpen(false);
-            goToTabPath(IDENTITY_ACCOUNT_PATH);
-          }}
-          onOpenViewer={() => {
-            setOpen(false);
-            networkViewerSection("main");
-            goToTabPath("network-viewer");
-          }}
-          onOpenRecovery={() => {
-            setOpen(false);
-            networkViewerSection("sync-recovery");
-            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>
-  );
-}