glad-web 1.0.24 → 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')
@@ -222,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;
@@ -583,11 +597,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 +623,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;
@@ -760,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);

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; }
@@ -376,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">
@@ -942,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...';
@@ -2312,6 +2334,9 @@
         }
 
         function joinSession(id, sessionName, toolKey = null) {
+            if (typeof clearImageAttachments === 'function' && selectedImageAttachments.length) {
+                void clearImageAttachments();
+            }
             stopTimedInputTimers();
             activeSessionId = id;
             window.activeSessionId = id;
@@ -2655,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();
         }
@@ -2672,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 }));
@@ -2680,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) {
@@ -2762,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();
         }
 
@@ -2813,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 || '';
@@ -2823,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();
         }
 
@@ -2871,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.24",
+  "version": "1.0.25",
   "description": "Glad transforms terminal-based AI coding tools into a polished, mobile-friendly local Web interface.",
   "main": "index.js",
   "bin": {