glad-web 1.0.44 → 1.0.46

package/lib/web/claude.js

@@ -7,29 +7,34 @@
         }
 
         function setClaudeModeEnabled(enabled) {
-            const codexChat = isCodexSession() && codexState.presentation === 'structured';
+            const codexChat = isCodexSession();
             const structured = enabled || codexChat;
             const actionRail = enabled
                 ? document.querySelector('.claude-control-rail')
                 : codexChat
                     ? document.getElementById('codex-control-rail')
                     : document.getElementById('shortcut-rail');
-            const attachButton = document.getElementById('attach-image-btn');
+            const attachmentButton = document.getElementById('attachment-btn');
             const scheduleButton = document.getElementById('schedule-send-btn');
-            if (actionRail && attachButton && scheduleButton) {
+            if (actionRail && attachmentButton && scheduleButton) {
                 actionRail.prepend(scheduleButton);
-                actionRail.prepend(attachButton);
+                actionRail.prepend(attachmentButton);
             }
             document.getElementById('terminal-container').style.display = structured ? 'none' : '';
             document.getElementById('claude-chat-container').style.display = enabled ? 'block' : 'none';
             document.getElementById('codex-chat-container').style.display = codexChat ? 'block' : 'none';
             document.getElementById('claude-control-panel').style.display = enabled ? 'flex' : 'none';
             document.getElementById('codex-control-panel').style.display = codexChat ? 'flex' : 'none';
-            document.getElementById('codex-terminal-switch').style.display = isCodexSession() ? '' : 'none';
-            document.getElementById('attach-image-btn').style.display = structured ? '' : 'none';
+            document.getElementById('attachment-btn').style.display = '';
             document.getElementById('shortcut-rail').style.display = structured ? 'none' : '';
             document.getElementById('scroll-controls').style.display = structured ? 'none' : '';
             document.getElementById('cmd-input').placeholder = enabled ? 'Message Claude...' : codexChat ? 'Message Codex...' : 'Type a message...';
+            if (!codexChat) {
+                const skillPrefix = document.getElementById('composer-skill-prefix');
+                skillPrefix.classList.remove('active');
+                skillPrefix.innerHTML = '';
+            }
+            if (!structured) renderSessionAttention();
             updateTerminalControlsHeight();
         }
 
@@ -242,9 +247,12 @@
             }
         }
 
-        function applyClaudeState(state = {}) {
+        function applyClaudeState(state = {}, options = {}) {
             claudeState = { ...claudeState, ...state };
             claudeStatus = claudeState.status || claudeStatus;
+            if (typeof syncComposerSendState === 'function') {
+                syncComposerSendState({ acknowledgeProviderState: Boolean(options.providerStateReceived) });
+            }
             const permissionEl = document.getElementById('claude-permission-select');
             const modelEl = document.getElementById('claude-model-select');
             const effortEl = document.getElementById('claude-effort-select');
@@ -314,8 +322,9 @@
             const pending = Number(claudeState.pendingPermissionCount || claudePendingPermissions.filter(item => item.status === 'pending').length) || 0;
             const mode = claudeState.permissionMode || 'default';
             const parts = [];
+            const attention = [];
             if (pending) {
-                parts.push(`<button type="button" class="claude-state-pill warn claude-approval-jump" onclick="jumpToClaudeApproval()" title="Jump to pending approval" aria-label="Jump to pending Claude approval">${pending} approval${pending > 1 ? 's' : ''}<span aria-hidden="true">↓</span></button>`);
+                attention.push(`<button type="button" class="session-attention-pill approval claude-approval-jump" onclick="jumpToClaudeApproval()" title="Jump to pending approval" aria-label="Jump to pending Claude approval"><span aria-hidden="true">!</span>${pending} approval${pending > 1 ? 's' : ''}<span aria-hidden="true">↓</span></button>`);
             } else if (claudeStatus && !['idle', 'stopped', 'thinking'].includes(claudeStatus)) {
                 parts.push(`<span class="claude-state-pill warn">${escapeHtml(shortValue(claudeStatus))}</span>`);
             }
@@ -324,6 +333,7 @@
             }
             el.innerHTML = parts.join('');
             el.style.display = parts.length ? 'flex' : 'none';
+            renderSessionAttention(attention);
         }
 
         function jumpToClaudeApproval() {
@@ -841,7 +851,7 @@
             const parsed = parseLocalCommandMessage(textFromClaudeMessage(message));
             if (parsed.kind === 'hidden') return '';
             const attachments = Array.isArray(message.attachments) && message.attachments.length
-                ? `<div class="claude-message-attachments">${message.attachments.map(item => `<span class="claude-message-attachment" title="${escapeHtml(item.name || 'Image')}">▧ ${escapeHtml(item.name || 'Image')}</span>`).join('')}</div>` : '';
+                ? `<div class="claude-message-attachments">${message.attachments.map(item => `<span class="claude-message-attachment" title="${escapeHtml(item.name || 'Attachment')}"><svg class="message-attachment-icon action-icon" aria-hidden="true"><use href="#icon-${item.kind === 'file' ? 'file' : 'image'}"></use></svg>${escapeHtml(item.name || 'Attachment')}</span>`).join('')}</div>` : '';
             if (parsed.kind === 'command') {
                 const args = parsed.args ? `<div class="claude-message user">${renderMarkdown(parsed.args)}</div>` : '';
                 return `${args}<div class="claude-message user"><span class="claude-command-chip">/${escapeHtml(parsed.commandName)}</span>${attachments}</div>`;
@@ -1078,13 +1088,13 @@
             } else if (event.type === 'history-reset' && Array.isArray(event.messages)) {
                 claudeMessages = event.messages;
             } else if (event.type === 'state' && event.state) {
-                applyClaudeState(event.state);
+                applyClaudeState(event.state, { providerStateReceived: true });
             }
             if (event.type !== 'state') applyClaudeState({
                 status: claudeStatus,
                 pendingPermissionCount: claudePendingPermissions.filter(item => item.status === 'pending').length,
                 canAbort: claudeStatus === 'thinking'
-            });
+            }, { providerStateReceived: event.type === 'status' });
             renderClaudeChat();
         }
 
@@ -1102,6 +1112,7 @@
         }
 
         async function createSession(toolKey, sessionName) {
+            const selectedSkill = window.pendingSkillHubSkill || null;
             try {
                 const workingDirectory = document.getElementById('cwd-field').value;
                 const runtimeConfig = toolKey === 'claude-code' ? await refreshClaudeRuntimeConfig() : null;
@@ -1109,14 +1120,31 @@
                     model: runtimeConfig.defaultModel || 'default',
                     effort: runtimeConfig.defaultEffort || 'medium'
                 } : undefined;
-                const res = await fetchWithTimeout('/api/sessions', {
+                const endpoint = selectedSkill ? '/api/skillhub/sessions' : '/api/sessions';
+                const body = selectedSkill ? {
+                    toolKey,
+                    workingDirectory,
+                    skill: {
+                        id: selectedSkill.id,
+                        version: selectedSkill.version,
+                        digest: selectedSkill.digest
+                    }
+                } : { toolKey, workingDirectory, claudeOptions };
+                const list = document.getElementById('tools-list');
+                if (selectedSkill) list.innerHTML = '<p class="skill-hall-status">Downloading and verifying Skill…</p>';
+                const res = await fetchWithTimeout(endpoint, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ toolKey, workingDirectory, claudeOptions })
-                });
+                    body: JSON.stringify(body)
+                }, selectedSkill ? 70000 : 30000);
                 const data = await res.json();
                 if (!res.ok || !data.id) throw new Error(data.error || 'Failed to create session');
                 document.getElementById('modal-overlay').style.display = 'none';
-                refreshSessionsNow();
-            } catch (e) { alert('Failed to create session: ' + e.message); }
+                window.pendingSkillHubSkill = null;
+                if (selectedSkill) joinSession(data.id, data.name || selectedSkill.name, 'codex');
+                else refreshSessionsNow();
+            } catch (e) {
+                alert('Failed to create session: ' + e.message);
+                if (selectedSkill) await showToolModal(selectedSkill);
+            }
         }

package/lib/web/codex.js

@@ -1,6 +1,6 @@
         function codexText(text) { return escapeHtml(text || '').replace(/\n/g, '<br>'); }
         function codexReadyForInput() {
-            return codexState.presentation === 'structured' && codexState.status === 'idle'
+            return codexState.status === 'idle'
                 && !codexState.aborting && !codexState.resuming && !codexResumeInFlight;
         }
         function codexJson(value) {
@@ -219,13 +219,30 @@
         }
         function renderCodexMessageSkills(item) {
             const skills = Array.isArray(item?.skills) ? item.skills : [];
-            return skills.map(skill => `<span class="codex-message-skill" title="${escapeHtml(skill.path || skill.name || '')}">Skill · ${escapeHtml(skill.name || 'unknown')}</span>`).join('');
+            if (!skills.length) return '';
+            return `<div class="codex-message-skills">${skills.map(skill => `<span class="codex-message-skill" title="${escapeHtml(skill.path || skill.name || '')}">Skill · ${escapeHtml(skill.name || 'unknown')}</span>`).join('')}</div>`;
+        }
+
+        function renderComposerSkillPrefix() {
+            const container = document.getElementById('composer-skill-prefix');
+            if (!container) return;
+            const visible = selectedCodexSkill && codexReadyForInput();
+            const wasVisible = container.classList.contains('active');
+            container.classList.toggle('active', Boolean(visible));
+            container.innerHTML = visible
+                ? `<div class="codex-skill-bubble" role="status" aria-label="Selected skill: ${escapeHtml(selectedCodexSkill.name)}"><span class="codex-skill-bubble-name">Skill · ${escapeHtml(selectedCodexSkill.name)}</span><button type="button" class="codex-skill-bubble-close" onclick="clearCodexSkillSelection()" title="Remove selected skill" aria-label="Remove selected skill">×</button></div>`
+                : '';
+            if (wasVisible !== Boolean(visible)) updateTerminalControlsHeight();
+        }
+
+        function renderCodexMessageAttachments(item) {
+            if (!Array.isArray(item.attachments) || !item.attachments.length) return '';
+            return `<div class="claude-message-attachments">${item.attachments.map(attachment => `<span class="claude-message-attachment" title="${escapeHtml(attachment.name || 'Attachment')}"><svg class="message-attachment-icon action-icon" aria-hidden="true"><use href="#icon-${attachment.kind === 'file' ? 'file' : 'image'}"></use></svg>${escapeHtml(attachment.name || 'Attachment')}</span>`).join('')}</div>`;
         }
         function renderCodexMessageMeta(item, finalOnly = false, context = null) {
             const time = renderCodexMessageTime(item, finalOnly);
-            const skills = renderCodexMessageSkills(item);
             const meter = renderCodexContextMeter(context);
-            return time || skills || meter ? `<div class="codex-message-meta">${time}${skills}${meter}</div>` : '';
+            return time || meter ? `<div class="codex-message-meta">${time}${meter}</div>` : '';
         }
         function syncCodexDom(current, next) {
             if (!current || !next) return;
@@ -320,7 +337,7 @@
                     const context = lastAssistantByTurn.get(turnId) === item.id ? turnEnd?.context : null;
                     parts.push(`<div class="codex-message-block assistant" data-codex-key="message-${escapeHtml(item.id || '')}"><div class="codex-message assistant claude-md">${renderMarkdown(item.text || '')}</div>${renderCodexMessageMeta(item, true, context)}</div>`);
                 }
-                else if (item.kind === 'user') parts.push(`<div class="codex-message-block user" data-codex-key="message-${escapeHtml(item.id || '')}"><div class="codex-message user claude-md">${renderMarkdown(item.text || '')}</div>${renderCodexMessageMeta(item)}</div>`);
+                else if (item.kind === 'user') parts.push(`<div class="codex-message-block user" data-codex-key="message-${escapeHtml(item.id || '')}">${renderCodexMessageSkills(item)}<div class="codex-message user claude-md">${renderMarkdown(item.text || '')}${renderCodexMessageAttachments(item)}</div>${renderCodexMessageMeta(item)}</div>`);
                 else if (item.kind === 'compaction') parts.push(renderCodexCompaction(item));
                 else if (item.kind === 'status') parts.push(renderCodexStatus(item));
                 else if (item.kind === 'event' && item.level === 'warning') parts.push(renderCodexWarning(item));
@@ -328,16 +345,14 @@
                 i += 1;
             }
             for (const request of codexPendingPermissions) if (!usedPermissions.has(request.id)) parts.push(renderCodexPermission(request));
-            const skillBubble = selectedCodexSkill && codexReadyForInput()
-                ? `<div class="codex-skill-bubble" role="status" aria-label="Selected skill: ${escapeHtml(selectedCodexSkill.name)}"><span class="codex-skill-bubble-name">Skill · ${escapeHtml(selectedCodexSkill.name)}</span><button type="button" class="codex-skill-bubble-close" onclick="clearCodexSkillSelection()" title="Remove selected skill" aria-label="Remove selected skill">×</button></div>`
-                : '';
             const working = `<div class="codex-working-indicator" role="status" aria-label="Codex is working" title="Codex is working"${codexState.status === 'running' ? '' : ' style="display:none"'}></div>`;
             const template = document.createElement('template');
-            template.innerHTML = `<div class="codex-conversation">${skillBubble}${working}${parts.join('') || '<div class="codex-message event">Send a message to start Codex.</div>'}</div>`;
+            template.innerHTML = `<div class="codex-conversation">${working}${parts.join('') || '<div class="codex-message event">Send a message to start Codex.</div>'}</div>`;
             const next = template.content.firstElementChild;
             const current = container.firstElementChild;
             if (!current) container.appendChild(next);
             else syncCodexDom(current, next);
+            renderComposerSkillPrefix();
             container.scrollTop = shouldStickToBottom ? container.scrollHeight : previousScrollTop;
         }
 
@@ -423,9 +438,11 @@
             }, 300);
         }
 
-        function applyCodexState(state = {}) {
-            const presentationChanged = state.presentation !== undefined && state.presentation !== codexState.presentation;
+        function applyCodexState(state = {}, options = {}) {
             codexState = { ...codexState, ...state };
+            if (typeof syncComposerSendState === 'function') {
+                syncComposerSendState({ acknowledgeProviderState: Boolean(options.providerStateReceived) });
+            }
             const permission = document.getElementById('codex-permission-select');
             if (permission) {
                 const defaultOption = permission.querySelector('option[value="default"]');
@@ -459,11 +476,8 @@
             if (resume) resume.disabled = !codexReadyForInput();
             const fork = document.getElementById('codex-fork-btn');
             if (fork) fork.disabled = !codexReadyForInput();
-            const terminal = document.getElementById('codex-terminal-switch');
-            if (terminal) { terminal.textContent = codexState.presentation === 'terminal' ? 'CHAT' : 'TERM'; terminal.disabled = codexState.presentation === 'structured' && !codexState.canSwitchToTerminal; terminal.title = codexState.presentation === 'terminal' ? 'Return to Codex chat' : 'Switch to Codex terminal'; }
             renderCodexStateBar();
             renderCodexModelPanel();
-            if (presentationChanged) setClaudeModeEnabled(isClaudeSession());
             renderCodexChat();
         }
 
@@ -473,12 +487,32 @@
             const pending = Number(codexState.pendingPermissionCount || codexPendingPermissions.filter(item => item.status === 'pending').length) || 0;
             const subagents = Number(codexState.activeSubagentCount || 0) || 0;
             const parts = [];
+            const attention = [];
             if (codexState.aborting) parts.push('<span class="claude-state-pill warn">Stopping Codex…</span>');
             else if (codexState.resuming || codexResumeInFlight) parts.push('<span class="claude-state-pill">Resuming conversation…</span>');
-            if (pending || codexState.status === 'waiting_approval') parts.push(`<button type="button" class="claude-state-pill warn codex-approval-jump" onclick="jumpToCodexApproval()" title="Jump to pending approval" aria-label="Jump to pending approval">${pending || 1} approval${pending === 1 ? '' : 's'}<span aria-hidden="true">↓</span></button>`);
-            if (subagents) parts.push(`<span class="claude-state-pill">${subagents} subagent${subagents === 1 ? '' : 's'} running</span>`);
+            if (pending || codexState.status === 'waiting_approval') attention.push(`<button type="button" class="session-attention-pill approval codex-approval-jump" onclick="jumpToCodexApproval()" title="Jump to pending approval" aria-label="Jump to pending approval"><span aria-hidden="true">!</span>${pending || 1} approval${pending === 1 ? '' : 's'}<span aria-hidden="true">↓</span></button>`);
+            if (subagents) attention.push(`<button type="button" class="session-attention-pill subagent codex-subagent-jump" onclick="jumpToActiveCodexSubagent()" title="Jump to active subagent" aria-label="Jump to active subagent"><span aria-hidden="true">↳</span>${subagents} subagent${subagents === 1 ? '' : 's'} running</button>`);
             el.innerHTML = parts.join('');
             el.style.display = parts.length ? 'flex' : 'none';
+            renderSessionAttention(attention);
+        }
+
+        function jumpToActiveCodexSubagent(retry = true) {
+            const groups = Array.from(document.querySelectorAll('.codex-subagent-group'));
+            const target = groups[groups.length - 1];
+            if (!target) {
+                if (!retry) return false;
+                commitCodexChatRender();
+                requestAnimationFrame(() => jumpToActiveCodexSubagent(false));
+                return false;
+            }
+            target.open = true;
+            target.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+            target.classList.remove('codex-approval-focus');
+            void target.offsetWidth;
+            target.classList.add('codex-approval-focus');
+            setTimeout(() => target.classList.remove('codex-approval-focus'), 1800);
+            return true;
         }
 
         function jumpToCodexApproval() {
@@ -590,7 +624,7 @@
             }
             else if (event.type === 'permission-request' && event.request) { codexPendingPermissions = [...codexPendingPermissions.filter(item => item.id !== event.request.id), event.request]; }
             else if (event.type === 'permission-updated' && event.request) codexPendingPermissions = codexPendingPermissions.map(item => item.id === event.request.id ? event.request : item);
-            if (event.state) applyCodexState(event.state); else renderCodexChat();
+            if (event.state) applyCodexState(event.state, { providerStateReceived: true }); else renderCodexChat();
         }
 
         function sendCodexSettings(settings) { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-settings', settings })); }
@@ -1009,8 +1043,3 @@
             panel.innerHTML = '';
             updateTerminalControlsHeight();
         }
-        async function toggleCodexPresentation() {
-            const presentation = codexState.presentation === 'terminal' ? 'structured' : 'terminal';
-            const res = await fetchWithTimeout(`/api/sessions/${activeSessionId}/codex-presentation`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ presentation }) }, 30000);
-            if (!res.ok) alert((await res.json()).error || 'Unable to switch Codex interface');
-        }