agenter-app 1.0.3 → 1.2.0

package/public/app.js

@@ -44,7 +44,25 @@ function ago(t) {
   return `${Math.floor(s / 86400)}d`;
 }
 
-const post = (url, body) => fetch(url, { method: 'POST', headers: { 'content-type': 'application/json', 'x-agenter': '1' }, body: JSON.stringify(body) });
+// The launchers open the dashboard with #token=…; it's kept here, out of the address bar.
+const TOKEN = (() => {
+  const key = 'agenter.token';
+  const m = location.hash.match(/^#token=([0-9a-f]+)$/);
+  if (m) {
+    history.replaceState(null, '', location.pathname + location.search);
+    try {
+      localStorage.setItem(key, m[1]);
+    } catch {}
+    return m[1];
+  }
+  try {
+    return localStorage.getItem(key) || '';
+  } catch {
+    return '';
+  }
+})();
+const authHeaders = { 'x-agenter-token': TOKEN };
+const post = (url, body) => fetch(url, { method: 'POST', headers: { 'content-type': 'application/json', ...authHeaders }, body: JSON.stringify(body) });
 
 const STATUS_LABEL = { working: 'Working', waiting: 'Needs you', vscode: 'Waiting in VS Code', idle: 'Idle', dormant: 'Not connected', ended: 'Ended' };
 const isLive = (s) => s.status !== 'dormant' && s.status !== 'ended';
@@ -84,6 +102,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>`;
 
@@ -190,10 +209,19 @@ window.addEventListener('blur', () => setTimeout(reportFocus));
 document.addEventListener('visibilitychange', () => reportFocus());
 
 function connect() {
-  const es = new EventSource(`/events?client=${CLIENT_ID}&focused=${hasAttention() ? 1 : 0}`);
+  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 = () => setConn(false);
+  es.onerror = async () => {
+    setConn(false);
+    // EventSource doesn't say why it failed, and it gives up for good on a refused request.
+    const refused = await post('/api/focus', {}).then((r) => r.status === 401, () => false);
+    if (!refused) return;
+    es.close();
+    if (!$('#authLost')) document.body.insertAdjacentHTML('afterbegin', '<div class="auth-lost" id="authLost" role="alert">This window isn\'t signed in to Agenter. Open it from the Agenter shortcut, or run <code>agenter</code>.</div>');
+  };
 }
 
 function setConn(ok) {
@@ -203,6 +231,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;
@@ -395,6 +428,8 @@ function render() {
   else renderLiveRow();
   renderDock();
   renderPreview();
+  renderTerm();
+  renderUpdate();
   markKeyTarget();
   renderUsage();
   refreshAges();
@@ -502,6 +537,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 = [
@@ -511,7 +549,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);
@@ -545,17 +584,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();
@@ -577,7 +619,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;
@@ -632,7 +675,7 @@ async function scanApps() {
   loadFrame();
   let r = null;
   try {
-    r = await fetch(`/api/preview/apps?session=${encodeURIComponent(sid)}`).then((res) => res.json());
+    r = await fetch(`/api/preview/apps?session=${encodeURIComponent(sid)}`, { headers: authHeaders }).then((res) => res.json());
   } catch {}
   if (cwd !== preview.cwd) return; // switched project meanwhile; that one has its own scan
   preview.scanning = false;
@@ -647,6 +690,7 @@ async function scanApps() {
 }
 
 function pickUrl(url) {
+  store.set(previewChatKey(), url);
   store.set(previewKey(), url);
   renderApps();
   loadFrame();
@@ -748,13 +792,23 @@ const sortPending = (list) => [...list].sort((a, b) => a.createdAt - b.createdAt
 
 // ---------- session view ----------
 
+// Messages you sent that the agent's transcript hasn't recorded yet, by session.
+const sentEchoes = new Map();
+
+function clearEchoes(sid, messages) {
+  const left = (sentEchoes.get(sid) || []).filter((text) => !messages.some((m) => m.role === 'user' && m.text.trim() === text));
+  if (left.length) sentEchoes.set(sid, left);
+  else sentEchoes.delete(sid);
+}
+
 function renderLiveRow() {
   const s = sessionById(state.selected);
   const el = $('#liveRow');
   if (!s || !el) return;
-  let html = '';
-  if (s.status === 'working') html = `<div class="live-row"><span class="dots"><i></i><i></i><i></i></span><span class="targ">${esc(s.lastAction || 'Working…')}</span></div>`;
-  else if (s.status === 'vscode') html = `<div class="live-row">${icon('info')}<span>Waiting for you in VS Code</span></div>`;
+  if (!s.running) sentEchoes.delete(s.id); // The turn is over, so the transcript has the last word.
+  let html = (sentEchoes.get(s.id) || []).map((text) => `<div class="live-echo"><div class="msg-user">${esc(text)}</div></div>`).join('');
+  if (s.status === 'working') html += `<div class="live-row"><span class="dots"><i></i><i></i><i></i></span><span class="targ">${esc(s.lastAction || 'Working…')}</span></div>`;
+  else if (s.status === 'vscode') html += `<div class="live-row">${icon('info')}<span>Waiting for you in VS Code</span></div>`;
   if (el.innerHTML !== html) {
     const stick = nearBottom();
     el.innerHTML = html;
@@ -793,7 +847,7 @@ function renderSteer(s) {
     .join('');
   let when;
   if (isCodex(s)) {
-    if (agenter && busy) when = 'Codex gets this as its next turn, when the current one ends.';
+    if (s.running || (agenter && busy)) when = 'Codex gets this as its next turn, when the current one ends.';
     else if (agenter) when = 'Runs here in Agenter, sandboxed to the project folder (no network).';
     else when = `Queued in Codex: it runs as the next turn when this session is open in Codex (VS Code or the desktop app). Or <button class="link" type="button" data-drive="agenter">drive from Agenter</button>.`;
   } else if (busy) when = 'Claude gets this after its current step.';
@@ -827,6 +881,11 @@ async function steer(card) {
     return toast("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]);
+    renderLiveRow();
+  }
   const FAILED = {
     'no-claude': "Couldn't find Claude Code. Install the VS Code extension, or set AGENTER_CLAUDE to claude.exe",
     'no-codex': "Couldn't find Codex. Install the Codex VS Code extension, or set AGENTER_CODEX_BIN to codex.exe",
@@ -917,7 +976,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();
@@ -925,6 +984,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) {
@@ -1134,7 +1200,7 @@ function loadTranscript(sid) {
       const have = state.transcript.sessionId === sid && state.transcript.messages ? state.transcript : null;
       const lastSeq = () => have?.messages.at(-1)?.seq ?? 0;
       const since = have ? `&epoch=${encodeURIComponent(have.epoch)}&after=${lastSeq()}` : '';
-      const r = await fetch(`/api/transcript?session=${encodeURIComponent(sid)}${since}`);
+      const r = await fetch(`/api/transcript?session=${encodeURIComponent(sid)}${since}`, { headers: authHeaders });
       if (!r.ok) return;
       const { epoch, reset, messages } = await r.json();
       if (sid !== state.selected) return;
@@ -1142,7 +1208,9 @@ function loadTranscript(sid) {
       // A request that overlapped another may repeat messages; seq tells them apart.
       const merged = reset || !have ? messages : [...have.messages, ...messages.filter((m) => m.seq > lastSeq())].slice(-KEEP_MESSAGES);
       state.transcript = { sessionId: sid, epoch, messages: merged };
+      clearEchoes(sid, messages);
       renderConvo(same);
+      renderLiveRow();
     } catch {}
   }, 150);
 }
@@ -1205,7 +1273,21 @@ 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-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 });
@@ -1261,6 +1343,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');
@@ -1270,7 +1356,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;
@@ -1282,6 +1368,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();
@@ -1313,22 +1401,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());
@@ -1345,7 +1475,7 @@ $('#newForm').addEventListener('submit', async (e) => {
   $('#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, agent: store.get('newAgent', 'claude'), fromSessionId: carryFrom });
   } catch {
     return showError("Couldn't reach the Agenter server.");
   }
@@ -1359,6 +1489,241 @@ $('#newForm').addEventListener('submit', async (e) => {
   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;