glad-web 1.0.34 → 1.0.36

package/lib/codex/structured-session.js

@@ -197,6 +197,7 @@ class CodexStructuredSession extends EventEmitter {
     this.status = 'idle';
     this.presentation = 'structured';
     this.messages = [];
+    this.replayingHistory = false;
     this.pendingPermissions = new Map();
     this.completedPermissions = [];
     this.threadId = options.resume || null;
@@ -251,13 +252,52 @@ class CodexStructuredSession extends EventEmitter {
 
   snapshot() {
     return { id: this.id, name: this.name, tool: this.tool.displayName, toolKey: this.tool.key,
-      status: this.status, state: this.getControlState(), messages: this.messages,
+      status: this.status, state: this.getControlState(), messages: this.messages.map(item => this.toPublicMessage(item)),
       pendingPermissions: [
         ...this.completedPermissions,
         ...Array.from(this.pendingPermissions.values()).map(item => item.public)
       ] };
   }
 
+  toPublicMessage(item) {
+    if (!item || typeof item !== 'object') return item;
+    const message = { ...item };
+    const isSubagent = Boolean(message.threadId && this.threadId && message.threadId !== this.threadId);
+    let hasDetail = false;
+
+    if (message.kind === 'tool') {
+      for (const field of ['result', 'input', 'changes', 'error', 'agentsStates']) {
+        const value = message[field];
+        if (value != null && value !== '' && (!Array.isArray(value) || value.length)) hasDetail = true;
+        delete message[field];
+      }
+      if (item.error) message.hasError = true;
+    }
+    if (isSubagent && ['user', 'assistant', 'reasoning', 'event'].includes(message.kind)) {
+      if (message.text) hasDetail = true;
+      delete message.text;
+      delete message.skills;
+    }
+    if (message.kind === 'reasoning') {
+      if (message.text) hasDetail = true;
+      delete message.text;
+    }
+    message.hasDetail = hasDetail;
+    message.detailRevision = Number(item.updatedAt || item.createdAt || 0);
+    return message;
+  }
+
+  getMessageDetails({ ids = [], threadId = null } = {}) {
+    const requestedIds = new Set((Array.isArray(ids) ? ids : [])
+      .map(value => String(value || '')).filter(Boolean));
+    const requestedThreadId = threadId == null ? '' : String(threadId);
+    const messages = this.messages.filter(item => {
+      if (requestedThreadId && String(item.threadId || '') === requestedThreadId) return true;
+      return requestedIds.has(String(item.id || ''));
+    }).map(item => ({ ...item, detailLoaded: true }));
+    return { messages, threadId: requestedThreadId || null };
+  }
+
   getControlState() {
     const activeSubagentCount = Array.from(this.threadTurns.entries())
       .filter(([threadId, turn]) => threadId !== this.threadId && turn?.status === 'running').length;
@@ -292,12 +332,17 @@ class CodexStructuredSession extends EventEmitter {
   isRunning() { return this.running && (this.presentation !== 'terminal' || Boolean(this.terminalSession)); }
 
   createItem(item) { return { id: crypto.randomUUID(), createdAt: Date.now(), ...item }; }
-  append(item) { const next = this.createItem(item); this.messages.push(next); this.emitEvent({ type: 'message', message: next }); return next; }
+  append(item) {
+    const next = this.createItem(item);
+    this.messages.push(next);
+    if (!this.replayingHistory) this.emitEvent({ type: 'message', message: this.toPublicMessage(next) });
+    return next;
+  }
   patch(id, patch) {
     const item = this.messages.find(message => message.id === id);
     if (!item) return null;
     Object.assign(item, { updatedAt: Date.now() }, patch);
-    this.emitEvent({ type: 'message-updated', message: item });
+    if (!this.replayingHistory) this.emitEvent({ type: 'message-updated', message: this.toPublicMessage(item) });
     return item;
   }
   emitEvent(event) { this.emit('event', event); }
@@ -1064,10 +1109,12 @@ class CodexStructuredSession extends EventEmitter {
     if (!options.preserveEffort) this.effort = thread?.reasoningEffort || thread?.reasoning_effort || this.effort;
     this.tokenUsage = thread?.tokenUsage || thread?.token_usage || this.tokenUsage;
     this.messages = [];
+    this.replayingHistory = true;
     this.completedPermissions = [];
     this.turnContexts.clear();
     this.providerItemContexts.clear();
-    for (const turn of thread?.turns || []) {
+    try {
+      for (const turn of thread?.turns || []) {
       const status = turn.status === 'failed' ? 'failed' : turn.status === 'interrupted' ? 'cancelled' : 'completed';
       const startedAt = Number(turn.startedAt || turn.createdAt || 0);
       const completedAt = Number(turn.completedAt || turn.updatedAt || 0);
@@ -1086,9 +1133,12 @@ class CodexStructuredSession extends EventEmitter {
         || (startedAtMs && completedAtMs && completedAtMs >= startedAtMs ? completedAtMs - startedAtMs : null);
       this.append({ kind: 'turn-end', turnId: turn.id, status, durationMs,
         ...(completedAtMs ? { createdAt: completedAtMs } : {}) });
+      }
+      if (eventText) this.append({ kind: 'event', level: 'info', text: eventText });
+    } finally {
+      this.replayingHistory = false;
     }
-    if (eventText) this.append({ kind: 'event', level: 'info', text: eventText });
-    this.emitEvent({ type: 'history-reset', messages: this.messages });
+    this.emitEvent({ type: 'history-reset', messages: this.messages.map(item => this.toPublicMessage(item)) });
     this.emitEvent({ type: 'state', state: this.getControlState() });
   }
 

package/lib/commands/web.js

@@ -377,6 +377,16 @@ async function webCommand(options) {
         if (payload.type === 'codex-compact') {
           sessionManager.compactCodexContext(sessionId).catch(error => logger.error(`Codex compact error: ${error.message}`));
         }
+        if (payload.type === 'codex-detail-request') {
+          const codex = sessionManager.get(sessionId);
+          if (codex && codex.kind === 'codex-structured' && codex.presentation === 'structured') {
+            ws.send(JSON.stringify({
+              type: 'codex-detail-response',
+              requestId: payload.requestId || null,
+              detail: codex.getMessageDetails({ ids: payload.ids, threadId: payload.threadId })
+            }));
+          }
+        }
         if (payload.type === 'codex-abort') {
           sessionManager.abortCodex(sessionId);
         }

package/lib/web/codex.js

@@ -10,6 +10,11 @@
             if (status === 'completed') return item.exitCode && item.exitCode !== 0 ? 'failed' : 'completed';
             return status;
         }
+        function codexMessageNeedsDetail(item) {
+            if (!item?.hasDetail) return false;
+            const loadedRevision = Number(codexDetailRevisions.get(String(item.id)) || 0);
+            return !item.detailLoaded || loadedRevision < Number(item.detailRevision || 0);
+        }
         function formatCodexDuration(durationMs) {
             const value = Number(durationMs || 0);
             if (!(value > 0)) return '';
@@ -108,7 +113,7 @@
         }
         function renderCodexTool(item, permission = null) {
             const status = codexToolStatus(item);
-            const isError = status === 'failed' || Boolean(item.error) || (item.exitCode != null && item.exitCode !== 0);
+            const isError = status === 'failed' || Boolean(item.error) || Boolean(item.hasError) || (item.exitCode != null && item.exitCode !== 0);
             const runningClass = status === 'running' ? ' running' : '';
             if (item.name === 'CodexPatch') {
                 return `<div class="codex-tool${isError ? ' error' : ''}">${renderCodexPatch(item)}${permission ? renderCodexPermission(permission, true) : ''}</div>`;
@@ -138,7 +143,11 @@
             }).join('');
             const label = running ? 'Working' : failed ? 'Work finished with errors' : duration ? `Worked for ${duration}` : 'Worked';
             const key = items.map(item => item.id || item.providerId || '').join('-');
-            return `<details class="codex-work-group" data-codex-key="group-${escapeHtml(key)}"><summary>${label} · ${items.length} ${items.length === 1 ? 'tool' : 'tools'}</summary><div class="codex-work-group-body">${tools}</div></details>`;
+            const allDetailIds = items.filter(item => item.hasDetail).map(item => item.id).filter(Boolean);
+            const detailIds = items.filter(codexMessageNeedsDetail).map(item => item.id).filter(Boolean);
+            const lazy = detailIds.length
+                ? '<div class="codex-lazy-detail">Open to load tool details…</div>' : '';
+            return `<details class="codex-work-group" data-codex-key="group-${escapeHtml(key)}"${allDetailIds.length ? ` data-codex-detail-ids="${escapeHtml(allDetailIds.join(','))}"` : ''}><summary>${label} · ${items.length} ${items.length === 1 ? 'tool' : 'tools'}</summary><div class="codex-work-group-body">${tools}${lazy}</div></details>`;
         }
         function isCodexSubagentItem(item) {
             return Boolean(item?.threadId && codexState.threadId && item.threadId !== codexState.threadId);
@@ -159,8 +168,13 @@
             if (tools.length) counts.push(`${tools.length} ${tools.length === 1 ? 'tool' : 'tools'}`);
             if (messages.length) counts.push(`${messages.length} ${messages.length === 1 ? 'message' : 'messages'}`);
             const label = running ? 'Subagent working' : duration ? `Subagent worked for ${duration}` : 'Subagent worked';
+            const needsDetail = items.some(codexMessageNeedsDetail);
+            const deferContent = needsDetail && !items.some(item => item.detailLoaded);
             const body = [];
-            for (let i = 0; i < content.length;) {
+            if (needsDetail) {
+                body.push(`<div class="codex-lazy-detail">${deferContent ? 'Open to load subagent details…' : 'Updating subagent details…'}</div>`);
+            }
+            for (let i = 0; !deferContent && i < content.length;) {
                 const item = content[i];
                 if (item.kind === 'tool') {
                     const group = [];
@@ -171,14 +185,14 @@
                     continue;
                 }
                 if (item.kind === 'assistant' || item.kind === 'user') {
-                    body.push(`<div class="codex-subagent-message${item.kind === 'user' ? ' task' : ''}">${renderMarkdown(item.text || '')}</div>`);
+                    if (item.text) body.push(`<div class="codex-subagent-message${item.kind === 'user' ? ' task' : ''}">${renderMarkdown(item.text)}</div>`);
                 } else if (item.text) {
                     body.push(`<div class="codex-subagent-message">${codexText(item.text)}</div>`);
                 }
                 i += 1;
             }
             const suffix = counts.length ? ` · ${counts.join(' · ')}` : '';
-            return `<details class="codex-work-group codex-subagent-group" data-codex-key="subagent-${escapeHtml(threadId)}"><summary>${escapeHtml(label + suffix)}</summary><div class="codex-work-group-body">${body.join('')}</div></details>`;
+            return `<details class="codex-work-group codex-subagent-group" data-codex-key="subagent-${escapeHtml(threadId)}" data-codex-thread-id="${escapeHtml(threadId)}"><summary>${escapeHtml(label + suffix)}</summary><div class="codex-work-group-body">${body.join('')}</div></details>`;
         }
         function renderCodexMessageTime(item, finalOnly = false) {
             if (!item || (finalOnly && item.streaming)) return '';
@@ -323,6 +337,88 @@
             container.scrollTop = shouldStickToBottom ? container.scrollHeight : previousScrollTop;
         }
 
+        function installCodexLazyDetailHandler() {
+            const container = document.getElementById('codex-chat-container');
+            if (!container || container.dataset.lazyDetailHandler === 'true') return;
+            container.dataset.lazyDetailHandler = 'true';
+            container.addEventListener('toggle', handleCodexLazyToggle, true);
+        }
+
+        function handleCodexLazyToggle(event) {
+            const group = event.target;
+            if (!(group instanceof HTMLDetailsElement) || !group.open || !group.classList.contains('codex-work-group')) return;
+            const threadId = group.dataset.codexThreadId || '';
+            const ids = String(group.dataset.codexDetailIds || '').split(',').filter(Boolean)
+                .filter(id => codexMessageNeedsDetail(codexMessages.find(item => item.id === id)));
+            if (threadId && codexMessages.some(item => item.threadId === threadId && codexMessageNeedsDetail(item))) {
+                void requestCodexDetails({ threadId });
+            }
+            else if (ids.length) void requestCodexDetails({ ids });
+        }
+
+        function requestCodexDetails({ ids = [], threadId = '' } = {}) {
+            if (currentSocket?.readyState !== 1) return Promise.resolve(false);
+            const normalizedIds = Array.from(new Set(ids.map(value => String(value || '')).filter(Boolean))).sort();
+            const key = threadId ? `thread:${threadId}` : `ids:${normalizedIds.join(',')}`;
+            for (const pending of codexDetailRequests.values()) {
+                if (pending.key === key) return pending.promise;
+            }
+            const requestId = `detail-${++codexDetailRequestSeq}`;
+            let resolveRequest;
+            const promise = new Promise(resolve => { resolveRequest = resolve; });
+            const timer = setTimeout(() => {
+                const pending = codexDetailRequests.get(requestId);
+                if (!pending) return;
+                codexDetailRequests.delete(requestId);
+                pending.resolve(false);
+            }, 15000);
+            codexDetailRequests.set(requestId, { key, promise, resolve: resolveRequest, timer });
+            currentSocket.send(JSON.stringify({
+                type: 'codex-detail-request',
+                requestId,
+                ...(threadId ? { threadId } : { ids: normalizedIds })
+            }));
+            return promise;
+        }
+
+        function applyCodexDetailResponse(response) {
+            const pending = codexDetailRequests.get(response.requestId);
+            if (!pending) return;
+            const detail = response.detail || {};
+            for (const message of detail.messages || []) {
+                const index = codexMessages.findIndex(item => item.id === message.id);
+                if (index >= 0) codexMessages[index] = { ...codexMessages[index], ...message, detailLoaded: true };
+                else codexMessages.push({ ...message, detailLoaded: true });
+                codexDetailRevisions.set(String(message.id), Number(message.updatedAt || message.createdAt || 0));
+            }
+            clearTimeout(pending.timer);
+            codexDetailRequests.delete(response.requestId);
+            pending.resolve(true);
+            renderCodexChat();
+        }
+
+        function codexDetailIsOpen(message) {
+            if (!message?.id) return false;
+            if (isCodexSubagentItem(message)) {
+                return Array.from(document.querySelectorAll('.codex-subagent-group[open]'))
+                    .some(group => group.dataset.codexKey === `subagent-${message.threadId}`);
+            }
+            return Array.from(document.querySelectorAll('.codex-work-group[open][data-codex-detail-ids]'))
+                .some(group => String(group.dataset.codexDetailIds || '').split(',').includes(String(message.id)));
+        }
+
+        function scheduleCodexDetailRefresh(message) {
+            if (!message || !codexDetailIsOpen(message)) return;
+            if (!message.id || (!message.detailLoaded && !isCodexSubagentItem(message))) return;
+            codexDetailRefreshIds.add(String(message.id));
+            clearTimeout(codexDetailRefreshTimer);
+            codexDetailRefreshTimer = setTimeout(() => {
+                const ids = Array.from(codexDetailRefreshIds);
+                codexDetailRefreshIds.clear();
+                if (ids.length) void requestCodexDetails({ ids });
+            }, 300);
+        }
+
         function applyCodexState(state = {}) {
             const presentationChanged = state.presentation !== undefined && state.presentation !== codexState.presentation;
             codexState = { ...codexState, ...state };
@@ -379,7 +475,18 @@
             if (!pending.length) return false;
             const request = pending[codexApprovalJumpIndex % pending.length];
             codexApprovalJumpIndex = (codexApprovalJumpIndex + 1) % pending.length;
-            return focusCodexApproval(String(request.id || ''));
+            void loadAndFocusCodexApproval(request);
+            return true;
+        }
+
+        async function loadAndFocusCodexApproval(request) {
+            const permissionId = String(request?.id || '');
+            const message = codexMessages.find(item => String(item.providerId || item.id || '') === permissionId);
+            if (message && codexMessageNeedsDetail(message)) {
+                if (isCodexSubagentItem(message)) await requestCodexDetails({ threadId: String(message.threadId) });
+                else await requestCodexDetails({ ids: [String(message.id)] });
+            }
+            requestAnimationFrame(() => focusCodexApproval(permissionId));
         }
 
         function focusCodexApproval(permissionId, retry = true) {
@@ -443,9 +550,33 @@
 
         function applyCodexEvent(event) {
             if (!event) return;
-            if (event.type === 'message' && event.message) codexMessages.push(event.message);
-            else if (event.type === 'message-updated' && event.message) { const i = codexMessages.findIndex(item => item.id === event.message.id); if (i >= 0) codexMessages[i] = event.message; else codexMessages.push(event.message); }
-            else if (event.type === 'history-reset') codexMessages = event.messages || [];
+            if (event.type === 'message' && event.message) {
+                codexMessages.push(event.message);
+                scheduleCodexDetailRefresh(event.message);
+            }
+            else if (event.type === 'message-updated' && event.message) {
+                const i = codexMessages.findIndex(item => item.id === event.message.id);
+                if (i >= 0) {
+                    const existing = codexMessages[i];
+                    codexMessages[i] = existing.detailLoaded
+                        ? { ...existing, ...event.message, detailLoaded: true }
+                        : event.message;
+                    scheduleCodexDetailRefresh(codexMessages[i]);
+                } else codexMessages.push(event.message);
+            }
+            else if (event.type === 'history-reset') {
+                codexMessages = event.messages || [];
+                codexDetailRevisions.clear();
+                clearTimeout(codexDetailRefreshTimer);
+                codexDetailRefreshTimer = null;
+                codexDetailRefreshIds.clear();
+                for (const pending of codexDetailRequests.values()) {
+                    clearTimeout(pending.timer);
+                    pending.resolve(false);
+                }
+                codexDetailRequests.clear();
+                document.getElementById('codex-chat-container')?.replaceChildren();
+            }
             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();

package/lib/web/core.js

@@ -52,6 +52,11 @@
         let selectedCodexSkill = null;
         let codexRenderFrame = null;
         let codexApprovalJumpIndex = 0;
+        let codexDetailRequestSeq = 0;
+        let codexDetailRequests = new Map();
+        let codexDetailRevisions = new Map();
+        let codexDetailRefreshTimer = null;
+        let codexDetailRefreshIds = new Set();
         const modifiers = { ctrl: false };
 
         function log(msg) {

package/lib/web/session.js

@@ -143,6 +143,12 @@
             codexSkillQuery = '';
             codexSkillError = '';
             selectedCodexSkill = null;
+            codexDetailRequestSeq = 0;
+            codexDetailRequests = new Map();
+            codexDetailRevisions = new Map();
+            clearTimeout(codexDetailRefreshTimer);
+            codexDetailRefreshTimer = null;
+            codexDetailRefreshIds = new Set();
             document.getElementById('codex-model-panel').classList.remove('active');
             document.getElementById('codex-resume-panel').classList.remove('active');
             document.getElementById('codex-fork-panel').classList.remove('active');
@@ -152,6 +158,7 @@
             codexState = { permissionMode: 'default', sandboxMode: 'default', effectivePermissionMode: null, effectiveSandboxMode: null, model: null, effort: null, status: 'idle', threadId: null, presentation: 'structured', models: [], canAbort: false, canCompact: false, compacting: false, canSwitchToTerminal: false, canSwitchToStructured: false };
             setClaudeModeEnabled(false);
             applyCodexState(codexState);
+            installCodexLazyDetailHandler();
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
             currentSocket = new WebSocket(protocol + '//' + window.location.host + '?sessionId=' + sessionId);
             currentSocket.onmessage = (e) => {
@@ -161,6 +168,7 @@
                     codexPendingPermissions = msg.snapshot.pendingPermissions || [];
                     applyCodexState(msg.snapshot.state || {});
                 }
+                if (msg.type === 'codex-detail-response' && msg.detail) applyCodexDetailResponse(msg);
                 if (msg.type === 'codex-event') {
                     applyCodexEvent(msg.event);
                     if (msg.event?.type === 'presentation' && msg.event.presentation === 'terminal') {

package/lib/web/styles.css

@@ -85,6 +85,7 @@
         #claude-chat-container { display: none; flex: 1; min-height: 0; overflow-y: auto; background: #050505; padding: 12px 12px 24px 12px; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
         .claude-conversation { width: min(100%, var(--chat-content-max)); min-height: 100%; margin: 0 auto; }
         #codex-chat-container { display: none; flex: 1; min-height: 0; overflow-y: auto; background: #050505; padding: 12px 12px 24px 12px; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
+        .codex-lazy-detail { padding: 10px 12px; color: var(--text-dim); font-size: 12px; }
         .codex-conversation { width: min(100%, var(--chat-content-max)); margin: 0 auto; }
         .codex-working-indicator, .claude-working-indicator { position: sticky; top: 0; z-index: 4; width: 28px; height: 28px; margin: 0 0 -28px auto; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(28,28,30,.68); box-shadow: 0 5px 16px rgba(0,0,0,.24); backdrop-filter: blur(8px); pointer-events: none; }
         .codex-working-indicator::after, .claude-working-indicator::after { content: ''; position: absolute; inset: 8px; border: 1.5px solid rgba(255,255,255,.7); border-top-color: transparent; border-radius: 50%; animation: codex-spin .8s linear infinite; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glad-web",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "bin": {
     "glad": "bin/cli.js"