glad-web 1.0.29 → 1.0.30

package/lib/web/schedules.js

@@ -0,0 +1,245 @@
+        async function ensureScheduleTools() {
+            if (scheduleTools.length) return;
+            const res = await fetchWithTimeout('/api/tools');
+            scheduleTools = await res.json();
+        }
+
+        function defaultSchedule() {
+            return {
+                id: null,
+                name: 'Scheduled Task',
+                enabled: true,
+                schedule: { time: '09:00', weekdays: [1, 2, 3, 4, 5] },
+                target: { toolKey: (scheduleTools[0] && scheduleTools[0].key) || 'demo', workingDirectory: '' },
+                steps: [
+                    { type: 'sleep', seconds: 60 },
+                    { type: 'sendText', text: 'hello' },
+                    { type: 'sleep', seconds: 1 },
+                    { type: 'sendKey', key: 'enter' },
+                    { type: 'sleep', seconds: 60 },
+                    { type: 'closeSession' }
+                ]
+            };
+        }
+
+        async function showScheduleModal(job = null) {
+            try {
+                await ensureScheduleTools();
+                loadAppConfig();
+            } catch (e) {
+                alert('Failed to load tools');
+                return;
+            }
+
+            const data = job || defaultSchedule();
+            editingScheduleId = data.id || null;
+            editingSteps = (data.steps || []).map(step => ({ ...step }));
+            selectedWeekdays = [...(data.schedule.weekdays || [1, 2, 3, 4, 5])];
+            document.getElementById('schedule-modal-title').textContent = editingScheduleId ? 'Edit Schedule' : 'New Schedule';
+            document.getElementById('schedule-name').value = data.name || 'Scheduled Task';
+            document.getElementById('schedule-cwd').value = data.target.workingDirectory || '';
+            document.getElementById('schedule-time').value = data.schedule.time || '09:00';
+
+            const toolSelect = document.getElementById('schedule-tool');
+            toolSelect.innerHTML = scheduleTools.map(t => `<option value="${escapeHtml(t.key)}">${escapeHtml(t.displayName)}</option>`).join('');
+            const requestedTool = data.target.toolKey || '';
+            toolSelect.value = scheduleTools.some(t => t.key === requestedTool) ? requestedTool : ((scheduleTools[0] && scheduleTools[0].key) || 'demo');
+            renderWeekdays();
+            renderScheduleSteps();
+            document.getElementById('schedule-modal-overlay').style.display = 'flex';
+        }
+
+        function closeScheduleModal(e) {
+            if (!e || e.target.id === 'schedule-modal-overlay') {
+                document.getElementById('schedule-modal-overlay').style.display = 'none';
+            }
+        }
+
+        function renderWeekdays() {
+            const labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+            document.getElementById('schedule-weekdays').innerHTML = labels.map((label, day) => {
+                const active = selectedWeekdays.includes(day);
+                return `<button type="button" class="weekday-btn ${active ? 'active' : ''}" onclick="toggleWeekday(${day})">${label}</button>`;
+            }).join('');
+        }
+
+        function toggleWeekday(day) {
+            if (selectedWeekdays.includes(day)) {
+                selectedWeekdays = selectedWeekdays.filter(value => value !== day);
+            } else {
+                selectedWeekdays.push(day);
+                selectedWeekdays.sort((a, b) => a - b);
+            }
+            renderWeekdays();
+        }
+
+        function addScheduleStep(type) {
+            if (!type) return;
+            const defaults = {
+                sleep: { type: 'sleep', seconds: 1 },
+                sendText: { type: 'sendText', text: '' },
+                sendKey: { type: 'sendKey', key: 'enter' },
+                keyDown: { type: 'keyDown', key: 'ctrl' },
+                keyUp: { type: 'keyUp', key: 'ctrl' },
+                stop: { type: 'stop' },
+                closeSession: { type: 'closeSession' }
+            };
+            editingSteps.push(defaults[type] || { type });
+            renderScheduleSteps();
+        }
+
+        function updateStep(index, field, value) {
+            if (!editingSteps[index]) return;
+            if (field === 'seconds') editingSteps[index][field] = Math.max(0, Number(value) || 0);
+            else editingSteps[index][field] = value;
+        }
+
+        function moveStep(index, delta) {
+            const nextIndex = index + delta;
+            if (nextIndex < 0 || nextIndex >= editingSteps.length) return;
+            const [step] = editingSteps.splice(index, 1);
+            editingSteps.splice(nextIndex, 0, step);
+            renderScheduleSteps();
+        }
+
+        function copyStep(index) {
+            editingSteps.splice(index + 1, 0, { ...editingSteps[index] });
+            renderScheduleSteps();
+        }
+
+        function removeStep(index) {
+            editingSteps.splice(index, 1);
+            renderScheduleSteps();
+        }
+
+        function stepInputHtml(step, index) {
+            if (step.type === 'sleep') {
+                return `<input type="number" min="0" step="0.1" value="${escapeHtml(step.seconds || 0)}" onchange="updateStep(${index}, 'seconds', this.value)">`;
+            }
+            if (step.type === 'sendText') {
+                return `<textarea rows="2" placeholder="Text to send" onchange="updateStep(${index}, 'text', this.value)" oninput="updateStep(${index}, 'text', this.value)">${escapeHtml(step.text || '')}</textarea>`;
+            }
+            if (step.type === 'sendKey') {
+                return `<select onchange="updateStep(${index}, 'key', this.value)">
+                    ${['enter','tab','esc','up','down','left','right','backspace','delete','home','end','ctrl+c','ctrl+d','ctrl+l'].map(key => `<option value="${key}" ${step.key === key ? 'selected' : ''}>${key}</option>`).join('')}
+                </select>`;
+            }
+            if (step.type === 'keyDown' || step.type === 'keyUp') {
+                return `<select onchange="updateStep(${index}, 'key', this.value)">
+                    ${['ctrl','alt'].map(key => `<option value="${key}" ${step.key === key ? 'selected' : ''}>${key}</option>`).join('')}
+                </select>`;
+            }
+            if (step.type === 'closeSession') {
+                return '<span style="color:var(--text-dim); font-size:13px;">Close the session and end this run</span>';
+            }
+            return '<span style="color:var(--text-dim); font-size:13px;">End this run</span>';
+        }
+
+        function renderScheduleSteps() {
+            const container = document.getElementById('schedule-steps');
+            if (!editingSteps.length) {
+                container.innerHTML = '<p style="color:var(--text-dim);">No steps yet.</p>';
+                return;
+            }
+            container.innerHTML = editingSteps.map((step, index) => `
+                <div class="step-card">
+                    <div class="step-grid">
+                        <select onchange="editingSteps[${index}] = { type: this.value }; addDefaultStepFields(${index}); renderScheduleSteps();">
+                            ${['sleep','sendText','sendKey','keyDown','keyUp','stop','closeSession'].map(type => `<option value="${type}" ${step.type === type ? 'selected' : ''}>${type}</option>`).join('')}
+                        </select>
+                        <div>${stepInputHtml(step, index)}</div>
+                        <div style="display:flex; gap:6px; justify-content:flex-end;">
+                            <button class="small-btn" onclick="moveStep(${index}, -1)">↑</button>
+                            <button class="small-btn" onclick="moveStep(${index}, 1)">↓</button>
+                            <button class="small-btn" onclick="copyStep(${index})">Copy</button>
+                            <button class="small-btn danger" onclick="removeStep(${index})">Del</button>
+                        </div>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        function addDefaultStepFields(index) {
+            const type = editingSteps[index].type;
+            if (type === 'sleep') editingSteps[index].seconds = 1;
+            if (type === 'sendText') editingSteps[index].text = '';
+            if (type === 'sendKey') editingSteps[index].key = 'enter';
+            if (type === 'keyDown' || type === 'keyUp') editingSteps[index].key = 'ctrl';
+        }
+
+        function collectSchedulePayload() {
+            if (!selectedWeekdays.length) throw new Error('Select at least one weekday');
+            return {
+                name: document.getElementById('schedule-name').value.trim() || 'Scheduled Task',
+                enabled: true,
+                schedule: {
+                    time: document.getElementById('schedule-time').value || '09:00',
+                    weekdays: selectedWeekdays
+                },
+                target: {
+                    toolKey: document.getElementById('schedule-tool').value,
+                    workingDirectory: document.getElementById('schedule-cwd').value.trim()
+                },
+                steps: editingSteps
+            };
+        }
+
+        async function saveSchedule() {
+            try {
+                const payload = collectSchedulePayload();
+                const url = editingScheduleId ? `/api/schedules/${editingScheduleId}` : '/api/schedules';
+                const method = editingScheduleId ? 'PATCH' : 'POST';
+                const res = await fetchWithTimeout(url, {
+                    method,
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                if (!res.ok) throw new Error((await res.json()).error || 'Save failed');
+                closeScheduleModal();
+                switchLobbyTab('schedules');
+            } catch (e) {
+                alert(e.message);
+            }
+        }
+
+        async function editSchedule(id) {
+            const res = await fetchWithTimeout(`/api/schedules/${id}`);
+            if (!res.ok) return alert('Failed to load schedule');
+            showScheduleModal(await res.json());
+        }
+
+        async function simulateSchedule(id) {
+            try {
+                const res = await fetchWithTimeout(`/api/schedules/${id}/simulate`, { method: 'POST' }, 30000);
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || 'Test failed');
+                await loadSchedules();
+                if (data.sessionId) {
+                    const jobRes = await fetchWithTimeout(`/api/schedules/${id}`).catch(() => null);
+                    const job = jobRes && jobRes.ok ? await jobRes.json() : null;
+                    joinSession(data.sessionId, 'Schedule Test', job?.target?.toolKey || null);
+                }
+            } catch (e) {
+                alert(e.message);
+            }
+        }
+
+        async function duplicateSchedule(id) {
+            await fetchWithTimeout(`/api/schedules/${id}/duplicate`, { method: 'POST' });
+            loadSchedules();
+        }
+
+        async function toggleSchedule(id, enabled) {
+            await fetchWithTimeout(`/api/schedules/${id}/enabled`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ enabled })
+            });
+            loadSchedules();
+        }
+
+        async function deleteSchedule(id) {
+            if (!confirm('Delete scheduled task?')) return;
+            await fetchWithTimeout(`/api/schedules/${id}`, { method: 'DELETE' });
+            loadSchedules();
+        }

package/lib/web/session.js

@@ -0,0 +1,351 @@
+        function joinSession(id, sessionName, toolKey = null) {
+            if (typeof clearImageAttachments === 'function' && selectedImageAttachments.length) {
+                void clearImageAttachments();
+            }
+            stopTimedInputTimers();
+            activeSessionId = id;
+            window.activeSessionId = id;
+            activeToolKey = toolKey;
+            clearTimeout(sessionPollTimer);
+            sessionPollTimer = null;
+            markCompletionRead(id);
+            loadTimedInputs();
+            document.getElementById('session-title').innerText = sessionName;
+            updateToolShortcuts(activeToolKey);
+            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+            document.getElementById('terminal-view').classList.add('active');
+            setClaudeModeEnabled(isClaudeSession());
+            if (currentSocket) { currentSocket.close(); currentSocket = null; }
+            initTerminal(id);
+        }
+
+        function initTerminal(sessionId) {
+            if (isClaudeSession()) {
+                initClaudeSession(sessionId);
+                return;
+            }
+            if (isCodexSession() && codexState.presentation === 'structured') {
+                initCodexSession(sessionId);
+                return;
+            }
+            if (typeof Terminal === 'undefined') {
+                alert('Terminal library not loaded yet.');
+                showLobby();
+                return;
+            }
+            function isTerminalAutoResponse(data) {
+                return /^\x1b\[\?[\d;]*c$/.test(data) || /^\x1b\[>[\d;]*c$/.test(data);
+            }
+            if (!term) {
+                term = new Terminal({ theme: { background: '#000', foreground: '#fff', cursor: '#0f0' }, cursorBlink: true, fontSize: 14, cursorStyle: 'bar', scrollback: 10000 });
+                fitAddon = new FitAddon.FitAddon();
+                term.loadAddon(fitAddon);
+                term.open(document.getElementById('terminal'));
+                term.onData(data => {
+                    if (isTerminalAutoResponse(data)) return;
+                    let finalData = data;
+                    if (modifiers.ctrl && data.length === 1) {
+                        const code = data.toLowerCase().charCodeAt(0);
+                        if (code >= 97 && code <= 122) finalData = String.fromCharCode(code - 96);
+                    }
+                    sendWS(finalData);
+                });
+            } else { term.clear(); }
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            currentSocket = new WebSocket(protocol + '//' + window.location.host + '?sessionId=' + sessionId);
+            currentSocket.onopen = () => {
+                syncLayout();
+                setTimeout(() => logViewSnapshot('ws-open'), 300);
+            };
+            currentSocket.onmessage = (e) => {
+                const msg = JSON.parse(e.data);
+                if (msg.type === 'output') term.write(msg.data);
+                if (msg.type === 'reset') term.reset();
+                if (msg.type === 'codex-event' && isCodexSession()) {
+                    applyCodexEvent(msg.event);
+                    if (msg.event?.type === 'presentation' && msg.event.presentation === 'structured') {
+                        currentSocket.close();
+                        currentSocket = null;
+                        initCodexSession(sessionId);
+                    }
+                }
+                if (msg.type === 'exit') showLobby();
+            };
+        }
+
+        async function initClaudeSession(sessionId) {
+            claudeMessages = [];
+            claudePendingPermissions = [];
+            claudeStatus = 'idle';
+            const runtimeConfig = await refreshClaudeRuntimeConfig();
+            claudeState = {
+                permissionMode: 'default',
+                model: (runtimeConfig && runtimeConfig.defaultModel) || 'default',
+                effort: (runtimeConfig && runtimeConfig.defaultEffort) || 'medium',
+                claudeSessionId: null,
+                resumeSessionId: null,
+                canAbort: false,
+                pendingPermissionCount: 0
+            };
+            claudeResumePanelOpen = false;
+            claudeForkPanelOpen = false;
+            claudePickerOpen = null;
+            claudeUsagePending = false;
+            claudeContextPending = false;
+            claudeResumeItemsLoaded = false;
+            document.getElementById('claude-resume-panel').classList.remove('active');
+            document.getElementById('claude-resume-panel').innerHTML = '';
+            document.getElementById('claude-fork-panel').classList.remove('active');
+            document.getElementById('claude-fork-panel').innerHTML = '';
+            closeClaudePicker();
+            updateTerminalControlsHeight();
+            applyClaudeRuntimeConfig(runtimeConfig);
+            applyClaudeState(claudeState);
+            renderClaudeChat();
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            currentSocket = new WebSocket(protocol + '//' + window.location.host + '?sessionId=' + sessionId);
+            currentSocket.onopen = () => logViewSnapshot('claude-ws-open');
+            currentSocket.onmessage = (e) => {
+                const msg = JSON.parse(e.data);
+                if (msg.type === 'claude-snapshot' && msg.snapshot) {
+                    claudeMessages = msg.snapshot.messages || [];
+                    claudePendingPermissions = msg.snapshot.pendingPermissions || [];
+                    claudeStatus = msg.snapshot.status || 'idle';
+                    applyClaudeState(msg.snapshot.state || {
+                        status: claudeStatus,
+                        pendingPermissionCount: claudePendingPermissions.filter(item => item.status === 'pending').length,
+                        canAbort: claudeStatus === 'thinking'
+                    });
+                    renderClaudeChat();
+                }
+                if (msg.type === 'claude-event') applyClaudeEvent(msg.event);
+                if (msg.type === 'exit') showLobby();
+            };
+        }
+
+        function initCodexSession(sessionId) {
+            codexMessages = [];
+            codexPendingPermissions = [];
+            codexModelPanelOpen = false;
+            codexModelCandidate = null;
+            codexResumePanelOpen = false;
+            codexForkPanelOpen = false;
+            document.getElementById('codex-model-panel').classList.remove('active');
+            document.getElementById('codex-resume-panel').classList.remove('active');
+            document.getElementById('codex-fork-panel').classList.remove('active');
+            document.getElementById('codex-control-rail').scrollLeft = 0;
+            codexState = { permissionMode: 'default', sandboxMode: 'default', effectivePermissionMode: null, effectiveSandboxMode: null, model: null, effort: null, status: 'idle', threadId: null, presentation: 'structured', models: [], canAbort: false, canSwitchToTerminal: false, canSwitchToStructured: false };
+            setClaudeModeEnabled(false);
+            applyCodexState(codexState);
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            currentSocket = new WebSocket(protocol + '//' + window.location.host + '?sessionId=' + sessionId);
+            currentSocket.onmessage = (e) => {
+                const msg = JSON.parse(e.data);
+                if (msg.type === 'codex-snapshot' && msg.snapshot) {
+                    codexMessages = msg.snapshot.messages || [];
+                    codexPendingPermissions = msg.snapshot.pendingPermissions || [];
+                    applyCodexState(msg.snapshot.state || {});
+                }
+                if (msg.type === 'codex-event') {
+                    applyCodexEvent(msg.event);
+                    if (msg.event?.type === 'presentation' && msg.event.presentation === 'terminal') {
+                        currentSocket.close();
+                        currentSocket = null;
+                        initTerminal(sessionId);
+                    }
+                }
+                if (msg.type === 'exit') showLobby();
+            };
+        }
+
+        function sendWS(data) {
+            if (currentSocket && currentSocket.readyState === 1) currentSocket.send(JSON.stringify({ type: 'input', data }));
+        }
+
+        let layoutTimer = null;
+        let layoutKeepAtBottom = false;
+
+        function isTerminalAtBottom() {
+            if (!term || !term.buffer || !term.buffer.active) return true;
+            const active = term.buffer.active;
+            return active.viewportY >= active.baseY - 1;
+        }
+
+        function scrollTerminalViewportToBottom() {
+            if (!term) return;
+            term.scrollToBottom();
+            const viewport = document.querySelector('#terminal .xterm-viewport');
+            if (viewport) viewport.scrollTop = viewport.scrollHeight;
+        }
+
+        function restoreTerminalBottomSoon() {
+            scrollTerminalViewportToBottom();
+            requestAnimationFrame(() => {
+                scrollTerminalViewportToBottom();
+                requestAnimationFrame(scrollTerminalViewportToBottom);
+            });
+            setTimeout(scrollTerminalViewportToBottom, 120);
+        }
+
+        function syncLayout(options = {}) {
+            if (!fitAddon || !currentSocket) return;
+            const keepAtBottom = typeof options.keepAtBottom === 'boolean' ? options.keepAtBottom : isTerminalAtBottom();
+            layoutKeepAtBottom = layoutKeepAtBottom || keepAtBottom;
+            clearTimeout(layoutTimer);
+            layoutTimer = setTimeout(() => {
+                const shouldRestoreBottom = layoutKeepAtBottom;
+                layoutKeepAtBottom = false;
+                fitAddon.fit();
+                if (shouldRestoreBottom) restoreTerminalBottomSoon();
+                if (currentSocket.readyState === 1) currentSocket.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+            }, 50);
+        }
+
+        function previewText(text, maxChars = 320) {
+            if (!text) return '';
+            const normalized = String(text)
+                .replace(/\r/g, '\\r')
+                .replace(/\n/g, '\\n')
+                .replace(/\t/g, '\\t')
+                .replace(/\x1b/g, '\\x1b');
+            return normalized.length > maxChars ? normalized.slice(-maxChars) : normalized;
+        }
+
+        async function logClientDebug(event, payload) {
+            try {
+                await fetch('/api/debug/client-log', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ sessionId: activeSessionId, event, payload })
+                });
+            } catch (_) {}
+        }
+
+        function snapshotTerminalBuffer(maxLines = 12) {
+            if (!term || !term.buffer || !term.buffer.active) return null;
+            const active = term.buffer.active;
+            const totalLines = active.length || 0;
+            const start = Math.max(0, totalLines - maxLines);
+            const tailLines = [];
+            for (let i = start; i < totalLines; i++) {
+                const line = active.getLine(i);
+                if (!line) continue;
+                tailLines.push(line.translateToString(true));
+            }
+            return {
+                cols: term.cols,
+                rows: term.rows,
+                baseY: active.baseY,
+                viewportY: active.viewportY,
+                cursorX: active.cursorX,
+                cursorY: active.cursorY,
+                totalLines,
+                tailPreview: previewText(tailLines.join('\n'))
+            };
+        }
+
+        function logViewSnapshot(event) {
+            logClientDebug(event, {
+                sessionId: activeSessionId,
+                terminalSnapshot: snapshotTerminalBuffer()
+            });
+        }
+
+        // Navigation
+        function showTerminal() {
+            clearTimeout(sessionPollTimer);
+            sessionPollTimer = null;
+            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+            document.getElementById('terminal-view').classList.add('active');
+            logViewSnapshot('show-terminal');
+            syncLayout();
+        }
+
+        function showGitPreview() {
+            clearTimeout(sessionPollTimer);
+            sessionPollTimer = null;
+            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+            document.getElementById('git-view').classList.add('active');
+            switchGitTab('changes');
+        }
+
+        let historyWrapEnabled = true;
+
+        function showHistory() {
+            clearTimeout(sessionPollTimer);
+            sessionPollTimer = null;
+            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+            document.getElementById('history-view').classList.add('active');
+            logViewSnapshot('show-history-before-load');
+            loadHistory();
+        }
+
+        function toggleHistoryWrap() {
+            historyWrapEnabled = !historyWrapEnabled;
+            const contentEl = document.getElementById('history-content');
+            contentEl.classList.toggle('nowrap', !historyWrapEnabled);
+            document.getElementById('history-wrap-btn').style.color = historyWrapEnabled ? 'var(--primary)' : 'var(--text-dim)';
+        }
+
+        async function loadHistory() {
+            const contentEl = document.getElementById('history-content');
+            const metaEl = document.getElementById('history-meta');
+            if (!activeSessionId) {
+                metaEl.textContent = 'No active session.';
+                contentEl.textContent = '';
+                return;
+            }
+
+            metaEl.textContent = 'Loading...';
+            try {
+                const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/history`, {}, 30000);
+                const data = await res.json();
+                if (!data.success) throw new Error(data.error || 'Failed to load history');
+
+                const updatedAt = data.updatedAt ? new Date(data.updatedAt).toLocaleTimeString() : 'unknown';
+                const size = typeof data.bytes === 'number' ? `${Math.round(data.bytes / 1024)} KB` : 'unknown size';
+                const truncated = data.truncated ? ' | truncated' : '';
+                metaEl.textContent = `${data.tool || 'Session'} | ${data.lines || 0} lines | ${size} | updated ${updatedAt}${truncated}`;
+                contentEl.textContent = data.text || 'No readable history yet.';
+                contentEl.classList.toggle('nowrap', !historyWrapEnabled);
+                document.getElementById('history-wrap-btn').style.color = historyWrapEnabled ? 'var(--primary)' : 'var(--text-dim)';
+                logClientDebug('history-loaded', {
+                    meta: metaEl.textContent,
+                    historyLines: data.lines || 0,
+                    historyBytes: data.bytes || 0,
+                    historyTail: previewText(data.text || '')
+                });
+                requestAnimationFrame(() => {
+                    contentEl.scrollTop = contentEl.scrollHeight;
+                });
+            } catch (e) {
+                metaEl.textContent = 'Failed to load history.';
+                contentEl.textContent = e.message;
+                logClientDebug('history-load-failed', { message: e.message });
+            }
+        }
+
+        async function copyHistoryContent() {
+            const contentEl = document.getElementById('history-content');
+            const text = contentEl.textContent || '';
+            if (!text || text === 'Loading...' || text === 'No readable history yet.') {
+                alert('No history to copy.');
+                return;
+            }
+
+            try {
+                if (navigator.clipboard && window.isSecureContext) {
+                    await navigator.clipboard.writeText(text);
+                } else {
+                    const range = document.createRange();
+                    range.selectNode(contentEl);
+                    window.getSelection().removeAllRanges();
+                    window.getSelection().addRange(range);
+                    document.execCommand('copy');
+                    window.getSelection().removeAllRanges();
+                }
+                alert('History copied.');
+            } catch (e) {
+                alert('Copy failed. You can select the history text manually.');
+            }
+        }

package/lib/web/shell.js

@@ -0,0 +1,56 @@
+        async function deleteSession(id, e) {
+            e.stopPropagation(); if (!confirm('Terminate session?')) return;
+            try { await fetchWithTimeout('/api/sessions/' + id, { method: 'DELETE' }); refreshSessionsNow(); } catch (e) { alert('Failed to delete'); }
+        }
+
+        function showLobby() {
+            if (currentSocket) { currentSocket.close(); currentSocket = null; }
+            closeTimedSendPanel();
+            stopTimedInputTimers();
+            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+            document.getElementById('lobby-view').classList.add('active');
+            refreshSessionsNow();
+        }
+
+        function updateToolShortcuts(toolKey) {
+            const usesUsageCommand = ['antigravity', 'claude-code'].includes(toolKey);
+            const usageCommand = usesUsageCommand ? '/usage' : '/stat';
+            const defaultShortcuts = [
+                { key: 'left', label: '←', special: true },
+                { key: 'right', label: '→', special: true },
+                { key: 'ctrl-c', label: 'Ctrl+C' },
+                { command: '/model' },
+                { command: '/resume' },
+                { command: usageCommand }
+            ];
+            const toolShortcuts = {
+                codex: [
+                    { key: 'ctrl-c', label: 'Ctrl+C' },
+                    { key: 'codex-perm', label: '/perm', title: 'Send /perm' },
+                    { command: '/model' },
+                    { command: '/resume' },
+                    { command: '/stat' }
+                ]
+            };
+            const shortcuts = toolShortcuts[toolKey] || defaultShortcuts;
+            const shortcutGroup = document.querySelector('[data-role="tool-shortcuts"]');
+            if (!shortcutGroup) return;
+
+            shortcutGroup.style.gridTemplateColumns = `repeat(${shortcuts.length}, minmax(0, 1fr))`;
+            shortcutGroup.replaceChildren(...shortcuts.map(shortcut => {
+                const button = document.createElement(shortcut.command ? 'button' : 'div');
+                button.className = shortcut.command
+                    ? 'command-key'
+                    : `key-btn${shortcut.special ? ' special-key' : ''}`;
+                if (shortcut.command) {
+                    button.dataset.command = shortcut.command;
+                    button.textContent = shortcut.command;
+                    button.title = `Send ${shortcut.command}`;
+                } else {
+                    button.dataset.key = shortcut.key;
+                    button.textContent = shortcut.label;
+                    button.title = shortcut.title || '';
+                }
+                return button;
+            }));
+        }