glad-web 1.0.43 → 1.0.45

package/lib/web/composer.js

@@ -1,31 +1,124 @@
         const inputEl = document.getElementById('cmd-input');
-        const imageFileInput = document.getElementById('image-file-input');
+        const attachmentFileInput = document.getElementById('attachment-file-input');
         const attachmentStrip = document.getElementById('attachment-strip');
         let selectedImageAttachments = [];
+        let selectedFileAttachments = [];
         let keepTerminalBottomForNextInput = false;
+        const composerActionTooltip = document.getElementById('composer-action-tooltip');
+        let composerActionTooltipTimer = null;
+        let composerTouchGesture = null;
+        let suppressTouchFocusUntil = 0;
+
+        function composerActionControl(target) {
+            const control = target instanceof Element ? target.closest('button, label') : null;
+            if (!control || !document.getElementById('terminal-controls').contains(control)) return null;
+            return control.querySelector('.action-icon') ? control : null;
+        }
+
+        function composerActionName(control) {
+            return control?.querySelector('.action-label')?.textContent?.trim()
+                || control?.getAttribute('aria-label')
+                || control?.getAttribute('title')
+                || '';
+        }
+
+        function hideComposerActionTooltip() {
+            clearTimeout(composerActionTooltipTimer);
+            composerActionTooltipTimer = null;
+            composerActionTooltip.classList.remove('visible');
+        }
+
+        function showComposerActionTooltip(control, autoHide = false) {
+            const label = composerActionName(control);
+            if (!label) return;
+            clearTimeout(composerActionTooltipTimer);
+            composerActionTooltip.textContent = label;
+            composerActionTooltip.classList.add('visible');
+            const controlBox = control.getBoundingClientRect();
+            const tooltipBox = composerActionTooltip.getBoundingClientRect();
+            const left = Math.max(8, Math.min(window.innerWidth - tooltipBox.width - 8,
+                controlBox.left + controlBox.width / 2 - tooltipBox.width / 2));
+            const above = controlBox.top - tooltipBox.height - 8;
+            composerActionTooltip.style.left = `${left}px`;
+            composerActionTooltip.style.top = `${above >= 8 ? above : controlBox.bottom + 8}px`;
+            if (autoHide) composerActionTooltipTimer = setTimeout(hideComposerActionTooltip, 1400);
+        }
+
+        const terminalControls = document.getElementById('terminal-controls');
+        terminalControls.addEventListener('focusin', event => {
+            if (performance.now() < suppressTouchFocusUntil) return;
+            const control = composerActionControl(event.target);
+            if (control) showComposerActionTooltip(control);
+        });
+        terminalControls.addEventListener('focusout', hideComposerActionTooltip);
+        terminalControls.addEventListener('pointerover', event => {
+            const control = composerActionControl(event.target);
+            if (control && event.pointerType !== 'touch') showComposerActionTooltip(control);
+        });
+        terminalControls.addEventListener('pointerout', event => {
+            const control = composerActionControl(event.target);
+            if (control && !control.contains(event.relatedTarget)) hideComposerActionTooltip();
+        });
+        terminalControls.addEventListener('pointerdown', event => {
+            const control = composerActionControl(event.target);
+            if (control && event.pointerType === 'touch') {
+                composerTouchGesture = { pointerId: event.pointerId, control, x: event.clientX, y: event.clientY, moved: false };
+                suppressTouchFocusUntil = performance.now() + 800;
+                hideComposerActionTooltip();
+            }
+        });
+        terminalControls.addEventListener('pointermove', event => {
+            if (!composerTouchGesture || event.pointerId !== composerTouchGesture.pointerId) return;
+            if (Math.hypot(event.clientX - composerTouchGesture.x, event.clientY - composerTouchGesture.y) > 8) {
+                composerTouchGesture.moved = true;
+                hideComposerActionTooltip();
+            }
+        });
+        terminalControls.addEventListener('pointerup', event => {
+            if (!composerTouchGesture || event.pointerId !== composerTouchGesture.pointerId) return;
+            const gesture = composerTouchGesture;
+            composerTouchGesture = null;
+            suppressTouchFocusUntil = performance.now() + 800;
+            if (!gesture.moved) showComposerActionTooltip(gesture.control, true);
+        });
+        terminalControls.addEventListener('pointercancel', () => {
+            composerTouchGesture = null;
+            hideComposerActionTooltip();
+        });
+        terminalControls.addEventListener('scroll', hideComposerActionTooltip, true);
 
         function isStructuredImageAttachmentAvailable() {
-            return isClaudeSession() || (isCodexSession() && codexState.presentation === 'structured');
+            return isClaudeSession() || isCodexSession();
+        }
+
+        function isSupportedImageFile(file) {
+            const type = String(file?.type || '').toLowerCase();
+            const name = String(file?.name || '').toLowerCase();
+            return ['image/png', 'image/jpeg', 'image/gif', 'image/webp'].includes(type)
+                || /\.(png|jpe?g|gif|webp)$/.test(name);
         }
 
         function syncComposerButtonState() {
-            const menuOpen = document.getElementById('composer-menu').classList.contains('active');
             const timerOpen = document.getElementById('timed-send-panel').classList.contains('active');
-            document.getElementById('timer-btn').classList.toggle('active', menuOpen || timerOpen);
+            document.getElementById('schedule-send-btn').classList.toggle('active', timerOpen);
+            document.getElementById('attachment-btn').classList.toggle('active', selectedImageAttachments.length + selectedFileAttachments.length > 0);
         }
 
-        function renderImageAttachments() {
-            attachmentStrip.innerHTML = selectedImageAttachments.map(item => (
-                `<div class="attachment-chip${item.uploading ? ' uploading' : ''}"><span aria-hidden="true">▧</span><span class="attachment-chip-content"><span class="attachment-chip-name" title="${escapeHtml(item.name)}">${escapeHtml(item.name)}</span>${item.uploading ? `<span class="attachment-progress${item.progressKnown ? '' : ' estimated'}"><span style="width:${Math.max(0, Math.min(100, item.progress || 0))}%"></span></span><span class="attachment-status">${escapeHtml(item.status || (item.progressKnown ? `Uploading ${Math.round(item.progress || 0)}%` : 'Uploading original image…'))}</span>` : ''}</span><button class="attachment-remove" type="button" title="Remove image" aria-label="Remove ${escapeHtml(item.name)}" onclick="removeImageAttachment('${item.id}')">×</button></div>`
-            )).join('');
-            attachmentStrip.classList.toggle('active', selectedImageAttachments.length > 0);
+        function renderComposerAttachments() {
+            const chip = (item, kind) => `<div class="attachment-chip ${kind}${item.uploading ? ' uploading' : ''}"><svg class="attachment-chip-icon action-icon" aria-hidden="true"><use href="#icon-${kind === 'image' ? 'image' : 'file'}"></use></svg><span class="attachment-chip-content"><span class="attachment-chip-name" title="${escapeHtml(item.name)}">${escapeHtml(item.name)}</span>${item.uploading ? `<span class="attachment-progress${item.progressKnown ? '' : ' estimated'}"><span style="width:${Math.max(0, Math.min(100, item.progress || 0))}%"></span></span><span class="attachment-status">${escapeHtml(item.status || `Uploading ${kind}…`)}</span>` : ''}</span><button class="attachment-remove" type="button" title="Remove ${kind}" aria-label="Remove ${escapeHtml(item.name)}" onclick="${kind === 'image' ? 'removeImageAttachment' : 'removeFileAttachment'}('${item.id}')">×</button></div>`;
+            attachmentStrip.innerHTML = [
+                ...selectedImageAttachments.map(item => chip(item, 'image')),
+                ...selectedFileAttachments.map(item => chip(item, 'file'))
+            ].join('');
+            attachmentStrip.classList.toggle('active', selectedImageAttachments.length + selectedFileAttachments.length > 0);
+            syncComposerButtonState();
             updateTerminalControlsHeight();
         }
 
         window.removeImageAttachment = async function(attachmentId) {
             const attachment = selectedImageAttachments.find(item => item.id === attachmentId);
             selectedImageAttachments = selectedImageAttachments.filter(item => item.id !== attachmentId);
-            renderImageAttachments();
+            renderComposerAttachments();
             if (!attachment) return;
             clearInterval(attachment.indicatorTimer);
             attachment.abortUpload?.();
@@ -37,24 +130,43 @@
             }
         };
 
-        async function clearImageAttachments() {
+        window.removeFileAttachment = async function(attachmentId) {
+            const attachment = selectedFileAttachments.find(item => item.id === attachmentId);
+            selectedFileAttachments = selectedFileAttachments.filter(item => item.id !== attachmentId);
+            renderComposerAttachments();
+            if (!attachment) return;
+            attachment.abortUpload?.();
+            if (attachment.uploading) return;
+            try {
+                await fetchWithTimeout(`/api/sessions/${attachment.sessionId}/attachments/files/${encodeURIComponent(attachment.id)}`, { method: 'DELETE' });
+            } catch (_) {}
+        };
+
+        async function clearComposerAttachments() {
             const pending = selectedImageAttachments;
+            const pendingFiles = selectedFileAttachments;
             selectedImageAttachments = [];
-            renderImageAttachments();
+            selectedFileAttachments = [];
+            renderComposerAttachments();
             for (const item of pending) item.abortUpload?.();
+            for (const item of pendingFiles) item.abortUpload?.();
             await Promise.all(pending.filter(item => !item.uploading).map(item => fetchWithTimeout(
                 `/api/sessions/${item.sessionId}/attachments/images/${encodeURIComponent(item.id)}`,
                 { method: 'DELETE' }
             ).catch(() => null)));
+            await Promise.all(pendingFiles.filter(item => !item.uploading).map(item => fetchWithTimeout(
+                `/api/sessions/${item.sessionId}/attachments/files/${encodeURIComponent(item.id)}`,
+                { method: 'DELETE' }
+            ).catch(() => null)));
         }
 
-        const IMAGE_UPLOAD_CHUNK_BYTES = 512 * 1024;
+        const ATTACHMENT_UPLOAD_CHUNK_BYTES = 512 * 1024;
 
         function uploadImageInChunks(sessionId, file, onProgress) {
             let xhr = null;
             let cancelled = false;
             const uploadId = crypto.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`;
-            const chunkTotal = Math.ceil(file.size / IMAGE_UPLOAD_CHUNK_BYTES);
+            const chunkTotal = Math.ceil(file.size / ATTACHMENT_UPLOAD_CHUNK_BYTES);
             return {
                 abort: () => {
                     cancelled = true;
@@ -64,8 +176,8 @@
                 promise: (async () => {
                     for (let chunkIndex = 0; chunkIndex < chunkTotal; chunkIndex++) {
                         if (cancelled) throw new Error('Image upload cancelled');
-                        const start = chunkIndex * IMAGE_UPLOAD_CHUNK_BYTES;
-                        const chunk = file.slice(start, Math.min(file.size, start + IMAGE_UPLOAD_CHUNK_BYTES));
+                        const start = chunkIndex * ATTACHMENT_UPLOAD_CHUNK_BYTES;
+                        const chunk = file.slice(start, Math.min(file.size, start + ATTACHMENT_UPLOAD_CHUNK_BYTES));
                         const result = await new Promise((resolve, reject) => {
                             xhr = new XMLHttpRequest();
                             xhr.open('POST', `/api/sessions/${sessionId}/attachments/images/chunks`);
@@ -110,7 +222,7 @@
                     alert(`${file.name} is larger than 50 MB.`);
                     continue;
                 }
-                const chunkTotal = Math.ceil(file.size / IMAGE_UPLOAD_CHUNK_BYTES);
+                const chunkTotal = Math.ceil(file.size / ATTACHMENT_UPLOAD_CHUNK_BYTES);
                 const pending = {
                     id: `uploading-${crypto.randomUUID?.() || `${Date.now()}-${Math.random()}`}`,
                     name: file.name || 'image',
@@ -122,12 +234,12 @@
                     abortUpload: null
                 };
                 selectedImageAttachments.push(pending);
-                renderImageAttachments();
+                renderComposerAttachments();
                 try {
                     const upload = uploadImageInChunks(activeSessionId, file, progress => {
                         pending.progress = progress;
                         pending.status = `${progress}%`;
-                        renderImageAttachments();
+                        renderComposerAttachments();
                     });
                     pending.abortUpload = upload.abort;
                     const attachment = await upload.promise;
@@ -137,24 +249,122 @@
                         continue;
                     }
                     selectedImageAttachments[index] = { ...attachment, name: file.name || attachment.name, sessionId: activeSessionId };
-                    renderImageAttachments();
+                    renderComposerAttachments();
                 } catch (e) {
                     selectedImageAttachments = selectedImageAttachments.filter(item => item !== pending);
-                    renderImageAttachments();
+                    renderComposerAttachments();
                     if (e.message === 'Image upload cancelled') continue;
                     alert(`Could not add ${file.name}: ${e.message}`);
                 }
             }
         }
 
-        function closeComposerMenu() {
-            document.getElementById('composer-menu').classList.remove('active');
-            syncComposerButtonState();
-            updateTerminalControlsHeight();
+        function uploadFileInChunks(sessionId, file, onProgress) {
+            let xhr = null;
+            let cancelled = false;
+            const uploadId = crypto.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+            const chunkTotal = Math.ceil(file.size / ATTACHMENT_UPLOAD_CHUNK_BYTES);
+            return {
+                abort: () => {
+                    cancelled = true;
+                    xhr?.abort();
+                    void fetch(`/api/sessions/${sessionId}/attachments/files/uploads/${encodeURIComponent(uploadId)}`, { method: 'DELETE' }).catch(() => null);
+                },
+                promise: (async () => {
+                    for (let chunkIndex = 0; chunkIndex < chunkTotal; chunkIndex++) {
+                        if (cancelled) throw new Error('File upload cancelled');
+                        const start = chunkIndex * ATTACHMENT_UPLOAD_CHUNK_BYTES;
+                        const chunk = file.slice(start, Math.min(file.size, start + ATTACHMENT_UPLOAD_CHUNK_BYTES));
+                        const result = await new Promise((resolve, reject) => {
+                            xhr = new XMLHttpRequest();
+                            xhr.open('POST', `/api/sessions/${sessionId}/attachments/files/chunks`);
+                            xhr.timeout = 60_000;
+                            xhr.setRequestHeader('Content-Type', 'application/octet-stream');
+                            xhr.setRequestHeader('X-Glad-Upload-Id', uploadId);
+                            xhr.setRequestHeader('X-Glad-Chunk-Index', String(chunkIndex));
+                            xhr.setRequestHeader('X-Glad-Chunk-Total', String(chunkTotal));
+                            xhr.setRequestHeader('X-Glad-File-Name', encodeURIComponent(file.name || 'attachment.bin'));
+                            xhr.onerror = () => reject(new Error('Network error while uploading file'));
+                            xhr.ontimeout = () => reject(new Error(`File upload timed out on chunk ${chunkIndex + 1}/${chunkTotal}`));
+                            xhr.onabort = () => reject(new Error('File upload cancelled'));
+                            xhr.onload = () => {
+                                let data = {};
+                                try { data = JSON.parse(xhr.responseText || '{}'); } catch (_) {}
+                                if (xhr.status < 200 || xhr.status >= 300 || !data.success) {
+                                    reject(new Error(data.error || `Upload failed (HTTP ${xhr.status})`));
+                                    return;
+                                }
+                                resolve(data);
+                            };
+                            xhr.send(chunk);
+                        });
+                        onProgress(Math.round((Math.min(file.size, start + chunk.size) / file.size) * 100));
+                        if (result.complete) return result.attachment;
+                    }
+                    throw new Error('File upload did not complete');
+                })()
+            };
+        }
+
+        async function uploadAttachmentFiles(files) {
+            const remaining = 8 - selectedFileAttachments.length;
+            const batch = Array.from(files).slice(0, remaining);
+            if (files.length > remaining) alert('You can attach up to 8 files at a time.');
+            for (const file of batch) {
+                if (!file.size) {
+                    alert(`${file.name || 'File'} is empty.`);
+                    continue;
+                }
+                if (file.size > 50 * 1024 * 1024) {
+                    alert(`${file.name} is larger than 50 MB.`);
+                    continue;
+                }
+                const pending = {
+                    id: `uploading-${crypto.randomUUID?.() || `${Date.now()}-${Math.random()}`}`,
+                    name: file.name || 'attachment.bin',
+                    sessionId: activeSessionId,
+                    uploading: true,
+                    progress: 0,
+                    progressKnown: true,
+                    status: '0%',
+                    abortUpload: null
+                };
+                selectedFileAttachments.push(pending);
+                renderComposerAttachments();
+                try {
+                    const upload = uploadFileInChunks(activeSessionId, file, progress => {
+                        pending.progress = progress;
+                        pending.status = `${progress}%`;
+                        renderComposerAttachments();
+                    });
+                    pending.abortUpload = upload.abort;
+                    const attachment = await upload.promise;
+                    const index = selectedFileAttachments.indexOf(pending);
+                    if (index < 0) {
+                        await fetchWithTimeout(`/api/sessions/${activeSessionId}/attachments/files/${encodeURIComponent(attachment.id)}`, { method: 'DELETE' });
+                        continue;
+                    }
+                    selectedFileAttachments[index] = { ...attachment, name: file.name || attachment.name, sessionId: activeSessionId };
+                    renderComposerAttachments();
+                } catch (e) {
+                    selectedFileAttachments = selectedFileAttachments.filter(item => item !== pending);
+                    renderComposerAttachments();
+                    if (e.message === 'File upload cancelled') continue;
+                    alert(`Could not add ${file.name}: ${e.message}`);
+                }
+            }
+        }
+
+        async function uploadSelectedAttachments(files) {
+            const selected = Array.from(files || []);
+            const images = isStructuredImageAttachmentAvailable()
+                ? selected.filter(isSupportedImageFile) : [];
+            const regularFiles = selected.filter(file => !images.includes(file));
+            if (images.length) await uploadImageFiles(images);
+            if (regularFiles.length) await uploadAttachmentFiles(regularFiles);
         }
 
         function openTimedSendPanel() {
-            closeComposerMenu();
             if (isClaudeSession()) {
                 closeClaudePicker();
                 claudeResumePanelOpen = false;
@@ -187,43 +397,62 @@
         function performSend() {
             const val = inputEl.value;
             const readyImageAttachments = selectedImageAttachments.filter(item => !item.uploading);
-            if (selectedImageAttachments.some(item => item.uploading)) {
-                alert('Wait for image uploads to finish before sending.');
+            const readyFileAttachments = selectedFileAttachments.filter(item => !item.uploading);
+            if (selectedImageAttachments.some(item => item.uploading) || selectedFileAttachments.some(item => item.uploading)) {
+                alert('Wait for attachments to finish uploading before sending.');
                 return;
             }
-            if ((val || readyImageAttachments.length) && isClaudeSession()) {
+            if ((val || readyImageAttachments.length || readyFileAttachments.length) && isClaudeSession()) {
                 if (currentSocket && currentSocket.readyState === 1) {
                     currentSocket.send(JSON.stringify({
                         type: 'claude-input',
                         text: val,
-                        attachmentIds: readyImageAttachments.map(item => item.id)
+                        attachmentIds: readyImageAttachments.map(item => item.id),
+                        ...(readyFileAttachments.length ? { fileAttachmentIds: readyFileAttachments.map(item => item.id) } : {})
                     }));
                 }
                 inputEl.value = '';
                 inputEl.style.height = '38px';
                 selectedImageAttachments = [];
-                renderImageAttachments();
+                selectedFileAttachments = [];
+                renderComposerAttachments();
                 return;
             }
-            if ((val || readyImageAttachments.length) && isCodexSession() && codexState.presentation === 'structured') {
+            if ((val || readyImageAttachments.length || readyFileAttachments.length) && isCodexSession()) {
                 if (!codexReadyForInput()) return;
                 if (currentSocket && currentSocket.readyState === 1) {
                     currentSocket.send(JSON.stringify({
                         type: 'codex-input',
                         text: val,
                         attachmentIds: readyImageAttachments.map(item => item.id),
+                        ...(readyFileAttachments.length ? { fileAttachmentIds: readyFileAttachments.map(item => item.id) } : {}),
                         skills: selectedCodexSkill ? [{ name: selectedCodexSkill.name, path: selectedCodexSkill.path }] : []
                     }));
                 }
                 inputEl.value = '';
                 inputEl.style.height = '38px';
                 selectedImageAttachments = [];
+                selectedFileAttachments = [];
                 selectedCodexSkill = null;
-                renderImageAttachments();
+                renderComposerAttachments();
                 renderCodexChat();
                 return;
             }
-            if (val) {
+            if (val || readyFileAttachments.length) {
+                if (readyFileAttachments.length) {
+                    if (currentSocket && currentSocket.readyState === 1) {
+                        currentSocket.send(JSON.stringify({
+                            type: 'file-input',
+                            text: val,
+                            fileAttachmentIds: readyFileAttachments.map(item => item.id)
+                        }));
+                    }
+                    inputEl.value = '';
+                    inputEl.style.height = '38px';
+                    selectedFileAttachments = [];
+                    renderComposerAttachments();
+                    return;
+                }
                 const formattedVal = val.replace(/\n/g, '\r');
                 sendWS(formattedVal);
                 inputEl.value = '';

package/lib/web/core.js

@@ -9,6 +9,22 @@
         let timedSendRefreshTimer = null;
         let timedTagTimer = null;
         let editingTimedInputId = null;
+        function setActionButtonLabel(button, label) {
+            if (!button) return;
+            const labelNode = button.querySelector('.action-label');
+            if (labelNode) {
+                labelNode.textContent = label;
+                return;
+            }
+            button.textContent = label;
+        }
+        function renderSessionAttention(parts = []) {
+            const strip = document.getElementById('session-status-strip');
+            const rail = document.getElementById('session-attention-rail');
+            if (!strip || !rail) return;
+            rail.innerHTML = parts.join('');
+            strip.style.display = parts.length ? 'block' : 'none';
+        }
         let claudeMessages = [];
         let claudePendingPermissions = [];
         let claudeStatus = 'idle';
@@ -35,9 +51,8 @@
                 permissionMode: 'default', sandboxMode: 'default',
                 effectivePermissionMode: null, effectiveSandboxMode: null,
                 model: null, effort: null, status: 'idle', threadId: null,
-                presentation: 'structured', models: [], aborting: false, resuming: false,
-                canAbort: false, canCompact: false, compacting: false,
-                canSwitchToTerminal: false, canSwitchToStructured: false
+                models: [], aborting: false, resuming: false,
+                canAbort: false, canCompact: false, compacting: false
             };
         }
         let codexMessages = [];
@@ -235,7 +250,7 @@
                             ${timedInputCount}
                         </span>`
                         : '';
-                    html += `<div class="session-card">
+                    html += `<div class="session-card${s.id === activeSessionId ? ' selected' : ''}" data-session-id="${escapeHtml(s.id)}">
                         <div class="session-info">
                             <h3>${escapeHtml(s.name)}${s.hasUnreadCompletion ? '<span class="completion-dot" title="Completed"></span>' : ''}${timerBadge} <button type="button" class="icon-btn session-edit-btn" title="Rename session" aria-label="Rename session" onclick="renameSession('${s.id}', decodePathValue('${encodedName}'), event)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></h3>
                             <p>${escapeHtml(s.tool)}</p>
@@ -316,11 +331,12 @@
         }
 
         function closeToolModal(e) {
-            if (e.target.id === 'modal-overlay') document.getElementById('modal-overlay').style.display = 'none';
+            if (!e || e.target.id === 'modal-overlay') document.getElementById('modal-overlay').style.display = 'none';
         }
 
         function isLobbyVisible() {
-            return document.getElementById('lobby-view').classList.contains('active');
+            return document.getElementById('lobby-view').classList.contains('active')
+                || (typeof isSplitLayout === 'function' && isSplitLayout());
         }
 
         function scheduleSessionPolling() {