glad-web 1.0.44 → 1.0.46

package/lib/web/composer.js

@@ -1,24 +1,143 @@
         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;
+        let composerSendPending = false;
+
+        function composerExecutionInProgress() {
+            if (composerSendPending) return true;
+            if (isClaudeSession()) return claudeStatus === 'thinking';
+            if (isCodexSession()) return !codexReadyForInput();
+            return false;
+        }
+
+        function syncComposerSendState({ acknowledgeProviderState = false } = {}) {
+            if (acknowledgeProviderState) composerSendPending = false;
+            const sendButton = document.getElementById('send-btn');
+            const executing = composerExecutionInProgress();
+            sendButton.disabled = executing;
+            sendButton.title = executing ? 'Wait for the current run to finish' : 'Send';
+            sendButton.setAttribute('aria-label', executing ? 'Send disabled while running' : 'Send');
+        }
+
+        function markComposerSendPending() {
+            composerSendPending = true;
+            syncComposerSendState();
+        }
+
+        function resetComposerSendState() {
+            composerSendPending = false;
+            syncComposerSendState();
+        }
+
+        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 timerOpen = document.getElementById('timed-send-panel').classList.contains('active');
             document.getElementById('schedule-send-btn').classList.toggle('active', timerOpen);
-            document.getElementById('attach-image-btn').classList.toggle('active', selectedImageAttachments.length > 0);
+            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();
         }
@@ -26,7 +145,7 @@
         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?.();
@@ -38,24 +157,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;
@@ -65,8 +203,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`);
@@ -111,7 +249,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',
@@ -123,12 +261,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;
@@ -138,16 +276,121 @@
                         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 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() {
             if (isClaudeSession()) {
                 closeClaudePicker();
@@ -179,45 +422,67 @@
         });
 
         function performSend() {
+            if (document.getElementById('send-btn').disabled) return;
             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) } : {})
                     }));
+                    markComposerSendPending();
                 }
                 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 }] : []
                     }));
+                    markComposerSendPending();
                 }
                 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

@@ -18,6 +18,13 @@
             }
             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';
@@ -44,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 = [];
@@ -220,6 +226,40 @@
             }
         }
 
+        function renderSessionCard(session) {
+            const workingDirectory = session.workingDirectory || 'Unknown directory';
+            const encodedId = encodePathValue(session.id);
+            const encodedName = encodePathValue(session.name);
+            const encodedDir = encodePathValue(workingDirectory);
+            const encodedToolKey = encodePathValue(session.toolKey || '');
+            const timedInputCount = Number(session.timedInputCount) || 0;
+            const timerBadge = timedInputCount > 0
+                ? `<span class="timer-count-badge" title="${timedInputCount} scheduled timer${timedInputCount > 1 ? 's' : ''}">
+                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
+                    ${timedInputCount}
+                </span>`
+                : '';
+            return `<div class="session-card${session.id === activeSessionId ? ' selected' : ''}" data-session-id="${escapeHtml(session.id)}">
+                <span class="active-session-dot" title="Current session" aria-label="Current session"></span>
+                <div class="session-info">
+                    <h3><span class="session-name" title="${escapeHtml(session.name)}">${escapeHtml(session.name)}</span>${session.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(decodePathValue('${encodedId}'), 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(session.tool)}</p>
+                    <p>${new Date(session.startTime).toLocaleTimeString()}</p>
+                </div>
+                <div class="session-actions">
+                    ${renderServerChanSessionAction(session)}
+                    <button class="btn-join" onclick="joinSession(decodePathValue('${encodedId}'), decodePathValue('${encodedName}'), decodePathValue('${encodedToolKey}'))">Connect</button>
+                    <button type="button" class="icon-btn btn-delete session-delete-btn" title="Delete session" aria-label="Delete session" onclick="deleteSession(decodePathValue('${encodedId}'), event)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
+                </div>
+                <div class="session-dir-row">
+                    <button class="copy-dir-btn" title="Copy directory" onclick="copySessionDirectory(decodePathValue('${encodedDir}'), event)">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                    </button>
+                    <p title="${escapeHtml(workingDirectory)}">${escapeHtml(workingDirectory)}</p>
+                </div>
+            </div>`;
+        }
+
         async function loadSessions() {
             log('Loading sessions...');
             const list = document.getElementById('sessions-list');
@@ -232,38 +272,7 @@
                     return;
                 }
 
-                let html = '';
-                sessions.forEach(s => {
-                    const workingDirectory = s.workingDirectory || 'Unknown directory';
-                    const encodedName = encodePathValue(s.name);
-                    const encodedDir = encodePathValue(workingDirectory);
-                    const timedInputCount = Number(s.timedInputCount) || 0;
-                    const timerBadge = timedInputCount > 0
-                        ? `<span class="timer-count-badge" title="${timedInputCount} scheduled timer${timedInputCount > 1 ? 's' : ''}">
-                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
-                            ${timedInputCount}
-                        </span>`
-                        : '';
-                    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>
-                            <p>${new Date(s.startTime).toLocaleTimeString()}</p>
-                        </div>
-                        <div class="session-actions">
-                            ${renderServerChanSessionAction(s)}
-                            <button class="btn-join" onclick="joinSession('${s.id}', decodePathValue('${encodedName}'), '${escapeHtml(s.toolKey || '')}')">Connect</button>
-                            <button type="button" class="icon-btn btn-delete session-delete-btn" title="Delete session" aria-label="Delete session" onclick="deleteSession('${s.id}', event)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>
-                        </div>
-                        <div class="session-dir-row">
-                            <button class="copy-dir-btn" title="Copy directory" onclick="copySessionDirectory(decodePathValue('${encodedDir}'), event)">
-                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
-                            </button>
-                            <p title="${escapeHtml(workingDirectory)}">${escapeHtml(workingDirectory)}</p>
-                        </div>
-                    </div>`;
-                });
-                list.innerHTML = html;
+                list.innerHTML = sessions.map(renderSessionCard).join('');
             } catch (e) {
                 list.innerHTML = `<div style="color:#ff3b30; text-align:center; margin-top:50px;"><p>Failed to load: ${e.message}</p><button class="btn-retry" onclick="loadSessions()">Retry</button></div>`;
             }
@@ -284,13 +293,19 @@
             }
         }
 
-        async function showToolModal() {
+        async function showToolModal(skill = null) {
+            window.pendingSkillHubSkill = skill || null;
             document.getElementById('modal-overlay').style.display = 'flex';
             const list = document.getElementById('tools-list');
+            const title = document.getElementById('tool-modal-title');
+            const skillLabel = document.getElementById('tool-modal-skill');
+            if (title) title.textContent = skill ? 'Start Skill Session' : 'Create Session';
+            if (skillLabel) skillLabel.textContent = skill ? String(skill.displayName || skill.name || '') : '';
             loadAppConfig();
             try {
                 const res = await fetchWithTimeout('/api/tools');
-                const tools = await res.json();
+                let tools = await res.json();
+                if (skill) tools = tools.filter(tool => tool.key === 'codex');
 
                 let html = '';
                 tools.forEach(t => {
@@ -325,7 +340,10 @@
         }
 
         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';
+                window.pendingSkillHubSkill = null;
+            }
         }
 
         function isLobbyVisible() {