andy/nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fix for pasting

Browse Source
This commit is contained in:
Andy Dixon
2026-06-02 10:47:59 +01:00
parent 2eed4ea548
commit 74f16bfd0d
3 changed files with 404 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/js/raw.js
+157 -106
View File
@@ -1,19 +1,20 @@
(function() { (function () {
/** /**
* Nexus Terminal — RAW TCP data viewer. * Nexus Terminal — RAW TCP data viewer.
* Provides text, hex, and split display modes for raw socket data, * Provides text, hex, and split display modes for raw socket data,
* along with a send bar, pause/resume, and capture saving. * along with a send bar, pause/resume, and capture saving.
*/ */
const { createElement, escapeHtml, formatTimestamp, formatBytes } = window.NexusTerminal; const { createElement, escapeHtml, formatTimestamp, formatBytes } =
window.NexusTerminal;
/** /**
* Maximum number of data entries retained in the scrollback buffer. * Maximum number of data entries retained in the scrollback buffer.
* @type {number} * @type {number}
*/ */
const MAX_BUFFER_ENTRIES = 5000; const MAX_BUFFER_ENTRIES = 5000;
class RawViewer { class RawViewer {
/** /**
* @param {App} app * @param {App} app
*/ */
@@ -40,52 +41,66 @@ class RawViewer {
if (!container) return; if (!container) return;
const state = { const state = {
mode: 'text', // text | hex | split mode: "text", // text | hex | split
paused: false, paused: false,
buffer: [], buffer: [],
totalBytes: 0, totalBytes: 0,
sendFormat: 'text', // text | hex | escaped sendFormat: "text", // text | hex | escaped
}; };
// ── Toolbar ────────────────────────────────────────────── // ── Toolbar ──────────────────────────────────────────────
const toolbar = createElement('div', 'raw-toolbar'); const toolbar = createElement("div", "raw-toolbar");
// Mode toggle // Mode toggle
const modeGroup = createElement('div', 'raw-mode-group'); const modeGroup = createElement("div", "raw-mode-group");
for (const mode of ['text', 'hex', 'split']) { for (const mode of ["text", "hex", "split"]) {
const btn = createElement('button', `raw-mode-btn ${mode === state.mode ? 'active' : ''}`, { const btn = createElement(
"button",
`raw-mode-btn ${mode === state.mode ? "active" : ""}`,
{
textContent: mode.charAt(0).toUpperCase() + mode.slice(1), textContent: mode.charAt(0).toUpperCase() + mode.slice(1),
dataset: { mode }, dataset: { mode },
}); },
btn.addEventListener('click', () => this._setMode(sessionId, mode)); );
btn.addEventListener("click", () => this._setMode(sessionId, mode));
modeGroup.appendChild(btn); modeGroup.appendChild(btn);
} }
toolbar.appendChild(modeGroup); toolbar.appendChild(modeGroup);
// Controls // Controls
const controls = createElement('div', 'raw-controls'); const controls = createElement("div", "raw-controls");
const pauseBtn = createElement('button', 'btn btn-sm btn-outline raw-pause', { textContent: '⏸ Pause' }); const pauseBtn = createElement(
pauseBtn.addEventListener('click', () => this.togglePause(sessionId)); "button",
"btn btn-sm btn-outline raw-pause",
{ textContent: "⏸ Pause" },
);
pauseBtn.addEventListener("click", () => this.togglePause(sessionId));
controls.appendChild(pauseBtn); controls.appendChild(pauseBtn);
const clearBtn = createElement('button', 'btn btn-sm btn-outline', { textContent: '✕ Clear' }); const clearBtn = createElement("button", "btn btn-sm btn-outline", {
clearBtn.addEventListener('click', () => this.clearBuffer(sessionId)); textContent: "✕ Clear",
});
clearBtn.addEventListener("click", () => this.clearBuffer(sessionId));
controls.appendChild(clearBtn); controls.appendChild(clearBtn);
const saveBtn = createElement('button', 'btn btn-sm btn-outline', { textContent: '💾 Save' }); const saveBtn = createElement("button", "btn btn-sm btn-outline", {
saveBtn.addEventListener('click', () => this.saveCapture(sessionId)); textContent: "💾 Save",
});
saveBtn.addEventListener("click", () => this.saveCapture(sessionId));
controls.appendChild(saveBtn); controls.appendChild(saveBtn);
// Byte counter // Byte counter
const counter = createElement('span', 'raw-counter', { textContent: '0 B' }); const counter = createElement("span", "raw-counter", {
textContent: "0 B",
});
controls.appendChild(counter); controls.appendChild(counter);
toolbar.appendChild(controls); toolbar.appendChild(controls);
container.appendChild(toolbar); container.appendChild(toolbar);
// ── Data display ───────────────────────────────────────── // ── Data display ─────────────────────────────────────────
const display = createElement('div', 'raw-display'); const display = createElement("div", "raw-display");
container.appendChild(display); container.appendChild(display);
// ── Send bar ───────────────────────────────────────────── // ── Send bar ─────────────────────────────────────────────
@@ -116,7 +131,7 @@ class RawViewer {
try { try {
rawStr = atob(payload.data); rawStr = atob(payload.data);
} catch (_) { } catch (_) {
rawStr = payload.data || ''; rawStr = payload.data || "";
} }
const bytes = new Uint8Array(rawStr.length); const bytes = new Uint8Array(rawStr.length);
@@ -125,7 +140,7 @@ class RawViewer {
} }
const entry = { const entry = {
direction: payload.direction || 'recv', // 'send' | 'recv' direction: payload.direction || "recv", // 'send' | 'recv'
timestamp: payload.timestamp ? new Date(payload.timestamp) : new Date(), timestamp: payload.timestamp ? new Date(payload.timestamp) : new Date(),
data: rawStr, data: rawStr,
bytes, bytes,
@@ -158,8 +173,8 @@ class RawViewer {
if (!viewer) return; if (!viewer) return;
viewer.paused = !viewer.paused; viewer.paused = !viewer.paused;
viewer.pauseBtn.textContent = viewer.paused ? '▶ Resume' : '⏸ Pause'; viewer.pauseBtn.textContent = viewer.paused ? "▶ Resume" : "⏸ Pause";
viewer.pauseBtn.classList.toggle('active', viewer.paused); viewer.pauseBtn.classList.toggle("active", viewer.paused);
// On resume, flush any buffered entries // On resume, flush any buffered entries
if (!viewer.paused) { if (!viewer.paused) {
@@ -177,8 +192,8 @@ class RawViewer {
viewer.buffer = []; viewer.buffer = [];
viewer.totalBytes = 0; viewer.totalBytes = 0;
viewer.display.innerHTML = ''; viewer.display.innerHTML = "";
viewer.counter.textContent = '0 B'; viewer.counter.textContent = "0 B";
} }
/** /**
@@ -188,21 +203,21 @@ class RawViewer {
async saveCapture(sessionId) { async saveCapture(sessionId) {
const viewer = this.viewers.get(sessionId); const viewer = this.viewers.get(sessionId);
if (!viewer || viewer.buffer.length === 0) { if (!viewer || viewer.buffer.length === 0) {
this.app.notifications.warning('Nothing to save'); this.app.notifications.warning("Nothing to save");
return; return;
} }
try { try {
const lines = viewer.buffer.map((e) => { const lines = viewer.buffer.map((e) => {
const ts = formatTimestamp(e.timestamp); const ts = formatTimestamp(e.timestamp);
const dir = e.direction === 'send' ? 'TX' : 'RX'; const dir = e.direction === "send" ? "TX" : "RX";
return `[${ts}] [${dir}] ${e.data}`; return `[${ts}] [${dir}] ${e.data}`;
}); });
const content = lines.join('\n'); const content = lines.join("\n");
await window.go.api.Service.SaveSessionCapture(sessionId, content); await window.go.api.Service.SaveSessionCapture(sessionId, content);
this.app.notifications.success('Capture saved'); this.app.notifications.success("Capture saved");
} catch (err) { } catch (err) {
this.app.notifications.error('Save failed: ' + err); this.app.notifications.error("Save failed: " + err);
} }
} }
@@ -214,21 +229,21 @@ class RawViewer {
const viewer = this.viewers.get(sessionId); const viewer = this.viewers.get(sessionId);
if (!viewer) return; if (!viewer) return;
const input = viewer.container.querySelector('.raw-send-input'); const input = viewer.container.querySelector(".raw-send-input");
const formatSelect = viewer.container.querySelector('.raw-send-format'); const formatSelect = viewer.container.querySelector(".raw-send-format");
if (!input) return; if (!input) return;
const rawValue = input.value; const rawValue = input.value;
if (!rawValue) return; if (!rawValue) return;
const format = formatSelect?.value || 'text'; const format = formatSelect?.value || "text";
let dataToSend; let dataToSend;
switch (format) { switch (format) {
case 'hex': case "hex":
dataToSend = this._hexToString(rawValue); dataToSend = this._hexToString(rawValue);
break; break;
case 'escaped': case "escaped":
dataToSend = this._unescapeString(rawValue); dataToSend = this._unescapeString(rawValue);
break; break;
default: default:
@@ -238,21 +253,22 @@ class RawViewer {
try { try {
// For hex/escaped, data is already raw bytes (0-255) so btoa is correct. // For hex/escaped, data is already raw bytes (0-255) so btoa is correct.
// For text mode, UTF-8 encode so non-ASCII characters are transmitted properly. // For text mode, UTF-8 encode so non-ASCII characters are transmitted properly.
const b64 = (format === 'hex' || format === 'escaped') const b64 =
format === "hex" || format === "escaped"
? btoa(dataToSend) ? btoa(dataToSend)
: window.NexusTerminal.utf8ToBase64(dataToSend); : window.NexusTerminal.utf8ToBase64(dataToSend);
await window.go.api.Service.WriteSession(sessionId, b64); await window.go.api.Service.WriteSession(sessionId, b64);
input.value = ''; input.value = "";
// Also show in viewer as sent data // Also show in viewer as sent data
this.handleData({ this.handleData({
sessionID: sessionId, sessionID: sessionId,
data: b64, data: b64,
direction: 'send', direction: "send",
timestamp: new Date().toISOString(), timestamp: new Date().toISOString(),
}); });
} catch (err) { } catch (err) {
this.app.notifications.error('Send failed: ' + err); this.app.notifications.error("Send failed: " + err);
} }
} }
@@ -274,38 +290,48 @@ class RawViewer {
* @private * @private
*/ */
_renderSendBar(sessionId, profile) { _renderSendBar(sessionId, profile) {
const bar = createElement('div', 'raw-send-bar'); const bar = createElement("div", "raw-send-bar");
// Format selector // Format selector
const formatSelect = createElement('select', 'form-select form-select-sm raw-send-format'); const formatSelect = createElement(
for (const [value, label] of [['text', 'Text'], ['hex', 'Hex'], ['escaped', 'Escaped']]) { "select",
const opt = createElement('option', '', { value, textContent: label }); "form-select form-select-sm raw-send-format",
);
for (const [value, label] of [
["text", "Text"],
["hex", "Hex"],
["escaped", "Escaped"],
]) {
const opt = createElement("option", "", { value, textContent: label });
formatSelect.appendChild(opt); formatSelect.appendChild(opt);
} }
bar.appendChild(formatSelect); bar.appendChild(formatSelect);
// Input // Input
const input = createElement('input', 'form-input raw-send-input', { const input = createElement("input", "form-input raw-send-input", {
type: 'text', type: "text",
placeholder: 'Type data to send…', placeholder: "Type data to send…",
}); });
input.addEventListener('keydown', (e) => { input.addEventListener("keydown", (e) => {
if (e.key === 'Enter') this.send(sessionId); if (e.key === "Enter") this.send(sessionId);
}); });
bar.appendChild(input); bar.appendChild(input);
// Quick-insert buttons for common control bytes // Quick-insert buttons for common control bytes
const quickBtns = createElement('div', 'raw-quick-btns'); const quickBtns = createElement("div", "raw-quick-btns");
const controlBytes = [ const controlBytes = [
{ label: 'NUL', value: '\\x00' }, { label: "NUL", value: "\\x00" },
{ label: 'CR', value: '\\r' }, { label: "CR", value: "\\r" },
{ label: 'LF', value: '\\n' }, { label: "LF", value: "\\n" },
{ label: 'ETX', value: '\\x03' }, { label: "ETX", value: "\\x03" },
{ label: 'EOT', value: '\\x04' }, { label: "EOT", value: "\\x04" },
]; ];
for (const cb of controlBytes) { for (const cb of controlBytes) {
const btn = createElement('button', 'btn btn-xs btn-outline', { textContent: cb.label, title: cb.value }); const btn = createElement("button", "btn btn-xs btn-outline", {
btn.addEventListener('click', () => { textContent: cb.label,
title: cb.value,
});
btn.addEventListener("click", () => {
input.value += cb.value; input.value += cb.value;
input.focus(); input.focus();
}); });
@@ -316,22 +342,31 @@ class RawViewer {
// Payload preset dropdown // Payload preset dropdown
const presets = profile?.raw?.payloadPresets || []; const presets = profile?.raw?.payloadPresets || [];
if (presets.length > 0) { if (presets.length > 0) {
const presetSelect = createElement('select', 'form-select form-select-sm raw-preset-select'); const presetSelect = createElement(
const defaultOpt = createElement('option', '', { value: '', textContent: 'Presets…' }); "select",
"form-select form-select-sm raw-preset-select",
);
const defaultOpt = createElement("option", "", {
value: "",
textContent: "Presets…",
});
presetSelect.appendChild(defaultOpt); presetSelect.appendChild(defaultOpt);
for (const ps of presets) { for (const ps of presets) {
const opt = createElement('option', '', { value: ps.payload, textContent: ps.name }); const opt = createElement("option", "", {
value: ps.payload,
textContent: ps.name,
});
opt.dataset.format = ps.format; opt.dataset.format = ps.format;
presetSelect.appendChild(opt); presetSelect.appendChild(opt);
} }
presetSelect.addEventListener('change', () => { presetSelect.addEventListener("change", () => {
if (presetSelect.value) { if (presetSelect.value) {
input.value = presetSelect.value; input.value = presetSelect.value;
const selOpt = presetSelect.selectedOptions[0]; const selOpt = presetSelect.selectedOptions[0];
if (selOpt?.dataset.format) { if (selOpt?.dataset.format) {
formatSelect.value = selOpt.dataset.format; formatSelect.value = selOpt.dataset.format;
} }
presetSelect.value = ''; presetSelect.value = "";
input.focus(); input.focus();
} }
}); });
@@ -339,8 +374,10 @@ class RawViewer {
} }
// Send button // Send button
const sendBtn = createElement('button', 'btn btn-sm btn-primary', { textContent: 'Send' }); const sendBtn = createElement("button", "btn btn-sm btn-primary", {
sendBtn.addEventListener('click', () => this.send(sessionId)); textContent: "Send",
});
sendBtn.addEventListener("click", () => this.send(sessionId));
bar.appendChild(sendBtn); bar.appendChild(sendBtn);
return bar; return bar;
@@ -355,10 +392,10 @@ class RawViewer {
_renderEntry(viewer, entry) { _renderEntry(viewer, entry) {
let el; let el;
switch (viewer.mode) { switch (viewer.mode) {
case 'hex': case "hex":
el = this._renderHexView(entry); el = this._renderHexView(entry);
break; break;
case 'split': case "split":
el = this._renderSplitView(entry, viewer.profile); el = this._renderSplitView(entry, viewer.profile);
break; break;
default: default:
@@ -373,7 +410,7 @@ class RawViewer {
* @private * @private
*/ */
_renderAllEntries(viewer) { _renderAllEntries(viewer) {
viewer.display.innerHTML = ''; viewer.display.innerHTML = "";
for (const entry of viewer.buffer) { for (const entry of viewer.buffer) {
this._renderEntry(viewer, entry); this._renderEntry(viewer, entry);
} }
@@ -388,18 +425,21 @@ class RawViewer {
* @private * @private
*/ */
_renderTextView(entry, profile) { _renderTextView(entry, profile) {
const row = createElement('div', `raw-entry raw-entry-${entry.direction}`); const row = createElement(
"div",
`raw-entry raw-entry-${entry.direction}`,
);
const raw = profile?.raw || {}; const raw = profile?.raw || {};
let prefix = ''; let prefix = "";
if (raw.showTimestamps) { if (raw.showTimestamps) {
prefix += `[${formatTimestamp(entry.timestamp)}] `; prefix += `[${formatTimestamp(entry.timestamp)}] `;
} }
if (raw.showDirection) { if (raw.showDirection) {
prefix += entry.direction === 'send' ? '[TX] ' : '[RX] '; prefix += entry.direction === "send" ? "[TX] " : "[RX] ";
} }
const pre = createElement('pre', 'raw-text'); const pre = createElement("pre", "raw-text");
pre.textContent = prefix + entry.data; pre.textContent = prefix + entry.data;
row.appendChild(pre); row.appendChild(pre);
return row; return row;
@@ -412,8 +452,11 @@ class RawViewer {
* @private * @private
*/ */
_renderHexView(entry) { _renderHexView(entry) {
const row = createElement('div', `raw-entry raw-entry-${entry.direction}`); const row = createElement(
const pre = createElement('pre', 'raw-hex'); "div",
`raw-entry raw-entry-${entry.direction}`,
);
const pre = createElement("pre", "raw-hex");
pre.textContent = this.formatHexDump(entry.bytes); pre.textContent = this.formatHexDump(entry.bytes);
row.appendChild(pre); row.appendChild(pre);
return row; return row;
@@ -427,25 +470,29 @@ class RawViewer {
* @private * @private
*/ */
_renderSplitView(entry, profile) { _renderSplitView(entry, profile) {
const row = createElement('div', `raw-entry raw-entry-split raw-entry-${entry.direction}`); const row = createElement(
"div",
`raw-entry raw-entry-split raw-entry-${entry.direction}`,
);
const raw = profile?.raw || {}; const raw = profile?.raw || {};
// Direction/timestamp header // Direction/timestamp header
const header = createElement('div', 'raw-split-header'); const header = createElement("div", "raw-split-header");
let headerText = ''; let headerText = "";
if (raw.showTimestamps) headerText += formatTimestamp(entry.timestamp) + ' '; if (raw.showTimestamps)
headerText += entry.direction === 'send' ? '▲ TX' : '▼ RX'; headerText += formatTimestamp(entry.timestamp) + " ";
headerText += entry.direction === "send" ? "▲ TX" : "▼ RX";
header.textContent = headerText; header.textContent = headerText;
row.appendChild(header); row.appendChild(header);
// Split panes // Split panes
const panes = createElement('div', 'raw-split-panes'); const panes = createElement("div", "raw-split-panes");
const textPane = createElement('pre', 'raw-text raw-split-text'); const textPane = createElement("pre", "raw-text raw-split-text");
textPane.textContent = entry.data; textPane.textContent = entry.data;
panes.appendChild(textPane); panes.appendChild(textPane);
const hexPane = createElement('pre', 'raw-hex raw-split-hex'); const hexPane = createElement("pre", "raw-hex raw-split-hex");
hexPane.textContent = this.formatHexDump(entry.bytes); hexPane.textContent = this.formatHexDump(entry.bytes);
panes.appendChild(hexPane); panes.appendChild(hexPane);
@@ -467,32 +514,32 @@ class RawViewer {
const chunk = bytes.slice(offset, offset + bytesPerLine); const chunk = bytes.slice(offset, offset + bytesPerLine);
// Offset column // Offset column
const offsetStr = offset.toString(16).padStart(8, '0'); const offsetStr = offset.toString(16).padStart(8, "0");
// Hex column // Hex column
const hexParts = []; const hexParts = [];
for (let i = 0; i < bytesPerLine; i++) { for (let i = 0; i < bytesPerLine; i++) {
if (i < chunk.length) { if (i < chunk.length) {
hexParts.push(chunk[i].toString(16).padStart(2, '0')); hexParts.push(chunk[i].toString(16).padStart(2, "0"));
} else { } else {
hexParts.push(' '); hexParts.push(" ");
} }
// Extra space after 8th byte for readability // Extra space after 8th byte for readability
if (i === 7) hexParts.push(''); if (i === 7) hexParts.push("");
} }
const hexStr = hexParts.join(' '); const hexStr = hexParts.join(" ");
// ASCII column // ASCII column
let ascii = ''; let ascii = "";
for (let i = 0; i < chunk.length; i++) { for (let i = 0; i < chunk.length; i++) {
const b = chunk[i]; const b = chunk[i];
ascii += (b >= 0x20 && b <= 0x7e) ? String.fromCharCode(b) : '.'; ascii += b >= 0x20 && b <= 0x7e ? String.fromCharCode(b) : ".";
} }
lines.push(`${offsetStr} ${hexStr} |${ascii}|`); lines.push(`${offsetStr} ${hexStr} |${ascii}|`);
} }
return lines.join('\n'); return lines.join("\n");
} }
// ── Internal helpers ───────────────────────────────────────────── // ── Internal helpers ─────────────────────────────────────────────
@@ -510,8 +557,8 @@ class RawViewer {
viewer.mode = mode; viewer.mode = mode;
// Update active button // Update active button
viewer.toolbar.querySelectorAll('.raw-mode-btn').forEach((btn) => { viewer.toolbar.querySelectorAll(".raw-mode-btn").forEach((btn) => {
btn.classList.toggle('active', btn.dataset.mode === mode); btn.classList.toggle("active", btn.dataset.mode === mode);
}); });
this._renderAllEntries(viewer); this._renderAllEntries(viewer);
@@ -535,8 +582,8 @@ class RawViewer {
* @private * @private
*/ */
_hexToString(hex) { _hexToString(hex) {
const cleaned = hex.replace(/\s+/g, ''); const cleaned = hex.replace(/\s+/g, "");
let str = ''; let str = "";
for (let i = 0; i < cleaned.length; i += 2) { for (let i = 0; i < cleaned.length; i += 2) {
str += String.fromCharCode(parseInt(cleaned.substring(i, i + 2), 16)); str += String.fromCharCode(parseInt(cleaned.substring(i, i + 2), 16));
} }
@@ -552,23 +599,27 @@ class RawViewer {
_unescapeString(str) { _unescapeString(str) {
return str.replace(/\\(n|r|t|0|x[0-9a-fA-F]{2}|\\)/g, (match, seq) => { return str.replace(/\\(n|r|t|0|x[0-9a-fA-F]{2}|\\)/g, (match, seq) => {
switch (seq) { switch (seq) {
case 'n': return '\n'; case "n":
case 'r': return '\r'; return "\n";
case 't': return '\t'; case "r":
case '0': return '\0'; return "\r";
case '\\': return '\\'; case "t":
return "\t";
case "0":
return "\0";
case "\\":
return "\\";
default: default:
// \\xHH // \\xHH
if (seq.startsWith('x')) { if (seq.startsWith("x")) {
return String.fromCharCode(parseInt(seq.slice(1), 16)); return String.fromCharCode(parseInt(seq.slice(1), 16));
} }
return match; return match;
} }
}); });
} }
} }
window.NexusTerminal = window.NexusTerminal || {};
window.NexusTerminal.RawViewer = RawViewer;
window.NexusTerminal = window.NexusTerminal || {};
window.NexusTerminal.RawViewer = RawViewer;
})(); })();
frontend/src/js/terminal.js
+1 -1
View File
@@ -14,7 +14,7 @@
*/ */
function utf8ToBase64(str) { function utf8ToBase64(str) {
const bytes = new TextEncoder().encode(str); const bytes = new TextEncoder().encode(str);
let binary = ''; let binary = "";
for (let i = 0; i < bytes.length; i++) { for (let i = 0; i < bytes.length; i++) {
binary += String.fromCharCode(bytes[i]); binary += String.fromCharCode(bytes[i]);
} }
frontend/src/js/utils.js
+1 -1
View File
@@ -171,7 +171,7 @@
*/ */
function utf8ToBase64(str) { function utf8ToBase64(str) {
const bytes = new TextEncoder().encode(str); const bytes = new TextEncoder().encode(str);
let binary = ''; let binary = "";
for (let i = 0; i < bytes.length; i++) { for (let i = 0; i < bytes.length; i++) {
binary += String.fromCharCode(bytes[i]); binary += String.fromCharCode(bytes[i]);
} }