glad-web 1.0.22 → 1.0.24

package/lib/codex/structured-session.js

@@ -5,11 +5,38 @@ const crypto = require('crypto');
 const PTYManager = require('../session/pty-manager');
 
 const PERMISSION_MODES = new Set(['untrusted', 'on-request', 'never']);
+const SANDBOX_MODES = new Set(['read-only', 'workspace-write', 'danger-full-access']);
 const FALLBACK_EFFORTS = ['minimal', 'low', 'medium', 'high', 'xhigh', 'ultra'];
 
 function normalizePermissionMode(value) {
-  const mode = String(value || 'on-request');
-  return PERMISSION_MODES.has(mode) ? mode : 'on-request';
+  const mode = String(value || 'default');
+  return PERMISSION_MODES.has(mode) ? mode : null;
+}
+
+function normalizeSandboxMode(value) {
+  const mode = String(value || 'default');
+  return SANDBOX_MODES.has(mode) ? mode : null;
+}
+
+function sandboxPolicyFor(mode, workingDir, workspaceOptions = {}) {
+  if (mode === 'danger-full-access') return { type: 'dangerFullAccess' };
+  if (mode === 'read-only') return { type: 'readOnly', networkAccess: false };
+  if (mode === 'workspace-write') {
+    const roots = Array.isArray(workspaceOptions.writable_roots) ? workspaceOptions.writable_roots : [];
+    return { type: 'workspaceWrite', writableRoots: [workingDir, ...roots.filter(root => root !== workingDir)],
+      networkAccess: Boolean(workspaceOptions.network_access),
+      excludeTmpdirEnvVar: Boolean(workspaceOptions.exclude_tmpdir_env_var),
+      excludeSlashTmp: Boolean(workspaceOptions.exclude_slash_tmp) };
+  }
+  return null;
+}
+
+function sandboxModeFromPolicy(policy) {
+  const type = typeof policy === 'string' ? policy : policy?.type;
+  if (type === 'dangerFullAccess' || type === 'danger-full-access') return 'danger-full-access';
+  if (type === 'readOnly' || type === 'read-only') return 'read-only';
+  if (type === 'workspaceWrite' || type === 'workspace-write') return 'workspace-write';
+  return null;
 }
 
 function safeJson(value) {
@@ -95,7 +122,18 @@ 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;
+    this.effectiveSandboxMode = null;
+    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 = [];
@@ -135,7 +173,9 @@ class CodexStructuredSession extends EventEmitter {
   }
 
   getControlState() {
-    return { permissionMode: this.permissionMode, model: this.model, effort: this.effort,
+    return { permissionMode: this.permissionMode || 'default', sandboxMode: this.sandboxMode || 'default',
+      effectivePermissionMode: this.effectivePermissionMode, effectiveSandboxMode: this.effectiveSandboxMode,
+      model: this.model, effort: this.effort,
       status: this.status, threadId: this.threadId, presentation: this.presentation,
       canAbort: this.presentation === 'structured' && this.status !== 'idle',
       canSwitchToTerminal: this.presentation === 'structured' && this.status === 'idle' && Boolean(this.threadId),
@@ -209,6 +249,7 @@ class CodexStructuredSession extends EventEmitter {
       lines.on('line', line => this.handleRpcLine(line));
       this.request('initialize', { clientInfo: { name: 'glad-web', title: 'Glad', version: '1.0' }, capabilities: { experimentalApi: true } })
         .then(async () => {
+          try { await this.refreshConfigDefaults(); } catch (error) { this.logger.debugInfo?.(`[codex-app-server] config/read failed: ${error.message}`); }
           try { await this.refreshModels(); } catch (error) { this.logger.debugInfo?.(`[codex-app-server] model/list failed: ${error.message}`); }
           resolve();
         }).catch(fail);
@@ -289,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();
@@ -302,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');
       }
@@ -330,7 +379,8 @@ class CodexStructuredSession extends EventEmitter {
       const settings = params.threadSettings || {};
       this.model = settings.model || this.model;
       this.effort = settings.effort || this.effort;
-      this.permissionMode = settings.approvalPolicy || this.permissionMode;
+      this.effectivePermissionMode = settings.approvalPolicy || this.effectivePermissionMode;
+      this.effectiveSandboxMode = sandboxModeFromPolicy(settings.sandboxPolicy) || this.effectiveSandboxMode;
       this.emitEvent({ type: 'state', state: this.getControlState() });
       return;
     }
@@ -364,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);
@@ -376,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') {
@@ -395,16 +450,33 @@ 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;
   }
 
+  async refreshConfigDefaults() {
+    const result = await this.request('config/read', { cwd: this.workingDir, includeLayers: false });
+    const config = result?.config || {};
+    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;
+  }
+
   async listResumeThreads() {
     await this.ensureProcess();
     const result = await this.request('thread/list', {
@@ -425,13 +497,87 @@ 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.model !== undefined) this.model = settings.model || null;
-    if (settings.effort !== undefined) this.effort = settings.effort || null;
+    if (settings.sandboxMode !== undefined) this.sandboxMode = normalizeSandboxMode(settings.sandboxMode);
+    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') {
+      await this.ensureProcess();
+      await this.refreshConfigDefaults();
+    }
     if (this.threadId && this.presentation === 'structured') {
       await this.ensureProcess();
-      await this.request('thread/settings/update', { threadId: this.threadId, approvalPolicy: this.permissionMode, model: this.model, effort: this.effort });
+      const params = { threadId: this.threadId };
+      if (settings.permissionMode !== undefined) {
+        const approvalPolicy = this.permissionMode || this.configPermissionMode;
+        if (approvalPolicy) params.approvalPolicy = approvalPolicy;
+      }
+      if (settings.sandboxMode !== undefined) {
+        const sandboxPolicy = sandboxPolicyFor(this.sandboxMode || this.configSandboxMode, this.workingDir,
+          this.sandboxMode ? {} : this.configSandboxWorkspaceWrite);
+        if (sandboxPolicy) params.sandboxPolicy = sandboxPolicy;
+      }
+      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() });
     return this.getControlState();
@@ -444,17 +590,26 @@ class CodexStructuredSession extends EventEmitter {
     this.append({ kind: 'user', text: prompt });
     await this.ensureProcess();
     if (!this.threadId) {
-      const started = await this.request('thread/start', { model: this.model, cwd: this.workingDir, approvalPolicy: this.permissionMode, sandbox: 'workspace-write' });
+      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);
       this.threadId = started.thread?.id;
       this.model = started.model || this.model;
       this.effort = started.reasoningEffort || this.effort;
+      this.effectivePermissionMode = started.approvalPolicy || this.effectivePermissionMode;
+      this.effectiveSandboxMode = sandboxModeFromPolicy(started.sandbox) || this.effectiveSandboxMode;
       this.emitEvent({ type: 'state', state: this.getControlState() });
     }
     this.setStatus('running');
-    const started = await this.request('turn/start', { threadId: this.threadId, input: [{ type: 'text', text: prompt }], cwd: this.workingDir,
-      approvalPolicy: this.permissionMode,
-      sandboxPolicy: { type: 'workspaceWrite', writableRoots: [this.workingDir], networkAccess: false, excludeTmpdirEnvVar: false, excludeSlashTmp: false },
-      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;
+    const started = await this.request('turn/start', params);
     this.currentTurnId = started?.turn?.id || started?.turnId || this.currentTurnId;
     return true;
   }
@@ -521,17 +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 result = await this.request('thread/resume', { threadId: target, model: this.model, cwd: this.workingDir, approvalPolicy: this.permissionMode, sandbox: 'workspace-write' });
+    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,13 @@
         .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(4, minmax(0, 1fr)); gap: 7px; align-items: center; }
-        .codex-select { appearance: none; max-width: 116px; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.08); color: #f5f5f7; font-weight: 700; font-size: 12px; }
+        .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); }
+        .codex-select { appearance: none; position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; opacity: 0; cursor: pointer; }
         .codex-select option { background: #1c1c1e; color: #fff; }
         #codex-model-panel, #codex-resume-panel { display: none; margin-top: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(28,28,30,.99); border-radius: 8px; box-shadow: 0 16px 36px rgba(0,0,0,.34); overflow: hidden; }
         #codex-model-panel.active, #codex-resume-panel.active { display: block; }
@@ -128,7 +141,8 @@
         .codex-picker-column + .codex-picker-column { border-left: 1px solid rgba(255,255,255,.08); }
         .codex-picker-option { display: block; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); background: transparent; color: #f5f5f7; text-align: left; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
         .codex-picker-option.selected { background: rgba(0,122,255,.18); color: #fff; }
-        #codex-state-bar { display: none; align-items: center; gap: 7px; min-height: 24px; margin-top: 8px; color: var(--text-dim); font-size: 11px; }
+        #codex-state-bar { display: flex; align-items: center; gap: 7px; min-height: 24px; margin-top: 8px; color: var(--text-dim); font-size: 11px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
+        #codex-state-bar::-webkit-scrollbar { display: none; }
         #codex-resume-panel { max-height: min(280px, 38dvh); overflow-y: auto; }
         .claude-context-size-badge { position: sticky; top: 0; z-index: 2; width: max-content; max-width: 100%; margin: 0 0 8px auto; border: 1px solid rgba(255,255,255,0.1); background: rgba(28,28,30,0.94); border-radius: 999px; padding: 4px 9px; color: #d1d5db; font-size: 11px; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,0.24); }
         .claude-message { max-width: 92%; margin: 0 0 10px 0; padding: 10px 12px; border-radius: 8px; overflow-wrap: anywhere; line-height: 1.45; font-size: 14px; }
@@ -287,8 +301,10 @@
             #nav-bar > div:last-child { gap: 5px !important; }
             #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: 10px; padding-right: 10px; }
-            .codex-control-row { gap: 6px; }
+            #codex-control-panel { padding-left: 8px; padding-right: 8px; }
+            .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)); }
             .codex-message.user { max-width: 94%; }
             .claude-permission-actions { justify-content: flex-start; }
@@ -405,10 +421,20 @@
                 </div>
                 <div id="codex-control-panel">
                     <div class="codex-control-row">
-                        <select id="codex-permission-select" class="codex-select" title="Permission mode" onchange="updateCodexSettingsFromControls()">
-                            <option value="untrusted">Untrusted</option><option value="on-request">On request</option><option value="never">Never ask</option>
-                        </select>
+                        <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()">
+                                <option value="default">Default</option><option value="read-only">Read only</option><option value="workspace-write">Workspace write</option><option value="danger-full-access">Full access</option>
+                            </select>
+                        </label>
+                        <label class="codex-select-control" title="Approval policy">
+                            <span class="codex-select-label" aria-hidden="true">Ask</span>
+                            <select id="codex-permission-select" class="codex-select" aria-label="Approval policy" onchange="updateCodexSettingsFromControls()">
+                                <option value="default">Default</option><option value="untrusted">Untrusted</option><option value="on-request">On request</option><option value="never">Never ask</option>
+                            </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>
@@ -607,7 +633,7 @@
         let claudeResumeItemsLoaded = false;
         let codexMessages = [];
         let codexPendingPermissions = [];
-        let codexState = { permissionMode: 'on-request', 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, canSwitchToTerminal: false, canSwitchToStructured: false };
         let codexModelPanelOpen = false;
         let codexModelCandidate = null;
         let codexResumePanelOpen = false;
@@ -2062,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);
@@ -2075,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');
@@ -2093,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);
@@ -2109,27 +2177,47 @@
                 }
                 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));
-            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; });
         }
 
         function applyCodexState(state = {}) {
+            const presentationChanged = state.presentation !== undefined && state.presentation !== codexState.presentation;
             codexState = { ...codexState, ...state };
             const permission = document.getElementById('codex-permission-select');
-            if (permission) permission.value = codexState.permissionMode || 'on-request';
+            if (permission) {
+                const defaultOption = permission.querySelector('option[value="default"]');
+                const labels = { untrusted: 'Untrusted', 'on-request': 'On request', never: 'Never ask' };
+                if (defaultOption) defaultOption.textContent = codexState.effectivePermissionMode
+                    ? `Default (${labels[codexState.effectivePermissionMode] || codexState.effectivePermissionMode})`
+                    : 'Default';
+                permission.value = codexState.permissionMode || 'default';
+            }
+            const sandbox = document.getElementById('codex-sandbox-select');
+            if (sandbox) {
+                const defaultOption = sandbox.querySelector('option[value="default"]');
+                const labels = { 'read-only': 'Read only', 'workspace-write': 'Workspace write', 'danger-full-access': 'Full access' };
+                if (defaultOption) defaultOption.textContent = codexState.effectiveSandboxMode
+                    ? `Default (${labels[codexState.effectiveSandboxMode] || codexState.effectiveSandboxMode})`
+                    : 'Default';
+                sandbox.value = codexState.sandboxMode || 'default';
+            }
             const modelButton = document.getElementById('codex-model-btn');
-            if (modelButton) modelButton.textContent = codexState.model ? codexState.model.replace(/^gpt-/, '').slice(0, 10) : 'Model';
+            if (modelButton) modelButton.textContent = 'Model';
             const abort = document.getElementById('codex-abort-btn');
             if (abort) abort.disabled = !codexState.canAbort;
             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();
-            setClaudeModeEnabled(isClaudeSession());
+            if (presentationChanged) setClaudeModeEnabled(isClaudeSession());
             renderCodexChat();
         }
 
@@ -2139,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';
         }
@@ -2185,8 +2272,14 @@
         }
 
         function sendCodexSettings(settings) { if (currentSocket?.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-settings', settings })); }
-        function updateCodexSettingsFromControls() { const permissionMode = document.getElementById('codex-permission-select').value; applyCodexState({ permissionMode }); sendCodexSettings({ permissionMode }); }
+        function updateCodexSettingsFromControls() {
+            const permissionMode = document.getElementById('codex-permission-select').value;
+            const sandboxMode = document.getElementById('codex-sandbox-select').value;
+            applyCodexState({ permissionMode, sandboxMode });
+            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;
@@ -2345,7 +2438,7 @@
             codexResumePanelOpen = false;
             document.getElementById('codex-model-panel').classList.remove('active');
             document.getElementById('codex-resume-panel').classList.remove('active');
-            codexState = { permissionMode: 'on-request', 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, canSwitchToTerminal: false, canSwitchToStructured: false };
             setClaudeModeEnabled(false);
             applyCodexState(codexState);
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glad-web",
-  "version": "1.0.22",
+  "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"