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