glad-web 1.0.23 → 1.0.24

package/lib/codex/structured-session.js

@@ -122,6 +122,7 @@ class CodexStructuredSession extends EventEmitter {
     this.threadId = options.resume || null;
     this.currentTurnId = null;
     this.currentTurnStartedAt = null;
+    this.tokenUsage = null;
     this.permissionMode = normalizePermissionMode(options.permissionMode);
     this.sandboxMode = normalizeSandboxMode(options.sandboxMode);
     this.effectivePermissionMode = null;
@@ -129,6 +130,10 @@ class CodexStructuredSession extends EventEmitter {
     this.configPermissionMode = null;
     this.configSandboxMode = null;
     this.configSandboxWorkspaceWrite = {};
+    this.configModel = null;
+    this.configEffort = null;
+    this.hasModelOverride = Boolean(options.model);
+    this.hasEffortOverride = Boolean(options.effort);
     this.model = options.model || null;
     this.effort = options.effort || null;
     this.models = [];
@@ -325,6 +330,10 @@ class CodexStructuredSession extends EventEmitter {
   }
 
   handleNotification(method, params) {
+    if (method === 'thread/tokenUsage/updated') {
+      this.tokenUsage = params.tokenUsage || params.usage || params;
+      return;
+    }
     if (method === 'turn/started') {
       this.currentTurnId = params.turn?.id || params.turnId || this.currentTurnId;
       this.currentTurnStartedAt = Date.now();
@@ -338,6 +347,10 @@ class CodexStructuredSession extends EventEmitter {
         : params.turn?.status === 'interrupted' ? 'cancelled' : 'completed';
       this.append({ kind: 'turn-end', turnId: completedTurnId, status: turnStatus,
         durationMs: this.currentTurnStartedAt ? Date.now() - this.currentTurnStartedAt : null });
+      for (const item of this.messages.filter(message => message.kind === 'tool'
+        && message.turnId === completedTurnId && ['running', 'inProgress'].includes(message.toolStatus))) {
+        this.patch(item.id, { toolStatus: turnStatus === 'failed' ? 'failed' : 'completed' });
+      }
       for (const pending of this.pendingPermissions.values()) {
         this.recordPermission(pending.public, 'denied', 'abort');
       }
@@ -401,10 +414,13 @@ class CodexStructuredSession extends EventEmitter {
       else this.append({ kind, providerId: itemId, text: delta, streaming: true });
       return;
     }
-    if (method.startsWith('item/')) this.applyProviderItem(params.item || params);
+    if (method.startsWith('item/')) {
+      const inferredStatus = method === 'item/completed' ? 'completed' : method === 'item/started' ? 'running' : null;
+      this.applyProviderItem(params.item || params, inferredStatus);
+    }
   }
 
-  applyProviderItem(raw) {
+  applyProviderItem(raw, inferredStatus = null) {
     if (!raw || typeof raw !== 'object') return;
     const providerId = String(raw.id || '');
     const existing = providerId && this.messages.find(item => item.providerId === providerId);
@@ -413,8 +429,10 @@ class CodexStructuredSession extends EventEmitter {
     if (!kind) return;
     const text = kind === 'user' ? textFromInputItems(raw.content) : kind === 'assistant' ? String(raw.text || '')
       : kind === 'reasoning' ? (raw.text || (Array.isArray(raw.summary) ? raw.summary.join('\n') : Array.isArray(raw.content) ? raw.content.join('\n') : '')) : '';
+    const inferredToolStatus = inferredStatus === 'completed' && ['failed', 'declined'].includes(raw.status)
+      ? raw.status : inferredStatus;
     const patch = kind === 'tool' ? { ...toolDetails(raw), turnId: raw.turnId || this.currentTurnId,
-      toolStatus: raw.status || 'running' } : { text, turnId: raw.turnId || this.currentTurnId, streaming: false };
+      toolStatus: inferredToolStatus || raw.status || 'running' } : { text, turnId: raw.turnId || this.currentTurnId, streaming: false };
     if (existing) {
       this.patch(existing.id, patch);
     } else if (kind === 'user') {
@@ -432,11 +450,12 @@ class CodexStructuredSession extends EventEmitter {
     do {
       const result = await this.request('model/list', { cursor, limit: 100, includeHidden: false });
       for (const item of result?.data || []) models.push({ id: item.id || item.model, label: item.displayName || item.model || item.id,
-        efforts: (item.supportedReasoningEfforts || []).map(value => value.reasoningEffort), defaultEffort: item.defaultReasoningEffort || null });
+        efforts: (item.supportedReasoningEfforts || []).map(value => value.reasoningEffort), defaultEffort: item.defaultReasoningEffort || null,
+        isDefault: Boolean(item.isDefault), contextWindow: Number(item.contextWindow || item.context_window || 0) || null });
       cursor = result?.nextCursor || null;
     } while (cursor);
     this.models = models;
-    if (!this.model && models[0]) this.model = models[0].id;
+    if (!this.model) this.model = (models.find(item => item.isDefault) || models[0])?.id || null;
     if (!this.effort) this.effort = models.find(item => item.id === this.model)?.defaultEffort || 'medium';
     this.emitEvent({ type: 'state', state: this.getControlState() });
     return models;
@@ -448,8 +467,12 @@ class CodexStructuredSession extends EventEmitter {
     this.configPermissionMode = config.approval_policy || null;
     this.configSandboxMode = normalizeSandboxMode(config.sandbox_mode);
     this.configSandboxWorkspaceWrite = config.sandbox_workspace_write || {};
+    this.configModel = config.model || null;
+    this.configEffort = config.model_reasoning_effort || null;
     if (!this.permissionMode) this.effectivePermissionMode = this.configPermissionMode;
     if (!this.sandboxMode) this.effectiveSandboxMode = this.configSandboxMode;
+    if (!this.hasModelOverride && this.configModel) this.model = this.configModel;
+    if (!this.hasEffortOverride && this.configEffort) this.effort = this.configEffort;
     this.emitEvent({ type: 'state', state: this.getControlState() });
     return config;
   }
@@ -474,11 +497,66 @@ class CodexStructuredSession extends EventEmitter {
     }));
   }
 
+  contextStatus() {
+    const usage = this.tokenUsage || {};
+    const selectedModel = this.models.find(item => item.id === this.model);
+    const contextWindow = Number(usage.modelContextWindow || usage.model_context_window
+      || usage.contextWindow || usage.context_window || selectedModel?.contextWindow || 0);
+    const last = usage.last || usage.lastTokenUsage || usage.last_token_usage || {};
+    const usedTokens = Number(last.totalTokens || last.total_tokens || usage.contextTokens
+      || usage.context_tokens || 0);
+    if (!contextWindow) {
+      return !this.threadId && !this.tokenUsage
+        ? { usedTokens: 0, contextWindow: null, remainingTokens: null, remainingPercent: 100 }
+        : null;
+    }
+    return {
+      usedTokens: Math.max(0, usedTokens),
+      contextWindow,
+      remainingTokens: Math.max(0, contextWindow - usedTokens),
+      remainingPercent: Math.max(0, Math.min(100, Math.round((contextWindow - usedTokens) / contextWindow * 100)))
+    };
+  }
+
+  async showStatus() {
+    if (this.presentation !== 'structured') return false;
+    await this.ensureProcess();
+    const accountResult = await this.request('account/read', { refreshToken: false });
+    const account = accountResult?.account || null;
+    let rateLimits = null;
+    if (account?.type === 'chatgpt') {
+      try {
+        const result = await this.request('account/rateLimits/read', {});
+        rateLimits = result?.rateLimits || null;
+      } catch (error) {
+        this.logger.debugInfo?.(`[codex-app-server] account/rateLimits/read failed: ${error.message}`);
+      }
+    }
+    this.append({ kind: 'status', title: 'Codex status', model: this.model, effort: this.effort,
+      account, rateLimits, context: this.contextStatus() });
+    return true;
+  }
+
   async updateSettings(settings = {}) {
+    const configEdits = [];
+    if (settings.model) configEdits.push({ keyPath: 'model', value: String(settings.model), mergeStrategy: 'upsert' });
+    if (settings.effort) configEdits.push({ keyPath: 'model_reasoning_effort', value: String(settings.effort), mergeStrategy: 'upsert' });
+    if (configEdits.length) {
+      await this.ensureProcess();
+      await this.request('config/batchWrite', { edits: configEdits });
+      if (settings.model) this.configModel = String(settings.model);
+      if (settings.effort) this.configEffort = String(settings.effort);
+    }
     if (settings.permissionMode !== undefined) this.permissionMode = normalizePermissionMode(settings.permissionMode);
     if (settings.sandboxMode !== undefined) this.sandboxMode = normalizeSandboxMode(settings.sandboxMode);
-    if (settings.model !== undefined) this.model = settings.model || null;
-    if (settings.effort !== undefined) this.effort = settings.effort || null;
+    if (settings.model !== undefined) {
+      this.hasModelOverride = Boolean(settings.model);
+      this.model = settings.model || this.configModel || null;
+    }
+    if (settings.effort !== undefined) {
+      this.hasEffortOverride = Boolean(settings.effort);
+      this.effort = settings.effort || this.configEffort || null;
+    }
     const needsConfigDefaults = (settings.permissionMode !== undefined && !this.permissionMode)
       || (settings.sandboxMode !== undefined && !this.sandboxMode);
     if (needsConfigDefaults && this.presentation === 'structured') {
@@ -497,8 +575,8 @@ class CodexStructuredSession extends EventEmitter {
           this.sandboxMode ? {} : this.configSandboxWorkspaceWrite);
         if (sandboxPolicy) params.sandboxPolicy = sandboxPolicy;
       }
-      if (settings.model !== undefined) params.model = this.model;
-      if (settings.effort !== undefined) params.effort = this.effort;
+      if (settings.model !== undefined) params.model = this.hasModelOverride ? this.model : null;
+      if (settings.effort !== undefined) params.effort = this.hasEffortOverride ? this.effort : null;
       if (Object.keys(params).length > 1) await this.request('thread/settings/update', params);
     }
     this.emitEvent({ type: 'state', state: this.getControlState() });
@@ -512,7 +590,8 @@ class CodexStructuredSession extends EventEmitter {
     this.append({ kind: 'user', text: prompt });
     await this.ensureProcess();
     if (!this.threadId) {
-      const params = { model: this.model, cwd: this.workingDir };
+      const params = { cwd: this.workingDir };
+      if (this.hasModelOverride) params.model = this.model;
       if (this.permissionMode) params.approvalPolicy = this.permissionMode;
       if (this.sandboxMode) params.sandbox = this.sandboxMode;
       const started = await this.request('thread/start', params);
@@ -524,8 +603,9 @@ class CodexStructuredSession extends EventEmitter {
       this.emitEvent({ type: 'state', state: this.getControlState() });
     }
     this.setStatus('running');
-    const params = { threadId: this.threadId, input: [{ type: 'text', text: prompt }], cwd: this.workingDir,
-      model: this.model, effort: this.effort, summary: 'auto' };
+    const params = { threadId: this.threadId, input: [{ type: 'text', text: prompt }], cwd: this.workingDir, summary: 'auto' };
+    if (this.hasModelOverride) params.model = this.model;
+    if (this.hasEffortOverride) params.effort = this.effort;
     if (this.permissionMode) params.approvalPolicy = this.permissionMode;
     const sandboxPolicy = sandboxPolicyFor(this.sandboxMode, this.workingDir);
     if (sandboxPolicy) params.sandboxPolicy = sandboxPolicy;
@@ -596,22 +676,36 @@ class CodexStructuredSession extends EventEmitter {
     const target = String(threadId || this.threadId || '').trim();
     if (!target || this.presentation !== 'structured' || this.status !== 'idle') return false;
     await this.ensureProcess();
-    const params = { threadId: target, model: this.model, cwd: this.workingDir };
+    const params = { threadId: target, cwd: this.workingDir };
     if (this.permissionMode) params.approvalPolicy = this.permissionMode;
     if (this.sandboxMode) params.sandbox = this.sandboxMode;
     const result = await this.request('thread/resume', params);
     this.threadId = result.thread?.id || target;
-    this.model = result.model || this.model;
+    this.hasModelOverride = false;
+    this.hasEffortOverride = false;
+    this.model = result.model || result.thread?.model || this.model;
+    this.effort = result.reasoningEffort || result.thread?.reasoningEffort || this.effort;
     this.effectivePermissionMode = result.approvalPolicy || this.effectivePermissionMode;
     this.effectiveSandboxMode = sandboxModeFromPolicy(result.sandbox) || this.effectiveSandboxMode;
     const history = await this.request('thread/read', { threadId: this.threadId, includeTurns: true });
+    this.model = history?.thread?.model || this.model;
+    this.effort = history?.thread?.reasoningEffort || history?.thread?.reasoning_effort || this.effort;
+    this.tokenUsage = history?.thread?.tokenUsage || history?.thread?.token_usage || this.tokenUsage;
     this.messages = [];
     this.completedPermissions = [];
     for (const turn of history?.thread?.turns || []) {
-      this.append({ kind: 'turn-start', turnId: turn.id });
-      for (const item of turn.items || []) this.applyProviderItem({ ...item, turnId: turn.id });
       const status = turn.status === 'failed' ? 'failed' : turn.status === 'interrupted' ? 'cancelled' : 'completed';
-      this.append({ kind: 'turn-end', turnId: turn.id, status });
+      const startedAt = Number(turn.startedAt || turn.createdAt || 0);
+      const completedAt = Number(turn.completedAt || turn.updatedAt || 0);
+      const toMilliseconds = value => value > 0 && value < 100000000000 ? value * 1000 : value;
+      const startedAtMs = toMilliseconds(startedAt);
+      const completedAtMs = toMilliseconds(completedAt);
+      this.append({ kind: 'turn-start', turnId: turn.id, ...(startedAtMs ? { createdAt: startedAtMs } : {}) });
+      for (const item of turn.items || []) this.applyProviderItem({ ...item, turnId: turn.id }, status === 'failed' ? 'failed' : 'completed');
+      const durationMs = Number(turn.durationMs || turn.duration_ms || 0)
+        || (startedAtMs && completedAtMs && completedAtMs >= startedAtMs ? completedAtMs - startedAtMs : null);
+      this.append({ kind: 'turn-end', turnId: turn.id, status, durationMs,
+        ...(completedAtMs ? { createdAt: completedAtMs } : {}) });
     }
     this.append({ kind: 'event', level: 'info', text: `Resumed Codex thread ${this.threadId}` });
     this.emitEvent({ type: 'history-reset', messages: this.messages });

package/lib/commands/web.js

@@ -525,6 +525,9 @@ async function webCommand(options) {
         if (payload.type === 'codex-settings') {
           sessionManager.updateCodexSettings(sessionId, payload.settings || {}).catch(error => logger.error(`Codex settings error: ${error.message}`));
         }
+        if (payload.type === 'codex-status') {
+          sessionManager.showCodexStatus(sessionId).catch(error => logger.error(`Codex status error: ${error.message}`));
+        }
         if (payload.type === 'codex-abort') {
           sessionManager.abortCodex(sessionId);
         }

package/lib/session/rendered-history.js

@@ -5,7 +5,7 @@ function getTerminalCtor() {
   if (typeof global.window === 'undefined') {
     global.window = {};
   }
-  ({ Terminal: TerminalCtor } = require('xterm-headless'));
+  ({ Terminal: TerminalCtor } = require('@xterm/headless'));
   return TerminalCtor;
 }
 

package/lib/session/session-manager.js

@@ -245,6 +245,12 @@ class SessionManager extends EventEmitter {
     return session.updateSettings(settings || {});
   }
 
+  showCodexStatus(id) {
+    const session = this.get(id);
+    if (!session || session.kind !== 'codex-structured') return Promise.resolve(false);
+    return session.showStatus();
+  }
+
   abortCodex(id) {
     const session = this.get(id);
     return session && session.kind === 'codex-structured' ? session.abort('Aborted by user') : false;

package/lib/web/index.html

@@ -80,9 +80,17 @@
         #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; }
         #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-conversation { width: min(100%, var(--chat-content-max)); margin: 0 auto; }
+        .codex-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 { 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; }
         .codex-message { max-width: 100%; margin: 0 0 12px; color: #f5f5f7; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
         .codex-message.user { max-width: 92%; margin-left: auto; padding: 8px 12px; border: 1px solid rgba(0,122,255,.32); border-radius: 12px; background: rgba(0,122,255,.24); }
         .codex-message.event { color: var(--text-dim); text-align: center; font-size: 12px; }
+        .codex-status-card { margin: 10px 0 14px; border: 1px solid rgba(100,210,255,.2); border-radius: 10px; background: rgba(28,28,30,.72); padding: 11px; color: #f5f5f7; }
+        .codex-status-title { margin-bottom: 9px; color: #64d2ff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
+        .codex-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
+        .codex-status-item { min-width: 0; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: rgba(255,255,255,.035); padding: 8px; }
+        .codex-status-label { color: #8e8e93; font-size: 10px; font-weight: 800; text-transform: uppercase; }
+        .codex-status-value { margin-top: 3px; color: #f5f5f7; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
         .codex-tool { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.045); overflow: hidden; margin: 8px 0; color: #d1d5db; }
         .codex-tool summary { list-style: none; cursor: pointer; }
         .codex-tool summary::-webkit-details-marker { display: none; }
@@ -117,8 +125,9 @@
         .codex-inline-permission .claude-permission-actions { margin-top: 8px; }
         @keyframes codex-spin { to { transform: rotate(360deg); } }
         #codex-control-panel { display: none; width: min(100%, var(--control-content-max)); margin: 0 auto; padding: 8px 14px 10px; border-bottom: 1px solid #222; background: #121212; box-sizing: border-box; }
-        .codex-control-row { display: grid; grid-template-columns: repeat(5, minmax(0, 116px)); justify-content: center; gap: 7px; align-items: center; }
-        .codex-control-row > * { width: 100%; }
+        .codex-control-row { display: grid; grid-template-columns: repeat(6, minmax(0, 116px)); grid-template-rows: auto; justify-content: center; gap: clamp(2px, .8vw, 7px); align-items: center; white-space: nowrap; }
+        .codex-control-row > * { width: 100%; min-width: 0; overflow: hidden; }
+        .codex-control-row .claude-ctrl-btn, .codex-control-row .codex-select-label { padding-left: clamp(2px, 1vw, 10px); padding-right: clamp(2px, 1vw, 10px); font-size: clamp(8px, 2.2vw, 11px); text-overflow: ellipsis; overflow: hidden; }
         .codex-select-control { position: relative; display: block; min-width: 0; height: 32px; }
         .codex-select-label { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.08); color: #f5f5f7; font-size: 11px; font-weight: 800; white-space: nowrap; }
         .codex-select-control:focus-within .codex-select-label { background: rgba(255,255,255,.14); border-color: rgba(0,122,255,.45); }
@@ -293,7 +302,7 @@
             #nav-bar > div:last-child .icon-btn { min-width: 34px; min-height: 30px; padding: 5px 7px !important; }
             #input-row { padding-left: 10px; padding-right: 10px; }
             #codex-control-panel { padding-left: 8px; padding-right: 8px; }
-            .codex-control-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
+            .codex-control-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
             .codex-control-row .claude-ctrl-btn { height: 36px; padding-left: 4px; padding-right: 4px; }
             .codex-select-control { height: 36px; }
             #codex-chat-container { padding: 10px 10px calc(22px + env(safe-area-inset-bottom)); }
@@ -425,6 +434,7 @@
                             </select>
                         </label>
                         <button id="codex-model-btn" class="claude-ctrl-btn" onclick="toggleCodexModelPanel()" title="Model and effort">Model</button>
+                        <button id="codex-status-btn" class="claude-ctrl-btn" onclick="requestCodexStatus()" title="Show Codex account, limits, and context status">Status</button>
                         <button id="codex-abort-btn" class="claude-ctrl-btn danger" onclick="abortCodexSession()" title="Abort current Codex turn">Abort</button>
                         <button id="codex-resume-btn" class="claude-ctrl-btn primary" onclick="toggleCodexResumePanel()" title="Resume a Codex thread">Resume</button>
                     </div>
@@ -2078,6 +2088,39 @@
             if (inline) return `<div class="codex-inline-permission">${content}</div>`;
             return `<div class="claude-tool claude-permission"><div class="claude-tool-header"><strong>${escapeHtml(request.title || 'Permission required')}</strong></div><div class="claude-tool-body">${content}</div></div>`;
         }
+        function formatCodexReset(timestamp) {
+            const value = Number(timestamp || 0);
+            return value ? new Date(value * 1000).toLocaleString() : '';
+        }
+        function formatCodexTokens(value) {
+            const count = Number(value || 0);
+            return count >= 1000000 ? `${(count / 1000000).toFixed(1)}M`
+                : count >= 1000 ? `${Math.round(count / 1000)}K` : String(count);
+        }
+        function codexStatusItem(label, value) {
+            if (value == null || value === '') return '';
+            return `<div class="codex-status-item"><div class="codex-status-label">${escapeHtml(label)}</div><div class="codex-status-value">${escapeHtml(value)}</div></div>`;
+        }
+        function renderCodexStatus(item) {
+            const account = item.account || {};
+            const limit = item.rateLimits || {};
+            const primary = limit.primary;
+            const secondary = limit.secondary;
+            const context = item.context;
+            const accountLabel = account.type === 'chatgpt'
+                ? [account.email, account.planType].filter(Boolean).join(' · ')
+                : account.type === 'apiKey' ? 'API key' : account.type || 'Not signed in';
+            const fiveHour = primary ? `${Math.max(0, 100 - Number(primary.usedPercent || 0))}% left${primary.resetsAt ? ` · resets ${formatCodexReset(primary.resetsAt)}` : ''}` : '';
+            const weekly = secondary ? `${Math.max(0, 100 - Number(secondary.usedPercent || 0))}% left${secondary.resetsAt ? ` · resets ${formatCodexReset(secondary.resetsAt)}` : ''}` : '';
+            const contextLabel = context ? `${context.remainingPercent}% left${context.contextWindow ? ` · ${formatCodexTokens(context.remainingTokens)} / ${formatCodexTokens(context.contextWindow)}` : ''}` : 'Available after the first usage update';
+            return `<div class="codex-status-card"><div class="codex-status-title">${escapeHtml(item.title || 'Codex status')}</div><div class="codex-status-grid">
+                ${codexStatusItem('Account', accountLabel)}
+                ${codexStatusItem('Model', [item.model, item.effort].filter(Boolean).join(' · '))}
+                ${codexStatusItem('5h limit', fiveHour)}
+                ${codexStatusItem('Weekly limit', weekly)}
+                ${codexStatusItem('Context', contextLabel)}
+            </div></div>`;
+        }
         function renderCodexTool(item, permission = null) {
             const status = codexToolStatus(item);
             const isError = status === 'failed' || Boolean(item.error) || (item.exitCode != null && item.exitCode !== 0);
@@ -2091,17 +2134,22 @@
             const result = item.result || (item.name === 'McpTool' || item.name === 'Agent' ? codexJson(item.input) : '');
             return `<details class="codex-tool${isError ? ' error' : ''}"><summary class="codex-tool-header"><span class="codex-tool-icon">${escapeHtml(icon)}</span><span class="codex-tool-title">${escapeHtml(title)}</span>${command && command !== title ? `<span class="codex-tool-command">${escapeHtml(command)}</span>` : '<span class="codex-tool-command"></span>'}<span class="codex-tool-state${runningClass}">${escapeHtml(status === 'completed' ? '' : status)}</span></summary>${result ? `<div class="codex-tool-body"><pre class="codex-tool-code">${escapeHtml(result)}</pre></div>` : ''}${permission ? renderCodexPermission(permission, true) : ''}</details>`;
         }
-        function renderCodexToolGroup(items, permissionById, usedPermissions) {
+        function renderCodexToolGroup(items, permissionById, usedPermissions, turnEnd = null) {
             const running = items.some(item => codexToolStatus(item) === 'running');
             const failed = items.some(item => codexToolStatus(item) === 'failed' || item.error);
             const startedAt = Math.min(...items.map(item => Number(item.createdAt || Date.now())));
-            const seconds = Math.max(1, Math.round((Date.now() - startedAt) / 1000));
+            const storedDuration = Number(turnEnd?.durationMs || 0);
+            const completedAt = Number(turnEnd?.createdAt || 0);
+            const durationMs = storedDuration > 0 ? storedDuration
+                : (!running && completedAt >= startedAt ? completedAt - startedAt : 0);
+            const seconds = durationMs > 0 ? Math.max(1, Math.round(durationMs / 1000)) : null;
             const tools = items.map(item => {
                 const permission = permissionById.get(String(item.providerId || ''));
                 if (permission) usedPermissions.add(permission.id);
                 return renderCodexTool(item, permission);
             }).join('');
-            return `<details class="codex-work-group"${running ? ' open' : ''}><summary>${running ? 'Working' : failed ? 'Work finished with errors' : `Worked for ${seconds}s`} · ${items.length} tools</summary><div class="codex-work-group-body">${tools}</div></details>`;
+            const label = running ? 'Working' : failed ? 'Work finished with errors' : seconds ? `Worked for ${seconds}s` : 'Worked';
+            return `<details class="codex-work-group"${running ? ' open' : ''}><summary>${label} · ${items.length} tools</summary><div class="codex-work-group-body">${tools}</div></details>`;
         }
         function renderCodexChat() {
             const container = document.getElementById('codex-chat-container');
@@ -2109,13 +2157,17 @@
             const parts = [];
             const permissionById = new Map(codexPendingPermissions.map(item => [String(item.id), item]));
             const usedPermissions = new Set();
+            const turnEndById = new Map(codexMessages.filter(item => item.kind === 'turn-end' && item.turnId)
+                .map(item => [String(item.turnId), item]));
             const visible = codexMessages.filter(item => !['reasoning', 'turn-start', 'turn-end'].includes(item.kind));
             for (let i = 0; i < visible.length;) {
                 const item = visible[i];
                 if (item.kind === 'tool') {
                     const tools = [];
-                    while (i < visible.length && visible[i].kind === 'tool') tools.push(visible[i++]);
-                    if (tools.length > 1) parts.push(renderCodexToolGroup(tools, permissionById, usedPermissions));
+                    const turnId = item.turnId;
+                    while (i < visible.length && visible[i].kind === 'tool' && visible[i].turnId === turnId) tools.push(visible[i++]);
+                    if (tools.length > 1) parts.push(renderCodexToolGroup(tools, permissionById, usedPermissions,
+                        turnEndById.get(String(turnId || ''))));
                     else {
                         const permission = permissionById.get(String(tools[0].providerId || ''));
                         if (permission) usedPermissions.add(permission.id);
@@ -2125,14 +2177,14 @@
                 }
                 if (item.kind === 'assistant') parts.push(`<div class="codex-message assistant claude-md">${renderMarkdown(item.text || '')}</div>`);
                 else if (item.kind === 'user') parts.push(`<div class="codex-message user claude-md">${renderMarkdown(item.text || '')}</div>`);
+                else if (item.kind === 'status') parts.push(renderCodexStatus(item));
                 else parts.push(`<div class="codex-message ${escapeHtml(item.level === 'error' ? 'event error' : item.kind || 'event')}">${codexText(item.text)}</div>`);
                 i += 1;
             }
             for (const request of codexPendingPermissions) if (!usedPermissions.has(request.id)) parts.push(renderCodexPermission(request));
-            if (codexState.status === 'running') {
-                parts.push('<div class="claude-status">Codex is working...</div>');
-            }
-            container.innerHTML = `<div class="codex-conversation">${parts.join('') || '<div class="codex-message event">Send a message to start Codex.</div>'}</div>`;
+            const working = codexState.status === 'running'
+                ? '<div class="codex-working-indicator" role="status" aria-label="Codex is working" title="Codex is working"></div>' : '';
+            container.innerHTML = `<div class="codex-conversation">${working}${parts.join('') || '<div class="codex-message event">Send a message to start Codex.</div>'}</div>`;
             requestAnimationFrame(() => { container.scrollTop = container.scrollHeight; });
         }
 
@@ -2175,7 +2227,6 @@
             const pending = Number(codexState.pendingPermissionCount || codexPendingPermissions.filter(item => item.status === 'pending').length) || 0;
             const parts = [];
             if (pending || codexState.status === 'waiting_approval') parts.push(`<span class="claude-state-pill warn">${pending || 1} approval${pending === 1 ? '' : 's'}</span>`);
-            else if (codexState.status === 'running') parts.push('<span class="claude-state-pill">Working</span>');
             el.innerHTML = parts.join('');
             el.style.display = parts.length ? 'flex' : 'none';
         }
@@ -2228,6 +2279,7 @@
             sendCodexSettings({ permissionMode, sandboxMode });
         }
         function abortCodexSession() { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-abort' })); }
+        function requestCodexStatus() { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-status' })); }
         function respondCodexPermission(id, decision) { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-permission', id, decision })); }
         async function toggleCodexResumePanel() {
             codexResumePanelOpen = !codexResumePanelOpen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glad-web",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "main": "index.js",
   "bin": {
@@ -52,9 +52,9 @@
     "conf": "^10.2.0",
     "express": "^5.2.1",
     "node-pty": "npm:@lydell/node-pty@^1.1.0",
-    "uuid": "^9.0.0",
+    "uuid": "^11.1.1",
     "ws": "^8.19.0",
-    "xterm-headless": "^5.3.0"
+    "@xterm/headless": "^6.0.0"
   },
   "devDependencies": {
     "caxa": "^3.0.1"