P2P: Enhance status pane and card with active remote selection and replication features

- Added active P2P remote selector and creation option in the status pane.
- Introduced immediate replication action for accepted peers.
- Updated status control icons for clarity.
- Display stable Room ID suffix above Peer ID in the status card.
- Implemented dedicated active remote configuration for P2P features.
- Added migration support for P2P active remote selection.
- Improved unit test coverage for P2P settings.

docs/p2p_sync_updates_2026.md

@@ -20,15 +20,21 @@ Once you have saved the settings, return to the **P2P Status Pane** and click th
 ## 3. Real-time Control
 The status pane in the right sidebar provides granular control over your synchronisation:
 
+- **Active P2P Remote (new):** P2P now has its own active remote selection, separate from the normal active remote for database replication. Use the combo box next to the cog icon to choose which P2P remote configuration is active for P2P features.
+- **Create P2P Remote (new):** Use the **+** button to open the P2P setup dialogue and create a dedicated P2P remote configuration. This is recommended when no P2P active remote has been selected yet.
+- **Selection required (new):** If no P2P active remote is selected, the pane asks for selection before P2P target-related changes are saved.
+
 - **Signalling Status:** Shows if you are connected to the relay (🟢 Online).
 - **Live-push (Broadcast):** Toggle "Broadcast changes" to notify other peers whenever you make an edit.
-- **Watch:** Enable "Watch" on specific peers to automatically pull changes when they broadcast. This creates a "LiveSync-like" experience.
-- **Sync (🔄/🔁):** Mark specific peers as **sync targets**. Peers marked here will be included when you run the **"P2P: Sync with targets"** command (see section 5). Click the button next to a peer to toggle it on (🔄, highlighted) or off (🔁). This setting is persisted in your configuration.
+- **Replicate now (🔄):** Start immediate bidirectional replication with a visible peer (Pull, then Push).
+- **Watch (🔔/🔕):** Enable "Watch" on specific peers to automatically pull changes when they broadcast. This creates a "LiveSync-like" experience.
+- **Sync target (🔗/⛓️‍💥):** Mark specific peers as **sync targets**. Peers marked here will be included when you run the **"P2P: Sync with targets"** command (see section 5). Click the button next to a peer to toggle it on (🔗, highlighted) or off (⛓️‍💥). This setting is persisted in your configuration.
 
 ## 4. Replication Dialogue
 If you want to synchronise with a specific peer manually, use the **Replication** command or button. This opens the **Replication Dialogue** listing available devices.
 
 Inside the dialogue, the **Server Status** card at the top confirms you are still connected while performing the sync.
+The status card now shows a stable **Room ID suffix** above **Peer ID**. The Room ID suffix is better for identifying your P2P group, while Peer ID may change between connections.
 
 Two actions are available per peer:
 

src/features/P2PSync/P2PReplicator/P2PReplicatorPane.svelte

@@ -5,20 +5,21 @@
         AcceptedStatus,
         ConnectionStatus,
         type PeerStatus,
-    } from "../../../lib/src/replication/trystero/P2PReplicatorPaneCommon";
-    import type { LiveSyncTrysteroReplicator } from "../../../lib/src/replication/trystero/LiveSyncTrysteroReplicator";
+    } from "@lib/replication/trystero/P2PReplicatorPaneCommon";
+    import type { LiveSyncTrysteroReplicator } from "@lib/replication/trystero/LiveSyncTrysteroReplicator";
     import PeerStatusRow from "../P2PReplicator/PeerStatusRow.svelte";
-    import { EVENT_LAYOUT_READY, eventHub } from "../../../common/events";
+    import { EVENT_LAYOUT_READY, eventHub } from "@/common/events";
     import {
         type PeerInfo,
         type P2PServerInfo,
         EVENT_SERVER_STATUS,
         EVENT_REQUEST_STATUS,
         EVENT_P2P_REPLICATOR_STATUS,
-    } from "../../../lib/src/replication/trystero/TrysteroReplicatorP2PServer";
-    import { type P2PReplicatorStatus } from "../../../lib/src/replication/trystero/TrysteroReplicator";
-    import { $msg as _msg } from "../../../lib/src/common/i18n";
-    import { SETTING_KEY_P2P_DEVICE_NAME } from "../../../lib/src/common/types";
+    } from "@lib/replication/trystero/TrysteroReplicatorP2PServer";
+    import { type P2PReplicatorStatus } from "@lib/replication/trystero/TrysteroReplicator";
+    import { $msg as _msg } from "@lib/common/i18n";
+    import { SETTING_KEY_P2P_DEVICE_NAME } from "@lib/common/types";
+    import { generateP2PRoomId } from "@lib/common/utils";
     import type { LiveSyncBaseCore } from "@/LiveSyncBaseCore";
 
     interface Props {
@@ -148,6 +149,7 @@
         eventHub.emitEvent(EVENT_REQUEST_STATUS);
         return () => {
             r();
+            rx();
             r2();
             r3();
         };
@@ -216,18 +218,8 @@
     function useDefaultRelay() {
         eRelay = DEFAULT_SETTINGS.P2P_relays;
     }
-    function _generateRandom() {
-        return (Math.floor(Math.random() * 1000) + 1000).toString().substring(1);
-    }
-    function generateRandom(length: number) {
-        let buf = "";
-        while (buf.length < length) {
-            buf += "-" + _generateRandom();
-        }
-        return buf.substring(1, length);
-    }
     function chooseRandom() {
-        eRoomId = generateRandom(12) + "-" + Math.random().toString(36).substring(2, 5);
+        eRoomId = generateP2PRoomId();
     }
 
     async function openServer() {
@@ -251,7 +243,7 @@
                 setting?: boolean;
             };
             return initialDialogStatus;
-        } catch (e) {
+        } catch {
             return {};
         }
     };

src/features/P2PSync/P2PReplicator/P2PServerStatusCard.svelte

@@ -8,17 +8,22 @@
         EVENT_REQUEST_STATUS,
         EVENT_P2P_REPLICATOR_STATUS,
     } from "@lib/replication/trystero/TrysteroReplicatorP2PServer";
+    import { EVENT_SETTING_SAVED } from "@lib/events/coreEvents";
     import type { LiveSyncTrysteroReplicator } from "@/lib/src/replication/trystero/LiveSyncTrysteroReplicator";
     import type { P2PReplicatorStatus } from "@/lib/src/replication/trystero/TrysteroReplicator";
+    import { extractP2PRoomSuffix } from "@/lib/src/common/utils";
+    import type { LiveSyncBaseCore } from "@/LiveSyncBaseCore";
 
     interface Props {
         liveSyncReplicator: LiveSyncTrysteroReplicator;
         showBroadcastToggle?: boolean;
+        core?: LiveSyncBaseCore;
     }
 
-    let { liveSyncReplicator, showBroadcastToggle = true }: Props = $props();
+    let { liveSyncReplicator, showBroadcastToggle = true, core }: Props = $props();
     let serverInfo = $state<P2PServerInfo | undefined>(undefined);
     let replicatorStatus = $state<P2PReplicatorStatus | undefined>(undefined);
+    let roomSuffix = $state<string>(extractP2PRoomSuffix(core?.services.setting.currentSettings()?.P2P_roomID ?? ""));
 
     async function requestServerStatus() {
         await Promise.resolve(liveSyncReplicator.requestStatus());
@@ -46,10 +51,14 @@
     onMount(() => {
         const unsubscribe = eventHub.onEvent(EVENT_SERVER_STATUS, (status) => {
             serverInfo = status;
+            roomSuffix = extractP2PRoomSuffix(status?.roomId ?? "");
         });
         const unsubscribeStatus = eventHub.onEvent(EVENT_P2P_REPLICATOR_STATUS, (status) => {
             replicatorStatus = status;
         });
+        const unsubscribeSettings = eventHub.onEvent(EVENT_SETTING_SAVED, (settings) => {
+            roomSuffix = extractP2PRoomSuffix(settings?.P2P_roomID ?? "");
+        });
 
         fireAndForget(async () => {
             await delay(100);
@@ -59,6 +68,7 @@
         return () => {
             unsubscribe();
             unsubscribeStatus();
+            unsubscribeSettings();
         };
     });
 
@@ -85,6 +95,13 @@
     </div>
 
     {#if serverInfo}
+        <div class="status-item">
+            <span>Room ID suffix:</span>
+            <span class="room-suffix-display" title={roomSuffix || "Not configured"}>
+                {roomSuffix || "-"}
+            </span>
+        </div>
+
         <div class="status-item">
             <span>Peer ID:</span>
             <span class="peer-id-display" title={serverInfo.serverPeerId}>
@@ -162,6 +179,12 @@
         text-overflow: ellipsis;
     }
 
+    .room-suffix-display {
+        font-family: monospace;
+        font-size: 0.85rem;
+        font-weight: 600;
+    }
+
     .broadcast-row {
         align-items: center;
         margin-top: 0.25rem;

src/features/P2PSync/P2PReplicator/P2PServerStatusPane.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { EVENT_REQUEST_OPEN_P2P_SETTINGS, eventHub } from "@/common/events";
+    import { EVENT_LAYOUT_READY, EVENT_REQUEST_OPEN_P2P_SETTINGS, eventHub } from "@/common/events";
     import {
         EVENT_SERVER_STATUS,
         EVENT_REQUEST_STATUS,
@@ -8,12 +8,21 @@
         EVENT_P2P_REPLICATOR_PROGRESS,
         type P2PServerInfo,
     } from "@lib/replication/trystero/TrysteroReplicatorP2PServer";
-    import type { LiveSyncTrysteroReplicator } from "@/lib/src/replication/trystero/LiveSyncTrysteroReplicator";
-    import type { P2PReplicatorStatus, P2PReplicationReport } from "@/lib/src/replication/trystero/TrysteroReplicator";
+    import type { LiveSyncTrysteroReplicator } from "@lib/replication/trystero/LiveSyncTrysteroReplicator";
+    import type { P2PReplicatorStatus, P2PReplicationReport } from "@lib/replication/trystero/TrysteroReplicator";
     import { delay, fireAndForget } from "octagonal-wheels/promises";
     import P2PServerStatusCard from "./P2PServerStatusCard.svelte";
     import { EVENT_SETTING_SAVED } from "@lib/events/coreEvents";
     import type { LiveSyncBaseCore } from "@/LiveSyncBaseCore";
+    import { ConnectionStringParser } from "@lib/common/ConnectionString";
+    import type { P2PSyncSetting, RemoteConfiguration } from "@lib/common/models/setting.type";
+    import {
+        activateP2PRemoteConfiguration,
+        createRemoteConfigurationId,
+    } from "@lib/serviceFeatures/remoteConfig";
+    import { extractP2PRoomSuffix } from "@lib/common/utils";
+    import { SetupManager } from "@/modules/features/SetupManager";
+    import SetupRemoteP2P from "@/modules/features/SetupWizard/dialogs/SetupRemoteP2P.svelte";
 
     interface Props {
         liveSyncReplicator: LiveSyncTrysteroReplicator;
@@ -24,11 +33,22 @@
     let serverInfo = $state<P2PServerInfo | undefined>(undefined);
     let replicatorInfo = $state<P2PReplicatorStatus | undefined>(undefined);
     let decidingPeerId = $state<string | null>(null);
+    let replicatingPeerId = $state<string | null>(null);
     let communicatingUntil = $state<Record<string, number>>({});
     const COMMUNICATION_HOLD_MS = 2500;
     let syncOnReplicationSetting = $state(
         core.services.setting.currentSettings()?.P2P_SyncOnReplication ?? ""
     );
+    type P2PRemoteOption = {
+        id: string;
+        name: string;
+        roomSuffix: string;
+    };
+    let p2pRemoteOptions = $state<P2PRemoteOption[]>([]);
+    let selectedP2PRemoteConfigurationId = $state(
+        core.services.setting.currentSettings()?.P2P_ActiveRemoteConfigurationId ?? ""
+    );
+    let selectingP2PRemote = $state(false);
 
     function addToList(item: string, list: string): string {
         const items = list.split(",").map((e) => e.trim()).filter((e) => e);
@@ -50,6 +70,57 @@
         }, COMMUNICATION_HOLD_MS + 100);
     }
 
+    function listP2PRemoteOptions(
+        remoteConfigurations: Record<string, RemoteConfiguration> | undefined
+    ): P2PRemoteOption[] {
+        return Object.values(remoteConfigurations ?? {})
+            .map((config) => {
+                try {
+                    const parsed = ConnectionStringParser.parse(config.uri);
+                    if (parsed.type !== "p2p") {
+                        return undefined;
+                    }
+                    return {
+                        id: config.id,
+                        name: config.name,
+                        roomSuffix: extractP2PRoomSuffix(parsed.settings.P2P_roomID ?? ""),
+                    } as P2PRemoteOption;
+                } catch {
+                    return undefined;
+                }
+            })
+            .filter((e): e is P2PRemoteOption => !!e);
+    }
+
+    function refreshP2PRemoteOptions() {
+        const settings = core.services.setting.currentSettings();
+        const options = listP2PRemoteOptions(settings.remoteConfigurations);
+        p2pRemoteOptions = options;
+        const currentSelected = settings.P2P_ActiveRemoteConfigurationId ?? "";
+        const isCurrentSelectedValid = options.some((option) => option.id === currentSelected);
+        if (options.length === 0) {
+            selectedP2PRemoteConfigurationId = "";
+            return;
+        }
+        if (currentSelected.trim() === "" || !isCurrentSelectedValid) {
+            const fallbackId = options[0].id;
+            selectedP2PRemoteConfigurationId = fallbackId;
+            if (currentSelected !== fallbackId) {
+                fireAndForget(() => applyP2PActiveRemoteSelection(fallbackId));
+            }
+            return;
+        }
+        selectedP2PRemoteConfigurationId = currentSelected;
+    }
+
+    function canEditP2PSettings() {
+        const selected = selectedP2PRemoteConfigurationId.trim();
+        if (selected === "") {
+            return false;
+        }
+        return p2pRemoteOptions.some((e) => e.id === selected);
+    }
+
     async function requestServerStatus() {
         await liveSyncReplicator.requestStatus();
         eventHub.emitEvent(EVENT_REQUEST_STATUS);
@@ -77,10 +148,16 @@
 
         const unsubscribeSettings = eventHub.onEvent(EVENT_SETTING_SAVED, (settings) => {
             syncOnReplicationSetting = settings?.P2P_SyncOnReplication ?? "";
+            refreshP2PRemoteOptions();
+        });
+        const unsubscribeLayoutReady = eventHub.onEvent(EVENT_LAYOUT_READY, () => {
+            refreshP2PRemoteOptions();
+            void requestServerStatus();
         });
 
         fireAndForget(async () => {
             await delay(100);
+            refreshP2PRemoteOptions();
             await requestServerStatus();
         });
 
@@ -89,6 +166,7 @@
             unsubscribeReplicatorStatus();
             unsubscribeReplicatorProgress();
             unsubscribeSettings();
+            unsubscribeLayoutReady();
         };
     });
 
@@ -110,6 +188,113 @@
         eventHub.emitEvent(EVENT_REQUEST_OPEN_P2P_SETTINGS);
     }
 
+    async function applyP2PActiveRemoteSelection(id: string) {
+        selectingP2PRemote = true;
+        try {
+            await core.services.setting.updateSettings((settings) => {
+                settings.P2P_ActiveRemoteConfigurationId = id;
+                if (id.trim() === "") {
+                    return settings;
+                }
+                const activated = activateP2PRemoteConfiguration(settings, id);
+                return activated || settings;
+            }, true);
+            const latest = core.services.setting.currentSettings();
+            syncOnReplicationSetting = latest.P2P_SyncOnReplication ?? "";
+            refreshP2PRemoteOptions();
+        } finally {
+            selectingP2PRemote = false;
+        }
+    }
+
+    async function onP2PRemoteSelected(event: Event) {
+        const target = event.currentTarget as HTMLSelectElement;
+        const id = target.value;
+        selectedP2PRemoteConfigurationId = id;
+        await applyP2PActiveRemoteSelection(id);
+    }
+
+    async function createAndSelectP2PRemote() {
+        const setupManager = core.getModule(SetupManager);
+        const dialogManager = setupManager.dialogManager;
+        const currentSettings = core.services.setting.currentSettings();
+        const p2pConf = await dialogManager.openWithExplicitCancel(SetupRemoteP2P, currentSettings);
+        if (p2pConf === "cancelled" || typeof p2pConf !== "object" || !p2pConf) {
+            return;
+        }
+        const p2pSettings = p2pConf as Partial<P2PSyncSetting>;
+        const id = createRemoteConfigurationId();
+        const roomSuffix = extractP2PRoomSuffix(p2pSettings.P2P_roomID ?? "");
+        const name = roomSuffix ? `P2P Remote (${roomSuffix})` : "P2P Remote";
+        await core.services.setting.updateSettings((settings) => {
+            const merged = {
+                ...settings,
+                ...p2pSettings,
+            };
+            const uri = ConnectionStringParser.serialize({ type: "p2p", settings: merged });
+            settings.remoteConfigurations = {
+                ...(settings.remoteConfigurations ?? {}),
+                [id]: {
+                    id,
+                    name,
+                    uri,
+                    isEncrypted: false,
+                },
+            };
+            settings.P2P_ActiveRemoteConfigurationId = id;
+            const activated = activateP2PRemoteConfiguration(settings, id);
+            return activated || settings;
+        }, true);
+        const latest = core.services.setting.currentSettings();
+        syncOnReplicationSetting = latest.P2P_SyncOnReplication ?? "";
+        refreshP2PRemoteOptions();
+    }
+
+    async function updateSelectedP2PRemote(partial: Partial<P2PSyncSetting>) {
+        const selectedId = core.services.setting.currentSettings().P2P_ActiveRemoteConfigurationId?.trim() ?? "";
+        if (selectedId === "") {
+            return;
+        }
+        await core.services.setting.updateSettings((settings) => {
+            const config = settings.remoteConfigurations?.[selectedId];
+            if (!config) {
+                return settings;
+            }
+            let parsed;
+            try {
+                parsed = ConnectionStringParser.parse(config.uri);
+            } catch {
+                return settings;
+            }
+            if (parsed.type !== "p2p") {
+                return settings;
+            }
+            const mergedP2P = {
+                ...parsed.settings,
+                ...partial,
+            };
+            const uri = ConnectionStringParser.serialize({
+                type: "p2p",
+                settings: {
+                    ...settings,
+                    ...mergedP2P,
+                },
+            });
+            settings.remoteConfigurations = {
+                ...(settings.remoteConfigurations ?? {}),
+                [selectedId]: {
+                    ...config,
+                    uri,
+                    isEncrypted: false,
+                },
+            };
+            Object.assign(settings, partial);
+            const activated = activateP2PRemoteConfiguration(settings, selectedId);
+            return activated || settings;
+        }, true);
+        syncOnReplicationSetting = core.services.setting.currentSettings()?.P2P_SyncOnReplication ?? "";
+    }
+
     async function makeDecision(
         peer: P2PServerInfo["knownAdvertisements"][number],
         decision: boolean,
@@ -142,6 +327,19 @@
         }
     }
 
+    async function startReplication(peer: P2PServerInfo["knownAdvertisements"][number]) {
+        replicatingPeerId = peer.peerId;
+        try {
+            const pullResult = await liveSyncReplicator.replicateFrom(peer.peerId, true);
+            if (pullResult?.ok) {
+                await liveSyncReplicator.requestSynchroniseToPeer(peer.peerId);
+            }
+            await requestServerStatus();
+        } finally {
+            replicatingPeerId = null;
+        }
+    }
+
     function isAccepted(peer: P2PServerInfo["knownAdvertisements"][number]) {
         return peer.isTemporaryAccepted === true || peer.isAccepted === true;
     }
@@ -151,6 +349,9 @@
     }
 
     function toggleWatch(peerId: string) {
+        if (!canEditP2PSettings()) {
+            return;
+        }
         if (isWatching(peerId)) {
             liveSyncReplicator.unwatchPeer(peerId);
         } else {
@@ -175,28 +376,59 @@
     }
 
     async function toggleSyncTarget(peer: P2PServerInfo["knownAdvertisements"][number]) {
+        if (!canEditP2PSettings()) {
+            return;
+        }
         const currentValue = core.services.setting.currentSettings()?.P2P_SyncOnReplication ?? "";
         const newValue = isSyncTarget(peer.name)
             ? removeFromList(peer.name, currentValue)
             : addToList(peer.name, currentValue);
-        await core.services.setting.applyPartial({ P2P_SyncOnReplication: newValue }, true);
+        await updateSelectedP2PRemote({ P2P_SyncOnReplication: newValue });
     }
 </script>
 
 <div class="p2p-container">
     <div class="pane-header">
         <h2>P2P Status</h2>
-        <button
-            class="icon-button"
-            onclick={openConnectionSettings}
-            title="Open P2P Setup..."
-            aria-label="Open P2P Setup..."
-        >
-            ⚙
-        </button>
+        <div class="pane-header-actions">
+            <div class="remote-picker-wrap">
+                <select
+                    class="remote-picker"
+                    value={selectedP2PRemoteConfigurationId}
+                    onchange={onP2PRemoteSelected}
+                    disabled={selectingP2PRemote}
+                    aria-label="Select active P2P remote"
+                    title="Select active P2P remote"
+                >
+                    {#if p2pRemoteOptions.length === 0}
+                        <option value="">Select P2P remote...</option>
+                    {/if}
+                    {#each p2pRemoteOptions as option}
+                        <option value={option.id}>
+                            {option.name}{option.roomSuffix ? ` (${option.roomSuffix})` : ""}
+                        </option>
+                    {/each}
+                </select>
+                <button class="icon-button" onclick={() => createAndSelectP2PRemote()} title="Create P2P remote" aria-label="Create P2P remote">
+                    +
+                </button>
+            </div>
+            <button
+                class="icon-button"
+                onclick={openConnectionSettings}
+                title="Open P2P Setup..."
+                aria-label="Open P2P Setup..."
+            >
+                ⚙
+            </button>
+        </div>
     </div>
 
-    <P2PServerStatusCard {liveSyncReplicator} />
+    {#if !canEditP2PSettings()}
+        <p class="warning-line">Please select an active P2P remote configuration to change P2P sync targets.</p>
+    {/if}
+
+    <P2PServerStatusCard {liveSyncReplicator} {core} />
 
     <div class="peers-section">
         <div class="peers-header">
@@ -225,6 +457,15 @@
                                     <span class="badge status-chip {getAcceptanceStatusClass(peer)}">
                                         {getAcceptanceStatus(peer)}
                                     </span>
+                                    <button
+                                        class="emoji-button"
+                                        disabled={replicatingPeerId !== null}
+                                        title={replicatingPeerId === peer.peerId ? 'Replicating...' : 'Replicate now'}
+                                        aria-label={replicatingPeerId === peer.peerId ? 'Replicating' : 'Replicate now'}
+                                        onclick={() => startReplication(peer)}
+                                    >
+                                        {replicatingPeerId === peer.peerId ? '⏳' : '🔄'}
+                                    </button>
                                     <button
                                         class="action-button"
                                         disabled={decidingPeerId !== null}
@@ -239,9 +480,10 @@
                                         class="emoji-button {isWatching(peer.peerId) ? 'is-watching' : ''}"
                                         title={isWatching(peer.peerId) ? 'Watching this peer \u2014 click to stop' : 'Watch this peer\'s changes'}
                                         aria-label={isWatching(peer.peerId) ? 'Stop watching' : 'Watch peer'}
+                                        disabled={!canEditP2PSettings()}
                                         onclick={() => toggleWatch(peer.peerId)}
                                     >
-                                        {isWatching(peer.peerId) ? '👁' : '👁‍🗨'}
+                                        {isWatching(peer.peerId) ? '🔔' : '🔕'}
                                     </button>
                                 </div>                                <div class="decision-row watch-row">
                                     <span class="decision-label">SYNC</span>
@@ -249,9 +491,10 @@
                                         class="emoji-button {isSyncTarget(peer.name) ? 'is-watching' : ''}"
                                         title={isSyncTarget(peer.name) ? 'Sync target \u2014 click to remove' : 'Set as sync target'}
                                         aria-label={isSyncTarget(peer.name) ? 'Remove sync target' : 'Set sync target'}
+                                        disabled={!canEditP2PSettings()}
                                         onclick={() => toggleSyncTarget(peer)}
                                     >
-                                        {isSyncTarget(peer.name) ? '🔄' : '🔁'}
+                                        {isSyncTarget(peer.name) ? '🔗' : '⛓️‍💥'}
                                     </button>
                                 </div>                            {:else}
                                 <div class="decision-status">
@@ -345,6 +588,37 @@
         gap: 0.5rem;
     }
 
+    .pane-header-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        min-width: 0;
+    }
+
+    .remote-picker-wrap {
+        display: inline-flex;
+        gap: 0.3rem;
+        align-items: center;
+        min-width: 0;
+    }
+
+    .remote-picker {
+        max-width: 14rem;
+        min-width: 8rem;
+        height: 1.9rem;
+        border: 1px solid var(--divider-color);
+        border-radius: 0.4rem;
+        background-color: var(--interactive-normal);
+        color: var(--text-normal);
+        padding: 0 0.45rem;
+    }
+
+    .warning-line {
+        margin: -0.2rem 0 0;
+        font-size: 0.82rem;
+        color: var(--text-warning);
+    }
+
     .pane-header h2 {
         margin: 0;
         font-size: 1.1rem;
@@ -511,7 +785,7 @@
     }
 
     .accepted-row {
-        grid-template-columns: 1fr auto;
+        grid-template-columns: 1fr auto auto;
     }
 
     .decision-label {

src/modules/features/SetupWizard/dialogs/SetupRemoteP2P.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
     // import { delay } from "octagonal-wheels/promises";
-    import DialogHeader from "@/lib/src/UI/components/DialogHeader.svelte";
-    import Guidance from "@/lib/src/UI/components/Guidance.svelte";
-    import Decision from "@/lib/src/UI/components/Decision.svelte";
-    import UserDecisions from "@/lib/src/UI/components/UserDecisions.svelte";
-    import InfoNote from "@/lib/src/UI/components/InfoNote.svelte";
-    import InputRow from "@/lib/src/UI/components/InputRow.svelte";
-    import Password from "@/lib/src/UI/components/Password.svelte";
-    import { PouchDB } from "../../../../lib/src/pouchdb/pouchdb-browser";
+    import DialogHeader from "@lib/UI/components/DialogHeader.svelte";
+    import Guidance from "@lib/UI/components/Guidance.svelte";
+    import Decision from "@lib/UI/components/Decision.svelte";
+    import UserDecisions from "@lib/UI/components/UserDecisions.svelte";
+    import InfoNote from "@lib/UI/components/InfoNote.svelte";
+    import InputRow from "@lib/UI/components/InputRow.svelte";
+    import Password from "@lib/UI/components/Password.svelte";
+    import { PouchDB } from "@lib/pouchdb/pouchdb-browser";
     import {
         DEFAULT_SETTINGS,
         P2P_DEFAULT_SETTINGS,
@@ -17,15 +17,15 @@
         type ObsidianLiveSyncSettings,
         type P2PConnectionInfo,
         type P2PSyncSetting,
-    } from "../../../../lib/src/common/types";
+    } from "@lib/common/types";
 
-    import { TrysteroReplicator } from "../../../../lib/src/replication/trystero/TrysteroReplicator";
-    import type { ReplicatorHostEnv } from "../../../../lib/src/replication/trystero/types";
-    import { copyTo, pickP2PSyncSettings, type SimpleStore } from "../../../../lib/src/common/utils";
+    import { TrysteroReplicator } from "@lib/replication/trystero/TrysteroReplicator";
+    import type { ReplicatorHostEnv } from "@lib/replication/trystero/types";
+    import { copyTo, pickP2PSyncSettings, type SimpleStore } from "@lib/common/utils";
     import { onMount } from "svelte";
-    import { getDialogContext, type GuestDialogProps } from "../../../../lib/src/UI/svelteDialog";
-    import { SETTING_KEY_P2P_DEVICE_NAME } from "../../../../lib/src/common/types";
-    import ExtraItems from "../../../../lib/src/UI/components/ExtraItems.svelte";
+    import { getDialogContext, type GuestDialogProps } from "@lib/UI/svelteDialog";
+    import { SETTING_KEY_P2P_DEVICE_NAME } from "@lib/common/types";
+    import ExtraItems from "@lib/UI/components/ExtraItems.svelte";
 
     const default_setting = pickP2PSyncSettings(DEFAULT_SETTINGS);
     let syncSetting = $state<P2PConnectionInfo>({ ...default_setting });

updates.md

@@ -3,6 +3,35 @@ Since 19th July, 2025 (beta1 in 0.25.0-beta1, 13th July, 2025)
 
 The head note of 0.25 is now in [updates_old.md](https://github.com/vrtmrz/obsidian-livesync/blob/main/updates_old.md). Because 0.25 got a lot of updates, thankfully, compatibility is kept and we do not need breaking changes! In other words, when get enough stabled. The next version will be v1.0.0. Even though it my hope.
 
+## Unreleased
+
+### P2P Status Pane
+
+- Added active P2P remote selector (combo box) and `+` action to create/select a P2P remote from the P2P setup dialogue.
+- Added per-peer immediate replication action on accepted peers.
+- Updated status control icons for clarity:
+  - Replicate now: `🔄` (`⏳` while running)
+  - Watch: `🔔` / `🔕`
+  - Sync target: `🔗` / `⛓️‍💥`
+- Added warning state when no active P2P remote is selected.
+
+### P2P Status Card
+
+- Added stable Room ID suffix display and placed it above Peer ID for better identification.
+
+### Non behavioural internal changes
+
+#### P2P
+
+- Added `P2P_ActiveRemoteConfigurationId` as a dedicated active remote selection for P2P features, separate from the normal active remote.
+- Added activation logic for P2P dedicated remote configuration that reflects P2P settings while keeping `remoteType` unchanged.
+- Added migration support to carry over P2P active remote selection when appropriate.
+- Added shared Room ID utility functions and applied them across P2P setup and P2P panes.
+
+#### Tests
+
+- Added/updated unit test coverage around settings load behaviour for P2P active remote application.
+
 ## 0.25.63
 
 17th May, 2026