agenter-app 1.1.0 → 1.3.0

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"/>',
@@ -102,6 +103,7 @@ const ICONS = {
   refresh: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
   gauge: '<path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>',
   preview: '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/>',
+  dots: '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
 };
 const icon = (name) => `<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">${ICONS[name] || ICONS.tool}</svg>`;
 
@@ -211,6 +213,7 @@ function connect() {
   const es = new EventSource(`/events?client=${CLIENT_ID}&focused=${hasAttention() ? 1 : 0}&token=${encodeURIComponent(TOKEN)}`);
   es.addEventListener('state', (e) => apply(JSON.parse(e.data)));
   es.addEventListener('quit', () => window.close());
+  es.addEventListener('terminal', (e) => onTerminal(JSON.parse(e.data)));
   es.onopen = () => (setConn(true), reportFocus(true)); // after a reconnect the URL's focus flag may be stale
   es.onerror = async () => {
     setConn(false);
@@ -229,6 +232,11 @@ function setConn(ok) {
 }
 
 function apply(snap) {
+  // The server restarted into a new version, so this page is out of date.
+  if (state.version && snap.version !== state.version) return location.reload();
+  state.version = snap.version;
+  state.update = snap.update;
+  state.terminal = snap.terminal;
   const prevEventAt = sessionById(state.selected)?.lastEventAt;
   state.sessions = snap.sessions;
   state.pending = snap.pending;
@@ -421,6 +429,8 @@ function render() {
   else renderLiveRow();
   renderDock();
   renderPreview();
+  renderTerm();
+  renderUpdate();
   markKeyTarget();
   renderUsage();
   refreshAges();
@@ -486,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))));
 }
@@ -528,6 +661,9 @@ function renderSidebar() {
 
 function renderHead() {
   const menu = `<button class="btn ghost icon menu-btn" data-nav-toggle title="Sessions">${icon('menu')}</button>`;
+  const termBtn = state.terminal
+    ? `<button class="btn small ${term.open ? 'on' : ''}" data-term-toggle title="PowerShell in this project's folder (\`)" aria-pressed="${term.open}">${icon('terminal')}<span class="label">Terminal</span></button>`
+    : '';
   if (state.view === 'inbox') {
     const count = (st) => state.sessions.filter((s) => s.status === st).length;
     const parts = [
@@ -537,7 +673,8 @@ function renderHead() {
     ].filter(Boolean);
     $('#mainHead').innerHTML = `${menu}<div class="head-text">
       <div class="head-title"><span>Inbox</span></div>
-      <div class="head-sub">${esc(parts.join(' · ') || 'Nothing running right now')}</div></div>`;
+      <div class="head-sub">${esc(parts.join(' · ') || 'Nothing running right now')}</div></div>
+      <div class="head-actions">${termBtn}</div>`;
     return;
   }
   const s = sessionById(state.selected);
@@ -571,17 +708,20 @@ function renderHead() {
           : ''
       }
       ${s.cwd ? `<button class="btn small ${preview.open ? 'on' : ''}" data-preview-toggle title="Show the running app next to the conversation" aria-pressed="${preview.open}">${icon('preview')}<span class="label">Preview</span></button>` : ''}
-      ${s.cwd ? `<button class="btn small" data-open-vscode title="Open this project in VS Code">${icon('code')}<span class="label">Open in VS Code</span></button>` : ''}
+      ${termBtn}
+      ${s.cwd ? `<button class="btn small icon" data-more popovertarget="moreMenu" title="Memory, carry to a new chat, open in VS Code" aria-label="More actions">${icon('dots')}</button>` : ''}
     </div>`;
 }
 
 // ---------- app preview ----------
 // The project's running app, side by side with the conversation. An address you pick
-// or type is remembered per project; otherwise the first page detected is shown.
+// or type is remembered for that chat, and is the starting point for new chats in the same
+// project. Otherwise the first page detected is shown.
 
-const preview = { open: store.get('previewOpen', false), cwd: null, apps: [], scanning: false, detects: true, timer: null, shown: false };
+const preview = { open: store.get('previewOpen', false), sid: null, cwd: null, apps: [], scanning: false, detects: true, timer: null, shown: false };
 const previewKey = () => 'previewUrl:' + (preview.cwd || '').toLowerCase();
-const chosenUrl = () => store.get(previewKey(), '') || preview.apps.find((a) => a.html)?.url || preview.apps[0]?.url || '';
+const previewChatKey = () => 'previewUrl:chat:' + preview.sid;
+const chosenUrl = () => store.get(previewChatKey(), null) ?? (store.get(previewKey(), '') || preview.apps.find((a) => a.html)?.url || preview.apps[0]?.url || '');
 
 function normalizeUrl(v) {
   v = v.trim();
@@ -603,7 +743,8 @@ function renderPreview() {
     preview.shown = false;
     return clearTimeout(preview.timer);
   }
-  if (s.cwd !== preview.cwd) {
+  if (s.id !== preview.sid || s.cwd !== preview.cwd) {
+    preview.sid = s.id;
     preview.cwd = s.cwd;
     preview.apps = [];
     preview.shown = false;
@@ -673,6 +814,7 @@ async function scanApps() {
 }
 
 function pickUrl(url) {
+  store.set(previewChatKey(), url);
   store.set(previewKey(), url);
   renderApps();
   loadFrame();
@@ -839,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>
@@ -851,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 = {
@@ -874,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');
@@ -958,7 +1109,7 @@ function renderConvo(keepScroll = false) {
       continue;
     }
     flush();
-    if (m.role === 'user') chunks.push([`m${m.seq}`, `<div class="msg-user">${esc(m.text)}</div>`]);
+    if (m.role === 'user') chunks.push([`m${m.seq}`, userBubble(m.text)]);
     else chunks.push([`m${m.seq}`, `<div class="msg-claude"><span class="claude-mark">${icon('sparkle')}</span><div class="md">${md(m.text)}</div></div>`]);
   }
   flush();
@@ -966,6 +1117,13 @@ function renderConvo(keepScroll = false) {
   if (stick) scrollToBottom();
 }
 
+// Context carried over from another chat follows the message, folded away.
+function userBubble(text) {
+  const c = text.match(/\s*<carried-context from="([^"]*)">([\s\S]*)<\/carried-context>\s*$/);
+  if (!c) return `<div class="msg-user">${esc(text)}</div>`;
+  return `<div class="msg-user">${esc(text.slice(0, c.index))}<details class="carried"><summary>Context from ${esc(c[1] || 'an earlier chat')}</summary><pre>${esc(c[2].trim())}</pre></details></div>`;
+}
+
 // Brings el's children in line with chunks, touching only the ones that changed, so
 // new messages don't reset text you've selected or re-render the whole conversation.
 function patchChildren(el, chunks) {
@@ -1125,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>
@@ -1143,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 = {};
@@ -1160,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');
 }
 
@@ -1248,7 +1415,33 @@ const closeNav = () => $('#app').classList.remove('nav-open');
 
 document.addEventListener('click', (e) => {
   const t = e.target;
+  if (t.closest('#moreMenu button')) $('#moreMenu').hidePopover();
   if (onPreviewClick(t)) return;
+  if (t.closest('[data-term-toggle]')) return toggleTerm();
+  if (t.closest('[data-term-stop]')) return post('/api/terminal/stop', { id: term.id });
+  if (t.closest('[data-term-clear]')) return ($('#termOut').textContent = '');
+  if (t.closest('[data-update-now]')) return startUpdate();
+  if (t.closest('[data-update-restart]')) return restartApp();
+  if (t.closest('[data-update-later]')) return ((update.dismissed = update.key), renderUpdate());
+  if (t.closest('[data-nav-min]')) return toggleNavMin();
+  if (t.closest('[data-memory]')) return openMemory();
+  if (t.closest('[data-carry]')) return openNewSession({ carry: state.selected });
+  if (t.closest('[data-carry-drop]')) return setCarry(null);
+  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 });
@@ -1304,6 +1497,10 @@ document.addEventListener('input', (e) => {
 
 document.addEventListener('keydown', (e) => {
   const t = e.target instanceof Element ? e.target : document.body;
+  if (t.id === 'termInput' && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+    e.preventDefault();
+    return termHistory(e.key === 'ArrowUp' ? 1 : -1);
+  }
   if (t.matches('.reply-box textarea') && e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
     e.preventDefault();
     return t.closest('[data-steer]') ? steer(t.closest('.card')) : act(t.closest('.card'), 'reply');
@@ -1313,7 +1510,7 @@ document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') t.blur();
     return;
   }
-  if ($('#helpDialog').open || e.ctrlKey || e.metaKey || e.altKey) return;
+  if ($('dialog[open]') || e.ctrlKey || e.metaKey || e.altKey) return;
 
   const perm = keyTarget();
   const k = e.key;
@@ -1325,6 +1522,8 @@ document.addEventListener('keydown', (e) => {
     chooseTheme(next);
     toast(`Theme: ${next}`);
   }
+  else if (k === '`') (e.preventDefault(), toggleTerm());
+  else if (k === 'b') toggleNavMin();
   else if (k === 'j') step(1);
   else if (k === 'k') step(-1);
   else if (k === 'n') nextNeedingYou();
@@ -1356,22 +1555,64 @@ $('#newAgent').addEventListener('click', (e) => {
   if (b) setNewAgent(b.dataset.newAgent);
 });
 
-function openNewSession() {
+let picking = false;
+// Opens the Windows folder window. { path } | { cancelled } | { busy } | { unsupported }
+async function chooseFolder(start) {
+  if (picking) return { busy: true };
+  picking = true;
+  const label = $('#navNew span');
+  const idle = label.textContent;
+  label.textContent = 'Choosing folder…';
+  $('#navNew').disabled = $('#newBrowse').disabled = true;
+  const r = await post('/api/pick-folder', { start })
+    .then((res) => res.json())
+    .catch(() => ({ unsupported: true }));
+  picking = false;
+  label.textContent = idle;
+  $('#navNew').disabled = $('#newBrowse').disabled = false;
+  return r;
+}
+
+// The chat a new session brings context from, shown in the dialog until removed.
+let carryFrom = null;
+function setCarry(s) {
+  carryFrom = s?.id || null;
+  $('#newCarry').hidden = !s;
+  $('#newCarryText').textContent = s ? `Bringing context from: ${s.title || sessionLabel(s)}` : '';
+}
+
+// Picks the folder first, in the Windows folder window; cancelling it cancels New session.
+// Carrying a chat over already has its folder. Where there's no folder window, you type it.
+async function openNewSession({ carry = null } = {}) {
   closeNav();
   setNewAgent(store.get('newAgent', 'claude'));
   // Folders you've worked in, most recent first; the last one used here goes on top.
   const last = store.get('newCwd', '');
   const cwds = [...new Set([last, ...[...state.sessions].sort((a, b) => b.lastEventAt - a.lastEventAt).map((s) => s.cwd)].filter(Boolean))];
   $('#newCwdList').innerHTML = cwds.map((c) => `<option value="${esc(c)}"></option>`).join('');
-  const current = state.view === 'session' && sessionById(state.selected)?.cwd;
-  $('#newCwd').value = current || last || cwds[0] || '';
+  const current = (state.view === 'session' && sessionById(state.selected)?.cwd) || last || cwds[0] || '';
+  const from = carry && sessionById(carry);
+  let folder = from?.cwd;
+  if (!from) {
+    const picked = await chooseFolder(current);
+    if (picked.cancelled) return;
+    if (picked.busy) return toast('The folder window is already open');
+    folder = picked.path || current;
+  }
+  setCarry(from);
+  $('#newCwd').value = folder;
   $('#newError').hidden = true;
   $('#newStart').disabled = false;
   $('#newDialog').showModal();
   $('#newMsg').focus();
 }
 
-$('#navNew').addEventListener('click', openNewSession);
+$('#navNew').addEventListener('click', () => openNewSession());
+$('#newBrowse').addEventListener('click', async () => {
+  const picked = await chooseFolder($('#newCwd').value.trim());
+  if (picked.path) $('#newCwd').value = picked.path;
+  else if (picked.unsupported) toast('No folder window here. Type the full path');
+});
 $('#newDialog [data-new-cancel]').addEventListener('click', () => $('#newDialog').close());
 $('#newMsg').addEventListener('keydown', (e) => {
   if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) (e.preventDefault(), $('#newForm').requestSubmit());
@@ -1385,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') });
+    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.");
   }
@@ -1396,12 +1639,248 @@ $('#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);
   toast('Session started');
 });
 $('#scrim').addEventListener('click', closeNav);
+
+// ---------- collapsing the sidebar ----------
+
+const drawerLayout = matchMedia('(max-width: 800px)');
+function setNavMin(min) {
+  const btn = $('#navMinBtn');
+  $('#app').classList.toggle('nav-min', min);
+  btn.setAttribute('aria-expanded', String(!min));
+  btn.setAttribute('aria-label', min ? 'Expand sidebar' : 'Collapse sidebar');
+  btn.title = `${min ? 'Expand' : 'Collapse'} sidebar (B)`;
+}
+function toggleNavMin() {
+  if (drawerLayout.matches) return $('#app').classList.toggle('nav-open');
+  const min = !$('#app').classList.contains('nav-min');
+  store.set('navMin', min);
+  setNavMin(min);
+}
+setNavMin(store.get('navMin', false));
+
+// ---------- updates ----------
+
+const update = { key: '', dismissed: '', toasted: new Set() };
+
+function renderUpdate() {
+  const u = state.update;
+  const mode = u?.restart ? 'restart' : u?.available ? 'update' : '';
+  const key = mode && `${mode}:${mode === 'restart' ? u.installed : u.latest}`;
+  const el = $('#updateBar');
+  el.hidden = !key || key === update.dismissed;
+  if (key === update.key) return;
+  update.key = key;
+  if (!key) return;
+  if (mode === 'restart') {
+    el.innerHTML = `<span class="update-text"><b>Agenter ${esc(u.installed)} is installed.</b> Restart to start using it. Running turns stop, and anything waiting goes back to VS Code.</span>
+      <button class="btn primary small" type="button" data-update-restart>Restart</button><button class="btn ghost small" type="button" data-update-later>Later</button>`;
+  } else {
+    el.innerHTML = `<span class="update-text"><b>Agenter ${esc(u.latest)} is available.</b> You have ${esc(u.current)}.${u.canSelfUpdate ? ' Or run <code>agenter update</code>.' : ' Update with <code>git pull</code>.'}</span>
+      ${u.canSelfUpdate && state.terminal ? '<button class="btn primary small" type="button" data-update-now>Update now</button>' : ''}<button class="btn ghost small" type="button" data-update-later>Later</button>`;
+  }
+  // Every time the app opens, once per version.
+  if (!update.toasted.has(key)) {
+    update.toasted.add(key);
+    toast(mode === 'restart' ? 'Restart Agenter to finish updating' : `Agenter ${u.latest} is available`);
+  }
+}
+
+async function startUpdate() {
+  const r = await post('/api/update', {}).catch(() => null);
+  const data = await r?.json().catch(() => ({}));
+  if (!r?.ok) return toast(data?.error || "Couldn't start the update");
+  term.open = true;
+  store.set('termOpen', true);
+  term.sid = currentTermSession();
+  await loadTerm({});
+  render();
+}
+
+async function restartApp() {
+  const r = await post('/api/restart', {}).catch(() => null);
+  toast(r?.ok ? 'Restarting Agenter…' : "Couldn't restart");
+}
+
+// ---------- terminal ----------
+// One PowerShell per folder, kept by the server. The panel follows the session you're on;
+// the inbox uses your home folder.
+
+const TERM_KEEP = 200 * 1024;
+const term = { open: store.get('termOpen', false), id: null, sid: undefined, running: false, cwd: '', history: store.get('termHistory', []), back: -1 };
+const currentTermSession = () => (state.view === 'session' ? state.selected : null);
+// Colors and cursor moves mean nothing here; bare carriage returns are progress redraws.
+const termText = (s) => s.replace(/\x1b\[[0-9;?]*[ -/]*[@-~]|\x1b\][^\x07]*\x07/g, '').replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+function termStatus(running, cwd) {
+  term.running = running;
+  term.cwd = cwd;
+  $('#termCwd').textContent = cwd;
+  $('#termCwd').title = cwd;
+  $('#termStop').hidden = !running;
+  $('#termPrompt').textContent = running ? '…' : '>';
+  $('#termInput').placeholder = running ? 'Running. Type a line to send it to the program' : 'Type a command';
+}
+
+function termAppend(text) {
+  const out = $('#termOut');
+  const stick = out.scrollHeight - out.scrollTop - out.clientHeight < 40;
+  out.append(text);
+  if (out.textContent.length > TERM_KEEP * 1.5) out.textContent = out.textContent.slice(-TERM_KEEP);
+  if (stick) out.scrollTop = out.scrollHeight;
+}
+
+async function loadTerm(body) {
+  const r = await post('/api/terminal/open', body).catch(() => null);
+  if (!r?.ok) return termAppend("Couldn't open the terminal.\n");
+  const t = await r.json();
+  term.id = t.id;
+  $('#termOut').textContent = termText(t.output);
+  $('#termOut').scrollTop = $('#termOut').scrollHeight;
+  termStatus(t.running, t.cwd);
+}
+
+function renderTerm() {
+  const show = term.open && !!state.terminal;
+  $('#term').hidden = !show;
+  if (!show) return;
+  const sid = currentTermSession();
+  if (sid === term.sid) return;
+  term.sid = sid;
+  loadTerm({ sessionId: sid });
+}
+
+function toggleTerm() {
+  term.open = !term.open;
+  store.set('termOpen', term.open);
+  render();
+  if (term.open) $('#termInput').focus();
+}
+
+function onTerminal(e) {
+  if (e.id !== term.id) return;
+  if (e.data) termAppend(termText(e.data));
+  termStatus(e.running, e.cwd);
+}
+
+function termHistory(dir) {
+  const next = term.back + dir;
+  if (next < -1 || next >= term.history.length) return;
+  term.back = next;
+  $('#termInput').value = next < 0 ? '' : term.history[next];
+}
+
+$('#termForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const input = $('#termInput').value;
+  if (!input.trim() && !term.running) return;
+  $('#termInput').value = '';
+  term.back = -1;
+  if (input.trim() && input !== term.history[0] && !term.running) {
+    term.history = [input, ...term.history].slice(0, 100);
+    store.set('termHistory', term.history);
+  }
+  const r = await post('/api/terminal/run', { id: term.id, input }).catch(() => null);
+  if (r?.ok) return;
+  // The server restarted, so that shell is gone: open a new one and try again from here.
+  $('#termInput').value = input;
+  term.sid = undefined;
+  renderTerm();
+});
+
+// ---------- memory ----------
+// The files the agent reads and keeps for this project. Edits stay in drafts until saved, so
+// moving between files doesn't lose them.
+
+const mem = { sid: null, files: [], path: null, drafts: new Map() };
+const memFile = () => mem.files.find((f) => f.path === mem.path);
+const memDirty = (f) => mem.drafts.has(f.path) && mem.drafts.get(f.path) !== f.text;
+
+function renderMemList() {
+  let group = '';
+  $('#memList').innerHTML = mem.files
+    .map((f) => {
+      const head = f.group === group ? '' : `<div class="mem-group">${esc((group = f.group))}</div>`;
+      const mark = memDirty(f) ? '<i class="dirty" title="Not saved"></i>' : f.create ? '<i class="new">new</i>' : '';
+      return `${head}<button type="button" class="mem-file" data-mem-file="${esc(f.path)}" aria-current="${f.path === mem.path}" title="${esc(f.path)}"><span>${esc(f.label)}</span>${mark}</button>`;
+    })
+    .join('');
+}
+
+function showMemFile(p) {
+  mem.path = p;
+  const f = memFile();
+  const ta = $('#memText');
+  $('#memPath').textContent = f.path;
+  $('#memPath').title = f.path;
+  ta.value = mem.drafts.get(f.path) ?? f.text;
+  ta.readOnly = !!f.tooLarge;
+  ta.placeholder = f.tooLarge ? 'This file is too large to edit here.' : f.create ? "This file doesn't exist yet. Type here and Save to create it." : '';
+  $('#memError').hidden = true;
+  $('#memSave').disabled = !memDirty(f);
+  renderMemList();
+}
+
+async function openMemory() {
+  const s = sessionById(state.selected);
+  if (!s) return;
+  const r = await fetch(`/api/memory?session=${encodeURIComponent(s.id)}`, { headers: authHeaders }).catch(() => null);
+  if (!r?.ok) return toast("Couldn't read this project's memory");
+  mem.sid = s.id;
+  mem.files = (await r.json()).files;
+  mem.drafts.clear();
+  if (!mem.files.length) return toast('This session has no project folder');
+  $('#memSub').textContent = s.cwd;
+  showMemFile((mem.files.find((f) => !f.create && f.text) || mem.files[0]).path);
+  $('#memDialog').showModal();
+}
+
+const memCanLeave = () => !mem.files.some(memDirty) || confirm('Discard your unsaved memory changes?');
+function closeMemory() {
+  if (memCanLeave()) $('#memDialog').close();
+}
+$('#memDialog').addEventListener('cancel', (e) => {
+  if (!memCanLeave()) e.preventDefault();
+});
+$('#memText').addEventListener('input', (e) => {
+  const f = memFile();
+  mem.drafts.set(f.path, e.target.value);
+  $('#memSave').disabled = !memDirty(f);
+  renderMemList();
+});
+$('#memSave').addEventListener('click', async () => {
+  const f = memFile();
+  const text = $('#memText').value;
+  const r = await post('/api/memory/save', { sessionId: mem.sid, path: f.path, text, mtime: f.mtime }).catch(() => null);
+  const data = await r?.json().catch(() => ({}));
+  if (!r?.ok) {
+    $('#memError').textContent = data?.error || "Couldn't save.";
+    $('#memError').hidden = false;
+    return;
+  }
+  Object.assign(f, { text, mtime: data.mtime, create: false });
+  mem.drafts.delete(f.path);
+  $('#memError').hidden = true;
+  $('#memSave').disabled = true;
+  renderMemList();
+  toast(`Saved ${f.label}`);
+});
+
+{
+  const menu = $('#moreMenu');
+  menu.addEventListener('beforetoggle', (e) => {
+    if (e.newState !== 'open') return;
+    const r = $('[data-more]').getBoundingClientRect();
+    menu.style.top = `${r.bottom + 6}px`;
+    menu.style.right = `${Math.max(8, innerWidth - r.right)}px`;
+  });
+}
 $('#helpBtn').addEventListener('click', () => $('#helpDialog').showModal());
 $('#search').addEventListener('input', (e) => {
   state.filter = e.target.value;