tabby-sftp-ui 0.2.1 → 0.2.3

package/dist/index.js

@@ -309,6 +309,9 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         this.deleteConfirmText = '';
         this.pendingLocalDelete = [];
         this.pendingRemoteDelete = [];
+        this.replaceConfirmVisible = false;
+        this.replaceConfirmText = '';
+        this.replaceConfirmResolve = null;
         this.inputDialogVisible = false;
         this.inputDialogTitle = '';
         this.inputDialogPlaceholder = '';
@@ -609,17 +612,11 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         const movePayload = sources.map(x => x.fullPath);
         ev.dataTransfer?.setData('application/x-tabby-sftp-ui-remote-move', JSON.stringify(movePayload));
         // Existing cross-device drag (remote -> local) only for files
-        if (!item.isDirectory) {
-            const payload = {
-                kind: 'remote-file',
-                remotePath: item.fullPath,
-                name: item.name,
-                size: item.size,
-                mode: item.mode,
-            };
-            ev.dataTransfer?.setData('application/x-tabby-sftp-ui', JSON.stringify(payload));
-            ev.dataTransfer?.setData('text/plain', item.fullPath);
-        }
+        const payload = item.isDirectory
+            ? { kind: 'remote-dir', remotePath: item.fullPath, name: item.name }
+            : { kind: 'remote-file', remotePath: item.fullPath, name: item.name, size: item.size, mode: item.mode };
+        ev.dataTransfer?.setData('application/x-tabby-sftp-ui', JSON.stringify(payload));
+        ev.dataTransfer?.setData('text/plain', item.fullPath);
         ev.dataTransfer?.setDragImage?.(ev.target ?? document.body, 0, 0);
     }
     async onDropOnRemote(ev) {
@@ -632,24 +629,41 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
             return;
         }
         // Drag & drop from OS file manager (Explorer/Finder) into the remote pane
-        const dtFiles = Array.from(ev.dataTransfer?.files ?? []);
-        if (dtFiles.length) {
-            const paths = dtFiles
-                .map(f => f.path)
-                .filter((p) => Boolean(p));
-            if (paths.length) {
-                try {
-                    for (const p of paths) {
-                        await this.uploadLocalPathToRemote(this.remotePath, p);
+        const osPaths = this.getDroppedOsPaths(ev);
+        if (osPaths.length) {
+            try {
+                for (const p of osPaths) {
+                    const baseName = path__WEBPACK_IMPORTED_MODULE_0__.basename(p);
+                    const existing = this.remoteEntries.find(e => e.name === baseName);
+                    if (existing) {
+                        const ok = await this.showReplaceConfirm(`Replace existing "${baseName}" on remote?`);
+                        if (!ok) {
+                            continue;
+                        }
+                        const remoteTarget = path__WEBPACK_IMPORTED_MODULE_0__.posix.join(this.remotePath, baseName);
+                        await this.deleteRemotePathRecursive(remoteTarget);
                     }
-                    await this.refreshRemote();
-                }
-                catch (e) {
-                    console.error('[SFTP-UI] Upload from OS drop failed', e);
+                    await this.uploadLocalPathToRemote(this.remotePath, p);
                 }
+                await this.refreshRemote();
+            }
+            catch (e) {
+                console.error('[SFTP-UI] Upload from OS drop failed', e);
             }
             return;
         }
+        // Fallback: use Tabby's native drag parser (supports directories and HTMLFileUpload)
+        try {
+            const dirUpload = await this.platform.startUploadFromDragEvent?.(ev, true);
+            if (dirUpload && this.sftpSession) {
+                await this.uploadDirectoryUploadToRemote(this.remotePath, dirUpload);
+                await this.refreshRemote();
+                return;
+            }
+        }
+        catch (e) {
+            console.error('[SFTP-UI] startUploadFromDragEvent failed', e);
+        }
         const raw = ev.dataTransfer?.getData('application/x-tabby-sftp-ui');
         if (!raw) {
             return;
@@ -666,6 +680,14 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         }
         try {
             const targetRemotePath = path__WEBPACK_IMPORTED_MODULE_0__.posix.join(this.remotePath, payload.name);
+            const existsOnRemote = this.remoteEntries.some(e => e.name === payload.name);
+            if (existsOnRemote) {
+                const ok = await this.showReplaceConfirm(`Replace existing "${payload.name}" on remote?`);
+                if (!ok) {
+                    return;
+                }
+                await this.deleteRemotePathRecursive(targetRemotePath);
+            }
             const upload = new _local_transfers__WEBPACK_IMPORTED_MODULE_7__.LocalPathFileUpload(payload.fullPath);
             this.trackTransfer(upload, 'upload', targetRemotePath, payload.fullPath);
             await this.sftpSession.upload(targetRemotePath, upload);
@@ -678,25 +700,94 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
     async onDropOnLocal(ev) {
         ev.preventDefault();
         this.localDropActive = false;
-        // Drag & drop from OS file manager into the local pane (copy into current local folder)
-        const dtFiles = Array.from(ev.dataTransfer?.files ?? []);
-        if (dtFiles.length) {
-            const paths = dtFiles
-                .map(f => f.path)
-                .filter((p) => Boolean(p));
-            if (paths.length) {
+        // 1) Tabby's internal drag (remote -> local download)
+        const rawInternal = ev.dataTransfer?.getData('application/x-tabby-sftp-ui');
+        if (rawInternal) {
+            let payload;
+            try {
+                payload = JSON.parse(rawInternal);
+            }
+            catch {
+                payload = null;
+            }
+            if (payload && payload.kind === 'remote-file') {
                 try {
-                    for (const p of paths) {
-                        await this.copyLocalPathIntoLocalDir(this.localPath, p);
+                    const targetLocalPath = path__WEBPACK_IMPORTED_MODULE_0__.join(this.localPath, payload.name);
+                    if (!this.sftpSession) {
+                        throw new Error('Not connected');
                     }
+                    if (fs__WEBPACK_IMPORTED_MODULE_3__.existsSync(targetLocalPath)) {
+                        const ok = await this.showReplaceConfirm(`Replace existing "${payload.name}"?`);
+                        if (!ok) {
+                            return;
+                        }
+                    }
+                    const dl = new _local_transfers__WEBPACK_IMPORTED_MODULE_7__.LocalPathFileDownload(targetLocalPath, payload.mode, payload.size);
+                    this.trackTransfer(dl, 'download', payload.remotePath, targetLocalPath);
+                    await this.sftpSession.download(payload.remotePath, dl);
                     await this.refreshLocal();
                 }
                 catch (e) {
-                    console.error('[SFTP-UI] Local copy from OS drop failed', e);
+                    console.error('[SFTP-UI] Download failed', e);
                 }
+                return;
+            }
+            if (payload && payload.kind === 'remote-dir') {
+                try {
+                    if (!this.sftpSession) {
+                        throw new Error('Not connected');
+                    }
+                    const targetLocalPath = path__WEBPACK_IMPORTED_MODULE_0__.join(this.localPath, payload.name);
+                    if (fs__WEBPACK_IMPORTED_MODULE_3__.existsSync(targetLocalPath)) {
+                        const ok = await this.showReplaceConfirm(`Replace existing folder "${payload.name}"?`);
+                        if (!ok) {
+                            return;
+                        }
+                        await this.deleteLocalPathRecursive(targetLocalPath);
+                    }
+                    await this.downloadRemoteDirectoryRecursive(payload.remotePath, targetLocalPath);
+                    await this.refreshLocal();
+                }
+                catch (e) {
+                    console.error('[SFTP-UI] Download directory failed', e);
+                }
+                return;
+            }
+        }
+        // Drag & drop from OS file manager into the local pane (copy into current local folder)
+        const osPaths = this.getDroppedOsPaths(ev);
+        if (osPaths.length) {
+            try {
+                for (const p of osPaths) {
+                    const baseName = path__WEBPACK_IMPORTED_MODULE_0__.basename(p);
+                    const destPath = path__WEBPACK_IMPORTED_MODULE_0__.join(this.localPath, baseName);
+                    if (fs__WEBPACK_IMPORTED_MODULE_3__.existsSync(destPath)) {
+                        const ok = await this.showReplaceConfirm(`Replace existing "${baseName}"?`);
+                        if (!ok) {
+                            continue;
+                        }
+                    }
+                    await this.copyLocalPathIntoLocalDir(this.localPath, p);
+                }
+                await this.refreshLocal();
+            }
+            catch (e) {
+                console.error('[SFTP-UI] Local copy from OS drop failed', e);
             }
             return;
         }
+        // Fallback: use Tabby's native drag parser, then write files to disk
+        try {
+            const dirUpload = await this.platform.startUploadFromDragEvent?.(ev, true);
+            if (dirUpload) {
+                await this.writeDirectoryUploadToLocal(this.localPath, dirUpload);
+                await this.refreshLocal();
+                return;
+            }
+        }
+        catch (e) {
+            console.error('[SFTP-UI] startUploadFromDragEvent (local) failed', e);
+        }
         const raw = ev.dataTransfer?.getData('application/x-tabby-sftp-ui');
         if (!raw) {
             return;
@@ -708,17 +799,41 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         catch {
             return;
         }
-        if (payload.kind !== 'remote-file') {
+        if (payload.kind !== 'remote-file' && payload.kind !== 'remote-dir') {
             return;
         }
         try {
-            const targetLocalPath = path__WEBPACK_IMPORTED_MODULE_0__.join(this.localPath, payload.name);
+            if (payload.kind === 'remote-file') {
+                const targetLocalPath = path__WEBPACK_IMPORTED_MODULE_0__.join(this.localPath, payload.name);
+                if (!this.sftpSession) {
+                    throw new Error('Not connected');
+                }
+                if (fs__WEBPACK_IMPORTED_MODULE_3__.existsSync(targetLocalPath)) {
+                    const ok = await this.showReplaceConfirm(`Replace existing "${payload.name}"?`);
+                    if (!ok) {
+                        return;
+                    }
+                    await this.deleteLocalPathRecursive(targetLocalPath);
+                }
+                const dl = new _local_transfers__WEBPACK_IMPORTED_MODULE_7__.LocalPathFileDownload(targetLocalPath, payload.mode, payload.size);
+                this.trackTransfer(dl, 'download', payload.remotePath, targetLocalPath);
+                await this.sftpSession.download(payload.remotePath, dl);
+                await this.refreshLocal();
+                return;
+            }
+            // remote-dir -> local-dir (recursive download)
             if (!this.sftpSession) {
                 throw new Error('Not connected');
             }
-            const dl = new _local_transfers__WEBPACK_IMPORTED_MODULE_7__.LocalPathFileDownload(targetLocalPath, payload.mode, payload.size);
-            this.trackTransfer(dl, 'download', payload.remotePath, targetLocalPath);
-            await this.sftpSession.download(payload.remotePath, dl);
+            const targetLocalPath = path__WEBPACK_IMPORTED_MODULE_0__.join(this.localPath, payload.name);
+            if (fs__WEBPACK_IMPORTED_MODULE_3__.existsSync(targetLocalPath)) {
+                const ok = await this.showReplaceConfirm(`Replace existing folder "${payload.name}"?`);
+                if (!ok) {
+                    return;
+                }
+                await this.deleteLocalPathRecursive(targetLocalPath);
+            }
+            await this.downloadRemoteDirectoryRecursive(payload.remotePath, targetLocalPath);
             await this.refreshLocal();
         }
         catch (e) {
@@ -770,6 +885,138 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         }
         await fs_promises__WEBPACK_IMPORTED_MODULE_2__.copyFile(srcPath, destPath);
     }
+    async uploadDirectoryUploadToRemote(remoteDir, dirUpload) {
+        if (!this.sftpSession) {
+            return;
+        }
+        const childrens = dirUpload?.getChildrens?.() ?? [];
+        for (const item of childrens) {
+            // DirectoryUpload
+            if (typeof item?.getChildrens === 'function') {
+                const name = item.getName?.() || 'folder';
+                const nextRemote = path__WEBPACK_IMPORTED_MODULE_0__.posix.join(remoteDir, name);
+                try {
+                    await this.sftpSession.mkdir(nextRemote);
+                }
+                catch {
+                    // ignore (might already exist)
+                }
+                await this.uploadDirectoryUploadToRemote(nextRemote, item);
+                continue;
+            }
+            // FileUpload (including HTMLFileUpload)
+            if (typeof item?.read === 'function' && typeof item?.getName === 'function') {
+                const fileUpload = item;
+                const name = fileUpload.getName();
+                const targetRemotePath = path__WEBPACK_IMPORTED_MODULE_0__.posix.join(remoteDir, name);
+                this.trackTransfer(fileUpload, 'upload', targetRemotePath, name);
+                await this.sftpSession.upload(targetRemotePath, fileUpload);
+            }
+        }
+    }
+    async writeDirectoryUploadToLocal(localDir, dirUpload) {
+        const childrens = dirUpload?.getChildrens?.() ?? [];
+        for (const item of childrens) {
+            if (typeof item?.getChildrens === 'function') {
+                const name = item.getName?.() || 'folder';
+                const nextLocal = path__WEBPACK_IMPORTED_MODULE_0__.join(localDir, name);
+                await fs_promises__WEBPACK_IMPORTED_MODULE_2__.mkdir(nextLocal, { recursive: true });
+                await this.writeDirectoryUploadToLocal(nextLocal, item);
+                continue;
+            }
+            if (typeof item?.readAll === 'function' && typeof item?.getName === 'function') {
+                const name = item.getName();
+                const targetLocal = path__WEBPACK_IMPORTED_MODULE_0__.join(localDir, name);
+                const buf = await item.readAll();
+                await fs_promises__WEBPACK_IMPORTED_MODULE_2__.writeFile(targetLocal, Buffer.from(buf));
+                try {
+                    item.close?.();
+                }
+                catch {
+                    // ignore
+                }
+            }
+        }
+    }
+    async downloadRemoteDirectoryRecursive(remoteDir, localDir) {
+        if (!this.sftpSession) {
+            return;
+        }
+        await fs_promises__WEBPACK_IMPORTED_MODULE_2__.mkdir(localDir, { recursive: true });
+        const entries = await this.sftpSession.readdir(remoteDir).catch(() => null);
+        if (!entries) {
+            return;
+        }
+        for (const e of entries) {
+            const targetLocal = path__WEBPACK_IMPORTED_MODULE_0__.join(localDir, e.name);
+            if (e.isDirectory) {
+                await this.downloadRemoteDirectoryRecursive(e.fullPath, targetLocal);
+            }
+            else {
+                const dl = new _local_transfers__WEBPACK_IMPORTED_MODULE_7__.LocalPathFileDownload(targetLocal, e.mode, e.size);
+                this.trackTransfer(dl, 'download', e.fullPath, targetLocal);
+                await this.sftpSession.download(e.fullPath, dl);
+            }
+        }
+    }
+    getDroppedOsPaths(ev) {
+        const dt = ev.dataTransfer;
+        if (!dt) {
+            return [];
+        }
+        const isWin = os__WEBPACK_IMPORTED_MODULE_1__.platform() === 'win32';
+        const isLocalPath = (p) => {
+            if (isWin) {
+                return /^[A-Za-z]:\\/.test(p) || p.startsWith('\\\\');
+            }
+            return p.startsWith('/');
+        };
+        // 1) Electron-style File.path
+        const filePaths = Array.from(dt.files ?? [])
+            .map(f => f.path)
+            .filter((p) => Boolean(p));
+        if (filePaths.length) {
+            return filePaths;
+        }
+        // 2) Sometimes paths are exposed as URIs
+        const uriList = dt.getData('text/uri-list') || '';
+        const uris = uriList
+            .split(/\r?\n/g)
+            .map(x => x.trim())
+            .filter(x => x && !x.startsWith('#'))
+            .map(x => {
+            if (x.startsWith('file://')) {
+                try {
+                    return decodeURIComponent(x.replace(/^file:\/\//, ''));
+                }
+                catch {
+                    return x.replace(/^file:\/\//, '');
+                }
+            }
+            return x;
+        })
+            .filter(x => x && isLocalPath(x));
+        if (uris.length) {
+            return uris;
+        }
+        // 3) Plain text sometimes contains a local path
+        const text = dt.getData('text/plain') || '';
+        const textLines = text.split(/\r?\n/g).map(x => x.trim()).filter(Boolean);
+        const textPaths = textLines
+            .map(x => {
+            if (x.startsWith('file://')) {
+                try {
+                    return decodeURIComponent(x.replace(/^file:\/\//, ''));
+                }
+                catch {
+                    return x.replace(/^file:\/\//, '');
+                }
+            }
+            return x;
+        })
+            .filter(x => x && isLocalPath(x));
+        return textPaths;
+    }
     getFilteredLocalEntries() {
         const entriesRef = this.localEntries;
         const filter = this.localFilter;
@@ -1667,6 +1914,10 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         }
     }
     onKeyDown(event) {
+        const target = event.target;
+        const isTypingTarget = Boolean(target) && (target?.tagName === 'INPUT' ||
+            target?.tagName === 'TEXTAREA' ||
+            target?.isContentEditable);
         if (event.key === 'Escape') {
             if (this.inputDialogVisible) {
                 event.preventDefault();
@@ -1678,8 +1929,17 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
                 this.cancelDelete();
                 return;
             }
+            if (this.replaceConfirmVisible) {
+                event.preventDefault();
+                this.cancelReplace();
+                return;
+            }
         }
         if (event.key === 'Delete' || event.key === 'Backspace') {
+            // Don't intercept Delete/Backspace while typing in inputs
+            if (isTypingTarget) {
+                return;
+            }
             event.preventDefault();
             if (this.selectedRemote.length) {
                 this.remoteDelete();
@@ -1755,6 +2015,37 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         this.pendingLocalDelete = [];
         this.pendingRemoteDelete = [];
     }
+    async showReplaceConfirm(text) {
+        if (this.replaceConfirmVisible) {
+            // Prevent stacking multiple confirmations; choose the latest replacement intent.
+            return false;
+        }
+        this.replaceConfirmText = text;
+        this.replaceConfirmVisible = true;
+        return new Promise(resolve => {
+            this.replaceConfirmResolve = resolve;
+        });
+    }
+    async confirmReplace() {
+        if (!this.replaceConfirmVisible) {
+            return;
+        }
+        this.replaceConfirmVisible = false;
+        const resolve = this.replaceConfirmResolve;
+        this.replaceConfirmResolve = null;
+        this.replaceConfirmText = '';
+        resolve?.(true);
+    }
+    cancelReplace() {
+        if (!this.replaceConfirmVisible) {
+            return;
+        }
+        this.replaceConfirmVisible = false;
+        const resolve = this.replaceConfirmResolve;
+        this.replaceConfirmResolve = null;
+        this.replaceConfirmText = '';
+        resolve?.(false);
+    }
     async deleteLocalEntry(entry) {
         await this.deleteLocalPathRecursive(entry.fullPath);
     }
@@ -1979,368 +2270,388 @@ __decorate([
 SftpManagerTabComponent = __decorate([
     (0,_angular_core__WEBPACK_IMPORTED_MODULE_5__.Component)({
         selector: 'tabby-sftp-manager-tab',
-        template: `
-    <div class="sftp-root" tabindex="0" (keydown)="onKeyDown($event)">
-      <div class="top-profiles" *ngIf="profile || recentProfiles.length">
-        <div class="current" *ngIf="profile">
-          <span class="label">Device:</span>
-          <span class="value">{{ getProfileLabel(profile) }}</span>
-        </div>
-        <div class="recent" *ngIf="recentProfiles.length">
-          <span class="label">Recent:</span>
-          <button
-            class="profile-chip"
-            *ngFor="let p of recentProfiles"
-            (click)="launchProfileFromSFTP(p)"
-          >
-            {{ getProfileLabel(p) }}
-          </button>
-        </div>
-      </div>
-      <div class="sftp-body">
-        <div class="pane">
-          <div class="pane-title">
-            <div class="pane-label">Local</div>
-            <div class="pane-path">
-              <input
-                [(ngModel)]="localPathInput"
-                (keyup.enter)="goToLocalPathInput()"
-              />
-            </div>
-            <div class="pane-actions">
-              <select class="path-preset" (change)="onLocalPresetChange($event.target.value)">
-                <option value="">Go to…</option>
-                <option *ngFor="let p of localPathPresets" [value]="p.id">
-                  {{ p.label }}
-                </option>
-              </select>
-              <button
-                class="fav-toggle"
-                [class.active]="isCurrentFavorite()"
-                (click)="toggleCurrentFavorite()"
-                title="Toggle favorite for this path"
-              >
-                ★
-              </button>
-              <select class="path-favorite" (change)="onLocalFavoriteSelect($event.target.value)">
-                <option value="">Favorites…</option>
-                <option *ngFor="let f of localFavorites" [value]="f.id">
-                  {{ f.label }}
-                </option>
-              </select>
-              <button (click)="localUp()" [disabled]="!canLocalUp()">Up</button>
-              <button (click)="goToLocalPathInput()">Go</button>
-              <button (click)="refreshLocal()">Refresh</button>
-            </div>
-          </div>
-          <div class="pane-filters">
-            <div class="breadcrumbs">
-              <ng-container *ngFor="let part of getLocalBreadcrumbs(); let i = index; let last = last">
-                <button
-                  class="crumb-button"
-                  (click)="navigateLocalBreadcrumb(i)"
-                  (contextmenu)="onLocalBreadcrumbContextMenu(i, $event)"
-                >
-                  {{ part.label }}
-                </button>
-                <span class="crumb-separator" *ngIf="!last">›</span>
-              </ng-container>
-            </div>
-            <input [(ngModel)]="localFilter" placeholder="Filter files..." />
-            <label class="show-hidden-toggle">
-              <input type="checkbox" [(ngModel)]="showHiddenLocal" />
-              <span>Show hidden</span>
-            </label>
-          </div>
-          <div class="pane-list"
-            (dragover)="onDragOver($event)"
-            (drop)="onDropOnLocal($event)"
-          >
-            <div class="entry header">
-              <span class="icon"></span>
-              <span class="name sortable" (click)="setLocalSort('name')">Name</span>
-              <span class="size sortable" (click)="setLocalSort('size')">Size</span>
-              <span class="date sortable" (click)="setLocalSort('modified')">Modified</span>
-            </div>
-            <div
-              class="entry"
-              *ngFor="let e of getFilteredLocalEntries()"
-              (click)="selectLocal(e, $event)"
-              (dblclick)="openLocal(e)"
-              (mousedown)="onLocalMouseDown(e, $event)"
-              (contextmenu)="onLocalContextMenu(e, $event)"
-              (dragover)="onLocalEntryDragOver(e, $event)"
-              (drop)="onLocalEntryDrop(e, $event)"
-              [class.drop-target]="localDropActive"
-              [class.selected]="isLocalSelected(e)"
-              [draggable]="true"
-              (dragstart)="onDragStartLocal($event, e)"
-            >
-              <span class="icon">{{ e.isDirectory ? '📁' : '📄' }}</span>
-              <span class="name">{{ e.name }}</span>
-              <span class="size">{{ getLocalSizeDisplay(e) }}</span>
-              <span class="date">{{ e.mtimeMs ? (e.mtimeMs | date:'yyyy-MM-dd HH:mm') : '' }}</span>
-            </div>
-          </div>
-          <div class="pane-actions-bar">
-            <div class="selection" *ngIf="selectedLocal.length">
-              Selected: {{ selectedLocal.length === 1 ? selectedLocal[0].name : (selectedLocal.length + ' items') }}
-            </div>
-            <div class="action-inputs">
-              <input [(ngModel)]="localActionName" placeholder="Name / new name" />
-              <input [(ngModel)]="localActionPerms" placeholder="Perms (e.g. 755)" />
-            </div>
-            <div class="action-buttons">
-              <button (click)="localRename()" [disabled]="selectedLocal.length !== 1">Rename</button>
-              <button (click)="refreshLocal()">Refresh</button>
-              <button (click)="localDelete()" [disabled]="!selectedLocal.length">Delete</button>
-              <button (click)="localNewFolder()">New Folder</button>
-              <button (click)="localEditPermissions()" [disabled]="selectedLocal.length !== 1 || !localActionPerms">Edit Permissions</button>
-              <button (click)="localShowSize()" [disabled]="selectedLocal.length !== 1 || !selectedLocal[0].isDirectory">Show Size</button>
-            </div>
-          </div>
-        </div>
-
-        <div class="pane">
-          <div class="pane-title">
-            <div class="pane-label">
-              Remote
-              <span *ngIf="connected && profile?.options?.host" class="pane-sub">
-                — {{ profile.options.host }}
-              </span>
-            </div>
-            <div class="pane-path">
-              <input
-                [(ngModel)]="remotePathInput"
-                (keyup.enter)="goToRemotePathInput()"
-                [disabled]="!connected"
-              />
-            </div>
-            <div class="pane-actions">
-              <button (click)="remoteUp()" [disabled]="!connected || remotePath === '/'">Up</button>
-              <button (click)="goToRemotePathInput()" [disabled]="!connected">Go</button>
-              <button (click)="refreshRemote()" [disabled]="!connected">Refresh</button>
-            </div>
-          </div>
-          <div class="pane-filters">
-            <div class="breadcrumbs" *ngIf="connected">
-              <ng-container *ngFor="let part of getRemoteBreadcrumbs(); let i = index; let last = last">
-                <button
-                  class="crumb-button"
-                  (click)="navigateRemoteBreadcrumb(i)"
-                >
-                  {{ part.label }}
-                </button>
-                <span class="crumb-separator" *ngIf="!last">›</span>
-              </ng-container>
-            </div>
-            <input [(ngModel)]="remoteFilter" placeholder="Filter files..." />
-            <label class="show-hidden-toggle">
-              <input type="checkbox" [(ngModel)]="showHiddenRemote" />
-              <span>Show hidden</span>
-            </label>
-          </div>
-          <div class="pane-list"
-            (dragover)="onDragOver($event)"
-            (drop)="onDropOnRemote($event)"
-          >
-            <div class="entry dim" *ngIf="!connected">
-              <span class="name">Not connected</span>
-            </div>
-            <div class="entry header" *ngIf="connected">
-              <span class="icon"></span>
-              <span class="name sortable" (click)="setRemoteSort('name')">Name</span>
-              <span class="size sortable" (click)="setRemoteSort('size')">Size</span>
-              <span class="date sortable" (click)="setRemoteSort('modified')">Modified</span>
-            </div>
-            <div
-              class="entry"
-              *ngIf="connected && remotePath !== '/'"
-              (dblclick)="remoteUp()"
-            >
-              <span class="icon">⬆</span>
-              <span class="name">Go up</span>
-              <span class="size"></span>
-              <span class="date"></span>
-            </div>
-            <div
-              class="entry"
-              *ngFor="let e of getFilteredRemoteEntries()"
-              (click)="selectRemote(e, $event)"
-              (dblclick)="openRemote(e)"
-              (mousedown)="onRemoteMouseDown(e, $event)"
-              (contextmenu)="onRemoteContextMenu(e, $event)"
-              (dragover)="onRemoteEntryDragOver(e, $event)"
-              (drop)="onRemoteEntryDrop(e, $event)"
-              [class.drop-target]="remoteDropActive"
-              [class.selected]="isRemoteSelected(e)"
-              [draggable]="connected"
-              (dragstart)="onDragStartRemote($event, e)"
-            >
-              <span class="icon">{{ e.isDirectory ? '📁' : '📄' }}</span>
-              <span class="name">{{ e.name }}</span>
-              <span class="size">{{ getRemoteSizeDisplay(e) }}</span>
-              <span class="date">{{ e.modified | date:'yyyy-MM-dd HH:mm' }}</span>
-            </div>
-          </div>
-          <div class="pane-actions-bar">
-            <div class="selection" *ngIf="selectedRemote.length">
-              Selected: {{ selectedRemote.length === 1 ? selectedRemote[0].name : (selectedRemote.length + ' items') }}
-            </div>
-            <div class="action-inputs">
-              <input [(ngModel)]="remoteActionName" placeholder="Name / new name" />
-              <input [(ngModel)]="remoteActionPerms" placeholder="Perms (e.g. 755)" />
-            </div>
-            <div class="action-buttons">
-              <button (click)="remoteRename()" [disabled]="selectedRemote.length !== 1">Rename</button>
-              <button (click)="refreshRemote()" [disabled]="!connected">Refresh</button>
-              <button (click)="remoteDelete()" [disabled]="!selectedRemote.length">Delete</button>
-              <button (click)="remoteNewFolder()" [disabled]="!connected">New Folder</button>
-              <button (click)="remoteEditPermissions()" [disabled]="selectedRemote.length !== 1 || !remoteActionPerms">Edit Permissions</button>
-              <button (click)="remoteShowSize()" [disabled]="selectedRemote.length !== 1 || !selectedRemote[0].isDirectory">Show Size</button>
-              <button (click)="remoteDownload()" [disabled]="!selectedRemote.length">Download</button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="sftp-transfers" *ngIf="transfers.length">
-        <div class="transfer" *ngFor="let t of transfers">
-          <div class="transfer-main">
-            <div class="transfer-title">
-              <span class="direction">{{ t.direction === 'upload' ? 'Upload' : 'Download' }}</span>
-              <span class="name">{{ t.name }}</span>
-            </div>
-            <div class="transfer-path">
-              <span class="label">Remote:</span>
-              <span class="value">{{ t.remotePath }}</span>
-            </div>
-            <div class="transfer-path">
-              <span class="label">Local:</span>
-              <span class="value">{{ t.localPath }}</span>
-            </div>
-            <div class="bar">
-              <div class="fill" [style.width.%]="getTransferProgress(t.transfer)"></div>
-            </div>
-          </div>
-          <div class="transfer-stats">
-            <div class="percent">{{ getTransferProgress(t.transfer) | number:'1.0-0' }}%</div>
-            <div class="speed">{{ formatSpeed(t.transfer.getSpeed()) }}</div>
-            <button class="btn-cancel" (click)="cancelTransfer(t)" [disabled]="t.transfer.isComplete() || t.transfer.isCancelled()">Cancel</button>
-          </div>
-        </div>
-      </div>
-
-      <div class="delete-overlay" *ngIf="deleteConfirmVisible">
-        <div class="delete-dialog">
-          <div class="delete-text">{{ deleteConfirmText }}</div>
-          <div class="delete-buttons">
-            <button class="danger" (click)="confirmDelete()">Delete</button>
-            <button (click)="cancelDelete()">Cancel</button>
-          </div>
-        </div>
-      </div>
-
-      <div class="delete-overlay" *ngIf="inputDialogVisible">
-        <div class="delete-dialog" (click)="$event.stopPropagation()">
-          <div class="delete-text">{{ inputDialogTitle }}</div>
-          <input
-            class="dialog-input"
-            [(ngModel)]="inputDialogValue"
-            [placeholder]="inputDialogPlaceholder"
-            (keyup.enter)="confirmInputDialog()"
-          />
-          <div class="delete-buttons">
-            <button class="danger" (click)="confirmInputDialog()" [disabled]="!inputDialogValue.trim()">OK</button>
-            <button (click)="cancelInputDialog()">Cancel</button>
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="local-menu"
-        *ngIf="localMenuVisible"
-        [style.left.px]="localMenuX"
-        [style.top.px]="localMenuY"
-        (click)="$event.stopPropagation()"
-      >
-        <div class="local-menu-item" *ngFor="let item of localMenuItems" (click)="onLocalMenuItemClick(item)">
-          {{ item.label }}
-        </div>
-      </div>
-    </div>
+        template: `
+    <div class="sftp-root" tabindex="0" (keydown)="onKeyDown($event)">
+      <div class="top-profiles" *ngIf="profile || recentProfiles.length">
+        <div class="current" *ngIf="profile">
+          <span class="label">Device:</span>
+          <span class="value">{{ getProfileLabel(profile) }}</span>
+        </div>
+        <div class="recent" *ngIf="recentProfiles.length">
+          <span class="label">Recent:</span>
+          <button
+            class="profile-chip"
+            *ngFor="let p of recentProfiles"
+            (click)="launchProfileFromSFTP(p)"
+          >
+            {{ getProfileLabel(p) }}
+          </button>
+        </div>
+      </div>
+      <div class="sftp-body">
+        <div class="pane">
+          <div class="pane-title">
+            <div class="pane-label">Local</div>
+            <div class="pane-path">
+              <input
+                [(ngModel)]="localPathInput"
+                (keyup.enter)="goToLocalPathInput()"
+              />
+            </div>
+            <div class="pane-actions">
+              <select class="path-preset" (change)="onLocalPresetChange($event.target.value)">
+                <option value="">Go to…</option>
+                <option *ngFor="let p of localPathPresets" [value]="p.id">
+                  {{ p.label }}
+                </option>
+              </select>
+              <button
+                class="fav-toggle"
+                [class.active]="isCurrentFavorite()"
+                (click)="toggleCurrentFavorite()"
+                title="Toggle favorite for this path"
+              >
+                ★
+              </button>
+              <select class="path-favorite" (change)="onLocalFavoriteSelect($event.target.value)">
+                <option value="">Favorites…</option>
+                <option *ngFor="let f of localFavorites" [value]="f.id">
+                  {{ f.label }}
+                </option>
+              </select>
+              <button (click)="localUp()" [disabled]="!canLocalUp()">Up</button>
+              <button (click)="goToLocalPathInput()">Go</button>
+              <button (click)="refreshLocal()">Refresh</button>
+            </div>
+          </div>
+          <div class="pane-filters">
+            <div class="breadcrumbs">
+              <ng-container *ngFor="let part of getLocalBreadcrumbs(); let i = index; let last = last">
+                <button
+                  class="crumb-button"
+                  (click)="navigateLocalBreadcrumb(i)"
+                  (contextmenu)="onLocalBreadcrumbContextMenu(i, $event)"
+                >
+                  {{ part.label }}
+                </button>
+                <span class="crumb-separator" *ngIf="!last">›</span>
+              </ng-container>
+            </div>
+            <input [(ngModel)]="localFilter" placeholder="Filter files..." />
+            <label class="show-hidden-toggle">
+              <input type="checkbox" [(ngModel)]="showHiddenLocal" />
+              <span>Show hidden</span>
+            </label>
+          </div>
+          <div class="pane-list"
+            (dragover)="onDragOver($event)"
+            (drop)="onDropOnLocal($event)"
+          >
+            <div class="entry header">
+              <span class="icon"></span>
+              <span class="name sortable" (click)="setLocalSort('name')">Name</span>
+              <span class="size sortable" (click)="setLocalSort('size')">Size</span>
+              <span class="date sortable" (click)="setLocalSort('modified')">Modified</span>
+            </div>
+            <div
+              class="entry"
+              *ngIf="canLocalUp()"
+              (dblclick)="localUp()"
+            >
+              <span class="icon">⬆</span>
+              <span class="name">Go up</span>
+              <span class="size"></span>
+              <span class="date"></span>
+            </div>
+            <div
+              class="entry"
+              *ngFor="let e of getFilteredLocalEntries()"
+              (click)="selectLocal(e, $event)"
+              (dblclick)="openLocal(e)"
+              (mousedown)="onLocalMouseDown(e, $event)"
+              (contextmenu)="onLocalContextMenu(e, $event)"
+              (dragover)="onLocalEntryDragOver(e, $event)"
+              (drop)="onLocalEntryDrop(e, $event)"
+              [class.drop-target]="localDropActive"
+              [class.selected]="isLocalSelected(e)"
+              [draggable]="true"
+              (dragstart)="onDragStartLocal($event, e)"
+            >
+              <span class="icon">{{ e.isDirectory ? '📁' : '📄' }}</span>
+              <span class="name">{{ e.name }}</span>
+              <span class="size">{{ getLocalSizeDisplay(e) }}</span>
+              <span class="date">{{ e.mtimeMs ? (e.mtimeMs | date:'yyyy-MM-dd HH:mm') : '' }}</span>
+            </div>
+          </div>
+          <div class="pane-actions-bar">
+            <div class="selection" *ngIf="selectedLocal.length">
+              Selected: {{ selectedLocal.length === 1 ? selectedLocal[0].name : (selectedLocal.length + ' items') }}
+            </div>
+            <div class="action-inputs">
+              <input [(ngModel)]="localActionName" placeholder="Name / new name" />
+              <input [(ngModel)]="localActionPerms" placeholder="Perms (e.g. 755)" />
+            </div>
+            <div class="action-buttons">
+              <button (click)="localRename()" [disabled]="selectedLocal.length !== 1">Rename</button>
+              <button (click)="refreshLocal()">Refresh</button>
+              <button (click)="localDelete()" [disabled]="!selectedLocal.length">Delete</button>
+              <button (click)="localNewFolder()">New Folder</button>
+              <button (click)="localEditPermissions()" [disabled]="selectedLocal.length !== 1 || !localActionPerms">Edit Permissions</button>
+              <button (click)="localShowSize()" [disabled]="selectedLocal.length !== 1 || !selectedLocal[0].isDirectory">Show Size</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="pane">
+          <div class="pane-title">
+            <div class="pane-label">
+              Remote
+              <span *ngIf="connected && profile?.options?.host" class="pane-sub">
+                — {{ profile.options.host }}
+              </span>
+            </div>
+            <div class="pane-path">
+              <input
+                [(ngModel)]="remotePathInput"
+                (keyup.enter)="goToRemotePathInput()"
+                [disabled]="!connected"
+              />
+            </div>
+            <div class="pane-actions">
+              <button (click)="remoteUp()" [disabled]="!connected || remotePath === '/'">Up</button>
+              <button (click)="goToRemotePathInput()" [disabled]="!connected">Go</button>
+              <button (click)="refreshRemote()" [disabled]="!connected">Refresh</button>
+            </div>
+          </div>
+          <div class="pane-filters">
+            <div class="breadcrumbs" *ngIf="connected">
+              <ng-container *ngFor="let part of getRemoteBreadcrumbs(); let i = index; let last = last">
+                <button
+                  class="crumb-button"
+                  (click)="navigateRemoteBreadcrumb(i)"
+                >
+                  {{ part.label }}
+                </button>
+                <span class="crumb-separator" *ngIf="!last">›</span>
+              </ng-container>
+            </div>
+            <input [(ngModel)]="remoteFilter" placeholder="Filter files..." />
+            <label class="show-hidden-toggle">
+              <input type="checkbox" [(ngModel)]="showHiddenRemote" />
+              <span>Show hidden</span>
+            </label>
+          </div>
+          <div class="pane-list"
+            (dragover)="onDragOver($event)"
+            (drop)="onDropOnRemote($event)"
+          >
+            <div class="entry dim" *ngIf="!connected">
+              <span class="name">Not connected</span>
+            </div>
+            <div class="entry header" *ngIf="connected">
+              <span class="icon"></span>
+              <span class="name sortable" (click)="setRemoteSort('name')">Name</span>
+              <span class="size sortable" (click)="setRemoteSort('size')">Size</span>
+              <span class="date sortable" (click)="setRemoteSort('modified')">Modified</span>
+            </div>
+            <div
+              class="entry"
+              *ngIf="connected && remotePath !== '/'"
+              (dblclick)="remoteUp()"
+            >
+              <span class="icon">⬆</span>
+              <span class="name">Go up</span>
+              <span class="size"></span>
+              <span class="date"></span>
+            </div>
+            <div
+              class="entry"
+              *ngFor="let e of getFilteredRemoteEntries()"
+              (click)="selectRemote(e, $event)"
+              (dblclick)="openRemote(e)"
+              (mousedown)="onRemoteMouseDown(e, $event)"
+              (contextmenu)="onRemoteContextMenu(e, $event)"
+              (dragover)="onRemoteEntryDragOver(e, $event)"
+              (drop)="onRemoteEntryDrop(e, $event)"
+              [class.drop-target]="remoteDropActive"
+              [class.selected]="isRemoteSelected(e)"
+              [draggable]="connected"
+              (dragstart)="onDragStartRemote($event, e)"
+            >
+              <span class="icon">{{ e.isDirectory ? '📁' : '📄' }}</span>
+              <span class="name">{{ e.name }}</span>
+              <span class="size">{{ getRemoteSizeDisplay(e) }}</span>
+              <span class="date">{{ e.modified | date:'yyyy-MM-dd HH:mm' }}</span>
+            </div>
+          </div>
+          <div class="pane-actions-bar">
+            <div class="selection" *ngIf="selectedRemote.length">
+              Selected: {{ selectedRemote.length === 1 ? selectedRemote[0].name : (selectedRemote.length + ' items') }}
+            </div>
+            <div class="action-inputs">
+              <input [(ngModel)]="remoteActionName" placeholder="Name / new name" />
+              <input [(ngModel)]="remoteActionPerms" placeholder="Perms (e.g. 755)" />
+            </div>
+            <div class="action-buttons">
+              <button (click)="remoteRename()" [disabled]="selectedRemote.length !== 1">Rename</button>
+              <button (click)="refreshRemote()" [disabled]="!connected">Refresh</button>
+              <button (click)="remoteDelete()" [disabled]="!selectedRemote.length">Delete</button>
+              <button (click)="remoteNewFolder()" [disabled]="!connected">New Folder</button>
+              <button (click)="remoteEditPermissions()" [disabled]="selectedRemote.length !== 1 || !remoteActionPerms">Edit Permissions</button>
+              <button (click)="remoteShowSize()" [disabled]="selectedRemote.length !== 1 || !selectedRemote[0].isDirectory">Show Size</button>
+              <button (click)="remoteDownload()" [disabled]="!selectedRemote.length">Download</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="sftp-transfers" *ngIf="transfers.length">
+        <div class="transfer" *ngFor="let t of transfers">
+          <div class="transfer-main">
+            <div class="transfer-title">
+              <span class="direction">{{ t.direction === 'upload' ? 'Upload' : 'Download' }}</span>
+              <span class="name">{{ t.name }}</span>
+            </div>
+            <div class="transfer-path">
+              <span class="label">Remote:</span>
+              <span class="value">{{ t.remotePath }}</span>
+            </div>
+            <div class="transfer-path">
+              <span class="label">Local:</span>
+              <span class="value">{{ t.localPath }}</span>
+            </div>
+            <div class="bar">
+              <div class="fill" [style.width.%]="getTransferProgress(t.transfer)"></div>
+            </div>
+          </div>
+          <div class="transfer-stats">
+            <div class="percent">{{ getTransferProgress(t.transfer) | number:'1.0-0' }}%</div>
+            <div class="speed">{{ formatSpeed(t.transfer.getSpeed()) }}</div>
+            <button class="btn-cancel" (click)="cancelTransfer(t)" [disabled]="t.transfer.isComplete() || t.transfer.isCancelled()">Cancel</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="delete-overlay" *ngIf="deleteConfirmVisible">
+        <div class="delete-dialog">
+          <div class="delete-text">{{ deleteConfirmText }}</div>
+          <div class="delete-buttons">
+            <button class="danger" (click)="confirmDelete()">Delete</button>
+            <button (click)="cancelDelete()">Cancel</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="delete-overlay" *ngIf="replaceConfirmVisible">
+        <div class="delete-dialog">
+          <div class="delete-text">{{ replaceConfirmText }}</div>
+          <div class="delete-buttons">
+            <button class="danger" (click)="confirmReplace()">Replace</button>
+            <button (click)="cancelReplace()">Cancel</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="delete-overlay" *ngIf="inputDialogVisible">
+        <div class="delete-dialog" (click)="$event.stopPropagation()">
+          <div class="delete-text">{{ inputDialogTitle }}</div>
+          <input
+            class="dialog-input"
+            [(ngModel)]="inputDialogValue"
+            [placeholder]="inputDialogPlaceholder"
+            (keyup.enter)="confirmInputDialog()"
+          />
+          <div class="delete-buttons">
+            <button class="danger" (click)="confirmInputDialog()" [disabled]="!inputDialogValue.trim()">OK</button>
+            <button (click)="cancelInputDialog()">Cancel</button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="local-menu"
+        *ngIf="localMenuVisible"
+        [style.left.px]="localMenuX"
+        [style.top.px]="localMenuY"
+        (click)="$event.stopPropagation()"
+      >
+        <div class="local-menu-item" *ngFor="let item of localMenuItems" (click)="onLocalMenuItemClick(item)">
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
   `,
-        styles: [`
-    .sftp-root { display: flex; flex-direction: column; height: 100%; padding: 10px; gap: 10px; position: relative; }
-    button { padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: inherit; cursor: pointer; }
-    button:disabled { opacity: 0.5; cursor: default; }
-    .top-profiles { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 8px; gap: 12px; font-size: 11px; opacity: 0.9; }
-    .top-profiles .current .label,
-    .top-profiles .recent .label { text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; margin-right: 4px; }
-    .top-profiles .value { font-weight: 600; }
-    .top-profiles .profile-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: inherit; cursor: pointer; font-size: 11px; }
-    .top-profiles .profile-chip:hover { background: rgba(255,255,255,0.12); }
-    .sftp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
-    .pane { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; overflow: hidden; min-height: 0; }
-    .pane-title { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); }
-    .pane-label { font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
-    .pane-sub { font-weight: 400; font-size: 11px; opacity: 0.75; }
-    .pane-path { opacity: 0.8; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .pane-path input { width: 100%; padding: 4px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.3); color: inherit; font-family: inherit; font-size: 12px; }
-    .pane-actions { display: flex; gap: 8px; align-items: center; }
-    .pane-actions .path-preset,
-    .pane-actions .path-favorite { max-width: 150px; padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.22); background: rgba(20,20,20,0.95); color: inherit; font-size: 11px; }
-    .pane-actions .path-preset option { background: #151515; color: #f5f5f5; }
-    .pane-actions .path-favorite option { background: #151515; color: #f5f5f5; }
-    .pane-actions .fav-toggle { padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); font-size: 11px; line-height: 1; }
-    .pane-actions .fav-toggle.active { background: rgba(255,215,0,0.2); border-color: rgba(255,215,0,0.6); color: #ffd700; }
-    .pane-filters { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.12); }
-    .pane-filters input { flex: 1; padding: 4px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.3); color: inherit; font-size: 12px; }
-    .show-hidden-toggle { display: flex; align-items: center; gap: 4px; font-size: 11px; opacity: 0.8; white-space: nowrap; }
-    .show-hidden-toggle input[type="checkbox"] { margin: 0; }
-    .breadcrumbs { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; opacity: 0.9; align-items: center; }
-    .crumb-button { padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: inherit; cursor: pointer; font-size: 11px; }
-    .crumb-button:hover { background: rgba(255,255,255,0.10); }
-    .crumb-separator { opacity: 0.6; }
-    .pane-list { flex: 1; overflow: auto; padding: 4px; }
-    .entry { display: grid; grid-template-columns: 24px minmax(0, 1.5fr) 80px 140px; gap: 8px; padding: 6px 8px; border-radius: 8px; user-select: none; align-items: center; }
-    .entry:hover { background: rgba(255,255,255,0.06); }
-    .entry.drop-target { outline: 1px dashed rgba(255,255,255,0.35); background: rgba(80, 160, 255, 0.10); }
-    .entry.dim { opacity: 0.7; }
-    .icon { text-align: center; opacity: 0.85; }
-    .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .size { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; text-align: right; opacity: 0.8; }
-    .date { font-size: 11px; opacity: 0.75; text-align: right; white-space: nowrap; }
-    .entry.header { font-weight: 600; opacity: 0.9; background: rgba(255,255,255,0.02); }
-    .sortable { cursor: pointer; }
-    .entry.selected { background: rgba(80,160,255,0.18); }
-    .pane-actions-bar { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.18); }
-    .pane-actions-bar .selection { font-size: 11px; opacity: 0.85; }
-    .pane-actions-bar .action-inputs { display: flex; gap: 6px; }
-    .pane-actions-bar .action-inputs input { flex: 1; padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.3); color: inherit; font-size: 11px; }
-    .pane-actions-bar .action-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
-    .sftp-transfers { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 120px; overflow-y: auto; }
-    .transfer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 11px; }
-    .transfer-title { display: flex; gap: 6px; align-items: baseline; margin-bottom: 2px; }
-    .transfer-title .direction { text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; font-weight: 600; font-size: 10px; }
-    .transfer-title .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .transfer-path { display: flex; gap: 4px; opacity: 0.75; }
-    .transfer-path .label { min-width: 48px; }
-    .transfer-path .value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
-    .bar { position: relative; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.07); margin-top: 4px; overflow: hidden; }
-    .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #4dabff, #78ffce); transition: width 0.15s linear; }
-    .transfer-stats { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; opacity: 0.8; }
-    .transfer-stats .percent { font-weight: 600; }
-    .transfer-stats .speed { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
-    .btn-cancel { padding: 2px 6px; font-size: 10px; border-radius: 999px; }
-    .delete-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 20; }
-    .delete-dialog { min-width: 260px; max-width: 360px; padding: 14px 16px; border-radius: 10px; background: rgba(20,20,20,0.96); border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 18px 45px rgba(0,0,0,0.75); display: flex; flex-direction: column; gap: 10px; }
-    .delete-text { font-size: 13px; }
-    .dialog-input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.3); color: inherit; font-size: 13px; }
-    .delete-buttons { display: flex; justify-content: flex-end; gap: 8px; }
-    .delete-buttons .danger { background: rgba(255,80,80,0.85); border-color: rgba(255,120,120,0.85); }
-    .local-menu { position: absolute; min-width: 180px; max-width: 260px; max-height: 260px; overflow-y: auto; padding: 4px 0; border-radius: 10px; background: rgba(18,18,22,0.98); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 18px 45px rgba(0,0,0,0.8); z-index: 30; backdrop-filter: blur(12px); }
-    .local-menu-item { padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
-    .local-menu-item:hover { background: linear-gradient(90deg, rgba(120,200,255,0.24), rgba(120,255,206,0.15)); }
+        styles: [`
+    .sftp-root { display: flex; flex-direction: column; height: 100%; padding: 10px; gap: 10px; position: relative; }
+    button { padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: inherit; cursor: pointer; }
+    button:disabled { opacity: 0.5; cursor: default; }
+    .top-profiles { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 8px; gap: 12px; font-size: 11px; opacity: 0.9; }
+    .top-profiles .current .label,
+    .top-profiles .recent .label { text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; margin-right: 4px; }
+    .top-profiles .value { font-weight: 600; }
+    .top-profiles .profile-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: inherit; cursor: pointer; font-size: 11px; }
+    .top-profiles .profile-chip:hover { background: rgba(255,255,255,0.12); }
+    .sftp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
+    .pane { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; overflow: hidden; min-height: 0; }
+    .pane-title { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08); }
+    .pane-label { font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
+    .pane-sub { font-weight: 400; font-size: 11px; opacity: 0.75; }
+    .pane-path { opacity: 0.8; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .pane-path input { width: 100%; padding: 4px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.3); color: inherit; font-family: inherit; font-size: 12px; }
+    .pane-actions { display: flex; gap: 8px; align-items: center; }
+    .pane-actions .path-preset,
+    .pane-actions .path-favorite { max-width: 150px; padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.22); background: rgba(20,20,20,0.95); color: inherit; font-size: 11px; }
+    .pane-actions .path-preset option { background: #151515; color: #f5f5f5; }
+    .pane-actions .path-favorite option { background: #151515; color: #f5f5f5; }
+    .pane-actions .fav-toggle { padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); font-size: 11px; line-height: 1; }
+    .pane-actions .fav-toggle.active { background: rgba(255,215,0,0.2); border-color: rgba(255,215,0,0.6); color: #ffd700; }
+    .pane-filters { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.12); }
+    .pane-filters input { flex: 1; padding: 4px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.3); color: inherit; font-size: 12px; }
+    .show-hidden-toggle { display: flex; align-items: center; gap: 4px; font-size: 11px; opacity: 0.8; white-space: nowrap; }
+    .show-hidden-toggle input[type="checkbox"] { margin: 0; }
+    .breadcrumbs { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; opacity: 0.9; align-items: center; }
+    .crumb-button { padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); color: inherit; cursor: pointer; font-size: 11px; }
+    .crumb-button:hover { background: rgba(255,255,255,0.10); }
+    .crumb-separator { opacity: 0.6; }
+    .pane-list { flex: 1; overflow: auto; padding: 4px; }
+    .entry { display: grid; grid-template-columns: 24px minmax(0, 1.5fr) 80px 140px; gap: 8px; padding: 6px 8px; border-radius: 8px; user-select: none; align-items: center; }
+    .entry:hover { background: rgba(255,255,255,0.06); }
+    .entry.drop-target { outline: 1px dashed rgba(255,255,255,0.35); background: rgba(80, 160, 255, 0.10); }
+    .entry.dim { opacity: 0.7; }
+    .icon { text-align: center; opacity: 0.85; }
+    .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .size { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; text-align: right; opacity: 0.8; }
+    .date { font-size: 11px; opacity: 0.75; text-align: right; white-space: nowrap; }
+    .entry.header { font-weight: 600; opacity: 0.9; background: rgba(255,255,255,0.02); }
+    .sortable { cursor: pointer; }
+    .entry.selected { background: rgba(80,160,255,0.18); }
+    .pane-actions-bar { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.18); }
+    .pane-actions-bar .selection { font-size: 11px; opacity: 0.85; }
+    .pane-actions-bar .action-inputs { display: flex; gap: 6px; }
+    .pane-actions-bar .action-inputs input { flex: 1; padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.3); color: inherit; font-size: 11px; }
+    .pane-actions-bar .action-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
+    .sftp-transfers { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 120px; overflow-y: auto; }
+    .transfer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 11px; }
+    .transfer-title { display: flex; gap: 6px; align-items: baseline; margin-bottom: 2px; }
+    .transfer-title .direction { text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; font-weight: 600; font-size: 10px; }
+    .transfer-title .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .transfer-path { display: flex; gap: 4px; opacity: 0.75; }
+    .transfer-path .label { min-width: 48px; }
+    .transfer-path .value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+    .bar { position: relative; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.07); margin-top: 4px; overflow: hidden; }
+    .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #4dabff, #78ffce); transition: width 0.15s linear; }
+    .transfer-stats { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; opacity: 0.8; }
+    .transfer-stats .percent { font-weight: 600; }
+    .transfer-stats .speed { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+    .btn-cancel { padding: 2px 6px; font-size: 10px; border-radius: 999px; }
+    .delete-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 20; }
+    .delete-dialog { min-width: 260px; max-width: 360px; padding: 14px 16px; border-radius: 10px; background: rgba(20,20,20,0.96); border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 18px 45px rgba(0,0,0,0.75); display: flex; flex-direction: column; gap: 10px; }
+    .delete-text { font-size: 13px; }
+    .dialog-input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.3); color: inherit; font-size: 13px; }
+    .delete-buttons { display: flex; justify-content: flex-end; gap: 8px; }
+    .delete-buttons .danger { background: rgba(255,80,80,0.85); border-color: rgba(255,120,120,0.85); }
+    .local-menu { position: absolute; min-width: 180px; max-width: 260px; max-height: 260px; overflow-y: auto; padding: 4px 0; border-radius: 10px; background: rgba(18,18,22,0.98); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 18px 45px rgba(0,0,0,0.8); z-index: 30; backdrop-filter: blur(12px); }
+    .local-menu-item { padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
+    .local-menu-item:hover { background: linear-gradient(90deg, rgba(120,200,255,0.24), rgba(120,255,206,0.15)); }
   `],
     }),
     __metadata("design:paramtypes", [_angular_core__WEBPACK_IMPORTED_MODULE_5__.Injector,