glad-web 1.0.30 → 1.0.31

package/lib/codex/structured-session.js

@@ -167,8 +167,10 @@ class CodexStructuredSession extends EventEmitter {
     this.currentTurnId = null;
     this.currentTurnStartedAt = null;
     this.threadTurns = new Map();
+    this.turnContexts = new Map();
     this.providerItemContexts = new Map();
     this.tokenUsage = null;
+    this.compacting = false;
     this.permissionMode = normalizePermissionMode(options.permissionMode);
     this.sandboxMode = normalizeSandboxMode(options.sandboxMode);
     this.effectivePermissionMode = null;
@@ -226,6 +228,8 @@ class CodexStructuredSession extends EventEmitter {
       model: this.model, effort: this.effort,
       status: this.status, threadId: this.threadId, presentation: this.presentation,
       canAbort: this.presentation === 'structured' && this.status !== 'idle',
+      canCompact: this.presentation === 'structured' && this.status === 'idle' && !this.compacting && Boolean(this.threadId),
+      compacting: this.compacting,
       canSwitchToTerminal: this.presentation === 'structured' && this.status === 'idle' && Boolean(this.threadId),
       canSwitchToStructured: this.presentation === 'terminal',
       pendingPermissionCount: this.pendingPermissions.size, activeSubagentCount, models: this.models };
@@ -289,6 +293,7 @@ class CodexStructuredSession extends EventEmitter {
           for (const request of this.pendingRequests.values()) request.reject(new Error(`Codex app-server exited (${code})`));
           this.pendingRequests.clear();
           if (this.running && this.presentation === 'structured') {
+            this.compacting = false;
             this.append({ kind: 'event', level: 'error', text: 'Codex app-server exited.' });
             this.setStatus('idle');
           }
@@ -382,6 +387,7 @@ class CodexStructuredSession extends EventEmitter {
   handleNotification(method, params) {
     if (method === 'thread/tokenUsage/updated') {
       this.tokenUsage = params.tokenUsage || params.usage || params;
+      this.recordTurnContext(params.turnId, this.tokenUsage);
       return;
     }
     if (method === 'turn/started') {
@@ -411,8 +417,9 @@ class CodexStructuredSession extends EventEmitter {
       const startedAtMs = trackedTurn?.startedAt || ((!threadId || threadId === this.threadId) ? this.currentTurnStartedAt : null);
       const durationMs = Number(params.turn?.durationMs || 0)
         || (startedAtMs ? Math.max(0, completedAtMs - startedAtMs) : null);
+      const context = this.turnContexts.get(String(completedTurnId || ''));
       this.append({ kind: 'turn-end', threadId, turnId: completedTurnId, status: turnStatus,
-        durationMs, createdAt: completedAtMs });
+        durationMs, createdAt: completedAtMs, ...(context ? { context } : {}) });
       const observedNow = Date.now();
       const observedCompletedAtMs = Math.abs(observedNow - completedAtMs) < 5000
         ? Math.max(completedAtMs, observedNow) : completedAtMs;
@@ -424,8 +431,13 @@ class CodexStructuredSession extends EventEmitter {
         this.patch(item.id, { toolStatus,
           completedAtMs: observedCompletedAtMs, ...(toolDurationMs != null ? { durationMs: toolDurationMs } : {}) });
       }
+      for (const item of this.messages.filter(message => message.kind === 'compaction'
+        && message.turnId === completedTurnId && message.compactionStatus === 'running')) {
+        this.patch(item.id, { compactionStatus: 'completed', completedAtMs: observedCompletedAtMs });
+      }
       if (threadId) this.threadTurns.delete(threadId);
       if (!threadId || threadId === this.threadId) {
+        this.compacting = false;
         for (const pending of this.pendingPermissions.values()) {
           this.recordPermission(pending.public, 'denied', 'abort');
         }
@@ -442,6 +454,14 @@ class CodexStructuredSession extends EventEmitter {
       }
       return;
     }
+    if (method === 'thread/compacted') {
+      const threadId = params.threadId || this.threadId;
+      const turnId = params.turnId || (threadId ? this.threadTurns.get(threadId)?.turnId : null) || this.currentTurnId;
+      this.applyProviderItem({ id: `compaction-${turnId || Date.now()}`, type: 'contextCompaction', threadId, turnId }, 'completed', {
+        threadId, turnId, completedAtMs: Date.now()
+      });
+      return;
+    }
     if (method === 'thread/started' || method === 'thread/resumed') {
       const threadId = params.thread?.id || params.threadId;
       if (threadId && !this.threadId) { this.threadId = threadId; this.emitControlState(); }
@@ -451,7 +471,7 @@ class CodexStructuredSession extends EventEmitter {
       const threadId = params.threadId || this.threadId;
       const status = params.status?.type || params.status;
       if (!threadId || threadId === this.threadId) {
-        if (status === 'idle' && !this.currentTurnId) this.setStatus('idle');
+        if (status === 'idle' && !this.currentTurnId) { this.compacting = false; this.setStatus('idle'); }
         if (status === 'active') this.setStatus('running');
       }
       return;
@@ -467,7 +487,7 @@ class CodexStructuredSession extends EventEmitter {
     }
     if (method === 'error') {
       this.append({ kind: 'event', level: 'error', text: params.error?.message || 'Codex reported an error.' });
-      if (!params.willRetry) this.setStatus('idle');
+      if (!params.willRetry) { this.compacting = false; this.setStatus('idle'); }
       return;
     }
     if (method === 'warning' || method === 'guardianWarning') {
@@ -519,9 +539,10 @@ class CodexStructuredSession extends EventEmitter {
   applyProviderItem(raw, inferredStatus = null, context = {}) {
     if (!raw || typeof raw !== 'object') return;
     const providerId = String(raw.id || '');
-    const existing = providerId && this.messages.find(item => item.providerId === providerId);
+    let existing = providerId && this.messages.find(item => item.providerId === providerId);
     const kind = raw.type === 'userMessage' ? 'user' : raw.type === 'agentMessage' ? 'assistant' : ['reasoning', 'plan'].includes(raw.type) ? 'reasoning'
-      : ['commandExecution', 'fileChange', 'mcpToolCall', 'dynamicToolCall', 'webSearch', 'collabAgentToolCall'].includes(raw.type) ? 'tool' : null;
+      : ['commandExecution', 'fileChange', 'mcpToolCall', 'dynamicToolCall', 'webSearch', 'collabAgentToolCall'].includes(raw.type) ? 'tool'
+        : raw.type === 'contextCompaction' ? 'compaction' : null;
     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') : '')) : '';
@@ -530,6 +551,9 @@ class CodexStructuredSession extends EventEmitter {
     const threadId = raw.threadId || context.threadId || null;
     const trackedTurnId = threadId ? this.threadTurns.get(threadId)?.turnId : null;
     const turnId = raw.turnId || context.turnId || trackedTurnId || this.currentTurnId;
+    if (!existing && kind === 'compaction' && turnId) {
+      existing = this.messages.find(item => item.kind === 'compaction' && item.turnId === turnId);
+    }
     if (providerId && (threadId || turnId)) this.providerItemContexts.set(providerId, { threadId, turnId });
     const existingStartedAtMs = existing?.startedAtMs || existing?.createdAt || null;
     const startedAtMs = Number(context.startedAtMs || raw.startedAtMs || 0)
@@ -546,6 +570,8 @@ class CodexStructuredSession extends EventEmitter {
     };
     const patch = kind === 'tool' ? { ...toolDetails(raw), threadId, turnId,
       ...timing, toolStatus: inferredToolStatus || raw.status || 'running' }
+      : kind === 'compaction' ? { providerId, threadId, turnId, ...timing,
+        compactionStatus: inferredStatus || raw.status || 'running' }
       : { text, threadId, turnId, streaming: false, ...(completedAtMs ? { completedAtMs } : {}) };
     if (existing) {
       this.patch(existing.id, patch);
@@ -556,6 +582,10 @@ class CodexStructuredSession extends EventEmitter {
     } else {
       this.append({ kind, providerId, ...(startedAtMs ? { createdAt: startedAtMs } : {}), ...patch });
     }
+    if (kind === 'compaction' && (!threadId || threadId === this.threadId)) {
+      this.compacting = patch.compactionStatus === 'running';
+      this.emitControlState();
+    }
   }
 
   async refreshModels() {
@@ -625,8 +655,8 @@ class CodexStructuredSession extends EventEmitter {
     return items;
   }
 
-  contextStatus() {
-    const usage = this.tokenUsage || {};
+  contextStatus(tokenUsage = this.tokenUsage) {
+    const usage = 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);
@@ -646,6 +676,16 @@ class CodexStructuredSession extends EventEmitter {
     };
   }
 
+  recordTurnContext(turnId, tokenUsage = this.tokenUsage) {
+    const id = String(turnId || '').trim();
+    const context = this.contextStatus(tokenUsage);
+    if (!id || !context) return context;
+    this.turnContexts.set(id, context);
+    const turnEnd = this.messages.find(item => item.kind === 'turn-end' && String(item.turnId || '') === id);
+    if (turnEnd) this.patch(turnEnd.id, { context });
+    return context;
+  }
+
   async showStatus() {
     if (this.presentation !== 'structured') return false;
     await this.ensureProcess();
@@ -759,6 +799,22 @@ class CodexStructuredSession extends EventEmitter {
     }
   }
 
+  async compactContext() {
+    if (!this.threadId || this.presentation !== 'structured' || this.status !== 'idle') return false;
+    await this.ensureProcess();
+    this.compacting = true;
+    this.setStatus('running');
+    try {
+      await this.request('thread/compact/start', { threadId: this.threadId });
+      return true;
+    } catch (error) {
+      this.compacting = false;
+      this.setStatus('idle');
+      this.append({ kind: 'event', level: 'error', text: `Unable to compact context: ${error.message}` });
+      throw error;
+    }
+  }
+
   write(data) {
     if (this.presentation === 'terminal') return this.terminalSession?.write(data) || false;
     const text = String(data || '').replace(/\r/g, '\n');
@@ -848,6 +904,7 @@ class CodexStructuredSession extends EventEmitter {
     this.tokenUsage = thread?.tokenUsage || thread?.token_usage || this.tokenUsage;
     this.messages = [];
     this.completedPermissions = [];
+    this.turnContexts.clear();
     this.providerItemContexts.clear();
     for (const turn of thread?.turns || []) {
       const status = turn.status === 'failed' ? 'failed' : turn.status === 'interrupted' ? 'cancelled' : 'completed';

package/lib/commands/web.js

@@ -374,6 +374,9 @@ async function webCommand(options) {
         if (payload.type === 'codex-status') {
           sessionManager.showCodexStatus(sessionId).catch(error => logger.error(`Codex status error: ${error.message}`));
         }
+        if (payload.type === 'codex-compact') {
+          sessionManager.compactCodexContext(sessionId).catch(error => logger.error(`Codex compact error: ${error.message}`));
+        }
         if (payload.type === 'codex-abort') {
           sessionManager.abortCodex(sessionId);
         }
@@ -436,6 +439,10 @@ async function webCommand(options) {
     });
   };
 
+  const sendDependencyAsset = assetPath => (req, res) => {
+    res.sendFile(path.basename(assetPath), { root: path.dirname(assetPath) });
+  };
+
   const webAssets = [
     'gitgraph.js',
     'styles.css',
@@ -455,9 +462,9 @@ async function webCommand(options) {
     app.get([`/${assetName}`, new RegExp(`.*\\/${escapedName}$`)], sendWebAsset(assetName));
   }
 
-  app.get('/vendor/xterm.js', (req, res) => res.sendFile(xtermScript));
-  app.get('/vendor/xterm.css', (req, res) => res.sendFile(xtermStyles));
-  app.get('/vendor/xterm-addon-fit.js', (req, res) => res.sendFile(fitAddonScript));
+  app.get('/vendor/xterm.js', sendDependencyAsset(xtermScript));
+  app.get('/vendor/xterm.css', sendDependencyAsset(xtermStyles));
+  app.get('/vendor/xterm-addon-fit.js', sendDependencyAsset(fitAddonScript));
 
   app.get(['/logo.svg', /.*\/logo\.svg$/], sendLogo);
 

package/lib/session/session-manager.js

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

package/lib/web/codex.js

@@ -94,6 +94,15 @@
                 ${codexStatusItem('Context', contextLabel)}
             </div></div>`;
         }
+        function renderCodexCompaction(item) {
+            const running = item.compactionStatus === 'running';
+            const timestamp = Number(item.completedAtMs || item.updatedAt || item.createdAt || 0);
+            const date = timestamp > 0 ? new Date(timestamp) : null;
+            const time = date && !Number.isNaN(date.getTime())
+                ? date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
+            const detail = running ? 'Compacting context…' : ['Completed', time].filter(Boolean).join(' · ');
+            return `<div class="codex-compaction-card${running ? ' running' : ''}" data-codex-key="compaction-${escapeHtml(item.id || item.providerId || '')}"><span class="codex-compaction-icon" aria-hidden="true">⇣</span><div><div class="codex-compaction-title">${running ? 'Compacting context' : 'Context compacted'}</div><div class="codex-compaction-meta">${escapeHtml(detail)}</div></div></div>`;
+        }
         function renderCodexTool(item, permission = null) {
             const status = codexToolStatus(item);
             const isError = status === 'failed' || Boolean(item.error) || (item.exitCode != null && item.exitCode !== 0);
@@ -177,6 +186,21 @@
             const label = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
             return `<time class="codex-message-time" datetime="${escapeHtml(date.toISOString())}" title="${escapeHtml(date.toLocaleString())}">${escapeHtml(label)}</time>`;
         }
+        function renderCodexContextMeter(context) {
+            const total = Number(context?.contextWindow || 0);
+            const remaining = Number(context?.remainingTokens || 0);
+            if (!(total > 0) || !Number.isFinite(remaining)) return '';
+            const reportedPercent = Number(context.remainingPercent ?? Math.round(remaining / total * 100));
+            const percent = Math.max(0, Math.min(100, Number.isFinite(reportedPercent) ? reportedPercent : 0));
+            const level = percent <= 20 ? ' danger' : percent <= 40 ? ' warn' : '';
+            const label = `${formatCodexTokens(remaining)} / ${formatCodexTokens(total)}（${Math.round(percent)}%）`;
+            return `<span class="codex-context-meter${level}" style="--context-remaining:${percent}%" title="${escapeHtml(`Context remaining: ${label}`)}" aria-label="${escapeHtml(`Context remaining: ${label}`)}">${escapeHtml(label)}</span>`;
+        }
+        function renderCodexMessageMeta(item, finalOnly = false, context = null) {
+            const time = renderCodexMessageTime(item, finalOnly);
+            const meter = renderCodexContextMeter(context);
+            return time || meter ? `<div class="codex-message-meta">${time}${meter}</div>` : '';
+        }
         function syncCodexDom(current, next) {
             if (!current || !next) return;
             if (current.nodeType !== next.nodeType || current.nodeName !== next.nodeName) {
@@ -230,6 +254,12 @@
             const usedPermissions = new Set();
             const turnEndById = new Map(codexMessages.filter(item => item.kind === 'turn-end' && item.turnId)
                 .map(item => [String(item.turnId), item]));
+            const lastAssistantByTurn = new Map();
+            for (const item of codexMessages) {
+                if (item.kind === 'assistant' && item.turnId && !isCodexSubagentItem(item)) {
+                    lastAssistantByTurn.set(String(item.turnId), item.id);
+                }
+            }
             const subagentItems = new Map();
             for (const item of codexMessages) {
                 if (!isCodexSubagentItem(item)) continue;
@@ -258,8 +288,14 @@
                         turnEndById.get(String(turnId || ''))));
                     continue;
                 }
-                if (item.kind === 'assistant') 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>${renderCodexMessageTime(item, true)}</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>${renderCodexMessageTime(item)}</div>`);
+                if (item.kind === 'assistant') {
+                    const turnId = String(item.turnId || '');
+                    const turnEnd = turnEndById.get(turnId);
+                    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 === 'compaction') parts.push(renderCodexCompaction(item));
                 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;
@@ -300,6 +336,8 @@
             if (modelButton) modelButton.textContent = 'Model';
             const abort = document.getElementById('codex-abort-btn');
             if (abort) abort.disabled = !codexState.canAbort;
+            const compact = document.getElementById('codex-compact-btn');
+            if (compact) { compact.disabled = !codexState.canCompact; compact.textContent = codexState.compacting ? 'Compacting' : 'Compact'; }
             const fork = document.getElementById('codex-fork-btn');
             if (fork) fork.disabled = !(codexState.presentation === 'structured' && codexState.status === 'idle');
             const terminal = document.getElementById('codex-terminal-switch');
@@ -404,6 +442,12 @@
         }
         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 compactCodexContext() {
+            if (!codexState.canCompact || currentSocket?.readyState !== 1) return false;
+            currentSocket.send(JSON.stringify({ type: 'codex-compact' }));
+            applyCodexState({ canCompact: false, compacting: true });
+            return true;
+        }
         function respondCodexPermission(id, decision) { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-permission', id, decision })); }
         async function toggleCodexResumePanel() {
             codexResumePanelOpen = !codexResumePanelOpen;

package/lib/web/core.js

@@ -32,7 +32,7 @@
         let claudeApprovalJumpIndex = 0;
         let codexMessages = [];
         let codexPendingPermissions = [];
-        let codexState = { permissionMode: 'default', sandboxMode: 'default', effectivePermissionMode: null, effectiveSandboxMode: null, model: null, effort: null, status: 'idle', threadId: null, presentation: 'structured', models: [], canAbort: false, canSwitchToTerminal: false, canSwitchToStructured: false };
+        let 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 };
         let codexModelPanelOpen = false;
         let codexModelCandidate = null;
         let codexResumePanelOpen = false;

package/lib/web/index.html

@@ -122,6 +122,7 @@
                             <button id="codex-fork-btn" class="claude-ctrl-btn primary" onclick="toggleCodexForkPanel()" title="Fork a Codex thread in this conversation">Fork</button>
                         </div>
                         <div class="codex-control-page">
+                            <button id="codex-compact-btn" class="claude-ctrl-btn" onclick="compactCodexContext()" title="Compact the current Codex context">Compact</button>
                             <label class="codex-select-control" title="Sandbox mode">
                                 <span class="codex-select-label" aria-hidden="true">Sandbox</span>
                                 <select id="codex-sandbox-select" class="codex-select" aria-label="Sandbox mode" onchange="updateCodexSettingsFromControls()">

package/lib/web/session.js

@@ -134,7 +134,7 @@
             document.getElementById('codex-resume-panel').classList.remove('active');
             document.getElementById('codex-fork-panel').classList.remove('active');
             document.getElementById('codex-control-rail').scrollLeft = 0;
-            codexState = { permissionMode: 'default', sandboxMode: 'default', effectivePermissionMode: null, effectiveSandboxMode: null, model: null, effort: null, status: 'idle', threadId: null, presentation: 'structured', models: [], canAbort: false, canSwitchToTerminal: false, canSwitchToStructured: false };
+            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);
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';

package/lib/web/styles.css

@@ -93,8 +93,18 @@
         .codex-message { max-width: 100%; margin: 0; color: #f5f5f7; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
         .codex-message.user { 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-message-time { display: block; width: max-content; margin-top: 4px; padding: 0 2px; color: #8e8e93; font-size: 10px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
-        .codex-message-block.user .codex-message-time { margin-left: auto; }
+        .codex-message-meta { display: flex; width: 100%; align-items: center; gap: 7px; margin-top: 4px; padding: 0 2px; box-sizing: border-box; }
+        .codex-message-block.user .codex-message-meta { justify-content: flex-end; }
+        .codex-message-time { display: block; flex: 0 0 auto; width: max-content; color: #8e8e93; font-size: 10px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
+        .codex-context-meter { --context-color: #30d158; position: relative; isolation: isolate; display: inline-flex; min-width: 128px; height: 16px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--context-color) 42%, transparent); border-radius: 8px; background: rgba(255,255,255,.055); color: #d9fbe2; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
+        .codex-context-meter::before { content: ''; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--context-remaining); background: color-mix(in srgb, var(--context-color) 28%, transparent); }
+        .codex-context-meter.warn { --context-color: #ffd60a; color: #fff3a6; }
+        .codex-context-meter.danger { --context-color: #ff453a; color: #ffd0cc; }
+        .codex-compaction-card { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; padding: 10px 12px; border: 1px solid rgba(191,90,242,.3); border-radius: 10px; background: linear-gradient(135deg, rgba(191,90,242,.13), rgba(94,92,230,.08)); color: #f5f5f7; }
+        .codex-compaction-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 50%; background: rgba(191,90,242,.18); color: #d6a5ff; font-size: 15px; }
+        .codex-compaction-title { font-size: 12px; font-weight: 800; }
+        .codex-compaction-meta { margin-top: 3px; color: #a9a9b0; font-size: 10px; font-variant-numeric: tabular-nums; }
+        .codex-compaction-card.running .codex-compaction-icon { animation: codex-pulse 1.1s ease-in-out infinite alternate; }
         .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; }
@@ -151,6 +161,7 @@
         .claude-inline-permission { margin-top: 10px; padding: 10px; border-top: 1px solid rgba(255,204,0,0.22); background: rgba(255,204,0,0.04); }
         .claude-inline-permission-title { margin-bottom: 7px; color: #ffcc00; font-weight: 800; }
         @keyframes codex-spin { to { transform: rotate(360deg); } }
+        @keyframes codex-pulse { to { box-shadow: 0 0 0 5px rgba(191,90,242,.08); transform: scale(.92); } }
         #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-rail { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
         .codex-control-rail::-webkit-scrollbar { display: none; }

package/package.json

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