tabby-sftp-ui 0.2.3 → 0.2.5

package/dist/index.js

@@ -237,6 +237,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var tabby_core__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(tabby_core__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _local_transfers__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./local-transfers */ "./src/local-transfers.ts");
 /* harmony import */ var _sftp_service__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./sftp.service */ "./src/sftp.service.ts");
+/* harmony import */ var _sftp_recovery_provider__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./sftp-recovery-provider */ "./src/sftp-recovery-provider.ts");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -255,6 +256,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 
 
+
 let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__WEBPACK_IMPORTED_MODULE_6__.BaseTabComponent {
     constructor(injector, sftp, profilesService, app) {
         // Tabby runtime BaseTabComponent expects Injector in constructor, but typings in this SDK may differ.
@@ -266,6 +268,7 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         // injected from the SSH tab when opened via SFTP-UI button
         this.sshSession = null;
         this.profile = null;
+        this.recoveredStub = false;
         this.connecting = false;
         this.connected = false;
         // legacy UI fields kept for now (not used when opened from SSH tab)
@@ -353,9 +356,9 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         // If there's no live SSH session, this tab was likely restored across
         // restart or opened in an invalid context. Close it immediately to avoid
         // an empty, nameless SFTP tab lingering after restart.
-        if (!this.sshSession) {
+        if (this.recoveredStub || !this.sshSession) {
             try {
-                this.app.closeTab(this);
+                this.app.closeTab(this.topmostParent ?? this);
             }
             catch (e) {
                 console.error('[SFTP-UI] Failed to close invalid SFTP tab', e);
@@ -596,12 +599,13 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         const sources = this.selectedLocal.includes(e) && this.selectedLocal.length ? this.selectedLocal : [e];
         const movePayload = sources.map(x => x.fullPath);
         ev.dataTransfer?.setData('application/x-tabby-sftp-ui-local-move', JSON.stringify(movePayload));
-        // Existing cross-device drag (local -> remote) only for files
-        if (!e.isDirectory) {
-            const payload = { kind: 'local-file', fullPath: e.fullPath, name: e.name };
-            ev.dataTransfer?.setData('application/x-tabby-sftp-ui', JSON.stringify(payload));
-            ev.dataTransfer?.setData('text/plain', e.fullPath);
-        }
+        // Cross-device drag (local -> remote) supports multi-select
+        const payload = {
+            kind: 'local-paths',
+            paths: sources.map(x => ({ fullPath: x.fullPath, name: x.name, isDirectory: x.isDirectory })),
+        };
+        ev.dataTransfer?.setData('application/x-tabby-sftp-ui', JSON.stringify(payload));
+        ev.dataTransfer?.setData('text/plain', e.fullPath);
         ev.dataTransfer?.setDragImage?.(ev.target ?? document.body, 0, 0);
     }
     onDragStartRemote(ev, item) {
@@ -611,10 +615,17 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         const sources = this.selectedRemote.includes(item) && this.selectedRemote.length ? this.selectedRemote : [item];
         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
-        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 };
+        // Cross-device drag (remote -> local) supports multi-select
+        const payload = {
+            kind: 'remote-paths',
+            paths: sources.map(x => ({
+                remotePath: x.fullPath,
+                name: x.name,
+                isDirectory: x.isDirectory,
+                size: x.size,
+                mode: x.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);
@@ -675,23 +686,40 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         catch {
             return;
         }
-        if (payload.kind !== 'local-file') {
-            return;
-        }
         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;
+            if (payload.kind === 'local-file') {
+                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);
                 }
-                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);
+                await this.refreshRemote();
+                return;
+            }
+            if (payload.kind === 'local-paths') {
+                for (const p of payload.paths) {
+                    const targetRemotePath = path__WEBPACK_IMPORTED_MODULE_0__.posix.join(this.remotePath, p.name);
+                    const existsOnRemote = this.remoteEntries.some(e => e.name === p.name);
+                    if (existsOnRemote) {
+                        const ok = await this.showReplaceConfirm(`Replace existing "${p.name}" on remote?`);
+                        if (!ok) {
+                            continue;
+                        }
+                        await this.deleteRemotePathRecursive(targetRemotePath);
+                    }
+                    // uploadLocalPathToRemote handles both files and directories
+                    await this.uploadLocalPathToRemote(this.remotePath, p.fullPath);
+                }
+                await this.refreshRemote();
+                return;
             }
-            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);
-            await this.refreshRemote();
         }
         catch (e) {
             console.error('[SFTP-UI] Upload failed', e);
@@ -753,6 +781,36 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
                 }
                 return;
             }
+            if (payload && payload.kind === 'remote-paths') {
+                try {
+                    if (!this.sftpSession) {
+                        throw new Error('Not connected');
+                    }
+                    for (const it of payload.paths) {
+                        const targetLocalPath = path__WEBPACK_IMPORTED_MODULE_0__.join(this.localPath, it.name);
+                        if (fs__WEBPACK_IMPORTED_MODULE_3__.existsSync(targetLocalPath)) {
+                            const ok = await this.showReplaceConfirm(it.isDirectory ? `Replace existing folder "${it.name}"?` : `Replace existing "${it.name}"?`);
+                            if (!ok) {
+                                continue;
+                            }
+                            await this.deleteLocalPathRecursive(targetLocalPath);
+                        }
+                        if (it.isDirectory) {
+                            await this.downloadRemoteDirectoryRecursive(it.remotePath, targetLocalPath);
+                        }
+                        else {
+                            const dl = new _local_transfers__WEBPACK_IMPORTED_MODULE_7__.LocalPathFileDownload(targetLocalPath, it.mode ?? 0o644, it.size ?? 0);
+                            this.trackTransfer(dl, 'download', it.remotePath, targetLocalPath);
+                            await this.sftpSession.download(it.remotePath, dl);
+                        }
+                    }
+                    await this.refreshLocal();
+                }
+                catch (e) {
+                    console.error('[SFTP-UI] Download paths failed', e);
+                }
+                return;
+            }
         }
         // Drag & drop from OS file manager into the local pane (copy into current local folder)
         const osPaths = this.getDroppedOsPaths(ev);
@@ -967,7 +1025,8 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         const isWin = os__WEBPACK_IMPORTED_MODULE_1__.platform() === 'win32';
         const isLocalPath = (p) => {
             if (isWin) {
-                return /^[A-Za-z]:\\/.test(p) || p.startsWith('\\\\');
+                // Accept both `C:\...` and `C:/...` (some drag sources provide forward slashes)
+                return /^[A-Za-z]:[\\/]/.test(p) || p.startsWith('\\\\');
             }
             return p.startsWith('/');
         };
@@ -994,6 +1053,13 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
                 }
             }
             return x;
+        })
+            .map(x => {
+            // Some sources may produce `/C:/Users/...`
+            if (isWin && /^\/[A-Za-z]:[\\/]/.test(x)) {
+                return x.slice(1);
+            }
+            return x;
         })
             .filter(x => x && isLocalPath(x));
         if (uris.length) {
@@ -1013,6 +1079,12 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
                 }
             }
             return x;
+        })
+            .map(x => {
+            if (isWin && /^\/[A-Za-z]:[\\/]/.test(x)) {
+                return x.slice(1);
+            }
+            return x;
         })
             .filter(x => x && isLocalPath(x));
         return textPaths;
@@ -1522,7 +1594,7 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
     getDefaultRemotePath() {
         const username = (this.profile && (this.profile.options?.username || this.profile.options?.user)) || '';
         if (username) {
-            return `/home/${username}`;
+            return username === 'root' ? `/root` : `/home/${username}`;
         }
         return '/';
     }
@@ -1967,12 +2039,16 @@ let SftpManagerTabComponent = class SftpManagerTabComponent extends tabby_core__
         }
         super.destroy();
     }
-    // Prevent Tabby from restoring SFTP-UI tabs across restarts, since they rely
-    // on a live SSH session from a terminal tab.
-    // Typинги допускают RecoveryToken | null, нам достаточно всегда возвращать null.
+    // A custom recovery token ensures that a SplitTab wrapper won't become empty
+    // after restart. On recovery we restore a stub SFTP tab which immediately
+    // closes its `topmostParent` (the SplitTab wrapper).
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     async getRecoveryToken(_options) {
-        return null;
+        return {
+            type: _sftp_recovery_provider__WEBPACK_IMPORTED_MODULE_9__.SFTP_RECOVERY_TYPE,
+            version: 1,
+            state: {},
+        };
     }
     async confirmDelete() {
         if (!this.deleteConfirmVisible) {
@@ -2270,388 +2346,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"
-              *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>
+        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,
@@ -2662,6 +2738,57 @@ SftpManagerTabComponent = __decorate([
 
 
 
+/***/ },
+
+/***/ "./src/sftp-recovery-provider.ts"
+/*!***************************************!*\
+  !*** ./src/sftp-recovery-provider.ts ***!
+  \***************************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SFTP_RECOVERY_TYPE: () => (/* binding */ SFTP_RECOVERY_TYPE),
+/* harmony export */   SftpTabRecoveryProvider: () => (/* binding */ SftpTabRecoveryProvider)
+/* harmony export */ });
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "@angular/core");
+/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_angular_core__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var tabby_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! tabby-core */ "tabby-core");
+/* harmony import */ var tabby_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(tabby_core__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _sftp_manager_tab_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./sftp-manager-tab.component */ "./src/sftp-manager-tab.component.ts");
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+
+
+const SFTP_RECOVERY_TYPE = 'tabby-sftp-ui:sftp-tab';
+let SftpTabRecoveryProvider = class SftpTabRecoveryProvider extends tabby_core__WEBPACK_IMPORTED_MODULE_1__.TabRecoveryProvider {
+    async applicableTo(recoveryToken) {
+        return recoveryToken?.type === SFTP_RECOVERY_TYPE;
+    }
+    async recover(_recoveryToken) {
+        // Restore a stub tab that immediately closes itself and its SplitTab wrapper.
+        return {
+            type: _sftp_manager_tab_component__WEBPACK_IMPORTED_MODULE_2__.SftpManagerTabComponent,
+            inputs: {
+                sshSession: null,
+                profile: null,
+                recoveredStub: true,
+            },
+        };
+    }
+};
+SftpTabRecoveryProvider = __decorate([
+    (0,_angular_core__WEBPACK_IMPORTED_MODULE_0__.Injectable)()
+], SftpTabRecoveryProvider);
+
+
+
+
 /***/ },
 
 /***/ "./src/sftp-terminal-decorator.ts"
@@ -2699,7 +2826,13 @@ let SftpTerminalDecorator = class SftpTerminalDecorator extends tabby_terminal__
     attach(terminal) {
         super.attach(terminal);
         // Best-effort DOM injection: place button near the existing Reconnect button if present.
+        // Only inject for SSH tabs (with a live sshSession property).
         const tryInsert = () => {
+            // Skip for local terminals (PowerShell, CMD, etc.) - only SSH tabs need this button.
+            const sshSession = terminal.sshSession;
+            if (!sshSession) {
+                return false;
+            }
             try {
                 const host = terminal.element?.nativeElement ?? null;
                 if (!host) {
@@ -3093,6 +3226,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _sftp_hotkey__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./sftp-hotkey */ "./src/sftp-hotkey.ts");
 /* harmony import */ var _sftp_ui_service__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./sftp-ui.service */ "./src/sftp-ui.service.ts");
 /* harmony import */ var _sftp_terminal_decorator__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./sftp-terminal-decorator */ "./src/sftp-terminal-decorator.ts");
+/* harmony import */ var _sftp_recovery_provider__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./sftp-recovery-provider */ "./src/sftp-recovery-provider.ts");
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -3112,6 +3246,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 
 
+
 let SftpUiModule = class SftpUiModule {
     constructor(_) { }
 };
@@ -3128,6 +3263,7 @@ SftpUiModule = __decorate([
             { provide: tabby_core__WEBPACK_IMPORTED_MODULE_3__.TabContextMenuItemProvider, useClass: _sftp_context_menu__WEBPACK_IMPORTED_MODULE_6__.SftpContextMenuProvider, multi: true },
             { provide: tabby_core__WEBPACK_IMPORTED_MODULE_3__.HotkeyProvider, useClass: _sftp_hotkey__WEBPACK_IMPORTED_MODULE_7__.SftpUiHotkeyProvider, multi: true },
             { provide: tabby_terminal__WEBPACK_IMPORTED_MODULE_4__.TerminalDecorator, useClass: _sftp_terminal_decorator__WEBPACK_IMPORTED_MODULE_9__.SftpTerminalDecorator, multi: true },
+            { provide: tabby_core__WEBPACK_IMPORTED_MODULE_3__.TabRecoveryProvider, useClass: _sftp_recovery_provider__WEBPACK_IMPORTED_MODULE_10__.SftpTabRecoveryProvider, multi: true },
             _sftp_ui_service__WEBPACK_IMPORTED_MODULE_8__.SftpUiService,
         ],
     }),