glad-web 1.0.23 → 1.0.25

package/lib/codex/structured-session.js

@@ -43,6 +43,19 @@ function safeJson(value) {
   try { return JSON.stringify(value || {}, null, 2); } catch (_) { return String(value || ''); }
 }
 
+function appServerSpawnOptions({ cwd, env, platform = process.platform }) {
+  const options = { cwd, env, stdio: ['pipe', 'pipe', 'pipe'] };
+
+  // Globally installed npm CLIs expose a .cmd shim on Windows. child_process.spawn
+  // does not resolve that shim without a shell, causing `spawn codex ENOENT`.
+  if (platform === 'win32') {
+    options.shell = true;
+    options.windowsHide = true;
+  }
+
+  return options;
+}
+
 function textFromInputItems(content) {
   return (Array.isArray(content) ? content : [])
     .filter(item => item && item.type === 'text')
@@ -122,6 +135,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 +143,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 = [];
@@ -217,9 +235,10 @@ class CodexStructuredSession extends EventEmitter {
   async ensureProcess() {
     if (this.processReady) return this.processReady;
     this.processReady = new Promise((resolve, reject) => {
-      const child = spawn(this.tool.command, ['app-server', '--listen', 'stdio://'], {
-        cwd: this.workingDir, env: { ...process.env }, stdio: ['pipe', 'pipe', 'pipe']
-      });
+      const child = spawn(this.tool.command, ['app-server', '--listen', 'stdio://'], appServerSpawnOptions({
+        cwd: this.workingDir,
+        env: { ...process.env }
+      }));
       this.process = child;
       const fail = error => {
         this.processReady = null;
@@ -325,6 +344,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 +361,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 +428,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 +443,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 +464,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 +481,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 +511,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,22 +589,29 @@ 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() });
     return this.getControlState();
   }
 
-  async sendUserMessage(text) {
+  async sendUserMessage(text, attachments = []) {
     const prompt = String(text || '').trim();
-    if (!prompt || this.presentation !== 'structured' || this.status !== 'idle') return false;
+    const images = (Array.isArray(attachments) ? attachments : [])
+      .filter(item => item && typeof item.path === 'string' && item.path);
+    if ((!prompt && images.length === 0) || this.presentation !== 'structured' || this.status !== 'idle') return false;
     this.hasUnreadCompletion = false;
-    this.append({ kind: 'user', text: prompt });
+    this.append({
+      kind: 'user',
+      text: prompt || '📷 Image attachment',
+      attachments: images.map(item => ({ id: item.id, name: item.name || 'image' }))
+    });
     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 +623,12 @@ 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 input = [];
+    if (prompt) input.push({ type: 'text', text: prompt });
+    for (const image of images) input.push({ type: 'localImage', path: image.path });
+    const params = { threadId: this.threadId, input, 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 +699,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 });
@@ -666,3 +783,4 @@ class CodexStructuredSession extends EventEmitter {
 }
 
 module.exports = CodexStructuredSession;
+module.exports.appServerSpawnOptions = appServerSpawnOptions;

package/lib/commands/web.js

@@ -266,6 +266,51 @@ async function webCommand(options) {
     res.json({ success: true });
   });
 
+  // Browser images are stored only in a private, per-session temporary directory.
+  // Codex receives the resulting local path through its app-server protocol.
+  app.post('/api/sessions/:id/attachments/images', express.raw({ type: () => true, limit: '50mb' }), async (req, res) => {
+    try {
+      const attachment = await sessionManager.storeCodexImageAttachment(req.params.id, req.body);
+      res.status(201).json({ success: true, attachment });
+    } catch (e) {
+      res.status(e.statusCode || 500).json({ error: e.message });
+    }
+  });
+
+  // Mobile Safari can coalesce progress events for a single large request.
+  // Small sequential chunks let the browser report progress from server receipts.
+  app.post('/api/sessions/:id/attachments/images/chunks', express.raw({ type: () => true, limit: '1mb' }), async (req, res) => {
+    try {
+      const result = await sessionManager.appendCodexImageChunk(req.params.id, {
+        uploadId: req.get('X-Glad-Upload-Id'),
+        chunkIndex: req.get('X-Glad-Chunk-Index'),
+        chunkTotal: req.get('X-Glad-Chunk-Total')
+      }, req.body);
+      res.json({ success: true, ...result });
+    } catch (e) {
+      res.status(e.statusCode || 500).json({ error: e.message });
+    }
+  });
+
+  app.delete('/api/sessions/:id/attachments/images/uploads/:uploadId', async (req, res) => {
+    try {
+      const removed = await sessionManager.discardCodexImageUpload(req.params.id, req.params.uploadId);
+      res.json({ success: true, removed });
+    } catch (e) {
+      res.status(e.statusCode || 500).json({ error: e.message });
+    }
+  });
+
+  app.delete('/api/sessions/:id/attachments/images/:attachmentId', async (req, res) => {
+    try {
+      const removed = await sessionManager.discardCodexImageAttachment(req.params.id, req.params.attachmentId);
+      if (!removed) return res.status(404).json({ error: 'Image attachment not found' });
+      res.json({ success: true });
+    } catch (e) {
+      res.status(e.statusCode || 500).json({ error: e.message });
+    }
+  });
+
   // API: Delete/Kill session
   app.delete('/api/sessions/:id', (req, res) => {
     sessionManager.kill(req.params.id);
@@ -514,7 +559,8 @@ async function webCommand(options) {
           sessionManager.abortClaude(sessionId);
         }
         if (payload.type === 'codex-input') {
-          sessionManager.write(sessionId, payload.text || '');
+          sessionManager.sendCodexInput(sessionId, payload.text || '', payload.attachmentIds || [])
+            .catch(error => logger.error(`Codex input error: ${error.message}`));
         }
         if (payload.type === 'codex-permission') {
           const codex = sessionManager.get(sessionId);
@@ -525,6 +571,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

@@ -21,6 +21,30 @@ function previewText(text, maxChars = 320) {
   return normalized.length > maxChars ? normalized.slice(-maxChars) : normalized;
 }
 
+const CODEX_IMAGE_MAX_BYTES = 50 * 1024 * 1024;
+const CODEX_IMAGE_MAX_PER_SESSION = 5;
+const CODEX_IMAGE_CLEANUP_DELAY_MS = 5 * 60 * 1000;
+const CODEX_IMAGE_MAX_CHUNKS = 128;
+
+function detectImageExtension(buffer) {
+  if (!Buffer.isBuffer(buffer) || buffer.length < 12) return null;
+  if (buffer.subarray(0, 8).equals(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]))) return 'png';
+  if (buffer[0] === 0xff && buffer[1] === 0xd8 && buffer[2] === 0xff) return 'jpg';
+  if (buffer.subarray(0, 6).equals(Buffer.from('GIF87a')) || buffer.subarray(0, 6).equals(Buffer.from('GIF89a'))) return 'gif';
+  if (buffer.subarray(0, 4).equals(Buffer.from('RIFF')) && buffer.subarray(8, 12).equals(Buffer.from('WEBP'))) return 'webp';
+  return null;
+}
+
+function attachmentError(message, statusCode = 400) {
+  const error = new Error(message);
+  error.statusCode = statusCode;
+  return error;
+}
+
+function isSafeUploadId(value) {
+  return typeof value === 'string' && /^[a-zA-Z0-9-]{8,100}$/.test(value);
+}
+
 class SessionManager extends EventEmitter {
   constructor({ baseDir, renderHistoryTools, debugHistoryEnabled = false, logger, hasConnectedSessionClient } = {}) {
     super();
@@ -30,6 +54,8 @@ class SessionManager extends EventEmitter {
     this.logger = logger || console;
     this.hasConnectedSessionClient = hasConnectedSessionClient || (() => false);
     this.sessions = new Map();
+    this.codexImageRoot = path.join(os.tmpdir(), 'glad', 'codex-images');
+    this.codexImageUploadRoot = path.join(os.tmpdir(), 'glad', 'codex-image-uploads');
   }
 
   list() {
@@ -177,6 +203,8 @@ class SessionManager extends EventEmitter {
     }
     const id = uuidv4();
     const session = new CodexStructuredSession({ id, tool, workingDir: sessionDir, name: name || tool.displayName, logger: this.logger, options: codexOptions });
+    session.imageAttachments = new Map();
+    session.imageUploads = new Map();
     this.sessions.set(id, session);
     session.on('event', event => this.emit('codex-event', { sessionId: id, event, session }));
     session.on('output', data => this.emit('output', { sessionId: id, data, session }));
@@ -203,6 +231,155 @@ class SessionManager extends EventEmitter {
     return session.sendUserMessage(text);
   }
 
+  async storeCodexImageAttachment(id, bytes) {
+    const session = this.get(id);
+    if (!session) throw attachmentError('Session not found', 404);
+    if (session.kind !== 'codex-structured' || session.presentation !== 'structured') {
+      throw attachmentError('Image attachments are available only in Codex chat mode');
+    }
+    if (!Buffer.isBuffer(bytes) || bytes.length === 0) throw attachmentError('Image data is required');
+    if (bytes.length > CODEX_IMAGE_MAX_BYTES) throw attachmentError('Image must be 50 MB or smaller');
+    if (session.imageAttachments.size >= CODEX_IMAGE_MAX_PER_SESSION) {
+      throw attachmentError(`You can attach at most ${CODEX_IMAGE_MAX_PER_SESSION} images at a time`);
+    }
+
+    const extension = detectImageExtension(bytes);
+    if (!extension) throw attachmentError('Only PNG, JPEG, GIF, and WebP images are supported');
+
+    const directory = path.join(this.codexImageRoot, session.id);
+    await fs.promises.mkdir(directory, { recursive: true, mode: 0o700 });
+    const attachment = {
+      id: uuidv4(),
+      name: `image.${extension}`,
+      path: path.join(directory, `${uuidv4()}.${extension}`),
+      size: bytes.length,
+      createdAt: Date.now(),
+      cleanupTimer: null
+    };
+    await fs.promises.writeFile(attachment.path, bytes, { mode: 0o600, flag: 'wx' });
+    session.imageAttachments.set(attachment.id, attachment);
+    return { id: attachment.id, name: attachment.name, size: attachment.size };
+  }
+
+  async appendCodexImageChunk(id, input = {}, bytes) {
+    const session = this.get(id);
+    if (!session) throw attachmentError('Session not found', 404);
+    if (session.kind !== 'codex-structured' || session.presentation !== 'structured') {
+      throw attachmentError('Image attachments are available only in Codex chat mode');
+    }
+    if (!Buffer.isBuffer(bytes) || bytes.length === 0) throw attachmentError('Image chunk is required');
+    const uploadId = String(input.uploadId || '');
+    const chunkIndex = Number(input.chunkIndex);
+    const chunkTotal = Number(input.chunkTotal);
+    if (!isSafeUploadId(uploadId)) throw attachmentError('Invalid image upload id');
+    if (!Number.isInteger(chunkIndex) || !Number.isInteger(chunkTotal) || chunkIndex < 0 || chunkTotal < 1 || chunkTotal > CODEX_IMAGE_MAX_CHUNKS || chunkIndex >= chunkTotal) {
+      throw attachmentError('Invalid image chunk metadata');
+    }
+
+    let upload = session.imageUploads.get(uploadId);
+    if (!upload) {
+      if (chunkIndex !== 0) throw attachmentError('Image upload must start with the first chunk');
+      const directory = path.join(this.codexImageUploadRoot, session.id);
+      await fs.promises.mkdir(directory, { recursive: true, mode: 0o700 });
+      upload = {
+        id: uploadId,
+        path: path.join(directory, `${uploadId}.part`),
+        chunkTotal,
+        nextChunkIndex: 0,
+        bytes: 0
+      };
+      session.imageUploads.set(uploadId, upload);
+    }
+    if (upload.chunkTotal !== chunkTotal || upload.nextChunkIndex !== chunkIndex) {
+      throw attachmentError('Image chunks arrived out of order');
+    }
+    if (upload.bytes + bytes.length > CODEX_IMAGE_MAX_BYTES) {
+      await this.discardCodexImageUpload(id, uploadId);
+      throw attachmentError('Image must be 50 MB or smaller');
+    }
+
+    if (chunkIndex === 0) await fs.promises.writeFile(upload.path, bytes, { mode: 0o600, flag: 'wx' });
+    else await fs.promises.appendFile(upload.path, bytes, { mode: 0o600 });
+    upload.bytes += bytes.length;
+    upload.nextChunkIndex += 1;
+
+    if (upload.nextChunkIndex < upload.chunkTotal) {
+      return { complete: false, receivedChunks: upload.nextChunkIndex, size: upload.bytes };
+    }
+
+    session.imageUploads.delete(uploadId);
+    try {
+      const image = await fs.promises.readFile(upload.path);
+      const attachment = await this.storeCodexImageAttachment(id, image);
+      return { complete: true, attachment };
+    } finally {
+      await fs.promises.rm(upload.path, { force: true });
+    }
+  }
+
+  async discardCodexImageUpload(id, uploadId) {
+    const session = this.get(id);
+    if (!session || !session.imageUploads || !isSafeUploadId(uploadId)) return false;
+    const upload = session.imageUploads.get(uploadId);
+    if (!upload) return false;
+    session.imageUploads.delete(uploadId);
+    await fs.promises.rm(upload.path, { force: true });
+    return true;
+  }
+
+  async discardCodexImageAttachment(id, attachmentId) {
+    const session = this.get(id);
+    if (!session || session.kind !== 'codex-structured') return false;
+    const attachment = session.imageAttachments.get(attachmentId);
+    if (!attachment) return false;
+    clearTimeout(attachment.cleanupTimer);
+    session.imageAttachments.delete(attachmentId);
+    await fs.promises.rm(attachment.path, { force: true });
+    return true;
+  }
+
+  getCodexImageAttachments(id, attachmentIds = []) {
+    const session = this.get(id);
+    if (!session || session.kind !== 'codex-structured') throw attachmentError('Codex session not found', 404);
+    const ids = Array.isArray(attachmentIds) ? attachmentIds : [];
+    if (ids.length > CODEX_IMAGE_MAX_PER_SESSION) throw attachmentError(`You can attach at most ${CODEX_IMAGE_MAX_PER_SESSION} images at a time`);
+    const uniqueIds = [...new Set(ids.map(value => String(value)))];
+    if (uniqueIds.length !== ids.length) throw attachmentError('Duplicate image attachment');
+    return uniqueIds.map(attachmentId => {
+      const attachment = session.imageAttachments.get(attachmentId);
+      if (!attachment) throw attachmentError('Image attachment is no longer available');
+      return attachment;
+    });
+  }
+
+  scheduleCodexImageCleanup(id, attachmentIds) {
+    const session = this.get(id);
+    if (!session || session.kind !== 'codex-structured') return;
+    for (const attachmentId of attachmentIds) {
+      const attachment = session.imageAttachments.get(attachmentId);
+      if (!attachment) continue;
+      clearTimeout(attachment.cleanupTimer);
+      attachment.cleanupTimer = setTimeout(() => {
+        this.discardCodexImageAttachment(id, attachmentId).catch(error => {
+          this.logger.debugInfo?.(`[codex-image] cleanup failed: ${error.message}`);
+        });
+      }, CODEX_IMAGE_CLEANUP_DELAY_MS);
+      attachment.cleanupTimer.unref?.();
+    }
+  }
+
+  async sendCodexInput(id, text, attachmentIds = []) {
+    const session = this.get(id);
+    if (!session || session.kind !== 'codex-structured') return false;
+    const attachments = this.getCodexImageAttachments(id, attachmentIds);
+    const prompt = String(text || '');
+    if (!prompt.trim() && attachments.length === 0) return false;
+    this.markSessionInput(session, prompt || '[image attachment]');
+    const sent = await session.sendUserMessage(prompt, attachments);
+    if (sent && attachments.length) this.scheduleCodexImageCleanup(id, attachments.map(item => item.id));
+    return sent;
+  }
+
   respondClaudePermission(id, permissionId, approved, action = null) {
     const session = this.get(id);
     if (!session || session.kind !== 'claude-structured') return false;
@@ -245,6 +422,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;
@@ -432,6 +615,8 @@ class SessionManager extends EventEmitter {
     if (!session) return false;
     clearTimeout(session.completionTimer);
     this.clearTimedInputs(session);
+    this.clearCodexImageUploads(session);
+    this.clearCodexImageAttachments(session);
     this.logSessionDiagnostics('session-deleted', session, {}, { compact: true });
     this.disposeSessionHistory(session);
     if (['claude-structured', 'codex-structured'].includes(session.kind)) {
@@ -448,6 +633,8 @@ class SessionManager extends EventEmitter {
     for (const session of this.sessions.values()) {
       clearTimeout(session.completionTimer);
       this.clearTimedInputs(session);
+      this.clearCodexImageUploads(session);
+      this.clearCodexImageAttachments(session);
       this.disposeSessionHistory(session);
       session.ptyManager.kill();
     }
@@ -796,6 +983,8 @@ class SessionManager extends EventEmitter {
     this.logger.info(`Session ${session.id} (${session.name}) exited.`);
     clearTimeout(session.completionTimer);
     this.clearTimedInputs(session);
+    this.clearCodexImageUploads(session);
+    this.clearCodexImageAttachments(session);
     this.disposeSessionHistory(session);
     this.sessions.delete(session.id);
     this.emit('exit', { sessionId: session.id, session });
@@ -838,6 +1027,23 @@ class SessionManager extends EventEmitter {
     session.timedInputs.clear();
   }
 
+  clearCodexImageAttachments(session) {
+    if (!session || !session.imageAttachments) return;
+    for (const attachment of session.imageAttachments.values()) clearTimeout(attachment.cleanupTimer);
+    session.imageAttachments.clear();
+    fs.promises.rm(path.join(this.codexImageRoot, session.id), { recursive: true, force: true }).catch(error => {
+      this.logger.debugInfo?.(`[codex-image] session cleanup failed: ${error.message}`);
+    });
+  }
+
+  clearCodexImageUploads(session) {
+    if (!session || !session.imageUploads) return;
+    session.imageUploads.clear();
+    fs.promises.rm(path.join(this.codexImageUploadRoot, session.id), { recursive: true, force: true }).catch(error => {
+      this.logger.debugInfo?.(`[codex-image] upload cleanup failed: ${error.message}`);
+    });
+  }
+
   getSessionDiagnostics(session, extra = {}) {
     if (['claude-structured', 'codex-structured'].includes(session.kind)) {
       return {

package/lib/web/index.html

@@ -52,9 +52,26 @@
         #cmd-input { flex: 1; min-height: 38px; max-height: 150px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 19px; color: #fff; padding: 9px 16px; font-size: 16px; outline: none; resize: none; overflow-y: auto; line-height: 20px; box-sizing: border-box; transition: background 0.18s ease, border-color 0.18s ease; }
         #cmd-input::placeholder { color: rgba(255,255,255,0.45); }
         #cmd-input:focus { background: rgba(255,255,255,0.1); border-color: rgba(0,122,255,0.42); color: #fff; }
-        #timer-btn { width: 38px; height: 38px; margin-left: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 19px; color: #d1d5db; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
+        #timer-btn { width: 38px; height: 38px; margin-left: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 19px; color: #d1d5db; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; font-size: 24px; line-height: 1; }
         #timer-btn.active { color: #fff; border-color: rgba(0,122,255,0.45); background: rgba(0,122,255,0.22); }
         #send-btn { width: 44px; height: 38px; margin-left: 10px; background: #007aff; border: none; border-radius: 19px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
+        #composer-menu { display: none; width: min(calc(100% - 28px), var(--control-content-max)); margin: -2px auto 8px auto; padding: 6px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(38,38,42,0.98); box-shadow: 0 12px 28px rgba(0,0,0,0.28); box-sizing: border-box; }
+        #composer-menu.active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
+        .composer-menu-btn { min-height: 42px; border: 0; border-radius: 9px; background: rgba(255,255,255,0.08); color: #fff; font-size: 14px; font-weight: 650; cursor: pointer; }
+        .composer-menu-btn:hover { background: rgba(255,255,255,0.14); }
+        #attachment-strip { display: none; width: min(calc(100% - 28px), var(--control-content-max)); margin: -3px auto 2px auto; gap: 7px; overflow-x: auto; padding: 0 0 4px 0; box-sizing: border-box; scrollbar-width: none; }
+        #attachment-strip.active { display: flex; }
+        #attachment-strip::-webkit-scrollbar { display: none; }
+        .attachment-chip { min-width: 0; max-width: 210px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(0,122,255,0.45); border-radius: 10px; background: rgba(0,122,255,0.14); color: #e9f2ff; font-size: 12px; }
+        .attachment-chip.uploading { border-color: rgba(255,159,10,0.55); background: rgba(255,159,10,0.12); }
+        .attachment-chip-content { min-width: 0; flex: 1; }
+        .attachment-chip-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .attachment-progress { display: block; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.16); }
+        .attachment-progress > span { display: block; height: 100%; border-radius: inherit; background: #ff9f0a; transition: width .15s ease; }
+        .attachment-progress.estimated > span { background: repeating-linear-gradient(90deg, #ff9f0a 0 12px, #ffd37b 12px 24px); background-size: 48px 100%; animation: attachment-upload-pulse .75s linear infinite; }
+        .attachment-status { display: block; margin-top: 3px; color: #ffd59a; font-size: 10px; }
+        @keyframes attachment-upload-pulse { from { background-position: 0 0; } to { background-position: 48px 0; } }
+        .attachment-remove { width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; font-size: 15px; line-height: 18px; cursor: pointer; flex: 0 0 auto; }
         #timed-send-panel { display: none; margin: 0 14px 10px 14px; padding: 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(28,28,30,0.98); box-sizing: border-box; }
         #timed-send-panel.active { display: block; }
         .timed-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
@@ -80,9 +97,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 +142,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 +319,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)); }
@@ -367,13 +393,17 @@
                 <div id="timed-tag-rail"></div>
                 <div id="input-row">
                     <textarea id="cmd-input" rows="1" placeholder="Type a message..."></textarea>
-                    <button id="timer-btn" title="Schedule send">
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
-                    </button>
+                    <button id="timer-btn" title="Add image or schedule send" aria-label="Add image or schedule send">+</button>
                     <button id="send-btn">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                     </button>
                 </div>
+                <div id="attachment-strip" aria-live="polite"></div>
+                <div id="composer-menu" role="menu">
+                    <button id="attach-image-btn" class="composer-menu-btn" type="button" role="menuitem">Add image</button>
+                    <button id="schedule-send-btn" class="composer-menu-btn" type="button" role="menuitem">Schedule send</button>
+                </div>
+                <input id="image-file-input" type="file" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden>
                 <div id="claude-control-panel">
                     <div class="claude-control-row">
                         <div class="claude-picker-wrap">
@@ -425,6 +455,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>
@@ -932,6 +963,7 @@
             document.getElementById('codex-control-panel').style.display = codexChat ? 'block' : 'none';
             document.getElementById('codex-terminal-switch').style.display = isCodexSession() ? '' : 'none';
             document.getElementById('timer-btn').style.display = '';
+            document.getElementById('attach-image-btn').style.display = codexChat ? '' : 'none';
             document.getElementById('shortcut-rail').style.display = structured ? 'none' : '';
             document.getElementById('scroll-controls').style.display = structured ? 'none' : '';
             document.getElementById('cmd-input').placeholder = enabled ? 'Message Claude...' : codexChat ? 'Message Codex...' : 'Type a message...';
@@ -2078,6 +2110,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 +2156,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 +2179,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 +2199,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 +2249,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 +2301,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;
@@ -2260,6 +2334,9 @@
         }
 
         function joinSession(id, sessionName, toolKey = null) {
+            if (typeof clearImageAttachments === 'function' && selectedImageAttachments.length) {
+                void clearImageAttachments();
+            }
             stopTimedInputTimers();
             activeSessionId = id;
             window.activeSessionId = id;
@@ -2603,8 +2680,177 @@
         }
 
         const inputEl = document.getElementById('cmd-input');
+        const imageFileInput = document.getElementById('image-file-input');
+        const attachmentStrip = document.getElementById('attachment-strip');
+        let selectedImageAttachments = [];
         let keepTerminalBottomForNextInput = false;
 
+        function isCodexImageAttachmentAvailable() {
+            return isCodexSession() && codexState.presentation === 'structured';
+        }
+
+        function syncComposerButtonState() {
+            const menuOpen = document.getElementById('composer-menu').classList.contains('active');
+            const timerOpen = document.getElementById('timed-send-panel').classList.contains('active');
+            document.getElementById('timer-btn').classList.toggle('active', menuOpen || timerOpen);
+        }
+
+        function renderImageAttachments() {
+            attachmentStrip.innerHTML = selectedImageAttachments.map(item => (
+                `<div class="attachment-chip${item.uploading ? ' uploading' : ''}"><span aria-hidden="true">▧</span><span class="attachment-chip-content"><span class="attachment-chip-name" title="${escapeHtml(item.name)}">${escapeHtml(item.name)}</span>${item.uploading ? `<span class="attachment-progress${item.progressKnown ? '' : ' estimated'}"><span style="width:${Math.max(0, Math.min(100, item.progress || 0))}%"></span></span><span class="attachment-status">${escapeHtml(item.status || (item.progressKnown ? `Uploading ${Math.round(item.progress || 0)}%` : 'Uploading original image…'))}</span>` : ''}</span><button class="attachment-remove" type="button" title="Remove image" aria-label="Remove ${escapeHtml(item.name)}" onclick="removeImageAttachment('${item.id}')">×</button></div>`
+            )).join('');
+            attachmentStrip.classList.toggle('active', selectedImageAttachments.length > 0);
+            updateTerminalControlsHeight();
+        }
+
+        window.removeImageAttachment = async function(attachmentId) {
+            const attachment = selectedImageAttachments.find(item => item.id === attachmentId);
+            selectedImageAttachments = selectedImageAttachments.filter(item => item.id !== attachmentId);
+            renderImageAttachments();
+            if (!attachment) return;
+            clearInterval(attachment.indicatorTimer);
+            attachment.abortUpload?.();
+            if (attachment.uploading) return;
+            try {
+                await fetchWithTimeout(`/api/sessions/${attachment.sessionId}/attachments/images/${encodeURIComponent(attachment.id)}`, { method: 'DELETE' });
+            } catch (_) {
+                // The server also removes all attachments when the session ends.
+            }
+        };
+
+        async function clearImageAttachments() {
+            const pending = selectedImageAttachments;
+            selectedImageAttachments = [];
+            renderImageAttachments();
+            for (const item of pending) item.abortUpload?.();
+            await Promise.all(pending.filter(item => !item.uploading).map(item => fetchWithTimeout(
+                `/api/sessions/${item.sessionId}/attachments/images/${encodeURIComponent(item.id)}`,
+                { method: 'DELETE' }
+            ).catch(() => null)));
+        }
+
+        const IMAGE_UPLOAD_CHUNK_BYTES = 512 * 1024;
+
+        function uploadImageInChunks(sessionId, file, onProgress) {
+            let xhr = null;
+            let cancelled = false;
+            const uploadId = crypto.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+            const chunkTotal = Math.ceil(file.size / IMAGE_UPLOAD_CHUNK_BYTES);
+            return {
+                abort: () => {
+                    cancelled = true;
+                    xhr?.abort();
+                    void fetch(`/api/sessions/${sessionId}/attachments/images/uploads/${encodeURIComponent(uploadId)}`, { method: 'DELETE' }).catch(() => null);
+                },
+                promise: (async () => {
+                    for (let chunkIndex = 0; chunkIndex < chunkTotal; chunkIndex++) {
+                        if (cancelled) throw new Error('Image upload cancelled');
+                        const start = chunkIndex * IMAGE_UPLOAD_CHUNK_BYTES;
+                        const chunk = file.slice(start, Math.min(file.size, start + IMAGE_UPLOAD_CHUNK_BYTES));
+                        const result = await new Promise((resolve, reject) => {
+                            xhr = new XMLHttpRequest();
+                            xhr.open('POST', `/api/sessions/${sessionId}/attachments/images/chunks`);
+                            xhr.timeout = 60_000;
+                            xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
+                            xhr.setRequestHeader('X-Glad-Upload-Id', uploadId);
+                            xhr.setRequestHeader('X-Glad-Chunk-Index', String(chunkIndex));
+                            xhr.setRequestHeader('X-Glad-Chunk-Total', String(chunkTotal));
+                            xhr.onerror = () => reject(new Error('Network error while uploading image'));
+                            xhr.ontimeout = () => reject(new Error(`Image upload timed out on chunk ${chunkIndex + 1}/${chunkTotal}`));
+                            xhr.onabort = () => reject(new Error('Image upload cancelled'));
+                            xhr.onload = () => {
+                                let data = {};
+                                try { data = JSON.parse(xhr.responseText || '{}'); } catch (_) {}
+                                if (xhr.status < 200 || xhr.status >= 300 || !data.success) {
+                                    reject(new Error(data.error || `Upload failed (HTTP ${xhr.status})`));
+                                    return;
+                                }
+                                resolve(data);
+                            };
+                            xhr.send(chunk);
+                        });
+                        const confirmedBytes = Math.min(file.size, start + chunk.size);
+                        onProgress(Math.round((confirmedBytes / file.size) * 100), chunkIndex + 1, chunkTotal);
+                        if (result.complete) return result.attachment;
+                    }
+                    throw new Error('Image upload did not complete');
+                })()
+            };
+        }
+
+        async function uploadImageFiles(files) {
+            if (!isCodexImageAttachmentAvailable()) {
+                alert('Image attachments are available only in Codex chat mode.');
+                return;
+            }
+            const remaining = 5 - selectedImageAttachments.length;
+            const batch = Array.from(files).slice(0, remaining);
+            if (files.length > remaining) alert('You can attach up to 5 images at a time.');
+            for (const file of batch) {
+                if (file.size > 50 * 1024 * 1024) {
+                    alert(`${file.name} is larger than 50 MB.`);
+                    continue;
+                }
+                const chunkTotal = Math.ceil(file.size / IMAGE_UPLOAD_CHUNK_BYTES);
+                const pending = {
+                    id: `uploading-${crypto.randomUUID?.() || `${Date.now()}-${Math.random()}`}`,
+                    name: file.name || 'image',
+                    sessionId: activeSessionId,
+                    uploading: true,
+                    progress: 0,
+                    progressKnown: true,
+                    status: '0%',
+                    abortUpload: null
+                };
+                selectedImageAttachments.push(pending);
+                renderImageAttachments();
+                try {
+                    const upload = uploadImageInChunks(activeSessionId, file, progress => {
+                        pending.progress = progress;
+                        pending.status = `${progress}%`;
+                        renderImageAttachments();
+                    });
+                    pending.abortUpload = upload.abort;
+                    const attachment = await upload.promise;
+                    const index = selectedImageAttachments.indexOf(pending);
+                    if (index < 0) {
+                        await fetchWithTimeout(`/api/sessions/${activeSessionId}/attachments/images/${encodeURIComponent(attachment.id)}`, { method: 'DELETE' });
+                        continue;
+                    }
+                    selectedImageAttachments[index] = { ...attachment, name: file.name || attachment.name, sessionId: activeSessionId };
+                    renderImageAttachments();
+                } catch (e) {
+                    selectedImageAttachments = selectedImageAttachments.filter(item => item !== pending);
+                    renderImageAttachments();
+                    if (e.message === 'Image upload cancelled') continue;
+                    alert(`Could not add ${file.name}: ${e.message}`);
+                }
+            }
+        }
+
+        function closeComposerMenu() {
+            document.getElementById('composer-menu').classList.remove('active');
+            syncComposerButtonState();
+            updateTerminalControlsHeight();
+        }
+
+        function openTimedSendPanel() {
+            closeComposerMenu();
+            if (isClaudeSession()) {
+                closeClaudePicker();
+                closeClaudeUsagePanel();
+                claudeResumePanelOpen = false;
+                document.getElementById('claude-resume-panel').classList.remove('active');
+            }
+            initTimedDelaySelectors();
+            resetTimedEditor({ keepInput: true });
+            document.getElementById('timed-send-panel').classList.add('active');
+            updateTimedSendPreview();
+            loadTimedInputs();
+            syncComposerButtonState();
+            updateTerminalControlsHeight();
+        }
+
         function markInputEditStart() {
             keepTerminalBottomForNextInput = keepTerminalBottomForNextInput || isTerminalAtBottom();
         }
@@ -2620,6 +2866,11 @@
         
         function performSend() {
             const val = inputEl.value;
+            const readyImageAttachments = selectedImageAttachments.filter(item => !item.uploading);
+            if (selectedImageAttachments.some(item => item.uploading)) {
+                alert('Wait for image uploads to finish before sending.');
+                return;
+            }
             if (val && isClaudeSession()) {
                 if (currentSocket && currentSocket.readyState === 1) {
                     currentSocket.send(JSON.stringify({ type: 'claude-input', text: val }));
@@ -2628,10 +2879,18 @@
                 inputEl.style.height = '38px';
                 return;
             }
-            if (val && isCodexSession() && codexState.presentation === 'structured') {
-                if (currentSocket && currentSocket.readyState === 1) currentSocket.send(JSON.stringify({ type: 'codex-input', text: val }));
+            if ((val || readyImageAttachments.length) && isCodexSession() && codexState.presentation === 'structured') {
+                if (currentSocket && currentSocket.readyState === 1) {
+                    currentSocket.send(JSON.stringify({
+                        type: 'codex-input',
+                        text: val,
+                        attachmentIds: readyImageAttachments.map(item => item.id)
+                    }));
+                }
                 inputEl.value = '';
                 inputEl.style.height = '38px';
+                selectedImageAttachments = [];
+                renderImageAttachments();
                 return;
             }
             if (val) {
@@ -2710,9 +2969,9 @@
 
         function closeTimedSendPanel() {
             document.getElementById('timed-send-panel').classList.remove('active');
-            document.getElementById('timer-btn').classList.remove('active');
             editingTimedInputId = null;
             renderTimedTags();
+            syncComposerButtonState();
             updateTerminalControlsHeight();
         }
 
@@ -2761,6 +3020,7 @@
         function editTimedInput(id) {
             const item = timedInputs.find(value => value.id === id);
             if (!item) return;
+            closeComposerMenu();
             initTimedDelaySelectors();
             editingTimedInputId = id;
             inputEl.value = item.text || '';
@@ -2771,9 +3031,9 @@
             document.getElementById('timed-cancel-edit-btn').style.display = '';
             document.getElementById('timed-delete-btn').style.display = '';
             document.getElementById('timed-send-panel').classList.add('active');
-            document.getElementById('timer-btn').classList.add('active');
             updateTimedSendPreview();
             renderTimedTags();
+            syncComposerButtonState();
             updateTerminalControlsHeight();
         }
 
@@ -2819,24 +3079,23 @@
         
         document.getElementById('send-btn').addEventListener('click', performSend);
         document.getElementById('timer-btn').addEventListener('click', () => {
-            const panel = document.getElementById('timed-send-panel');
-            const isOpen = panel.classList.toggle('active');
-            document.getElementById('timer-btn').classList.toggle('active', isOpen);
-            if (isOpen) {
-                if (isClaudeSession()) {
-                    closeClaudePicker();
-                    closeClaudeUsagePanel();
-                    claudeResumePanelOpen = false;
-                    document.getElementById('claude-resume-panel').classList.remove('active');
-                }
-                initTimedDelaySelectors();
-                resetTimedEditor({ keepInput: true });
-                updateTimedSendPreview();
-                loadTimedInputs();
-            }
-            else closeTimedSendPanel();
+            const menu = document.getElementById('composer-menu');
+            const willOpen = !menu.classList.contains('active');
+            document.getElementById('timed-send-panel').classList.remove('active');
+            menu.classList.toggle('active', willOpen);
+            syncComposerButtonState();
             updateTerminalControlsHeight();
         });
+        document.getElementById('attach-image-btn').addEventListener('click', () => {
+            closeComposerMenu();
+            imageFileInput.click();
+        });
+        document.getElementById('schedule-send-btn').addEventListener('click', openTimedSendPanel);
+        imageFileInput.addEventListener('change', () => {
+            const files = imageFileInput.files;
+            if (files?.length) void uploadImageFiles(files);
+            imageFileInput.value = '';
+        });
         inputEl.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && e.shiftKey) { e.preventDefault(); performSend(); }
             else if (e.key === 'Enter' || e.key === 'Backspace' || e.key === 'Delete') {

package/package.json

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