-
-
Pick an existing session or create a new one. Sessions persist after you close the tab.
-
-
-
+
+
+
+ Pick a session, or create one above.
+
+
-
@@ -154,7 +217,7 @@
p2.className = 'lobby-sub';
p2.textContent = 'Authentik logs you in; access here requires an OS-user mapping in /etc/ttyd-user-map. Ask Viktor to add one.';
lobby.appendChild(p2);
- lobby.classList.add('visible');
+ lobby.classList.add('visible', 'access-denied');
document.title = 'access denied';
}
@@ -178,19 +241,24 @@
if (!validArg) {
// ============================================================
- // LOBBY MODE — no valid ?arg=, show session picker
+ // LOBBY MODE — no valid ?arg=, render sidebar + iframe shell
// ============================================================
document.getElementById('terminal').classList.add('hidden');
document.getElementById('paste-btn').classList.add('hidden');
document.getElementById('img-btn').classList.add('hidden');
document.getElementById('lobby').classList.add('visible');
- document.title = 'tmux sessions (' + whoami.osUser + ')';
+ const baseTitle = 'tmux sessions (' + whoami.osUser + ')';
+ document.title = baseTitle;
document.querySelector('#lobby .lobby-sub').textContent =
'Logged in as ' + whoami.osUser + ' (' + whoami.authentik + '). Sessions are kernel-isolated per Unix user; you only see your own.';
const listEl = document.getElementById('session-list');
const newNameEl = document.getElementById('new-name');
const newBtnEl = document.getElementById('new-btn');
+ const frameEl = document.getElementById('session-frame');
+ const emptyEl = document.getElementById('lobby-empty');
+
+ let currentActive = null;
function relativeTime(epochSec) {
if (!epochSec) return '';
@@ -201,9 +269,38 @@
return Math.floor(diff / 86400) + 'd ago';
}
- function openSession(name) {
+ function updateActiveCard() {
+ listEl.querySelectorAll('.session-card').forEach(c => {
+ if (c.dataset.name === currentActive) c.classList.add('active');
+ else c.classList.remove('active');
+ });
+ }
+
+ function activateSession(name) {
if (!NAME_RE.test(name)) { showToast('Invalid name', 'error'); return; }
- location.search = '?arg=' + encodeURIComponent(name);
+ if (currentActive === name) { updateActiveCard(); return; }
+ currentActive = name;
+ emptyEl.classList.add('hidden');
+ frameEl.classList.remove('hidden');
+ frameEl.src = '/?arg=' + encodeURIComponent(name);
+ if (location.hash.slice(1) !== name) {
+ history.replaceState(null, '', '#' + name);
+ }
+ document.title = 'tmux: ' + whoami.osUser + '/' + name;
+ updateActiveCard();
+ }
+
+ function deactivateSession() {
+ if (!currentActive && frameEl.classList.contains('hidden')) return;
+ currentActive = null;
+ frameEl.classList.add('hidden');
+ emptyEl.classList.remove('hidden');
+ frameEl.src = 'about:blank';
+ if (location.hash) {
+ history.replaceState(null, '', location.pathname + location.search);
+ }
+ document.title = baseTitle;
+ updateActiveCard();
}
async function killSession(name) {
@@ -220,6 +317,7 @@
} else {
showToast('Kill failed: HTTP ' + resp.status, 'error');
}
+ if (currentActive === name) deactivateSession();
renderLobby();
} catch (err) {
showToast('Kill error: ' + err.message, 'error');
@@ -229,6 +327,11 @@
function renderCard(s) {
const card = document.createElement('div');
card.className = 'session-card';
+ card.dataset.name = s.name;
+ card.setAttribute('role', 'button');
+ card.setAttribute('tabindex', '0');
+ card.setAttribute('aria-label', 'Activate session ' + s.name);
+ if (s.name === currentActive) card.classList.add('active');
const meta = document.createElement('div');
meta.className = 'session-meta';
@@ -239,24 +342,30 @@
const detail = document.createElement('div');
detail.className = 'session-detail' + (s.attached > 0 ? ' attached' : '');
const attachedText = s.attached > 0 ? (s.attached + ' attached') : 'idle';
- detail.textContent = attachedText + ' · last activity ' + relativeTime(s.lastActivity);
+ detail.textContent = attachedText + ' · ' + relativeTime(s.lastActivity);
meta.appendChild(detail);
card.appendChild(meta);
const actions = document.createElement('div');
actions.className = 'session-actions';
- const openBtn = document.createElement('button');
- openBtn.className = 'open';
- openBtn.textContent = 'Open';
- openBtn.onclick = () => openSession(s.name);
- actions.appendChild(openBtn);
const killBtn = document.createElement('button');
killBtn.className = 'kill';
killBtn.textContent = 'Kill';
- killBtn.onclick = () => killSession(s.name);
+ killBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ killSession(s.name);
+ });
actions.appendChild(killBtn);
card.appendChild(actions);
+ card.addEventListener('click', () => activateSession(s.name));
+ card.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ activateSession(s.name);
+ }
+ });
+
return card;
}
@@ -269,9 +378,12 @@
return;
}
const sessions = await resp.json();
+ if (currentActive && !sessions.some(s => s.name === currentActive)) {
+ deactivateSession();
+ }
clearChildren(listEl);
if (sessions.length === 0) {
- listEl.appendChild(emptyState('No tmux sessions. Create one above.'));
+ listEl.appendChild(emptyState('No sessions yet.'));
return;
}
sessions.sort((a, b) => b.lastActivity - a.lastActivity);
@@ -288,14 +400,29 @@
showToast('Name must match ^[a-zA-Z0-9_-]{1,32}$', 'error', 4000);
return;
}
- openSession(name);
+ newNameEl.value = '';
+ activateSession(name);
});
newNameEl.addEventListener('keydown', (e) => {
if (e.key === 'Enter') newBtnEl.click();
});
+ window.addEventListener('hashchange', () => {
+ const hash = location.hash.slice(1);
+ if (hash && NAME_RE.test(hash)) {
+ if (hash !== currentActive) activateSession(hash);
+ } else if (currentActive) {
+ deactivateSession();
+ }
+ });
+
renderLobby();
setInterval(renderLobby, 5000);
+
+ const initialHash = location.hash.slice(1);
+ if (initialHash && NAME_RE.test(initialHash)) {
+ activateSession(initialHash);
+ }
return;
}