glad-web 1.0.43 → 1.0.45

package/lib/session/session-manager.js

@@ -11,6 +11,7 @@ const ClaudeStructuredSession = require('../claude/structured-session');
 const CodexStructuredSession = require('../codex/structured-session');
 const ClaudeTranscriptRepository = require('../claude/transcript-repository');
 const CodexImageStore = require('../codex/image-store');
+const FileAttachmentStore = require('./file-attachment-store');
 
 function previewText(text, maxChars = 320) {
   if (!text) return '';
@@ -29,8 +30,16 @@ function imageMediaType(name) {
       : extension === '.gif' ? 'image/gif' : 'image/webp';
 }
 
+function promptWithFileReferences(text, attachments) {
+  const prompt = String(text || '').trim();
+  if (!attachments.length) return prompt;
+  const references = attachments.map(item => `- ${item.name}: ${item.path}`).join('\n');
+  const note = `The user attached the following local files. Read them if relevant to the request:\n${references}`;
+  return prompt ? `${prompt}\n\n${note}` : note;
+}
+
 class SessionManager extends EventEmitter {
-  constructor({ baseDir, renderHistoryTools, debugHistoryEnabled = false, logger, hasConnectedSessionClient, claudeTranscriptRepository, codexImageStore, claudeForkSession } = {}) {
+  constructor({ baseDir, renderHistoryTools, debugHistoryEnabled = false, logger, hasConnectedSessionClient, claudeTranscriptRepository, codexImageStore, fileAttachmentStore, claudeForkSession } = {}) {
     super();
     this.baseDir = baseDir || process.cwd();
     this.renderHistoryTools = renderHistoryTools || new Set();
@@ -39,6 +48,7 @@ class SessionManager extends EventEmitter {
     this.hasConnectedSessionClient = hasConnectedSessionClient || (() => false);
     this.sessions = new Map();
     this.codexImages = codexImageStore || new CodexImageStore({ logger: this.logger });
+    this.fileAttachmentStore = fileAttachmentStore || new FileAttachmentStore({ logger: this.logger });
     Object.defineProperties(this, {
       codexImageRoot: {
         get: () => this.codexImages.root,
@@ -67,7 +77,7 @@ class SessionManager extends EventEmitter {
       startTime: session.startTime,
       toolKey: session.tool.key,
       workingDirectory: this.getSessionWorkingDirectory(session),
-      mode: ['claude-structured', 'codex-structured'].includes(session.kind) ? (session.presentation || 'structured') : 'terminal',
+      mode: ['claude-structured', 'codex-structured'].includes(session.kind) ? 'structured' : 'terminal',
       hasUnreadCompletion: Boolean(session.hasUnreadCompletion),
       serverChanNotificationEnabled: Boolean(session.serverChanNotificationEnabled),
       timedInputCount: session.timedInputs
@@ -142,6 +152,8 @@ class SessionManager extends EventEmitter {
       hasConnectedWebClient: false,
       hasUnreadCompletion: false,
       timedInputs: new Map(),
+      fileAttachments: new Map(),
+      fileUploads: new Map(),
       write: data => this.write(id, data),
       isRunning: () => this.has(id) && ptyManager.isRunning(),
       kill: () => this.kill(id)
@@ -187,6 +199,8 @@ class SessionManager extends EventEmitter {
     });
     session.imageAttachments = new Map();
     session.imageUploads = new Map();
+    session.fileAttachments = new Map();
+    session.fileUploads = new Map();
 
     this.sessions.set(id, session);
     session.on('event', event => this.emit('claude-event', { sessionId: id, event, session }));
@@ -209,9 +223,10 @@ class SessionManager extends EventEmitter {
     const session = new CodexStructuredSession({ id, tool, workingDir: sessionDir, name: name || tool.displayName, logger: this.logger, options: codexOptions });
     session.imageAttachments = new Map();
     session.imageUploads = new Map();
+    session.fileAttachments = new Map();
+    session.fileUploads = new Map();
     this.sessions.set(id, session);
     session.on('event', event => this.emit('codex-event', { sessionId: id, event, session }));
-    session.on('output', data => this.emit('output', { sessionId: id, data, session }));
     session.on('exit', () => this.handleExit(session));
     session.ensureProcess().catch(error => {
       session.append({ kind: 'event', level: 'error', text: `Unable to start Codex app-server: ${error.message}` });
@@ -228,12 +243,26 @@ class SessionManager extends EventEmitter {
     return session.ptyManager.write(data);
   }
 
-  async sendClaudeInput(id, text, attachmentIds = []) {
+  sendTerminalFileInput(id, text, fileAttachmentIds = []) {
+    const session = this.get(id);
+    if (!session || ['claude-structured', 'codex-structured'].includes(session.kind)) return false;
+    const files = this.getFileAttachments(id, fileAttachmentIds);
+    const prompt = promptWithFileReferences(text, files);
+    if (!prompt) return false;
+    this.write(id, prompt.replace(/\n/g, '\r'));
+    const enterTimer = setTimeout(() => this.write(id, '\r'), 1000);
+    enterTimer.unref?.();
+    if (files.length) this.scheduleFileCleanup(id, files.map(item => item.id));
+    return true;
+  }
+
+  async sendClaudeInput(id, text, attachmentIds = [], fileAttachmentIds = []) {
     const session = this.get(id);
     if (!session || session.kind !== 'claude-structured') return false;
     const attachments = this.getImageAttachments(id, attachmentIds);
+    const files = this.getFileAttachments(id, fileAttachmentIds);
     const prompt = String(text || '');
-    if (!prompt.trim() && attachments.length === 0) return false;
+    if (!prompt.trim() && attachments.length === 0 && files.length === 0) return false;
     const prepared = await Promise.all(attachments.map(async attachment => ({
       id: attachment.id,
       name: attachment.name,
@@ -241,12 +270,37 @@ class SessionManager extends EventEmitter {
       mediaType: imageMediaType(attachment.name),
       data: (await fs.promises.readFile(attachment.path)).toString('base64')
     })));
-    this.markSessionInput(session, prompt || '[image attachment]');
-    const sent = session.sendUserMessage(prompt, prepared);
+    const agentPrompt = promptWithFileReferences(prompt, files);
+    this.markSessionInput(session, prompt || (files.length ? '[file attachment]' : '[image attachment]'));
+    const sent = session.sendUserMessage(prompt, prepared, {
+      agentText: agentPrompt,
+      displayAttachments: files.map(item => ({ id: item.id, name: item.name, size: item.size, kind: 'file' }))
+    });
     if (sent && attachments.length) this.scheduleImageCleanup(id, attachments.map(item => item.id));
+    if (sent && files.length) this.scheduleFileCleanup(id, files.map(item => item.id));
     return sent;
   }
 
+  appendFileChunk(id, input = {}, bytes) {
+    return this.fileAttachmentStore.appendChunk(this.get(id), input, bytes);
+  }
+
+  discardFileUpload(id, uploadId) {
+    return this.fileAttachmentStore.discardUpload(this.get(id), uploadId);
+  }
+
+  discardFileAttachment(id, attachmentId) {
+    return this.fileAttachmentStore.discardAttachment(this.get(id), attachmentId);
+  }
+
+  getFileAttachments(id, attachmentIds = []) {
+    return this.fileAttachmentStore.resolve(this.get(id), attachmentIds);
+  }
+
+  scheduleFileCleanup(id, attachmentIds) {
+    this.fileAttachmentStore.scheduleCleanup(this.get(id), attachmentIds);
+  }
+
   storeImageAttachment(id, bytes) {
     return this.codexImages.store(this.get(id), bytes);
   }
@@ -295,15 +349,21 @@ class SessionManager extends EventEmitter {
     this.scheduleImageCleanup(id, attachmentIds);
   }
 
-  async sendCodexInput(id, text, attachmentIds = [], skills = []) {
+  async sendCodexInput(id, text, attachmentIds = [], skills = [], fileAttachmentIds = []) {
     const session = this.get(id);
     if (!session || session.kind !== 'codex-structured') return false;
     const attachments = this.getCodexImageAttachments(id, attachmentIds);
+    const files = this.getFileAttachments(id, fileAttachmentIds);
     const prompt = String(text || '');
-    if (!prompt.trim() && attachments.length === 0) return false;
-    this.markSessionInput(session, prompt || '[image attachment]');
-    const sent = await session.sendUserMessage(prompt, attachments, skills);
+    if (!prompt.trim() && attachments.length === 0 && files.length === 0) return false;
+    const agentPrompt = promptWithFileReferences(prompt, files);
+    this.markSessionInput(session, prompt || (files.length ? '[file attachment]' : '[image attachment]'));
+    const sent = await session.sendUserMessage(prompt, attachments, skills, {
+      agentText: agentPrompt,
+      displayAttachments: files.map(item => ({ id: item.id, name: item.name, size: item.size, kind: 'file' }))
+    });
     if (sent && attachments.length) this.scheduleCodexImageCleanup(id, attachments.map(item => item.id));
+    if (sent && files.length) this.scheduleFileCleanup(id, files.map(item => item.id));
     return sent;
   }
 
@@ -409,8 +469,8 @@ class SessionManager extends EventEmitter {
   async forkCodex(id, threadId) {
     const session = this.get(id);
     if (!session || session.kind !== 'codex-structured') return null;
-    if (session.presentation !== 'structured' || session.status !== 'idle' || session.resuming) {
-      const error = new Error('Codex must be idle in chat mode before forking');
+    if (session.status !== 'idle' || session.resuming) {
+      const error = new Error('Codex must be idle before forking');
       error.statusCode = 409;
       throw error;
     }
@@ -444,20 +504,11 @@ class SessionManager extends EventEmitter {
     return session.listSkills(forceReload);
   }
 
-  switchCodexPresentation(id, presentation) {
-    const session = this.get(id);
-    if (!session || session.kind !== 'codex-structured') return Promise.resolve(false);
-    return presentation === 'terminal' ? session.switchToTerminal() : session.switchToStructured();
-  }
-
   resize(id, cols, rows) {
     const session = this.get(id);
     if (!session) return false;
     if (session.kind === 'claude-structured') return true;
-    if (session.kind === 'codex-structured') {
-      if (session.presentation === 'terminal') session.ptyManager.resize(cols, rows);
-      return true;
-    }
+    if (session.kind === 'codex-structured') return true;
     if (session.renderedHistory) {
       session.renderedHistory.resize(cols, rows);
     }
@@ -804,6 +855,7 @@ class SessionManager extends EventEmitter {
     this.clearTimedInputs(session);
     this.clearCodexImageUploads(session);
     this.clearCodexImageAttachments(session);
+    this.fileAttachmentStore.clear(session);
     this.disposeSessionHistory(session);
     this.sessions.delete(session.id);
     this.emit('exit', { sessionId: session.id, session });

package/lib/web/claude.js

@@ -7,19 +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 attachmentButton = document.getElementById('attachment-btn');
+            const scheduleButton = document.getElementById('schedule-send-btn');
+            if (actionRail && attachmentButton && scheduleButton) {
+                actionRail.prepend(scheduleButton);
+                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 ? 'block' : 'none';
-            document.getElementById('codex-control-panel').style.display = codexChat ? 'block' : 'none';
-            document.getElementById('codex-terminal-switch').style.display = isCodexSession() ? '' : 'none';
-            document.getElementById('timer-btn').style.display = '';
-            document.getElementById('attach-image-btn').style.display = structured ? '' : 'none';
+            document.getElementById('claude-control-panel').style.display = enabled ? 'flex' : 'none';
+            document.getElementById('codex-control-panel').style.display = codexChat ? 'flex' : '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();
         }
 
@@ -94,7 +109,7 @@
                 const option = select.selectedOptions && select.selectedOptions[0];
                 const label = pickerLabelFromOption(option);
                 const fullValue = pickerFullValue(option);
-                button.textContent = prefix;
+                setActionButtonLabel(button, prefix);
                 button.title = type === 'model'
                     ? `${fullValue || label || prefix} · ${effortLabel(claudeState.effort)}`
                     : (fullValue || label || prefix);
@@ -252,12 +267,12 @@
             const usageBtn = document.getElementById('claude-usage-btn');
             if (usageBtn) {
                 usageBtn.disabled = claudeUsagePending || claudeStatus === 'thinking';
-                usageBtn.textContent = claudeUsagePending ? 'Loading' : 'Usage';
+                setActionButtonLabel(usageBtn, claudeUsagePending ? 'Loading' : 'Usage');
             }
             const contextBtn = document.getElementById('claude-context-btn');
             if (contextBtn) {
                 contextBtn.disabled = claudeContextPending || claudeStatus === 'thinking';
-                contextBtn.textContent = claudeContextPending ? 'Loading' : 'Context';
+                setActionButtonLabel(contextBtn, claudeContextPending ? 'Loading' : 'Context');
             }
             renderClaudeStateBar();
             renderClaudeChat();
@@ -304,8 +319,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>`);
             }
@@ -314,6 +330,7 @@
             }
             el.innerHTML = parts.join('');
             el.style.display = parts.length ? 'flex' : 'none';
+            renderSessionAttention(attention);
         }
 
         function jumpToClaudeApproval() {
@@ -831,7 +848,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>`;

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;
         }
 
@@ -424,7 +439,6 @@
         }
 
         function applyCodexState(state = {}) {
-            const presentationChanged = state.presentation !== undefined && state.presentation !== codexState.presentation;
             codexState = { ...codexState, ...state };
             const permission = document.getElementById('codex-permission-select');
             if (permission) {
@@ -445,25 +459,22 @@
                 sandbox.value = codexState.sandboxMode || 'default';
             }
             const modelButton = document.getElementById('codex-model-btn');
-            if (modelButton) modelButton.textContent = 'Model';
+            if (modelButton) setActionButtonLabel(modelButton, 'Model');
             const abort = document.getElementById('codex-abort-btn');
             if (abort) {
                 abort.disabled = !codexState.canAbort;
-                abort.textContent = codexState.aborting ? 'Aborting…' : 'Abort';
+                setActionButtonLabel(abort, codexState.aborting ? 'Aborting…' : 'Abort');
             }
             const compact = document.getElementById('codex-compact-btn');
-            if (compact) { compact.disabled = !codexState.canCompact; compact.textContent = codexState.compacting ? 'Compacting' : 'Compact'; }
+            if (compact) { compact.disabled = !codexState.canCompact; setActionButtonLabel(compact, codexState.compacting ? 'Compacting' : 'Compact'); }
             const skills = document.getElementById('codex-skills-btn');
             if (skills) { skills.disabled = !codexReadyForInput(); skills.classList.toggle('primary', Boolean(selectedCodexSkill)); }
             const resume = document.getElementById('codex-resume-btn');
             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 +484,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() {
@@ -1009,8 +1040,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');
-        }