451 lines
17 KiB
HTML
451 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>screen</title>
|
||
<style>
|
||
/* Catppuccin Mocha palette (mirrors base.css) */
|
||
:root {
|
||
--base: #1e1e2e;
|
||
--mantle: #181825;
|
||
--crust: #11111b;
|
||
--text: #cdd6f4;
|
||
--subtext0:#a6adc8;
|
||
--surface0:#313244;
|
||
--surface1:#45475a;
|
||
--blue: #89b4fa;
|
||
--red: #f38ba8;
|
||
--green: #a6e3a1;
|
||
--yellow: #f9e2af;
|
||
}
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body { height: 100%; background: var(--base); color: var(--text);
|
||
font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
|
||
font-size: 14px; }
|
||
#toolbar {
|
||
display: flex; align-items: center; gap: 0.75rem;
|
||
padding: 0.4rem 0.75rem; background: var(--mantle);
|
||
border-bottom: 1px solid var(--surface0);
|
||
}
|
||
#toolbar a { color: var(--blue); text-decoration: none; font-size: 0.85rem; }
|
||
#toolbar a:hover { text-decoration: underline; }
|
||
#status { margin-left: auto; font-size: 0.75rem; color: var(--subtext0); }
|
||
#status.connected { color: var(--green); }
|
||
#status.error { color: var(--red); }
|
||
#debug-log {
|
||
position: fixed; bottom: 0; left: 0; right: 0; max-height: 40vh;
|
||
overflow-y: auto; background: rgba(17,17,27,0.95);
|
||
border-top: 1px solid var(--surface1);
|
||
font-size: 0.72rem; font-family: ui-monospace, monospace;
|
||
padding: 0.4rem 0.6rem; z-index: 100;
|
||
display: none; /* hidden by default; toggled by toolbar button */
|
||
}
|
||
#debug-log .dbg-line { color: var(--subtext0); margin: 1px 0; white-space: pre; }
|
||
#debug-log .dbg-line.err { color: var(--red); }
|
||
#debug-log .dbg-line.ok { color: var(--green); }
|
||
#debug-log .dbg-line.send { color: var(--blue); }
|
||
#canvas-wrap {
|
||
display: flex; justify-content: center; align-items: flex-start;
|
||
width: 100%; height: calc(100% - 36px); overflow: auto;
|
||
background: var(--crust);
|
||
}
|
||
canvas { display: block; cursor: default; }
|
||
#msg {
|
||
position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
|
||
background: var(--surface0); color: var(--yellow); border-radius: 6px;
|
||
padding: 0.4rem 0.9rem; font-size: 0.8rem;
|
||
opacity: 0; transition: opacity 0.3s;
|
||
pointer-events: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="toolbar">
|
||
<strong>🖥 screen</strong>
|
||
<a href="/" title="back to agent page">← agent</a>
|
||
<button id="debug-toggle" title="Toggle RFB debug log"
|
||
style="margin-left:0.5rem;padding:0.15rem 0.5rem;font-size:0.72rem;
|
||
background:var(--surface0);color:var(--subtext0);border:1px solid var(--surface1);
|
||
border-radius:4px;cursor:pointer;">debug</button>
|
||
<span id="status">connecting…</span>
|
||
</div>
|
||
<div id="canvas-wrap"><canvas id="c"></canvas></div>
|
||
<div id="msg"></div>
|
||
<div id="debug-log"></div>
|
||
|
||
<script>
|
||
// Minimal RFB-over-WebSocket renderer.
|
||
// Connects to /screen/ws on the same host; the harness relays raw
|
||
// RFB bytes to the VNC server running inside the container.
|
||
//
|
||
// This is a deliberately thin implementation — enough to display the
|
||
// desktop and forward pointer + keyboard events. For a production-grade
|
||
// viewer, replace with noVNC (issue #52 vendors the full bundle).
|
||
|
||
(function () {
|
||
'use strict';
|
||
|
||
const canvas = document.getElementById('c');
|
||
const ctx = canvas.getContext('2d');
|
||
const status = document.getElementById('status');
|
||
const msg = document.getElementById('msg');
|
||
const debugLog = document.getElementById('debug-log');
|
||
const debugBtn = document.getElementById('debug-toggle');
|
||
|
||
// --- Debug log ---
|
||
let debugVisible = false;
|
||
debugBtn.addEventListener('click', () => {
|
||
debugVisible = !debugVisible;
|
||
debugLog.style.display = debugVisible ? 'block' : 'none';
|
||
debugBtn.style.color = debugVisible ? 'var(--green)' : 'var(--subtext0)';
|
||
});
|
||
|
||
function hex(bytes) {
|
||
return Array.from(bytes).map(b => b.toString(16).padStart(2,'0')).join(' ');
|
||
}
|
||
|
||
function dbg(text, cls) {
|
||
console.log('[rfb]', text);
|
||
const line = document.createElement('div');
|
||
line.className = 'dbg-line' + (cls ? ' ' + cls : '');
|
||
line.textContent = text;
|
||
debugLog.appendChild(line);
|
||
debugLog.scrollTop = debugLog.scrollHeight;
|
||
}
|
||
|
||
function setStatus(text, cls) {
|
||
status.textContent = text;
|
||
status.className = cls || '';
|
||
if (cls === 'error') dbg('ERROR: ' + text, 'err');
|
||
}
|
||
|
||
function flash(text) {
|
||
msg.textContent = text;
|
||
msg.style.opacity = '1';
|
||
setTimeout(() => { msg.style.opacity = '0'; }, 2500);
|
||
}
|
||
|
||
// --- WebSocket connection ---
|
||
const proto = location.protocol === 'https:' ? 'wss' : 'ws';
|
||
const ws = new WebSocket(`${proto}://${location.host}/screen/ws`);
|
||
ws.binaryType = 'arraybuffer';
|
||
|
||
ws.onopen = () => { dbg('WebSocket open — starting RFB handshake', 'ok'); setStatus('handshaking…'); };
|
||
ws.onerror = () => setStatus('connection error', 'error');
|
||
ws.onclose = (e) => {
|
||
setStatus(`disconnected (${e.code})`, 'error');
|
||
flash('VNC disconnected — reload to reconnect');
|
||
};
|
||
|
||
// Accumulate received bytes in a simple ring queue
|
||
const chunks = [];
|
||
let totalBytes = 0;
|
||
|
||
ws.onmessage = (ev) => {
|
||
chunks.push(new Uint8Array(ev.data));
|
||
totalBytes += ev.data.byteLength;
|
||
processRfb();
|
||
};
|
||
|
||
// --- Minimal RFB state machine ---
|
||
// We implement just enough to handshake and receive FramebufferUpdate
|
||
// rectangles encoded as Raw (encoding 0). Other encodings are skipped.
|
||
// Keyboard and pointer events are forwarded.
|
||
|
||
let state = 'version';
|
||
let fbW = 0, fbH = 0;
|
||
let pixelFormat = null; // set after ServerInit
|
||
let updateRects = 0;
|
||
|
||
// Drain bytes from the queue into a flat buffer view
|
||
function drainTo(n) {
|
||
if (totalBytes < n) return null;
|
||
const out = new Uint8Array(n);
|
||
let off = 0;
|
||
while (off < n) {
|
||
const c = chunks[0];
|
||
const take = Math.min(c.length, n - off);
|
||
out.set(c.subarray(0, take), off);
|
||
off += take;
|
||
if (take === c.length) {
|
||
chunks.shift();
|
||
} else {
|
||
chunks[0] = c.subarray(take);
|
||
}
|
||
}
|
||
totalBytes -= n;
|
||
return out;
|
||
}
|
||
|
||
function send(data) {
|
||
if (ws.readyState === WebSocket.OPEN) {
|
||
const arr = data instanceof Uint8Array ? data : new Uint8Array(data);
|
||
dbg('→ send [' + arr.length + 'b]: ' + hex(arr.slice(0, 32)) + (arr.length > 32 ? '…' : ''), 'send');
|
||
ws.send(data);
|
||
}
|
||
}
|
||
|
||
function u32be(b, o) { return ((b[o]<<24)|(b[o+1]<<16)|(b[o+2]<<8)|b[o+3])>>>0; }
|
||
function u16be(b, o) { return ((b[o]<<8)|b[o+1])>>>0; }
|
||
|
||
function processRfb() {
|
||
while (true) {
|
||
if (!tryStep()) break;
|
||
}
|
||
}
|
||
|
||
function tryStep() {
|
||
switch (state) {
|
||
case 'version': {
|
||
const b = drainTo(12);
|
||
if (!b) return false;
|
||
dbg('← server version: ' + new TextDecoder().decode(b).replace('\n','\\n'));
|
||
// Send back same version (RFB 003.008)
|
||
send(new TextEncoder().encode('RFB 003.008\n'));
|
||
state = 'security-types';
|
||
return true;
|
||
}
|
||
case 'security-types': {
|
||
const b = drainTo(1);
|
||
if (!b) return false;
|
||
const n = b[0];
|
||
dbg('← security-types: count=' + n + (n === 0 ? ' (server error!)' : ''));
|
||
if (n === 0) { setStatus('server sent 0 security types', 'error'); return false; }
|
||
const types = drainTo(n);
|
||
if (!types) { chunks.unshift(b); totalBytes += 1; return false; }
|
||
dbg('← security-types offered: [' + Array.from(types).join(', ') + ']');
|
||
// Prefer type 1 (None), then type 19 (VeNCrypt — used by neatvnc/weston
|
||
// even with --disable-transport-layer-security), else first offered.
|
||
let prefer;
|
||
if (types.indexOf(1) !== -1) prefer = 1; // plain None
|
||
else if (types.indexOf(19) !== -1) prefer = 19; // VeNCrypt
|
||
else prefer = types[0];
|
||
dbg('→ choosing security type ' + prefer +
|
||
(prefer === 1 ? ' (None)' : prefer === 19 ? ' (VeNCrypt)' : prefer === 2 ? ' (VncAuth)' : ''));
|
||
send(new Uint8Array([prefer]));
|
||
if (prefer === 1) state = 'security-result';
|
||
else if (prefer === 19) state = 'vencrypt-version';
|
||
else state = 'security-vnc-challenge';
|
||
return true;
|
||
}
|
||
case 'security-vnc-challenge': {
|
||
// VNC auth (type 2): we don't have the password, so send zeros.
|
||
// This will fail for password-protected servers; fine for our
|
||
// weston VNC which uses None via VeNCrypt.
|
||
const b = drainTo(16);
|
||
if (!b) return false;
|
||
dbg('← vnc-challenge (16 bytes): ' + hex(b));
|
||
send(new Uint8Array(16));
|
||
state = 'security-result';
|
||
return true;
|
||
}
|
||
// ── VeNCrypt (type 19) sub-handshake ───────────────────────────────
|
||
// neatvnc (weston VNC backend) uses VeNCrypt as the outer type even
|
||
// with --disable-transport-layer-security, offering sub-type 1 (None).
|
||
case 'vencrypt-version': {
|
||
// Server sends: major (u8), minor (u8) — e.g. 0, 2
|
||
const b = drainTo(2);
|
||
if (!b) return false;
|
||
dbg('← VeNCrypt version: ' + b[0] + '.' + b[1]);
|
||
// Echo same version back
|
||
send(new Uint8Array([b[0], b[1]]));
|
||
state = 'vencrypt-subtypes';
|
||
return true;
|
||
}
|
||
case 'vencrypt-subtypes': {
|
||
// Server sends: nSubtypes (u8), then nSubtypes × u32 sub-type ids
|
||
const nb = drainTo(1);
|
||
if (!nb) return false;
|
||
const nSub = nb[0];
|
||
dbg('← VeNCrypt nSubtypes=' + nSub);
|
||
const raw = drainTo(nSub * 4);
|
||
if (!raw) { chunks.unshift(nb); totalBytes += 1; return false; }
|
||
// Build sub-type array from big-endian u32s
|
||
const subs = [];
|
||
for (let i = 0; i < nSub; i++) subs.push(u32be(raw, i * 4));
|
||
dbg('← VeNCrypt sub-types: [' + subs.join(', ') + ']');
|
||
// Prefer sub-type 1 (VeNCrypt None) — no TLS, no password.
|
||
// Fall back to first offered.
|
||
const sub = subs.includes(1) ? 1 : subs[0];
|
||
dbg('→ choosing VeNCrypt sub-type ' + sub);
|
||
// Send chosen sub-type as big-endian u32
|
||
send(new Uint8Array([sub>>>24, (sub>>>16)&0xff, (sub>>>8)&0xff, sub&0xff]));
|
||
state = 'vencrypt-accept';
|
||
return true;
|
||
}
|
||
case 'vencrypt-accept': {
|
||
// Server sends 1 byte: 1=accepted, 0=refused
|
||
const b = drainTo(1);
|
||
if (!b) return false;
|
||
dbg('← VeNCrypt accept byte: ' + b[0] + (b[0] === 1 ? ' (ok)' : ' (REFUSED)'));
|
||
if (b[0] !== 1) { setStatus('VeNCrypt sub-type refused', 'error'); return false; }
|
||
// Sub-type 1 (None): proceed to SecurityResult
|
||
state = 'security-result';
|
||
return true;
|
||
}
|
||
// ──────────────────────────────────────────────────────────────────
|
||
case 'security-result': {
|
||
const b = drainTo(4);
|
||
if (!b) return false;
|
||
const code = u32be(b, 0);
|
||
dbg('← security-result: ' + code + ' (bytes: ' + hex(b) + ')' + (code === 0 ? ' ✓' : ' FAIL'), code === 0 ? 'ok' : 'err');
|
||
if (code !== 0) { setStatus('auth failed (code ' + code + ')', 'error'); return false; }
|
||
// ClientInit: shared flag = 1
|
||
send(new Uint8Array([1]));
|
||
state = 'server-init';
|
||
return true;
|
||
}
|
||
case 'server-init': {
|
||
const b = drainTo(24);
|
||
if (!b) return false;
|
||
fbW = u16be(b, 0); fbH = u16be(b, 1);
|
||
// pixel format: bpp=b[4], depth=b[5], big-endian=b[6], true-colour=b[7]
|
||
// red/green/blue max/shift at b[8..17]
|
||
pixelFormat = {
|
||
bpp: b[4], depth: b[5], bigEndian: b[6], trueColour: b[7],
|
||
redMax: u16be(b, 8), greenMax: u16be(b, 10), blueMax: u16be(b, 12),
|
||
redShift: b[14], greenShift: b[15], blueShift: b[16],
|
||
bytesPerPixel: b[4] / 8,
|
||
};
|
||
const nameLen = u32be(b, 20);
|
||
const nameBytes = drainTo(nameLen);
|
||
if (!nameBytes) { chunks.unshift(b); totalBytes += 24; return false; }
|
||
dbg('← server-init: ' + fbW + 'x' + fbH + ' bpp=' + pixelFormat.bpp, 'ok');
|
||
canvas.width = fbW;
|
||
canvas.height = fbH;
|
||
setStatus('connected', 'connected');
|
||
// Request full framebuffer update
|
||
requestUpdate(0, 0, 0, fbW, fbH);
|
||
state = 'normal';
|
||
return true;
|
||
}
|
||
case 'normal': {
|
||
const b = drainTo(1);
|
||
if (!b) return false;
|
||
const msgType = b[0];
|
||
if (msgType === 0) {
|
||
// FramebufferUpdate
|
||
const hdr = drainTo(3);
|
||
if (!hdr) { chunks.unshift(b); totalBytes += 1; return false; }
|
||
drainTo(1); // padding (already consumed with hdr? no — hdr is 3 bytes after the type)
|
||
// Actually: message type (1) + padding (1) + nRects (2) = 4 bytes total after type byte
|
||
// Let's re-do: type byte consumed, then 1 pad + 2 nRects = 3 bytes
|
||
updateRects = u16be(hdr, 1);
|
||
state = 'rect-header';
|
||
} else if (msgType === 2) {
|
||
// Bell: ignore
|
||
} else if (msgType === 3) {
|
||
// ServerCutText
|
||
const hdr = drainTo(7);
|
||
if (!hdr) { chunks.unshift(b); totalBytes += 1; return false; }
|
||
const len = u32be(hdr, 3);
|
||
const text = drainTo(len);
|
||
if (!text) { chunks.unshift(b); totalBytes += 1 + 7; return false; }
|
||
}
|
||
return true;
|
||
}
|
||
case 'rect-header': {
|
||
if (updateRects === 0) { state = 'normal'; requestUpdate(1, 0, 0, fbW, fbH); return true; }
|
||
const b = drainTo(12);
|
||
if (!b) return false;
|
||
const x = u16be(b, 0), y = u16be(b, 2), w = u16be(b, 4), h = u16be(b, 6);
|
||
const enc = (b[8]<<24|b[9]<<16|b[10]<<8|b[11])>>>0;
|
||
if (enc === 0 && pixelFormat) {
|
||
const bytes = w * h * pixelFormat.bytesPerPixel;
|
||
const pixels = drainTo(bytes);
|
||
if (!pixels) { chunks.unshift(b); totalBytes += 12; return false; }
|
||
drawRaw(x, y, w, h, pixels);
|
||
}
|
||
updateRects--;
|
||
return true;
|
||
}
|
||
default: return false;
|
||
}
|
||
}
|
||
|
||
function drawRaw(x, y, w, h, data) {
|
||
if (!pixelFormat || w === 0 || h === 0) return;
|
||
const bpp = pixelFormat.bytesPerPixel;
|
||
const img = ctx.createImageData(w, h);
|
||
const d = img.data;
|
||
const rs = pixelFormat.redShift, gs = pixelFormat.greenShift, bs = pixelFormat.blueShift;
|
||
for (let i = 0, o = 0; i < w * h; i++, o += bpp) {
|
||
let px = 0;
|
||
if (bpp === 4) px = pixelFormat.bigEndian
|
||
? (data[o]<<24|data[o+1]<<16|data[o+2]<<8|data[o+3])>>>0
|
||
: (data[o+3]<<24|data[o+2]<<16|data[o+1]<<8|data[o])>>>0;
|
||
else if (bpp === 2) px = pixelFormat.bigEndian
|
||
? (data[o]<<8|data[o+1])>>>0 : (data[o+1]<<8|data[o])>>>0;
|
||
else px = data[o];
|
||
d[i*4] = (px >> rs) & pixelFormat.redMax;
|
||
d[i*4+1] = (px >> gs) & pixelFormat.greenMax;
|
||
d[i*4+2] = (px >> bs) & pixelFormat.blueMax;
|
||
d[i*4+3] = 255;
|
||
}
|
||
ctx.putImageData(img, x, y);
|
||
}
|
||
|
||
function requestUpdate(incremental, x, y, w, h) {
|
||
const b = new Uint8Array(10);
|
||
b[0] = 3; b[1] = incremental;
|
||
b[2] = x>>8; b[3] = x&0xff;
|
||
b[4] = y>>8; b[5] = y&0xff;
|
||
b[6] = w>>8; b[7] = w&0xff;
|
||
b[8] = h>>8; b[9] = h&0xff;
|
||
send(b);
|
||
}
|
||
|
||
// --- Input forwarding ---
|
||
canvas.addEventListener('mousemove', sendPointer);
|
||
canvas.addEventListener('mousedown', sendPointer);
|
||
canvas.addEventListener('mouseup', sendPointer);
|
||
|
||
function sendPointer(ev) {
|
||
const r = canvas.getBoundingClientRect();
|
||
const x = Math.max(0, Math.min(fbW-1, ev.clientX - r.left));
|
||
const y = Math.max(0, Math.min(fbH-1, ev.clientY - r.top));
|
||
let mask = 0;
|
||
if (ev.buttons & 1) mask |= 1;
|
||
if (ev.buttons & 4) mask |= 2;
|
||
if (ev.buttons & 2) mask |= 4;
|
||
const b = new Uint8Array(6);
|
||
b[0] = 5; b[1] = mask;
|
||
b[2] = x>>8; b[3] = x&0xff;
|
||
b[4] = y>>8; b[5] = y&0xff;
|
||
send(b);
|
||
}
|
||
|
||
document.addEventListener('keydown', (ev) => sendKey(ev, 1));
|
||
document.addEventListener('keyup', (ev) => sendKey(ev, 0));
|
||
|
||
function sendKey(ev, down) {
|
||
ev.preventDefault();
|
||
const key = rfbKeysym(ev);
|
||
const b = new Uint8Array(8);
|
||
b[0] = 4; b[1] = down; b[2] = 0; b[3] = 0;
|
||
b[4] = key>>24; b[5] = (key>>16)&0xff; b[6] = (key>>8)&0xff; b[7] = key&0xff;
|
||
send(b);
|
||
}
|
||
|
||
function rfbKeysym(ev) {
|
||
// Map common keys to X11 keysym values
|
||
const map = {
|
||
'BackSpace': 0xff08, 'Tab': 0xff09, 'Enter': 0xff0d, 'Escape': 0xff1b,
|
||
'Delete': 0xffff, 'Home': 0xff50, 'End': 0xff57, 'PageUp': 0xff55,
|
||
'PageDown': 0xff56, 'ArrowLeft': 0xff51, 'ArrowUp': 0xff52,
|
||
'ArrowRight': 0xff53, 'ArrowDown': 0xff54,
|
||
'Shift': 0xffe1, 'Control': 0xffe3, 'Alt': 0xffe9, 'Meta': 0xffe7,
|
||
'F1': 0xffbe, 'F2': 0xffbf, 'F3': 0xffc0, 'F4': 0xffc1,
|
||
'F5': 0xffc2, 'F6': 0xffc3, 'F7': 0xffc4, 'F8': 0xffc5,
|
||
'F9': 0xffc6, 'F10': 0xffc7, 'F11': 0xffc8, 'F12': 0xffc9,
|
||
};
|
||
if (map[ev.key]) return map[ev.key];
|
||
if (ev.key.length === 1) return ev.key.codePointAt(0);
|
||
return 0;
|
||
}
|
||
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|