bump

- Fix Some Imports
- Fix floating promises on tests

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "obsidian-livesync",
     "name": "Self-hosted LiveSync",
-    "version": "0.25.53",
+    "version": "0.25.54",
     "minAppVersion": "0.9.12",
     "description": "Community implementation of self-hosted livesync. Reflect your vault changes to some other devices immediately. Please make sure to disable other synchronize solutions to avoid content corruption or duplication.",
     "author": "vorotamoroz",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "obsidian-livesync",
-    "version": "0.25.53",
+    "version": "0.25.54",
     "description": "Reflect your vault changes to some other devices immediately. Please make sure to disable other synchronize solutions to avoid content corruption or duplication.",
     "main": "main.js",
     "type": "module",
@@ -68,6 +68,7 @@
         "@tsconfig/svelte": "^5.0.8",
         "@types/deno": "^2.5.0",
         "@types/diff-match-patch": "^1.0.36",
+        "@types/markdown-it": "^14.1.2",
         "@types/node": "^24.10.13",
         "@types/pouchdb": "^6.4.2",
         "@types/pouchdb-adapter-http": "^6.1.6",
@@ -119,6 +120,7 @@
         "tsx": "^4.21.0",
         "typescript": "5.9.3",
         "vite": "^7.3.1",
+        "vite-plugin-istanbul": "^8.0.0",
         "vitest": "^4.0.16",
         "webdriverio": "^9.24.0",
         "yaml": "^2.8.2"
@@ -134,6 +136,7 @@
         "diff-match-patch": "^1.0.5",
         "fflate": "^0.8.2",
         "idb": "^8.0.3",
+        "markdown-it": "^14.1.1",
         "minimatch": "^10.2.2",
         "node-datachannel": "^0.32.1",
         "octagonal-wheels": "^0.1.45",

src/apps/cli/.gitignore

@@ -1,4 +1,5 @@
 .livesync
 test/*
 !test/*.sh
-node_modules
+node_modules
+.*.json

src/apps/cli/main.ts

@@ -45,23 +45,6 @@ import { stripAllPrefixes } from "@lib/string_and_binary/path";
 const SETTINGS_FILE = ".livesync/settings.json";
 defaultLoggerEnv.minLogLevel = LOG_LEVEL_DEBUG;
 
-// DI the log again.
-// const recentLogEntries = reactiveSource<LogEntry[]>([]);
-// const globalLogFunction = (message: any, level?: number, key?: string) => {
-//     const messageX =
-//         message instanceof Error
-//             ? new LiveSyncError("[Error Logged]: " + message.message, { cause: message })
-//             : message;
-//     const entry = { message: messageX, level, key } as LogEntry;
-//     recentLogEntries.value = [...recentLogEntries.value, entry];
-// };
-
-// setGlobalLogFunction((msg, level) => {
-//     console.error(`[${level}] ${typeof msg === "string" ? msg : JSON.stringify(msg)}`);
-//     if (msg instanceof Error) {
-//         console.error(msg);
-//     }
-// });
 function printHelp(): void {
     console.log(`
 Self-hosted LiveSync CLI
@@ -78,8 +61,8 @@ Commands:
     p2p-sync <peer> <timeout>
                             Sync with the specified peer-id or peer-name
     p2p-host                Start P2P host mode and wait until interrupted
-  push <src> <dst>        Push local file <src> into local database path <dst>
-  pull <src> <dst>        Pull file <src> from local database into local file <dst>
+    push <src> <dst>        Push local file <src> into local database path <dst>
+    pull <src> <dst>        Pull file <src> from local database into local file <dst>
     pull-rev <src> <dst> <rev>   Pull file <src> at specific revision <rev> into local file <dst>
     setup <setupURI>        Apply setup URI to settings file
     put <dst>               Read UTF-8 content from stdin and write to local database path <dst>
@@ -90,12 +73,12 @@ Commands:
     rm <path>               Mark a file as deleted in local database
     resolve <path> <rev>    Resolve conflicts by keeping <rev> and deleting others
 Examples:
-  livesync-cli ./my-database sync
+    livesync-cli ./my-database sync
     livesync-cli ./my-database p2p-peers 5
     livesync-cli ./my-database p2p-sync my-peer-name 15
     livesync-cli ./my-database p2p-host
-  livesync-cli ./my-database --settings ./custom-settings.json push ./note.md folder/note.md
-  livesync-cli ./my-database pull folder/note.md ./exports/note.md
+    livesync-cli ./my-database --settings ./custom-settings.json push ./note.md folder/note.md
+    livesync-cli ./my-database pull folder/note.md ./exports/note.md
     livesync-cli ./my-database pull-rev folder/note.md ./exports/note.old.md 3-abcdef
     livesync-cli ./my-database setup "obsidian://setuplivesync?settings=..."
     echo "Hello" | livesync-cli ./my-database put notes/hello.md
@@ -106,7 +89,7 @@ Examples:
     livesync-cli ./my-database rm notes/hello.md
     livesync-cli ./my-database resolve notes/hello.md 3-abcdef
     livesync-cli init-settings ./data.json
-  livesync-cli ./my-database --verbose
+    livesync-cli ./my-database --verbose
         `);
 }
 
@@ -353,7 +336,10 @@ export async function main() {
         (core: LiveSyncBaseCore<NodeServiceContext, any>, serviceHub: InjectableServiceHub<NodeServiceContext>) => {
             return initialiseServiceModulesCLI(vaultPath, core, serviceHub);
         },
-        (core) => [new ModuleReplicatorP2P(core)], // Register P2P replicator for CLI (useP2PReplicator is not used here)
+        (core) => [
+            // No modules need to be registered for P2P replication in CLI. Directly using Replicators in p2p.ts
+            // new ModuleReplicatorP2P(core),
+        ],
         () => [], // No add-ons
         (core) => {
             // Add target filter to prevent internal files are handled

src/apps/cli/package.json

@@ -22,7 +22,6 @@
         "test:e2e:p2p-upload-download-repro": "bash test/test-p2p-upload-download-repro-linux.sh",
         "test:e2e:p2p-host": "bash test/test-p2p-host-linux.sh",
         "test:e2e:p2p-sync": "bash test/test-p2p-sync-linux.sh",
-        "test:e2e:p2p-peers:local-relay": "bash test/test-p2p-peers-local-relay.sh",
         "test:e2e:mirror": "bash test/test-mirror-linux.sh",
         "pretest:e2e:all": "npm run build",
         "test:e2e:all": " export RUN_BUILD=0 && npm run test:e2e:setup-put-cat && npm run test:e2e:push-pull && npm run test:e2e:sync-two-local && npm run test:e2e:p2p && npm run test:e2e:mirror && npm run test:e2e:two-vaults && npm run test:e2e:p2p"

src/apps/webapp/.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 .DS_Store
 *.log
+.nyc_output

src/apps/webapp/README.md

@@ -55,8 +55,8 @@ The built files will be in the `dist` directory.
 
 ### Usage
 
-1. Open the webapp in your browser
-2. Grant directory access when prompted
+1. Open the webapp in your browser (`webapp.html`)
+2. Select a vault from history or grant access to a new directory
 3. Configure CouchDB connection by editing `.livesync/settings.json` in your vault
     - You can also copy data.json from Obsidian's plug-in folder.
 
@@ -98,8 +98,11 @@ webapp/
 │   ├── ServiceFileAccessImpl.ts
 │   ├── DatabaseFileAccess.ts
 │   └── FSAPIServiceModules.ts
-├── main.ts              # Application entry point
-├── index.html           # HTML entry
+├── bootstrap.ts         # Vault picker + startup orchestration
+├── main.ts              # LiveSync core bootstrap (after vault selected)
+├── vaultSelector.ts     # FileSystem handle history and permission flow
+├── webapp.html          # Main HTML entry
+├── index.html           # Redirect entry for compatibility
 ├── package.json
 ├── vite.config.ts
 └── README.md

src/apps/webapp/bootstrap.ts

@@ -0,0 +1,139 @@
+import { LiveSyncWebApp } from "./main";
+import { VaultHistoryStore, type VaultHistoryItem } from "./vaultSelector";
+
+const historyStore = new VaultHistoryStore();
+let app: LiveSyncWebApp | null = null;
+
+function getRequiredElement<T extends HTMLElement>(id: string): T {
+    const element = document.getElementById(id);
+    if (!element) {
+        throw new Error(`Missing element: #${id}`);
+    }
+    return element as T;
+}
+
+function setStatus(kind: "info" | "warning" | "error" | "success", message: string): void {
+    const statusEl = getRequiredElement<HTMLDivElement>("status");
+    statusEl.className = kind;
+    statusEl.textContent = message;
+}
+
+function setBusyState(isBusy: boolean): void {
+    const pickNewBtn = getRequiredElement<HTMLButtonElement>("pick-new-vault");
+    pickNewBtn.disabled = isBusy;
+
+    const historyButtons = document.querySelectorAll<HTMLButtonElement>(".vault-item button");
+    historyButtons.forEach((button) => {
+        button.disabled = isBusy;
+    });
+}
+
+function formatLastUsed(unixMillis: number): string {
+    if (!unixMillis) {
+        return "unknown";
+    }
+    return new Date(unixMillis).toLocaleString();
+}
+
+async function renderHistoryList(): Promise<VaultHistoryItem[]> {
+    const listEl = getRequiredElement<HTMLDivElement>("vault-history-list");
+    const emptyEl = getRequiredElement<HTMLParagraphElement>("vault-history-empty");
+
+    const [items, lastUsedId] = await Promise.all([historyStore.getVaultHistory(), historyStore.getLastUsedVaultId()]);
+
+    listEl.innerHTML = "";
+    emptyEl.classList.toggle("is-hidden", items.length > 0);
+
+    for (const item of items) {
+        const row = document.createElement("div");
+        row.className = "vault-item";
+
+        const info = document.createElement("div");
+        info.className = "vault-item-info";
+
+        const name = document.createElement("div");
+        name.className = "vault-item-name";
+        name.textContent = item.name;
+
+        const meta = document.createElement("div");
+        meta.className = "vault-item-meta";
+        const label = item.id === lastUsedId ? "Last used" : "Used";
+        meta.textContent = `${label}: ${formatLastUsed(item.lastUsedAt)}`;
+
+        info.append(name, meta);
+
+        const useButton = document.createElement("button");
+        useButton.type = "button";
+        useButton.textContent = "Use this vault";
+        useButton.addEventListener("click", () => {
+            void startWithHistory(item);
+        });
+
+        row.append(info, useButton);
+        listEl.appendChild(row);
+    }
+
+    return items;
+}
+
+async function startWithHandle(handle: FileSystemDirectoryHandle): Promise<void> {
+    setStatus("info", `Starting LiveSync with vault: ${handle.name}`);
+    app = new LiveSyncWebApp(handle);
+    await app.initialize();
+
+    const selectorEl = getRequiredElement<HTMLDivElement>("vault-selector");
+    selectorEl.classList.add("is-hidden");
+}
+
+async function startWithHistory(item: VaultHistoryItem): Promise<void> {
+    setBusyState(true);
+    try {
+        const handle = await historyStore.activateHistoryItem(item);
+        await startWithHandle(handle);
+    } catch (error) {
+        console.error("[Directory] Failed to open history vault:", error);
+        setStatus("error", `Failed to open saved vault: ${String(error)}`);
+        setBusyState(false);
+    }
+}
+
+async function startWithNewPicker(): Promise<void> {
+    setBusyState(true);
+    try {
+        const handle = await historyStore.pickNewVault();
+        await startWithHandle(handle);
+    } catch (error) {
+        console.error("[Directory] Failed to pick vault:", error);
+        setStatus("warning", `Vault selection was cancelled or failed: ${String(error)}`);
+        setBusyState(false);
+    }
+}
+
+async function initializeVaultSelector(): Promise<void> {
+    setStatus("info", "Select a vault folder to start LiveSync.");
+
+    const pickNewBtn = getRequiredElement<HTMLButtonElement>("pick-new-vault");
+    pickNewBtn.addEventListener("click", () => {
+        void startWithNewPicker();
+    });
+
+    await renderHistoryList();
+}
+
+window.addEventListener("load", async () => {
+    try {
+        await initializeVaultSelector();
+    } catch (error) {
+        console.error("Failed to initialize vault selector:", error);
+        setStatus("error", `Initialization failed: ${String(error)}`);
+    }
+});
+
+window.addEventListener("beforeunload", () => {
+    void app?.shutdown();
+});
+
+(window as any).livesyncApp = {
+    getApp: () => app,
+    historyStore,
+};

src/apps/webapp/index.html

@@ -3,207 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Self-hosted LiveSync WebApp</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-        }
-
-        .container {
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-            padding: 40px;
-            max-width: 600px;
-            width: 100%;
-        }
-
-        h1 {
-            color: #333;
-            margin-bottom: 10px;
-            font-size: 28px;
-        }
-
-        .subtitle {
-            color: #666;
-            margin-bottom: 30px;
-            font-size: 14px;
-        }
-
-        #status {
-            padding: 15px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        #status.error {
-            background: #fee;
-            color: #c33;
-            border: 1px solid #fcc;
-        }
-
-        #status.warning {
-            background: #ffeaa7;
-            color: #d63031;
-            border: 1px solid #fdcb6e;
-        }
-
-        #status.success {
-            background: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
-        }
-
-        #status.info {
-            background: #d1ecf1;
-            color: #0c5460;
-            border: 1px solid #bee5eb;
-        }
-
-        .info-section {
-            margin-top: 30px;
-            padding: 20px;
-            background: #f8f9fa;
-            border-radius: 8px;
-        }
-
-        .info-section h2 {
-            font-size: 18px;
-            margin-bottom: 15px;
-            color: #333;
-        }
-
-        .info-section ul {
-            list-style: none;
-            padding-left: 0;
-        }
-
-        .info-section li {
-            padding: 8px 0;
-            color: #666;
-            font-size: 14px;
-        }
-
-        .info-section li::before {
-            content: "•";
-            color: #667eea;
-            font-weight: bold;
-            display: inline-block;
-            width: 1em;
-            margin-left: -1em;
-            padding-right: 0.5em;
-        }
-
-        .feature-list {
-            margin-top: 20px;
-        }
-
-        .feature-list h3 {
-            font-size: 16px;
-            margin-bottom: 10px;
-            color: #444;
-        }
-
-        code {
-            background: #e9ecef;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-family: 'Courier New', monospace;
-            font-size: 13px;
-        }
-
-        .footer {
-            margin-top: 30px;
-            text-align: center;
-            color: #999;
-            font-size: 12px;
-        }
-
-        .footer a {
-            color: #667eea;
-            text-decoration: none;
-        }
-
-        .footer a:hover {
-            text-decoration: underline;
-        }
-
-        .console-link {
-            margin-top: 20px;
-            text-align: center;
-            font-size: 13px;
-            color: #666;
-        }
-
-        @media (max-width: 600px) {
-            .container {
-                padding: 30px 20px;
-            }
-
-            h1 {
-                font-size: 24px;
-            }
-        }
-    </style>
+    <title>Self-hosted LiveSync WebApp Launcher</title>
+    <meta http-equiv="refresh" content="0; url=./webapp.html">
 </head>
 <body>
-    <div class="container">
-        <h1>🔄 Self-hosted LiveSync</h1>
-        <p class="subtitle">Browser-based Self-hosted LiveSync using FileSystem API</p>
-
-        <div id="status" class="info">
-            Initialising...
-        </div>
-
-        <div class="info-section">
-            <h2>About This Application</h2>
-            <ul>
-                <li>Runs entirely in your browser</li>
-                <li>Uses FileSystem API to access your local vault</li>
-                <li>Syncs with CouchDB server (like Obsidian plugin)</li>
-                <li>Settings stored in <code>.livesync/settings.json</code></li>
-                <li>Real-time file watching with FileSystemObserver (Chrome 124+)</li>
-            </ul>
-        </div>
-
-        <div class="info-section">
-            <h2>How to Use</h2>
-            <ul>
-                <li>Grant directory access when prompted</li>
-                <li>Create <code>.livesync/settings.json</code> in your vault folder. (Compatible with Obsidian's Self-hosted LiveSync)</li>
-                <li>Add your CouchDB connection details</li>
-                <li>Your files will be synced automatically</li>
-            </ul>
-        </div>
-
-        <div class="console-link">
-            💡 Open browser console (F12) for detailed logs
-        </div>
-
-        <div class="footer">
-            <p>
-                Powered by 
-                <a href="https://github.com/vrtmrz/obsidian-livesync" target="_blank">
-                    Self-hosted LiveSync
-                </a>
-            </p>
-        </div>
-    </div>
-
-    <script type="module" src="./main.ts"></script>
+    <p>Redirecting to <a href="./webapp.html">WebApp</a>...</p>
 </body>
 </html>

src/apps/webapp/main.ts

@@ -13,10 +13,11 @@ import type { InjectableSettingService } from "@lib/services/implements/injectab
 import { useOfflineScanner } from "@lib/serviceFeatures/offlineScanner";
 import { useRedFlagFeatures } from "@/serviceFeatures/redFlag";
 import { useCheckRemoteSize } from "@lib/serviceFeatures/checkRemoteSize";
+import { useSetupURIFeature } from "@lib/serviceFeatures/setupObsidian/setupUri";
 import { SetupManager } from "@/modules/features/SetupManager";
-// import { ModuleObsidianSettingsAsMarkdown } from "@/modules/features/ModuleObsidianSettingAsMarkdown";
-import { ModuleSetupObsidian } from "@/modules/features/ModuleSetupObsidian";
-// import { ModuleObsidianMenu } from "@/modules/essentialObsidian/ModuleObsidianMenu";
+import { useSetupManagerHandlersFeature } from "@/serviceFeatures/setupObsidian/setupManagerHandlers";
+import { useP2PReplicatorCommands } from "@/lib/src/replication/trystero/useP2PReplicatorCommands";
+import { useP2PReplicatorFeature } from "@/lib/src/replication/trystero/useP2PReplicatorFeature";
 
 const SETTINGS_DIR = ".livesync";
 const SETTINGS_FILE = "settings.json";
@@ -47,21 +48,18 @@ const DEFAULT_SETTINGS: Partial<ObsidianLiveSyncSettings> = {
 };
 
 class LiveSyncWebApp {
-    private rootHandle: FileSystemDirectoryHandle | null = null;
+    private rootHandle: FileSystemDirectoryHandle;
     private core: LiveSyncBaseCore<ServiceContext, any> | null = null;
     private serviceHub: BrowserServiceHub<ServiceContext> | null = null;
 
+    constructor(rootHandle: FileSystemDirectoryHandle) {
+        this.rootHandle = rootHandle;
+    }
+
     async initialize() {
         console.log("Self-hosted LiveSync WebApp");
         console.log("Initializing...");
 
-        // Request directory access
-        await this.requestDirectoryAccess();
-
-        if (!this.rootHandle) {
-            throw new Error("Failed to get directory access");
-        }
-
         console.log(`Vault directory: ${this.rootHandle.name}`);
 
         // Create service context and hub
@@ -98,18 +96,26 @@ class LiveSyncWebApp {
             return DEFAULT_SETTINGS as ObsidianLiveSyncSettings;
         });
 
+        // App lifecycle handlers
+        this.serviceHub.appLifecycle.scheduleRestart.setHandler(async () => {
+            console.log("[AppLifecycle] Restart requested");
+            await this.shutdown();
+            await this.initialize();
+            setTimeout(() => {
+                window.location.reload();
+            }, 1000);
+        });
+
         // Create LiveSync core
         this.core = new LiveSyncBaseCore(
             this.serviceHub,
             (core, serviceHub) => {
-                return initialiseServiceModulesFSAPI(this.rootHandle!, core, serviceHub);
+                return initialiseServiceModulesFSAPI(this.rootHandle, core, serviceHub);
             },
             (core) => [
                 // new ModuleObsidianEvents(this, core),
                 // new ModuleObsidianSettingDialogue(this, core),
                 // new ModuleObsidianMenu(core),
-                new ModuleSetupObsidian(core),
-                new SetupManager(core),
                 // new ModuleObsidianSettingsAsMarkdown(core),
                 // new ModuleLog(this, core),
                 // new ModuleObsidianDocumentHistory(this, core),
@@ -118,13 +124,19 @@ class LiveSyncWebApp {
                 // new ModuleDev(this, core),
                 // new ModuleReplicateTest(this, core),
                 // new ModuleIntegratedTest(this, core),
-                // new SetupManager(core),
+                // new ModuleReplicatorP2P(core), // Register P2P replicator for CLI (useP2PReplicator is not used here)
+                new SetupManager(core),
             ],
             () => [], // No add-ons
             (core) => {
                 useOfflineScanner(core);
                 useRedFlagFeatures(core);
                 useCheckRemoteSize(core);
+                const replicator = useP2PReplicatorFeature(core);
+                useP2PReplicatorCommands(core, replicator);
+                const setupManager = core.getModule(SetupManager);
+                useSetupManagerHandlersFeature(core, setupManager);
+                useSetupURIFeature(core);
             }
         );
 
@@ -133,8 +145,6 @@ class LiveSyncWebApp {
     }
 
     private async saveSettingsToFile(data: ObsidianLiveSyncSettings): Promise<void> {
-        if (!this.rootHandle) return;
-
         try {
             // Create .livesync directory if it doesn't exist
             const livesyncDir = await this.rootHandle.getDirectoryHandle(SETTINGS_DIR, { create: true });
@@ -151,8 +161,6 @@ class LiveSyncWebApp {
     }
 
     private async loadSettingsFromFile(): Promise<Partial<ObsidianLiveSyncSettings> | null> {
-        if (!this.rootHandle) return null;
-
         try {
             const livesyncDir = await this.rootHandle.getDirectoryHandle(SETTINGS_DIR);
             const fileHandle = await livesyncDir.getFileHandle(SETTINGS_FILE);
@@ -165,90 +173,6 @@ class LiveSyncWebApp {
         }
     }
 
-    private async requestDirectoryAccess() {
-        try {
-            // Check if we have a cached directory handle
-            const cached = await this.loadCachedDirectoryHandle();
-            if (cached) {
-                // Verify permission (cast to any for compatibility)
-                try {
-                    const permission = await (cached as any).queryPermission({ mode: "readwrite" });
-                    if (permission === "granted") {
-                        this.rootHandle = cached;
-                        console.log("[Directory] Using cached directory handle");
-                        return;
-                    }
-                } catch (e) {
-                    // queryPermission might not be supported, try to use anyway
-                    console.log("[Directory] Could not verify permission, requesting new access");
-                }
-            }
-
-            // Request new directory access
-            console.log("[Directory] Requesting directory access...");
-            this.rootHandle = await (window as any).showDirectoryPicker({
-                mode: "readwrite",
-                startIn: "documents",
-            });
-
-            // Save the handle for next time
-            await this.saveCachedDirectoryHandle(this.rootHandle);
-            console.log("[Directory] Directory access granted");
-        } catch (error) {
-            console.error("[Directory] Failed to get directory access:", error);
-            throw error;
-        }
-    }
-
-    private async saveCachedDirectoryHandle(handle: FileSystemDirectoryHandle) {
-        try {
-            // Use IndexedDB to store the directory handle
-            const db = await this.openHandleDB();
-            const transaction = db.transaction(["handles"], "readwrite");
-            const store = transaction.objectStore("handles");
-            await new Promise((resolve, reject) => {
-                const request = store.put(handle, "rootHandle");
-                request.onsuccess = resolve;
-                request.onerror = reject;
-            });
-            db.close();
-        } catch (error) {
-            console.error("[Directory] Failed to cache handle:", error);
-        }
-    }
-
-    private async loadCachedDirectoryHandle(): Promise<FileSystemDirectoryHandle | null> {
-        try {
-            const db = await this.openHandleDB();
-            const transaction = db.transaction(["handles"], "readonly");
-            const store = transaction.objectStore("handles");
-            const handle = await new Promise<FileSystemDirectoryHandle | null>((resolve, reject) => {
-                const request = store.get("rootHandle");
-                request.onsuccess = () => resolve(request.result || null);
-                request.onerror = reject;
-            });
-            db.close();
-            return handle;
-        } catch (error) {
-            console.error("[Directory] Failed to load cached handle:", error);
-            return null;
-        }
-    }
-
-    private async openHandleDB(): Promise<IDBDatabase> {
-        return new Promise((resolve, reject) => {
-            const request = indexedDB.open("livesync-webapp-handles", 1);
-            request.onerror = () => reject(request.error);
-            request.onsuccess = () => resolve(request.result);
-            request.onupgradeneeded = (event) => {
-                const db = (event.target as IDBOpenDBRequest).result;
-                if (!db.objectStoreNames.contains("handles")) {
-                    db.createObjectStore("handles");
-                }
-            };
-        });
-    }
-
     private async start() {
         if (!this.core) {
             throw new Error("Core not initialized");
@@ -333,21 +257,4 @@ class LiveSyncWebApp {
     }
 }
 
-// Initialize on load
-const app = new LiveSyncWebApp();
-
-window.addEventListener("load", async () => {
-    try {
-        await app.initialize();
-    } catch (error) {
-        console.error("Failed to initialize:", error);
-    }
-});
-
-// Handle page unload
-window.addEventListener("beforeunload", () => {
-    void app.shutdown();
-});
-
-// Export for debugging
-(window as any).livesyncApp = app;
+export { LiveSyncWebApp };

src/apps/webapp/vaultSelector.ts

@@ -0,0 +1,191 @@
+const HANDLE_DB_NAME = "livesync-webapp-handles";
+const HANDLE_STORE_NAME = "handles";
+const LAST_USED_KEY = "meta:lastUsedVaultId";
+const VAULT_KEY_PREFIX = "vault:";
+const MAX_HISTORY_COUNT = 10;
+
+export type VaultHistoryItem = {
+    id: string;
+    name: string;
+    handle: FileSystemDirectoryHandle;
+    lastUsedAt: number;
+};
+
+type VaultHistoryValue = VaultHistoryItem;
+
+function makeVaultKey(id: string): string {
+    return `${VAULT_KEY_PREFIX}${id}`;
+}
+
+function parseVaultId(key: string): string | null {
+    if (!key.startsWith(VAULT_KEY_PREFIX)) {
+        return null;
+    }
+    return key.slice(VAULT_KEY_PREFIX.length);
+}
+
+function randomId(): string {
+    const n = Math.random().toString(36).slice(2, 10);
+    return `${Date.now()}-${n}`;
+}
+
+async function hasReadWritePermission(handle: FileSystemDirectoryHandle, requestIfNeeded: boolean): Promise<boolean> {
+    const h = handle as any;
+    if (typeof h.queryPermission === "function") {
+        const queried = await h.queryPermission({ mode: "readwrite" });
+        if (queried === "granted") {
+            return true;
+        }
+    }
+    if (!requestIfNeeded) {
+        return false;
+    }
+    if (typeof h.requestPermission === "function") {
+        const requested = await h.requestPermission({ mode: "readwrite" });
+        return requested === "granted";
+    }
+    return true;
+}
+
+export class VaultHistoryStore {
+    private async openHandleDB(): Promise<IDBDatabase> {
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(HANDLE_DB_NAME, 1);
+            request.onerror = () => reject(request.error);
+            request.onsuccess = () => resolve(request.result);
+            request.onupgradeneeded = (event) => {
+                const db = (event.target as IDBOpenDBRequest).result;
+                if (!db.objectStoreNames.contains(HANDLE_STORE_NAME)) {
+                    db.createObjectStore(HANDLE_STORE_NAME);
+                }
+            };
+        });
+    }
+
+    private async withStore<T>(mode: IDBTransactionMode, task: (store: IDBObjectStore) => Promise<T>): Promise<T> {
+        const db = await this.openHandleDB();
+        try {
+            const tx = db.transaction([HANDLE_STORE_NAME], mode);
+            const store = tx.objectStore(HANDLE_STORE_NAME);
+            return await task(store);
+        } finally {
+            db.close();
+        }
+    }
+
+    private async requestAsPromise<T>(request: IDBRequest<T>): Promise<T> {
+        return new Promise((resolve, reject) => {
+            request.onsuccess = () => resolve(request.result);
+            request.onerror = () => reject(request.error);
+        });
+    }
+
+    async getLastUsedVaultId(): Promise<string | null> {
+        return this.withStore("readonly", async (store) => {
+            const value = await this.requestAsPromise(store.get(LAST_USED_KEY));
+            return typeof value === "string" ? value : null;
+        });
+    }
+
+    async getVaultHistory(): Promise<VaultHistoryItem[]> {
+        return this.withStore("readonly", async (store) => {
+            const keys = (await this.requestAsPromise(store.getAllKeys())) as IDBValidKey[];
+            const values = (await this.requestAsPromise(store.getAll())) as unknown[];
+            const items: VaultHistoryItem[] = [];
+            for (let i = 0; i < keys.length; i++) {
+                const key = String(keys[i]);
+                const id = parseVaultId(key);
+                const value = values[i] as Partial<VaultHistoryValue> | undefined;
+                if (!id || !value || !value.handle || !value.name) {
+                    continue;
+                }
+                items.push({
+                    id,
+                    name: String(value.name),
+                    handle: value.handle,
+                    lastUsedAt: Number(value.lastUsedAt || 0),
+                });
+            }
+            items.sort((a, b) => b.lastUsedAt - a.lastUsedAt);
+            return items;
+        });
+    }
+
+    async saveSelectedVault(handle: FileSystemDirectoryHandle): Promise<VaultHistoryItem> {
+        const now = Date.now();
+        const existing = await this.getVaultHistory();
+
+        let matched: VaultHistoryItem | null = null;
+        for (const item of existing) {
+            try {
+                if (await item.handle.isSameEntry(handle)) {
+                    matched = item;
+                    break;
+                }
+            } catch {
+                // Ignore handles that cannot be compared, keep scanning.
+            }
+        }
+
+        const item: VaultHistoryItem = {
+            id: matched?.id ?? randomId(),
+            name: handle.name,
+            handle,
+            lastUsedAt: now,
+        };
+
+        await this.withStore("readwrite", async (store): Promise<void> => {
+            await this.requestAsPromise(store.put(item, makeVaultKey(item.id)));
+            await this.requestAsPromise(store.put(item.id, LAST_USED_KEY));
+
+            const merged = [...existing.filter((v) => v.id !== item.id), item].sort(
+                (a, b) => b.lastUsedAt - a.lastUsedAt
+            );
+            const stale = merged.slice(MAX_HISTORY_COUNT);
+            for (const old of stale) {
+                await this.requestAsPromise(store.delete(makeVaultKey(old.id)));
+            }
+        });
+
+        return item;
+    }
+
+    async activateHistoryItem(item: VaultHistoryItem): Promise<FileSystemDirectoryHandle> {
+        const granted = await hasReadWritePermission(item.handle, true);
+        if (!granted) {
+            throw new Error("Vault permissions were not granted");
+        }
+
+        const activated: VaultHistoryItem = {
+            ...item,
+            lastUsedAt: Date.now(),
+        };
+
+        await this.withStore("readwrite", async (store): Promise<void> => {
+            await this.requestAsPromise(store.put(activated, makeVaultKey(activated.id)));
+            await this.requestAsPromise(store.put(activated.id, LAST_USED_KEY));
+        });
+
+        return item.handle;
+    }
+
+    async pickNewVault(): Promise<FileSystemDirectoryHandle> {
+        const picker = (window as any).showDirectoryPicker;
+        if (typeof picker !== "function") {
+            throw new Error("FileSystem API showDirectoryPicker is not supported in this browser");
+        }
+
+        const handle = (await picker({
+            mode: "readwrite",
+            startIn: "documents",
+        })) as FileSystemDirectoryHandle;
+
+        const granted = await hasReadWritePermission(handle, true);
+        if (!granted) {
+            throw new Error("Vault permissions were not granted");
+        }
+
+        await this.saveSelectedVault(handle);
+        return handle;
+    }
+}

src/apps/webapp/vite.config.ts

@@ -1,16 +1,45 @@
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
+import istanbul from "vite-plugin-istanbul";
 import path from "node:path";
 import { readFileSync } from "node:fs";
 const packageJson = JSON.parse(readFileSync("../../../package.json", "utf-8"));
 const manifestJson = JSON.parse(readFileSync("../../../manifest.json", "utf-8"));
+const enableCoverage = process.env.PW_COVERAGE === "1";
+const repoRoot = path.resolve(__dirname, "../../..");
 // https://vite.dev/config/
 export default defineConfig({
-    plugins: [svelte()],
+    plugins: [
+        svelte(),
+        ...(enableCoverage
+            ? [
+                  istanbul({
+                      cwd: repoRoot,
+                      include: ["src/**/*.ts", "src/**/*.svelte"],
+                      exclude: [
+                          "node_modules",
+                          "dist",
+                          "test",
+                          "coverage",
+                          "src/apps/webapp/test/**",
+                          "playwright.config.ts",
+                          "vite.config.ts",
+                          "**/*.spec.ts",
+                          "**/*.test.ts",
+                      ],
+                      extension: [".js", ".ts", ".svelte"],
+                      requireEnv: false,
+                      cypress: false,
+                      checkProd: false,
+                  }),
+              ]
+            : []),
+    ],
     resolve: {
         alias: {
             "@": path.resolve(__dirname, "../../"),
             "@lib": path.resolve(__dirname, "../../lib/src"),
+            obsidian: path.resolve(__dirname, "../../../test/harness/obsidian-mock.ts"),
         },
     },
     base: "./",
@@ -18,14 +47,21 @@ export default defineConfig({
         outDir: "dist",
         emptyOutDir: true,
         rollupOptions: {
+            // test.html is used by the Playwright dev-server; include it here
+            // so the production build doesn't emit warnings about unused inputs.
             input: {
                 index: path.resolve(__dirname, "index.html"),
+                webapp: path.resolve(__dirname, "webapp.html"),
+                test: path.resolve(__dirname, "test.html"),
             },
+            external: ["crypto"],
         },
     },
     define: {
         MANIFEST_VERSION: JSON.stringify(process.env.MANIFEST_VERSION || manifestJson.version || "0.0.0"),
         PACKAGE_VERSION: JSON.stringify(process.env.PACKAGE_VERSION || packageJson.version || "0.0.0"),
+        global: "globalThis",
+        hostPlatform: JSON.stringify(process.platform || "linux"),
     },
     server: {
         port: 3000,

src/apps/webapp/webapp.css

@@ -0,0 +1,402 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --background-primary: #ffffff;
+    --background-primary-alt: #667eea;
+    --background-secondary: #f0f0f0;
+    --background-secondary-alt: #e0e0e0;
+    --background-modifier-border: #d0d0d0;
+    --text-normal: #333333;
+    --text-warning: #d9534f;
+    --text-accent: #5bc0de;
+    --text-on-accent: #ffffff;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.container {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    padding: 40px;
+    max-width: 700px;
+    width: 100%;
+}
+
+h1 {
+    color: #333;
+    margin-bottom: 10px;
+    font-size: 28px;
+}
+
+.subtitle {
+    color: #666;
+    margin-bottom: 24px;
+    font-size: 14px;
+}
+
+#status {
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+#status.error {
+    background: #fee;
+    color: #c33;
+    border: 1px solid #fcc;
+}
+
+#status.warning {
+    background: #ffeaa7;
+    color: #d63031;
+    border: 1px solid #fdcb6e;
+}
+
+#status.success {
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+#status.info {
+    background: #d1ecf1;
+    color: #0c5460;
+    border: 1px solid #bee5eb;
+}
+
+.vault-selector {
+    border: 1px solid #e6e9f2;
+    border-radius: 8px;
+    padding: 16px;
+    background: #fbfcff;
+    margin-bottom: 22px;
+}
+
+.vault-selector h2 {
+    font-size: 18px;
+    margin-bottom: 8px;
+    color: #333;
+}
+
+.vault-selector p {
+    color: #555;
+    font-size: 14px;
+    margin-bottom: 12px;
+}
+
+.vault-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 12px;
+}
+
+.vault-item {
+    border: 1px solid #d9deee;
+    border-radius: 8px;
+    padding: 10px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    background: #fff;
+}
+
+.vault-item-info {
+    min-width: 0;
+}
+
+.vault-item-name {
+    font-weight: 600;
+    color: #1f2a44;
+    word-break: break-word;
+}
+
+.vault-item-meta {
+    margin-top: 2px;
+    font-size: 12px;
+    color: #63708f;
+}
+
+button {
+    border: none;
+    border-radius: 6px;
+    padding: 8px 12px;
+    background: #2f5ae5;
+    color: #fff;
+    cursor: pointer;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+button:hover {
+    background: #1e4ad6;
+    opacity: 0.7;
+}
+
+button:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.empty-note {
+    font-size: 13px;
+    color: #6c757d;
+    margin-bottom: 8px;
+}
+
+.empty-note.is-hidden,
+.vault-selector.is-hidden {
+    display: none;
+}
+
+.info-section {
+    margin-top: 20px;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 8px;
+}
+
+.info-section h2 {
+    font-size: 18px;
+    margin-bottom: 12px;
+    color: #333;
+}
+
+.info-section ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+.info-section li {
+    padding: 7px 0;
+    color: #666;
+    font-size: 14px;
+}
+
+.info-section li::before {
+    content: "•";
+    color: #667eea;
+    font-weight: bold;
+    display: inline-block;
+    width: 1em;
+    margin-left: -1em;
+    padding-right: 0.5em;
+}
+
+code {
+    background: #e9ecef;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: "Courier New", monospace;
+    font-size: 13px;
+}
+
+.footer {
+    margin-top: 24px;
+    text-align: center;
+    color: #999;
+    font-size: 12px;
+}
+
+.footer a {
+    color: #667eea;
+    text-decoration: none;
+}
+
+.footer a:hover {
+    text-decoration: underline;
+}
+
+body.livesync-log-visible {
+    min-height: 100vh;
+    padding-bottom: 42vh;
+}
+
+#livesync-log-panel {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 42vh;
+    z-index: 900;
+    display: flex;
+    flex-direction: column;
+    background: #0f172a;
+    border-top: 1px solid #334155;
+}
+
+.livesync-log-header {
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #e2e8f0;
+    background: #111827;
+    border-bottom: 1px solid #334155;
+}
+
+#livesync-log-viewport {
+    flex: 1;
+    overflow: auto;
+    padding: 8px 12px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    font-size: 12px;
+    line-height: 1.4;
+    color: #e2e8f0;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.livesync-log-line {
+    margin-bottom: 2px;
+}
+
+#livesync-command-bar {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    z-index: 1000;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    max-width: 40vw;
+    padding: 10px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+.livesync-command-button {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 6px 10px;
+    background: #fff;
+    color: #111827;
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 1.2;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.livesync-command-button:hover:not(:disabled) {
+    background: #f3f4f6;
+}
+
+.livesync-command-button.is-disabled {
+    opacity: 0.55;
+}
+
+#livesync-window-root {
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    right: 16px;
+    bottom: calc(42vh + 16px);
+    z-index: 850;
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+    overflow: hidden;
+}
+
+#livesync-window-tabs {
+    display: flex;
+    gap: 6px;
+    padding: 8px;
+    background: #f3f4f6;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+#livesync-window-body {
+    position: relative;
+    flex: 1;
+    overflow: auto;
+    padding: 10px;
+}
+
+.livesync-window-tab {
+    border: 1px solid #d1d5db;
+    background: #fff;
+    color: #111827;
+    padding: 4px 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+.livesync-window-tab.is-active {
+    background: #e0e7ff;
+    border-color: #818cf8;
+}
+
+.livesync-window-panel {
+    display: none;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+
+.livesync-window-panel.is-active {
+    display: block;
+}
+
+@media (max-width: 600px) {
+    .container {
+        padding: 28px 18px;
+    }
+
+    h1 {
+        font-size: 24px;
+    }
+
+    .vault-item {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    #livesync-command-bar {
+        max-width: calc(100vw - 24px);
+        right: 12px;
+        left: 12px;
+        bottom: 12px;
+    }
+}
+
+popup {
+    position: fixed;
+    min-width: 80vw;
+    max-width: 90vw;
+    min-height: 40vh;
+    max-height: 80vh;
+    background: rgba(255, 255, 255, 0.8);
+    padding: 1em;
+    border-radius: 6px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    z-index: 10000;
+    overflow-y: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(15px);
+    border-radius: 10px;
+    z-index: 10;
+}

src/apps/webapp/webapp.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Self-hosted LiveSync WebApp</title>
+    <link rel="stylesheet" href="./webapp.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Self-hosted LiveSync on Web</h1>
+        <p class="subtitle">Browser-based Self-hosted LiveSync using FileSystem API</p>
+
+        <div id="status" class="info">Initialising...</div>
+
+        <div id="vault-selector" class="vault-selector">
+            <h2>Select Vault Folder</h2>
+            <p>Open a vault you already used, or pick a new folder.</p>
+
+            <div id="vault-history-list" class="vault-list"></div>
+            <p id="vault-history-empty" class="empty-note">No saved vaults yet.</p>
+            <button id="pick-new-vault" type="button">Choose new vault folder</button>
+        </div>
+
+        <div class="info-section">
+            <h2>How to Use</h2>
+            <ul>
+                <li>Select a vault folder and grant permission</li>
+                <li>Create <code>.livesync/settings.json</code> in your vault folder</li>
+                <li>Or use Setup-URI to apply settings</li>
+                <li>Your files will be synced after "replicate now"</li>
+            </ul>
+        </div>
+
+        <div class="footer">
+            <p>
+                Powered by
+                <a href="https://github.com/vrtmrz/obsidian-livesync" target="_blank">Self-hosted LiveSync</a>
+            </p>
+        </div>
+    </div>
+
+    <script type="module" src="./bootstrap.ts"></script>
+</body>
+</html>

src/features/P2PSync/P2PReplicator/P2PReplicatorPaneView.ts

@@ -9,7 +9,7 @@ import { LOG_LEVEL_NOTICE, REMOTE_P2P } from "@lib/common/types.ts";
 import { Logger } from "@lib/common/logger.ts";
 import { EVENT_P2P_PEER_SHOW_EXTRA_MENU, type PeerStatus } from "@lib/replication/trystero/P2PReplicatorPaneCommon.ts";
 import type { LiveSyncBaseCore } from "@/LiveSyncBaseCore.ts";
-import type { UseP2PReplicatorResult } from "@lib/replication/trystero/P2PReplicatorCore.ts";
+import type { P2PPaneParams } from "@/lib/src/replication/trystero/UseP2PReplicatorResult";
 export const VIEW_TYPE_P2P = "p2p-replicator";
 
 function addToList(item: string, list: string) {
@@ -32,7 +32,7 @@ function removeFromList(item: string, list: string) {
 
 export class P2PReplicatorPaneView extends SvelteItemView {
     core: LiveSyncBaseCore;
-    private _p2pResult: UseP2PReplicatorResult;
+    private _p2pResult: P2PPaneParams;
     override icon = "waypoints";
     title: string = "";
     override navigation = false;
@@ -123,7 +123,7 @@ And you can also drop the local database to rebuild from the remote device.`,
         await this.core.services.setting.applyPartial(currentSetting, true);
     }
     m?: Menu;
-    constructor(leaf: WorkspaceLeaf, core: LiveSyncBaseCore, p2pResult: UseP2PReplicatorResult) {
+    constructor(leaf: WorkspaceLeaf, core: LiveSyncBaseCore, p2pResult: P2PPaneParams) {
         super(leaf);
         this.core = core;
         this._p2pResult = p2pResult;

src/main.ts

@@ -14,9 +14,7 @@ import { ModuleObsidianGlobalHistory } from "./modules/features/ModuleGlobalHist
 import { ModuleIntegratedTest } from "./modules/extras/ModuleIntegratedTest.ts";
 import { ModuleReplicateTest } from "./modules/extras/ModuleReplicateTest.ts";
 import { LocalDatabaseMaintenance } from "./features/LocalDatabaseMainte/CmdLocalDatabaseMainte.ts";
-import { P2PReplicatorPaneView, VIEW_TYPE_P2P } from "./features/P2PSync/P2PReplicator/P2PReplicatorPaneView.ts";
-import { useP2PReplicator } from "@lib/replication/trystero/P2PReplicatorCore.ts";
-import type { InjectableServiceHub } from "./lib/src/services/implements/injectable/InjectableServiceHub.ts";
+import type { InjectableServiceHub } from "@lib/services/implements/injectable/InjectableServiceHub.ts";
 import { ObsidianServiceHub } from "./modules/services/ObsidianServiceHub.ts";
 import { ServiceRebuilder } from "@lib/serviceModules/Rebuilder.ts";
 import { ServiceDatabaseFileAccess } from "@/serviceModules/DatabaseFileAccess.ts";
@@ -27,17 +25,23 @@ import { FileAccessObsidian } from "./serviceModules/FileAccessObsidian.ts";
 import { StorageEventManagerObsidian } from "./managers/StorageEventManagerObsidian.ts";
 import type { ServiceModules } from "./types.ts";
 import { setNoticeClass } from "@lib/mock_and_interop/wrapper.ts";
-import type { ObsidianServiceContext } from "./lib/src/services/implements/obsidian/ObsidianServiceContext.ts";
+import type { ObsidianServiceContext } from "@lib/services/implements/obsidian/ObsidianServiceContext.ts";
 import { LiveSyncBaseCore } from "./LiveSyncBaseCore.ts";
-import { ModuleSetupObsidian } from "./modules/features/ModuleSetupObsidian.ts";
 import { ModuleObsidianMenu } from "./modules/essentialObsidian/ModuleObsidianMenu.ts";
 import { ModuleObsidianSettingsAsMarkdown } from "./modules/features/ModuleObsidianSettingAsMarkdown.ts";
 import { SetupManager } from "./modules/features/SetupManager.ts";
 import { ModuleMigration } from "./modules/essential/ModuleMigration.ts";
 import { enableI18nFeature } from "./serviceFeatures/onLayoutReady/enablei18n.ts";
-import { useOfflineScanner } from "./lib/src/serviceFeatures/offlineScanner.ts";
-import { useCheckRemoteSize } from "./lib/src/serviceFeatures/checkRemoteSize.ts";
+import { useOfflineScanner } from "@lib/serviceFeatures/offlineScanner.ts";
+import { useCheckRemoteSize } from "@lib/serviceFeatures/checkRemoteSize.ts";
 import { useRedFlagFeatures } from "./serviceFeatures/redFlag.ts";
+import { useSetupProtocolFeature } from "./serviceFeatures/setupObsidian/setupProtocol.ts";
+import { useSetupQRCodeFeature } from "@lib/serviceFeatures/setupObsidian/qrCode";
+import { useSetupURIFeature } from "@lib/serviceFeatures/setupObsidian/setupUri";
+import { useSetupManagerHandlersFeature } from "./serviceFeatures/setupObsidian/setupManagerHandlers.ts";
+import { useP2PReplicatorFeature } from "@lib/replication/trystero/useP2PReplicatorFeature.ts";
+import { useP2PReplicatorCommands } from "@lib/replication/trystero/useP2PReplicatorCommands.ts";
+import { useP2PReplicatorUI } from "./serviceFeatures/useP2PReplicatorUI.ts";
 export type LiveSyncCore = LiveSyncBaseCore<ObsidianServiceContext, LiveSyncCommands>;
 export default class ObsidianLiveSyncPlugin extends Plugin {
     core: LiveSyncCore;
@@ -133,10 +137,6 @@ export default class ObsidianLiveSyncPlugin extends Plugin {
 
         const serviceHub = new ObsidianServiceHub(this);
 
-        // Capture useP2PReplicator result so it can be passed to the P2PReplicator addon
-        // TODO: Dependency fix: bit hacky
-        let p2pReplicatorResult: ReturnType<typeof useP2PReplicator> | undefined;
-
         this.core = new LiveSyncBaseCore(
             serviceHub,
             (core, serviceHub) => {
@@ -147,7 +147,6 @@ export default class ObsidianLiveSyncPlugin extends Plugin {
                     new ModuleObsidianEvents(this, core),
                     new ModuleObsidianSettingDialogue(this, core),
                     new ModuleObsidianMenu(core),
-                    new ModuleSetupObsidian(core),
                     new ModuleObsidianSettingsAsMarkdown(core),
                     new ModuleLog(this, core),
                     new ModuleObsidianDocumentHistory(this, core),
@@ -174,13 +173,21 @@ export default class ObsidianLiveSyncPlugin extends Plugin {
                 const featuresInitialiser = enableI18nFeature;
                 const curriedFeature = () => featuresInitialiser(core);
                 core.services.appLifecycle.onLayoutReady.addHandler(curriedFeature);
+                const setupManager = core.getModule(SetupManager);
+                useSetupProtocolFeature(core, setupManager);
+                useSetupQRCodeFeature(core);
+                useSetupURIFeature(core);
+                useSetupManagerHandlersFeature(core, setupManager);
                 useOfflineScanner(core);
                 useRedFlagFeatures(core);
                 useCheckRemoteSize(core);
-                p2pReplicatorResult = useP2PReplicator(core, [
-                    VIEW_TYPE_P2P,
-                    (leaf: any) => new P2PReplicatorPaneView(leaf, core, p2pReplicatorResult!),
-                ]);
+                // p2pReplicatorResult = useP2PReplicator(core, [
+                //     VIEW_TYPE_P2P,
+                //     (leaf: any) => new P2PReplicatorPaneView(leaf, core, p2pReplicatorResult!),
+                // ]);
+                const replicator = useP2PReplicatorFeature(core);
+                useP2PReplicatorCommands(core, replicator);
+                useP2PReplicatorUI(core, core, replicator);
             }
         );
     }

src/modules/features/ModuleLog.ts

@@ -30,7 +30,7 @@ import { LOG_LEVEL_NOTICE, setGlobalLogFunction } from "octagonal-wheels/common/
 import { LogPaneView, VIEW_TYPE_LOG } from "./Log/LogPaneView.ts";
 import { serialized } from "octagonal-wheels/concurrency/lock";
 import { $msg } from "src/lib/src/common/i18n.ts";
-import { P2PLogCollector } from "../../lib/src/replication/trystero/P2PReplicatorCore.ts";
+import { P2PLogCollector } from "@/lib/src/replication/trystero/P2PLogCollector.ts";
 import type { LiveSyncCore } from "../../main.ts";
 import { LiveSyncError } from "@lib/common/LSError.ts";
 import { isValidPath } from "@/common/utils.ts";

src/modules/features/SettingDialogue/ObsidianLiveSyncSettingTab.ts

@@ -321,8 +321,8 @@ export class ObsidianLiveSyncSettingTab extends PluginSettingTab {
     }
 
     closeSetting() {
-        // @ts-ignore
-        this.core.app.setting.close();
+        //@ts-ignore :
+        this.plugin.app.setting.close();
     }
 
     handleElement(element: HTMLElement, func: OnUpdateFunc) {

src/modules/main/ModuleLiveSyncMain.ts

@@ -106,10 +106,10 @@ export class ModuleLiveSyncMain extends AbstractModule {
             this._log($msg("moduleLiveSyncMain.logReadChangelog"), LOG_LEVEL_NOTICE);
         }
 
-        //@ts-ignore
-        if (this.isMobile) {
-            this.settings.disableRequestURI = true;
-        }
+        // //@ts-ignore
+        // if (this.isMobile) {
+        //     this.settings.disableRequestURI = true;
+        // }
         if (last_version && Number(last_version) < VER) {
             this.settings.liveSync = false;
             this.settings.syncOnSave = false;

src/serviceFeatures/setupObsidian/setupManagerHandlers.ts

@@ -0,0 +1,34 @@
+import { type SetupManager, UserMode } from "@/modules/features/SetupManager";
+import type { SetupFeatureHost } from "@lib/serviceFeatures/setupObsidian/types";
+import { EVENT_REQUEST_OPEN_P2P_SETTINGS, EVENT_REQUEST_OPEN_SETUP_URI } from "@lib/events/coreEvents";
+import { eventHub } from "@lib/hub/hub";
+import { fireAndForget } from "@lib/common/utils";
+import type { NecessaryServices } from "@lib/interfaces/ServiceModule";
+
+export async function openSetupURI(setupManager: SetupManager) {
+    await setupManager.onUseSetupURI(UserMode.Unknown);
+}
+
+export async function openP2PSettings(host: SetupFeatureHost, setupManager: SetupManager) {
+    return await setupManager.onP2PManualSetup(UserMode.Update, host.services.setting.currentSettings(), false);
+}
+
+export function useSetupManagerHandlersFeature(
+    host: NecessaryServices<"API" | "UI" | "setting" | "appLifecycle", never>,
+    setupManager: SetupManager
+) {
+    host.services.appLifecycle.onLoaded.addHandler(() => {
+        host.services.API.addCommand({
+            id: "livesync-opensetupuri",
+            name: "Use the copied setup URI (Formerly Open setup URI)",
+            callback: () => fireAndForget(openSetupURI(setupManager)),
+        });
+
+        eventHub.onEvent(EVENT_REQUEST_OPEN_SETUP_URI, () => fireAndForget(() => openSetupURI(setupManager)));
+        eventHub.onEvent(EVENT_REQUEST_OPEN_P2P_SETTINGS, () =>
+            fireAndForget(() => openP2PSettings(host, setupManager))
+        );
+
+        return Promise.resolve(true);
+    });
+}

src/serviceFeatures/setupObsidian/setupManagerHandlers.unit.spec.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi, afterEach } from "vitest";
+import { eventHub } from "@lib/hub/hub";
+import { EVENT_REQUEST_OPEN_P2P_SETTINGS, EVENT_REQUEST_OPEN_SETUP_URI } from "@lib/events/coreEvents";
+import { openP2PSettings, openSetupURI, useSetupManagerHandlersFeature } from "./setupManagerHandlers";
+
+vi.mock("@/modules/features/SetupManager", () => {
+    return {
+        UserMode: {
+            Unknown: "unknown",
+            Update: "unknown",
+        },
+    };
+});
+
+describe("setupObsidian/setupManagerHandlers", () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+        vi.clearAllMocks();
+    });
+
+    it("openSetupURI should delegate to SetupManager.onUseSetupURI", async () => {
+        const setupManager = {
+            onUseSetupURI: vi.fn(async () => await Promise.resolve(true)),
+        } as any;
+
+        await openSetupURI(setupManager);
+        expect(setupManager.onUseSetupURI).toHaveBeenCalledWith("unknown");
+    });
+
+    it("openP2PSettings should delegate to SetupManager.onP2PManualSetup", async () => {
+        const settings = { x: 1 };
+        const host = {
+            services: {
+                setting: {
+                    currentSettings: vi.fn(() => settings),
+                },
+            },
+        } as any;
+        const setupManager = {
+            onP2PManualSetup: vi.fn(async () => await Promise.resolve(true)),
+        } as any;
+
+        await openP2PSettings(host, setupManager);
+        expect(setupManager.onP2PManualSetup).toHaveBeenCalledWith("unknown", settings, false);
+    });
+
+    it("useSetupManagerHandlersFeature should register onLoaded handler that wires command and events", async () => {
+        const addHandler = vi.fn();
+        const addCommand = vi.fn();
+        const onEventSpy = vi.spyOn(eventHub, "onEvent");
+
+        const host = {
+            services: {
+                API: {
+                    addCommand,
+                },
+                appLifecycle: {
+                    onLoaded: {
+                        addHandler,
+                    },
+                },
+                setting: {
+                    currentSettings: vi.fn(() => ({ x: 1 })),
+                },
+            },
+        } as any;
+        const setupManager = {
+            onUseSetupURI: vi.fn(async () => await Promise.resolve(true)),
+            onP2PManualSetup: vi.fn(async () => await Promise.resolve(true)),
+        } as any;
+
+        useSetupManagerHandlersFeature(host, setupManager);
+        expect(addHandler).toHaveBeenCalledTimes(1);
+
+        const loadedHandler = addHandler.mock.calls[0][0] as () => Promise<boolean>;
+        await loadedHandler();
+
+        expect(addCommand).toHaveBeenCalledWith(
+            expect.objectContaining({
+                id: "livesync-opensetupuri",
+                name: "Use the copied setup URI (Formerly Open setup URI)",
+            })
+        );
+        expect(onEventSpy).toHaveBeenCalledWith(EVENT_REQUEST_OPEN_SETUP_URI, expect.any(Function));
+        expect(onEventSpy).toHaveBeenCalledWith(EVENT_REQUEST_OPEN_P2P_SETTINGS, expect.any(Function));
+    });
+});

src/serviceFeatures/setupObsidian/setupProtocol.ts

@@ -0,0 +1,37 @@
+import { LOG_LEVEL_NOTICE, LOG_LEVEL_VERBOSE } from "@lib/common/types";
+import type { LogFunction } from "@lib/services/lib/logUtils";
+import { createInstanceLogFunction } from "@lib/services/lib/logUtils";
+import type { SetupFeatureHost } from "@lib/serviceFeatures/setupObsidian/types";
+import { configURIBase } from "@/common/types";
+import type { NecessaryServices } from "@lib/interfaces/ServiceModule";
+import { type SetupManager, UserMode } from "@/modules/features/SetupManager";
+
+async function handleSetupProtocol(setupManager: SetupManager, conf: Record<string, string>) {
+    if (conf.settings) {
+        await setupManager.onUseSetupURI(UserMode.Unknown, `${configURIBase}${encodeURIComponent(conf.settings)}`);
+    } else if (conf.settingsQR) {
+        await setupManager.decodeQR(conf.settingsQR);
+    }
+}
+
+export function registerSetupProtocolHandler(host: SetupFeatureHost, log: LogFunction, setupManager: SetupManager) {
+    try {
+        host.services.API.registerProtocolHandler("setuplivesync", async (conf) => {
+            await handleSetupProtocol(setupManager, conf);
+        });
+    } catch (e) {
+        log("Failed to register protocol handler. This feature may not work in some environments.", LOG_LEVEL_NOTICE);
+        log(e, LOG_LEVEL_VERBOSE);
+    }
+}
+
+export function useSetupProtocolFeature(
+    host: NecessaryServices<"API" | "UI" | "setting" | "appLifecycle", never>,
+    setupManager: SetupManager
+) {
+    const log = createInstanceLogFunction("SF:SetupProtocol", host.services.API);
+    host.services.appLifecycle.onLoaded.addHandler(() => {
+        registerSetupProtocolHandler(host, log, setupManager);
+        return Promise.resolve(true);
+    });
+}

src/serviceFeatures/setupObsidian/setupProtocol.unit.spec.ts

@@ -0,0 +1,131 @@
+import { describe, expect, it, vi, afterEach } from "vitest";
+import { registerSetupProtocolHandler, useSetupProtocolFeature } from "./setupProtocol";
+
+vi.mock("@/common/types", () => {
+    return {
+        configURIBase: "mock-config://",
+    };
+});
+
+vi.mock("@/modules/features/SetupManager", () => {
+    return {
+        UserMode: {
+            Unknown: "unknown",
+            Update: "unknown",
+        },
+    };
+});
+
+describe("setupObsidian/setupProtocol", () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+        vi.clearAllMocks();
+    });
+
+    it("registerSetupProtocolHandler should route settings payload to onUseSetupURI", async () => {
+        let protocolHandler: ((params: Record<string, string>) => Promise<void>) | undefined;
+        const host = {
+            services: {
+                API: {
+                    registerProtocolHandler: vi.fn(
+                        (_action: string, handler: (params: Record<string, string>) => Promise<void>) => {
+                            protocolHandler = handler;
+                        }
+                    ),
+                },
+            },
+        } as any;
+        const log = vi.fn();
+        const setupManager = {
+            onUseSetupURI: vi.fn(async () => await Promise.resolve(true)),
+            decodeQR: vi.fn(async () => await Promise.resolve(true)),
+        } as any;
+
+        registerSetupProtocolHandler(host, log, setupManager);
+        expect(host.services.API.registerProtocolHandler).toHaveBeenCalledWith("setuplivesync", expect.any(Function));
+
+        await protocolHandler!({ settings: "a b" });
+        expect(setupManager.onUseSetupURI).toHaveBeenCalledWith(
+            "unknown",
+            `mock-config://${encodeURIComponent("a b")}`
+        );
+        expect(setupManager.decodeQR).not.toHaveBeenCalled();
+    });
+
+    it("registerSetupProtocolHandler should route settingsQR payload to decodeQR", async () => {
+        let protocolHandler: ((params: Record<string, string>) => Promise<void>) | undefined;
+        const host = {
+            services: {
+                API: {
+                    registerProtocolHandler: vi.fn(
+                        (_action: string, handler: (params: Record<string, string>) => Promise<void>) => {
+                            protocolHandler = handler;
+                        }
+                    ),
+                },
+            },
+        } as any;
+        const log = vi.fn();
+        const setupManager = {
+            onUseSetupURI: vi.fn(async () => await Promise.resolve(true)),
+            decodeQR: vi.fn(async () => await Promise.resolve(true)),
+        } as any;
+
+        registerSetupProtocolHandler(host, log, setupManager);
+        await protocolHandler!({ settingsQR: "qr-data" });
+
+        expect(setupManager.decodeQR).toHaveBeenCalledWith("qr-data");
+        expect(setupManager.onUseSetupURI).not.toHaveBeenCalled();
+    });
+
+    it("registerSetupProtocolHandler should log and continue when registration throws", () => {
+        const host = {
+            services: {
+                API: {
+                    registerProtocolHandler: vi.fn(() => {
+                        throw new Error("register failed");
+                    }),
+                },
+            },
+        } as any;
+        const log = vi.fn();
+        const setupManager = {
+            onUseSetupURI: vi.fn(),
+            decodeQR: vi.fn(),
+        } as any;
+
+        registerSetupProtocolHandler(host, log, setupManager);
+
+        expect(log).toHaveBeenCalledTimes(2);
+    });
+
+    it("useSetupProtocolFeature should register onLoaded handler", async () => {
+        const addHandler = vi.fn();
+        const registerProtocolHandler = vi.fn();
+        const host = {
+            services: {
+                API: {
+                    addLog: vi.fn(),
+                    registerProtocolHandler,
+                },
+                appLifecycle: {
+                    onLoaded: {
+                        addHandler,
+                    },
+                },
+            },
+        } as any;
+        const setupManager = {
+            onUseSetupURI: vi.fn(),
+            decodeQR: vi.fn(),
+        } as any;
+
+        useSetupProtocolFeature(host, setupManager);
+        expect(addHandler).toHaveBeenCalledTimes(1);
+
+        const loadedHandler = addHandler.mock.calls[0][0] as () => Promise<boolean>;
+        await loadedHandler();
+
+        expect(registerProtocolHandler).toHaveBeenCalledWith("setuplivesync", expect.any(Function));
+    });
+});

src/serviceFeatures/useP2PReplicatorUI.ts

@@ -0,0 +1,76 @@
+import { eventHub, EVENT_REQUEST_OPEN_P2P } from "@/common/events";
+import { reactiveSource } from "octagonal-wheels/dataobject/reactive_v2";
+import type { NecessaryServices } from "@lib/interfaces/ServiceModule";
+import { type UseP2PReplicatorResult } from "@/lib/src/replication/trystero/UseP2PReplicatorResult";
+import { P2PLogCollector } from "@/lib/src/replication/trystero/P2PLogCollector";
+import { P2PReplicatorPaneView, VIEW_TYPE_P2P } from "@/features/P2PSync/P2PReplicator/P2PReplicatorPaneView";
+import type { LiveSyncCore } from "@/main";
+
+/**
+ * ServiceFeature: P2P Replicator lifecycle management.
+ * Binds a LiveSyncTrysteroReplicator to the host's lifecycle events,
+ * following the same middleware style as useOfflineScanner.
+ *
+ * @param viewTypeAndFactory  Optional [viewType, factory] pair for registering the P2P pane view.
+ *                            When provided, also registers commands and ribbon icon via services.API.
+ */
+
+export function useP2PReplicatorUI(
+    host: NecessaryServices<
+        | "API"
+        | "appLifecycle"
+        | "setting"
+        | "vault"
+        | "database"
+        | "databaseEvents"
+        | "keyValueDB"
+        | "replication"
+        | "config"
+        | "UI"
+        | "replicator",
+        never
+    >,
+    core: LiveSyncCore,
+    replicator: UseP2PReplicatorResult
+) {
+    // const env: LiveSyncTrysteroReplicatorEnv = { services: host.services as any };
+    const getReplicator = () => replicator.replicator;
+    const p2pLogCollector = new P2PLogCollector();
+    const storeP2PStatusLine = reactiveSource("");
+    p2pLogCollector.p2pReplicationLine.onChanged((line) => {
+        storeP2PStatusLine.value = line.value;
+    });
+
+    // Register view, commands and ribbon if a view factory is provided
+    const viewType = VIEW_TYPE_P2P;
+    const factory = (leaf: any) => {
+        return new P2PReplicatorPaneView(leaf, core, {
+            replicator: getReplicator(),
+            p2pLogCollector,
+            storeP2PStatusLine,
+        });
+    };
+    const openPane = () => host.services.API.showWindow(viewType);
+    host.services.API.registerWindow(viewType, factory);
+
+    host.services.appLifecycle.onInitialise.addHandler(() => {
+        eventHub.onEvent(EVENT_REQUEST_OPEN_P2P, () => {
+            void openPane();
+        });
+
+        host.services.API.addCommand({
+            id: "open-p2p-replicator",
+            name: "P2P Sync : Open P2P Replicator",
+            callback: () => {
+                void openPane();
+            },
+        });
+
+        host.services.API.addRibbonIcon("waypoints", "P2P Replicator", () => {
+            void openPane();
+        })?.addClass?.("livesync-ribbon-replicate-p2p");
+
+        return Promise.resolve(true);
+    });
+    return { replicator: getReplicator(), p2pLogCollector, storeP2PStatusLine };
+}

updates.md

@@ -3,6 +3,32 @@ 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.
 
+## 0.25.54
+
+18th March, 2026
+
+### Fixed
+
+- Remote storage size check now works correctly again (#818).
+- Some buttons on the setting dialogue now respond correctly again (#827).
+
+### Refactored
+
+- P2P replicator has been refactored to be a little roust and easier to understand.
+- Delete items which are no longer used that might cause potential problems
+
+### CLI
+
+- Fixed the corrupted display of the help message.
+- Remove some unnecessary codes.
+
+### WebApp
+
+- Fixed the issue where the detail level was not being applied in the log pane.
+- Pop-ups are now shown.
+- Add coverage for test.
+- Pop-ups are now shown in the web app as well.
+
 ## 0.25.53
 
 17th March, 2026