glad-web 1.0.24 → 1.0.26

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')
@@ -50,6 +63,22 @@ function textFromInputItems(content) {
     .join('\n');
 }
 
+function recentUserQuestions(thread, limit = 2) {
+  const questions = [];
+  const turns = Array.isArray(thread?.turns) ? thread.turns : [];
+  for (let turnIndex = turns.length - 1; turnIndex >= 0 && questions.length < limit; turnIndex -= 1) {
+    const items = Array.isArray(turns[turnIndex]?.items) ? turns[turnIndex].items : [];
+    for (let itemIndex = items.length - 1; itemIndex >= 0 && questions.length < limit; itemIndex -= 1) {
+      const item = items[itemIndex];
+      if (item?.type !== 'userMessage') continue;
+      const text = (textFromInputItems(item.content) || item.text || '').trim();
+      if (text) questions.push(text);
+    }
+  }
+  while (questions.length < limit) questions.push('');
+  return questions;
+}
+
 function toolDetails(raw) {
   if (raw.type === 'commandExecution') {
     return {
@@ -85,13 +114,22 @@ function toolDetails(raw) {
     };
   }
   if (raw.type === 'collabAgentToolCall') {
+    const receiverThreadIds = Array.isArray(raw.receiverThreadIds) ? raw.receiverThreadIds.filter(Boolean) : [];
+    const input = raw.arguments || raw.input || {
+      ...(raw.prompt ? { prompt: raw.prompt } : {}),
+      ...(receiverThreadIds.length ? { receiverThreadIds } : {}),
+      ...(raw.agentsStates && Object.keys(raw.agentsStates).length ? { agentsStates: raw.agentsStates } : {})
+    };
     return {
       name: 'Agent',
       title: raw.tool || raw.action || 'Subagent',
-      input: raw.arguments || raw.input || raw,
-      result: raw.error != null ? String(raw.error) : safeJson(raw.result || ''),
+      tool: raw.tool || raw.action || 'subagent',
+      input,
+      result: raw.error != null ? String(raw.error) : raw.result == null ? '' : safeJson(raw.result),
       error: raw.error != null ? String(raw.error) : null,
-      subagentId: raw.receiverThreadId || raw.agentId || raw.id || null
+      subagentId: raw.receiverThreadId || receiverThreadIds[0] || raw.agentId || null,
+      subagentIds: receiverThreadIds,
+      agentsStates: raw.agentsStates || {}
     };
   }
   return {
@@ -122,6 +160,7 @@ class CodexStructuredSession extends EventEmitter {
     this.threadId = options.resume || null;
     this.currentTurnId = null;
     this.currentTurnStartedAt = null;
+    this.threadTurns = new Map();
     this.tokenUsage = null;
     this.permissionMode = normalizePermissionMode(options.permissionMode);
     this.sandboxMode = normalizeSandboxMode(options.sandboxMode);
@@ -173,6 +212,8 @@ class CodexStructuredSession extends EventEmitter {
   }
 
   getControlState() {
+    const activeSubagentCount = Array.from(this.threadTurns.entries())
+      .filter(([threadId, turn]) => threadId !== this.threadId && turn?.status === 'running').length;
     return { permissionMode: this.permissionMode || 'default', sandboxMode: this.sandboxMode || 'default',
       effectivePermissionMode: this.effectivePermissionMode, effectiveSandboxMode: this.effectiveSandboxMode,
       model: this.model, effort: this.effort,
@@ -180,7 +221,7 @@ class CodexStructuredSession extends EventEmitter {
       canAbort: this.presentation === 'structured' && this.status !== 'idle',
       canSwitchToTerminal: this.presentation === 'structured' && this.status === 'idle' && Boolean(this.threadId),
       canSwitchToStructured: this.presentation === 'terminal',
-      pendingPermissionCount: this.pendingPermissions.size, models: this.models };
+      pendingPermissionCount: this.pendingPermissions.size, activeSubagentCount, models: this.models };
   }
 
   getHistory() {
@@ -212,6 +253,7 @@ class CodexStructuredSession extends EventEmitter {
   }
   emitEvent(event) { this.emit('event', event); }
   setStatus(status) { if (this.status !== status) { this.status = status; this.emitEvent({ type: 'state', state: this.getControlState() }); } }
+  emitControlState() { this.emitEvent({ type: 'state', state: this.getControlState() }); }
   recordPermission(request, status, decision) {
     const completed = { ...request, status, decision };
     this.completedPermissions = [...this.completedPermissions.filter(item => item.id !== request.id), completed].slice(-50);
@@ -222,9 +264,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;
@@ -335,44 +378,75 @@ class CodexStructuredSession extends EventEmitter {
       return;
     }
     if (method === 'turn/started') {
-      this.currentTurnId = params.turn?.id || params.turnId || this.currentTurnId;
-      this.currentTurnStartedAt = Date.now();
-      this.append({ kind: 'turn-start', turnId: this.currentTurnId });
-      this.setStatus('running');
+      const threadId = params.threadId || this.threadId;
+      const turnId = params.turn?.id || params.turnId || null;
+      const startedAt = Number(params.turn?.startedAt || 0);
+      const startedAtMs = startedAt > 0 && startedAt < 100000000000 ? startedAt * 1000 : startedAt || Date.now();
+      if (threadId && turnId) this.threadTurns.set(threadId, { turnId, startedAt: startedAtMs, status: 'running' });
+      if (!threadId || threadId === this.threadId) {
+        this.currentTurnId = turnId || this.currentTurnId;
+        this.currentTurnStartedAt = startedAtMs;
+        this.setStatus('running');
+      } else {
+        this.emitControlState();
+      }
+      this.append({ kind: 'turn-start', threadId, turnId, createdAt: startedAtMs });
       return;
     }
     if (method === 'turn/completed') {
-      const completedTurnId = params.turn?.id || params.turnId || this.currentTurnId;
+      const threadId = params.threadId || this.threadId;
+      const trackedTurn = threadId ? this.threadTurns.get(threadId) : null;
+      const completedTurnId = params.turn?.id || params.turnId || trackedTurn?.turnId || this.currentTurnId;
       const turnStatus = params.turn?.status === 'failed' || params.turn?.error ? 'failed'
         : params.turn?.status === 'interrupted' ? 'cancelled' : 'completed';
-      this.append({ kind: 'turn-end', turnId: completedTurnId, status: turnStatus,
-        durationMs: this.currentTurnStartedAt ? Date.now() - this.currentTurnStartedAt : null });
+      const completedAt = Number(params.turn?.completedAt || 0);
+      const completedAtMs = completedAt > 0 && completedAt < 100000000000 ? completedAt * 1000 : completedAt || Date.now();
+      const startedAtMs = trackedTurn?.startedAt || ((!threadId || threadId === this.threadId) ? this.currentTurnStartedAt : null);
+      const durationMs = Number(params.turn?.durationMs || 0)
+        || (startedAtMs ? Math.max(0, completedAtMs - startedAtMs) : null);
+      this.append({ kind: 'turn-end', threadId, turnId: completedTurnId, status: turnStatus,
+        durationMs, createdAt: completedAtMs });
+      const observedNow = Date.now();
+      const observedCompletedAtMs = Math.abs(observedNow - completedAtMs) < 5000
+        ? Math.max(completedAtMs, observedNow) : completedAtMs;
       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');
+        const toolDurationMs = Number(item.durationMs || 0)
+          || (item.startedAtMs || item.createdAt ? Math.max(1, observedCompletedAtMs - Number(item.startedAtMs || item.createdAt)) : null);
+        const toolStatus = turnStatus === 'failed' ? 'failed' : turnStatus === 'cancelled' ? 'cancelled' : 'completed';
+        this.patch(item.id, { toolStatus,
+          completedAtMs: observedCompletedAtMs, ...(toolDurationMs != null ? { durationMs: toolDurationMs } : {}) });
       }
-      this.currentTurnId = null;
-      this.currentTurnStartedAt = null;
-      this.pendingPermissions.clear();
-      if (params.turn?.status === 'failed' || params.turn?.error) {
-        this.append({ kind: 'event', level: 'error', text: params.turn?.error?.message || 'Codex turn failed.' });
+      if (threadId) this.threadTurns.delete(threadId);
+      if (!threadId || threadId === this.threadId) {
+        for (const pending of this.pendingPermissions.values()) {
+          this.recordPermission(pending.public, 'denied', 'abort');
+        }
+        this.currentTurnId = null;
+        this.currentTurnStartedAt = null;
+        this.pendingPermissions.clear();
+        if (params.turn?.status === 'failed' || params.turn?.error) {
+          this.append({ kind: 'event', level: 'error', text: params.turn?.error?.message || 'Codex turn failed.' });
+        }
+        this.setStatus('idle');
+        this.hasUnreadCompletion = true;
+      } else {
+        this.emitControlState();
       }
-      this.setStatus('idle');
-      this.hasUnreadCompletion = true;
       return;
     }
     if (method === 'thread/started' || method === 'thread/resumed') {
       const threadId = params.thread?.id || params.threadId;
-      if (threadId) { this.threadId = threadId; this.emitEvent({ type: 'state', state: this.getControlState() }); }
+      if (threadId && !this.threadId) { this.threadId = threadId; this.emitControlState(); }
       return;
     }
     if (method === 'thread/status/changed') {
+      const threadId = params.threadId || this.threadId;
       const status = params.status?.type || params.status;
-      if (status === 'idle') this.setStatus('idle');
-      if (status === 'active') this.setStatus('running');
+      if (!threadId || threadId === this.threadId) {
+        if (status === 'idle' && !this.currentTurnId) this.setStatus('idle');
+        if (status === 'active') this.setStatus('running');
+      }
       return;
     }
     if (method === 'thread/settings/updated') {
@@ -416,11 +490,16 @@ class CodexStructuredSession extends EventEmitter {
     }
     if (method.startsWith('item/')) {
       const inferredStatus = method === 'item/completed' ? 'completed' : method === 'item/started' ? 'running' : null;
-      this.applyProviderItem(params.item || params, inferredStatus);
+      this.applyProviderItem(params.item || params, inferredStatus, {
+        threadId: params.threadId || null,
+        turnId: params.turnId || null,
+        startedAtMs: Number(params.startedAtMs || 0) || null,
+        completedAtMs: Number(params.completedAtMs || 0) || null
+      });
     }
   }
 
-  applyProviderItem(raw, inferredStatus = null) {
+  applyProviderItem(raw, inferredStatus = null, context = {}) {
     if (!raw || typeof raw !== 'object') return;
     const providerId = String(raw.id || '');
     const existing = providerId && this.messages.find(item => item.providerId === providerId);
@@ -429,10 +508,25 @@ 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: inferredToolStatus || raw.status || 'running' } : { text, turnId: raw.turnId || this.currentTurnId, streaming: false };
+    const inferredToolStatus = existing?.toolStatus === 'cancelled' ? 'cancelled'
+      : inferredStatus === 'completed' && ['failed', 'declined'].includes(raw.status) ? raw.status : inferredStatus;
+    const threadId = raw.threadId || context.threadId || null;
+    const trackedTurnId = threadId ? this.threadTurns.get(threadId)?.turnId : null;
+    const turnId = raw.turnId || context.turnId || trackedTurnId || this.currentTurnId;
+    const existingStartedAtMs = existing?.startedAtMs || existing?.createdAt || null;
+    const startedAtMs = context.startedAtMs || raw.startedAtMs || existingStartedAtMs;
+    const completedAtMs = context.completedAtMs || raw.completedAtMs || null;
+    const durationMs = Number(raw.durationMs || 0)
+      || (completedAtMs && startedAtMs && completedAtMs >= startedAtMs ? completedAtMs - startedAtMs : null)
+      || Number(existing?.durationMs || 0) || null;
+    const timing = {
+      ...(startedAtMs ? { startedAtMs } : {}),
+      ...(completedAtMs ? { completedAtMs } : {}),
+      ...(durationMs != null ? { durationMs } : {})
+    };
+    const patch = kind === 'tool' ? { ...toolDetails(raw), threadId, turnId,
+      ...timing, toolStatus: inferredToolStatus || raw.status || 'running' }
+      : { text, threadId, turnId, streaming: false };
     if (existing) {
       this.patch(existing.id, patch);
     } else if (kind === 'user') {
@@ -440,7 +534,7 @@ class CodexStructuredSession extends EventEmitter {
       if (local) this.patch(local.id, { providerId, ...patch });
       else this.append({ kind, providerId, ...patch });
     } else {
-      this.append({ kind, providerId, ...patch });
+      this.append({ kind, providerId, ...(startedAtMs ? { createdAt: startedAtMs } : {}), ...patch });
     }
   }
 
@@ -487,14 +581,28 @@ class CodexStructuredSession extends EventEmitter {
       archived: false,
       cwd: this.workingDir
     });
-    return (result?.data || []).filter(item => !item.parentThreadId).map(item => ({
-      id: item.id,
-      sessionId: item.sessionId || item.id,
-      preview: item.preview || item.name || '',
-      updatedAt: Number(item.updatedAt || item.createdAt || 0) * 1000,
-      cwd: item.cwd || '',
-      current: item.id === this.threadId
-    }));
+    const threads = (result?.data || []).filter(item => !item.parentThreadId);
+    const items = [];
+    for (const item of threads) {
+      let questions = [];
+      try {
+        const history = await this.request('thread/read', { threadId: item.id, includeTurns: true });
+        questions = recentUserQuestions(history?.thread);
+      } catch (error) {
+        this.logger.debugInfo?.(`[codex-app-server] unable to read resume preview for ${item.id}: ${error.message}`);
+      }
+      if (!questions[0]) questions[0] = item.preview || '';
+      if (questions.length < 2) questions.push('');
+      items.push({
+        id: item.id,
+        sessionId: item.sessionId || item.id,
+        questions: questions.slice(0, 2),
+        updatedAt: Number(item.updatedAt || item.createdAt || 0) * 1000,
+        cwd: item.cwd || '',
+        current: item.id === this.threadId
+      });
+    }
+    return items;
   }
 
   contextStatus() {
@@ -583,11 +691,17 @@ class CodexStructuredSession extends EventEmitter {
     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 = { cwd: this.workingDir };
@@ -603,7 +717,10 @@ 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, 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;
@@ -663,9 +780,16 @@ class CodexStructuredSession extends EventEmitter {
       this.recordPermission(pending.public, 'denied', 'abort');
     }
     this.pendingPermissions.clear();
-    if (this.threadId && this.currentTurnId) {
-      this.request('turn/interrupt', { threadId: this.threadId, turnId: this.currentTurnId }).catch(error => {
-        this.logger.debugInfo?.(`[codex-app-server] turn/interrupt failed: ${error.message}`);
+    const targets = Array.from(this.threadTurns.entries())
+      .filter(([, turn]) => turn?.turnId && turn.status === 'running')
+      .map(([threadId, turn]) => ({ threadId, turnId: turn.turnId }));
+    if (this.threadId && this.currentTurnId
+      && !targets.some(target => target.threadId === this.threadId && target.turnId === this.currentTurnId)) {
+      targets.push({ threadId: this.threadId, turnId: this.currentTurnId });
+    }
+    for (const target of targets) {
+      this.request('turn/interrupt', target).catch(error => {
+        this.logger.debugInfo?.(`[codex-app-server] turn/interrupt failed for ${target.threadId}/${target.turnId}: ${error.message}`);
       });
     }
     this.append({ kind: 'event', level: 'info', text: reason });
@@ -760,3 +884,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);

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;
@@ -438,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)) {
@@ -454,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();
     }
@@ -802,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 });
@@ -844,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; }
@@ -99,6 +116,7 @@
         .codex-tool-title { flex: 0 1 auto; min-width: 0; color: #f5f5f7; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .codex-tool-command { flex: 1; min-width: 0; color: #a9a9b0; font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .codex-tool-state { flex: 0 0 auto; color: #8e8e93; font-size: 11px; }
+        .codex-tool-duration { flex: 0 0 auto; color: #6f6f76; font-size: 10px; font-variant-numeric: tabular-nums; }
         .codex-tool-state.running::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1.5px solid #8e8e93; border-top-color: transparent; border-radius: 50%; animation: codex-spin .8s linear infinite; vertical-align: -1px; }
         .codex-tool.error { border-color: rgba(255,59,48,.38); background: rgba(255,59,48,.07); }
         .codex-tool-body { border-top: 1px solid rgba(255,255,255,.08); padding: 9px 10px; }
@@ -240,6 +258,7 @@
         .claude-resume-item:last-child { border-bottom: 0; }
         .claude-resume-item:active { background: rgba(255,255,255,0.08); }
         .claude-resume-title { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; }
+        .codex-resume-question-secondary { min-height: 1.35em; color: var(--text-dim); font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
         .claude-resume-meta { color: var(--text-dim); font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
         #terminal .xterm, #terminal .xterm-viewport, #terminal .xterm-screen, #terminal .xterm-rows, #terminal .xterm-rows span { user-select: text !important; -webkit-user-select: text !important; -webkit-touch-callout: default; touch-action: pan-y; }
         #terminal .xterm-viewport { overflow-anchor: none; }
@@ -376,13 +395,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">
@@ -637,6 +660,7 @@
         let codexModelPanelOpen = false;
         let codexModelCandidate = null;
         let codexResumePanelOpen = false;
+        let codexRenderFrame = null;
         const modifiers = { ctrl: false };
 
         function log(msg) {
@@ -942,6 +966,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...';
@@ -2048,6 +2073,16 @@
             if (status === 'completed') return item.exitCode && item.exitCode !== 0 ? 'failed' : 'completed';
             return status;
         }
+        function formatCodexDuration(durationMs) {
+            const value = Number(durationMs || 0);
+            if (!(value > 0)) return '';
+            if (value < 1000) return `${Math.round(value)}ms`;
+            const seconds = value / 1000;
+            if (seconds < 10) return `${seconds.toFixed(1).replace(/\.0$/, '')}s`;
+            if (seconds < 60) return `${Math.round(seconds)}s`;
+            const minutes = Math.floor(seconds / 60);
+            return `${minutes}m ${Math.round(seconds % 60)}s`;
+        }
         function renderCodexDiff(diff) {
             return `<div class="codex-diff">${String(diff || '').split('\n').map(line => {
                 const type = line.startsWith('+++') || line.startsWith('---') ? 'hunk' : line.startsWith('+') ? 'add' : line.startsWith('-') ? 'del' : line.startsWith('@@') ? 'hunk' : '';
@@ -2131,27 +2166,72 @@
             const command = item.name === 'CodexBash' ? item.command : item.title || item.tool || '';
             const icon = item.name === 'CodexBash' ? '>_' : item.name === 'McpTool' ? 'MCP' : item.name === 'Agent' ? 'A' : '•';
             const title = item.name === 'CodexBash' ? 'Command' : item.title || item.name || 'Tool';
-            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>`;
+            const hasInput = item.input && typeof item.input === 'object' && Object.keys(item.input).length > 0;
+            const result = item.result || ((item.name === 'McpTool' || item.name === 'Agent') && hasInput ? codexJson(item.input) : '');
+            const duration = status === 'running' ? '' : formatCodexDuration(item.durationMs);
+            return `<details class="codex-tool${isError ? ' error' : ''}" data-codex-key="tool-${escapeHtml(item.id || item.providerId || '')}"><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>'}${duration ? `<span class="codex-tool-duration">${escapeHtml(duration)}</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, 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 startedAt = Math.min(...items.map(item => Number(item.startedAtMs || item.createdAt || Date.now())));
+            const itemCompletedAt = Math.max(...items.map(item => Number(item.completedAtMs || 0)));
             const storedDuration = Number(turnEnd?.durationMs || 0);
             const completedAt = Number(turnEnd?.createdAt || 0);
-            const durationMs = storedDuration > 0 ? storedDuration
+            const durationMs = itemCompletedAt >= startedAt ? itemCompletedAt - startedAt : storedDuration > 0 ? storedDuration
                 : (!running && completedAt >= startedAt ? completedAt - startedAt : 0);
-            const seconds = durationMs > 0 ? Math.max(1, Math.round(durationMs / 1000)) : null;
+            const duration = formatCodexDuration(durationMs);
             const tools = items.map(item => {
                 const permission = permissionById.get(String(item.providerId || ''));
                 if (permission) usedPermissions.add(permission.id);
                 return renderCodexTool(item, permission);
             }).join('');
-            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>`;
+            const label = running ? 'Working' : failed ? 'Work finished with errors' : duration ? `Worked for ${duration}` : 'Worked';
+            const key = items.map(item => item.id || item.providerId || '').join('-');
+            return `<details class="codex-work-group" data-codex-key="group-${escapeHtml(key)}"${running ? ' open' : ''}><summary>${label} · ${items.length} tools</summary><div class="codex-work-group-body">${tools}</div></details>`;
+        }
+        function syncCodexDom(current, next) {
+            if (!current || !next) return;
+            if (current.nodeType !== next.nodeType || current.nodeName !== next.nodeName) {
+                current.replaceWith(next.cloneNode(true));
+                return;
+            }
+            if (current.nodeType === Node.TEXT_NODE) {
+                if (current.nodeValue !== next.nodeValue) current.nodeValue = next.nodeValue;
+                return;
+            }
+            const currentKey = current.getAttribute?.('data-codex-key');
+            const nextKey = next.getAttribute?.('data-codex-key');
+            if (currentKey && nextKey && currentKey !== nextKey) {
+                current.replaceWith(next.cloneNode(true));
+                return;
+            }
+            const preserveOpen = current.tagName === 'DETAILS' && currentKey === nextKey;
+            const wasOpen = preserveOpen ? current.open : false;
+            for (const attribute of Array.from(current.attributes || [])) {
+                if (!next.hasAttribute(attribute.name) && !(preserveOpen && attribute.name === 'open')) current.removeAttribute(attribute.name);
+            }
+            for (const attribute of Array.from(next.attributes || [])) {
+                if (!(preserveOpen && attribute.name === 'open') && current.getAttribute(attribute.name) !== attribute.value) {
+                    current.setAttribute(attribute.name, attribute.value);
+                }
+            }
+            if (preserveOpen) current.open = wasOpen;
+            const currentChildren = Array.from(current.childNodes);
+            const nextChildren = Array.from(next.childNodes);
+            const shared = Math.min(currentChildren.length, nextChildren.length);
+            for (let i = 0; i < shared; i++) syncCodexDom(currentChildren[i], nextChildren[i]);
+            for (let i = current.childNodes.length - 1; i >= nextChildren.length; i--) current.childNodes[i].remove();
+            for (let i = shared; i < nextChildren.length; i++) current.appendChild(nextChildren[i].cloneNode(true));
         }
         function renderCodexChat() {
+            if (codexRenderFrame != null) return;
+            codexRenderFrame = requestAnimationFrame(() => {
+                codexRenderFrame = null;
+                commitCodexChatRender();
+            });
+        }
+        function commitCodexChatRender() {
             const container = document.getElementById('codex-chat-container');
             if (!container) return;
             const parts = [];
@@ -2175,16 +2255,20 @@
                     }
                     continue;
                 }
-                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>`);
+                if (item.kind === 'assistant') parts.push(`<div class="codex-message assistant claude-md" data-codex-key="message-${escapeHtml(item.id || '')}">${renderMarkdown(item.text || '')}</div>`);
+                else if (item.kind === 'user') parts.push(`<div class="codex-message user claude-md" data-codex-key="message-${escapeHtml(item.id || '')}">${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));
-            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>`;
+            const working = `<div class="codex-working-indicator" role="status" aria-label="Codex is working" title="Codex is working"${codexState.status === 'running' ? '' : ' style="display:none"'}></div>`;
+            const template = document.createElement('template');
+            template.innerHTML = `<div class="codex-conversation">${working}${parts.join('') || '<div class="codex-message event">Send a message to start Codex.</div>'}</div>`;
+            const next = template.content.firstElementChild;
+            const current = container.firstElementChild;
+            if (!current) container.appendChild(next);
+            else syncCodexDom(current, next);
             requestAnimationFrame(() => { container.scrollTop = container.scrollHeight; });
         }
 
@@ -2225,8 +2309,10 @@
             const el = document.getElementById('codex-state-bar');
             if (!el) return;
             const pending = Number(codexState.pendingPermissionCount || codexPendingPermissions.filter(item => item.status === 'pending').length) || 0;
+            const subagents = Number(codexState.activeSubagentCount || 0) || 0;
             const parts = [];
             if (pending || codexState.status === 'waiting_approval') parts.push(`<span class="claude-state-pill warn">${pending || 1} approval${pending === 1 ? '' : 's'}</span>`);
+            if (subagents) parts.push(`<span class="claude-state-pill">${subagents} subagent${subagents === 1 ? '' : 's'} running</span>`);
             el.innerHTML = parts.join('');
             el.style.display = parts.length ? 'flex' : 'none';
         }
@@ -2295,7 +2381,10 @@
                 const data = await res.json();
                 if (!res.ok || !data.success) throw new Error(data.error || 'Failed to load Codex sessions');
                 const items = data.items || [];
-                panel.innerHTML = items.length ? items.map(item => `<button class="claude-resume-item" onclick="selectCodexResumeThread(decodePathValue('${encodePathValue(item.id)}'))"><div class="claude-resume-title"><span>${escapeHtml((item.preview || 'Codex session').slice(0, 48))}${item.current ? ' · current' : ''}</span><span>${escapeHtml(item.updatedAt ? new Date(item.updatedAt).toLocaleString() : '')}</span></div><div class="claude-resume-meta">${escapeHtml(item.id.slice(0, 12))}</div></button>`).join('') : '<div class="claude-resume-meta" style="padding:12px;">No Codex sessions found for this folder.</div>';
+                panel.innerHTML = items.length ? items.map(item => {
+                    const questions = Array.isArray(item.questions) ? item.questions : [];
+                    return `<button class="claude-resume-item" onclick="selectCodexResumeThread(decodePathValue('${encodePathValue(item.id)}'))"><div class="claude-resume-title"><span>${escapeHtml((questions[0] || 'Codex session').slice(0, 120))}${item.current ? ' · current' : ''}</span><span>${escapeHtml(item.updatedAt ? new Date(item.updatedAt).toLocaleString() : '')}</span></div><div class="codex-resume-question-secondary">${escapeHtml((questions[1] || '').slice(0, 120))}</div></button>`;
+                }).join('') : '<div class="claude-resume-meta" style="padding:12px;">No Codex sessions found for this folder.</div>';
             } catch (e) { panel.innerHTML = `<div class="claude-resume-meta" style="padding:12px;color:#ff6b61;">${escapeHtml(e.message)}</div>`; }
         }
         async function selectCodexResumeThread(threadId) {
@@ -2312,6 +2401,9 @@
         }
 
         function joinSession(id, sessionName, toolKey = null) {
+            if (typeof clearImageAttachments === 'function' && selectedImageAttachments.length) {
+                void clearImageAttachments();
+            }
             stopTimedInputTimers();
             activeSessionId = id;
             window.activeSessionId = id;
@@ -2655,8 +2747,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();
         }
@@ -2672,6 +2933,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 }));
@@ -2680,10 +2946,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) {
@@ -2762,9 +3036,9 @@
 
         function closeTimedSendPanel() {
             document.getElementById('timed-send-panel').classList.remove('active');
-            document.getElementById('timer-btn').classList.remove('active');
             editingTimedInputId = null;
             renderTimedTags();
+            syncComposerButtonState();
             updateTerminalControlsHeight();
         }
 
@@ -2813,6 +3087,7 @@
         function editTimedInput(id) {
             const item = timedInputs.find(value => value.id === id);
             if (!item) return;
+            closeComposerMenu();
             initTimedDelaySelectors();
             editingTimedInputId = id;
             inputEl.value = item.text || '';
@@ -2823,9 +3098,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();
         }
 
@@ -2871,24 +3146,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.24",
+  "version": "1.0.26",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "main": "index.js",
   "bin": {