agenter-app 1.1.0 → 1.2.0

package/public/app.js

@@ -102,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>`;
 
@@ -211,6 +212,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 +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;
@@ -421,6 +428,8 @@ function render() {
   else renderLiveRow();
   renderDock();
   renderPreview();
+  renderTerm();
+  renderUpdate();
   markKeyTarget();
   renderUsage();
   refreshAges();
@@ -528,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 = [
@@ -537,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);
@@ -571,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();
@@ -603,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;
@@ -673,6 +690,7 @@ async function scanApps() {
 }
 
 function pickUrl(url) {
+  store.set(previewChatKey(), url);
   store.set(previewKey(), url);
   renderApps();
   loadFrame();
@@ -958,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();
@@ -966,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) {
@@ -1248,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 });
@@ -1304,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');
@@ -1313,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;
@@ -1325,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();
@@ -1356,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());
@@ -1388,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.");
   }
@@ -1402,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;

package/public/index.html

@@ -17,11 +17,14 @@
   <div class="app" id="app">
     <aside class="sidebar" id="sidebar">
       <div class="brand-row">
-        <div class="brand"><span class="logo"></span>Agenter</div>
+        <div class="brand"><span class="logo"></span><span class="brand-name">Agenter</span></div>
         <span class="conn" id="conn" title="Connecting…"></span>
+        <button class="btn ghost icon nav-min-btn" id="navMinBtn" type="button" data-nav-min title="Collapse sidebar (B)" aria-label="Collapse sidebar" aria-expanded="true">
+          <svg class="ic" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+        </button>
       </div>
 
-      <button class="nav-item" id="navInbox" type="button">
+      <button class="nav-item" id="navInbox" type="button" title="Inbox">
         <svg class="ic" viewBox="0 0 24 24"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
         <span>Inbox</span>
         <span class="count" id="inboxCount" hidden></span>
@@ -80,13 +83,24 @@
             </button>
           </div>
         </div>
-        <div class="accent-row" id="accentPicker" role="radiogroup" aria-label="Accent color">
+        <div class="accent-row">
           <span>Accent</span>
-          <button type="button" role="radio" data-accent="sage" style="--sw:#b7d4a6" title="Sage"></button>
-          <button type="button" role="radio" data-accent="clay" style="--sw:#dc9474" title="Clay"></button>
-          <button type="button" role="radio" data-accent="teal" style="--sw:#73cfcb" title="Teal"></button>
-          <button type="button" role="radio" data-accent="rose" style="--sw:#e58aa6" title="Rose"></button>
-          <button type="button" role="radio" data-accent="lavender" style="--sw:#b8acf2" title="Lavender"></button>
+          <div class="swatches" id="accentPicker" role="radiogroup" aria-label="Accent color">
+            <button type="button" role="radio" data-accent="sage" style="--sw:#b7d4a6" title="Sage"></button>
+            <button type="button" role="radio" data-accent="mint" style="--sw:#8fe0b4" title="Mint"></button>
+            <button type="button" role="radio" data-accent="teal" style="--sw:#73cfcb" title="Teal"></button>
+            <button type="button" role="radio" data-accent="sky" style="--sw:#8cc4ef" title="Sky"></button>
+            <button type="button" role="radio" data-accent="indigo" style="--sw:#a0aef5" title="Indigo"></button>
+            <button type="button" role="radio" data-accent="lavender" style="--sw:#b8acf2" title="Lavender"></button>
+            <button type="button" role="radio" data-accent="plum" style="--sw:#d49ae0" title="Plum"></button>
+            <button type="button" role="radio" data-accent="magenta" style="--sw:#f08fd0" title="Magenta"></button>
+            <button type="button" role="radio" data-accent="rose" style="--sw:#e58aa6" title="Rose"></button>
+            <button type="button" role="radio" data-accent="coral" style="--sw:#f29a8b" title="Coral"></button>
+            <button type="button" role="radio" data-accent="clay" style="--sw:#dc9474" title="Clay"></button>
+            <button type="button" role="radio" data-accent="amber" style="--sw:#eec15f" title="Amber"></button>
+            <button type="button" role="radio" data-accent="lemon" style="--sw:#e3d96b" title="Lemon"></button>
+            <button type="button" role="radio" data-accent="slate" style="--sw:#a9b8c6" title="Slate"></button>
+          </div>
         </div>
         </div>
         </details>
@@ -103,6 +117,7 @@
     <div class="scrim" id="scrim"></div>
 
     <main class="main">
+      <div class="update-bar" id="updateBar" role="status" hidden></div>
       <header class="main-head" id="mainHead"></header>
       <div class="split" id="split">
         <div class="chat-col">
@@ -129,11 +144,42 @@
           <div class="pv-body" id="pvBody"></div>
         </section>
       </div>
+      <section class="term" id="term" aria-label="Terminal" hidden>
+        <div class="term-bar">
+          <span class="term-title">PowerShell</span>
+          <span class="term-cwd mono" id="termCwd"></span>
+          <button class="btn ghost small" type="button" id="termStop" data-term-stop title="Stop the running command. This also ends the shell, so variables start fresh" hidden>Stop</button>
+          <button class="btn ghost small" type="button" data-term-clear>Clear</button>
+          <button class="btn ghost icon" type="button" data-term-toggle title="Close terminal" aria-label="Close terminal">
+            <svg class="ic" viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+          </button>
+        </div>
+        <pre class="term-out" id="termOut" tabindex="0"></pre>
+        <form class="term-line" id="termForm" autocomplete="off">
+          <span class="term-prompt mono" id="termPrompt">&gt;</span>
+          <input class="term-input mono" id="termInput" type="text" spellcheck="false" aria-label="Command" placeholder="Type a command">
+        </form>
+      </section>
     </main>
   </div>
 
   <div class="toasts" id="toasts" aria-live="polite"></div>
 
+  <div id="moreMenu" class="more-menu" popover role="menu" aria-label="More actions">
+    <button type="button" role="menuitem" data-memory>
+      <svg class="ic" viewBox="0 0 24 24"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
+      <span>Memory</span>
+    </button>
+    <button type="button" role="menuitem" data-carry>
+      <svg class="ic" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+      <span>Carry to a new chat</span>
+    </button>
+    <button type="button" role="menuitem" data-open-vscode>
+      <svg class="ic" viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+      <span>Open in VS Code</span>
+    </button>
+  </div>
+
   <dialog id="newDialog" class="new-dialog">
     <form id="newForm" autocomplete="off">
       <div class="new-head">
@@ -145,8 +191,15 @@
       </div>
       <p class="dlg-sub" id="newSub"></p>
       <label class="field-label" for="newCwd">Project folder</label>
-      <input class="field mono" id="newCwd" list="newCwdList" placeholder="C:\Users\you\Projects\my-app" spellcheck="false" required>
+      <div class="folder-row">
+        <input class="field mono" id="newCwd" list="newCwdList" placeholder="C:\Users\you\Projects\my-app" spellcheck="false" required>
+        <button class="btn" type="button" id="newBrowse">Browse…</button>
+      </div>
       <datalist id="newCwdList"></datalist>
+      <div class="new-carry" id="newCarry" hidden>
+        <span id="newCarryText"></span>
+        <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>
       <div class="dlg-error" id="newError" hidden></div>
@@ -157,6 +210,25 @@
     </form>
   </dialog>
 
+  <dialog id="memDialog" class="mem-dialog">
+    <div class="mem-head">
+      <h2>Memory</h2>
+      <span id="memSub"></span>
+    </div>
+    <div class="mem-body">
+      <nav class="mem-list" id="memList" aria-label="Memory files"></nav>
+      <div class="mem-edit">
+        <div class="mem-path mono" id="memPath"></div>
+        <textarea class="field mono" id="memText" spellcheck="false" aria-label="File contents"></textarea>
+        <div class="dlg-error" id="memError" hidden></div>
+      </div>
+    </div>
+    <div class="dlg-actions">
+      <button class="btn ghost" type="button" data-mem-close>Close</button>
+      <button class="btn primary" type="button" id="memSave" disabled>Save</button>
+    </div>
+  </dialog>
+
   <dialog id="helpDialog">
     <h2>Keyboard shortcuts</h2>
     <dl class="keys">
@@ -170,6 +242,8 @@
       <dt><kbd>I</kbd></dt><dd>Open the inbox</dd>
       <dt><kbd>/</kbd></dt><dd>Filter sessions</dd>
       <dt><kbd>T</kbd></dt><dd>Switch theme (system → light → dark)</dd>
+      <dt><kbd>`</kbd></dt><dd>Show or hide the terminal</dd>
+      <dt><kbd>B</kbd></dt><dd>Collapse or expand the sidebar</dd>
       <dt><kbd>Esc</kbd></dt><dd>Leave a text box / close this</dd>
     </dl>
     <form method="dialog"><button class="btn primary">Got it</button></form>