Andy Dixon
2ce145ba0f
- Implemented drag-and-drop support for file uploads in the terminal. - Added a modal for users to choose between uploading files or pasting contents. - Enhanced SFTP browser with a directory picker for selecting upload destinations. - Introduced methods for handling file uploads and reading file contents from the local system. - Added a new API endpoint for uploading raw file data to the server. - Implemented session management improvements to retrieve the current working directory for SSH sessions. - Updated documentation to include an overview and quick start guide for Nexus Terminal.
1062 lines
36 KiB
JavaScript
1062 lines
36 KiB
JavaScript
(function () {
|
|
/**
|
|
* Nexus Terminal — xterm.js terminal manager.
|
|
* Creates, manages, and destroys xterm.js instances for SSH and Telnet sessions.
|
|
* Handles data routing, resizing, and search.
|
|
*/
|
|
|
|
/* global Terminal, FitAddon, SearchAddon, WebLinksAddon, Unicode11Addon */
|
|
|
|
class TerminalManager {
|
|
/**
|
|
* @param {App} app
|
|
*/
|
|
constructor(app) {
|
|
this.app = app;
|
|
|
|
/**
|
|
* Map of sessionId → { term, fitAddon, searchAddon, observer }.
|
|
* @type {Map<string, Object>}
|
|
*/
|
|
this.terminals = new Map();
|
|
}
|
|
|
|
// ── Public API ───────────────────────────────────────────────────
|
|
|
|
/**
|
|
* Creates and opens an xterm.js terminal inside the given container.
|
|
* Wires up data input → backend and container resizing.
|
|
*
|
|
* @param {string} sessionId
|
|
* @param {string} containerId - DOM id of the panel element.
|
|
* @param {Object} profile - The connection profile (used for font/theme prefs).
|
|
* @returns {Terminal} The xterm.js Terminal instance.
|
|
*/
|
|
createTerminal(sessionId, containerId, profile) {
|
|
const themeName =
|
|
(this.app.state.preferences || {}).terminalTheme || "charcoal";
|
|
const term = new Terminal({
|
|
theme: window.NexusTerminal.getTerminalTheme(themeName),
|
|
fontFamily:
|
|
profile.terminalFontFamily ||
|
|
'JetBrains Mono, Menlo, Monaco, Consolas, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", monospace',
|
|
fontSize: profile.terminalFontSize || 14,
|
|
scrollback: profile.terminalScrollback || 10000,
|
|
cursorStyle: profile.terminalCursorStyle || "block",
|
|
cursorBlink: true,
|
|
allowProposedApi: true,
|
|
convertEol: false,
|
|
windowsMode: false,
|
|
});
|
|
|
|
// Load addons
|
|
const fitAddon = new FitAddon.FitAddon();
|
|
const searchAddon = new SearchAddon.SearchAddon();
|
|
let webLinksAddon = null;
|
|
let unicode11Addon = null;
|
|
|
|
term.loadAddon(fitAddon);
|
|
term.loadAddon(searchAddon);
|
|
|
|
try {
|
|
unicode11Addon = new Unicode11Addon.Unicode11Addon();
|
|
term.loadAddon(unicode11Addon);
|
|
term.unicode.activeVersion = "11";
|
|
} catch (_) {
|
|
// Unicode 11 addon is optional; fall back to default unicode handling.
|
|
}
|
|
|
|
// WebLinksAddon may not always be available
|
|
try {
|
|
webLinksAddon = new WebLinksAddon.WebLinksAddon((_event, uri) => {
|
|
window.runtime.BrowserOpenURL(uri);
|
|
});
|
|
term.loadAddon(webLinksAddon);
|
|
} catch (_) {
|
|
// Not critical — links just won't be clickable
|
|
}
|
|
|
|
// Open the terminal in the DOM container
|
|
const container = document.getElementById(containerId);
|
|
term.open(container);
|
|
|
|
let suppressPasteEvent = false;
|
|
const attachPasteGuard = () => {
|
|
const inputEl = term.textarea || container.querySelector("textarea");
|
|
if (!inputEl) return;
|
|
inputEl.addEventListener("paste", (e) => {
|
|
if (!suppressPasteEvent) return;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
suppressPasteEvent = false;
|
|
});
|
|
};
|
|
attachPasteGuard();
|
|
|
|
// Right-click context menu on the terminal viewport
|
|
const termEl = container.querySelector(".xterm");
|
|
if (termEl) {
|
|
termEl.addEventListener("contextmenu", (e) => {
|
|
e.preventDefault();
|
|
this._showTerminalContextMenu(sessionId, term, e.clientX, e.clientY);
|
|
});
|
|
}
|
|
|
|
// Drag-and-drop file handling
|
|
container.addEventListener("dragover", (e) => {
|
|
if (e.dataTransfer && Array.from(e.dataTransfer.types || []).includes("Files")) {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "copy";
|
|
}
|
|
});
|
|
container.addEventListener("drop", (e) => {
|
|
const files = e.dataTransfer ? e.dataTransfer.files : null;
|
|
if (!files || files.length === 0) return;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this._handleFileDrop(sessionId, term, files);
|
|
});
|
|
|
|
// Force a synchronous layout reflow so the container reports its
|
|
// true dimensions, then fit the terminal to fill the space.
|
|
// eslint-disable-next-line no-unused-expressions
|
|
container.offsetHeight;
|
|
const doFit = () => {
|
|
try {
|
|
fitAddon.fit();
|
|
} catch (_) {
|
|
/* noop */
|
|
}
|
|
};
|
|
doFit();
|
|
// Belt-and-braces: retry once after a paint in case the initial
|
|
// reflow dimensions were still stale.
|
|
requestAnimationFrame(doFit);
|
|
|
|
// Forward user keystrokes to the backend
|
|
term.onData((data) => {
|
|
try {
|
|
const b64 = btoa(data);
|
|
window.go.api.Service.WriteSession(sessionId, b64);
|
|
|
|
// Broadcast to all other connected sessions if enabled
|
|
if (this.app.state.broadcastMode) {
|
|
for (const [otherId] of this.terminals) {
|
|
if (otherId === sessionId) continue;
|
|
const otherSession = this.app.state.getSession(otherId);
|
|
if (otherSession && otherSession.state === "connected") {
|
|
try {
|
|
window.go.api.Service.WriteSession(otherId, b64);
|
|
} catch (_) {
|
|
/* non-critical */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error("WriteSession error:", err);
|
|
}
|
|
});
|
|
|
|
// Clipboard: copy selection on Cmd/Ctrl+C, paste on Cmd/Ctrl+V
|
|
term.attachCustomKeyEventHandler((e) => {
|
|
const mod = e.ctrlKey || e.metaKey;
|
|
|
|
// Cmd/Ctrl+C — copy selected text (let xterm handle it normally if no selection)
|
|
if (mod && e.key === "c" && e.type === "keydown") {
|
|
const selection = term.getSelection();
|
|
if (selection) {
|
|
if (window.runtime && window.runtime.ClipboardSetText) {
|
|
window.runtime.ClipboardSetText(selection);
|
|
} else {
|
|
navigator.clipboard.writeText(selection).catch(function () {});
|
|
}
|
|
return false; // Prevent xterm from sending Ctrl+C
|
|
}
|
|
// No selection — let Ctrl+C pass through as SIGINT
|
|
return true;
|
|
}
|
|
|
|
// Cmd/Ctrl+V — paste from clipboard
|
|
if (mod && e.key === "v" && e.type === "keydown") {
|
|
suppressPasteEvent = true;
|
|
setTimeout(() => {
|
|
suppressPasteEvent = false;
|
|
}, 250);
|
|
if (window.runtime && window.runtime.ClipboardGetText) {
|
|
window.runtime
|
|
.ClipboardGetText()
|
|
.then(function (text) {
|
|
if (text) term.paste(text);
|
|
})
|
|
.catch(function () {});
|
|
} else {
|
|
navigator.clipboard
|
|
.readText()
|
|
.then(function (text) {
|
|
if (text) term.paste(text);
|
|
})
|
|
.catch(function () {});
|
|
}
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
// Notify backend when terminal dimensions change
|
|
term.onResize(({ cols, rows }) => {
|
|
try {
|
|
window.go.api.Service.ResizeSession(sessionId, cols, rows);
|
|
} catch (err) {
|
|
console.error("ResizeSession error:", err);
|
|
}
|
|
});
|
|
|
|
// Re-fit when the container itself resizes
|
|
const observer = new ResizeObserver(() => {
|
|
try {
|
|
fitAddon.fit();
|
|
} catch (_) {
|
|
// Ignore transient errors during layout shifts
|
|
}
|
|
});
|
|
observer.observe(container);
|
|
|
|
this.terminals.set(sessionId, {
|
|
term,
|
|
fitAddon,
|
|
searchAddon,
|
|
webLinksAddon,
|
|
observer,
|
|
decoder:
|
|
typeof TextDecoder !== "undefined"
|
|
? new TextDecoder("utf-8")
|
|
: null,
|
|
});
|
|
|
|
return term;
|
|
}
|
|
|
|
/**
|
|
* Writes incoming backend data (base64-encoded) to the appropriate terminal.
|
|
* @param {string} sessionId
|
|
* @param {string} base64Data
|
|
*/
|
|
handleData(sessionId, base64Data) {
|
|
const entry = this.terminals.get(sessionId);
|
|
if (!entry) return;
|
|
|
|
try {
|
|
const raw = atob(base64Data);
|
|
if (entry.decoder) {
|
|
const bytes = new Uint8Array(raw.length);
|
|
for (let i = 0; i < raw.length; i++) {
|
|
bytes[i] = raw.charCodeAt(i);
|
|
}
|
|
const text = entry.decoder.decode(bytes, { stream: true });
|
|
entry.term.write(text);
|
|
} else {
|
|
entry.term.write(raw);
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to decode session data:", err);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Tears down a terminal instance and frees resources.
|
|
* @param {string} sessionId
|
|
*/
|
|
destroyTerminal(sessionId) {
|
|
const entry = this.terminals.get(sessionId);
|
|
if (!entry) return;
|
|
|
|
entry.observer.disconnect();
|
|
entry.term.dispose();
|
|
this.terminals.delete(sessionId);
|
|
}
|
|
|
|
/**
|
|
* Shows the terminal for a given session, hiding all others.
|
|
* @param {string} sessionId
|
|
*/
|
|
showTerminal(sessionId) {
|
|
for (const [id, entry] of this.terminals) {
|
|
const panel = document.getElementById(`panel-${id}`);
|
|
if (panel) {
|
|
panel.style.display = id === sessionId ? "flex" : "none";
|
|
}
|
|
}
|
|
|
|
// Re-fit the newly visible terminal
|
|
const entry = this.terminals.get(sessionId);
|
|
if (entry) {
|
|
requestAnimationFrame(() => {
|
|
try {
|
|
entry.fitAddon.fit();
|
|
} catch (_) {
|
|
/* noop */
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Re-fits the currently active terminal to its container.
|
|
*/
|
|
fitActive() {
|
|
const id = this.app.state.activeSessionId;
|
|
if (id) this.fitSession(id);
|
|
}
|
|
|
|
/**
|
|
* Re-fits a specific session's terminal to its container.
|
|
* @param {string} sessionId
|
|
*/
|
|
fitSession(sessionId) {
|
|
const entry = this.terminals.get(sessionId);
|
|
if (entry) {
|
|
requestAnimationFrame(() => {
|
|
try {
|
|
entry.fitAddon.fit();
|
|
} catch (_) {
|
|
/* noop */
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Searches within a terminal using the search addon.
|
|
* @param {string} sessionId
|
|
* @param {string} query
|
|
* @param {Object} [options]
|
|
* @param {boolean} [options.regex=false]
|
|
* @param {boolean} [options.caseSensitive=false]
|
|
* @param {boolean} [options.wholeWord=false]
|
|
* @returns {boolean} Whether a match was found.
|
|
*/
|
|
search(sessionId, query, options = {}) {
|
|
const entry = this.terminals.get(sessionId);
|
|
if (!entry) return false;
|
|
|
|
if (!query) {
|
|
entry.searchAddon.clearDecorations();
|
|
return false;
|
|
}
|
|
|
|
return entry.searchAddon.findNext(query, {
|
|
regex: options.regex || false,
|
|
caseSensitive: options.caseSensitive || false,
|
|
wholeWord: options.wholeWord || false,
|
|
decorations: {
|
|
matchBackground: "#ffa72633",
|
|
activeMatchBackground: "#4ecdc466",
|
|
matchBorder: "#ffa726",
|
|
activeMatchBorder: "#4ecdc4",
|
|
},
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Finds the previous search result.
|
|
* @param {string} sessionId
|
|
* @param {string} query
|
|
* @param {Object} [options]
|
|
* @returns {boolean}
|
|
*/
|
|
searchPrevious(sessionId, query, options = {}) {
|
|
const entry = this.terminals.get(sessionId);
|
|
if (!entry || !query) return false;
|
|
return entry.searchAddon.findPrevious(query, {
|
|
regex: options.regex || false,
|
|
caseSensitive: options.caseSensitive || false,
|
|
wholeWord: options.wholeWord || false,
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Clears the terminal buffer and viewport.
|
|
* @param {string} sessionId
|
|
*/
|
|
clearTerminal(sessionId) {
|
|
const entry = this.terminals.get(sessionId);
|
|
if (entry) entry.term.clear();
|
|
}
|
|
|
|
/**
|
|
* Fully resets the terminal (clears buffer, restores default state).
|
|
* @param {string} sessionId
|
|
*/
|
|
resetTerminal(sessionId) {
|
|
const entry = this.terminals.get(sessionId);
|
|
if (entry) entry.term.reset();
|
|
}
|
|
|
|
/**
|
|
* Focuses the terminal so it can receive keyboard input.
|
|
* @param {string} sessionId
|
|
*/
|
|
focusTerminal(sessionId) {
|
|
const entry = this.terminals.get(sessionId);
|
|
if (entry) entry.term.focus();
|
|
}
|
|
|
|
/**
|
|
* Applies a named colour theme to all active terminal instances.
|
|
* @param {string} themeName
|
|
*/
|
|
applyTheme(themeName) {
|
|
const themeObj = window.NexusTerminal.getTerminalTheme(themeName);
|
|
for (const [, entry] of this.terminals) {
|
|
entry.term.options.theme = themeObj;
|
|
}
|
|
}
|
|
|
|
// ── Private helpers ──────────────────────────────────────────────
|
|
|
|
/**
|
|
* Shows a right-click context menu for a terminal.
|
|
* @param {string} sessionId
|
|
* @param {Terminal} term
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @private
|
|
*/
|
|
_showTerminalContextMenu(sessionId, term, x, y) {
|
|
const { createElement, dismissContextMenus } = window.NexusTerminal;
|
|
dismissContextMenus();
|
|
|
|
const hasSelection = term.hasSelection();
|
|
const menu = createElement("div", "context-menu");
|
|
menu.style.left = `${x}px`;
|
|
menu.style.top = `${y}px`;
|
|
|
|
const items = [
|
|
{
|
|
label: "Copy",
|
|
disabled: !hasSelection,
|
|
action: () => {
|
|
const text = term.getSelection();
|
|
if (text) {
|
|
if (window.runtime && window.runtime.ClipboardSetText) {
|
|
window.runtime.ClipboardSetText(text);
|
|
} else {
|
|
navigator.clipboard.writeText(text).catch(function () {});
|
|
}
|
|
this.app.notifications.info("Copied to clipboard");
|
|
}
|
|
},
|
|
},
|
|
{
|
|
label: "Paste",
|
|
action: () => {
|
|
if (window.runtime && window.runtime.ClipboardGetText) {
|
|
window.runtime
|
|
.ClipboardGetText()
|
|
.then((text) => {
|
|
if (text) term.paste(text);
|
|
})
|
|
.catch(function () {});
|
|
} else {
|
|
navigator.clipboard
|
|
.readText()
|
|
.then((text) => {
|
|
if (text) term.paste(text);
|
|
})
|
|
.catch(function () {});
|
|
}
|
|
},
|
|
},
|
|
{ divider: true },
|
|
{
|
|
label: "Select All",
|
|
action: () => term.selectAll(),
|
|
},
|
|
{
|
|
label: "Find…",
|
|
action: () => this.app._openTerminalSearch(),
|
|
},
|
|
{
|
|
label: "Send Snippet…",
|
|
action: () => this.app.snippets.open(),
|
|
},
|
|
{ divider: true },
|
|
{
|
|
label: "Clear Terminal",
|
|
action: () => term.clear(),
|
|
},
|
|
{
|
|
label: "Reset Terminal",
|
|
action: () => term.reset(),
|
|
},
|
|
];
|
|
|
|
for (const entry of items) {
|
|
if (entry.divider) {
|
|
menu.appendChild(createElement("div", "context-menu-divider"));
|
|
continue;
|
|
}
|
|
const btn = createElement("button", "context-menu-item", {
|
|
textContent: entry.label,
|
|
});
|
|
if (entry.disabled) {
|
|
btn.disabled = true;
|
|
btn.classList.add("context-menu-disabled");
|
|
}
|
|
btn.addEventListener("click", () => {
|
|
dismissContextMenus();
|
|
entry.action();
|
|
});
|
|
// Prevent mousedown from causing text deselection in WKWebView
|
|
btn.addEventListener("mousedown", (e) => e.preventDefault());
|
|
menu.appendChild(btn);
|
|
}
|
|
|
|
document.body.appendChild(menu);
|
|
|
|
// Keep within viewport
|
|
const rect = menu.getBoundingClientRect();
|
|
if (rect.right > window.innerWidth)
|
|
menu.style.left = `${window.innerWidth - rect.width - 8}px`;
|
|
if (rect.bottom > window.innerHeight)
|
|
menu.style.top = `${window.innerHeight - rect.height - 8}px`;
|
|
}
|
|
|
|
_handleFileDrop(sessionId, term, fileList) {
|
|
const session = this.app.state.getSession(sessionId);
|
|
if (!session) return;
|
|
|
|
const files = Array.from(fileList || []);
|
|
if (files.length === 0) return;
|
|
|
|
const canUpload = session.protocol === "ssh";
|
|
this._promptFileDropAction(files, canUpload).then((choice) => {
|
|
if (!choice) return;
|
|
if (choice === "paste") {
|
|
this._pasteFileContents(files, term);
|
|
return;
|
|
}
|
|
if (choice === "upload") {
|
|
if (!canUpload) {
|
|
this.app.notifications.error("Upload is only available for SSH sessions.");
|
|
return;
|
|
}
|
|
this._uploadDroppedFiles(sessionId, files);
|
|
}
|
|
});
|
|
}
|
|
|
|
_promptFileDropAction(files, canUpload) {
|
|
const { createElement, formatBytes } = window.NexusTerminal;
|
|
return new Promise((resolve) => {
|
|
const backdrop = createElement("div", "modal-backdrop");
|
|
const modal = createElement("div", "modal modal-sm");
|
|
const count = files.length;
|
|
const first = files[0];
|
|
const sizeLabel = first && typeof first.size === "number" ? formatBytes(first.size) : "";
|
|
const title = count === 1 ? (first ? first.name : "File") : count + " files";
|
|
|
|
modal.innerHTML = `
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">File Drop</h3>
|
|
<button class="btn btn-icon btn-xs modal-close">x</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p style="font-size:var(--text-sm);color:var(--text-secondary)">
|
|
<strong>${title}</strong>${count === 1 && sizeLabel ? " (" + sizeLabel + ")" : ""}
|
|
</p>
|
|
<p style="font-size:var(--text-sm);color:var(--text-tertiary)">
|
|
Choose what to do with the dropped ${count === 1 ? "file" : "files"}.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-sm prompt-cancel">Cancel</button>
|
|
<button class="btn btn-sm btn-secondary action-paste">Paste contents</button>
|
|
<button class="btn btn-sm btn-primary action-upload">Upload to current directory</button>
|
|
</div>
|
|
`;
|
|
|
|
backdrop.appendChild(modal);
|
|
document.body.appendChild(backdrop);
|
|
requestAnimationFrame(() => {
|
|
backdrop.classList.add("is-visible");
|
|
modal.classList.add("is-visible");
|
|
});
|
|
|
|
const uploadBtn = modal.querySelector(".action-upload");
|
|
if (!canUpload) {
|
|
uploadBtn.disabled = true;
|
|
uploadBtn.title = "Upload is only available for SSH sessions.";
|
|
}
|
|
|
|
const close = (value) => {
|
|
backdrop.classList.remove("is-visible");
|
|
modal.classList.remove("is-visible");
|
|
setTimeout(() => backdrop.remove(), 200);
|
|
resolve(value);
|
|
};
|
|
|
|
modal
|
|
.querySelector(".modal-close")
|
|
.addEventListener("click", () => close(null));
|
|
modal
|
|
.querySelector(".prompt-cancel")
|
|
.addEventListener("click", () => close(null));
|
|
modal
|
|
.querySelector(".action-paste")
|
|
.addEventListener("click", () => close("paste"));
|
|
uploadBtn.addEventListener("click", () => close("upload"));
|
|
backdrop.addEventListener("click", (e) => {
|
|
if (e.target === backdrop) close(null);
|
|
});
|
|
});
|
|
}
|
|
|
|
_pasteFileContents(files, term) {
|
|
const readFile = (file) =>
|
|
new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => resolve(reader.result || "");
|
|
reader.onerror = () => reject(new Error("read failed"));
|
|
reader.readAsText(file);
|
|
});
|
|
|
|
const run = async () => {
|
|
try {
|
|
let combined = "";
|
|
for (let i = 0; i < files.length; i += 1) {
|
|
const text = await readFile(files[i]);
|
|
if (text) {
|
|
if (combined) combined += "\n";
|
|
combined += text;
|
|
}
|
|
}
|
|
if (combined) term.paste(combined);
|
|
} catch (_) {
|
|
this.app.notifications.error("Failed to read file contents.");
|
|
}
|
|
};
|
|
|
|
run();
|
|
}
|
|
|
|
_uploadDroppedFiles(sessionId, files) {
|
|
const run = async () => {
|
|
const remoteDir = await this._promptUploadDirectory(sessionId);
|
|
if (!remoteDir) return;
|
|
|
|
if (files.length > 1) {
|
|
this.app.notifications.info("Uploading " + files.length + " files...");
|
|
}
|
|
|
|
for (let i = 0; i < files.length; i += 1) {
|
|
const file = files[i];
|
|
try {
|
|
const buffer = await this._readFileBuffer(file);
|
|
const base64Data = this._arrayBufferToBase64(buffer);
|
|
await window.go.api.Service.SFTPUploadData(
|
|
sessionId,
|
|
remoteDir,
|
|
file.name,
|
|
base64Data,
|
|
);
|
|
} catch (err) {
|
|
const msg = err && err.message ? err.message : String(err);
|
|
this.app.notifications.error("Upload failed for " + file.name + ": " + msg);
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (files.length === 1) {
|
|
this.app.notifications.success("Uploaded " + files[0].name);
|
|
} else {
|
|
this.app.notifications.success("Uploaded " + files.length + " files");
|
|
}
|
|
};
|
|
|
|
run().catch((err) => {
|
|
const msg = err && err.message ? err.message : String(err);
|
|
this.app.notifications.error("Upload failed: " + msg);
|
|
});
|
|
}
|
|
|
|
_readFileBuffer(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => resolve(reader.result);
|
|
reader.onerror = () => reject(new Error("read failed"));
|
|
reader.readAsArrayBuffer(file);
|
|
});
|
|
}
|
|
|
|
async _promptUploadDirectory(sessionId) {
|
|
return this._openUploadDirectoryPicker(sessionId);
|
|
}
|
|
|
|
_openUploadDirectoryPicker(sessionId) {
|
|
const { createElement, escapeHtml } = window.NexusTerminal;
|
|
return new Promise((resolve) => {
|
|
const backdrop = createElement("div", "modal-backdrop");
|
|
const modal = createElement("div", "modal modal-lg");
|
|
modal.innerHTML = `
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Select Upload Directory</h3>
|
|
<button class="btn btn-icon btn-xs modal-close">x</button>
|
|
</div>
|
|
<div class="modal-body sftp-picker-body">
|
|
<div class="sftp-toolbar">
|
|
<div class="sftp-breadcrumb" data-role="breadcrumb"></div>
|
|
<input class="sftp-picker-filter" type="text" placeholder="Filter folders" />
|
|
<div class="sftp-toolbar-actions">
|
|
<button class="sftp-toolbar-btn sftp-picker-up" title="Up">Up</button>
|
|
<button class="sftp-toolbar-btn sftp-picker-refresh" title="Refresh">Ref</button>
|
|
</div>
|
|
</div>
|
|
<div class="sftp-file-list sftp-picker-list"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="modal-footer-left">
|
|
<span class="form-help sftp-picker-path"></span>
|
|
<span class="sftp-picker-status"></span>
|
|
<span class="sftp-picker-legend">
|
|
<span class="sftp-picker-badge is-readonly">READ ONLY</span>
|
|
<span class="sftp-picker-badge is-noread">NO READ</span>
|
|
</span>
|
|
</div>
|
|
<button class="btn btn-sm prompt-cancel">Cancel</button>
|
|
<button class="btn btn-sm btn-primary prompt-ok">Use this folder</button>
|
|
</div>
|
|
`;
|
|
|
|
backdrop.appendChild(modal);
|
|
document.body.appendChild(backdrop);
|
|
requestAnimationFrame(() => {
|
|
backdrop.classList.add("is-visible");
|
|
modal.classList.add("is-visible");
|
|
});
|
|
|
|
const listEl = modal.querySelector(".sftp-picker-list");
|
|
const breadcrumbEl = modal.querySelector("[data-role=\"breadcrumb\"]");
|
|
const pathLabel = modal.querySelector(".sftp-picker-path");
|
|
const upBtn = modal.querySelector(".sftp-picker-up");
|
|
const refreshBtn = modal.querySelector(".sftp-picker-refresh");
|
|
const useBtn = modal.querySelector(".prompt-ok");
|
|
const filterInput = modal.querySelector(".sftp-picker-filter");
|
|
const statusLabel = modal.querySelector(".sftp-picker-status");
|
|
|
|
const state = {
|
|
cwd: "",
|
|
selected: "",
|
|
selectedWritable: true,
|
|
cwdWritable: true,
|
|
entries: [],
|
|
visibleEntries: [],
|
|
loading: false,
|
|
filter: "",
|
|
cursorIndex: -1,
|
|
};
|
|
|
|
const close = (value) => {
|
|
backdrop.classList.remove("is-visible");
|
|
modal.classList.remove("is-visible");
|
|
setTimeout(() => backdrop.remove(), 200);
|
|
resolve(value);
|
|
};
|
|
|
|
modal
|
|
.querySelector(".modal-close")
|
|
.addEventListener("click", () => close(null));
|
|
modal
|
|
.querySelector(".prompt-cancel")
|
|
.addEventListener("click", () => close(null));
|
|
useBtn.addEventListener("click", () => close(state.selected || state.cwd));
|
|
backdrop.addEventListener("click", (e) => {
|
|
if (e.target === backdrop) close(null);
|
|
});
|
|
|
|
const renderBreadcrumb = () => {
|
|
breadcrumbEl.innerHTML = "";
|
|
const segments = this._pathSegments(state.cwd);
|
|
for (let i = 0; i < segments.length; i += 1) {
|
|
if (i > 0) {
|
|
breadcrumbEl.appendChild(
|
|
createElement("span", "sftp-breadcrumb-sep", { textContent: ">" }),
|
|
);
|
|
}
|
|
const seg = segments[i];
|
|
const btn = createElement("button", "sftp-breadcrumb-segment", {
|
|
textContent: seg.label,
|
|
title: seg.path,
|
|
});
|
|
btn.addEventListener("click", () => loadDir(seg.path));
|
|
breadcrumbEl.appendChild(btn);
|
|
}
|
|
};
|
|
|
|
const updateStatus = () => {
|
|
if (state.selected) {
|
|
statusLabel.textContent = state.selectedWritable ? "" : "No write permission";
|
|
} else {
|
|
statusLabel.textContent = state.cwdWritable ? "" : "Current folder is read only";
|
|
}
|
|
};
|
|
|
|
const setSelection = (entry, index) => {
|
|
listEl.querySelectorAll(".sftp-file-row").forEach((el) => {
|
|
el.classList.remove("is-selected");
|
|
});
|
|
const row = listEl.querySelector(`.sftp-file-row[data-index="${index}"]`);
|
|
if (row) row.classList.add("is-selected");
|
|
state.selected = entry.path;
|
|
state.selectedWritable = entry.canWrite !== false;
|
|
state.cursorIndex = index;
|
|
pathLabel.textContent = entry.path;
|
|
useBtn.disabled = !state.selectedWritable;
|
|
useBtn.title = state.selectedWritable ? "" : "No write permission";
|
|
updateStatus();
|
|
};
|
|
|
|
const renderList = () => {
|
|
listEl.innerHTML = "";
|
|
const basePath = state.selected || state.cwd || "";
|
|
const suffix = state.selected ? "" : (state.cwdWritable ? "" : " (read only)");
|
|
pathLabel.textContent = basePath + suffix;
|
|
|
|
if (state.cwd && state.cwd !== "/") {
|
|
const parentRow = this._buildPickerRow({
|
|
name: "..",
|
|
isDir: true,
|
|
path: this._parentPath(state.cwd),
|
|
});
|
|
parentRow.classList.add("is-parent");
|
|
parentRow.addEventListener("dblclick", () => loadDir(parentRow.dataset.path));
|
|
listEl.appendChild(parentRow);
|
|
}
|
|
|
|
const filtered = state.filter
|
|
? state.entries.filter((entry) => entry.name.toLowerCase().includes(state.filter))
|
|
: state.entries;
|
|
state.visibleEntries = filtered;
|
|
|
|
if (!filtered.length) {
|
|
const empty = createElement("div", "sftp-state");
|
|
empty.innerHTML = "<div class=\"sftp-state-icon\">D</div><div class=\"sftp-state-msg\">No folders found</div>";
|
|
listEl.appendChild(empty);
|
|
state.cursorIndex = -1;
|
|
updateStatus();
|
|
return;
|
|
}
|
|
|
|
filtered.forEach((entry, index) => {
|
|
const row = this._buildPickerRow(entry, index);
|
|
if (entry.canRead === false) {
|
|
row.classList.add("is-unreadable");
|
|
}
|
|
if (entry.canWrite === false) {
|
|
row.classList.add("is-readonly");
|
|
}
|
|
row.addEventListener("click", () => {
|
|
if (entry.canRead === false) return;
|
|
setSelection(entry, index);
|
|
});
|
|
row.addEventListener("dblclick", () => {
|
|
if (entry.canRead === false) return;
|
|
loadDir(entry.path);
|
|
});
|
|
listEl.appendChild(row);
|
|
});
|
|
updateStatus();
|
|
};
|
|
|
|
const renderLoading = () => {
|
|
listEl.innerHTML = "";
|
|
const s = createElement("div", "sftp-state");
|
|
s.innerHTML = "<div class=\"sftp-spinner\"></div><div class=\"sftp-state-msg\">Loading...</div>";
|
|
listEl.appendChild(s);
|
|
};
|
|
|
|
const renderError = (msg) => {
|
|
listEl.innerHTML = "";
|
|
const s = createElement("div", "sftp-state");
|
|
s.innerHTML =
|
|
"<div class=\"sftp-state-icon\">!</div>" +
|
|
"<div class=\"sftp-state-msg\">" + escapeHtml(msg) + "</div>" +
|
|
"<button class=\"btn btn-sm btn-secondary sftp-state-retry\">Retry</button>";
|
|
const retryBtn = s.querySelector(".sftp-state-retry");
|
|
if (retryBtn) retryBtn.addEventListener("click", () => loadDir(state.cwd));
|
|
listEl.appendChild(s);
|
|
};
|
|
|
|
const loadDir = async (path) => {
|
|
if (state.loading) return;
|
|
state.loading = true;
|
|
renderLoading();
|
|
try {
|
|
const targetPath = path || (await window.go.api.Service.SFTPPwd(sessionId));
|
|
const files = await window.go.api.Service.SFTPList(sessionId, targetPath);
|
|
const stat = await window.go.api.Service.SFTPStat(sessionId, targetPath);
|
|
state.cwd = targetPath;
|
|
state.selected = "";
|
|
state.selectedWritable = true;
|
|
state.cwdWritable = stat && this._modeCanWrite(stat.mode);
|
|
state.entries = (files || []).filter((e) => e.isDir).sort((a, b) =>
|
|
a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
|
|
);
|
|
state.entries = state.entries.map((entry) => {
|
|
const canRead = this._modeCanRead(entry.mode);
|
|
const canWrite = this._modeCanWrite(entry.mode);
|
|
return Object.assign({}, entry, { canRead, canWrite });
|
|
});
|
|
useBtn.disabled = !state.cwdWritable;
|
|
useBtn.title = state.cwdWritable ? "" : "No write permission";
|
|
renderBreadcrumb();
|
|
renderList();
|
|
} catch (err) {
|
|
renderError(err.message || String(err));
|
|
} finally {
|
|
state.loading = false;
|
|
}
|
|
};
|
|
|
|
upBtn.addEventListener("click", () => {
|
|
if (state.cwd) loadDir(this._parentPath(state.cwd));
|
|
});
|
|
refreshBtn.addEventListener("click", () => loadDir(state.cwd));
|
|
|
|
filterInput.addEventListener("input", () => {
|
|
state.filter = filterInput.value.trim().toLowerCase();
|
|
renderList();
|
|
});
|
|
|
|
const moveSelection = (delta) => {
|
|
if (!state.visibleEntries.length) return;
|
|
let idx = state.cursorIndex;
|
|
const max = state.visibleEntries.length - 1;
|
|
let attempts = 0;
|
|
do {
|
|
idx = idx + delta;
|
|
if (idx < 0) idx = max;
|
|
if (idx > max) idx = 0;
|
|
const entry = state.visibleEntries[idx];
|
|
if (entry && entry.canRead !== false) {
|
|
setSelection(entry, idx);
|
|
return;
|
|
}
|
|
attempts += 1;
|
|
} while (attempts <= max);
|
|
};
|
|
|
|
modal.addEventListener("keydown", (e) => {
|
|
const isInput = e.target === filterInput;
|
|
if (isInput && e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
|
|
|
|
if (e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
moveSelection(1);
|
|
} else if (e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
moveSelection(-1);
|
|
} else if (e.key === "Enter") {
|
|
if (state.selected && state.selectedWritable) {
|
|
e.preventDefault();
|
|
close(state.selected);
|
|
} else if (!state.selected && state.cwd && state.cwdWritable) {
|
|
e.preventDefault();
|
|
close(state.cwd);
|
|
}
|
|
} else if (e.key === "Escape") {
|
|
e.preventDefault();
|
|
close(null);
|
|
}
|
|
});
|
|
|
|
const initial = this.app.sftp && typeof this.app.sftp.getCwd === "function"
|
|
? this.app.sftp.getCwd(sessionId)
|
|
: "";
|
|
loadDir(initial || "");
|
|
});
|
|
}
|
|
|
|
_buildPickerRow(entry, index) {
|
|
const { createElement } = window.NexusTerminal;
|
|
const dataset = { path: entry.path || "" };
|
|
if (typeof index === "number") {
|
|
dataset.index = String(index);
|
|
}
|
|
const row = createElement("div", "sftp-file-row", { dataset });
|
|
const icon = createElement("span", "sftp-file-icon is-dir", { textContent: "DIR" });
|
|
const name = createElement("span", "sftp-file-name", {
|
|
textContent: entry.name || entry.path || "",
|
|
title: entry.name || entry.path || "",
|
|
});
|
|
let metaLabel = "";
|
|
if (entry.canRead === false) {
|
|
metaLabel = "NO READ";
|
|
} else if (entry.canWrite === false) {
|
|
metaLabel = "READ ONLY";
|
|
}
|
|
const meta = createElement("span", "sftp-file-meta", { textContent: metaLabel });
|
|
row.appendChild(icon);
|
|
row.appendChild(name);
|
|
row.appendChild(meta);
|
|
return row;
|
|
}
|
|
|
|
_modeCanRead(mode) {
|
|
if (!mode || typeof mode !== "string") return true;
|
|
return mode.indexOf("r") !== -1;
|
|
}
|
|
|
|
_modeCanWrite(mode) {
|
|
if (!mode || typeof mode !== "string") return true;
|
|
return mode.indexOf("w") !== -1;
|
|
}
|
|
|
|
_pathSegments(p) {
|
|
const parts = (p || "").split("/").filter(Boolean);
|
|
const segs = [{ label: "/", path: "/" }];
|
|
let acc = "";
|
|
for (let i = 0; i < parts.length; i += 1) {
|
|
acc += "/" + parts[i];
|
|
segs.push({ label: parts[i], path: acc });
|
|
}
|
|
return segs;
|
|
}
|
|
|
|
_parentPath(p) {
|
|
if (!p || p === "/") return "/";
|
|
const trimmed = p.replace(/\/+$/, "");
|
|
const idx = trimmed.lastIndexOf("/");
|
|
return idx <= 0 ? "/" : trimmed.substring(0, idx);
|
|
}
|
|
|
|
_arrayBufferToBase64(buffer) {
|
|
if (!buffer) return "";
|
|
const bytes = new Uint8Array(buffer);
|
|
let binary = "";
|
|
const chunkSize = 0x8000;
|
|
for (let i = 0; i < bytes.length; i += chunkSize) {
|
|
const chunk = bytes.subarray(i, i + chunkSize);
|
|
binary += String.fromCharCode.apply(null, chunk);
|
|
}
|
|
return btoa(binary);
|
|
}
|
|
|
|
/**
|
|
* Builds the xterm.js colour theme.
|
|
* @returns {Object}
|
|
* @private
|
|
*/
|
|
_buildTheme() {
|
|
const themeName =
|
|
(this.app.state.preferences || {}).terminalTheme || "charcoal";
|
|
return window.NexusTerminal.getTerminalTheme(themeName);
|
|
}
|
|
}
|
|
|
|
window.NexusTerminal = window.NexusTerminal || {};
|
|
window.NexusTerminal.TerminalManager = TerminalManager;
|
|
})();
|