nahakubuilder/gotermix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working multisession web linux terminal

Browse Source
This commit is contained in:
BlobTheBuilder
2026-05-24 07:44:54 +00:00
parent 5b4803bc49
commit 63dbdf7e6a
5 changed files with 138 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internals/web/app.css
+22
View File
@@ -149,6 +149,9 @@ html, body { height: 100%; background: #0d0f14; color: #e2e8f0;
.tb-btn.tb-danger { background: rgba(239,68,68,0.08); color: #f87171;
border: 1px solid rgba(239,68,68,0.15); }
.tb-btn.tb-danger:hover { background: rgba(239,68,68,0.16); color: #fca5a5; }
.tb-btn.tb-info { background: rgba(59,130,246,0.1); color: #93c5fd;
border: 1px solid rgba(59,130,246,0.2); }
.tb-btn.tb-info:hover { background: rgba(59,130,246,0.18); color: #bfdbfe; }
.tb-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.07); flex-shrink: 0; margin: 0 2px; }
/* ── Toast ── */
@@ -258,6 +261,25 @@ html, body { height: 100%; background: #0d0f14; color: #e2e8f0;
.m-btn.busy .btn-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Info modal ── */
.info-section-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
color: #6ee7b7; font-weight: 700; margin: 14px 0 6px;
}
.info-section-label:first-child { margin-top: 0; }
.info-table {
width: 100%; border-collapse: collapse; font-size: 12px;
}
.info-table tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
.info-table tr:last-child { border-bottom: none; }
.info-table td { padding: 5px 4px; color: #9ca3af; vertical-align: top; }
.info-table td:first-child { white-space: nowrap; padding-right: 16px; color: #e2e8f0; }
kbd {
display: inline-block; padding: 1px 6px;
background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px; font-size: 11px; font-family: inherit; color: #e2e8f0;
}
/* ── Auth modal specifics ── */
.auth-card { padding: 40px 36px; }
.auth-logo { font-size: 22px; font-weight: 700; color: #6ee7b7;
internals/web/app.js
+29 -85
View File
@@ -8,11 +8,10 @@ const TERM_THEME = {
};
// ── Global state ──────────────────────────────────────────────────────
let tabs = [];
let activeTab = null;
let tabCounter = 0;
let isAuthenticated = AUTHED; // updated to true after successful login
let saveTimer = null;
let tabs = [];
let activeTab = null;
let tabCounter = 0;
let saveTimer = null;
// ── Helpers ───────────────────────────────────────────────────────────
function randHexClient(n) {
@@ -48,7 +47,7 @@ function saveWorkspace() {
}
async function _doSaveWorkspace() {
if (!isAuthenticated || !tabs.length) return;
if (!tabs.length) return;
const ws = {
id: WORKSPACE_ID,
tabs: tabs.map(t => ({
@@ -138,12 +137,11 @@ document.addEventListener('keydown', function(e) {
case 'KeyT': e.preventDefault(); newTab(); return;
case 'KeyW': e.preventDefault(); if (activeTab) closeTab(activeTab); return;
case 'KeyX': e.preventDefault(); closePane(); return;
case 'Backslash': e.preventDefault(); splitPane('h'); return;
case 'Minus': e.preventDefault(); splitPane('v'); return;
case 'KeyH': e.preventDefault(); splitPane('h'); return; // Alt+H → side-by-side
case 'KeyV': e.preventDefault(); splitPane('v'); return; // Alt+V → top/bottom
case 'ArrowLeft':
e.preventDefault(); sendToActive('\x1bb'); return;
case 'ArrowRight':
e.preventDefault(); sendToActive('\x1bf'); return;
return; // let xterm pass Ctrl+Arrow to shell readline
}
} else {
if (e.code === 'ArrowLeft') {
@@ -161,10 +159,9 @@ document.addEventListener('keydown', function(e) {
}
}
// Block ALL Ctrl+key browser shortcuts; xterm still gets the event.
// Block browser Ctrl+key defaults (find, save, etc.); xterm still gets event.
if (C && !A && !M) {
e.preventDefault();
if (!S && e.code === 'KeyW') sendToActive('\x17');
return;
}
@@ -234,68 +231,12 @@ function bgClose(evt, id) {
}
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
['upOverlay', 'dlOverlay'].forEach(id => {
['upOverlay', 'dlOverlay', 'infoOverlay'].forEach(id => {
if (!document.getElementById(id).classList.contains('hidden')) closeModal(id);
});
}
});
// ── Auth ───────────────────────────────────────────────────────────────
async function doAuth() {
const username = document.getElementById('fUser').value.trim();
const password = document.getElementById('fPass').value;
const btn = document.getElementById('authBtn');
const errDiv = document.getElementById('authErr');
if (!username || !password) { showAuthErr('Please enter username and password'); return; }
btn.disabled = true; btn.classList.add('busy');
errDiv.classList.remove('show');
const form = new URLSearchParams();
form.append('username', username);
form.append('password', password);
try {
const res = await fetch('/auth', { method: 'POST', body: form,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
const data = await res.json();
if (data.ok) {
isAuthenticated = true;
document.getElementById('authOverlay').classList.add('hidden');
// Load or create workspace after login
const ws = await loadWorkspace();
if (ws && ws.tabs && ws.tabs.length) {
restoreWorkspace(ws);
} else {
newTab();
}
const leaf = activeTab && activeTab.activeLeaf;
if (leaf) leaf.term.focus();
} else {
showAuthErr(data.error || 'Authentication failed');
}
} catch (_) {
showAuthErr('Network error — try again');
} finally {
btn.disabled = false; btn.classList.remove('busy');
}
}
function showAuthErr(msg) {
const e = document.getElementById('authErr');
e.textContent = msg; e.classList.add('show');
document.getElementById('fPass').value = '';
document.getElementById('fPass').focus();
}
document.getElementById('fUser').addEventListener('keydown', e => {
if (e.key === 'Enter') document.getElementById('fPass').focus();
});
document.getElementById('fPass').addEventListener('keydown', e => {
if (e.key === 'Enter') doAuth();
});
// ══════════════════════════════════════════════════════════════════════
// PANE TREE
// ══════════════════════════════════════════════════════════════════════
@@ -394,15 +335,23 @@ function createLeaf(sessionId) {
term.attachCustomKeyEventHandler(evt => {
if (evt.type !== 'keydown') return true;
const C = evt.ctrlKey, S = evt.shiftKey, A = evt.altKey;
// Copy selection
if (C && S && evt.code === 'KeyC') {
const sel = term.getSelection();
if (sel) navigator.clipboard.writeText(sel).then(
() => toast('Copied!', 'ok'), () => toast('Copy failed', 'err'));
return false;
}
// Paste
if (C && evt.code === 'KeyV') { pasteToTerminal(); return false; }
if (C && !S && !A && evt.code === 'KeyW') return false;
if (C && S && evt.code === 'KeyW') return false;
// Block app-level Alt shortcuts from reaching the PTY
if (A && !C) {
if (!S && ['KeyT','KeyW','KeyX','KeyH','KeyV'].includes(evt.code)) return false;
if ( S && (evt.code === 'ArrowLeft' || evt.code === 'ArrowRight')) return false;
}
return true;
});
@@ -440,7 +389,7 @@ function splitPane(dir) {
applyFlex(splitNode);
setupDivider(splitNode);
if (isAuthenticated) connectLeaf(newLeaf);
connectLeaf(newLeaf);
setActiveLeaf(tab, newLeaf);
refreshActiveHighlight(tab);
@@ -592,7 +541,7 @@ function newTab(tabId, sessionId) {
addTabButton(tab);
switchTab(tab);
saveWorkspace();
if (isAuthenticated) connectLeaf(rootLeaf);
connectLeaf(rootLeaf);
return tab;
}
@@ -618,9 +567,7 @@ function restoreTab(tabData) {
tabs.push(tab);
addTabButton(tab);
if (isAuthenticated) {
walkLeaves(root, l => connectLeaf(l));
}
walkLeaves(root, l => connectLeaf(l));
return tab;
}
@@ -762,16 +709,13 @@ function modalFb(id, msg, type) {
}
// ── Bootstrap ──────────────────────────────────────────────────────────
// Terminal page is only served to authenticated users (server redirects
// unauthenticated requests to /login). Load saved workspace or start fresh.
(async function bootstrap() {
if (isAuthenticated) {
document.getElementById('authOverlay').classList.add('hidden');
const ws = await loadWorkspace();
if (ws && ws.tabs && ws.tabs.length) {
restoreWorkspace(ws);
} else {
newTab();
}
const ws = await loadWorkspace();
if (ws && ws.tabs && ws.tabs.length) {
restoreWorkspace(ws);
} else {
setTimeout(() => document.getElementById('fUser').focus(), 80);
newTab();
}
})();
internals/web/shell.html
+70 -30
View File
@@ -12,31 +12,6 @@
</head>
<body>
<!-- ── Auth modal ─────────────────────────────────────────────────── -->
<div class="m-overlay" id="authOverlay">
<div class="m-card">
<div class="auth-card">
<div class="auth-logo"><em>&gt;_</em> GoTermix</div>
<div class="auth-sub">Authentication required</div>
<label class="m-label" for="fUser">Username</label>
<input class="m-input" type="text" id="fUser"
autocomplete="username" placeholder="username" spellcheck="false">
<label class="m-label" for="fPass">Password</label>
<input class="m-input" type="password" id="fPass"
autocomplete="current-password" placeholder="password">
<div class="auth-err" id="authErr"></div>
<button class="auth-btn" id="authBtn" onclick="doAuth()">
<div class="auth-spin"></div>
<span class="btn-text">Sign in</span>
</button>
</div>
</div>
</div>
<!-- ── Upload modal ───────────────────────────────────────────────── -->
<div class="m-overlay hidden" id="upOverlay" onclick="bgClose(event,'upOverlay')">
<div class="m-card">
@@ -122,16 +97,16 @@
<span class="status-label" id="statusLabel">connecting...</span>
</div>
<div class="tb-right">
<!-- Split left/right (Alt+\) -->
<button class="tb-btn" onclick="splitPane('h')" title="Split left/right (Alt+\)">
<!-- Split left/right (Alt+H) -->
<button class="tb-btn" onclick="splitPane('h')" title="Split left/right (Alt+H)">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="18" rx="2"/>
<line x1="12" y1="3" x2="12" y2="21"/>
</svg>
Split H
</button>
<!-- Split top/bottom (Alt+-) -->
<button class="tb-btn" onclick="splitPane('v')" title="Split top/bottom (Alt+-)">
<!-- Split top/bottom (Alt+V) -->
<button class="tb-btn" onclick="splitPane('v')" title="Split top/bottom (Alt+V)">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="18" rx="2"/>
<line x1="2" y1="12" x2="22" y2="12"/>
@@ -155,6 +130,15 @@
</svg>
Link
</button>
<!-- Info / shortcuts -->
<button class="tb-btn tb-info" onclick="openModal('infoOverlay')" title="Keyboard shortcuts &amp; help">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="8" stroke-linecap="round" stroke-width="2.5"/>
<line x1="12" y1="12" x2="12" y2="16"/>
</svg>
Info
</button>
<!-- End Session -->
<button class="tb-btn tb-danger" onclick="endSession()" title="End session — clears saved layout, next open starts fresh">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -183,13 +167,69 @@
</div>
</div>
<!-- ── Info modal ─────────────────────────────────────────────────── -->
<div class="m-overlay hidden" id="infoOverlay" onclick="bgClose(event,'infoOverlay')">
<div class="m-card" style="max-width:520px;">
<div class="m-head">
<span class="m-title">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="8"/><line x1="12" y1="12" x2="12" y2="16"/>
</svg>
GoTermix — Quick Reference
</span>
<button class="m-x" onclick="closeModal('infoOverlay')">&#215;</button>
</div>
<div class="m-body" style="padding:16px 20px 20px;">
<div class="info-section-label">Tabs</div>
<table class="info-table">
<tr><td><kbd>Alt+T</kbd></td><td>New tab</td></tr>
<tr><td><kbd>Alt+W</kbd></td><td>Close active tab</td></tr>
<tr><td><kbd>Alt+Shift+&larr;/&rarr;</kbd></td><td>Switch to previous / next tab</td></tr>
<tr><td>Right-click tab label</td><td>Rename tab</td></tr>
</table>
<div class="info-section-label">Split panes</div>
<table class="info-table">
<tr><td><kbd>Alt+H</kbd></td><td>Split active pane left / right</td></tr>
<tr><td><kbd>Alt+V</kbd></td><td>Split active pane top / bottom</td></tr>
<tr><td><kbd>Alt+X</kbd></td><td>Close active pane</td></tr>
<tr><td>Drag divider</td><td>Resize panes</td></tr>
<tr><td>Click pane</td><td>Focus pane</td></tr>
</table>
<div class="info-section-label">Copy &amp; paste</div>
<table class="info-table">
<tr><td><kbd>Ctrl+Shift+C</kbd></td><td>Copy selection</td></tr>
<tr><td><kbd>Ctrl+V</kbd></td><td>Paste from clipboard</td></tr>
<tr><td>Mouse drag</td><td>Select text</td></tr>
</table>
<div class="info-section-label">Word navigation (shell readline)</div>
<table class="info-table">
<tr><td><kbd>Ctrl+&larr;</kbd></td><td>Word backward</td></tr>
<tr><td><kbd>Ctrl+&rarr;</kbd></td><td>Word forward</td></tr>
</table>
<div class="info-section-label">Session &amp; files</div>
<table class="info-table">
<tr><td>Link button</td><td>Copy shareable workspace URL — open on any device to resume all tabs &amp; splits</td></tr>
<tr><td>End button</td><td>Clear saved layout; next visit starts fresh</td></tr>
<tr><td>Upload button</td><td>Upload file to server (lands in active shell's cwd by default)</td></tr>
<tr><td>Down button</td><td>Download file from server by path</td></tr>
</table>
</div>
</div>
</div>
<!-- ── Toast ──────────────────────────────────────────────────────── -->
<div class="toast" id="toast"></div>
<script>
// Workspace context — injected server-side, consumed by app.js
const WORKSPACE_ID = "[[WORKSPACE_ID]]";
const AUTHED = [[AUTHED]];
</script>
<script src="/static/app.js"></script>
</body>