agenter-app 1.2.0 → 1.3.0

package/README.md

@@ -75,6 +75,8 @@ Every live session has a message box. What happens to your message depends on th
 
 Queued messages show above the box, with **Cancel**.
 
+**Images:** paste them into any message box, drop them on it, or use the image button. This works in the steer box, in the reply after a finished turn, and in **New session**. You can attach up to 8 PNG, JPEG, GIF or WebP images per message, each under 10 MB. Agenter saves them to `~/.agenter/uploads` and adds their paths to your message, and Claude or Codex opens them from there. Uploads older than 30 days are removed when Agenter starts.
+
 ### Drive from VS Code or Agenter
 
 Each session has a **Drive from** switch:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agenter-app",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "One local dashboard to watch, approve and steer every Claude Code and Codex session on your machine.",
   "keywords": [
     "claude",

package/public/app.js

@@ -92,6 +92,7 @@ const ICONS = {
   tool: '<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>',
   code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
   send: '<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',
+  image: '<rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>',
   check: '<path d="M20 6 9 17l-5-5"/>',
   shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/>',
   reply: '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>',
@@ -495,6 +496,129 @@ function fitTextarea(ta) {
   ta.style.height = Math.min(ta.scrollHeight, 260) + 'px';
 }
 
+// ---------- image attachments ----------
+// Images waiting to go with a message, by the box they belong to: a card's data-id, or
+// 'new' for the New session dialog. Kept out of the DOM so re-renders don't drop them.
+const attachments = new Map();
+const MAX_ATTACH = 8;
+const MAX_ATTACH_BYTES = 10 * 1024 * 1024;
+const MAX_ATTACH_TOTAL = 22 * 1024 * 1024; // the request body stays under the server's limit
+const IMAGE_TYPE = /^image\/(png|jpeg|gif|webp)$/;
+
+function thumbsHtml(key) {
+  return (attachments.get(key) || [])
+    .map((src, i) => `<span class="thumb"><img src="${esc(src)}" alt="Attached image ${i + 1}"><button type="button" class="thumb-x" data-unattach="${i}" title="Remove image" aria-label="Remove image ${i + 1}">×</button></span>`)
+    .join('');
+}
+
+const attachRow = (key) => `<div class="attach-row" data-attach="${esc(key)}"${attachments.get(key)?.length ? '' : ' hidden'}>${thumbsHtml(key)}</div>`;
+
+function renderThumbs(key) {
+  document.querySelectorAll(`[data-attach="${CSS.escape(key)}"]`).forEach((el) => {
+    el.innerHTML = thumbsHtml(key);
+    el.hidden = !attachments.get(key)?.length;
+  });
+}
+
+const readDataUrl = (file) =>
+  new Promise((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => resolve(r.result);
+    r.onerror = () => reject(r.error);
+    r.readAsDataURL(file);
+  });
+
+// Returns whether there were any images to take.
+async function addImages(key, files) {
+  const imgs = [...(files || [])].filter((f) => IMAGE_TYPE.test(f.type));
+  if (!imgs.length) {
+    if ([...(files || [])].length) toast('Only PNG, JPEG, GIF and WebP images');
+    return false;
+  }
+  const list = [...(attachments.get(key) || [])];
+  let total = list.reduce((n, s) => n + s.length * 0.75, 0);
+  for (const f of imgs) {
+    if (list.length >= MAX_ATTACH) {
+      toast(`At most ${MAX_ATTACH} images per message`);
+      break;
+    }
+    if (f.size > MAX_ATTACH_BYTES) {
+      toast('Each image must be under 10 MB');
+      continue;
+    }
+    if (total + f.size > MAX_ATTACH_TOTAL) {
+      toast('That’s too much for one message. Send some images separately');
+      break;
+    }
+    list.push(await readDataUrl(f));
+    total += f.size;
+  }
+  attachments.set(key, list);
+  renderThumbs(key);
+  return true;
+}
+
+function takeAttachments(key) {
+  const list = attachments.get(key) || [];
+  attachments.delete(key);
+  renderThumbs(key);
+  return list;
+}
+
+function putBackAttachments(key, list) {
+  if (!list.length) return;
+  attachments.set(key, [...list, ...(attachments.get(key) || [])].slice(0, MAX_ATTACH));
+  renderThumbs(key);
+}
+
+// Which attachment list an element belongs to.
+function attachKey(el) {
+  if (el.closest('#newDialog')) return 'new';
+  return el.closest('.card[data-id]')?.dataset.id || null;
+}
+
+let attachTarget = null;
+$('#attachInput').addEventListener('change', async (e) => {
+  const files = [...e.target.files];
+  e.target.value = '';
+  if (attachTarget) await addImages(attachTarget, files);
+  document.querySelector(attachTarget === 'new' ? '#newMsg' : `.card[data-id="${CSS.escape(attachTarget || '')}"] textarea`)?.focus();
+});
+
+document.addEventListener('paste', (e) => {
+  const t = e.target instanceof Element ? e.target : null;
+  if (!t?.matches('.reply-box textarea, #newMsg')) return;
+  const files = [...(e.clipboardData?.files || [])].filter((f) => IMAGE_TYPE.test(f.type));
+  if (!files.length) return;
+  e.preventDefault();
+  addImages(attachKey(t), files);
+});
+
+const dropZone = (el) => (el instanceof Element ? el.closest('.reply-box, #newForm') : null);
+const hasFiles = (e) => [...(e.dataTransfer?.types || [])].includes('Files');
+document.addEventListener('dragover', (e) => {
+  if (!hasFiles(e)) return;
+  e.preventDefault(); // otherwise the browser opens a dropped file in place of the dashboard
+  const zone = dropZone(e.target);
+  e.dataTransfer.dropEffect = zone ? 'copy' : 'none';
+  document.querySelectorAll('.drop-over').forEach((z) => z !== zone && z.classList.remove('drop-over'));
+  zone?.classList.add('drop-over');
+});
+document.addEventListener('dragleave', (e) => {
+  const zone = dropZone(e.target);
+  if (zone && !zone.contains(e.relatedTarget)) zone.classList.remove('drop-over');
+});
+document.addEventListener('drop', (e) => {
+  if (!hasFiles(e)) return;
+  e.preventDefault();
+  document.querySelectorAll('.drop-over').forEach((z) => z.classList.remove('drop-over'));
+  const zone = dropZone(e.target);
+  const key = zone && attachKey(zone);
+  if (key) addImages(key, e.dataTransfer.files);
+});
+
+const attachButton = () => `<button class="btn ghost small attach-btn" type="button" data-attach-pick title="Attach images (or paste / drop them)" aria-label="Attach images">${icon('image')}</button>`;
+
 function refreshAges() {
   document.querySelectorAll('[data-t]').forEach((el) => (el.textContent = ago(Number(el.dataset.t))));
 }
@@ -857,8 +981,10 @@ function renderSteer(s) {
     ${queued}
     <div class="reply-box">
       <textarea rows="1" placeholder="${busy ? `Steer ${isCodex(s) ? 'Codex' : 'Claude'} while it works…` : `Message ${isCodex(s) ? 'Codex' : 'Claude'}…`}"></textarea>
+      ${attachRow(`steer-${s.id}`)}
       <div class="reply-row">
         <span class="hint">${when}</span>
+        ${attachButton()}
         ${s.running ? `<button class="btn small" type="button" data-interrupt title="Stop the turn Agenter is running">Stop</button>` : ''}
         <button class="btn primary small" type="button" data-steer-send>${icon('send')}Send</button>
       </div>
@@ -869,21 +995,29 @@ const STEER_TOAST = { sent: 'Reply sent', queued: 'Queued', started: 'Running in
 
 async function steer(card) {
   const ta = $('textarea', card);
+  const key = card.dataset.id;
   const message = ta.value.trim();
-  if (!message) return ta.focus();
+  if (!message && !attachments.get(key)?.length) return ta.focus();
   // Clear first: the queued message re-renders the dock, which would otherwise put the text back.
   ta.value = '';
   fitTextarea(ta);
-  const r = await post('/api/session/steer', { sessionId: state.selected, message }).catch(() => null);
-  if (!r?.ok) {
+  const images = takeAttachments(key);
+  const r = await post('/api/session/steer', { sessionId: state.selected, message, images }).catch(() => null);
+  const putBack = () => {
     const box = $('#dock [data-steer] textarea');
     if (box && !box.value) box.value = message;
-    return toast("Couldn't send that");
+    putBackAttachments(key, images);
+  };
+  if (!r?.ok) {
+    putBack();
+    const error = r && (await r.json().catch(() => ({}))).error;
+    return toast(error || "Couldn't send that");
   }
   const { result } = await r.json();
   // A turn Agenter just started: show your message now, ahead of the transcript.
   if (result === 'started') {
-    sentEchoes.set(state.selected, [...(sentEchoes.get(state.selected) || []), message]);
+    const echo = [message, images.length ? `[${images.length === 1 ? 'Image' : `${images.length} images`}]` : ''].filter(Boolean).join('\n\n');
+    sentEchoes.set(state.selected, [...(sentEchoes.get(state.selected) || []), echo]);
     renderLiveRow();
   }
   const FAILED = {
@@ -892,8 +1026,7 @@ async function steer(card) {
     error: "Codex didn't accept the message",
   };
   if (FAILED[result]) {
-    const box = $('#dock [data-steer] textarea');
-    if (box && !box.value) box.value = message;
+    putBack();
     return toast(FAILED[result]);
   }
   toast(STEER_TOAST[result] || 'Sent');
@@ -1150,8 +1283,10 @@ function renderCard(p, showSession) {
     ${p.message ? `<div class="last-msg md">${md(p.message)}</div>` : ''}
     <div class="reply-box">
       <textarea rows="2" placeholder="Tell Claude what to do next…"></textarea>
+      ${attachRow(p.id)}
       <div class="reply-row">
         <span class="hint"><kbd>Enter</kbd> send · <kbd>Shift</kbd>+<kbd>Enter</kbd> new line</span>
+        ${attachButton()}
         <button class="btn ghost small" data-act="pass" title="Let the session stop normally so you can type in VS Code">Release to VS Code</button>
         <button class="btn primary small" data-act="reply">${icon('send')}Send</button>
       </div>
@@ -1168,7 +1303,8 @@ async function act(card, action) {
   if (action === 'reply') {
     const ta = $('textarea', card);
     body.message = ta.value.trim();
-    if (!body.message) return ta.focus();
+    body.images = attachments.get(p.id) || [];
+    if (!body.message && !body.images.length) return ta.focus();
   }
   if (action === 'answer') {
     body.answers = {};
@@ -1185,6 +1321,12 @@ async function act(card, action) {
   const r = await post('/api/respond', body);
   const s = sessionById(p.sessionId);
   const what = p.kind === 'permission' && ['allow', 'always', 'deny'].includes(action) ? ` ${toolName(p.tool)}` : '';
+  if (r.status === 400) {
+    // Rejected before anything was sent (a bad image): let you fix it and try again.
+    card.querySelectorAll('button, input, textarea').forEach((b) => (b.disabled = false));
+    return toast((await r.json().catch(() => ({}))).error || "Couldn't send that");
+  }
+  if (action === 'reply' || action === 'pass') takeAttachments(p.id);
   toast(r.ok ? `${ACTION_TOAST[action]}${what}${s ? ` · ${sessionLabel(s)}` : ''}` : 'That was already handled');
 }
 
@@ -1288,6 +1430,18 @@ document.addEventListener('click', (e) => {
   if (t.closest('[data-mem-close]')) return closeMemory();
   const memFile = t.closest('[data-mem-file]');
   if (memFile) return showMemFile(memFile.dataset.memFile);
+  if (t.closest('[data-attach-pick]')) {
+    attachTarget = attachKey(t);
+    return $('#attachInput').click();
+  }
+  const unattach = t.closest('[data-unattach]');
+  if (unattach) {
+    const key = attachKey(unattach);
+    const list = [...(attachments.get(key) || [])];
+    list.splice(Number(unattach.dataset.unattach), 1);
+    attachments.set(key, list);
+    return renderThumbs(key);
+  }
   if (t.closest('[data-steer-send]')) return steer(t.closest('.card'));
   if (t.closest('[data-drive]')) return setDrive(t.closest('[data-drive]').dataset.drive);
   if (t.closest('[data-interrupt]')) return post('/api/session/interrupt', { sessionId: state.selected });
@@ -1472,10 +1626,12 @@ $('#newForm').addEventListener('submit', async (e) => {
     $('#newError').hidden = false;
     $('#newStart').disabled = false;
   };
+  const images = attachments.get('new') || [];
+  if (!message && !images.length) return ($('#newMsg').focus(), showError('Type a first message, or attach an image.'));
   $('#newStart').disabled = true;
   let r;
   try {
-    r = await post('/api/session/new', { cwd, message, agent: store.get('newAgent', 'claude'), fromSessionId: carryFrom });
+    r = await post('/api/session/new', { cwd, message, images, agent: store.get('newAgent', 'claude'), fromSessionId: carryFrom });
   } catch {
     return showError("Couldn't reach the Agenter server.");
   }
@@ -1483,6 +1639,7 @@ $('#newForm').addEventListener('submit', async (e) => {
   if (!r.ok) return showError(data.error || "Couldn't start the session.");
   store.set('newCwd', cwd);
   $('#newMsg').value = '';
+  takeAttachments('new');
   $('#newDialog').close();
   state.awaiting = data.sessionId;
   select(data.sessionId);

package/public/index.html

@@ -201,9 +201,13 @@
         <button class="btn ghost small" type="button" data-carry-drop>Remove</button>
       </div>
       <label class="field-label" for="newMsg">First message</label>
-      <textarea class="field" id="newMsg" rows="4" placeholder="What should Claude do?" required></textarea>
+      <textarea class="field" id="newMsg" rows="4" placeholder="What should Claude do?"></textarea>
+      <div class="attach-row" data-attach="new" hidden></div>
       <div class="dlg-error" id="newError" hidden></div>
       <div class="dlg-actions">
+        <button class="btn ghost attach-left" type="button" data-attach-pick title="Attach images (or paste / drop them)">
+          <svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/></svg>Attach images
+        </button>
         <button class="btn ghost" type="button" data-new-cancel>Cancel</button>
         <button class="btn primary" type="submit" id="newStart">Start session</button>
       </div>
@@ -249,6 +253,7 @@
     <form method="dialog"><button class="btn primary">Got it</button></form>
   </dialog>
 
+  <input type="file" id="attachInput" accept="image/png,image/jpeg,image/gif,image/webp" multiple hidden>
   <script src="/app.js"></script>
 </body>
 </html>

package/public/style.css

@@ -549,6 +549,19 @@ dialog.mem-dialog { max-width: 860px; }
 .reply-box textarea { width: 100%; min-height: 64px; max-height: 260px; resize: none; border: 0; background: transparent; color: var(--text); font: inherit; padding: 10px 12px 4px; outline: none; display: block; }
 .reply-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 12px; }
 .reply-row .hint { color: var(--muted); font-size: 12px; margin-right: auto; }
+.reply-box.drop-over, #newForm.drop-over .field#newMsg { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
+
+/* Images waiting to go with a message. */
+.attach-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 12px 2px; }
+.attach-row[hidden] { display: none; }
+#newDialog .attach-row { padding: 10px 0 0; }
+.thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--panel-2); flex: none; }
+.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.thumb-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; padding: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; line-height: 20px; cursor: pointer; opacity: .85; }
+.thumb-x:hover, .thumb-x:focus-visible { opacity: 1; background: var(--danger); }
+.attach-btn { padding-inline: 7px; }
+.attach-btn .ic { margin: 0; }
+.new-dialog .dlg-actions .attach-left { margin-right: auto; }
 
 .question { margin-bottom: 14px; }
 .q-title { font-weight: 600; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }

package/server.js

@@ -996,6 +996,55 @@ function startCodexRun(s, text, { fresh = false } = {}) {
   });
 }
 
+// ---------- images ----------
+// Hooks and the CLIs only carry text, so pasted images are saved here and their paths go
+// into the message. Claude opens them with its Read tool, Codex with its image viewer.
+
+const UPLOADS_DIR = path.join(SETTINGS_DIR, 'uploads');
+const IMAGE_TYPES = { png: 'png', jpeg: 'jpg', gif: 'gif', webp: 'webp' };
+const MAX_IMAGES = 8;
+const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
+
+// images: data: URLs from the dashboard. Returns the saved files' paths.
+function saveImages(images) {
+  if (!Array.isArray(images) || !images.length) return [];
+  if (images.length > MAX_IMAGES) throw new Error(`Attach at most ${MAX_IMAGES} images.`);
+  const files = images.map((src) => {
+    const m = /^data:image\/(png|jpeg|gif|webp);base64,([A-Za-z0-9+/=]+)$/.exec(String(src));
+    if (!m) throw new Error('Only PNG, JPEG, GIF and WebP images can be attached.');
+    const data = Buffer.from(m[2], 'base64');
+    if (data.length > MAX_IMAGE_BYTES) throw new Error('Each image must be under 10 MB.');
+    return { data, file: path.join(UPLOADS_DIR, `${crypto.randomUUID()}.${IMAGE_TYPES[m[1]]}`) };
+  });
+  fs.mkdirSync(UPLOADS_DIR, { recursive: true });
+  for (const f of files) fs.writeFileSync(f.file, f.data);
+  return files.map((f) => f.file);
+}
+
+function withImages(text, paths) {
+  text = String(text || '').trim();
+  if (!paths.length) return text;
+  const list = paths.map((p) => `- ${p}`).join('\n');
+  const note = `The user attached ${paths.length === 1 ? 'an image' : `${paths.length} images`}. Open ${paths.length === 1 ? 'it' : 'them'} to see:\n${list}`;
+  return text ? `${text}\n\n${note}` : note;
+}
+
+// Uploads only matter for the turn they went with; clear out old ones.
+function pruneUploads(maxAgeMs = 30 * 24 * 3600 * 1000) {
+  let names = [];
+  try {
+    names = fs.readdirSync(UPLOADS_DIR);
+  } catch {
+    return;
+  }
+  for (const n of names) {
+    const f = path.join(UPLOADS_DIR, n);
+    try {
+      if (Date.now() - fs.statSync(f).mtimeMs > maxAgeMs) fs.rmSync(f, { force: true });
+    } catch {}
+  }
+}
+
 // ---------- memory ----------
 
 const memoryContext = (s) => ({ agent: s.agent, cwd: s.cwd, transcriptPath: s.transcriptPath, home: os.homedir(), codexHome: CODEX_HOME });
@@ -1272,6 +1321,10 @@ const server = http.createServer(async (req, res) => {
         return json(res, status, out);
       }
       if (url.pathname === '/api/respond') {
+        if (body.action === 'reply' && body.images?.length) {
+          if (!pending.has(body.id)) return json(res, 404, {});
+          body.message = withImages(body.message, saveImages(body.images));
+        }
         const s = sessions.get(pending.get(body.id)?.item.sessionId);
         const ok = respond(body.id, body.action, body);
         // Handing something back to VS Code: bring up that project's window so it's right there.
@@ -1292,18 +1345,19 @@ const server = http.createServer(async (req, res) => {
       }
       if (url.pathname === '/api/session/steer') {
         const s = sessions.get(body.sessionId);
-        const text = String(body.message || '').trim();
+        const hasImages = Array.isArray(body.images) && body.images.length > 0;
         // A closed Claude session can only be continued by Agenter; Codex queues for its app either way.
-        if (!s || !text || (s.agent !== 'codex' && driveOf(s) === 'vscode' && (s.status === 'dormant' || s.status === 'ended'))) return json(res, 404, {});
-        return json(res, 200, { result: await steer(s, text) });
+        if (!s || !(String(body.message || '').trim() || hasImages) || (s.agent !== 'codex' && driveOf(s) === 'vscode' && (s.status === 'dormant' || s.status === 'ended'))) return json(res, 404, {});
+        return json(res, 200, { result: await steer(s, withImages(body.message, saveImages(body.images))) });
       }
       if (url.pathname === '/api/session/new') {
         const cwd = String(body.cwd || '').trim().replace(/^"(.*)"$/, '$1');
-        const text = String(body.message || '').trim();
+        const typed = String(body.message || '').trim();
         const codex = body.agent === 'codex';
+        if (!typed && !body.images?.length) return json(res, 400, { error: `Type a first message for ${codex ? 'Codex' : 'Claude'}.` });
+        const text = withImages(typed, saveImages(body.images));
         const carried = carryFrom(sessions.get(body.fromSessionId));
         const prompt = carried ? `${text}\n\n${carried}` : text;
-        if (!text) return json(res, 400, { error: `Type a first message for ${codex ? 'Codex' : 'Claude'}.` });
         let isDir = false;
         try {
           isDir = path.isAbsolute(cwd) && fs.statSync(cwd).isDirectory();
@@ -1312,7 +1366,7 @@ const server = http.createServer(async (req, res) => {
         if (codex) {
           if (!findCodex()) return json(res, 400, { error: "Couldn't find Codex. Install the Codex VS Code extension, or set AGENTER_CODEX_BIN to codex.exe." });
           // Codex names the session itself, so it's registered once Codex has started it.
-          const draft = Object.assign(newSession(''), { agent: 'codex', title: text.split('\n')[0].slice(0, 140), lastEventAt: Date.now() });
+          const draft = Object.assign(newSession(''), { agent: 'codex', title: (typed || 'Image').split('\n')[0].slice(0, 140), lastEventAt: Date.now() });
           setCwd(draft, path.resolve(cwd));
           const started = await Promise.race([startCodexRun(draft, prompt, { fresh: true }), new Promise((r) => setTimeout(() => r({ error: 'Codex took too long to start.' }), 60000))]);
           if (!started?.id) return json(res, 500, { error: `Codex couldn't start: ${started?.error || 'unknown error'}` });
@@ -1325,7 +1379,7 @@ const server = http.createServer(async (req, res) => {
         if (!findClaude()) return json(res, 400, { error: "Couldn't find Claude Code. Install the VS Code extension, or set AGENTER_CLAUDE to claude.exe." });
         const s = getOrCreateSession(crypto.randomUUID());
         setCwd(s, path.resolve(cwd));
-        s.title = text.split('\n')[0].slice(0, 140);
+        s.title = (typed || 'Image').split('\n')[0].slice(0, 140);
         s.lastEventAt = Date.now();
         settings.drive = { ...settings.drive, [s.id]: 'agenter' };
         saveSettings();
@@ -1420,6 +1474,7 @@ if (require.main === module) {
     process.chdir(os.homedir());
     startTray();
     startDiscovery();
+    pruneUploads();
     startCodexDiscovery();
     fetchUsage();
     setInterval(fetchUsage, USAGE_INTERVAL_MS);
@@ -1433,5 +1488,5 @@ module.exports = {
   sessions, pending, clients, runners, dismissed,
   get settings() { return settings; },
   handleHook, hold, respond, steer, takeQueue, touchSession, snapshot, driveOf, effectiveHold,
-  findClaude, findCodex, codexCommand, releaseRun,
+  findClaude, findCodex, codexCommand, releaseRun, saveImages, withImages, UPLOADS_DIR,
 };