@peers-app/peers-ui 0.27.3 → 0.27.5

package/src/screens/network-viewer/group-details-modal.tsx

@@ -1,421 +0,0 @@
-import {
-  type INetworkGroupDetails,
-  type INetworkGroupSyncInfo,
-  TrustLevel,
-} from "@peers-app/peers-sdk";
-import { useCallback, useEffect, useState } from "react";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { TrustLevelBadge } from "../../components/trust-level-badge";
-import {
-  getNetworkControlConsumer,
-  getNetworkDiagnosticsConsumer,
-  getNetworkViewerPlatformApi,
-} from "./network-viewer-ipc";
-
-interface IGroupDetailsModalProps {
-  groupId: string;
-  onClose: () => void;
-}
-
-export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps) {
-  const [group, setGroup] = useState<INetworkGroupDetails | null>(null);
-  const [syncInfo, setSyncInfo] = useState<INetworkGroupSyncInfo | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [notFound, setNotFound] = useState(false);
-  const [downloading, setDownloading] = useState(false);
-  const [downloadProgress, setDownloadProgress] = useState<string | null>(null);
-  const [downloadResult, setDownloadResult] = useState<{
-    success: boolean;
-    message: string;
-    filePath?: string;
-    size?: number;
-  } | null>(null);
-  const [fullSyncing, setFullSyncing] = useState(false);
-  const [fullSyncResult, setFullSyncResult] = useState<{
-    success: boolean;
-    message: string;
-  } | null>(null);
-  const [syncingNow, setSyncingNow] = useState(false);
-  const [syncNowResult, setSyncNowResult] = useState<{
-    success: boolean;
-    message: string;
-  } | null>(null);
-  const platformApi = getNetworkViewerPlatformApi();
-
-  const loadData = useCallback(async () => {
-    try {
-      const diagnostics = await getNetworkDiagnosticsConsumer();
-      const [{ group: groupDetails }, { groups }] = await Promise.all([
-        diagnostics.tools.getGroupDetails({ groupId }),
-        diagnostics.tools.getGroupSyncStatus({ groupId }),
-      ]);
-
-      if (!groupDetails) {
-        setNotFound(true);
-      } else {
-        setGroup(groupDetails);
-        setNotFound(false);
-      }
-
-      if (groups.length > 0) {
-        setSyncInfo(groups[0]);
-      }
-    } catch (error) {
-      console.error("Error loading group details:", error);
-      setNotFound(true);
-    } finally {
-      setLoading(false);
-    }
-  }, [groupId]);
-
-  const handleDownloadDatabase = async (deviceId: string) => {
-    try {
-      setDownloading(true);
-      setDownloadProgress("Preparing download...");
-      setDownloadResult(null);
-
-      if (!platformApi?.downloadRemoteDatabase) {
-        setDownloadResult({
-          success: false,
-          message: "Download API not available",
-        });
-        return;
-      }
-
-      setDownloadProgress("Downloading database...");
-      const result = (await platformApi.downloadRemoteDatabase(groupId, deviceId)) as {
-        success: boolean;
-        message: string;
-        filePath?: string;
-        size?: number;
-      };
-
-      setDownloadResult(result);
-      if (result.success) {
-        setDownloadProgress(null);
-      }
-    } catch (error: unknown) {
-      console.error("Error downloading database:", error);
-      setDownloadResult({
-        success: false,
-        message: error instanceof Error ? error.message : "Download failed",
-      });
-    } finally {
-      setDownloading(false);
-      setDownloadProgress(null);
-    }
-  };
-
-  const handleSyncNow = async () => {
-    setSyncingNow(true);
-    setSyncNowResult(null);
-    try {
-      const control = await getNetworkControlConsumer();
-      const result = await control.tools.syncGroupNow({ groupId });
-      setSyncNowResult(result);
-      if (result.success) {
-        await loadData();
-      }
-    } catch (error) {
-      setSyncNowResult({
-        success: false,
-        message: error instanceof Error ? error.message : String(error),
-      });
-    } finally {
-      setSyncingNow(false);
-    }
-  };
-
-  const handleFullSync = async () => {
-    if (
-      !confirm(
-        `Do a full sync for "${group?.groupName || groupId}"? This resets local change tracking for only this context and may transfer substantial data.`,
-      )
-    ) {
-      return;
-    }
-    setFullSyncing(true);
-    setFullSyncResult(null);
-    try {
-      const control = await getNetworkControlConsumer();
-      const result = await control.tools.resetChangeTracking({ dataContextId: groupId });
-      setFullSyncResult(result);
-      if (result.success) {
-        await loadData();
-      }
-    } catch (error) {
-      setFullSyncResult({
-        success: false,
-        message: error instanceof Error ? error.message : String(error),
-      });
-    } finally {
-      setFullSyncing(false);
-    }
-  };
-
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  return (
-    <div
-      className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-start justify-content-center"
-      style={{
-        backgroundColor: "rgba(0,0,0,0.5)",
-        zIndex: 1050,
-        overflowY: "auto",
-        paddingTop: "2rem",
-        paddingBottom: "2rem",
-      }}
-      onClick={onClose}
-    >
-      <div
-        className="card"
-        style={{ maxWidth: "900px", width: "90%", maxHeight: "90vh" }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="card-header d-flex justify-content-between align-items-center">
-          <div>
-            <h5 className="mb-0">{loading ? "Loading..." : group?.groupName || "Group Details"}</h5>
-            {group && (
-              <small className="text-muted">
-                <code>{group.groupId}</code>
-              </small>
-            )}
-          </div>
-          <button className="btn-close" onClick={onClose} aria-label="Close"></button>
-        </div>
-
-        {/* Body */}
-        <div className="card-body" style={{ overflowY: "auto", maxHeight: "calc(90vh - 120px)" }}>
-          {loading && <LoadingIndicator />}
-
-          {!loading && (notFound || !group) && (
-            <div className="alert alert-warning">Group not found.</div>
-          )}
-
-          {!loading && group && (
-            <>
-              {/* Group Info */}
-              <div className="mb-4">
-                <h6 className="border-bottom pb-2 mb-3">Group Information</h6>
-                <div className="row">
-                  <div className="col-md-6 mb-3">
-                    <strong>Group ID:</strong>
-                    <br />
-                    <code className="text-muted small">{group.groupId}</code>
-                  </div>
-                  <div className="col-md-6 mb-3">
-                    <strong>Group Name:</strong>
-                    <br />
-                    <span>{group.groupName}</span>
-                  </div>
-                  <div className="col-md-6 mb-3">
-                    <strong>Founder:</strong>
-                    <br />
-                    {group.founderUserName ? (
-                      <>
-                        <span>{group.founderUserName}</span>
-                        <br />
-                        <code className="text-muted small">{group.founderUserId}</code>
-                      </>
-                    ) : (
-                      <code className="text-muted small">{group.founderUserId}</code>
-                    )}
-                  </div>
-                  <div className="col-md-6 mb-3">
-                    <strong>Total Members:</strong>
-                    <br />
-                    <span className="h5">{group.members.length}</span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Members List */}
-              {group.members.length > 0 && (
-                <div className="mb-4">
-                  <h6 className="border-bottom pb-2 mb-3">Members ({group.members.length})</h6>
-                  <div className="table-responsive">
-                    <table className="table table-sm table-hover">
-                      <thead>
-                        <tr>
-                          <th>User</th>
-                          <th>User ID</th>
-                          <th>Role</th>
-                          <th>Trust Level</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {group.members.map((member) => (
-                          <tr key={member.userId}>
-                            <td>{member.userName || <span className="text-muted">-</span>}</td>
-                            <td>
-                              <code className="text-muted small">{member.userId}</code>
-                            </td>
-                            <td>
-                              <span className="badge bg-primary">{member.role}</span>
-                            </td>
-                            <td>
-                              <TrustLevelBadge level={member.trustLevel || TrustLevel.Unknown} />
-                            </td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              )}
-
-              <div className="mb-4">
-                <h6 className="border-bottom pb-2 mb-3">
-                  <i className="bi bi-arrow-repeat me-2"></i>
-                  Synchronization
-                </h6>
-                <p className="text-muted small mb-3">
-                  <strong>Sync now</strong> notifies connected peers that this context may have
-                  changes. <strong>Do full sync</strong> resets change tracking for this context and
-                  rebuilds synchronization state; that may transfer substantial data and should be
-                  used only to repair suspected drift.
-                </p>
-                <div className="d-flex flex-wrap gap-2">
-                  <button
-                    type="button"
-                    className="btn btn-sm btn-outline-primary"
-                    onClick={() => void handleSyncNow()}
-                    disabled={syncingNow || fullSyncing}
-                  >
-                    {syncingNow ? "Sending sync notification..." : "Sync now"}
-                  </button>
-                  <button
-                    type="button"
-                    className="btn btn-sm btn-outline-warning"
-                    onClick={() => void handleFullSync()}
-                    disabled={fullSyncing || syncingNow}
-                  >
-                    {fullSyncing ? "Starting full sync..." : "Do full sync"}
-                  </button>
-                </div>
-                {syncNowResult && (
-                  <div
-                    className={`alert mt-3 mb-0 ${syncNowResult.success ? "alert-success" : "alert-danger"}`}
-                    role="status"
-                  >
-                    {syncNowResult.message}
-                  </div>
-                )}
-                {fullSyncResult && (
-                  <div
-                    className={`alert mt-3 mb-0 ${fullSyncResult.success ? "alert-success" : "alert-danger"}`}
-                    role="status"
-                  >
-                    {fullSyncResult.message}
-                  </div>
-                )}
-              </div>
-
-              {/* Database Download Section */}
-              {platformApi?.downloadRemoteDatabase ? (
-                <div className="mb-4">
-                  <h6 className="border-bottom pb-2 mb-3">
-                    <i className="bi bi-download me-2"></i>
-                    Download Database (Fast Sync)
-                  </h6>
-                  <p className="text-muted small mb-3">
-                    Download the entire database from a connected device. This is useful for fast
-                    initial sync on a new device. The database will be saved as a backup file.
-                  </p>
-
-                  {syncInfo && syncInfo.connectedDevices.length > 0 ? (
-                    <div>
-                      <label className="form-label">Select a connected device:</label>
-                      <div className="d-flex flex-wrap gap-2">
-                        {syncInfo.connectedDevices.map((device) => (
-                          <button
-                            key={device.deviceId}
-                            className="btn btn-outline-primary btn-sm"
-                            onClick={() => handleDownloadDatabase(device.deviceId)}
-                            disabled={downloading}
-                          >
-                            {downloading ? (
-                              <>
-                                <span
-                                  className="spinner-border spinner-border-sm me-1"
-                                  role="status"
-                                  aria-hidden="true"
-                                ></span>
-                                Downloading...
-                              </>
-                            ) : (
-                              <>
-                                <i className="bi bi-cloud-download me-1"></i>
-                                {device.deviceId.substring(0, 8)}...
-                                <span className="badge bg-secondary ms-1">
-                                  {Math.round(device.latencyMs)}ms
-                                </span>
-                              </>
-                            )}
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="alert alert-info mb-0">
-                      <i className="bi bi-info-circle me-2"></i>
-                      No devices are currently connected to this group. Connect to a device first to
-                      download its database.
-                    </div>
-                  )}
-
-                  {downloadProgress && (
-                    <div className="mt-3">
-                      <div className="d-flex align-items-center">
-                        <span
-                          className="spinner-border spinner-border-sm me-2"
-                          role="status"
-                          aria-hidden="true"
-                        ></span>
-                        <span>{downloadProgress}</span>
-                      </div>
-                    </div>
-                  )}
-
-                  {downloadResult && (
-                    <div
-                      className={`alert mt-3 mb-0 ${downloadResult.success ? "alert-success" : "alert-danger"}`}
-                    >
-                      {downloadResult.success ? (
-                        <>
-                          <i className="bi bi-check-circle me-2"></i>
-                          <strong>Download complete!</strong>
-                          <br />
-                          <small>
-                            File: <code>{downloadResult.filePath}</code>
-                            <br />
-                            Size:{" "}
-                            {downloadResult.size
-                              ? `${(downloadResult.size / (1024 * 1024)).toFixed(2)} MB`
-                              : "Unknown"}
-                          </small>
-                        </>
-                      ) : (
-                        <>
-                          <i className="bi bi-exclamation-circle me-2"></i>
-                          <strong>Download failed:</strong> {downloadResult.message}
-                        </>
-                      )}
-                    </div>
-                  )}
-                </div>
-              ) : (
-                <div className="alert alert-info mb-4">
-                  Raw database download is available only in the Electron desktop app.
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/screens/network-viewer/index.ts

@@ -1,8 +0,0 @@
-// Import all network viewer screen components to ensure they register their routes
-import "./network-viewer";
-
-export * from "./connection-troubleshooter";
-export * from "./cpu-usage-graph";
-export * from "./device-details-modal";
-export * from "./network-viewer";
-export * from "./usage-graph";

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

@@ -1,72 +0,0 @@
-import {
-  CONTRACT_REQUEST_CHANNEL,
-  inProcessTransportPair,
-  newid,
-  registerHostContractTransport,
-} from "@peers-app/peers-sdk";
-import { getNetworkControlConsumer, getNetworkDiagnosticsConsumer } from "./network-viewer-ipc";
-
-function setupHost(label: string) {
-  const [consumerTransport, providerTransport] = inProcessTransportPair();
-  providerTransport.on(CONTRACT_REQUEST_CHANNEL, (call) => {
-    if (call.member === "observable" && call.name === "status" && call.operation === "get") {
-      return {
-        state: "offline",
-        connectionCount: 0,
-        syncingContextCount: 0,
-        errorCount: 0,
-        disconnectedContextCount: 0,
-        connectedContextCount: 0,
-        errors: [],
-      };
-    }
-    if (call.member === "tool" && call.name === "getOverview") {
-      return { overview: { localDeviceId: label } };
-    }
-    if (call.member === "tool" && call.name === "refreshNetworkInfo") {
-      return { success: true, message: label };
-    }
-    return undefined;
-  });
-  return {
-    dispose: registerHostContractTransport(consumerTransport),
-  };
-}
-
-describe("Network Viewer host consumers", () => {
-  it("caches consumers for one transport and recreates them after replacement", async () => {
-    const firstHost = setupHost(newid());
-    const firstDiagnostics = await getNetworkDiagnosticsConsumer();
-    expect(await getNetworkDiagnosticsConsumer()).toBe(firstDiagnostics);
-
-    const secondLabel = newid();
-    const secondHost = setupHost(secondLabel);
-    const secondDiagnostics = await getNetworkDiagnosticsConsumer();
-    const control = await getNetworkControlConsumer();
-
-    expect(secondDiagnostics).not.toBe(firstDiagnostics);
-    await expect(firstDiagnostics.tools.getOverview()).rejects.toThrow("disposed");
-    await expect(control.tools.refreshNetworkInfo()).resolves.toEqual({
-      success: true,
-      message: secondLabel,
-    });
-
-    secondHost.dispose();
-    firstHost.dispose();
-  });
-
-  it("shares one consumer pair across concurrent callers", async () => {
-    const host = setupHost(newid());
-    const [first, second, third] = await Promise.all([
-      getNetworkDiagnosticsConsumer(),
-      getNetworkDiagnosticsConsumer(),
-      getNetworkControlConsumer(),
-    ]);
-
-    expect(second).toBe(first);
-    const cachedControl = await getNetworkControlConsumer();
-    expect(third).toBe(cachedControl);
-
-    host.dispose();
-  });
-});

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

@@ -1,39 +0,0 @@
-import {
-  getNetworkControlContractDefinition,
-  getNetworkDiagnosticsContractDefinition,
-  hostContractConsumer,
-  type INetworkControlConsumer,
-  type INetworkDiagnosticsConsumer,
-} from "@peers-app/peers-sdk";
-
-/** Electron-only capabilities intentionally excluded from portable network contracts. */
-export type NetworkViewerPlatformApi = {
-  downloadRemoteDatabase?: (groupId: string, deviceId: string) => Promise<unknown>;
-  runDiagnostics: () => Promise<unknown>;
-};
-
-type WindowWithNetworkViewer = Window & {
-  electronAPI?: { networkViewer?: NetworkViewerPlatformApi };
-};
-
-const diagnostics = hostContractConsumer<INetworkDiagnosticsConsumer>(
-  getNetworkDiagnosticsContractDefinition(),
-);
-const control = hostContractConsumer<INetworkControlConsumer>(
-  getNetworkControlContractDefinition(),
-);
-
-/** Return a typed diagnostics consumer bound to the current local host transport. */
-export async function getNetworkDiagnosticsConsumer(): Promise<INetworkDiagnosticsConsumer> {
-  return diagnostics.get();
-}
-
-/** Return a typed control consumer bound to the current local host transport. */
-export async function getNetworkControlConsumer(): Promise<INetworkControlConsumer> {
-  return control.get();
-}
-
-/** Return the context-isolated desktop-only capability bridge, when available. */
-export function getNetworkViewerPlatformApi(): NetworkViewerPlatformApi | undefined {
-  return (window as WindowWithNetworkViewer).electronAPI?.networkViewer;
-}

package/src/screens/network-viewer/network-viewer-section.ts

@@ -1,12 +0,0 @@
-import { observable } from "@peers-app/peers-sdk";
-
-/** Pane shown inside the Network Viewer tab. */
-export type NetworkViewerSection = "main" | "sync-recovery";
-
-/**
- * Which Network Viewer pane is showing.
- *
- * The status overlay sets this before focusing the Network tab, so Sync recovery
- * opens inside that tab instead of replacing whatever screen is current.
- */
-export const networkViewerSection = observable<NetworkViewerSection>("main");

package/src/screens/network-viewer/network-viewer.section.test.tsx

@@ -1,68 +0,0 @@
-import { fireEvent, render, waitFor } from "@testing-library/react";
-import { NetworkViewerList } from "./network-viewer";
-import { networkViewerSection } from "./network-viewer-section";
-
-jest.mock("../../ui-router/ui-loader", () => ({
-  registerInternalPeersUI: jest.fn(),
-}));
-
-jest.mock("./network-viewer-ipc", () => ({
-  getNetworkDiagnosticsConsumer: async () => ({
-    tools: {
-      getOverview: async () => ({
-        overview: {
-          localDeviceId: "device",
-          localUserId: "user",
-          totalConnections: 0,
-          availableSlots: 8,
-          maxConnections: 8,
-          cpuPercent: 0,
-          memPercent: 0,
-          groups: [],
-        },
-      }),
-      getConnections: async () => ({ connections: [] }),
-      getGroupSyncStatus: async () => ({ groups: [] }),
-      getDisconnectedDevices: async () => ({ devices: [] }),
-      getSyncRecoveryEntries: async () => ({ entries: [] }),
-    },
-    observables: {
-      status: {
-        subscribe: () => ({ dispose() {} }),
-      },
-    },
-  }),
-  getNetworkControlConsumer: async () => ({ tools: {} }),
-  getNetworkViewerPlatformApi: () => undefined,
-}));
-
-describe("Network Viewer sections", () => {
-  beforeEach(() => {
-    networkViewerSection("main");
-  });
-
-  it("shows Sync recovery in place and returns to the overview", async () => {
-    const view = render(<NetworkViewerList />);
-    await waitFor(() => {
-      expect(view.getByRole("heading", { name: "Network Viewer" })).toBeTruthy();
-    });
-
-    fireEvent.click(view.getByRole("button", { name: "Sync recovery" }));
-    expect(await view.findByRole("heading", { name: "Sync recovery" })).toBeTruthy();
-    expect(view.queryByRole("heading", { name: "Network Viewer" })).toBeNull();
-
-    fireEvent.click(view.getByRole("button", { name: "Back" }));
-    expect(view.getByRole("heading", { name: "Network Viewer" })).toBeTruthy();
-    view.unmount();
-  });
-
-  it("opens on Sync recovery when the overlay selects that pane", async () => {
-    networkViewerSection("sync-recovery");
-    const view = render(<NetworkViewerList />);
-
-    expect(await view.findByRole("heading", { name: "Sync recovery" })).toBeTruthy();
-    expect(await view.findByText("No records are waiting in the recovery queue.")).toBeTruthy();
-    expect(view.queryByRole("heading", { name: "Network Viewer" })).toBeNull();
-    view.unmount();
-  });
-});