Files
vorotamoroz cf527fbf86 feat: show P2P diagnostics in the status pane and log
Show expandable relay, peer, and sync observations below Stats and route Diag
events to the existing Log Pane without notification or editor-status churn.
Retain departed-peer evidence and replay logs recorded before the pane opens.

Keep narrow panes usable with wrapping peer controls, readable device names,
and larger buttons. Add browser regressions for disclosure, control bounds,
button targets, and existing actions.
2026-11-06 12:17:31 +00:00

68 lines
3.0 KiB
TypeScript

import { mount } from "svelte";
import Pane from "../../../src/features/P2PSync/P2PReplicator/P2PServerStatusPane.svelte";
import { eventHub } from "../../../src/common/events";
import {
EVENT_SERVER_STATUS,
EVENT_P2P_REPLICATOR_STATUS,
} from "@vrtmrz/livesync-commonlib/compat/replication/trystero/TrysteroReplicatorP2PServer";
import { setGlobalLogFunction } from "octagonal-wheels/common/logger";
setGlobalLogFunction(() => undefined);
const settings = { P2P_useDiagRTC: true, P2P_roomID: "fixture-room", remoteConfigurations: {} };
const knownAdvertisements = [
{ peerId: "permanent-peer", name: "Phone", platform: "mobile", isAccepted: true },
{
peerId: "session-peer",
name: "LongDeviceNameWithoutWordBreaks".repeat(4),
platform: "desktop",
isTemporaryAccepted: true,
},
{ peerId: "new-peer", name: "New device", platform: "mobile" },
{ peerId: "denied-peer", name: "Denied device", platform: "mobile", isTemporaryAccepted: false },
];
if (new URLSearchParams(location.search).has("preview")) {
knownAdvertisements.splice(1, 1);
knownAdvertisements.splice(2, 1);
knownAdvertisements[0].name = "Android phone";
knownAdvertisements[1].name = "MacBook Pro (Living room)";
}
const record = (action: unknown) => {
document.querySelector("#action")!.textContent = JSON.stringify(action);
};
const p2p = {
transportLifecycle: { connect: async () => undefined, disconnect: async () => undefined },
changeRelay: { enableBroadcastChanges() {}, disableBroadcastChanges() {} },
peerAdmission: {
makeDecision: async (decision: unknown) => record(decision),
revokeDecision: async (decision: unknown) => record(decision),
},
targetedTransfer: { synchroniseWithPeer: async (peerId: string) => record({ sync: peerId }) },
diagnostics: {
getDiagnosticSnapshot: () => ({ peer: { category: "peer", code: "peer-left", timestamp: 1_700_000_000_000 } }),
onDiagnosticEvent: () => () => undefined,
requestStatus: () => {
eventHub.emitEvent(EVENT_SERVER_STATUS, {
isConnected: true,
knownAdvertisements,
serverPeerId: "fixture-self",
roomId: "fixture-room",
diag: {
totalNewConnections: 4,
totalSuccessfulConnections: 2,
totalFailedConnections: 1,
totalClosedConnections: 1,
details: {},
},
} as never);
eventHub.emitEvent(EVENT_P2P_REPLICATOR_STATUS, {
replicatingFrom: [],
replicatingTo: [],
watchingPeers: [],
isBroadcasting: false,
} as never);
},
},
};
const core = { services: { setting: { currentSettings: () => settings }, API: { showWindow: async () => undefined } } };
mount(Pane, { target: document.querySelector("#app")!, props: { p2p: p2p as never, core: core as never } });