Add context menus and SFTP transfer progress handling

- Implemented context menu styles in components.css.
- Added SFTP transfer progress queue and related styles in sftp.css.
- Enhanced app.js to handle SFTP transfer progress events.
- Updated sftp.js to manage transfer progress and render the transfer queue.
- Modified terminal.js to include context menu shortcuts.
- Adjusted manager.go to emit SFTP transfer progress events with direction.
- Updated sshclient.go to modify terminal modes for better performance.

frontend/src/js/app.js

@@ -213,9 +213,12 @@
             }
           }
           // Also re-fit to catch any layout changes that occurred while connecting.
+          // Multiple delays help byobu/tmux render correctly after its status
+          // bar initialisation completes.
           const fit = () => this.terminals.fitSession(payload.sessionID);
           setTimeout(fit, 50);
           setTimeout(fit, 300);
+          setTimeout(fit, 800);
         }
       });
 
@@ -319,6 +322,11 @@
         }
       });
 
+      // SFTP transfer progress events
+      window.runtime.EventsOn("session:sftp:progress", (payload) => {
+        this.sftp.handleTransferProgress(payload);
+      });
+
       // Password/passphrase prompt requests from the backend
       window.runtime.EventsOn("session:secret:prompt", async (payload) => {
         try {

frontend/src/js/sftp.js

@@ -784,6 +784,113 @@
       });
     }
 
+    /* ── Transfer progress queue ─────────────────────────────────── */
+
+    /**
+     * Handles a transfer progress event from the backend.
+     * @param {Object} payload - { sessionID, direction, transferred, total, path, done }
+     */
+    handleTransferProgress(payload) {
+      var state = this.panels.get(payload.sessionID);
+      if (!state) {
+        // Panel not open — still track so we can show a notification on completion
+        if (payload.done) {
+          var dir = payload.direction === "upload" ? "↑ Uploaded" : "↓ Downloaded";
+          var name = payload.path.split("/").pop() || payload.path;
+          this.app.notifications.success(dir + " " + name);
+        }
+        return;
+      }
+
+      // Initialise transfers map if needed
+      if (!state.transfers) state.transfers = new Map();
+
+      var key = payload.direction + ":" + payload.path;
+
+      if (payload.done) {
+        state.transfers.delete(key);
+        this._renderTransferQueue(payload.sessionID);
+        // Refresh file list after upload completes
+        if (payload.direction === "upload") {
+          this._refresh(payload.sessionID);
+        }
+        return;
+      }
+
+      state.transfers.set(key, {
+        direction: payload.direction,
+        path: payload.path,
+        name: payload.path.split("/").pop() || payload.path,
+        transferred: payload.transferred,
+        total: payload.total,
+      });
+
+      this._renderTransferQueue(payload.sessionID);
+    }
+
+    /**
+     * Renders the transfer queue panel showing active transfers.
+     */
+    _renderTransferQueue(sessionId) {
+      var state = this.panels.get(sessionId);
+      if (!state) return;
+
+      var queue = state.el.querySelector(".sftp-transfer-queue");
+
+      if (!state.transfers || state.transfers.size === 0) {
+        if (queue) queue.remove();
+        return;
+      }
+
+      if (!queue) {
+        queue = createElement("div", "sftp-transfer-queue");
+        // Insert between toolbar and file-list
+        var fileList = state.el.querySelector(".sftp-file-list");
+        state.el.insertBefore(queue, fileList);
+      }
+
+      queue.innerHTML = "";
+
+      var header = createElement("div", "sftp-transfer-header");
+      header.textContent = "Transfers (" + state.transfers.size + ")";
+      queue.appendChild(header);
+
+      var self = this;
+      state.transfers.forEach(function (transfer) {
+        var row = createElement("div", "sftp-transfer-row");
+
+        var icon = createElement("span", "sftp-transfer-icon");
+        icon.textContent = transfer.direction === "upload" ? "↑" : "↓";
+        row.appendChild(icon);
+
+        var info = createElement("div", "sftp-transfer-info");
+
+        var nameEl = createElement("span", "sftp-transfer-name", {
+          textContent: transfer.name,
+          title: transfer.path,
+        });
+        info.appendChild(nameEl);
+
+        var progress = createElement("div", "sftp-transfer-progress");
+        var bar = createElement("div", "sftp-transfer-bar");
+        var pct = transfer.total > 0
+          ? Math.min(100, Math.round((transfer.transferred / transfer.total) * 100))
+          : 0;
+        bar.style.width = pct + "%";
+        progress.appendChild(bar);
+        info.appendChild(progress);
+
+        var meta = createElement("span", "sftp-transfer-meta");
+        var transferredStr = formatBytes(transfer.transferred);
+        var totalStr = transfer.total > 0 ? formatBytes(transfer.total) : "?";
+        meta.textContent = transferredStr + " / " + totalStr + " (" + pct + "%)";
+        info.appendChild(meta);
+
+        row.appendChild(info);
+        queue.appendChild(row);
+      });
+    }
+
     /* ── Resize handle ────────────────────────────────────────────── */
 
     _setupResize(sessionId, state) {

frontend/src/js/terminal.js

@@ -47,6 +47,8 @@
         allowProposedApi: true,
         convertEol: false,
         windowsMode: false,
+        scrollOnUserInput: true,
+        altClickMovesCursor: true,
       });
 
       // Load addons
@@ -504,6 +506,8 @@
       const { createElement, dismissContextMenus } = window.NexusTerminal;
       dismissContextMenus();
 
+      const isMac = navigator.platform.indexOf("Mac") !== -1;
+      const modKey = isMac ? "⌘" : "Ctrl+";
       const hasSelection = term.hasSelection();
       const menu = createElement("div", "context-menu");
       menu.style.left = `${x}px`;
@@ -512,6 +516,7 @@
       const items = [
         {
           label: "Copy",
+          shortcut: modKey + "C",
           disabled: !hasSelection,
           action: () => {
             const text = term.getSelection();
@@ -527,6 +532,7 @@
         },
         {
           label: "Paste",
+          shortcut: modKey + "V",
           action: () => {
             if (window.runtime && window.runtime.ClipboardGetText) {
               window.runtime
@@ -548,10 +554,12 @@
         { divider: true },
         {
           label: "Select All",
+          shortcut: modKey + "A",
           action: () => term.selectAll(),
         },
         {
           label: "Find…",
+          shortcut: modKey + "F",
           action: () => this.app._openTerminalSearch(),
         },
         {
@@ -561,6 +569,7 @@
         { divider: true },
         {
           label: "Clear Terminal",
+          shortcut: modKey + "K",
           action: () => term.clear(),
         },
         {
@@ -574,9 +583,17 @@
           menu.appendChild(createElement("div", "context-menu-divider"));
           continue;
         }
-        const btn = createElement("button", "context-menu-item", {
+        const btn = createElement("button", "context-menu-item");
+        const labelSpan = createElement("span", "context-menu-label", {
           textContent: entry.label,
         });
+        btn.appendChild(labelSpan);
+        if (entry.shortcut) {
+          const shortcutSpan = createElement("span", "context-menu-shortcut", {
+            textContent: entry.shortcut,
+          });
+          btn.appendChild(shortcutSpan);
+        }
         if (entry.disabled) {
           btn.disabled = true;
           btn.classList.add("context-menu-disabled");