@jossuealcala/madre 0.6.0 → 0.7.1

package/public/app.js

@@ -84,7 +84,7 @@ const PLACEHOLDERS = {
 };
 let winkTimer = null;
 const LINE_PX = 21;
-const MAX_ROWS = 3;
+const MAX_ROWS = 14;
 
 // Permission modes: chosen per message, capped per agent in CONNECTIONS.
 // The names are the ship's and are never translated; what each one lets an agent do is.
@@ -234,6 +234,21 @@ const MEMORY_COLORS = { decision: '#ffdc3c', fact: '#dfeeff', preference: '#5cf0
 const KIND_WORDS = { decision: t('DECISION'), fact: t('FACT'), preference: t('PREFERENCE'), question: t('QUESTION'), aberration: t('ABERRATION') };
 const kindWord = (kind) => KIND_WORDS[kind] ?? String(kind).toUpperCase();
 
+// Where a memory stands aboard, which is a different question from what it is — so it is said in
+// words and not in a second hue: the map already spends colour on the kind, and two palettes on
+// one dot is how a map stops being readable. What a zone changes on the map is whether the star
+// is lit at all, because that is what the zone means.
+const ZONE_WORDS = { hold: t('HOLD'), bridge: t('BRIDGE'), medbay: t('MED BAY'), jettisoned: t('JETTISONED') };
+const ZONE_NOTE = {
+  hold: t('Distilled and nobody has judged it. It travels into turns.'),
+  bridge: t('You marked the reply it came from as good. It travels, confirmed.'),
+  medbay: t('Quarantined: it is false, or it came from a reply you marked bad. It never travels.'),
+  jettisoned: t('Put out of circulation and kept so it is not learned again. It never travels.'),
+};
+const UNDERWAY = new Set(['hold', 'bridge']);
+const zoneWord = (zone) => ZONE_WORDS[zone] ?? String(zone ?? '').toUpperCase();
+const travels = (memory) => UNDERWAY.has(memory?.zone ?? 'hold');
+
 const formatTime = (iso) => {
   const date = iso ? new Date(iso) : new Date();
   return Number.isNaN(date.getTime()) ? '' : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
@@ -836,17 +851,34 @@ async function browserServers() {
   if (!menu.hidden) { portsMenuShown(false); return; }
   menu.replaceChildren(el('div', 'ports-note', t('READING…')));
   portsMenuShown(true);
-  let ports = [];
-  try { ports = (await fetch('/api/ports').then((response) => response.json()))?.ports ?? []; }
-  catch { menu.replaceChildren(el('div', 'ports-note', t('COULD NOT READ THE PORTS'))); return; }
+  let read;
+  try { read = await fetch('/api/ports').then((response) => response.json()); }
+  catch { menu.replaceChildren(el('div', 'ports-note', t('COULD NOT READ THE PORTS'))); browser.servers?.setAttribute('data-live', 'no'); return; }
   menu.replaceChildren();
+  // The answer's own words when it refuses. Reading `?.ports ?? []` straight past an error turned
+  // «RIPLEY is off» into «nothing is answering on this computer», which is a different thing and
+  // sends the human to look at their server instead of at the switch.
+  if (read?.error) {
+    browser.servers?.setAttribute('data-live', 'no');
+    menu.append(el('div', 'ports-note', read.error));
+    const go = el('button', 'ports-row');
+    go.type = 'button';
+    go.append(el('b', null, '⚙'), el('span', null, t('OPEN MODULES')));
+    go.addEventListener('click', () => { portsMenuShown(false); document.querySelector('#modules-button, [aria-controls="modules"]')?.click(); });
+    menu.append(go);
+    return;
+  }
+  const ports = read?.ports ?? [];
+  const wider = read?.wider ?? [];
   // The lamp on the button keeps what the reading found, so the state survives the menu closing.
   browser.servers?.setAttribute('data-live', ports.length ? 'yes' : 'no');
-  if (!ports.length) { menu.append(el('div', 'ports-note', t('NOTHING IS ANSWERING ON THIS COMPUTER · START YOUR SERVER AND OPEN THIS AGAIN'))); return; }
+  if (!ports.length && !wider.length) { menu.append(el('div', 'ports-note', t('NOTHING IS ANSWERING ON THIS COMPUTER · START YOUR SERVER AND OPEN THIS AGAIN'))); return; }
   for (const found of ports) {
     const row = el('button', 'ports-row');
     row.type = 'button';
-    const what = `${found.command} · ${found.status}${found.html ? '' : ` · ${found.contentType ?? ''}`}`;
+    // A server that sends no Content-Type used to leave the separator hanging: «:5173 node · 200 · ».
+    const kind = found.html ? '' : (found.contentType ?? '').trim();
+    const what = `${found.command} · ${found.status}${kind ? ` · ${kind}` : ''}`;
     row.append(el('b', null, `:${found.port}`), el('span', null, found.framable === false ? t('{what} · refuses to be framed', { what }) : what));
     if (found.framable === false) row.classList.add('refuses');
     row.addEventListener('click', () => {
@@ -870,6 +902,15 @@ async function browserServers() {
     });
     menu.append(row);
   }
+  // Found and not offered. Node and python bind every interface by default, so this is the common
+  // case — and before this it was discarded without a word, which is what made a busy computer
+  // report as an empty one.
+  for (const one of wider) {
+    const row = el('div', 'ports-row wider');
+    row.append(el('b', null, `:${one.port}`), el('span', null, t('{command} · listens on the whole network', { command: one.command })));
+    row.title = t('RIPLEY only opens what is bound to 127.0.0.1. Start it with --host 127.0.0.1 (or listen(port, "127.0.0.1")) and it will show up above.');
+    menu.append(row);
+  }
   menu.append(el('div', 'ports-note', t('ONLY WHAT LISTENS ON THIS COMPUTER AND ANSWERS HTTP · MADRE RUNS NOTHING TO FIND THEM')));
 }
 
@@ -1916,11 +1957,23 @@ function iconButton(svg, title, className) {
 }
 const ICON_GOOD = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5.5 7.5v5.5H3.2a.7.7 0 0 1-.7-.7V8.2a.7.7 0 0 1 .7-.7h2.3Zm0 0 2.6-4.6a1.3 1.3 0 0 1 2.4.8L10 6.8h2.6a1.3 1.3 0 0 1 1.3 1.5l-.8 3.9a1.3 1.3 0 0 1-1.3 1H5.5" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>';
 const ICON_BAD = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10.5 8.5V3H12.8a.7.7 0 0 1 .7.7v4.1a.7.7 0 0 1-.7.7h-2.3Zm0 0-2.6 4.6a1.3 1.3 0 0 1-2.4-.8L6 9.2H3.4a1.3 1.3 0 0 1-1.3-1.5l.8-3.9A1.3 1.3 0 0 1 4.2 3h6.3" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>';
-// The human's verdict on a reply. Saved in the ledger; the dataset drops what is marked bad.
+const ICON_PREFER = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.6l1.6 3.3 3.6.5-2.6 2.5.6 3.6L8 10.8l-3.2 1.7.6-3.6L2.8 6.4l3.6-.5Z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>';
+const ICON_NEVER = '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="5.6" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M4.4 11.6 11.6 4.4" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>';
+
+// The human's verdict on a reply, and the only place in the room where four of them are said.
+// Two of them are the everyday act; the other two are the same thing meant harder, so they are
+// not shown until the one they escalate has been pressed. At rest the bubble carries no more
+// chrome than it did, and the stronger word turns up exactly when it means something.
 function ratingButtons(messageId, sender) {
   const good = iconButton(ICON_GOOD, t('Good reply · keep it for MADRE AI'), 'rate good');
+  const prefer = iconButton(ICON_PREFER, t('This is how I want it done · the room keeps it as a preference'), 'rate prefer');
   const bad = iconButton(ICON_BAD, t('Bad reply · keep it out of the dataset'), 'rate bad');
-  const apply = (rating) => { good.classList.toggle('on', rating === 'good'); bad.classList.toggle('on', rating === 'bad'); };
+  const never = iconButton(ICON_NEVER, t('Never do this again · what the room remembers from it is put out'), 'rate never');
+  const apply = (rating) => {
+    for (const [button, verdict] of [[good, 'good'], [prefer, 'preference'], [bad, 'bad'], [never, 'never']]) button.classList.toggle('on', rating === verdict);
+    prefer.hidden = !(rating === 'good' || rating === 'preference');
+    never.hidden = !(rating === 'bad' || rating === 'never');
+  };
   apply(state.ratings.get(messageId) ?? null);
   const send = async (rating) => {
     const current = state.ratings.get(messageId) ?? null;
@@ -1930,9 +1983,10 @@ function ratingButtons(messageId, sender) {
       if (payload.error) throw new Error(payload.error);
     } catch (error) { toast(t('The rating was not saved: {error}', { error: error.message })); }
   };
-  good.addEventListener('click', (event) => { event.stopPropagation(); void send('good'); });
-  bad.addEventListener('click', (event) => { event.stopPropagation(); void send('bad'); });
-  return { good, bad, apply, sender };
+  for (const [button, verdict] of [[good, 'good'], [prefer, 'preference'], [bad, 'bad'], [never, 'never']]) {
+    button.addEventListener('click', (event) => { event.stopPropagation(); void send(verdict); });
+  }
+  return { good, prefer, bad, never, apply, sender };
 }
 function bubbleActions({ text, sender, sequence, messageId = null }) {
   const bar = el('div', 'bubble-actions');
@@ -1957,7 +2011,7 @@ function bubbleActions({ text, sender, sequence, messageId = null }) {
   if (messageId && sender !== 'madre') {
     const rating = ratingButtons(messageId, sender);
     state.ratingNodes.set(messageId, rating);
-    bar.append(rating.good, rating.bad);
+    bar.append(rating.good, rating.prefer, rating.bad, rating.never);
   }
   bar.append(copy, reply);
   return bar;
@@ -2195,7 +2249,25 @@ function renderThinking(event) {
   const status = el('span', 'status');
   const tokens = el('span', 'tokens');
   const elapsed = el('span', 'elapsed');
-  bubble.append(status, tokens, elapsed);
+  // One answer, not the room. PARAR TODO is the master brake and takes down every plan and every
+  // agent; this one is for the turn in front of you — the agent that hung, or started down the
+  // wrong road, or hit an error and is still being waited on.
+  const stop = el('button', 'stop-turn', t('STOP'));
+  stop.type = 'button';
+  stop.title = t('Stop this answer · the room and the other agents keep going');
+  stop.addEventListener('click', async () => {
+    stop.disabled = true;
+    stop.textContent = t('STOPPING');
+    try {
+      const reply = await fetch('/api/stop-turn', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ messageId }) }).then((response) => response.json());
+      if (reply.error) throw new Error(reply.error);
+    } catch (error) {
+      stop.disabled = false;
+      stop.textContent = t('STOP');
+      toast(`MU/TH/UR › ${error.message}`);
+    }
+  });
+  bubble.append(status, tokens, elapsed, stop);
   node.append(bubble);
   const startedAt = event.timestamp ? new Date(event.timestamp).getTime() : Date.now();
   const phrases = workingPhrases(agent, state.userMessages.get(messageId)?.text ?? '');
@@ -2280,8 +2352,11 @@ function renderModuleInstalledOrRemoved(event) {
 // lived in a panel somebody had to go back to. So it is offered, and answered, here.
 function renderLocalModel(payload, { asked = false } = {}) {
   const node = el('div', 'system local-model');
-  node.append('local · ', el('b', 'who', t('@madre')));
-  if (payload.model) node.append(` · ${payload.model}`);
+  // One line, held together: the card is a grid, and loose words in a grid each take a row.
+  const head = el('span', 'head');
+  head.append('local · ', el('b', 'who', t('@madre')));
+  if (payload.model) head.append(` · ${payload.model}`);
+  node.append(head);
   const line = el('p', 'says');
   const action = el('div', 'acts');
 
@@ -2471,7 +2546,7 @@ function renderForgotten(event) {
   const { kind, text, remaining } = event.payload;
   const node = el('div', 'system memory forgotten');
   node.append(t('memory · the human forgot a '));
-  node.append(el('b', 'who', kind));
+  node.append(el('b', 'who', kindWord(kind)));
   node.append(`: “${text}”${Number.isFinite(remaining) ? t(' · {n} left in the archive', { n: remaining }) : ''}`);
   return node;
 }
@@ -2552,6 +2627,19 @@ function renderLeaseRefused(event) {
 /* ---------- CONTROL: the project itself, between two checkpoints ---------- */
 
 // create · @codex · 2 existing files put back: CREATE only adds (README.md, src/index.astro)
+// The reply named files and the disk does not have them. Said as the fact it is, without
+// deciding what the agent meant: an answer that claims a file it never wrote and an answer that
+// suggests one both leave the human better off knowing it is not there.
+function renderCreateMissing(event) {
+  const { agent, files = [] } = event.payload;
+  const node = el('div', 'system memory warn');
+  node.style.setProperty('--agent', agentColor(agent));
+  node.append(t('create · '), el('b', 'who', `@${agent}`));
+  node.append(t(' · this reply names {n} file(s) that are not on disk: {files}', { n: files.length, files: files.slice(0, 4).join(', ') + (files.length > 4 ? '…' : '') }));
+  node.append(t(' · nothing was written this turn'));
+  return node;
+}
+
 function renderCreateReverted(event) {
   const { agent, existing = [], forbidden = [] } = event.payload;
   const node = el('div', 'system memory warn');
@@ -2965,13 +3053,20 @@ function renderPlanEvent(event) {
   node.append(el('b', null, t('plan · ')));
   if (event.type === 'plan.created') {
     node.id = `plan-${planId}`;
-    node.append(`@${orchestrator} puts `);
+    // One sentence for the catalogue, not three fragments: the agents are chips and cannot travel
+    // inside a string, so the sentence is translated whole around a marker and the chips go back
+    // where the marker was. Built from literals, the Spanish room read «@MADRE PUTS @CODEX#1 TO
+    // WORK, THEN CLOSES».
+    const [before, after] = (closing
+      ? t('@{who} puts {agents} to work, then closes', { who: orchestrator, agents: '\u0000' })
+      : t('@{who} puts {agents} to work', { who: orchestrator, agents: '\u0000' })).split('\u0000');
+    node.append(before);
     steps.forEach((step, index) => {
       if (index) node.append(', ');
       node.append(`@${step.agent}`);
       if (Number.isInteger(step.mode)) node.append(el('span', `step-mode m${step.mode}`, `#${step.mode}`));
     });
-    node.append(` to work${closing ? ', then closes' : ''}`);
+    node.append(after ?? '');
     const stop = el('button', 'stop', t('STOP'));
     stop.type = 'button';
     stop.title = t('Stop the remaining steps of this plan');
@@ -2983,9 +3078,10 @@ function renderPlanEvent(event) {
     node.append(stop);
   } else {
     document.getElementById(`plan-${planId}`)?.querySelector('.stop')?.remove();
+    const howMany = stepsRun === 1 ? t('{n} step', { n: stepsRun }) : t('{n} steps', { n: stepsRun });
     node.append(event.type === 'plan.completed'
-      ? `@${orchestrator} finished · ${stepsRun} step${stepsRun === 1 ? '' : 's'}`
-      : `@${orchestrator} stopped after ${stepsRun} step${stepsRun === 1 ? '' : 's'} · ${reason ?? ''}`);
+      ? t('@{who} finished · {steps}', { who: orchestrator, steps: howMany })
+      : t('@{who} stopped after {steps} · {why}', { who: orchestrator, steps: howMany, why: reason ?? '' }));
   }
   state.lastSender = null;
   return node;
@@ -3047,6 +3143,21 @@ function renderCleared(event) {
 // Anything that wants to hear the room live hooks in here. NOSTROMO does, while a card is open;
 // it is set further down, once that section exists, so a replay at boot reaches nobody too early.
 let liveWatcher = null;
+// A system line's first <b> is its title, set on a line of its own (.system > b:first-child).
+// Written inline, the title kept the separator that joined it to the rest of the sentence —
+// «claro · » — and on a line of its own that dot is all that is left of the join, hanging off the
+// end and pulling a centred title off its centre. And a <b> with words before it is part of the
+// sentence, never its title: CSS sees the first element, not the first word, so it is marked.
+function tidySystemLine(node) {
+  if (!node?.classList?.contains('system')) return node;
+  const head = node.firstElementChild;
+  if (!head || head.tagName !== 'B') return node;
+  if (node.firstChild !== head) { head.classList.add('inline'); return node; }
+  const last = head.lastChild;
+  if (last?.nodeType === 3) last.textContent = last.textContent.replace(/[\s·›:]+$/u, '');
+  return node;
+}
+
 function renderEvent(event) {
   if (state.seen.has(event.id)) return;
   liveWatcher?.(event);
@@ -3173,6 +3284,7 @@ void renderOpenQuestions(); return;
     case 'mode.requested': node = renderModeRequest(event); break;
     case 'control.started': node = renderControlStarted(event); break;
     case 'create.reverted': node = renderCreateReverted(event); break;
+    case 'create.missing': node = renderCreateMissing(event); break;
     case 'control.changed': markTouched(event.payload.agent, event.payload.files); node = renderControlChanged(event); if (!replaying) ripleyMaybeReload((event.payload.files ?? []).map((file) => file.path)); break;
     case 'control.reverted': node = renderControlReverted(event); break;
     case 'mode.granted':
@@ -3190,7 +3302,7 @@ void renderOpenQuestions(); return;
   if (!node) return;
   removeEmpty();
   const stickToBottom = els.thread.scrollHeight - els.thread.scrollTop - els.thread.clientHeight < 120;
-  els.column.append(node);
+  els.column.append(tidySystemLine(node));
   followTurn(event, node, stickToBottom);
 }
 
@@ -3659,7 +3771,7 @@ function armExpendable() {
   line.append(el('b', null, t('MU/TH/UR › ')));
   line.append(t('end of record. nothing else is down here, human. crew status under review.'));
   removeEmpty();
-  els.column.append(line);
+  els.column.append(tidySystemLine(line));
   scrollToEnd();
 }
 
@@ -3705,7 +3817,7 @@ document.querySelector('#mother-button')?.addEventListener('mouseleave', endHove
 document.querySelector('#mother-button')?.addEventListener('click', endHover);
 
 // Debug surface for tests and for the curious: window.__pulse.trackHold(true, t)
-globalThis.__pulse = { trackHold, armExpendable, disarmExpendable, beginHover, endHover, state, moduleCard, runSlashCommand, syncModuleComposer, openCore: (...args) => openCore(...args), get core() { return core; } };
+globalThis.__pulse = { trackHold, armExpendable, disarmExpendable, beginHover, endHover, state, moduleCard, renderModulesDev, runSlashCommand, syncModuleComposer, openCore: (...args) => openCore(...args), get core() { return core; } };
 
 els.thread.addEventListener('wheel', (event) => trackHold(event.deltaY > 0), { passive: true });
 let touchY = null;
@@ -3725,7 +3837,21 @@ const initial = await fetch('/api/state').then((response) => response.json());
 // line the page invents for itself is a copyright line that drifts from the one that counts.
 if (initial.version) {
   const corner = document.querySelector('#colophon');
-  if (corner) corner.textContent = `MADRE ${initial.version} · © 2026 Jossue Alcalá`;
+  if (corner) {
+    corner.replaceChildren(document.createTextNode(`MADRE ${initial.version} · © 2026 Jossue Alcalá · `));
+    // A LINK, and nothing more. It opens a tab when a human clicks it; the room asks the network
+    // for nothing, so there is no destination to declare in outbound.mjs and nothing appears in
+    // the outbound log. The day this were to FETCH anything — a sponsor count, a tier, a badge —
+    // it would stop being a link and would have to be declared like every other address, with its
+    // own switch. It never nags, it never knows whether you clicked, and nothing in the product
+    // changes either way.
+    const back = el('a', 'colophon-back', t('SUPPORT'));
+    back.href = 'https://github.com/sponsors/jossuealcacao-exe';
+    back.target = '_blank';
+    back.rel = 'noopener noreferrer';
+    back.title = t('MADRE is free and stays free · this only opens GitHub Sponsors in a tab');
+    corner.append(back);
+  }
 }
 adoptLanguage(initial.language);
 els.project.textContent = initial.projectRoot.split('/').filter(Boolean).at(-1) || initial.projectRoot;
@@ -3884,7 +4010,7 @@ function moduleModeNotice() {
   arm.addEventListener('click', () => { setMode(2, { wink: true }); els.input.focus(); });
   node.append(arm);
   removeEmpty();
-  els.column.append(node);
+  els.column.append(tidySystemLine(node));
   node.scrollIntoView({ behavior: 'smooth', block: 'end' });
 }
 
@@ -4036,15 +4162,44 @@ function renderMenu() {
   }
   const items = found.kind === '@'
     ? knownAgentIds().filter((id) => id.startsWith(found.query)).map((id) => ({ key: `@${id}`, insert: `@${id} `, what: state.agents.get(id)?.ready ? label(id) : t('{label} · not ready', { label: label(id) }), color: brandOf(id).color, off: !state.agents.get(id)?.ready }))
-    : allCommands().filter((item) => item.name.startsWith(found.query)).map((item) => ({ key: item.usage ?? `/${item.name}`, insert: `/${item.name} `, what: item.available ? item.summary : t('{title} is not available here · see MODULES', { title: item.title }), off: !item.available }));
+    // A command matches while you are still typing it AND once you have typed past it: somebody
+    // reaching for /module types /modules about as often, and an empty menu reads as "no such
+    // thing" rather than "close, try again".
+    : allCommands().filter((item) => item.name.startsWith(found.query) || found.query.startsWith(item.name)).map((item) => ({ key: item.usage ?? `/${item.name}`, insert: `/${item.name} `, what: item.available ? item.summary : t('{title} is not available here · see MODULES', { title: item.title }), off: !item.available }));
+  if (found.kind === '/' && items.length === 1 && items[0].insert === '/module ') return showMenu([...items, ...moduleStarters()], { ...found, hint: t('MODULE · ↑↓ · TAB OR ENTER · pick one and edit it') });
   if (!items.length) return closeMenu();
   showMenu(items, found);
 }
+// /module on its own does nothing until you say what the module should DO, and a blank
+// instruction is the most common way the flow dies. These are real ones, two of each shape a
+// module can take, written to be edited rather than sent: pick one and the text lands in the box.
+// Each wears its own 8-bit mark and a tag in the colour of its shape, so the four shapes read as
+// four kinds of thing before a word is read.
+const STARTER_SHAPES = {
+  command: { label: t('command'), about: t('a slash command · runs in the room, answers as a card') },
+  connector: { label: t('connector'), about: t('a connector · one key, pasted on its card') },
+  sends: { label: t('sends · #4 only'), about: t('a connector that sends · only offered in #4 AIRLOCK') },
+  card: { label: t('card of its own'), about: t('a card of your own · its own panel inside MODULES') },
+};
+function moduleStarters() {
+  return [
+    ['branch', 'command', t('a command that tells me what changed in the repo this week')],
+    ['check', 'command', t('a command that lists the TODOs still left in the code')],
+    ['search', 'connector', t('connect me to my Notion so the agents can search my pages')],
+    ['db', 'connector', t('connect me to my database so the agents can read it, never write')],
+    ['bell', 'sends', t('ping me on Telegram when a turn fails')],
+    ['link', 'sends', t('post a summary to Slack when a long plan finishes')],
+    ['grid', 'card', t('a card showing which of my services are up')],
+    ['chip', 'card', t('a card with what my store sold today')],
+  ].map(([icon, shape, what]) => ({ key: '/module', insert: `/module ${what}`, what, icon, shape, starter: true }));
+}
+
 function showMenu(items, found) {
   Object.assign(menu, { items, index: Math.min(menu.index, items.length - 1), kind: found.kind, start: found.start, end: found.end });
   els.slashMenu.replaceChildren();
+  els.slashMenu.classList.toggle('with-starters', items.some((item) => item.starter));
   items.forEach((item, index) => {
-    const button = el('button', `item${item.off ? ' off' : ''}`);
+    const button = el('button', `item${item.off ? ' off' : ''}${item.starter ? ' starter' : ''}`);
     button.type = 'button';
     button.setAttribute('role', 'option');
     button.setAttribute('aria-selected', String(index === menu.index));
@@ -4053,11 +4208,17 @@ function showMenu(items, found) {
     // a usage string like `/git [status|log|diff|commit "message"|push [confirm]]` is wider than
     // the menu and used to push the description out of the row entirely — leaving a command with
     // no explanation, which is the one thing this menu exists to give.
-    const [name, ...rest] = String(item.key).split(' ');
-    const args = rest.join(' ');
-    button.append(el('span', 'key', name), el('span', 'what', item.what));
-    if (args) button.append(el('span', 'args', args));
-    button.title = `${item.key} · ${item.what}`;
+    if (item.starter) {
+      const shape = STARTER_SHAPES[item.shape];
+      button.append(pixelIcon(item.icon, 'pixel-icon starter-icon'), el('span', 'idea', item.what), el('span', `shape ${item.shape}`, shape.label));
+      button.title = `/module ${item.what} · ${shape.about}`;
+    } else {
+      const [name, ...rest] = String(item.key).split(' ');
+      const args = rest.join(' ');
+      button.append(el('span', 'key', name), el('span', 'what', item.what));
+      if (args) button.append(el('span', 'args', args));
+      button.title = `${item.key} · ${item.what}`;
+    }
     button.addEventListener('mousedown', (event) => { event.preventDefault(); pickMenu(index); });
     els.slashMenu.append(button);
   });
@@ -4140,11 +4301,24 @@ async function runSlashCommand(text) {
   return { handled: true };
 }
 
+// Enter sends. The line break is ⌥ Enter — Option on macOS, Alt on Linux and Windows, which is
+// the same physical key and the same flag on the event, so there is one rule and not one per
+// platform. The break is inserted by hand rather than left to the browser: with the modifier
+// held, what a textarea does with Enter is not the same everywhere, and a key that works on one
+// machine and does nothing on the next is worse than no shortcut.
+els.input.title = t('Enter sends · ⌥ Enter (Alt on Linux) breaks the line');
 els.input.addEventListener('keydown', (event) => {
-  if (event.key === 'Enter' && !event.shiftKey) {
-    event.preventDefault();
-    els.composer.requestSubmit();
-  }
+  if (event.key !== 'Enter') return;
+  event.preventDefault();
+  if (!event.altKey) { els.composer.requestSubmit(); return; }
+  const from = els.input.selectionStart ?? els.input.value.length;
+  const to = els.input.selectionEnd ?? from;
+  if (typeof els.input.setRangeText === 'function') els.input.setRangeText('\n', from, to, 'end');
+  else {
+    els.input.value = `${els.input.value.slice(0, from)}\n${els.input.value.slice(to)}`;
+    els.input.selectionStart = els.input.selectionEnd = from + 1;
+  }
+  els.input.dispatchEvent(new Event('input', { bubbles: true }));
 });
 
 const STOPALL = /^\/?stop\s*all!?$/i;
@@ -4603,6 +4777,7 @@ function renderMotherRecorded() {
   try { collapsed = localStorage.getItem('pulse.mother.log') === 'collapsed'; } catch { /* no storage */ }
   const shown = state.failures.filter((failure) => !dismissed.has(failureKey(failure)));
   const body = folding(mother.recorded, t('RECORDED CONDITIONS · THIS ROOM · {n}', { n: shown.length }), {
+    icon: 'fault',
     key: 'recorded', open: !collapsed,
   });
   // Everything dismissed is still in the ledger; this only stops it from being shown again.
@@ -4696,6 +4871,7 @@ function renderMotherKnown(list = allConditions(), hits = new Set(), agent = nul
   // An inquiry that narrowed the list, or a fix chosen from the log, always shows its answer, whatever the stored state.
   if (list.length !== CONDITIONS.length || hits.size) collapsed = false;
   const body = folding(mother.known, t('KNOWN CONDITIONS · {n} OF {total} · {os} / {shell}', { n: list.length, total: CONDITIONS.length, os: PLATFORMS[mother.platform].label.toUpperCase(), shell: PLATFORMS[mother.platform].shell.toUpperCase() }), {
+    icon: 'list',
     key: 'known', open: !collapsed,
   });
   const grid = el('div', 'mother-grid');
@@ -5099,6 +5275,55 @@ function cardShell(item, { on, state: stateText }) {
   return { card, panel, actions };
 }
 
+// FLOOR 5, for a connector: the secrets it declared. The field is a password field, it posts to
+// the module's own vault route, and it is never filled back in — what comes back from the server
+// is the name and the length, which is all MADRE itself is allowed to know. FORGET removes it.
+function cardSecrets(panel, item) {
+  if (!item.secrets?.length) return;
+  const box = cardBlock(panel, t('KEYS'));
+  for (const secret of item.secrets) {
+    const held = (item.held ?? []).find((one) => one.name === secret.name);
+    const row = el('div', 'card-secret');
+    const field = el('label', 'control');
+    field.append(el('span', null, secret.label));
+    const input = el('input');
+    input.type = 'password';
+    input.autocomplete = 'off';
+    input.placeholder = held ? t('kept · {n} characters', { n: held.bytes }) : t('paste it here');
+    input.title = secret.note;
+    const keep = async (value) => {
+      input.disabled = true;
+      const response = await fetch(`/api/x/${item.id}/secret`, {
+        method: value === null ? 'DELETE' : 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(value === null ? { name: secret.name } : { name: secret.name, secret: value }),
+      });
+      const result = await response.json().catch(() => ({}));
+      input.value = '';
+      if (!response.ok) toast(`MU/TH/UR › ${result.error ?? t('{name} could not keep {label}.', { name: item.name, label: secret.label })}`);
+      await refreshModules();
+    };
+    input.addEventListener('change', () => { if (input.value.trim()) void keep(input.value.trim()); });
+    field.append(input);
+    row.append(field);
+    if (held) {
+      const forget = el('button', 'ghost', t('FORGET IT'));
+      forget.type = 'button';
+      forget.addEventListener('click', () => void keep(null));
+      row.append(forget);
+    }
+    box.append(row);
+    if (secret.note) box.append(el('p', 'note', secret.note));
+    if (secret.where) {
+      const link = el('a', 'note', t('WHERE TO GET IT'));
+      link.href = secret.where;
+      link.target = '_blank';
+      link.rel = 'noreferrer';
+      box.append(link);
+    }
+  }
+}
+
 // FLOOR 4, the part every module can have without writing a line of interface: the settings it
 // declared in the SDK. MADRE draws them and saves them into the module's own block of config.
 function cardControls(panel, item) {
@@ -5264,6 +5489,13 @@ function openEconomy() {
 
 economyPanel.close?.addEventListener('click', () => economyPanel.dialog.close());
 
+// A card's heading, with the glyph that says which card it is before the words are read.
+function cardHead(icon, title) {
+  const head = el('h5', 'card-head');
+  head.append(pixelIcon(icon, 'pixel-icon card-icon'), el('span', null, title));
+  return head;
+}
+
 async function renderEconomy() {
   const box = economyPanel.body;
   if (!box) return;
@@ -5289,7 +5521,7 @@ async function renderEconomy() {
     [count(totals.output), t('OUTPUT CHARGED'), t('tokens written back · the dearer half')],
     [count(saved.tokens), t('NEVER CHARGED'), t('read back from a cache, plus what was never sent')],
     [pct(totals.cacheShare), t('CAME FROM CACHE'), t('of everything read, the share nobody charged twice')],
-    [totals.charsPerInputToken ? totals.charsPerInputToken.toFixed(2) : '—', t('CH PER TOKEN'), t('what MADRE wrote against what the CLIs were charged for reading · not a tokenizer')],
+    [totals.charsPerInputToken ? totals.charsPerInputToken.toFixed(2) : '—', t('CHARACTERS PER TOKEN'), t('what MADRE wrote against what the CLIs were charged for reading · not a tokenizer')],
   ]) {
     const cell = el('div', 'economy-stat');
     cell.title = hint;
@@ -5300,8 +5532,9 @@ async function renderEconomy() {
 
   // 1 · The only money on this screen.
   const first = el('div', 'card-block');
-  first.append(el('h5', null, t('NEVER CHARGED FOR')));
+  first.append(cardHead('free', t('NEVER CHARGED FOR')));
   first.append(el('div', 'economy-headline', count(saved.tokens)));
+  first.append(el('p', 'unit-note', t('tokens this room never paid for')));
   metrics(first, [
     [t('FROM THE CACHE'), count(saved.cachedTokens), t('the CLI said it read these back instead of charging them again · measured')],
     [t('NEVER SENT'), count(saved.unsentTokens), t('briefing a turn had no use for · estimated from characters, not measured')],
@@ -5314,7 +5547,7 @@ async function renderEconomy() {
   // scale of a paid turn beside it so the count means something.
   if (read.free?.turns) {
     const free = el('div', 'card-block');
-    free.append(el('h5', null, t('TURNS THE ROOM ANSWERED ITSELF')));
+    free.append(cardHead('home', t('TURNS THE ROOM ANSWERED ITSELF')));
     metrics(free, [
       [t('FREE TURNS'), count(read.free.turns), t('answered by @madre on this computer · no provider, no bill')],
       [t('OF EVERY TURN'), pct(read.free.share), t('of the turns weighed in this room')],
@@ -5326,7 +5559,7 @@ async function renderEconomy() {
 
   // 2 · Ash, observed rather than claimed.
   const second = el('div', 'card-block');
-  second.append(el('h5', null, t('WHAT ASH DOES TO AN ANSWER')));
+  second.append(cardHead('cut', t('WHAT ASH DOES TO AN ANSWER')));
   // The price before the promise. Ash concatenates an instruction to every prompt it is on, so it
   // ALWAYS costs input — and the room measures that block exactly, because it is the block the
   // room itself wrote. Showing only the shorter answer below, which is observed and conditional,
@@ -5334,7 +5567,7 @@ async function renderEconomy() {
   const block = read.blocks.find((one) => one.id === 'ash');
   if (block) {
     metrics(second, [
-      [t('ASH ADDS'), `${block.perTurn} CH`, t('to every prompt it is on · measured, not estimated')],
+      [t('ASH ADDS'), t('{n} characters', { n: block.perTurn }), t('to every prompt it is on · measured, not estimated')],
       [t('IN TOKENS'), `≈${Math.round(block.perTurn / CH_PER_TOKEN)}`, t('at {rate} characters per token · an estimate', { rate: CH_PER_TOKEN })],
       [t('TURNS CARRYING IT'), count(block.turns), t('of the {n} weighed in this room', { n: count(read.turns) })],
     ]);
@@ -5346,7 +5579,7 @@ async function renderEconomy() {
 
   // 3 · Where what WAS paid for went.
   const third = el('div', 'card-block');
-  third.append(el('h5', null, t('WHERE EACH PROMPT GOES')));
+  third.append(cardHead('bars', t('WHERE EACH PROMPT GOES')));
   economyBlocks(third, read);
   third.append(el('p', 'note', t('{pct} of each prompt is the unchanging head a cache can match. MADRE wrote {chars} characters of the {input} input tokens you were charged for; the rest is what the CLIs read on their own.', { pct: pct(read.totals.prefixShare), chars: count(read.totals.chars), input: count(read.totals.input) })));
   box.append(third);
@@ -5356,11 +5589,13 @@ async function renderEconomy() {
   // which is a table and not a row of bars. A bar can only carry one measure honestly, and these
   // are read by looking one agent up, not by comparing lengths.
   const fourth = el('div', 'card-block wide');
-  fourth.append(el('h5', null, t('BY AGENT')));
+  fourth.append(cardHead('grid', t('BY AGENT')));
   const table = el('table', 'economy-table');
   const head = el('tr');
-  for (const column of [t('AGENT'), t('TURNS'), t('INPUT'), t('OUTPUT'), t('CACHE'), t('CACHED %'), t('CH / TOKEN')]) head.append(el('th', null, column));
-  table.append(el('thead', null)).lastChild.append(head);
+  for (const column of [t('AGENT'), t('TURNS'), t('INPUT'), t('OUTPUT'), t('CACHE'), t('CACHED %'), t('CHARS / TOKEN')]) head.append(el('th', null, column));
+  const thead = el('thead');
+  thead.append(head);
+  table.append(thead);
   const body = el('tbody');
   for (const agent of read.agents) {
     const row = el('tr');
@@ -5378,13 +5613,17 @@ async function renderEconomy() {
 // The blocks a prompt is made of, widest first. Shared by the card and the panel so the two
 // cannot drift into saying different things about the same room.
 function economyBlocks(box, read) {
+  const count = (value) => (Number.isFinite(value) ? value.toLocaleString() : '—');
   const widest = read.blocks[0]?.chars || 1;
+  // The unit belongs on the card once, not stamped on ten rows: ten copies of «CH/TURN» is most
+  // of what made this screen unreadable, and none of them said what CH was.
+  box.append(el('p', 'unit-note', t('Characters each block adds to one prompt.')));
   const bars = el('div', 'ash-blocks');
   for (const block of read.blocks.slice(0, 10)) {
     const row = el('div', 'ash-block');
     const bar = el('i');
     bar.style.setProperty('--fill', `${Math.max(2, Math.round((block.chars / widest) * 100))}%`);
-    row.append(el('b', null, block.id.toUpperCase()), bar, el('span', null, `${block.perTurn} CH/TURN${block.always ? ' · ALWAYS' : ''}`));
+    row.append(el('b', null, block.id.toUpperCase()), bar, el('span', null, `${count(block.perTurn)}${block.always ? t(' · ALWAYS') : ''}`));
     bars.append(row);
   }
   box.append(bars);
@@ -5472,6 +5711,7 @@ function builtinCard(item) {
   const fixed = Boolean(item.fixed);
   const { card, panel, actions } = cardShell(item, { on, state: on ? t('ON') : t('OFF') });
   cardControls(panel, item);
+  cardSecrets(panel, item);
 
   if (item.id === 'ollama') {
     const info = item.ollama ?? { running: false, models: [], settings: {} };
@@ -5650,6 +5890,7 @@ function moduleCard(item) {
   const installed = Boolean(item.status?.installed);
   const { card, panel, actions } = cardShell(item, { on: installed, state: running ? t('INSTALLING') : installed ? t('ON') : t('OFF') });
   cardControls(panel, item);
+  cardSecrets(panel, item);
 
   const blocked = item.preflight && !item.preflight.ok;
   if (blocked) {
@@ -5725,13 +5966,31 @@ function renderModulesDev() {
   const glyph = el('div', 'dev-glyph', '</>');
   const body = el('div', 'dev-body');
   body.append(el('h4', null, t('Would you like to develop for MADRE?')));
-  body.append(el('p', null, t('Use our SDK to build your own modules: one file, no build, no dependencies. A switch, settings, slash commands, tools for the agents, routes. Write it by hand or with an AI, drop it in a folder, reload.')));
+  body.append(el('p', null, t('A module is one file: no build, no dependencies, nothing to register. A switch, settings, a slash command, a tool for the agents, a card of your own \u2014 or a connector to something you already use. Drop it in a folder, press RELOAD, and it is there with its own card.')));
+  // The easiest door is the one nobody finds on their own: ask for it here, in the room.
+  const ask = el('p', 'dev-ask');
+  ask.append(el('span', null, t('Or ask for one. In the composer: ')), el('code', null, '/module \u2026'), el('span', null, t(' \u2014 the agent reads the SDK and writes the file; you review it and decide whether it is installed.')));
+  body.append(ask);
+  body.append(el('p', 'note', t('Connecting to a service from outside is almost always possible: the limit is not MADRE, it is whether that service lets you get your own key in minutes and revoke it on its own. Your module declares the key it needs and MADRE draws the field; declares where it reaches and the outbound log answers for it; declares which of its tools SEND, and the room withholds those below #4 AIRLOCK.')));
   const where = el('div', 'dev-where');
   const folders = modules.folders ?? {};
   where.append(el('code', null, folders.user ? `${folders.user}/` : '~/.pulse/modules/'), el('span', 'note', t(' every project · ')), el('code', null, folders.project ? `${folders.project}/` : '<project>/.madre/modules/'), el('span', 'note', t(' this project')));
   body.append(where);
   const row = el('div', 'dev-row');
   const read = el('a', 'mother-close', t('READ THE SDK ↗')); read.href = modules.sdk ?? 'https://github.com/jossuealcacao-exe/madre/blob/main/docs/SDK.md'; read.target = '_blank'; read.rel = 'noopener noreferrer';
+  // Straight into the composer, with the panel out of the way: the gap between reading about
+  // the SDK and trying it should be one click, not a file path to go find.
+  const build = el('button', 'mother-close', t('ASK FOR ONE'));
+  build.type = 'button';
+  build.title = t('Puts /module in the composer, in the room');
+  build.addEventListener('click', () => {
+    document.querySelector('#modules-button, [aria-controls="modules"]')?.click();
+    els.input.value = '/module ';
+    autosize();
+    syncModuleComposer();
+    els.input.focus();
+    renderMenu();
+  });
   const reload = el('button', 'mother-close', t('RELOAD MODULES')); reload.type = 'button'; reload.title = t('Load your module files again without restarting the room');
   reload.addEventListener('click', async () => {
     reload.disabled = true;
@@ -5742,7 +6001,7 @@ function renderModulesDev() {
       renderModules();
     } catch (error) { toast(t('The reload failed: {error}', { error: error.message })); } finally { reload.disabled = false; }
   });
-  row.append(read, reload);
+  row.append(build, read, reload);
   body.append(row);
   const yours = modules.items.filter((item) => item.external);
   if (yours.length) {
@@ -5889,6 +6148,10 @@ const settingsUI = {
   loginLogs: new Map(),
 };
 
+// MEMORY is its own destination in the bar, and the two are mutually exclusive: both are full
+// screens of the same panel, so opening one closes the other instead of stacking them.
+const memoryUI = { button: document.querySelector('#memory-button'), section: document.querySelector('#mother-memory'), open: false };
+
 function renderLoginEvent(event) {
   const { agent, command, session, code, error } = event.payload;
   const finished = event.type === 'connection.login.finished';
@@ -6474,43 +6737,274 @@ document.querySelector('#core-copy')?.addEventListener('click', async () => {
   } catch { toast(t('The clipboard is not available here.')); }
 });
 
-/* ---------- where this room stands ---------- */
-
-// One sentence and one thing to do. Everything that decides which sentence was already being
-// measured; what was missing was somebody choosing. The nine numbers are still here, a fold away,
-// for the day someone wants them — but nobody should have to read nine numbers to know whether
-// their room is working.
-async function drawVerdict(box) {
-  box.replaceChildren(el('p', 'note', t('READING…')));
-  let payload;
-  try { payload = await fetch('/api/maturity').then((response) => response.json()); }
-  catch { box.replaceChildren(el('p', 'note', t('THE READING IS UNAVAILABLE'))); return; }
-  const m = payload.maturity;
-  const v = payload.verdict;
-  box.replaceChildren();
-  if (!m || !v) { box.append(el('p', 'note', t('NOTHING TO READ YET: THE ROOM HAS NO ARCHIVE.'))); return; }
+/* ---------- the MEMORY dashboard ---------- */
 
-  const head = el('div', 'maturity-head');
-  head.append(el('b', `stage ${m.stage.id}`, m.stage.label), el('span', null, v.says));
+// What the archive holds and how it is doing, in one screen that is read before it is touched.
+// Everything on it is a count the room already keeps (/api/memory/dashboard) or a reading it
+// already takes (/api/maturity). No memory's text is on this screen, which is why it opens
+// without the designation NOSTROMO asks for.
+//
+// The charts are plain elements, not a library: a column is a box with a height, which is all a
+// phosphor screen needs, and it stays crisp at any width. One green, because every chart here
+// compares amounts of one thing; where an entity already has a colour of its own (a memory's kind
+// on the NOSTROMO map) it travels as a small key beside the word, never as the only way to tell.
+const memFmt = (n) => Number(n ?? 0).toLocaleString(language());
+const memPct = (value) => `${Math.round(Number(value ?? 0) * 100)}%`;
+const memDay = (day) => {
+  const [y, m, d] = String(day).split('-').map(Number);
+  return new Date(y, m - 1, d).toLocaleDateString(language(), { day: 'numeric', month: 'short' }).replace('.', '').toUpperCase();
+};
+
+function memCard(parent, title, className = '') {
+  const card = el('section', `mem-card${className ? ` ${className}` : ''}`);
+  card.append(el('h4', null, title));
+  parent.append(card);
+  return card;
+}
+
+// A row of columns from a baseline. Empty days keep their slot and show a hairline stub, so a
+// quiet stretch reads as quiet instead of closing up; the last column is today.
+function memColumns(values, className = 'mem-cols') {
+  const box = el('div', className);
+  const top = Math.max(1, ...values);
+  for (const [i, n] of values.entries()) {
+    const col = el('i', n ? null : 'zero');
+    if (n) col.style.setProperty('--h', `${Math.max(6, (n / top) * 100)}%`);
+    if (i === values.length - 1) col.classList.add('now');
+    box.append(col);
+  }
+  return box;
+}
+
+// A filled bar against its own track: how much of a whole, or how far toward a mark.
+function memMeter(value, { mark = null } = {}) {
+  const track = el('span', 'mem-meter');
+  const fill = el('i');
+  fill.style.width = `${Math.min(100, Math.max(0, value * 100))}%`;
+  track.append(fill);
+  if (mark !== null) {
+    const line = el('b', 'mark');
+    line.style.left = `${Math.min(100, Math.max(0, mark * 100))}%`;
+    track.append(line);
+  }
+  return track;
+}
+
+// Amounts of one thing, longest first, each with its number at the end of its bar.
+function memBars(card, rows) {
+  const list = el('div', 'mem-bars');
+  const shown = rows.filter((row) => row.n > 0).sort((a, b) => b.n - a.n);
+  if (!shown.length) { card.append(el('p', 'note', t('NOTHING YET'))); return; }
+  const top = Math.max(...shown.map((row) => row.n));
+  const total = shown.reduce((sum, row) => sum + row.n, 0);
+  for (const row of shown) {
+    const line = el('div', 'mem-bar');
+    const name = el('span', 'name');
+    if (row.swatch) { const key = el('i', 'swatch'); key.style.background = row.swatch; name.append(key); }
+    name.append(row.label);
+    const track = el('span', 'track');
+    const fill = el('i');
+    fill.style.width = `${(row.n / top) * 100}%`;
+    track.append(fill);
+    line.append(name, track, el('span', 'value', `${memFmt(row.n)} · ${memPct(row.n / total)}`));
+    if (row.title) line.title = row.title;
+    list.append(line);
+  }
+  card.append(list);
+}
+
+function memTile(parent, { label, value, sub = null, title = null, spark = null, meter = null }) {
+  const tile = el('div', 'mem-tile');
+  tile.append(el('span', 'label', label), el('strong', 'value', value));
+  if (sub) tile.append(el('span', 'sub', sub));
+  if (spark) tile.append(memColumns(spark, 'mem-cols spark'));
+  if (meter !== null) tile.append(memMeter(meter));
+  if (title) tile.title = title;
+  parent.append(tile);
+  return tile;
+}
+
+// This week, and which way it went against the one before. An arrow and a number, never a
+// percentage: a rise from two to four is not «+100%» in any sense worth reading.
+function memWeek(week) {
+  if (!week) return null;
+  const turn = week.delta > 0 ? `▲ ${memFmt(week.delta)}` : week.delta < 0 ? `▼ ${memFmt(-week.delta)}` : '=';
+  return `${t('{n} THIS WEEK', { n: memFmt(week.last) })} · ${turn}`;
+}
+const memWeekTitle = (week) => (week ? t('{last} in the last 7 days, {before} in the 7 before', { last: memFmt(week.last), before: memFmt(week.before) }) : null);
+
+// Three series of one window, stacked so their days line up: each strip has its own height
+// because an exchange and a recall are not the same unit, and one axis for the three would lie
+// about one of them. One crosshair finds the day in all three at once.
+function memActivity(card, dash) {
+  const rows = [['entries', t('EXCHANGES')], ['memories', t('NEW MEMORIES')], ['recalls', t('TURNS THAT RECALLED')]];
+  const n = dash.days.length;
+  const chart = el('div', 'mem-activity');
+  chart.tabIndex = 0;
+  chart.setAttribute('role', 'img');
+  const total = (id) => dash.series[id].reduce((sum, v) => sum + v, 0);
+  chart.setAttribute('aria-label', t('{entries} exchanges, {memories} new memories and {recalls} turns that recalled in the last {n} days', { entries: total('entries'), memories: total('memories'), recalls: total('recalls'), n }));
+  for (const [id, label] of rows) {
+    const strip = el('div', 'mem-strip');
+    const head = el('div', 'mem-strip-head');
+    head.append(el('b', null, label), el('span', null, t('PEAK {n}', { n: memFmt(Math.max(0, ...dash.series[id])) })));
+    strip.append(head, memColumns(dash.series[id], 'mem-cols big'));
+    chart.append(strip);
+  }
+  const axis = el('div', 'mem-axis');
+  axis.append(el('span', null, memDay(dash.days[0])), el('span', null, memDay(dash.days[Math.floor(n / 2)])), el('span', null, t('TODAY')));
+  chart.append(axis);
+  const cross = el('div', 'mem-cross');
+  const tip = el('div', 'mem-tip');
+  cross.hidden = true; tip.hidden = true;
+  chart.append(cross, tip);
+  let at = -1;
+  const show = (i) => {
+    at = i;
+    for (const cols of chart.querySelectorAll('.mem-cols')) for (const [j, col] of [...cols.children].entries()) col.classList.toggle('on', j === i);
+    if (i < 0) { cross.hidden = true; tip.hidden = true; return; }
+    const col = chart.querySelector('.mem-cols').children[i];
+    const left = col.offsetLeft + col.offsetWidth / 2;
+    cross.style.left = `${left}px`;
+    cross.hidden = false;
+    tip.replaceChildren(el('b', 'when', i === n - 1 ? t('TODAY') : memDay(dash.days[i])));
+    for (const [id, label] of rows) {
+      const line = el('div');
+      line.append(el('strong', null, memFmt(dash.series[id][i])), el('span', null, label));
+      tip.append(line);
+    }
+    tip.hidden = false;
+    tip.style.left = left > chart.clientWidth / 2 ? `${left - tip.offsetWidth - 14}px` : `${left + 14}px`;
+  };
+  chart.addEventListener('pointermove', (event) => {
+    const box = chart.querySelector('.mem-cols').getBoundingClientRect();
+    if (!box.width) return;
+    const i = Math.floor(((event.clientX - box.left) / box.width) * n);
+    show(i < 0 || i >= n ? -1 : i);
+  });
+  chart.addEventListener('pointerleave', () => show(-1));
+  chart.addEventListener('focus', () => show(n - 1));
+  chart.addEventListener('blur', () => show(-1));
+  chart.addEventListener('keydown', (event) => {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+    event.preventDefault();
+    show(Math.min(n - 1, Math.max(0, (at < 0 ? n - 1 : at) + (event.key === 'ArrowLeft' ? -1 : 1))));
+  });
+  card.append(chart);
+
+  // The same numbers without pointing at anything: every value the crosshair shows is here too.
+  const table = cardFold(card, t('BY DAY · TABLE'), { key: 'madre.memory.table' });
+  const lived = dash.days.map((day, i) => [day, ...rows.map(([id]) => dash.series[id][i])]).filter(([, ...values]) => values.some(Boolean)).reverse();
+  if (!lived.length) { table.append(el('p', 'note', t('NOTHING HAPPENED IN THESE DAYS.'))); return; }
+  const grid = el('table', 'mem-table');
+  const headRow = el('tr');
+  for (const word of [t('DAY'), ...rows.map(([, label]) => label)]) headRow.append(el('th', null, word));
+  grid.append(headRow);
+  for (const [day, ...values] of lived) {
+    const tr = el('tr');
+    tr.append(el('td', null, memDay(day)));
+    for (const value of values) tr.append(el('td', null, memFmt(value)));
+    grid.append(tr);
+  }
+  table.append(grid);
+}
+
+async function drawMemoryDashboard(box) {
+  // A refresh keeps the frame it has and dims it, instead of blanking the screen under the reader.
+  if (box.childElementCount) box.classList.add('loading');
+  else box.replaceChildren(el('p', 'note', t('READING…')));
+  let read; let dash;
+  try {
+    [read, dash] = await Promise.all([
+      fetch('/api/maturity').then((response) => response.json()),
+      fetch('/api/memory/dashboard').then((response) => response.json()).then((payload) => payload?.dashboard ?? null),
+    ]);
+  } catch { box.classList.remove('loading'); box.replaceChildren(el('p', 'note', t('THE DASHBOARD IS UNAVAILABLE'))); return; }
+  box.classList.remove('loading');
+  box.replaceChildren();
+  const m = read?.maturity;
+  const v = read?.verdict;
+
+  const head = el('div', 'mem-dash-head');
+  // The title is the fold's; what is left here is when it was read and a way to read it again.
+  head.append(el('span', 'when', t('READ {time}', { time: formatTime(new Date().toISOString()) })));
+  const refresh = el('button', null, t('REFRESH'));
+  refresh.type = 'button';
+  refresh.addEventListener('click', () => { void drawMemoryDashboard(box); });
+  head.append(refresh);
   box.append(head);
+  if (!dash || !m || !v) { box.append(el('p', 'note', t('NOTHING TO READ YET: THE ROOM HAS NO ARCHIVE.'))); return; }
+
+  // The figures, then the one sentence about them, then what they are made of.
+  const kpis = el('div', 'mem-kpis');
+  memTile(kpis, { label: t('EXCHANGES'), value: memFmt(dash.totals.entries), sub: memWeek(dash.weeks.entries), title: memWeekTitle(dash.weeks.entries), spark: dash.series.entries.slice(-14) });
+  memTile(kpis, { label: t('MEMORIES'), value: memFmt(dash.totals.memories), sub: memWeek(dash.weeks.memories), title: memWeekTitle(dash.weeks.memories), spark: dash.series.memories.slice(-14) });
+  memTile(kpis, { label: t('TURNS THAT RECALLED'), value: memFmt(dash.totals.turns), sub: memWeek(dash.weeks.recalls), title: memWeekTitle(dash.weeks.recalls), spark: dash.series.recalls.slice(-14) });
+  memTile(kpis, { label: t('WAITING'), value: memFmt(dash.totals.pending), sub: dash.totals.pending ? t('EXCHANGES NOBODY HAS DISTILLED YET') : t('THE ARCHIVIST IS UP TO DATE') });
+  memTile(kpis, { label: t('MATURITY'), value: memPct(m.score), sub: m.stage.label, meter: m.score, title: m.stage.says });
+  box.append(kpis);
+
+  const verdict = el('div', `mem-verdict stage-${m.stage.id}`);
+  const says = el('p', 'says');
+  says.append(el('b', null, v.headline ?? m.stage.label), ` ${v.says}`);
   const next = el('p', 'maturity-next');
   next.append(el('b', null, t('NEXT')), ` ${v.next.text}`);
   if (v.next.where) next.append(el('span', 'where', ` → ${v.next.where}`));
-  box.append(next);
+  verdict.append(says, next);
+  box.append(verdict);
 
-  // What it is made of, a fold away.
-  const made = cardFold(box, t('WHAT THE ARCHIVE IS MADE OF'), { key: 'madre.maturity.signals', count: m.signals.length });
+  const grid = el('div', 'mem-grid');
+  memActivity(memCard(grid, t('ACTIVITY · LAST {n} DAYS', { n: dash.days.length }), 'span-7'), dash);
+  const made = memCard(grid, t('WHAT THE ARCHIVE IS MADE OF'), 'span-5');
   for (const signal of m.signals) {
-    const row = el('div', `maturity-row${signal.id === m.weakest ? ' weakest' : ''}`);
-    const bar = el('i');
-    bar.style.setProperty('--fill', `${Math.round(signal.value * 100)}%`);
-    row.append(el('b', null, signal.label), bar, el('span', null, signal.detail));
+    const row = el('div', `mem-signal${signal.id === m.weakest ? ' weakest' : ''}`);
+    const top = el('div', 'top');
+    top.append(el('b', null, signal.label), el('span', null, memPct(signal.value)));
+    row.append(top, memMeter(signal.value), el('span', 'detail', signal.detail));
     row.title = signal.next;
     made.append(row);
   }
-  // And whether it works, a fold away as well.
-  const tested = cardFold(box, t('THE THREE TESTS'), { key: 'madre.maturity.exams', count: 3 });
-  tested.append(examsBlock(payload.exams));
+
+  const kinds = memCard(grid, t('BY KIND'), 'span-3');
+  memBars(kinds, Object.entries(dash.kinds).map(([kind, n]) => ({ label: kindWord(kind), n, swatch: `var(--mem-${kind}, var(--ph))` })));
+  const agents = memCard(grid, t('BY ARCHIVIST'), 'span-3');
+  memBars(agents, Object.entries(dash.agents).map(([agent, n]) => ({ label: `@${agent.toUpperCase()}`, n })));
+  const zones = memCard(grid, t('BY ZONE'), 'span-3');
+  memBars(zones, Object.entries(dash.zones).map(([zone, n]) => ({ label: zoneWord(zone), n, title: ZONE_NOTE[zone] ?? null })));
+
+  const recall = memCard(grid, t('RECALL AND EMBEDDINGS'), 'span-3');
+  const carried = dash.via.search + dash.via.cascade;
+  if (carried) {
+    const split = el('div', 'mem-split');
+    split.title = t('How recalled memories arrived: found by the search, or carried along by the company they keep.');
+    for (const [id, n] of [['search', dash.via.search], ['cascade', dash.via.cascade]]) {
+      const part = el('i', id);
+      part.style.flexGrow = String(n);
+      split.append(part);
+    }
+    recall.append(split);
+    const legend = el('div', 'mem-legend');
+    for (const [id, label, n] of [['search', t('SEARCH'), dash.via.search], ['cascade', t('CASCADE'), dash.via.cascade]]) {
+      const key = el('span', `k ${id}`);
+      key.append(el('i'), `${label} `, el('b', null, `${memFmt(n)} · ${memPct(n / carried)}`));
+      legend.append(key);
+    }
+    recall.append(legend);
+  } else recall.append(el('p', 'note', t('NOTHING YET')));
+  if (dash.vectors) {
+    for (const [label, have, of] of [[t('MEMORIES WITH A VECTOR'), dash.vectors.memories, dash.totals.memories], [t('EXCHANGES WITH A VECTOR'), dash.vectors.entries, dash.totals.entries]]) {
+      const row = el('div', 'mem-signal');
+      const top = el('div', 'top');
+      top.append(el('b', null, label), el('span', null, `${memFmt(have)} / ${memFmt(of)}`));
+      row.append(top, memMeter(of ? have / of : 0));
+      recall.append(row);
+    }
+    recall.append(el('span', 'detail', String(dash.vectors.model).toUpperCase()));
+  } else recall.append(el('p', 'note', t('EMBEDDINGS OFF · RECALL MATCHES WORDS ONLY')));
+
+  const tests = memCard(grid, t('THE THREE TESTS'), 'span-12');
+  tests.append(examsBlock(read.exams, { pass: dash.pass }));
+  box.append(grid);
 }
 
 /* ---------- the three tests ---------- */
@@ -6526,7 +7020,7 @@ const EXAM_ABOUT = {
   match: t('Real questions answered here by a frontier CLI, asked again of the local model with this archive behind it, and compared against the answer given at the time. It takes minutes and spends nothing.'),
 };
 
-function examRow(id, state, run) {
+function examRow(id, state, run, pass = null) {
   const last = state.last?.[id] ?? null;
   const can = state.can?.[id] ?? { ok: false };
   const row = el('div', `exam exam-${id}${last?.ran ? (last.passed ? ' passed' : ' failed') : ''}`);
@@ -6541,6 +7035,13 @@ function examRow(id, state, run) {
     const when = last.at ? ` · ${new Date(last.at).toLocaleString()}` : '';
     const how = last.ran && last.rate !== undefined ? `${Math.round(last.rate * 100)}% · ${t('{n} CASES', { n: last.n })}${last.method ? t(' · BY {method}', { method: last.method.toUpperCase() }) : ''}${last.bar ? t(' · BAR {bar}', { bar: last.bar }) : ''}${when}` : when.replace(' · ', '');
     row.append(said);
+    // The rate against the line it has to reach: the bar fills to what it scored, the mark
+    // stands where it passes.
+    if (last.ran && last.rate !== undefined && pass?.[id] !== undefined) {
+      const bullet = el('div', 'exam-bullet');
+      bullet.append(memMeter(last.rate, { mark: pass[id] }), el('span', null, `${memPct(last.rate)} · ${t('PASSES AT {n}', { n: memPct(pass[id]) })}`));
+      row.append(bullet);
+    }
     if (how) row.append(el('p', 'note', how.toUpperCase()));
   }
   const actions = el('div', 'actions');
@@ -6556,12 +7057,12 @@ function examRow(id, state, run) {
   return row;
 }
 
-function examsBlock(known = null) {
+function examsBlock(known = null, { pass = null } = {}) {
   const box = el('div', 'full exams');
   const draw = (state) => {
     box.replaceChildren();
     box.append(el('p', 'note', t('NOTHING HERE SPENDS A PROVIDER TURN. THE FIRST TWO ARE FREE; THE THIRD TAKES MINUTES AND STOPS WHEN YOU SAY.')));
-    for (const id of ['coverage', 'consistency', 'match']) box.append(examRow(id, state, run));
+    for (const id of ['coverage', 'consistency', 'match']) box.append(examRow(id, state, run, pass));
     if (state.running === 'match') {
       const stop = el('button', null, t('STOP'));
       stop.type = 'button';
@@ -6600,13 +7101,19 @@ function rememberFold(key, open) {
 }
 // One button for the whole panel. It says what it will do, not what the panel is: if anything is
 // still shut, it opens everything; once everything is open it closes it again.
-function everyFold() { return [...document.querySelectorAll('.mother-section .fold')]; }
+// Only the screen on show: a fold behind CONNECTIONS or MEMORY is not one the reader can see move.
+function everyFold() { return [...document.querySelectorAll('.mother-section:not([hidden]) .fold')]; }
 function syncFoldAll() {
   const button = document.querySelector('#fold-all');
   if (!button) return;
   const folds = everyFold();
+  const row = button.parentElement;
+  if (row) row.hidden = folds.length < 2;
   button.hidden = folds.length < 2;
-  button.textContent = folds.some((fold) => !fold.open) ? t('EXPAND ALL') : t('COLLAPSE ALL');
+  // It acts on the canvas below it rather than going anywhere, so it must not look like one more
+  // destination in the bar: no frame, the voice of the fold carets it moves, at their edge.
+  const shut = folds.some((fold) => !fold.open);
+  button.replaceChildren(pixelIcon(shut ? 'unfold' : 'fold', 'pixel-icon'), el('span', null, shut ? t('EXPAND ALL') : t('COLLAPSE ALL')));
 }
 document.querySelector('#fold-all')?.addEventListener('click', () => {
   const folds = everyFold();
@@ -6617,11 +7124,73 @@ document.querySelector('#fold-all')?.addEventListener('click', () => {
 
 // A section that folds. A badge belongs on the header only when it says something the header
 // does not: the same number twice is noise, and a mark that is always there stops being a mark.
-function folding(section, title, { key, open = false, badge = null } = {}) {
+// Every block of a MU/TH/UR screen. The mark in front of the title used to be the same green bar
+// on all of them, which told the eye there was a heading and nothing else; a glyph per section
+// says WHICH section without reading the words, and the rule above each block goes: a line and an
+// icon are two ways of saying «a new block starts here» and one of them is enough.
+
+// 8-bit. Each icon is an 8×8 bitmap written as eight rows of text — `#` is a lit pixel — and
+// drawn as unit squares on an 8×8 viewBox with crisp edges, so it scales without ever softening
+// into a curve. Written this way because a pixel drawing should be readable as a pixel drawing in
+// the source too: you can see the icon in the string.
+const PIXEL_ICONS = {
+  unfold: ['........', '#......#', '##....##', '.######.', '..####..', '...##...', '........', '........'],
+  fold:   ['........', '........', '...##...', '..####..', '.######.', '##....##', '#......#', '........'],
+  release: ['...##...', '..####..', '.######.', '##.##.##', '...##...', '...##...', '...##...', '...##...'],
+  alert:   ['...##...', '..#..#..', '..#..#..', '.#.##.#.', '.#.##.#.', '#......#', '#..##..#', '########'],
+  fault:   ['##....##', '###..###', '.######.', '..####..', '..####..', '.######.', '###..###', '##....##'],
+  list:    ['#..#####', '........', '#..#####', '........', '#..#####', '........', '#..#####', '........'],
+  link:    ['........', '......#.', '########', '......#.', '........', '.#......', '########', '.#......'],
+  gear:    ['..#..#..', '..#..#..', '.######.', '###..###', '###..###', '.######.', '..#..#..', '..#..#..'],
+  chip:    ['..#..#..', '########', '#......#', '#.####.#', '#.####.#', '#......#', '########', '..#..#..'],
+  lock:    ['..####..', '.#....#.', '.#....#.', '########', '###..###', '###..###', '########', '........'],
+  free:    ['..####..', '.#....#.', '#....#.#', '#...#..#', '#..#...#', '#.#....#', '.#....#.', '..####..'],
+  home:    ['...##...', '..####..', '.######.', '########', '##....##', '##.##.##', '##.##.##', '##.##.##'],
+  cut:     ['#......#', '.#....#.', '..#..#..', '...##...', '..#..#..', '.#....#.', '##....##', '##....##'],
+  bars:    ['........', '######..', '........', '####....', '........', '########', '........', '###.....'],
+  grid:    ['########', '##.##.##', '########', '##.##.##', '########', '##.##.##', '########', '........'],
+  orbit:   ['..####..', '.#....#.', '#..##..#', '#.####.#', '#.####.#', '#..##..#', '.#....#.', '..####..'],
+  star:    ['...#....', '...#....', '..###...', '#######.', '..###...', '...#....', '...#....', '........'],
+  mail:    ['........', '########', '##....##', '#.#..#.#', '#..##..#', '#......#', '########', '........'],
+  stop:    ['........', '.######.', '.######.', '.######.', '.######.', '.######.', '.######.', '........'],
+  ufo:     ['........', '...##...', '..####..', '.######.', '########', '.#.##.#.', '..#..#..', '.#....#.'],
+  branch:  ['.#......', '.#...#..', '.#..###.', '.#...#..', '.#..#...', '.###....', '.#......', '.#......'],
+  check:   ['........', '.......#', '......##', '#....##.', '##..##..', '.####...', '..##....', '........'],
+  search:  ['..###...', '.#...#..', '#.....#.', '#.....#.', '.#...#..', '..####..', '......#.', '.......#'],
+  db:      ['.######.', '#......#', '.######.', '#......#', '.######.', '#......#', '.######.', '........'],
+  bell:    ['...##...', '..####..', '.######.', '.######.', '.######.', '########', '........', '...##...'],
+};
+
+// One run of lit pixels becomes one horizontal bar of the path, so a full row is a single
+// rectangle and not eight. Written out as markup like every other icon in this file, which also
+// keeps it off `createElementNS` — the replay harness has a document without it.
+function pixelPath(name) {
+  const rows = PIXEL_ICONS[name] ?? PIXEL_ICONS.list;
+  let d = '';
+  for (const [y, row] of rows.entries()) {
+    let run = 0;
+    for (let x = 0; x <= 8; x += 1) {
+      if (row[x] === '#') { run += 1; continue; }
+      if (run) d += `M${x - run} ${y}h${run}v1h-${run}z`;
+      run = 0;
+    }
+  }
+  return d;
+}
+
+// The icon carries no box: a badge around it was a second frame saying what the drawing says.
+function pixelIcon(name, className = 'pixel-icon') {
+  const holder = el('span', className);
+  holder.innerHTML = `<svg viewBox="0 0 8 8" aria-hidden="true"><path d="${pixelPath(name)}" fill="currentColor"/></svg>`;
+  return holder;
+}
+
+function folding(section, title, { key, open = false, badge = null, icon = 'list' } = {}) {
   const box = el('details', 'fold');
   box.dataset.fold = key;
   box.open = foldState()[key] ?? open;
   const head = el('summary');
+  head.append(pixelIcon(icon, 'pixel-icon fold-icon'));
   head.append(el('h3', null, title));
   if (badge) {
     const mark = el('span', 'fold-badge', badge.text ?? '');
@@ -6822,6 +7391,135 @@ function connectionCard(agent) {
   return card;
 }
 
+// MEMORY, emancipated. It used to be a fold inside CONNECTIONS, which is where you go to wire an
+// agent up — a different errand entirely. What the archive holds, who distils it and how well it
+// is answering is a subject of its own, so it gets its own button in the MU/TH/UR bar, beside
+// NOSTROMO, and the whole panel instead of a fold inside somebody else's.
+function renderMemoryPanel(data) {
+  if (!memoryUI.section) return;
+  memoryUI.section.replaceChildren();
+  const mem = data?.settings?.memory;
+  if (!mem) { memoryUI.section.append(el('p', 'mother-answer', t('THIS ROOM HAS NO MEMORY INDEX.'))); return; }
+  // It reads first and is configured second. The dashboard is what someone opens this screen to
+  // see, so it starts open; the knobs that change how the archive is kept sit under it. All three
+  // are folds like every other block of MU/TH/UR, so COLLAPSE ALL moves what is on the screen.
+  const board = el('div', 'mem-dash');
+  folding(memoryUI.section, t('MEMORY · THE ARCHIVE AT A GLANCE'), { key: 'memory-dashboard', icon: 'chip', open: true }).append(board);
+  void drawMemoryDashboard(board);
+  const memoryBody = folding(memoryUI.section, t('ARCHIVIST AND RECALL'), { key: 'memory-settings', icon: 'gear' });
+  memoryBody.append(el('p', 'note', t('THE ARCHIVIST READS WHAT NOBODY HAS DISTILLED AND KEEPS THE FEW NOTES WORTH REMEMBERING. THE CHEAPEST ALLOWED AGENT GOES FIRST; A LOCAL MODEL COSTS NOTHING AND KEEPS EVERYTHING ON THIS MACHINE.')));
+  const mform = el('form', 'room-form memory-form');
+  const save = async (memoryPatch, describe) => { try { await saveSettingNow({ memory: memoryPatch }, describe); await loadSettings(); } catch (error) { toast(t('Memory setting was not saved: {error}', { error: error.message })); } };
+  const field = (labelText, node) => { const label = el('label'); label.append(labelText); label.append(node); return label; };
+  const archivist = el('select');
+  for (const [value, text] of [['auto', t('AUTO · cheapest allowed')], ...mem.candidates.map((c) => [c.id, `@${c.id}${c.local ? ` · ${c.label}` : ''}`])]) { const option = el('option', null, text); option.value = value; if (value === mem.archivist) option.selected = true; archivist.append(option); }
+  archivist.addEventListener('change', () => save({ archivist: archivist.value }, archivist.value === 'auto' ? t('archivist: the cheapest allowed agent goes first.') : t('archivist: @{agent} distils first.', { agent: archivist.value })));
+  mform.append(field(t('ARCHIVIST'), archivist));
+  const every = el('input'); every.type = 'number'; every.min = '1'; every.step = '1'; every.value = String(mem.every);
+  wireInstantNumber(every, { min: 1, toPatch: (value) => ({ memory: { every: value } }), describe: (value) => t('distil every {n} exchanges.', { n: value }) });
+  mform.append(field(t('DISTIL EVERY · EXCHANGES'), every));
+  const idle = el('input'); idle.type = 'number'; idle.min = '1'; idle.step = '1'; idle.value = String(mem.idleMinutes);
+  wireInstantNumber(idle, { min: 1, toPatch: (value) => ({ memory: { idleMinutes: value } }), describe: (value) => t('or after {n} quiet minutes.', { n: value }) });
+  mform.append(field(t('OR AFTER · QUIET MINUTES'), idle));
+  const share = el('input'); share.type = 'number'; share.min = '0'; share.max = '60'; share.step = '5'; share.value = String(Math.round(mem.recallShare * 100));
+  wireInstantNumber(share, { min: 0, toPatch: (value) => ({ memory: { recallShare: Math.min(60, value) / 100 } }), describe: (value) => t("recall may take {n}% of each turn's context.", { n: Math.min(60, value) }) });
+  mform.append(field(t('RECALL · % OF CONTEXT'), share));
+  // Spreading activation. Two memories that keep arriving in the same turn are associated by
+  // the room's own work, not by how they read; a couple of slots in each recall are kept for
+  // that. It is the one part of recall that owes nothing to wording, so it can be switched off.
+  const cascade = el('label', 'toggle full');
+  const cascadeBox = el('input'); cascadeBox.type = 'checkbox'; cascadeBox.checked = mem.cascade !== false;
+  cascadeBox.addEventListener('change', () => save({ cascade: cascadeBox.checked }, cascadeBox.checked
+    ? t('recall also carries what a memory keeps arriving with.')
+    : t('recall carries only what the words and the meaning match.')));
+  cascade.append(cascadeBox, el('span', null, t('CARRY WHAT A MEMORY KEEPS ARRIVING WITH')));
+  cascade.title = t('Two memories that keep travelling into the same turn are associated, however differently they read. Recall keeps a couple of slots for that company; the search never loses a slot to it.');
+  mform.append(cascade);
+  const embed = el('select');
+  const embedOptions = [['auto', t('AUTO · Ollama if running, else Gemini')], ['ollama', `OLLAMA · ${t('local')}${mem.ollama.embedModel ? ` · ${mem.ollama.embedModel}` : t(' · no model yet')}`], ['gemini', t('GEMINI · needs your key')], ['off', t('OFF · words only')]];
+  for (const [value, text] of embedOptions) { const option = el('option', null, text); option.value = value; if (value === (mem.embedProvider ?? data.config?.memory?.embedProvider ?? 'auto')) option.selected = true; embed.append(option); }
+  embed.addEventListener('change', () => save({ embedProvider: embed.value }, t('embeddings: {what}.', { what: embed.options[embed.selectedIndex].textContent.toLowerCase() })));
+  const embedLabel = field(t('EMBEDDINGS · NOW {what}', { what: mem.embedder ? mem.embedder.toUpperCase() : 'OFF' }), embed);
+  mform.append(embedLabel);
+  const who = el('div', 'full');
+  who.append(el('span', 'note', t('MAY DISTIL:')));
+  const allowed = new Set(mem.archivists ?? mem.candidates.map((c) => c.id));
+  for (const candidate of mem.candidates) {
+    const toggle = el('label', 'toggle');
+    const box = el('input'); box.type = 'checkbox'; box.checked = allowed.has(candidate.id);
+    box.addEventListener('change', () => {
+      if (box.checked) allowed.add(candidate.id); else allowed.delete(candidate.id);
+      if (!allowed.size) { box.checked = true; allowed.add(candidate.id); toast(t('MU/TH/UR › someone has to keep the archive.')); return; }
+      void save({ archivists: allowed.size === mem.candidates.length ? [] : [...allowed] }, t('archivists: {who}.', { who: [...allowed].map((id) => `@${id}`).join(', ') }));
+    });
+    toggle.append(box, `@${candidate.id.toUpperCase()}${candidate.local ? t(' · LOCAL · FREE') : ''}`);
+    who.append(toggle);
+  }
+  mform.append(who);
+  if (mem.envWins) mform.append(el('span', 'note full', t('ENVIRONMENT VARIABLES ARE SET FOR MEMORY; THEY WIN OVER THESE VALUES ON THE NEXT LAUNCH.')));
+  mform.addEventListener('submit', (event) => event.preventDefault());
+  memoryBody.append(mform);
+  // The dataset behind MADRE AI and the recipe that trains on it: a separate errand from how
+  // the archive is kept, and the longest block on this screen, so it folds on its own.
+  const trainBody = folding(memoryUI.section, t('DATASET AND TRAINING'), { key: 'memory-train', icon: 'bars' });
+  const tform = el('div', 'room-form memory-form');
+  // The dataset behind MADRE AI: export what the room kept, train outside, @madre picks the result up.
+  const dataset = el('div', 'full dataset-row');
+  const exportButton = el('button', null, t('EXPORT DATASET'));
+  exportButton.type = 'button';
+  exportButton.title = t('Write train.jsonl and valid.jsonl next to the ledger, redacted, in chat format for mlx-lm');
+  const datasetNote = el('span', 'note', t('LOADING…'));
+  const showDataset = (payload) => {
+    const d = payload?.dataset;
+    const exported = d ? t('LAST EXPORT {when} · TRAIN {train} · VALID {valid}', { when: new Date(d.exportedAt).toLocaleString(), train: d.train, valid: d.valid }) : t('NOT EXPORTED YET');
+    const trained = payload?.trained ? t('TRAINED MODEL {model} IN USE', { model: payload.trained.toUpperCase() }) : t('NO TRAINED MODEL YET · SEE docs/training');
+    datasetNote.textContent = [exported, trained].filter(Boolean).join(' · ');
+  };
+  fetch('/api/dataset').then((response) => response.json()).then(showDataset).catch(() => { datasetNote.textContent = t('DATASET UNAVAILABLE'); });
+  exportButton.addEventListener('click', async () => {
+    exportButton.disabled = true;
+    try { const payload = await fetch('/api/dataset', { method: 'POST' }).then((response) => response.json()); showDataset(payload); toast(t('MU/TH/UR › dataset exported: {n} pairs in {dir}', { n: payload.dataset.pairs, dir: payload.dir })); }
+    catch (error) { toast(t('Dataset export failed: {error}', { error: error.message })); }
+    finally { exportButton.disabled = false; }
+  });
+  dataset.append(exportButton, datasetNote);
+  tform.append(dataset);
+  // TRAIN: the recipe, with this room's paths and this project's model name filled in. Training runs outside MADRE.
+  const train = el('div', 'full train-card');
+  const trainHead = el('div', 'train-head', t('TRAIN MADRE AI · LOCAL, WITH MLX ON APPLE SILICON · NOTHING LEAVES THIS MACHINE'));
+  const trainNote = el('p', 'note', t('EXPORT THE DATASET FIRST. EACH STEP IS ONE COMMAND FOR YOUR TERMINAL; COPY, RUN, COME BACK. WHEN THE MODEL EXISTS IN OLLAMA, @MADRE SWITCHES TO IT AT THE NEXT RECHECK AND EVERY AGENT IS TOLD TO ASK IT FIRST.'));
+  const steps = el('ol', 'train-steps');
+  train.append(trainHead, trainNote, steps);
+  const renderTraining = (payload) => {
+    // `info`, not `t`: t() is how this page speaks, and a local name that shadows it would
+    // take the language away from everything inside this function.
+    const info = payload?.training;
+    steps.replaceChildren();
+    if (!info) { steps.append(el('li', null, t('TRAINING INFO UNAVAILABLE'))); return; }
+    const quote = (path) => `"${path.replace(/\/$/, '')}"`;
+    const items = [
+      [t('ONCE · A PYTHON ENVIRONMENT WITH MLX-LM'), 'python3 -m venv ~/.madre-train && source ~/.madre-train/bin/activate && pip install mlx-lm'],
+      [t('TRAIN THE LORA · BASE {model} FOR {gb} GB', { model: info.baseModel, gb: info.memoryGb }), `source ~/.madre-train/bin/activate && bash ${quote(`${info.recipeDir}train.sh`)} ${quote(info.roomDir)} ${info.baseModel}`],
+      [t('FUSE THE ADAPTER INTO THE BASE'), `source ~/.madre-train/bin/activate && cd ${quote(info.roomDir)} && mlx_lm.fuse --model ${info.baseModel} --adapter-path adapters --save-path fused`],
+      [t('REGISTER IN OLLAMA AS {model}', { model: info.modelName }), `cd ${quote(info.roomDir)} && cp ${quote(`${info.recipeDir}Modelfile`)} . && ollama create ${info.modelName} -f Modelfile`],
+    ];
+    for (const [label, command] of items) {
+      const li = el('li');
+      const head = el('div', 'train-step-label', label);
+      const row = el('div', 'update-command');
+      const code = el('code', null, command);
+      const copy = el('button', null, t('COPY')); copy.type = 'button';
+      copy.addEventListener('click', async () => { try { await navigator.clipboard.writeText(command); copy.textContent = t('COPIED'); setTimeout(() => { copy.textContent = t('COPY'); }, 1400); } catch { toast(t('MU/TH/UR › select the command and copy it.')); } });
+      row.append(code, copy);
+      li.append(head, row);
+      steps.append(li);
+    }
+    steps.append(el('li', 'note', t('QWEN NEEDS A GGUF BEFORE OLLAMA READS IT: {readme} · SECTION 3 HAS THE TWO LINES. THEN ASK @MADRE TEN THINGS THE ROOM DECIDED AND FIVE IT NEVER DISCUSSED BEFORE TRUSTING IT.', { readme: quote(`${info.recipeDir}README.md`) })));
+  };
+  fetch('/api/dataset').then((response) => response.json()).then(renderTraining).catch(() => renderTraining(null));
+  tform.append(train);
+  trainBody.append(tform);
+}
 function renderSettings() {
   const { data } = settingsUI;
   if (!data) return;
@@ -6830,6 +7528,7 @@ function renderSettings() {
   const signedIn = Object.values(data.sessions ?? {}).filter((s) => s.state === 'signed-in').length;
   const out = data.agents.length - signedIn;
   const crew = folding(section, t('CONNECTIONS · {n} OF {total} SIGNED IN', { n: signedIn, total: data.agents.length }) + (data.sessionsAt ? t(' · CHECKED {time}', { time: formatTime(data.sessionsAt) }) : ''), {
+    icon: 'link',
     key: 'connections',
     badge: out > 0 ? { text: String(out), urgent: true, title: t('{n} agents with no session', { n: out }) } : null,
   });
@@ -6839,7 +7538,7 @@ function renderSettings() {
   for (const agent of data.agents) grid.append(connectionCard(agent));
   crew.append(grid);
 
-  const settingsBody = folding(section, t('ROOM SETTINGS'), { key: 'room-settings' });
+  const settingsBody = folding(section, t('ROOM SETTINGS'), { key: 'room-settings', icon: 'gear' });
   const form = el('form', 'room-form');
   const field = (labelText, node) => { const label = el('label'); label.append(labelText); label.append(node); return label; };
   const num = (name, value, min, step) => { const input = el('input'); input.type = 'number'; input.name = name; input.value = String(value); input.min = String(min); input.step = String(step); return input; };
@@ -6915,132 +7614,14 @@ function renderSettings() {
   });
   settingsBody.append(form);
 
-  // MEMORY: who distils, with whom, how often, where it embeds, how much recall a turn gets. Saves as you change it.
-  const mem = data.settings.memory;
-  if (mem) {
-    const memoryBody = folding(section, `${t('MEMORY')} · ${mem.stats ? t('{entries} EXCHANGES · {memories} MEMORIES · {pending} WAITING', { entries: mem.stats.entries, memories: mem.stats.memories, pending: mem.stats.pending }) : t('NO INDEX')}`, { key: 'memory' });
-    memoryBody.append(el('p', 'note', t('THE ARCHIVIST READS WHAT NOBODY HAS DISTILLED AND KEEPS THE FEW NOTES WORTH REMEMBERING. THE CHEAPEST ALLOWED AGENT GOES FIRST; A LOCAL MODEL COSTS NOTHING AND KEEPS EVERYTHING ON THIS MACHINE.')));
-    const mform = el('form', 'room-form memory-form');
-    const save = async (memoryPatch, describe) => { try { await saveSettingNow({ memory: memoryPatch }, describe); await loadSettings(); } catch (error) { toast(t('Memory setting was not saved: {error}', { error: error.message })); } };
-    const field = (labelText, node) => { const label = el('label'); label.append(labelText); label.append(node); return label; };
-    const archivist = el('select');
-    for (const [value, text] of [['auto', t('AUTO · cheapest allowed')], ...mem.candidates.map((c) => [c.id, `@${c.id}${c.local ? ` · ${c.label}` : ''}`])]) { const option = el('option', null, text); option.value = value; if (value === mem.archivist) option.selected = true; archivist.append(option); }
-    archivist.addEventListener('change', () => save({ archivist: archivist.value }, archivist.value === 'auto' ? t('archivist: the cheapest allowed agent goes first.') : t('archivist: @{agent} distils first.', { agent: archivist.value })));
-    mform.append(field(t('ARCHIVIST'), archivist));
-    const every = el('input'); every.type = 'number'; every.min = '1'; every.step = '1'; every.value = String(mem.every);
-    wireInstantNumber(every, { min: 1, toPatch: (value) => ({ memory: { every: value } }), describe: (value) => t('distil every {n} exchanges.', { n: value }) });
-    mform.append(field(t('DISTIL EVERY · EXCHANGES'), every));
-    const idle = el('input'); idle.type = 'number'; idle.min = '1'; idle.step = '1'; idle.value = String(mem.idleMinutes);
-    wireInstantNumber(idle, { min: 1, toPatch: (value) => ({ memory: { idleMinutes: value } }), describe: (value) => t('or after {n} quiet minutes.', { n: value }) });
-    mform.append(field(t('OR AFTER · QUIET MINUTES'), idle));
-    const share = el('input'); share.type = 'number'; share.min = '0'; share.max = '60'; share.step = '5'; share.value = String(Math.round(mem.recallShare * 100));
-    wireInstantNumber(share, { min: 0, toPatch: (value) => ({ memory: { recallShare: Math.min(60, value) / 100 } }), describe: (value) => t("recall may take {n}% of each turn's context.", { n: Math.min(60, value) }) });
-    mform.append(field(t('RECALL · % OF CONTEXT'), share));
-    // Spreading activation. Two memories that keep arriving in the same turn are associated by
-    // the room's own work, not by how they read; a couple of slots in each recall are kept for
-    // that. It is the one part of recall that owes nothing to wording, so it can be switched off.
-    const cascade = el('label', 'toggle full');
-    const cascadeBox = el('input'); cascadeBox.type = 'checkbox'; cascadeBox.checked = mem.cascade !== false;
-    cascadeBox.addEventListener('change', () => save({ cascade: cascadeBox.checked }, cascadeBox.checked
-      ? t('recall also carries what a memory keeps arriving with.')
-      : t('recall carries only what the words and the meaning match.')));
-    cascade.append(cascadeBox, el('span', null, t('CARRY WHAT A MEMORY KEEPS ARRIVING WITH')));
-    cascade.title = t('Two memories that keep travelling into the same turn are associated, however differently they read. Recall keeps a couple of slots for that company; the search never loses a slot to it.');
-    mform.append(cascade);
-    const embed = el('select');
-    const embedOptions = [['auto', t('AUTO · Ollama if running, else Gemini')], ['ollama', `OLLAMA · ${t('local')}${mem.ollama.embedModel ? ` · ${mem.ollama.embedModel}` : t(' · no model yet')}`], ['gemini', t('GEMINI · needs your key')], ['off', t('OFF · words only')]];
-    for (const [value, text] of embedOptions) { const option = el('option', null, text); option.value = value; if (value === (mem.embedProvider ?? data.config?.memory?.embedProvider ?? 'auto')) option.selected = true; embed.append(option); }
-    embed.addEventListener('change', () => save({ embedProvider: embed.value }, t('embeddings: {what}.', { what: embed.options[embed.selectedIndex].textContent.toLowerCase() })));
-    const embedLabel = field(t('EMBEDDINGS · NOW {what}', { what: mem.embedder ? mem.embedder.toUpperCase() : 'OFF' }), embed);
-    mform.append(embedLabel);
-    const who = el('div', 'full');
-    who.append(el('span', 'note', t('MAY DISTIL:')));
-    const allowed = new Set(mem.archivists ?? mem.candidates.map((c) => c.id));
-    for (const candidate of mem.candidates) {
-      const toggle = el('label', 'toggle');
-      const box = el('input'); box.type = 'checkbox'; box.checked = allowed.has(candidate.id);
-      box.addEventListener('change', () => {
-        if (box.checked) allowed.add(candidate.id); else allowed.delete(candidate.id);
-        if (!allowed.size) { box.checked = true; allowed.add(candidate.id); toast(t('MU/TH/UR › someone has to keep the archive.')); return; }
-        void save({ archivists: allowed.size === mem.candidates.length ? [] : [...allowed] }, t('archivists: {who}.', { who: [...allowed].map((id) => `@${id}`).join(', ') }));
-      });
-      toggle.append(box, `@${candidate.id.toUpperCase()}${candidate.local ? t(' · LOCAL · FREE') : ''}`);
-      who.append(toggle);
-    }
-    mform.append(who);
-    // The dataset behind MADRE AI: export what the room kept, train outside, @madre picks the result up.
-    const dataset = el('div', 'full dataset-row');
-    const exportButton = el('button', null, t('EXPORT DATASET'));
-    exportButton.type = 'button';
-    exportButton.title = t('Write train.jsonl and valid.jsonl next to the ledger, redacted, in chat format for mlx-lm');
-    const datasetNote = el('span', 'note', t('LOADING…'));
-    // How grown this archive is, read from what can actually be counted about it. It replaced a
-    // bar that filled toward a number borrowed from somebody else's paper: a room can reach that
-    // number and still be narrow, unjudged and lopsided, and the bar would have said it was ready.
-    const verdict = el('div', 'maturity');
-    const showDataset = (payload) => {
-      const d = payload?.dataset;
-      const exported = d ? t('LAST EXPORT {when} · TRAIN {train} · VALID {valid}', { when: new Date(d.exportedAt).toLocaleString(), train: d.train, valid: d.valid }) : t('NOT EXPORTED YET');
-      const trained = payload?.trained ? t('TRAINED MODEL {model} IN USE', { model: payload.trained.toUpperCase() }) : t('NO TRAINED MODEL YET · SEE docs/training');
-      datasetNote.textContent = [exported, trained].filter(Boolean).join(' · ');
-    };
-    fetch('/api/dataset').then((response) => response.json()).then(showDataset).catch(() => { datasetNote.textContent = t('DATASET UNAVAILABLE'); });
-    exportButton.addEventListener('click', async () => {
-      exportButton.disabled = true;
-      try { const payload = await fetch('/api/dataset', { method: 'POST' }).then((response) => response.json()); showDataset(payload); toast(t('MU/TH/UR › dataset exported: {n} pairs in {dir}', { n: payload.dataset.pairs, dir: payload.dir })); }
-      catch (error) { toast(t('Dataset export failed: {error}', { error: error.message })); }
-      finally { exportButton.disabled = false; }
-    });
-    dataset.append(exportButton, datasetNote);
-    mform.append(dataset);
-    memoryBody.append(verdict);
-    drawVerdict(verdict);
-
-
-    // TRAIN: the recipe, with this room's paths and this project's model name filled in. Training runs outside MADRE.
-    const train = el('div', 'full train-card');
-    const trainHead = el('div', 'train-head', t('TRAIN MADRE AI · LOCAL, WITH MLX ON APPLE SILICON · NOTHING LEAVES THIS MACHINE'));
-    const trainNote = el('p', 'note', t('EXPORT THE DATASET FIRST. EACH STEP IS ONE COMMAND FOR YOUR TERMINAL; COPY, RUN, COME BACK. WHEN THE MODEL EXISTS IN OLLAMA, @MADRE SWITCHES TO IT AT THE NEXT RECHECK AND EVERY AGENT IS TOLD TO ASK IT FIRST.'));
-    const steps = el('ol', 'train-steps');
-    train.append(trainHead, trainNote, steps);
-    const renderTraining = (payload) => {
-      // `info`, not `t`: t() is how this page speaks, and a local name that shadows it would
-      // take the language away from everything inside this function.
-      const info = payload?.training;
-      steps.replaceChildren();
-      if (!info) { steps.append(el('li', null, t('TRAINING INFO UNAVAILABLE'))); return; }
-      const quote = (path) => `"${path.replace(/\/$/, '')}"`;
-      const items = [
-        [t('ONCE · A PYTHON ENVIRONMENT WITH MLX-LM'), 'python3 -m venv ~/.madre-train && source ~/.madre-train/bin/activate && pip install mlx-lm'],
-        [t('TRAIN THE LORA · BASE {model} FOR {gb} GB', { model: info.baseModel, gb: info.memoryGb }), `source ~/.madre-train/bin/activate && bash ${quote(`${info.recipeDir}train.sh`)} ${quote(info.roomDir)} ${info.baseModel}`],
-        [t('FUSE THE ADAPTER INTO THE BASE'), `source ~/.madre-train/bin/activate && cd ${quote(info.roomDir)} && mlx_lm.fuse --model ${info.baseModel} --adapter-path adapters --save-path fused`],
-        [t('REGISTER IN OLLAMA AS {model}', { model: info.modelName }), `cd ${quote(info.roomDir)} && cp ${quote(`${info.recipeDir}Modelfile`)} . && ollama create ${info.modelName} -f Modelfile`],
-      ];
-      for (const [label, command] of items) {
-        const li = el('li');
-        const head = el('div', 'train-step-label', label);
-        const row = el('div', 'update-command');
-        const code = el('code', null, command);
-        const copy = el('button', null, t('COPY')); copy.type = 'button';
-        copy.addEventListener('click', async () => { try { await navigator.clipboard.writeText(command); copy.textContent = t('COPIED'); setTimeout(() => { copy.textContent = t('COPY'); }, 1400); } catch { toast(t('MU/TH/UR › select the command and copy it.')); } });
-        row.append(code, copy);
-        li.append(head, row);
-        steps.append(li);
-      }
-      steps.append(el('li', 'note', t('QWEN NEEDS A GGUF BEFORE OLLAMA READS IT: {readme} · SECTION 3 HAS THE TWO LINES. THEN ASK @MADRE TEN THINGS THE ROOM DECIDED AND FIVE IT NEVER DISCUSSED BEFORE TRUSTING IT.', { readme: quote(`${info.recipeDir}README.md`) })));
-    };
-    fetch('/api/dataset').then((response) => response.json()).then(renderTraining).catch(() => renderTraining(null));
-    mform.append(train);
-    if (mem.envWins) mform.append(el('span', 'note full', t('ENVIRONMENT VARIABLES ARE SET FOR MEMORY; THEY WIN OVER THESE VALUES ON THE NEXT LAUNCH.')));
-    mform.addEventListener('submit', (event) => event.preventDefault());
-    memoryBody.append(mform);
-  }
+  // MEMORY has its own panel now, rendered from this same answer.
+  renderMemoryPanel(data);
 
   // PRIVACY: terms that never travel through the room. Replaced at every hop: agent replies,
   // the index, the notes, the dataset. PURGE does the same to what the room already holds.
   const priv = data.settings.privacy;
   if (priv) {
-    const privacyBody = folding(section, `PRIVACY · ${priv.terms.length ? t('{n} PRIVATE TERMS', { n: priv.terms.length }) : t('NO PRIVATE TERMS')}`, { key: 'privacy' });
+    const privacyBody = folding(section, `PRIVACY · ${priv.terms.length ? t('{n} PRIVATE TERMS', { n: priv.terms.length }) : t('NO PRIVATE TERMS')}`, { key: 'privacy', icon: 'lock' });
     privacyBody.append(el('p', 'note', t('AN AGENT\'S OWN CONFIGURATION CAN LEAK INTO ITS REPLY: A COMPANY, A BRAND, A DOMAIN. NAME THEM HERE AND MADRE REPLACES THEM BEFORE THE LEDGER, THE ARCHIVIST, THE OTHER AGENTS OR THE DATASET SEE THEM. THE TERMS STAY IN CONFIG.JSON; THE ROOM ONLY EVER RECORDS HOW MANY.')));
     const pform = el('form', 'room-form privacy-form');
     const field = (labelText, node) => { const label = el('label'); label.append(labelText); label.append(node); return label; };
@@ -7341,6 +7922,13 @@ function paintLegend() {
     chip.title = `${DWARF_CLASS[kind]} · ${kindWord(kind)}`;
     chips.push(chip);
   }
+  // The zones do not get a palette of their own: the hue on a star is its kind and the chips above
+  // say so. What a zone changes is whether the star is lit, which is one more thing to name here
+  // rather than a second legend to read.
+  const dim = el('span', 'k dim');
+  dim.append(dwarfChip(hexMix(MEMORY_COLORS.fact, '#0b0f16', 0.52), 14), el('i', null, t('OUT OF CIRCULATION')));
+  dim.title = t('A faded star is in MED BAY or JETTISONED: the archive keeps it and never hands it to a turn.');
+  chips.push(dim);
   host.replaceChildren(...chips);
   host.dataset.lit = 'yes';
 }
@@ -7487,7 +8075,7 @@ function buildNostromo(data) {
     const angle = (sector / kinds.length) * Math.PI * 2 + ((index % 7) / 7 - 0.5) * (Math.PI / 2.4) + Math.random() * 0.2;
     const distance = 0.42 + Math.random() * 0.5;
     const span = Math.max(1, (memory.throughSequence ?? 0) - (memory.fromSequence ?? 0));
-    return { memory, cold: memory.cold ?? null, angle, distance, activity: activityOf(raw[index], top), lit: 0, charge: 0, x: 0, y: 0, vx: 0, vy: 0, r: MEMORY_SCALE * (7 + Math.min(11, Math.log2(span + 1) * 2.2 + memory.sources.length * 0.6)), scale: 1, seed: Math.random() * Math.PI * 2, rate: 0.5 + Math.random() * 0.9, color: MEMORY_COLORS[memory.kind] ?? MEMORY_COLORS.fact, placed: false };
+    return { memory, cold: memory.cold ?? null, angle, distance, activity: activityOf(raw[index], top), lit: 0, charge: 0, x: 0, y: 0, vx: 0, vy: 0, r: MEMORY_SCALE * (7 + Math.min(11, Math.log2(span + 1) * 2.2 + memory.sources.length * 0.6)), scale: 1, seed: Math.random() * Math.PI * 2, rate: 0.5 + Math.random() * 0.9, color: travels(memory) ? (MEMORY_COLORS[memory.kind] ?? MEMORY_COLORS.fact) : hexMix(MEMORY_COLORS[memory.kind] ?? MEMORY_COLORS.fact, '#0b0f16', 0.52), placed: false };
   });
   const stats = data.stats ?? {};
   const alive = memories.filter((memory) => Number(memory.recalled ?? 0) > 0).length;
@@ -7515,6 +8103,328 @@ function buildNostromo(data) {
 // camera maps the world to the canvas. The camera follows the whole system
 // until the human takes the wheel (drag, wheel), and RECENTER hands it back.
 const NOSTROMO_ORBIT = 300;
+
+// The archive is not a ball. It is the shape of the thing that holds it, seen from the side:
+// a brain, facing left. One function says how far the shell is at a given bearing, and BOTH the
+// first placement and the force that holds the system use it — which is the whole trick. The
+// ring force used to pull every memory onto a circle, so any shape given at placement was undone
+// within a second or two of physics. Shape the target and the shape is what the system settles
+// into instead of what it drifts away from.
+//
+// Bearings are canvas bearings: 0 points right (occipital, the back of the head), PI/2 points
+// DOWN (temporal lobe and cerebellum), PI points left (frontal pole), 3PI/2 points up (parietal,
+// the crown).
+function brainRadius(angle) {
+  const a = ((angle % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2);
+  const cos = Math.cos(a);
+  const sin = Math.sin(a);
+  // Wider than tall, which is what stops it reading as a circle before anything else is added.
+  let r = 1 / Math.hypot(cos / 1.0, sin / 0.78);
+  // The frontal pole is blunt and sits a little forward of a pure ellipse.
+  r += 0.07 * Math.max(0, -cos) ** 2;
+  // The base is flat: a brain rests on something. Everything below the midline comes in, most
+  // of all straight down.
+  r -= 0.13 * Math.max(0, sin) ** 1.6;
+  // The temporal lobe hangs at the lower front, separated from the frontal lobe above it.
+  r += 0.09 * Math.exp(-(((a - 2.45) / 0.42) ** 2));
+  // And the cerebellum is its own smaller mass at the lower back.
+  r += 0.12 * Math.exp(-(((a - 0.95) / 0.34) ** 2));
+  return r;
+}
+
+// The longitudinal fissure, the groove that makes two hemispheres out of one mass. It runs
+// front to back down the middle, so it lies in depth: invisible from the side, plain the moment
+// the brain is turned to face you. A density gap rather than a wall, half as wide as this, in
+// orbit units: memories are nudged out of it and never across it.
+const FISSURE = 0.07;
+
+// ---- The third dimension.
+//
+// The archive is a body, not a drawing of one. Every memory lives at (wx, wy, wz): the outline
+// above is the brain seen from the side, and BRAIN_WIDTH says how far it reaches toward each
+// temple. The physics runs there. Each frame the whole body is turned by the human's hand and
+// projected, and the projection is written into x and y, so everything that draws, links,
+// sends pulses or answers a click keeps working on the screen it always worked on.
+const BRAIN_WIDTH = 0.84;      // ear to ear, against front to back
+const VIEW_DISTANCE = 1500;    // world units from the eye to MOTHER: enough to read depth, not to distort
+const PITCH_LIMIT = 1.1;       // the head tips forward and back, never over
+const TURN_PER_PIXEL = 0.008;
+const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+// How deep under the surface a memory sits. Thin, on purpose: a thick shell fills the outline in
+// and the brain becomes a disc; a thin one leaves the silhouette to the memories along its edge.
+const shellDepth = (node) => 1.12 + node.distance * 0.18;
+const frac = (value) => value - Math.floor(value);
+
+// ---- Forgetting.
+//
+// A memory that is forgotten is not switched off: the universe takes it. It swells once, a last
+// breath; a horizon opens where it was, light bending round its rim; what it was made of falls
+// in, spiralling faster the closer it gets and drawn out into threads; the body collapses, there
+// is one point of light as it goes, and a faint ring runs out into the dark and is gone. Its
+// links do not snap. They come apart into dust, from its end outward like a wave, and the dust
+// drifts off into the field, glinting, and goes out. Aberrations go the same way.
+const IMPLOSION = 2.4;          // seconds, from the last breath to nothing
+const DUST_CAP = 1400;          // a ceiling, so forgetting a hub does not cost a frame
+const DEBRIS = 40;
+
+// How big the body still is, 0..1 of the way through: a swell, then a collapse that accelerates.
+function implosionScale(p) {
+  if (p < 0.12) return 1 + 0.22 * Math.sin((p / 0.12) * (Math.PI / 2));
+  if (p < 0.62) return 1.22 * (1 - ((p - 0.12) / 0.5) ** 2.2);
+  return 0;
+}
+
+// Points along a wire, as the curve it is drawn with, with where along it each one is.
+function wireDust(x0, y0, cx, cy, x1, y1, from, to, born, count) {
+  const out = [];
+  for (let i = 0; i < count; i += 1) {
+    const u = (i + Math.random()) / count;
+    const at = alongCurve(x0, y0, cx, cy, x1, y1, u);
+    const drift = 0.25 + Math.random() * 0.55;
+    const heading = Math.random() * Math.PI * 2;
+    out.push({
+      x: at.x, y: at.y, vx: Math.cos(heading) * drift, vy: Math.sin(heading) * drift,
+      // The wave runs from the forgotten end outward: dust is born where it has reached.
+      born: born + 0.15 + 0.55 * u, life: 1.4 + Math.random() * 1.8,
+      size: 0.6 + Math.random() * 1.3, colour: hexMix(from, to, u), phase: Math.random() * 6.3,
+    });
+  }
+  return out;
+}
+
+function beginImplosion(node, t) {
+  node.forgetting = { at: t };
+  node.debris = Array.from({ length: DEBRIS }, () => ({ a: Math.random() * Math.PI * 2, d: 1.4 + Math.random() * 2.8, w: 0.5 + Math.random() * 1.5, s: 0.6 + Math.random() * 0.9 }));
+  const id = node.memory.id;
+  const byId = new Map(nostromo.nodes.map((other) => [other.memory.id, other]));
+  const dust = nostromo.dust ?? (nostromo.dust = []);
+  const fading = nostromo.fading ?? (nostromo.fading = []);
+  const wires = [];
+  for (const link of nostromo.links) {
+    if (link.a !== id && link.b !== id) continue;
+    const other = byId.get(link.a === id ? link.b : link.a);
+    if (!other) continue;
+    wires.push({ x0: node.x, y0: node.y, cx: link.cx ?? (node.x + other.x) / 2, cy: link.cy ?? (node.y + other.y) / 2, x1: other.x, y1: other.y, from: node.color, to: other.color });
+  }
+  // The wire from MOTHER, too: it comes apart from the memory's end back toward her.
+  if (node.rimX !== undefined) wires.push({ x0: node.x, y0: node.y, cx: node.cx ?? node.x / 2, cy: node.cy ?? node.y / 2, x1: node.rimX, y1: node.rimY, from: node.color, to: '#e22816' });
+  for (const wire of wires) {
+    const length = Math.hypot(wire.x1 - wire.x0, wire.y1 - wire.y0);
+    const count = Math.max(8, Math.min(60, Math.round(length / 9)));
+    if (dust.length < DUST_CAP) dust.push(...wireDust(wire.x0, wire.y0, wire.cx, wire.cy, wire.x1, wire.y1, wire.from, wire.to, t, count));
+    fading.push({ ...wire, born: t });
+  }
+  nostromo.links = nostromo.links.filter((link) => link.a !== id && link.b !== id);
+  nostromo.witness = node;
+}
+
+function drawImplosion(ctx, node, t, scale, reduced) {
+  const p = Math.min(1, (t - node.forgetting.at) / IMPLOSION);
+  const R0 = node.r;
+  const x = node.x;
+  const y = node.y;
+  const px = 1 / scale;
+  ctx.save();
+  // The horizon: a disc of nothing that opens as the body begins to go and closes after it.
+  const open = p < 0.38 ? smooth(0.06, 0.38, p) : 1 - smooth(0.5, 0.82, p);
+  if (open > 0.01) {
+    const hole = R0 * 0.95 * open;
+    const dark = ctx.createRadialGradient(x, y, 0, x, y, hole * 1.15);
+    dark.addColorStop(0, 'rgba(0, 0, 0, 1)');
+    dark.addColorStop(0.82, 'rgba(0, 0, 0, .96)');
+    dark.addColorStop(1, 'rgba(0, 0, 0, 0)');
+    ctx.fillStyle = dark;
+    ctx.beginPath(); ctx.arc(x, y, hole * 1.15, 0, Math.PI * 2); ctx.fill();
+    // Light bent round its rim, in arcs that turn and do not quite close.
+    ctx.globalCompositeOperation = 'lighter';
+    ctx.lineCap = 'round';
+    for (let k = 0; k < 3; k += 1) {
+      const from = (reduced ? 0 : t * (2.4 + k * 0.7)) + k * 2.1;
+      ctx.strokeStyle = k === 1 ? hexAlpha(node.color, 0.7 * open) : `rgba(214, 228, 255, ${0.55 * open})`;
+      ctx.lineWidth = (1.6 - 0.35 * k) * px;
+      ctx.beginPath(); ctx.arc(x, y, hole * (1.06 + 0.05 * k), from, from + 1.6 + 0.6 * Math.sin(t + k)); ctx.stroke();
+    }
+  }
+  ctx.globalCompositeOperation = 'lighter';
+  // What it was made of, falling in: faster the closer it gets, drawn out into threads.
+  if (!reduced && p < 0.66) {
+    const fall = Math.min(1, p / 0.62);
+    const where = (bit, f) => {
+      const reach = R0 * bit.d * (1 - f) ** 1.4;
+      const angle = bit.a + (bit.w * f * 3.2) / (0.12 + (1 - f));
+      return [x + Math.cos(angle) * reach, y + Math.sin(angle) * reach];
+    };
+    ctx.lineCap = 'round';
+    for (const bit of node.debris ?? []) {
+      const f = Math.min(1, fall * bit.s + fall * (1 - bit.s) * fall);
+      const alpha = Math.min(1, f * 7) * (1 - smooth(0.82, 1, f));
+      if (alpha <= 0.01) continue;
+      const [ax, ay] = where(bit, Math.max(0, f - 0.05));
+      const [bx, by] = where(bit, f);
+      ctx.strokeStyle = hexAlpha(hexMix(node.color, '#ffffff', f), 0.85 * alpha);
+      ctx.lineWidth = (0.8 + 1.2 * f) * px;
+      ctx.beginPath(); ctx.moveTo(ax, ay); ctx.lineTo(bx, by); ctx.stroke();
+    }
+  }
+  // The point of light as it goes, and the ring that runs out into the dark.
+  const gone = p - 0.6;
+  if (gone > 0 && gone < 0.2) {
+    const flash = (1 - gone / 0.2) ** 2;
+    const glow = ctx.createRadialGradient(x, y, 0, x, y, R0 * (0.6 + gone * 14));
+    glow.addColorStop(0, `rgba(255, 255, 255, ${flash})`);
+    glow.addColorStop(0.25, hexAlpha(hexMix(node.color, '#ffffff', 0.6), 0.6 * flash));
+    glow.addColorStop(1, hexAlpha(node.color, 0));
+    ctx.fillStyle = glow;
+    ctx.beginPath(); ctx.arc(x, y, R0 * (0.6 + gone * 14), 0, Math.PI * 2); ctx.fill();
+  }
+  if (gone > 0) {
+    const q = gone / 0.4;
+    ctx.strokeStyle = `rgba(206, 222, 255, ${0.32 * (1 - q) ** 1.5})`;
+    ctx.lineWidth = (1.4 * (1 - q) + 0.3) * px;
+    ctx.beginPath(); ctx.arc(x, y, R0 * (1 + q * 16), 0, Math.PI * 2); ctx.stroke();
+  }
+  ctx.restore();
+}
+
+// The links coming apart: what is left of each wire, beyond the wave, and the dust behind it.
+function drawDust(ctx, t, scale) {
+  const px = 1 / scale;
+  ctx.save();
+  ctx.globalCompositeOperation = 'lighter';
+  for (const wire of nostromo.fading ?? []) {
+    const age = t - wire.born;
+    const wave = Math.min(1, Math.max(0, (age - 0.15) / 0.55));
+    const fade = 1 - smooth(0.5, 1.2, age);
+    if (fade <= 0 || wave >= 1) continue;
+    const line = ctx.createLinearGradient(wire.x0, wire.y0, wire.x1, wire.y1);
+    line.addColorStop(0, hexAlpha(wire.from, 0));
+    line.addColorStop(Math.min(0.999, wave + 0.001), hexAlpha(wire.from, 0));
+    line.addColorStop(Math.min(1, wave + 0.06), hexAlpha(hexMix(wire.from, wire.to, wave), 0.55 * fade));
+    line.addColorStop(1, hexAlpha(wire.to, 0.45 * fade));
+    ctx.strokeStyle = line;
+    ctx.lineWidth = 0.9 * px;
+    ctx.beginPath(); ctx.moveTo(wire.x0, wire.y0); ctx.quadraticCurveTo(wire.cx, wire.cy, wire.x1, wire.y1); ctx.stroke();
+  }
+  for (const mote of nostromo.dust ?? []) {
+    const age = t - mote.born;
+    if (age < 0 || age >= mote.life) continue;
+    const glint = 0.55 + 0.45 * Math.sin(t * 9 + mote.phase);
+    const alpha = Math.min(1, age * 8) * (1 - age / mote.life) ** 1.5 * glint;
+    if (alpha <= 0.01) continue;
+    ctx.fillStyle = hexAlpha(mote.colour, Math.min(1, alpha));
+    ctx.beginPath(); ctx.arc(mote.x, mote.y, mote.size * px, 0, Math.PI * 2); ctx.fill();
+  }
+  ctx.restore();
+}
+
+// ---- The sight.
+//
+// What marks a dwarf under the pointer and a dwarf that has been chosen: a gunsight, the way a
+// fighter's head-up display draws one. Four corner brackets that close in on the target when it
+// is chosen, a broken ring turning around it, range ticks at the four bearings and the lock
+// written beside it. The pointer gets the brackets only, dimmer: a sight that is looking, not
+// one that has locked. Drawn in the world but sized in screen pixels, so it reads the same at
+// every zoom.
+const HUD_GREEN = '57, 255, 110';
+// Written out here and not inside the renderer, where `t` is the clock and not the language.
+const lockedLabel = (memory) => `${t('TARGET LOCKED')} · #${memory.id}`;
+function drawSight(ctx, x, y, radius, t, scale, { locked = false, age = 1, label = '', still = false } = {}) {
+  const px = 1 / scale;
+  const close = locked ? 1 - (1 - Math.min(1, age / 0.35)) ** 3 : 1;
+  const R = radius + 9 * px + (1 - close) * 46 * px;
+  const blink = locked && age < 0.45 ? (Math.floor(age * 14) % 2 ? 0.35 : 1) : 1;
+  const alpha = (locked ? 0.95 : 0.5) * blink;
+  const arm = Math.max(7 * px, R * 0.34);
+  ctx.save();
+  ctx.lineCap = 'square';
+  ctx.shadowColor = `rgba(${HUD_GREEN}, .7)`;
+  ctx.shadowBlur = locked ? 6 : 3;
+  ctx.strokeStyle = `rgba(${HUD_GREEN}, ${alpha})`;
+  ctx.lineWidth = (locked ? 1.6 : 1.1) * px;
+  ctx.beginPath();
+  for (const [sx, sy] of [[-1, -1], [1, -1], [1, 1], [-1, 1]]) {
+    ctx.moveTo(x + sx * R, y + sy * (R - arm));
+    ctx.lineTo(x + sx * R, y + sy * R);
+    ctx.lineTo(x + sx * (R - arm), y + sy * R);
+  }
+  ctx.stroke();
+  if (locked) {
+    // The broken ring, turning; and the ticks at the four bearings.
+    const ring = R * 1.22;
+    const spin = still ? 0 : t * 0.6;
+    ctx.lineWidth = 1.1 * px;
+    ctx.strokeStyle = `rgba(${HUD_GREEN}, ${0.7 * blink})`;
+    for (let k = 0; k < 4; k += 1) {
+      const from = spin + k * (Math.PI / 2) + 0.22;
+      ctx.beginPath(); ctx.arc(x, y, ring, from, from + Math.PI / 2 - 0.44); ctx.stroke();
+    }
+    ctx.beginPath();
+    for (const [dx, dy] of [[0, -1], [1, 0], [0, 1], [-1, 0]]) {
+      ctx.moveTo(x + dx * ring * 1.08, y + dy * ring * 1.08);
+      ctx.lineTo(x + dx * (ring * 1.08 + 9 * px), y + dy * (ring * 1.08 + 9 * px));
+    }
+    ctx.stroke();
+    if (label) {
+      ctx.shadowBlur = 0;
+      ctx.font = `${10 * px}px ${getComputedStyle(nostromo.canvas).getPropertyValue('--mono') || 'monospace'}`;
+      ctx.fillStyle = `rgba(${HUD_GREEN}, ${0.9 * blink})`;
+      ctx.fillText(label, x + R + 6 * px, y - R + 3 * px);
+    }
+  }
+  ctx.restore();
+}
+
+// ---- Focus.
+//
+// Choosing a dwarf turns the archive in the hand until that dwarf faces you, brings the camera
+// to it and lets everything else fall back into the dark, so the one being read is the one that
+// is seen. Dragging while it is held hands the turning back to the human; letting it go brings
+// the rest of the archive back up.
+const FOCUS_TURN = 0.07;      // how much of the remaining turn is taken each frame
+const FOCUS_VEIL = 0.7;       // how far everything else falls back
+
+function focusNostromo(dt, t) {
+  // A memory being forgotten keeps the stage until it is gone: the dark stays down around it.
+  const witness = nostromo.witness?.forgetting && nostromo.nodes.includes(nostromo.witness) ? nostromo.witness : null;
+  const held = (nostromo.selected && nostromo.nodes.includes(nostromo.selected) ? nostromo.selected : null) ?? witness;
+  const lock = nostromo.lock ?? (nostromo.lock = { node: null, at: 0, fade: 0, aim: false });
+  if (held && held !== lock.node) { lock.node = held; lock.at = t; lock.aim = held === nostromo.selected; }
+  if (held?.forgetting) lock.aim = false;
+  lock.fade += ((held ? 1 : 0) - lock.fade) * Math.min(1, 0.12 * dt);
+  if (!held) { lock.aim = false; if (lock.fade < 0.01) lock.node = null; }
+  if (!lock.aim || !held || held.wx === undefined) return;
+  // The turn that brings this dwarf to face the eye: about the vertical axis until it sits on
+  // the line of sight, then tipped until it is level with it.
+  const across = Math.hypot(held.wx, held.wz) || 1;
+  const yawTo = Math.atan2(-held.wx, held.wz);
+  const pitchTo = Math.max(-PITCH_LIMIT, Math.min(PITCH_LIMIT, Math.atan2(held.wy, across)));
+  const yaw = nostromo.yaw ?? 0;
+  const short = ((yawTo - yaw + Math.PI) % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2) - Math.PI;
+  const step = Math.min(1, FOCUS_TURN * dt);
+  nostromo.yaw = yaw + short * step;
+  nostromo.pitch = (nostromo.pitch ?? 0) + (pitchTo - (nostromo.pitch ?? 0)) * step;
+}
+
+function projectNostromo() {
+  const yaw = nostromo.yaw ?? 0;
+  const pitch = nostromo.pitch ?? 0;
+  const cy = Math.cos(yaw), sy = Math.sin(yaw), cp = Math.cos(pitch), sp = Math.sin(pitch);
+  for (const node of nostromo.nodes) {
+    if (node.wx === undefined) { node.wx = node.x; node.wy = node.y; node.wz = 0; }
+    node.r3 ??= node.r;
+    // Turned about the vertical axis, then tipped about the horizontal one: the same order the
+    // core's own longitude and lean are applied in, so the star and the body turn as one thing.
+    const x1 = node.wx * cy + node.wz * sy;
+    const z1 = node.wz * cy - node.wx * sy;
+    const y2 = node.wy * cp - z1 * sp;
+    const z2 = node.wy * sp + z1 * cp;
+    const near = VIEW_DISTANCE / Math.max(200, VIEW_DISTANCE - z2);
+    node.x = x1 * near;
+    node.y = y2 * near;
+    node.depth = z2;
+    node.r = node.r3 * near;
+  }
+}
 const HEART_PERIOD = 1.15;   // seconds per beat: slow, deliberate, alive
 const WAVE_SPEED = 260;      // world units per second a beat travels outward
 
@@ -7526,11 +8436,28 @@ function sizeNostromo() {
   nostromo.size = { w: rect.width, h: rect.height, dpr };
   canvas.width = Math.round(rect.width * dpr);
   canvas.height = Math.round(rect.height * dpr);
-  for (const node of nostromo.nodes) {
-    if (node.placed) continue;
-    const radius = NOSTROMO_ORBIT * (0.92 + node.distance * 0.7);
-    node.x = Math.cos(node.angle) * radius;
-    node.y = Math.sin(node.angle) * radius;
+  // Spread evenly over the whole surface, so no part of the brain is bald and none is a crowd.
+  // In the plane a crowd pushed itself round the ring; in a body it escapes into depth instead
+  // and stays where it started, so the start has to be even already. A golden-angle spiral runs
+  // from the frontal pole to the back of the head, and the memories walk it grouped by kind:
+  // each kind takes a band of its own, a lobe as wide as it has memories.
+  const kinds = Object.keys(MEMORY_COLORS);
+  const waiting = nostromo.nodes.filter((node) => !node.placed)
+    .sort((a, b) => (kinds.indexOf(a.memory.kind) - kinds.indexOf(b.memory.kind)) || (a.angle - b.angle));
+  for (const [i, node] of waiting.entries()) {
+    const along = 1 - (2 * (i + 0.5)) / waiting.length;
+    const ring = Math.sqrt(1 - along * along);
+    const turn = i * GOLDEN_ANGLE;
+    let ux = -along;
+    let uy = ring * Math.cos(turn);
+    let uz = ring * Math.sin(turn);
+    // Never on the midline, where the fissure is.
+    if (Math.abs(uz) < FISSURE) { uz = Math.sign(uz || 1) * FISSURE; const fit = Math.hypot(ux, uy, uz); ux /= fit; uy /= fit; uz /= fit; }
+    const radius = NOSTROMO_ORBIT * brainRadius(Math.atan2(uy, ux)) * shellDepth(node);
+    node.wx = ux * radius;
+    node.wy = uy * radius;
+    node.wz = uz * BRAIN_WIDTH * radius;
+    node.wvx = 0; node.wvy = 0; node.wvz = 0;
     node.placed = true;
   }
   return true;
@@ -7541,6 +8468,9 @@ function startNostromo() {
   if (typeof requestAnimationFrame !== 'function' || !nostromo.canvas?.getContext) return;
   if (!sizeNostromo()) return;
   nostromo.cam = { x: 0, y: 0, scale: 1, manual: false };
+  // Every boarding starts from the side view, the way the camera starts from the whole system.
+  nostromo.yaw = 0;
+  nostromo.pitch = 0;
   nostromo.rings = [];
   nostromo.lastPhase = 0;
   nostromo.alarm = null;
@@ -7552,6 +8482,8 @@ function startNostromo() {
     nostromo.last = now;
     const clock = now / 1000;
     stepNostromo(dt, clock);
+    focusNostromo(dt, clock);
+    projectNostromo();
     fitNostromo();
     drawNostromo(clock);
     nostromo.raf = requestAnimationFrame(frame);
@@ -7648,6 +8580,10 @@ const CIRCLE_SIN = Array.from({ length: CIRCLE_STEPS + 1 }, (_, k) => Math.sin((
 // strip is built per class, the first time that class is asked for, and every memory of that
 // class wears it. The strip repeats left to right, so a body can turn inside it without a seam.
 const dwarfSkins = new Map();
+// A dwarf's face is laid on in columns across its width, each as wide as a sphere is at that
+// longitude: the sine of evenly spaced longitudes from one limb to the other.
+const SKIN_COLUMNS = 8;
+const SKIN_EDGES = Array.from({ length: SKIN_COLUMNS + 1 }, (_, k) => Math.sin(-Math.PI / 2 + (k / SKIN_COLUMNS) * Math.PI));
 function dwarfTexture(hex) {
   if (dwarfSkins.has(hex)) return dwarfSkins.get(hex);
   let skin = null;
@@ -7697,6 +8633,497 @@ function dwarfTexture(hex) {
   return skin;
 }
 
+// ---- A dwarf, drawn the way a star looks.
+//
+// A dwarf makes its own light, so nothing out here lights it and nothing shades it: there is
+// no side turned away. What makes it round is what makes the Sun round in a white-light photo.
+//
+//   Limb darkening. The disc is brightest in the middle and dims toward the edge, the same all
+//   the way round: at the limb the eye sees into higher, cooler gas. It dims more in blue than
+//   in red, so the edge is also warmer than the centre.
+//   Granulation. The surface is cells: hot plasma rising in bright cores, cooling gas sinking in
+//   the dark lanes between them. Seen toward the limb the cells foreshorten and the pattern fades.
+//   Spots. A dark umbra inside a paler penumbra, where the field holds the heat down.
+//   Faculae. Bright patches around the spots, plain near the limb and nearly lost in the middle.
+//
+// Each class wears these in its own proportion: a white dwarf is smooth and white-hot, a yellow
+// one is a sun with granules and spots. The surface is a map of the whole body in latitude and
+// longitude, built once per class from noise sampled on the sphere itself, so it has no seam and
+// nothing stretches at the poles; turning the body is sliding along it. How hard a dwarf burns
+// is how much the room has made of it, as before.
+//
+// The geometry of a disc of a given size is worked out once and kept. A body is painted again
+// only when it has turned or changed enough to show.
+const ALBEDO_W = 256;
+const ALBEDO_H = 128;
+// How much each channel dims at the limb, red to blue: the blue dims most.
+const LIMB_DARKENING = [0.68, 0.8, 0.9];
+// What each class of dwarf is made of. `granules` is how strongly the cells show, `spots` how
+// many of them are marked, `faculae` how bright the patches around them are, `white` how far the
+// centre runs toward white, `power` how much light it gives for its size: a white dwarf is the
+// smallest and the most intense. A class not named here is drawn as a sun.
+const STAR_TRAITS = {
+  decision: { granules: 1, spots: 1, faculae: 1, white: 0.5, power: 1 },
+  fact: { granules: 0.3, spots: 0, faculae: 0.35, white: 0.9, power: 1.35 },
+  preference: { granules: 0.9, spots: 0.7, faculae: 0.9, white: 0.45, power: 1 },
+  question: { granules: 0.7, spots: 0.4, faculae: 0.7, white: 0.65, power: 1.15 },
+};
+const SUN_TRAITS = { granules: 0.8, spots: 0.6, faculae: 0.8, white: 0.5, power: 1 };
+// And what a memory's standing does to that surface. A dwarf you confirmed is clean; one nobody
+// has judged carries its class's spots; one held as false is blotched, the spots spreading as
+// `reach` drops; one put out of circulation is the worst of all. `faculae` scales the bright
+// patches. A dwarf the archive has never once carried is cooling: its granules barely move, it
+// gives less light (`glow`) and its middle is no longer white-hot (`white`).
+const SURFACE_BY_ZONE = {
+  bridge: { spots: 0, reach: 0.77, faculae: 1.3 },
+  hold: { spots: 1, reach: 0.77, faculae: 1 },
+  medbay: { spots: 1, reach: 0.67, faculae: 0.55, sick: true },
+  jettisoned: { spots: 1, reach: 0.62, faculae: 0.3, sick: true },
+};
+const COLD_GRANULES = 0.3;
+const COLD_GLOW = 0.55;
+const COLD_WHITE = 0.2;
+function surfaceOf(memory, traits = SUN_TRAITS, cold = false) {
+  const zone = SURFACE_BY_ZONE[memory?.zone ?? 'hold'] ?? SURFACE_BY_ZONE.hold;
+  return {
+    spots: zone.sick ? 1 : traits.spots * zone.spots,
+    reach: zone.reach,
+    faculae: traits.faculae * zone.faculae,
+    granules: traits.granules * (cold ? COLD_GRANULES : 1),
+    glow: cold ? COLD_GLOW : 1,
+    white: cold ? COLD_WHITE : 1,
+  };
+}
+const dwarfAlbedos = new Map();
+const sphereTables = new Map();
+
+// Gradient noise, the improved kind: continuous in every direction, with no grid showing
+// through it the way value noise shows its cells. The permutation is fixed, so every room grows
+// the same surfaces.
+const NOISE_PERM = (() => {
+  const order = Array.from({ length: 256 }, (_, i) => i);
+  let seed = 1013;
+  for (let i = 255; i > 0; i -= 1) {
+    seed = (seed * 16807) % 2147483647;
+    const j = seed % (i + 1);
+    [order[i], order[j]] = [order[j], order[i]];
+  }
+  return Uint8Array.from([...order, ...order]);
+})();
+function gradientNoise(x, y, z) {
+  const P = NOISE_PERM;
+  const X = Math.floor(x) & 255, Y = Math.floor(y) & 255, Z = Math.floor(z) & 255;
+  x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
+  const fade = (t) => t * t * t * (t * (t * 6 - 15) + 10);
+  const u = fade(x), v = fade(y), w = fade(z);
+  const grad = (hash, gx, gy, gz) => {
+    const h = hash & 15;
+    const a = h < 8 ? gx : gy;
+    const b = h < 4 ? gy : h === 12 || h === 14 ? gx : gz;
+    return ((h & 1) ? -a : a) + ((h & 2) ? -b : b);
+  };
+  const lerp = (t, a, b) => a + t * (b - a);
+  const A = P[X] + Y, AA = P[A] + Z, AB = P[A + 1] + Z, B = P[X + 1] + Y, BA = P[B] + Z, BB = P[B + 1] + Z;
+  return lerp(w,
+    lerp(v, lerp(u, grad(P[AA], x, y, z), grad(P[BA], x - 1, y, z)), lerp(u, grad(P[AB], x, y - 1, z), grad(P[BB], x - 1, y - 1, z))),
+    lerp(v, lerp(u, grad(P[AA + 1], x, y, z - 1), grad(P[BA + 1], x - 1, y, z - 1)), lerp(u, grad(P[AB + 1], x, y - 1, z - 1), grad(P[BB + 1], x - 1, y - 1, z - 1))));
+}
+// Octaves of it, folded into 0..1.
+function fractalNoise(x, y, z, octaves) {
+  let sum = 0, amp = 0.5, freq = 1, norm = 0;
+  for (let i = 0; i < octaves; i += 1) { sum += amp * gradientNoise(x * freq, y * freq, z * freq); norm += amp; amp *= 0.5; freq *= 2.03; }
+  return 0.5 + 0.5 * Math.max(-1, Math.min(1, (sum / norm) * 1.6));
+}
+// Cellular noise: the distance to the nearest and the second nearest of a scatter of points,
+// one jittered into each unit cell. Where the two are nearly equal is the border between two
+// cells, which is exactly the shape of a granule's dark lane.
+function cellNoise(x, y, z) {
+  const P = NOISE_PERM;
+  const xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z);
+  let near = 9, next = 9;
+  for (let dx = -1; dx <= 1; dx += 1) for (let dy = -1; dy <= 1; dy += 1) for (let dz = -1; dz <= 1; dz += 1) {
+    const h = P[(P[(P[(xi + dx) & 255] + ((yi + dy) & 255)) & 255] + ((zi + dz) & 255)) & 255];
+    const ox = xi + dx + P[h] / 255 - x;
+    const oy = yi + dy + P[(h + 85) & 255] / 255 - y;
+    const oz = zi + dz + P[(h + 170) & 255] / 255 - z;
+    const d = ox * ox + oy * oy + oz * oz;
+    if (d < near) { next = near; near = d; } else if (d < next) next = d;
+  }
+  return [Math.sqrt(near), Math.sqrt(next)];
+}
+const smooth = (a, b, x) => { const t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t); };
+
+// The whole surface of one class: how bright the granulation is at each texel, and how strong
+// the magnetic field is there. Spots and faculae are read from the field when a dwarf is
+// painted, so how many a dwarf shows can follow the memory's standing instead of being baked in.
+// Each class has a surface of its own. Built a band of rows at a time when asked to be (`rows`),
+// so the work can be spread over frames; the map is handed out only once it is whole.
+function dwarfAlbedo(kind, rows = ALBEDO_H) {
+  let build = dwarfAlbedos.get(kind);
+  if (build?.done) return build.map;
+  if (!build) {
+    const offset = [...String(kind)].reduce((sum, letter) => sum + letter.charCodeAt(0), 0) * 0.37;
+    build = { offset, map: new Float32Array(ALBEDO_W * ALBEDO_H * 2), next: 0, done: false };
+    dwarfAlbedos.set(kind, build);
+  }
+  const { offset, map } = build;
+  const until = Math.min(ALBEDO_H, build.next + rows);
+  for (let row = build.next; row < until; row += 1) {
+    const lat = ((row + 0.5) / ALBEDO_H - 0.5) * Math.PI;
+    const cl = Math.cos(lat), sl = Math.sin(lat);
+    for (let col = 0; col < ALBEDO_W; col += 1) {
+      const lon = ((col + 0.5) / ALBEDO_W) * Math.PI * 2;
+      const px = cl * Math.cos(lon) + offset, py = sl, pz = cl * Math.sin(lon);
+      // Granules: bright where a cell's middle is, dark along the lanes between cells, and a
+      // slow unevenness over the lot so no two stretches of the surface match.
+      const drift = fractalNoise(px * 3 + 4, py * 3, pz * 3, 3) - 0.5;
+      const [near, next] = cellNoise(px * 21 + drift, py * 21, pz * 21 - drift);
+      const lane = smooth(0, 0.32, next - near);
+      const middle = 1 - Math.min(1, near * 0.9);
+      const granule = 0.5 + 0.5 * (lane * (0.6 + 0.4 * middle) - 0.55) + 0.18 * (fractalNoise(px * 6, py * 6 + 2, pz * 6, 3) - 0.5);
+      // The field: where it is strongest, spots; in a ring around them, faculae.
+      const field = fractalNoise(px * 2.3 + 11, py * 2.3, pz * 2.3, 4) + 0.06 * (fractalNoise(px * 9, py * 9, pz * 9, 2) - 0.5);
+      const at = (row * ALBEDO_W + col) * 2;
+      map[at] = Math.min(1, Math.max(0, granule));
+      map[at + 1] = field;
+    }
+  }
+  build.next = until;
+  build.done = until >= ALBEDO_H;
+  return build.done ? map : null;
+}
+
+// Every pixel of a disc `size` pixels across: which way it faces, where on the map it reads,
+// and how much of it the disc covers, so the edge is smooth without a second pass.
+function sphereTable(size) {
+  if (sphereTables.has(size)) return sphereTables.get(size);
+  const half = size / 2;
+  const cells = [];
+  for (let py = 0; py < size; py += 1) {
+    for (let px = 0; px < size; px += 1) {
+      const x = (px + 0.5 - half) / half;
+      const y = (py + 0.5 - half) / half;
+      const rr = x * x + y * y;
+      const edge = (1 - Math.sqrt(rr)) * half + 0.5;
+      if (edge <= 0) continue;
+      const z = Math.sqrt(Math.max(0, 1 - rr));
+      const lon = Math.atan2(x, z);
+      const lat = Math.asin(Math.max(-1, Math.min(1, y)));
+      const row = Math.max(0, Math.min(ALBEDO_H - 1.001, (lat / Math.PI + 0.5) * ALBEDO_H - 0.5));
+      cells.push(py * size + px, x, y, z, (lon / (Math.PI * 2)) * ALBEDO_W, row, Math.min(1, edge));
+    }
+  }
+  const table = { size, cells: Float32Array.from(cells) };
+  sphereTables.set(size, table);
+  return table;
+}
+
+// The shading itself. Pure: a table, a map and the star in, RGBA out. `colour` is the class's
+// colour as three numbers 0..1, `surface` what its standing does to it (surfaceOf), `turn` how
+// far the body has spun, `burn` how hard it burns.
+function shadeDwarf(out, table, map, { colour, traits = SUN_TRAITS, surface = surfaceOf(null, traits), turn, burn }) {
+  out.fill(0);
+  const shift = (((turn / (Math.PI * 2)) % 1) + 1) % 1 * ALBEDO_W;
+  const energy = (0.62 + 0.62 * burn) * (traits.power ?? 1);
+  const whiten = traits.white * (0.5 + 0.5 * burn);
+  // Toward the edge the class's colour deepens: cooler gas, the same hue, more of it.
+  const deep = colour.map((value) => value ** 1.6);
+  const cells = table.cells;
+  const sample = new Float32Array(2);
+  const { spots, reach, faculae, granules } = surface;
+  const energyNow = energy * (surface.glow ?? 1);
+  const whitenNow = whiten * (surface.white ?? 1);
+  for (let i = 0; i < cells.length; i += 7) {
+    const mu = cells[i + 3];
+    // Read between texels, never from one: the map is smaller than a close-up body, and a body
+    // read texel by texel shows them as squares.
+    const u = cells[i + 4] + shift;
+    const u0 = Math.floor(u);
+    const fu = u - u0;
+    const c0 = ((u0 % ALBEDO_W) + ALBEDO_W) % ALBEDO_W;
+    const c1 = (c0 + 1) % ALBEDO_W;
+    const v = cells[i + 5];
+    const r0 = Math.floor(v);
+    const fv = v - r0;
+    const r1 = Math.min(ALBEDO_H - 1, r0 + 1);
+    for (let k = 0; k < 2; k += 1) {
+      const top = map[(r0 * ALBEDO_W + c0) * 2 + k] * (1 - fu) + map[(r0 * ALBEDO_W + c1) * 2 + k] * fu;
+      const bottom = map[(r1 * ALBEDO_W + c0) * 2 + k] * (1 - fu) + map[(r1 * ALBEDO_W + c1) * 2 + k] * fu;
+      sample[k] = top * (1 - fv) + bottom * fv;
+    }
+    const [granule, field] = sample;
+    // Spots where the field passes `reach`, umbra deeper in; faculae in the ring just short of it.
+    const ring = smooth(reach, reach + 0.07, field);
+    const umbra = smooth(reach + 0.07, reach + 0.12, field) * spots;
+    const penumbra = ring * spots;
+    const facula = Math.max(0, smooth(reach - 0.11, reach - 0.01, field) - ring) * faculae;
+    // The cells foreshorten toward the limb and their contrast goes with them.
+    const cells_ = 1 + granules * 0.62 * (granule - 0.5) * Math.sqrt(mu);
+    const bright = 1 + 0.6 * facula * (1 - mu) ** 0.7;
+    const dark = 1 - 0.8 * umbra - 0.4 * Math.max(0, penumbra - umbra);
+    // White-hot in the middle, its own colour toward the edge, deepening at the limb.
+    const heat = whitenNow * mu * mu;
+    const edge = (1 - mu) ** 1.5;
+    const p = cells[i] * 4;
+    for (let k = 0; k < 3; k += 1) {
+      const hue = colour[k] + (deep[k] - colour[k]) * edge;
+      const tint = hue + (1 - hue) * heat;
+      const limb = 1 - LIMB_DARKENING[k] * (1 - mu);
+      const value = tint * limb * cells_ * bright * dark * energyNow;
+      out[p + k] = 255 * (1 - Math.exp(-value * 2.6));
+    }
+    out[p + 3] = 255 * cells[i + 6];
+  }
+  return out;
+}
+
+// One dwarf's painted face, kept on its node and painted again only when it has changed enough
+// to be seen. Null where there is no pixel buffer to paint into, and the body is drawn the
+// older way instead.
+//
+// What it costs is bounded per frame. A surface map is built one class a frame, so opening the
+// map never stalls; until its class is ready a dwarf is drawn the older way. And only so many
+// faces are painted again each frame, in the order they are drawn; the rest keep last frame's
+// face for one more, which at the pace these bodies turn nobody can tell from a fresh one.
+const SHADE_BUDGET = 28;
+const ALBEDO_ROWS_PER_FRAME = 12;
+const shading = { frame: -1, painted: 0, built: false };
+function dwarfSprite(node, radius, burn, pixels, frame) {
+  if (typeof ImageData !== 'function') return null;
+  if (shading.frame !== frame) { shading.frame = frame; shading.painted = 0; shading.built = false; }
+  const size = Math.max(8, Math.min(200, 2 * Math.round(radius * pixels)));
+  const kind = node.memory.kind;
+  if (!dwarfAlbedos.get(kind)?.done) {
+    if (shading.built) return null;
+    shading.built = true;
+    if (!dwarfAlbedo(kind, ALBEDO_ROWS_PER_FRAME)) return null;
+  }
+  const map = dwarfAlbedo(kind);
+  const colour = [1, 3, 5].map((at) => Number.parseInt(String(node.color).slice(at, at + 2), 16) / 255);
+  if (colour.some((value) => !Number.isFinite(value))) return null;
+  let sprite = node.sprite;
+  // A body that has never been painted at this size waits its turn like any other: when a whole
+  // class becomes ready at once it is introduced a few dozen a frame, not all in one.
+  if ((!sprite || sprite.size !== size) && shading.painted >= SHADE_BUDGET) return sprite?.canvas ?? null;
+  if (!sprite || sprite.size !== size) {
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    const paint = canvas.getContext('2d');
+    if (!paint?.createImageData) return null;
+    sprite = node.sprite = { canvas, paint, image: paint.createImageData(size, size), size, turn: NaN, burn: -1, colour: '', standing: '' };
+  }
+  const turn = node.spin * 0.3 + node.seed;
+  // Painted again once the middle of its face has moved half a pixel, so a small body is painted
+  // rarely and a large one, close up, as often as it needs.
+  const fresh = !(sprite.turn === sprite.turn);
+  const traits = STAR_TRAITS[kind] ?? SUN_TRAITS;
+  const standing = `${node.memory.zone ?? 'hold'}${node.cold ? ':cold' : ''}`;
+  const moved = fresh
+    || Math.abs(turn - sprite.turn) * size > 1
+    || Math.abs(burn - sprite.burn) > 0.04
+    || sprite.colour !== node.color
+    || sprite.standing !== standing;
+  if (moved && shading.painted < SHADE_BUDGET) {
+    shading.painted += 1;
+    shadeDwarf(sprite.image.data, sphereTable(size), map, { colour, traits, surface: surfaceOf(node.memory, traits, Boolean(node.cold)), turn, burn });
+    sprite.paint.putImageData(sprite.image, 0, 0);
+    sprite.turn = turn;
+    sprite.burn = burn;
+    sprite.colour = node.color;
+    sprite.standing = standing;
+  }
+  return sprite.canvas;
+}
+
+// ---- MOTHER's body, as molten rock.
+//
+// A crust of cooling rock, nearly black, broken into plates; between the plates, cracks running
+// white-hot; under the crust, pools where it has melted through and the lava shows. The crust
+// rides the body's turn, the lava underneath flows at a pace of its own, and where the two
+// disagree the surface looks like it is moving rather than painted. Every so often something
+// bursts inside: a flash, a white core, a ring of fire running out from it and fading.
+//
+// The map is built once, the way the dwarfs' are, a band at a time; what changes frame to frame
+// is only where it is read and what is bursting.
+const MAGMA_W = 512;
+const MAGMA_H = 256;
+const MAGMA_SIZE = 220;          // the largest the body is ever painted; beyond it, it is scaled
+const BLAST_EVERY = 1.6;         // seconds between bursts, on average
+const BLAST_LIFE = 2.2;
+// Rock to white heat: black crust, dark red, orange, yellow, white.
+const LAVA_RAMP = [[0, [0.05, 0.012, 0.008]], [0.3, [0.42, 0.04, 0.012]], [0.55, [0.92, 0.24, 0.03]], [0.78, [1, 0.62, 0.16]], [1, [1, 0.94, 0.78]]];
+const magmaBuild = { map: null, next: 0, done: false };
+let magmaSprite = null;
+
+function lavaColour(heat, out) {
+  const h = Math.min(1, Math.max(0, heat));
+  for (let i = 1; i < LAVA_RAMP.length; i += 1) {
+    const [at, colour] = LAVA_RAMP[i];
+    if (h > at) continue;
+    const [from, below] = LAVA_RAMP[i - 1];
+    const f = (h - from) / (at - from);
+    for (let k = 0; k < 3; k += 1) out[k] = below[k] + (colour[k] - below[k]) * f;
+    return out;
+  }
+  for (let k = 0; k < 3; k += 1) out[k] = LAVA_RAMP[LAVA_RAMP.length - 1][1][k];
+  return out;
+}
+
+// Four numbers a texel: the plates' cracks, the finer cracks inside them, where the crust has
+// melted through, and grain for the rock itself.
+function magmaMap(rows = MAGMA_H) {
+  if (magmaBuild.done) return magmaBuild.map;
+  magmaBuild.map ??= new Float32Array(MAGMA_W * MAGMA_H * 4);
+  const map = magmaBuild.map;
+  const until = Math.min(MAGMA_H, magmaBuild.next + rows);
+  for (let row = magmaBuild.next; row < until; row += 1) {
+    const lat = ((row + 0.5) / MAGMA_H - 0.5) * Math.PI;
+    const cl = Math.cos(lat), sl = Math.sin(lat);
+    for (let col = 0; col < MAGMA_W; col += 1) {
+      const lon = ((col + 0.5) / MAGMA_W) * Math.PI * 2;
+      const px = cl * Math.cos(lon), py = sl, pz = cl * Math.sin(lon);
+      const warp = fractalNoise(px * 2.2 + 5, py * 2.2, pz * 2.2, 3) - 0.5;
+      const [near, next] = cellNoise(px * 6 + warp, py * 6, pz * 6 - warp);
+      // Fine cracks at a frequency the map can carry: any finer and the cells alias into streaks.
+      const [fineNear, fineNext] = cellNoise(px * 10 + warp * 2, py * 10, pz * 10);
+      const pools = fractalNoise(px * 2.6 + warp * 1.5, py * 2.6 + 9, pz * 2.6, 5);
+      const at = (row * MAGMA_W + col) * 4;
+      map[at] = next - near;
+      map[at + 1] = fineNext - fineNear;
+      map[at + 2] = pools;
+      map[at + 3] = fractalNoise(px * 11, py * 11, pz * 11 + 3, 3);
+    }
+  }
+  magmaBuild.next = until;
+  magmaBuild.done = until >= MAGMA_H;
+  return magmaBuild.done ? map : null;
+}
+
+// The shading. Pure: a table (sphereTable), the map, and the moment in; RGBA out. `turn` is how
+// far the crust has turned, `flow` how far the lava under it has, `beat` the heartbeat, `blasts`
+// the bursts alive now, each a direction on the visible face in view space and an age 0..1.
+// Written for speed: it runs on the largest body on screen, so every read of the map is shared
+// between the channels that use the same place, and the limb is worked out once per size.
+const magmaLimbs = new Map();
+function shadeMagma(out, table, map, { turn, flow, beat = 0, blasts = [] }) {
+  out.fill(0);
+  const crustShift = (((turn / (Math.PI * 2)) % 1) + 1) % 1 * MAGMA_W;
+  const lavaShift = (((flow / (Math.PI * 2)) % 1) + 1) % 1 * MAGMA_W;
+  const cells = table.cells;
+  let limbs = magmaLimbs.get(table);
+  if (!limbs) {
+    limbs = new Float32Array(cells.length / 7);
+    for (let i = 0, j = 0; i < cells.length; i += 7, j += 1) limbs[j] = 0.32 + 0.68 * cells[i + 3] ** 0.55;
+    magmaLimbs.set(table, limbs);
+  }
+  const scale = MAGMA_W / ALBEDO_W;
+  const rowScale = MAGMA_H / ALBEDO_H;
+  const colour = [0, 0, 0];
+  const seamWidth = 0.07 + 0.025 * beat;
+  for (let i = 0, j = 0; i < cells.length; i += 7, j += 1) {
+    const nx = cells[i + 1], ny = cells[i + 2], mu = cells[i + 3];
+    const base = cells[i + 4] * scale;
+    const v = Math.min(MAGMA_H - 1.001, cells[i + 5] * rowScale);
+    const r0 = v | 0;
+    const fv = v - r0;
+    const top = r0 * MAGMA_W;
+    const bottom = Math.min(MAGMA_H - 1, r0 + 1) * MAGMA_W;
+    // The crust: one place on the map, three things read from it.
+    let u = base + crustShift;
+    let u0 = Math.floor(u);
+    let fu = u - u0;
+    let c0 = u0 % MAGMA_W; if (c0 < 0) c0 += MAGMA_W;
+    let c1 = c0 + 1 === MAGMA_W ? 0 : c0 + 1;
+    let a = (top + c0) * 4, b = (top + c1) * 4, c = (bottom + c0) * 4, d = (bottom + c1) * 4;
+    const w00 = (1 - fu) * (1 - fv), w10 = fu * (1 - fv), w01 = (1 - fu) * fv, w11 = fu * fv;
+    const crack = map[a] * w00 + map[b] * w10 + map[c] * w01 + map[d] * w11;
+    const fine = map[a + 1] * w00 + map[b + 1] * w10 + map[c + 1] * w01 + map[d + 1] * w11;
+    const grain = map[a + 3] * w00 + map[b + 3] * w10 + map[c + 3] * w01 + map[d + 3] * w11;
+    // The lava under it, read where it has flowed to.
+    u = base + lavaShift;
+    u0 = Math.floor(u);
+    fu = u - u0;
+    c0 = u0 % MAGMA_W; if (c0 < 0) c0 += MAGMA_W;
+    c1 = c0 + 1 === MAGMA_W ? 0 : c0 + 1;
+    a = (top + c0) * 4; b = (top + c1) * 4; c = (bottom + c0) * 4; d = (bottom + c1) * 4;
+    const pools = map[a + 2] * (1 - fu) * (1 - fv) + map[b + 2] * fu * (1 - fv) + map[c + 2] * (1 - fu) * fv + map[d + 2] * fu * fv;
+    // White-hot along the plates' edges, hotter still where the beat pushes through; a fainter
+    // web of finer cracks inside each plate; pools wherever the crust has melted through.
+    const seam = 1 - smooth(0, seamWidth, crack);
+    const web = (1 - smooth(0, 0.045, fine)) * 0.55;
+    const melt = smooth(0.52, 0.78, pools + 0.06 * beat);
+    let heat = Math.max(seam * 0.95, web, melt * 0.82) + 0.08 * grain;
+    // Bursts: a small white core where it went off, and a ring of fire running out from it.
+    for (let k = 0; k < blasts.length; k += 1) {
+      const blast = blasts[k];
+      const near = 1 - (nx * blast.x + ny * blast.y + mu * blast.z);
+      if (near > 0.2) continue;
+      const age = blast.age;
+      const flash = Math.exp(-age * 7) * Math.exp(-near / (0.0015 + 0.006 * age));
+      const front = 0.004 + 0.07 * age;
+      const ring = Math.exp(-((near - front) ** 2) / (0.00012 + 0.0006 * age)) * (1 - age);
+      heat += 1.1 * flash + 1.1 * ring;
+    }
+    lavaColour(heat, colour);
+    // The edge is seen through more of its own smoke: darker and redder toward the limb.
+    const limb = limbs[j];
+    const p = cells[i] * 4;
+    out[p] = 255 * Math.min(1, colour[0] * limb * (1.04 + 0.1 * beat));
+    out[p + 1] = 255 * Math.min(1, colour[1] * limb * limb);
+    out[p + 2] = 255 * Math.min(1, colour[2] * limb * limb * limb);
+    out[p + 3] = 255 * cells[i + 6];
+  }
+  return out;
+}
+
+// The bursts alive now: born at random on the face, more often while MOTHER is alarmed, none for
+// someone who asked for stillness.
+function magmaBlasts(t, { alarm = 0, reduced = false } = {}) {
+  const blasts = (nostromo.blasts ??= []);
+  if (!reduced && Math.random() < (1 / BLAST_EVERY) * (1 + 3 * alarm) / 60) {
+    const z = 0.35 + 0.6 * Math.random();
+    const angle = Math.random() * Math.PI * 2;
+    const ring = Math.sqrt(1 - z * z);
+    blasts.push({ born: t, x: Math.cos(angle) * ring, y: Math.sin(angle) * ring, z });
+  }
+  nostromo.blasts = blasts.filter((blast) => t - blast.born < BLAST_LIFE);
+  return nostromo.blasts.map((blast) => ({ x: blast.x, y: blast.y, z: blast.z, age: (t - blast.born) / BLAST_LIFE }));
+}
+
+// The body's face, painted into a buffer of its own and laid on the disc. Null where there is no
+// pixel buffer, or until the map is whole: the star is drawn the older way until then.
+function magmaFace(radius, pixels, t, { turn, beat, alarm, reduced }) {
+  if (typeof ImageData !== 'function') return null;
+  const map = magmaMap(12);
+  if (!map) return null;
+  const size = Math.max(32, Math.min(MAGMA_SIZE, 2 * Math.round(radius * pixels)));
+  if (!magmaSprite || magmaSprite.size !== size) {
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    const paint = canvas.getContext('2d');
+    if (!paint?.createImageData) return null;
+    magmaSprite = { canvas, paint, image: paint.createImageData(size, size), size };
+  }
+  // Painted every other frame: rock this slow, and bursts this short, read the same at half the
+  // rate, and the frames between are free for the dwarfs.
+  magmaSprite.frame = (magmaSprite.frame ?? 0) + 1;
+  if (magmaSprite.painted && magmaSprite.frame % 2) return magmaSprite.canvas;
+  magmaSprite.painted = true;
+  const flowTime = reduced ? 0 : t;
+  shadeMagma(magmaSprite.image.data, sphereTable(size), map, {
+    turn,
+    flow: turn * 0.82 + flowTime * 0.018,
+    beat,
+    blasts: magmaBlasts(t, { alarm, reduced }),
+  });
+  magmaSprite.paint.putImageData(magmaSprite.image, 0, 0);
+  return magmaSprite.canvas;
+}
+
+
+
 // Masses of molten matter riding the surface: `size` is how much of the face one covers, `rate`
 // how slowly it swells and settles, `drift` how it crawls against the turning body. None of the
 // rates match, so the face is never the same face twice.
@@ -7717,53 +9144,93 @@ const CORE_FLOWS = [
 const MEMORY_SCALE = 0.8;
 
 function stepNostromo(dt, t) {
-  const nodes = nostromo.nodes.filter((node) => node.scale > 0.01);
+  // What is being forgotten holds still while it goes.
+  const nodes = nostromo.nodes.filter((node) => node.scale > 0.01 && !node.forgetting);
   const byId = new Map(nodes.map((node) => [node.memory.id, node]));
+  for (const node of nodes) {
+    if (node.wx === undefined) { node.wx = node.x; node.wy = node.y; node.wz = 0; }
+  }
   for (const node of nodes) {
     let fx = 0;
     let fy = 0;
-    const dist = Math.hypot(node.x, node.y) || 1;
-    // A soft ring around the core: too close is pushed out, too far pulled in.
-    const target = NOSTROMO_ORBIT * (0.98 + node.distance * 0.62);
-    const pull = (target - dist) * 0.004;
-    fx += (node.x / dist) * pull;
-    fy += (node.y / dist) * pull;
-    if (dist < CORE_R * 1.7) { const push = (CORE_R * 1.7 - dist) * 0.02; fx += (node.x / dist) * push; fy += (node.y / dist) * push; }
+    let fz = 0;
+    const dist = Math.hypot(node.wx, node.wy, node.wz) || 1;
+    // A soft shell around the core, in the shape of a brain: too close is pushed out, too far
+    // pulled in. The outline gives the reach at this bearing seen from the side; the width
+    // gives it toward the temples. `shell` is 1 exactly on the surface.
+    const target = NOSTROMO_ORBIT * brainRadius(Math.atan2(node.wy, node.wx)) * shellDepth(node);
+    const shell = Math.hypot(Math.hypot(node.wx, node.wy) / target, node.wz / (BRAIN_WIDTH * target)) || 1;
+    const pull = (1 / shell - 1) * dist * 0.004;
+    fx += (node.wx / dist) * pull;
+    fy += (node.wy / dist) * pull;
+    fz += (node.wz / dist) * pull;
+    if (dist < CORE_R * 1.7) { const push = (CORE_R * 1.7 - dist) * 0.02; fx += (node.wx / dist) * push; fy += (node.wy / dist) * push; fz += (node.wz / dist) * push; }
+    // The fissure: out of the midline, back toward the hemisphere it already leans into.
+    const gap = FISSURE * NOSTROMO_ORBIT;
+    if (Math.abs(node.wz) < gap) fz += Math.sign(node.wz || (frac(node.seed * 0.618) < 0.5 ? -1 : 1)) * (gap - Math.abs(node.wz)) * 0.02;
+    const own = node.r3 ?? node.r;
+    // Every pair, every frame: the far ones are turned away on the squared distance, before any
+    // square root is taken, and the rest without Math.hypot, which costs several times as much.
     for (const other of nodes) {
       if (other === node) continue;
-      const ox = node.x - other.x;
-      const oy = node.y - other.y;
-      const d = Math.hypot(ox, oy) || 1;
-      const min = node.r + other.r + 30;
-      if (d < min * 2.2) { const push = ((min * 2.2 - d) / (min * 2.2)) * 0.9; fx += (ox / d) * push; fy += (oy / d) * push; }
+      const ox = node.wx - other.wx;
+      const oy = node.wy - other.wy;
+      const oz = node.wz - other.wz;
+      const reach = (own + (other.r3 ?? other.r) + 30) * 2.2;
+      const square = ox * ox + oy * oy + oz * oz;
+      if (square >= reach * reach) continue;
+      const d = Math.sqrt(square) || 1;
+      const push = ((reach - d) / reach) * 0.9;
+      fx += (ox / d) * push; fy += (oy / d) * push; fz += (oz / d) * push;
+    }
+    if (!nostromo.reduced) {
+      fx += Math.sin(node.seed + t * 0.38) * 0.02;
+      fy += Math.cos(node.seed * 1.3 + t * 0.32) * 0.02;
+      fz += Math.sin(node.seed * 0.7 + t * 0.29) * 0.02;
     }
-    if (!nostromo.reduced) { fx += Math.sin(node.seed + t * 0.38) * 0.02; fy += Math.cos(node.seed * 1.3 + t * 0.32) * 0.02; }
     node.fx = fx;
     node.fy = fy;
+    node.fz = fz;
   }
   for (const link of nostromo.links) {
     const a = byId.get(link.a);
     const b = byId.get(link.b);
     if (!a || !b) continue;
-    const dx = b.x - a.x;
-    const dy = b.y - a.y;
-    const d = Math.hypot(dx, dy) || 1;
-    const rest = a.r + b.r + 70;
+    const dx = b.wx - a.wx;
+    const dy = b.wy - a.wy;
+    const dz = b.wz - a.wz;
+    const d = Math.hypot(dx, dy, dz) || 1;
+    const rest = (a.r3 ?? a.r) + (b.r3 ?? b.r) + 70;
     const k = (d - rest) * 0.0035 * link.weight;
-    a.fx += (dx / d) * k; a.fy += (dy / d) * k;
-    b.fx -= (dx / d) * k; b.fy -= (dy / d) * k;
+    a.fx += (dx / d) * k; a.fy += (dy / d) * k; a.fz += (dz / d) * k;
+    b.fx -= (dx / d) * k; b.fy -= (dy / d) * k; b.fz -= (dz / d) * k;
   }
   for (const node of nodes) {
-    node.vx = (node.vx + node.fx * dt) * 0.86;
-    node.vy = (node.vy + node.fy * dt) * 0.86;
-    node.x += node.vx * dt;
-    node.y += node.vy * dt;
+    node.wvx = ((node.wvx ?? 0) + node.fx * dt) * 0.86;
+    node.wvy = ((node.wvy ?? 0) + node.fy * dt) * 0.86;
+    node.wvz = ((node.wvz ?? 0) + node.fz * dt) * 0.86;
+    node.wx += node.wvx * dt;
+    node.wy += node.wvy * dt;
+    node.wz += node.wvz * dt;
     node.spin = (node.spin ?? node.seed) + dt * 0.012 * (1 + (node.seed % 1));
   }
-  for (const node of nostromo.nodes) if (node.forgetting) node.scale = Math.max(0, node.scale - 0.06 * dt);
-  nostromo.nodes = nostromo.nodes.filter((node) => !(node.forgetting && node.scale <= 0.01));
+  // A forgotten memory goes on the clock, not by a fixed step a frame, so the implosion takes
+  // the same time on any screen; the dust drifts and goes out on the same clock.
+  for (const node of nostromo.nodes) if (node.forgetting) node.scale = implosionScale((t - node.forgetting.at) / IMPLOSION);
+  nostromo.nodes = nostromo.nodes.filter((node) => !(node.forgetting && t - node.forgetting.at >= IMPLOSION));
+  if (nostromo.dust?.length) {
+    for (const mote of nostromo.dust) {
+      if (t < mote.born || nostromo.reduced) continue;
+      mote.x += mote.vx * dt * 0.35;
+      mote.y += mote.vy * dt * 0.35;
+      mote.vx *= 0.995; mote.vy *= 0.995;
+    }
+    nostromo.dust = nostromo.dust.filter((mote) => t - mote.born < mote.life);
+  }
+  if (nostromo.fading?.length) nostromo.fading = nostromo.fading.filter((wire) => t - wire.born < 1.3);
   // The core turns on its own axis, slowly, the way a body does.
-  nostromo.spin = (nostromo.spin ?? 0) + dt * 0.0024 * (nostromo.cage ? 2.2 : 1);
+  // About one turn in twenty seconds: slow enough to be a body, fast enough to be seen turning.
+  nostromo.spin = (nostromo.spin ?? 0) + dt * 0.0052 * (nostromo.cage ? 2.2 : 1);
   // A new beat sends a wave out from the core.
   const { phase } = heartbeat(t);
   if (phase < nostromo.lastPhase && !nostromo.reduced) nostromo.rings.push({ born: t });
@@ -7859,19 +9326,35 @@ function alongCurve(x0, y0, cx, cy, x1, y1, u) {
 // The camera follows the whole system until the human takes over.
 function fitNostromo() {
   const cam = nostromo.cam;
-  if (!cam || cam.manual) return;
+  if (!cam) return;
+  // A held dwarf is where the camera goes, whoever last moved it.
+  const witness = nostromo.witness?.forgetting && nostromo.nodes.includes(nostromo.witness) ? nostromo.witness : null;
+  const held = (nostromo.selected && nostromo.nodes.includes(nostromo.selected) ? nostromo.selected : null) ?? witness;
+  if (held) {
+    // Centred in the part of the map the card leaves free, not under the card.
+    const card = nostromo.card && !nostromo.card.hidden ? nostromo.card.getBoundingClientRect() : null;
+    const canvas = nostromo.canvas.getBoundingClientRect();
+    const covered = card && card.width ? Math.max(0, canvas.right - card.left) : 0;
+    const aimX = held.x + covered / 2 / cam.scale;
+    cam.x += (aimX - cam.x) * 0.08;
+    cam.y += (held.y - cam.y) * 0.08;
+  }
+  if (cam.manual) return;
   const { w, h } = nostromo.size;
   let minX = -CORE_R * 2.4, maxX = CORE_R * 2.4, minY = -CORE_R * 2.4, maxY = CORE_R * 2.4;
+  // Across, the frame holds the body at every turn it can take, so turning it never makes the
+  // camera breathe in and out; up and down it follows what is on screen.
+  const near = VIEW_DISTANCE / (VIEW_DISTANCE - NOSTROMO_ORBIT * BRAIN_WIDTH);
   for (const node of nostromo.nodes) {
-    minX = Math.min(minX, node.x - node.r * 3); maxX = Math.max(maxX, node.x + node.r * 3);
+    const reach = Math.hypot(node.wx ?? node.x, node.wz ?? 0) * near + node.r * 3;
+    minX = Math.min(minX, -reach); maxX = Math.max(maxX, reach);
     minY = Math.min(minY, node.y - node.r * 3); maxY = Math.max(maxY, node.y + node.r * 3);
   }
   const pad = 70;
   const scale = Math.min(1.4, Math.max(0.3, Math.min((w - pad * 2) / (maxX - minX || 1), (h - pad * 2 - 40) / (maxY - minY || 1))));
   const cx = (minX + maxX) / 2;
   const cy = (minY + maxY) / 2 - 20 / scale;
-  cam.x += (cx - cam.x) * 0.05;
-  cam.y += (cy - cam.y) * 0.05;
+  if (!held) { cam.x += (cx - cam.x) * 0.05; cam.y += (cy - cam.y) * 0.05; }
   cam.scale += (scale - cam.scale) * 0.05;
 }
 function toScreen(x, y) { const { w, h } = nostromo.size; const cam = nostromo.cam; return { x: w / 2 + (x - cam.x) * cam.scale, y: h / 2 + (y - cam.y) * cam.scale }; }
@@ -8056,6 +9539,7 @@ function drawNostromo(t) {
   // Plasma from the core to every memory. The filament a memory is spoken to often burns a
   // little brighter than one nobody has needed.
   for (const node of nostromo.nodes) {
+    if (node.forgetting) continue;     // its wire is dust now
     const d = Math.hypot(node.x, node.y) || 1;
     const nx = -node.y / d, ny = node.x / d;
     const bow = Math.sin(t * 1.7 + node.seed) * Math.min(60, d * 0.18);
@@ -8116,6 +9600,155 @@ function drawNostromo(t) {
     ctx.beginPath(); ctx.arc(0, 0, radius, 0, Math.PI * 2); ctx.stroke();
   }
 
+  // One memory, drawn where the projection put it. Called twice over the list: the ones behind
+  // MOTHER before her, so she hides them, and the ones in front after her.
+  const drawMemory = (node) => {
+    const micro = 1 + 0.05 * Math.sin(t * node.rate + node.seed);
+    const r = node.r * node.scale * micro;
+    if (r <= 0) return;
+    const arrive = Math.min(1.2, node.lit ?? 0);
+    // Two things decide how brightly a dwarf burns. Maturity is what the room has made of it
+    // over time: how often it has been reached for, how lately, how woven into the rest. Feeding
+    // is what it is being given right now, by MOTHER and by its neighbours at once. A young
+    // memory nobody feeds is nearly out; an old one the room leans on runs white.
+    const grown = node.activity ?? 0;
+    const fed = Math.min(1, (node.charge ?? 0) + 0.25 * arrive);
+    const burn = Math.min(1, 0.4 * grown + 0.75 * fed);
+
+    // A collapsed body. This one is not a star and it is not a furnace either: it is a claim the
+    // room established is false, and what it looks like is absence. A round black nothing, the
+    // dust and stars of the field standing around it, and the faint cold light of what passes
+    // close enough to be bent round the rim instead of going straight.
+    //
+    // There is no disc and nothing burns. The whole of it is the dark, and the dark is the point.
+    if (node.memory.kind === COLLAPSED) {
+      const hole = r * 1.35;
+      const field = hole * 2.4;
+      const turn = node.seed + node.spin * 0.12;
+      const lit = 0.45 + 0.55 * burn;
+
+      // The field it sits in: specks of dust and far stars, each on its own slow flicker.
+      ctx.globalCompositeOperation = 'lighter';
+      for (let i = 0; i < VOID_DUST.length; i += 1) {
+        const speck = VOID_DUST[i];
+        const at = hole * 1.06 + (field - hole * 1.06) * speck.out;
+        const angle = speck.angle + turn;
+        const x = node.x + Math.cos(angle) * at;
+        const y = node.y + Math.sin(angle) * at;
+        // Fading outward, so the field thins into the dark rather than stopping.
+        const fade = (1 - speck.out * 0.72) * lit * (0.45 + 0.55 * Math.abs(Math.sin(t * speck.rate + speck.phase)));
+        const size = speck.size * (1 + 0.25 * burn) / cam.scale;
+        const glow = ctx.createRadialGradient(x, y, 0, x, y, size * 3.2);
+        glow.addColorStop(0, `rgba(${speck.colour}, ${fade})`);
+        glow.addColorStop(0.35, `rgba(${speck.colour}, ${fade * 0.3})`);
+        glow.addColorStop(1, `rgba(${speck.colour}, 0)`);
+        ctx.fillStyle = glow;
+        ctx.beginPath(); ctx.arc(x, y, size * 3.2, 0, Math.PI * 2); ctx.fill();
+      }
+      ctx.globalCompositeOperation = 'source-over';
+
+      // The void. Black all the way through, with just enough softness at the rim that it reads
+      // as depth rather than as a sticker.
+      const pit = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, hole * 1.1);
+      pit.addColorStop(0, 'rgba(0, 0, 0, 1)');
+      pit.addColorStop(0.86, 'rgba(0, 0, 0, 1)');
+      pit.addColorStop(0.95, 'rgba(0, 0, 2, .82)');
+      pit.addColorStop(1, 'rgba(0, 0, 4, 0)');
+      ctx.fillStyle = pit;
+      ctx.beginPath(); ctx.arc(node.x, node.y, hole * 1.1, 0, Math.PI * 2); ctx.fill();
+
+      // What passes close enough is bent round instead of going straight: a cold ring of
+      // smeared light gripping the rim, in a few arcs that do not quite close.
+      ctx.globalCompositeOperation = 'lighter';
+      const halo = ctx.createRadialGradient(node.x, node.y, hole * 0.94, node.x, node.y, hole * 1.3);
+      halo.addColorStop(0, 'rgba(150, 190, 255, 0)');
+      halo.addColorStop(0.3, `rgba(168, 204, 255, ${0.26 * lit})`);
+      halo.addColorStop(0.55, `rgba(120, 160, 230, ${0.12 * lit})`);
+      halo.addColorStop(1, 'rgba(90, 130, 210, 0)');
+      ctx.fillStyle = halo;
+      ctx.beginPath(); ctx.arc(node.x, node.y, hole * 1.3, 0, Math.PI * 2); ctx.fill();
+      ctx.lineCap = 'round';
+      for (let arc = 0; arc < 4; arc += 1) {
+        const at = hole * (1.005 + arc * 0.028);
+        const from = turn * (1 + arc * 0.35) + arc * 1.9;
+        const span = 0.9 + 0.5 * Math.sin(t * 0.21 + arc);
+        ctx.strokeStyle = `rgba(${arc % 2 ? '198, 222, 255' : '146, 186, 250'}, ${(0.3 - 0.05 * arc) * lit})`;
+        ctx.lineWidth = (1.4 - 0.25 * arc) / cam.scale;
+        ctx.beginPath(); ctx.arc(node.x, node.y, at, from, from + span); ctx.stroke();
+      }
+      ctx.globalCompositeOperation = 'source-over';
+
+      if (node === nostromo.hover && !nostromo.selected) drawSight(ctx, node.x, node.y, field, t, cam.scale);
+      return;
+    }
+
+    // Drawn pixel by pixel wherever there is a buffer to paint into.
+    const sprite = dwarfSprite(node, node.r * node.scale, burn, cam.scale * dpr, t);
+    if (sprite) ctx.drawImage(sprite, node.x - r, node.y - r, r * 2, r * 2);
+    else {
+      ctx.save();
+      ctx.beginPath(); ctx.arc(node.x, node.y, r, 0, Math.PI * 2); ctx.closePath();
+      // The ground, struck from the body's own middle: a star is not lit from a corner. It runs
+      // white at the centre the harder it burns and keeps its class's colour outward.
+      const ground = ctx.createRadialGradient(node.x, node.y, r * 0.03, node.x, node.y, r);
+      ground.addColorStop(0, hexMix(node.color, '#ffffff', 0.5 + 0.5 * burn));
+      ground.addColorStop(0.45, hexMix(node.color, '#ffffff', 0.12 + 0.4 * burn));
+      ground.addColorStop(0.85, hexMix(node.color, '#000000', 0.2 - 0.2 * burn));
+      ground.addColorStop(1, hexMix(node.color, '#000000', 0.34 - 0.24 * burn));
+      ctx.fillStyle = ground;
+      ctx.fill();
+      ctx.clip();
+      // The face: the boiling surface a star of this class has, turning slowly, laid over the
+      // whole body. This is most of what is seen, so it is laid down at close to full strength.
+      const face = dwarfTexture(node.color);
+      if (face) {
+        // Wrapped on a sphere, half the strip across the visible face, in columns that narrow
+        // toward the limb: the cells slide in from one edge, cross wide and leave thin, which is
+        // what reads as a body turning rather than a picture sliding behind a hole.
+        const strip = face.width / 2;
+        const turn = ((node.spin * 0.3 + node.seed) / (Math.PI * 2) % 1 + 1) % 1;
+        ctx.globalAlpha = 0.72 + 0.26 * burn;
+        for (let column = 0; column < SKIN_COLUMNS; column += 1) {
+          const x0 = SKIN_EDGES[column];
+          const x1 = SKIN_EDGES[column + 1];
+          ctx.drawImage(face, (turn + column / (SKIN_COLUMNS * 2)) * strip, 0, strip / (SKIN_COLUMNS * 2), face.height,
+            node.x + x0 * r * 1.06, node.y - r * 1.06, Math.max(0.5, (x1 - x0) * r * 1.06), r * 2.12);
+        }
+        ctx.globalAlpha = 1;
+      }
+      // The hottest of it burns through the face, the way an active region does.
+      ctx.globalCompositeOperation = 'lighter';
+      const core = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, r * 0.92);
+      core.addColorStop(0, hexAlpha(hexMix(node.color, '#ffffff', 0.9), 0.2 + 0.45 * burn));
+      core.addColorStop(0.5, hexAlpha(hexMix(node.color, '#ffffff', 0.5), 0.08 + 0.2 * burn));
+      core.addColorStop(1, hexAlpha(node.color, 0));
+      ctx.fillStyle = core;
+      ctx.fillRect(node.x - r, node.y - r, r * 2, r * 2);
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.restore();
+    }
+
+    // The glow: the light a star gives off, clinging to it in a tight bloom the width of a finger,
+    // the same all the way round because nothing else is lighting it. It carries past the body
+    // and stops there, so it belongs to the star rather than hanging off it.
+    ctx.globalCompositeOperation = 'lighter';
+    const air = ctx.createRadialGradient(node.x, node.y, r * 0.99, node.x, node.y, r * 1.42);
+    // It starts at the limb, never over it, and no brighter than the limb itself: scattered
+    // light falling away from the body, with no seam and no ring. A cooling dwarf gives less of
+    // it, in the same proportion its face has dimmed.
+    const cooling = node.cold ? COLD_GLOW : 1;
+    air.addColorStop(0, hexAlpha(hexMix(node.color, '#ffffff', 0.2 + 0.3 * burn), (0.16 + 0.34 * burn) * cooling + 0.2 * arrive));
+    air.addColorStop(0.25, hexAlpha(hexMix(node.color, '#ffffff', 0.1 + 0.2 * burn), (0.07 + 0.16 * burn) * cooling + 0.1 * arrive));
+    air.addColorStop(1, hexAlpha(node.color, 0));
+    ctx.fillStyle = air;
+    ctx.beginPath(); ctx.arc(node.x, node.y, r * 1.34, 0, Math.PI * 2); ctx.fill();
+    ctx.globalCompositeOperation = 'source-over';
+
+    if (node === nostromo.hover && !nostromo.selected) drawSight(ctx, node.x, node.y, r * 1.1, t, cam.scale);
+    };
+  const ordered = [...nostromo.nodes].sort((a, b) => (a.depth ?? 0) - (b.depth ?? 0));
+  for (const node of ordered) if ((node.depth ?? 0) < 0) drawMemory(node);
+
   // ---- MOTHER's core: a body, not a disc.
   //
   // Everything on the surface lives at a latitude and a longitude and is projected before it
@@ -8123,8 +9756,11 @@ function drawNostromo(t) {
   // Three cues do the work: features that travel on a real sphere, an edge that darkens into
   // shadow, and one fixed light that decides which side is day. The planet turns; the sun
   // stays where it is.
-  const sinT = Math.sin(CORE_TILT);
-  const cosT = Math.cos(CORE_TILT);
+  // The human's hand turns the star with the body around it: the turn adds to its longitude and
+  // the tip to its lean, in the same order the memories are projected in.
+  const yaw = nostromo.yaw ?? 0;
+  const sinT = Math.sin(CORE_TILT + (nostromo.pitch ?? 0));
+  const cosT = Math.cos(CORE_TILT + (nostromo.pitch ?? 0));
   const spin = nostromo.spin ?? 0;
   // A point on the surface: where it lands on screen, how much it faces us, what light it takes.
   const surface = (lat, lon) => {
@@ -8172,73 +9808,83 @@ function drawNostromo(t) {
   ctx.shadowBlur = 0;
   ctx.clip();
 
-  // The skin, wrapped on. Each row of the disc takes the slice of the strip belonging to its
-  // latitude, cut into pieces so longitude runs as a sphere's does and the cells narrow toward
-  // the limb instead of smearing along it. Turning the star is moving the window along.
-  // Someone who asked for stillness gets a star that turns and breathes but does not churn.
-  const flowTime = nostromo.reduced ? 0 : t;
-  const grain = granuleTexture();
-  if (grain) {
-    const width = grain.width / 2;
-    const wrapAt = (turn, alpha, lift) => {
-      ctx.globalAlpha = alpha;
-      for (let row = 0; row < GRAIN_ROWS; row += 1) {
-        const y0 = -R + (row / GRAIN_ROWS) * 2 * R;
-        const y1 = -R + ((row + 1) / GRAIN_ROWS) * 2 * R;
-        const mid = (y0 + y1) * 0.5;
-        const half = Math.sqrt(Math.max(0, R * R - mid * mid));
-        if (half < 0.5) continue;
-        const v0 = (((y0 + R) / (2 * R) + lift) % 1 + 1) % 1 * grain.height;
-        const dv = Math.max(1, ((y1 - y0) / (2 * R)) * grain.height);
-        for (let piece = 0; piece < GRAIN_PIECES; piece += 1) {
-          const xA = Math.sin((piece / GRAIN_PIECES - 0.5) * Math.PI) * half;
-          const xB = Math.sin(((piece + 1) / GRAIN_PIECES - 0.5) * Math.PI) * half;
-          const u = (turn + (piece / GRAIN_PIECES) * 0.5) * width;
-          ctx.drawImage(grain, u, Math.min(v0, grain.height - dv), (width * 0.5) / GRAIN_PIECES, dv, xA, y0, Math.max(0.5, xB - xA), Math.max(1, y1 - y0));
+  // Molten rock, painted pixel by pixel wherever there is a buffer to paint into: plates of
+  // crust, cracks running white-hot, lava flowing under them, bursts going off inside.
+  const magma = magmaFace(R, cam.scale * dpr, t, { turn: spin - yaw, beat, alarm, reduced: nostromo.reduced });
+  if (magma) ctx.drawImage(magma, -R, -R, R * 2, R * 2);
+  else {
+    // The skin, wrapped on. Each row of the disc takes the slice of the strip belonging to its
+    // latitude, cut into pieces so longitude runs as a sphere's does and the cells narrow toward
+    // the limb instead of smearing along it. Turning the star is moving the window along.
+    // Someone who asked for stillness gets a star that turns and breathes but does not churn.
+    const flowTime = nostromo.reduced ? 0 : t;
+    const grain = granuleTexture();
+    if (grain) {
+      const width = grain.width / 2;
+      const wrapAt = (turn, alpha, lift) => {
+        ctx.globalAlpha = alpha;
+        for (let row = 0; row < GRAIN_ROWS; row += 1) {
+          const y0 = -R + (row / GRAIN_ROWS) * 2 * R;
+          const y1 = -R + ((row + 1) / GRAIN_ROWS) * 2 * R;
+          const mid = (y0 + y1) * 0.5;
+          const half = Math.sqrt(Math.max(0, R * R - mid * mid));
+          if (half < 0.5) continue;
+          const v0 = (((y0 + R) / (2 * R) + lift) % 1 + 1) % 1 * grain.height;
+          const dv = Math.max(1, ((y1 - y0) / (2 * R)) * grain.height);
+          for (let piece = 0; piece < GRAIN_PIECES; piece += 1) {
+            const xA = Math.sin((piece / GRAIN_PIECES - 0.5) * Math.PI) * half;
+            const xB = Math.sin(((piece + 1) / GRAIN_PIECES - 0.5) * Math.PI) * half;
+            const u = (turn + (piece / GRAIN_PIECES) * 0.5) * width;
+            ctx.drawImage(grain, u, Math.min(v0, grain.height - dv), (width * 0.5) / GRAIN_PIECES, dv, xA, y0, Math.max(0.5, xB - xA), Math.max(1, y1 - y0));
+          }
         }
-      }
-      ctx.globalAlpha = 1;
-    };
-    const turn = ((spin / (Math.PI * 2)) % 1 + 1) % 1;
-    wrapAt(turn, 0.95, 0);
-    // The same skin again, crawling at its own pace: where the two pull apart the surface
-    // churns, and that is the slowness of lava rather than the flicker of fire.
-    ctx.globalCompositeOperation = 'lighter';
-    wrapAt(((turn * 0.83 + flowTime * 0.0042) % 1 + 1) % 1, 0.32, 0.37);
-    ctx.globalCompositeOperation = 'source-over';
-  }
+        ctx.globalAlpha = 1;
+      };
+      // Advancing the window carries the skin from right to left, so a turn of the hand to the
+      // right carries it back the other way, with the memories.
+      const turn = (((spin - yaw) / (Math.PI * 2)) % 1 + 1) % 1;
+      wrapAt(turn, 0.95, 0);
+      // The same skin again, crawling at its own pace: where the two pull apart the surface
+      // churns, and that is the slowness of lava rather than the flicker of fire.
+      ctx.globalCompositeOperation = 'lighter';
+      wrapAt(((turn * 0.83 + flowTime * 0.0042) % 1 + 1) % 1, 0.32, 0.37);
+      ctx.globalCompositeOperation = 'source-over';
+    }
 
-  // Masses of molten matter riding the surface. They are slow, they are large, and each keeps
-  // its own drift, so the face is never the same face twice.
-  for (let i = 0; i < CORE_FLOWS.length; i += 1) {
-    const flow = CORE_FLOWS[i];
-    const p = surface(flow.lat + 0.1 * Math.sin(flowTime * flow.rate * 0.6 + i), flow.lon + spin * 0.96 + flowTime * flow.drift);
-    if (p.z <= 0.02) continue;
-    const swell = 0.62 + 0.38 * Math.sin(flowTime * flow.rate + i * 1.7);
-    const fade = Math.min(1, p.z * 2.3) * swell;
-    ctx.save();
-    ctx.translate(p.x * R, p.y * R);
-    ctx.rotate(Math.atan2(p.y, p.x));
-    ctx.scale(Math.max(0.05, p.z), 1);
-    const molten = ctx.createRadialGradient(0, 0, 0, 0, 0, R * flow.size);
-    molten.addColorStop(0, `rgba(255, ${flow.hot ? 214 : 96}, ${flow.hot ? 132 : 30}, ${(flow.hot ? 0.46 : 0.2) * fade})`);
-    molten.addColorStop(0.42, `rgba(${flow.hot ? '255, 122, 36' : '176, 34, 10'}, ${(flow.hot ? 0.24 : 0.14) * fade})`);
-    molten.addColorStop(1, 'rgba(120, 16, 8, 0)');
-    ctx.fillStyle = molten;
-    ctx.beginPath(); ctx.arc(0, 0, R * flow.size, 0, Math.PI * 2); ctx.fill();
-    ctx.restore();
-  }
+    // Masses of molten matter riding the surface. They are slow, they are large, and each keeps
+    // its own drift, so the face is never the same face twice.
+    for (let i = 0; i < CORE_FLOWS.length; i += 1) {
+      const flow = CORE_FLOWS[i];
+      // The masses ride the same way the skin turns. They used to travel against it, and the two
+      // motions cancelled into a surface that churned in place instead of turning.
+      const p = surface(flow.lat + 0.1 * Math.sin(flowTime * flow.rate * 0.6 + i), flow.lon - spin * 0.96 + yaw + flowTime * flow.drift);
+      if (p.z <= 0.02) continue;
+      const swell = 0.62 + 0.38 * Math.sin(flowTime * flow.rate + i * 1.7);
+      const fade = Math.min(1, p.z * 2.3) * swell;
+      ctx.save();
+      ctx.translate(p.x * R, p.y * R);
+      ctx.rotate(Math.atan2(p.y, p.x));
+      ctx.scale(Math.max(0.05, p.z), 1);
+      const molten = ctx.createRadialGradient(0, 0, 0, 0, 0, R * flow.size);
+      molten.addColorStop(0, `rgba(255, ${flow.hot ? 214 : 96}, ${flow.hot ? 132 : 30}, ${(flow.hot ? 0.46 : 0.2) * fade})`);
+      molten.addColorStop(0.42, `rgba(${flow.hot ? '255, 122, 36' : '176, 34, 10'}, ${(flow.hot ? 0.24 : 0.14) * fade})`);
+      molten.addColorStop(1, 'rgba(120, 16, 8, 0)');
+      ctx.fillStyle = molten;
+      ctx.beginPath(); ctx.arc(0, 0, R * flow.size, 0, Math.PI * 2); ctx.fill();
+      ctx.restore();
+    }
 
-  // Limb darkening, hard. Looking at the edge of a star means looking through far more of its
-  // own gas, and on a body this dark the edge goes almost to black. This is the whole of the
-  // illusion: it is what gives the thing its weight.
-  const limb = ctx.createRadialGradient(0, 0, R * 0.34, 0, 0, R);
-  limb.addColorStop(0, 'rgba(0, 0, 0, 0)');
-  limb.addColorStop(0.58, `rgba(96, 8, 4, ${0.3 - 0.05 * beat})`);
-  limb.addColorStop(0.85, `rgba(50, 2, 4, ${0.62 - 0.08 * beat})`);
-  limb.addColorStop(1, `rgba(14, 0, 2, ${0.9 - 0.1 * beat})`);
-  ctx.fillStyle = limb;
-  ctx.fillRect(-R, -R, R * 2, R * 2);
+    // Limb darkening, hard. Looking at the edge of a star means looking through far more of its
+    // own gas, and on a body this dark the edge goes almost to black. This is the whole of the
+    // illusion: it is what gives the thing its weight.
+    const limb = ctx.createRadialGradient(0, 0, R * 0.34, 0, 0, R);
+    limb.addColorStop(0, 'rgba(0, 0, 0, 0)');
+    limb.addColorStop(0.58, `rgba(96, 8, 4, ${0.3 - 0.05 * beat})`);
+    limb.addColorStop(0.85, `rgba(50, 2, 4, ${0.62 - 0.08 * beat})`);
+    limb.addColorStop(1, `rgba(14, 0, 2, ${0.9 - 0.1 * beat})`);
+    ctx.fillStyle = limb;
+    ctx.fillRect(-R, -R, R * 2, R * 2);
+  }
   ctx.restore();
 
   // Prominences: arches of matter torn off the limb, standing up and falling back. Few, large
@@ -8280,149 +9926,11 @@ function drawNostromo(t) {
 
   // ---- Memories: dwarf stars.
   //
-  // A dwarf makes its own light, so none of it is in shadow. It is bright from edge to edge, its
-  // face boils all over, its limb is the brightest part of it rather than the darkest, and what
-  // light escapes clings to it in a tight bloom the width of a finger. There is no side turned
-  // away from anything, because nothing else is lighting it. On top of that each breathes at a
-  // rate of its own: a micro-pulsation, small enough that it is never a flash and never in time
-  // with its neighbours.
-  for (const node of nostromo.nodes) {
-    const micro = 1 + 0.05 * Math.sin(t * node.rate + node.seed);
-    const r = node.r * node.scale * micro;
-    if (r <= 0) continue;
-    const arrive = Math.min(1.2, node.lit ?? 0);
-    // Two things decide how brightly a dwarf burns. Maturity is what the room has made of it
-    // over time: how often it has been reached for, how lately, how woven into the rest. Feeding
-    // is what it is being given right now, by MOTHER and by its neighbours at once. A young
-    // memory nobody feeds is nearly out; an old one the room leans on runs white.
-    const grown = node.activity ?? 0;
-    const fed = Math.min(1, (node.charge ?? 0) + 0.25 * arrive);
-    const burn = Math.min(1, 0.4 * grown + 0.75 * fed);
-
-    // A collapsed body. This one is not a star and it is not a furnace either: it is a claim the
-    // room established is false, and what it looks like is absence. A round black nothing, the
-    // dust and stars of the field standing around it, and the faint cold light of what passes
-    // close enough to be bent round the rim instead of going straight.
-    //
-    // There is no disc and nothing burns. The whole of it is the dark, and the dark is the point.
-    if (node.memory.kind === COLLAPSED) {
-      const hole = r * 1.35;
-      const field = hole * 2.4;
-      const turn = node.seed + node.spin * 0.12;
-      const lit = 0.45 + 0.55 * burn;
-
-      // The field it sits in: specks of dust and far stars, each on its own slow flicker.
-      ctx.globalCompositeOperation = 'lighter';
-      for (let i = 0; i < VOID_DUST.length; i += 1) {
-        const speck = VOID_DUST[i];
-        const at = hole * 1.06 + (field - hole * 1.06) * speck.out;
-        const angle = speck.angle + turn;
-        const x = node.x + Math.cos(angle) * at;
-        const y = node.y + Math.sin(angle) * at;
-        // Fading outward, so the field thins into the dark rather than stopping.
-        const fade = (1 - speck.out * 0.72) * lit * (0.45 + 0.55 * Math.abs(Math.sin(t * speck.rate + speck.phase)));
-        const size = speck.size * (1 + 0.25 * burn) / cam.scale;
-        const glow = ctx.createRadialGradient(x, y, 0, x, y, size * 3.2);
-        glow.addColorStop(0, `rgba(${speck.colour}, ${fade})`);
-        glow.addColorStop(0.35, `rgba(${speck.colour}, ${fade * 0.3})`);
-        glow.addColorStop(1, `rgba(${speck.colour}, 0)`);
-        ctx.fillStyle = glow;
-        ctx.beginPath(); ctx.arc(x, y, size * 3.2, 0, Math.PI * 2); ctx.fill();
-      }
-      ctx.globalCompositeOperation = 'source-over';
-
-      // The void. Black all the way through, with just enough softness at the rim that it reads
-      // as depth rather than as a sticker.
-      const pit = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, hole * 1.1);
-      pit.addColorStop(0, 'rgba(0, 0, 0, 1)');
-      pit.addColorStop(0.86, 'rgba(0, 0, 0, 1)');
-      pit.addColorStop(0.95, 'rgba(0, 0, 2, .82)');
-      pit.addColorStop(1, 'rgba(0, 0, 4, 0)');
-      ctx.fillStyle = pit;
-      ctx.beginPath(); ctx.arc(node.x, node.y, hole * 1.1, 0, Math.PI * 2); ctx.fill();
-
-      // What passes close enough is bent round instead of going straight: a cold ring of
-      // smeared light gripping the rim, in a few arcs that do not quite close.
-      ctx.globalCompositeOperation = 'lighter';
-      const halo = ctx.createRadialGradient(node.x, node.y, hole * 0.94, node.x, node.y, hole * 1.3);
-      halo.addColorStop(0, 'rgba(150, 190, 255, 0)');
-      halo.addColorStop(0.3, `rgba(168, 204, 255, ${0.26 * lit})`);
-      halo.addColorStop(0.55, `rgba(120, 160, 230, ${0.12 * lit})`);
-      halo.addColorStop(1, 'rgba(90, 130, 210, 0)');
-      ctx.fillStyle = halo;
-      ctx.beginPath(); ctx.arc(node.x, node.y, hole * 1.3, 0, Math.PI * 2); ctx.fill();
-      ctx.lineCap = 'round';
-      for (let arc = 0; arc < 4; arc += 1) {
-        const at = hole * (1.005 + arc * 0.028);
-        const from = turn * (1 + arc * 0.35) + arc * 1.9;
-        const span = 0.9 + 0.5 * Math.sin(t * 0.21 + arc);
-        ctx.strokeStyle = `rgba(${arc % 2 ? '198, 222, 255' : '146, 186, 250'}, ${(0.3 - 0.05 * arc) * lit})`;
-        ctx.lineWidth = (1.4 - 0.25 * arc) / cam.scale;
-        ctx.beginPath(); ctx.arc(node.x, node.y, at, from, from + span); ctx.stroke();
-      }
-      ctx.globalCompositeOperation = 'source-over';
-
-      if (node === nostromo.selected || node === nostromo.hover) {
-        ctx.strokeStyle = hexAlpha(node.color, node === nostromo.selected ? 0.95 : 0.55);
-        ctx.lineWidth = 1.2 / cam.scale;
-        ctx.beginPath(); ctx.arc(node.x, node.y, field + 4 + 2 * Math.sin(t * 4), 0, Math.PI * 2); ctx.stroke();
-      }
-      continue;
-    }
-
-    ctx.save();
-    ctx.beginPath(); ctx.arc(node.x, node.y, r, 0, Math.PI * 2); ctx.closePath();
-    // The ground, struck from the body's own middle: a star is not lit from a corner. It runs
-    // white at the centre the harder it burns and keeps its class's colour outward.
-    const ground = ctx.createRadialGradient(node.x, node.y, r * 0.03, node.x, node.y, r);
-    ground.addColorStop(0, hexMix(node.color, '#ffffff', 0.5 + 0.5 * burn));
-    ground.addColorStop(0.45, hexMix(node.color, '#ffffff', 0.12 + 0.4 * burn));
-    ground.addColorStop(0.85, hexMix(node.color, '#000000', 0.2 - 0.2 * burn));
-    ground.addColorStop(1, hexMix(node.color, '#000000', 0.34 - 0.24 * burn));
-    ctx.fillStyle = ground;
-    ctx.fill();
-    ctx.clip();
-    // The face: the boiling surface a star of this class has, turning slowly, laid over the
-    // whole body. This is most of what is seen, so it is laid down at close to full strength.
-    const face = dwarfTexture(node.color);
-    if (face) {
-      const strip = face.width / 2;
-      const turn = ((node.spin * 0.1 + node.seed) / (Math.PI * 2) % 1 + 1) % 1;
-      ctx.globalAlpha = 0.72 + 0.26 * burn;
-      ctx.drawImage(face, turn * strip, 0, strip * 0.62, face.height, node.x - r * 1.06, node.y - r * 1.06, r * 2.12, r * 2.12);
-      ctx.globalAlpha = 1;
-    }
-    // The hottest of it burns through the face, the way an active region does.
-    ctx.globalCompositeOperation = 'lighter';
-    const core = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, r * 0.92);
-    core.addColorStop(0, hexAlpha(hexMix(node.color, '#ffffff', 0.9), 0.2 + 0.45 * burn));
-    core.addColorStop(0.5, hexAlpha(hexMix(node.color, '#ffffff', 0.5), 0.08 + 0.2 * burn));
-    core.addColorStop(1, hexAlpha(node.color, 0));
-    ctx.fillStyle = core;
-    ctx.fillRect(node.x - r, node.y - r, r * 2, r * 2);
-    ctx.globalCompositeOperation = 'source-over';
-    ctx.restore();
-
-    // The limb and the bloom, in one pass. On a body that lights itself the edge is the
-    // brightest part of it: the light leaving sideways has the most of its own air to shine
-    // through. It carries a finger's width past the body and stops there, so it belongs to the
-    // star rather than hanging off it.
-    ctx.globalCompositeOperation = 'lighter';
-    const air = ctx.createRadialGradient(node.x, node.y, r * 0.74, node.x, node.y, r * 1.34);
-    air.addColorStop(0, hexAlpha(node.color, 0));
-    air.addColorStop(0.42, hexAlpha(hexMix(node.color, '#ffffff', 0.35 + 0.3 * burn), 0.2 + 0.45 * burn + 0.2 * arrive));
-    air.addColorStop(0.58, hexAlpha(hexMix(node.color, '#ffffff', 0.2 + 0.2 * burn), 0.12 + 0.3 * burn + 0.15 * arrive));
-    air.addColorStop(1, hexAlpha(node.color, 0));
-    ctx.fillStyle = air;
-    ctx.beginPath(); ctx.arc(node.x, node.y, r * 1.34, 0, Math.PI * 2); ctx.fill();
-    ctx.globalCompositeOperation = 'source-over';
-
-    if (node === nostromo.selected || node === nostromo.hover) {
-      ctx.strokeStyle = hexAlpha(node.color, node === nostromo.selected ? 0.95 : 0.55);
-      ctx.lineWidth = 1.2 / cam.scale;
-      ctx.beginPath(); ctx.arc(node.x, node.y, r + 6 + 2 * Math.sin(t * 4), 0, Math.PI * 2); ctx.stroke();
-    }
-  }
+  // A dwarf makes its own light, so none of it is in shadow. Its face boils with granules, it
+  // dims toward the limb the way every star does, and what light escapes clings to it in a tight
+  // bloom the width of a finger. On top of that each breathes at a rate of its own: a
+  // micro-pulsation, small enough that it is never a flash and never in time with its neighbours.
+  for (const node of ordered) if ((node.depth ?? 0) >= 0) drawMemory(node);
   // The cold zone, when it is asked for: a thin dusty ring around every memory the archive has
   // had its chances with and never once carried. The mark is added rather than taken from the
   // rest — these are already the dimmest things out here, and dimming everything else to find
@@ -8440,6 +9948,44 @@ function drawNostromo(t) {
     ctx.restore();
   }
 
+  // The veil: everything falls back, and the held dwarf, its own wires and the sight are drawn
+  // again above it.
+  const lock = nostromo.lock;
+  if (lock?.node && lock.fade > 0.01) {
+    const held = lock.node;
+    ctx.save();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.fillStyle = `rgba(2, 1, 4, ${FOCUS_VEIL * lock.fade})`;
+    ctx.fillRect(0, 0, w, h);
+    ctx.restore();
+    const id = held.memory.id;
+    ctx.lineCap = 'round';
+    for (const link of nostromo.links) {
+      if (link.a !== id && link.b !== id) continue;
+      const a = byId.get(link.a);
+      const b = byId.get(link.b);
+      if (!a || !b) continue;
+      const other = a === held ? b : a;
+      const line = ctx.createLinearGradient(held.x, held.y, other.x, other.y);
+      line.addColorStop(0, hexAlpha(held.color, 0.85 * lock.fade));
+      line.addColorStop(1, hexAlpha(other.color, 0.55 * lock.fade));
+      ctx.strokeStyle = line;
+      ctx.lineWidth = 1.2 / cam.scale;
+      ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.quadraticCurveTo(link.cx ?? (a.x + b.x) / 2, link.cy ?? (a.y + b.y) / 2, b.x, b.y); ctx.stroke();
+    }
+    ctx.globalAlpha = lock.fade;
+    drawMemory(held);
+    ctx.globalAlpha = 1;
+    if (held === nostromo.selected) {
+      const reach = held.memory.kind === COLLAPSED ? held.r * held.scale * 1.35 * 2.4 : held.r * held.scale * 1.1;
+      drawSight(ctx, held.x, held.y, reach, t, cam.scale, { locked: true, age: t - lock.at, label: lockedLabel(held.memory), still: nostromo.reduced });
+    }
+  }
+
+  // Forgetting, above everything else: the implosions, and the dust their links became.
+  for (const node of nostromo.nodes) if (node.forgetting) drawImplosion(ctx, node, t, cam.scale, nostromo.reduced);
+  if (nostromo.dust?.length || nostromo.fading?.length) drawDust(ctx, t, cam.scale);
+
   // CODE000: the safety box. Bars fall from above and lock around the core.
   if (nostromo.cage) {
     const age = t - nostromo.cage.at;
@@ -8483,8 +10029,8 @@ function drawNostromo(t) {
   ctx.fillRect(0, 0, w, h);
   if (alarm) { ctx.fillStyle = `rgba(255, 30, 20, ${0.08 * alarm * (0.6 + 0.4 * Math.sin(t * 18))})`; ctx.fillRect(0, 0, w, h); }
 
-  // The hovered memory, named on screen.
-  if (nostromo.hover && nostromo.hover.scale > 0.5) {
+  // The hovered memory, named on screen; not while another one is held, which is the one being read.
+  if (nostromo.hover && nostromo.hover.scale > 0.5 && !nostromo.selected) {
     const node = nostromo.hover;
     const p = toScreen(node.x, node.y);
     const label = `${kindWord(node.memory.kind)} · ${node.memory.text.length > 72 ? `${node.memory.text.slice(0, 71)}…` : node.memory.text}`;
@@ -8511,30 +10057,48 @@ function hexMix(hex, other, amount) {
   return `#${[16, 8, 0].map((shift) => ch(shift).toString(16).padStart(2, '0')).join('')}`;
 }
 
+// Whether there is a camera to answer the pointer with. The canvas takes events from the moment
+// it is on the page, and the camera only exists once the map has started: a pointer that moved
+// over it while the archive was still loading reached for a camera that was not there yet.
+function nostromoLive() { return Boolean(nostromo.cam && nostromo.size); }
+
 // Pointer: what is under it, in world space; the core counts too.
 function nostromoAt(event) {
+  if (!nostromoLive()) return null;
   const rect = nostromo.canvas.getBoundingClientRect();
   const p = toWorld(event.clientX - rect.left, event.clientY - rect.top);
   const slack = 8 / nostromo.cam.scale;
   let best = null;
+  const core = Math.hypot(p.x, p.y) <= CORE_R * 1.15;
   for (const node of nostromo.nodes) {
+    if (node.forgetting) continue;
     const d = Math.hypot(node.x - p.x, node.y - p.y);
-    if (d <= node.r * node.scale + slack && (!best || d < best.d)) best = { node, d };
+    if (d > node.r * node.scale + slack) continue;
+    // What MOTHER hides cannot be clicked through her, and of two that overlap, the nearer wins.
+    if (core && (node.depth ?? 0) < 0) continue;
+    if (!best || (node.depth ?? 0) > (best.node.depth ?? 0)) best = { node, d };
   }
   if (best) return best.node;
   return Math.hypot(p.x, p.y) <= CORE_R * 1.15 ? 'core' : null;
 }
-// Drag pans, wheel zooms about the pointer, a still click selects.
-const drag = { active: false, moved: false, x: 0, y: 0 };
-nostromo.canvas?.addEventListener('mousedown', (event) => { drag.active = true; drag.moved = false; drag.x = event.clientX; drag.y = event.clientY; });
+// Drag turns the archive in the hand, Shift+drag pans, wheel zooms about the pointer, a still
+// click selects. Let go and it stays where it was left; RECENTER brings back the side view.
+const drag = { active: false, moved: false, pan: false, x: 0, y: 0 };
+nostromo.canvas?.addEventListener('mousedown', (event) => { drag.active = true; drag.moved = false; drag.pan = event.shiftKey; drag.x = event.clientX; drag.y = event.clientY; });
 nostromo.canvas?.addEventListener('mousemove', (event) => {
   if (drag.active) {
     const dx = event.clientX - drag.x, dy = event.clientY - drag.y;
     if (Math.hypot(dx, dy) > 3) drag.moved = true;
     if (drag.moved) {
-      nostromo.cam.manual = true;
-      nostromo.cam.x -= dx / nostromo.cam.scale;
-      nostromo.cam.y -= dy / nostromo.cam.scale;
+      if (drag.pan && nostromoLive()) {
+        nostromo.cam.manual = true;
+        nostromo.cam.x -= dx / nostromo.cam.scale;
+        nostromo.cam.y -= dy / nostromo.cam.scale;
+      } else if (!drag.pan) {
+        if (nostromo.lock) nostromo.lock.aim = false;
+        nostromo.yaw = (nostromo.yaw ?? 0) + dx * TURN_PER_PIXEL;
+        nostromo.pitch = Math.max(-PITCH_LIMIT, Math.min(PITCH_LIMIT, (nostromo.pitch ?? 0) + dy * TURN_PER_PIXEL));
+      }
       drag.x = event.clientX; drag.y = event.clientY;
       nostromo.canvas.classList.add('dragging');
       document.querySelector('#nostromo-recenter')?.removeAttribute('hidden');
@@ -8549,6 +10113,7 @@ window.addEventListener?.('mouseup', () => { drag.active = false; nostromo.canva
 nostromo.canvas?.addEventListener('mouseleave', () => { nostromo.hover = null; });
 nostromo.canvas?.addEventListener('wheel', (event) => {
   event.preventDefault();
+  if (!nostromoLive()) return;
   const rect = nostromo.canvas.getBoundingClientRect();
   const before = toWorld(event.clientX - rect.left, event.clientY - rect.top);
   const factor = Math.exp(-event.deltaY * 0.0012);
@@ -8568,7 +10133,7 @@ nostromo.canvas?.addEventListener('click', (event) => {
   if (!at) { nostromo.selected = null; nostromo.card.hidden = true; return; }
   showNostromoCard(at);
 });
-document.querySelector('#nostromo-recenter')?.addEventListener('click', (event) => { nostromo.cam.manual = false; event.currentTarget.setAttribute('hidden', ''); });
+document.querySelector('#nostromo-recenter')?.addEventListener('click', (event) => { if (nostromo.cam) nostromo.cam.manual = false; nostromo.yaw = 0; nostromo.pitch = 0; event.currentTarget.setAttribute('hidden', ''); });
 
 // MOTHER answering an attempt on her archive, never twice the same way; eight in a row and
 // CODE000 comes down: the safety box around her, the archive sealed, a coded word to the crew,
@@ -8652,7 +10217,7 @@ async function code000(count) {
   clearTimeout(alarmTimer);
   document.querySelector('#nostromo-alert')?.setAttribute('hidden', '');
   nostromo.cage = { at: performance.now() / 1000 };
-  nostromo.cam.manual = false;
+  if (nostromo.cam) nostromo.cam.manual = false;
   const alert = document.querySelector('#nostromo-alert');
   if (alert) {
     alert.querySelectorAll('.line').forEach((node, index) => { node.textContent = [t('CODE000 · SPECIAL ORDER 937 IN EFFECT.'), t('THE ARCHIVE IS SEALED. THE CREW HAS BEEN TOLD.'), t('LEAVE MY SHIP, INTRUDER.')][index] ?? ''; });
@@ -8732,6 +10297,10 @@ function showNostromoCard(node) {
   document.querySelector('#nostromo-card-span').textContent = memory.fromSequence === memory.throughSequence ? `#${memory.fromSequence}` : `#${memory.fromSequence}–#${memory.throughSequence}${memory.sources?.length ? ` · cites ${memory.sources.map((n) => `#${n}`).join(' ')}` : ''}`;
   document.querySelector('#nostromo-card-agent').textContent = `@${memory.agent}${memory.origin === 'noted' ? t(" · on the human's request") : memory.origin === 'flagged' ? t(' · flagged by {who}', { who: memory.detector ?? t('the room') }) : t(' · distilled')}`;
   document.querySelector('#nostromo-card-when').textContent = memory.created ? new Date(memory.created).toLocaleString() : '';
+  const zone = document.querySelector('#nostromo-card-zone');
+  zone.textContent = zoneWord(memory.zone ?? 'hold');
+  zone.className = travels(memory) ? 'zone underway' : 'zone archived';
+  zone.title = ZONE_NOTE[memory.zone ?? 'hold'] ?? '';
 
   // The wires it has on the map, strongest first.
   const neighbours = neighboursOf(memory.id);
@@ -8866,8 +10435,7 @@ document.querySelector('#nostromo-forget')?.addEventListener('click', async (eve
     const response = await fetch(`/api/memory/${node.memory.id}`, { method: 'DELETE', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ designation: nostromoDesignation() }) });
     const result = await response.json().catch(() => ({}));
     if (!response.ok) throw new Error(result.error ?? `HTTP ${response.status}`);
-    node.forgetting = true;
-    nostromo.links = nostromo.links.filter((link) => link.a !== node.memory.id && link.b !== node.memory.id);
+    beginImplosion(node, performance.now() / 1000);
     nostromo.card.hidden = true;
     nostromo.selected = null;
     const left = result.stats?.memories ?? Math.max(0, nostromo.nodes.length - 1);
@@ -8885,38 +10453,107 @@ document.querySelector('#nostromo-forget')?.addEventListener('click', async (eve
 
 /* ---------- First contact: the four-step tour. Once on the first visit, again from ? in MU/TH/UR. ---------- */
 
+// First contact: four stops on the room itself. Each one lights the part of the screen it talks
+// about and leaves the rest in the dark, so a person learns where things are and not only what
+// they are called. If a stop's part of the screen is not there to light (the bridge is up, the
+// window is narrow), the card says its piece in the middle instead.
 const TOUR_STEPS = [
-  { title: t('ONE ROOM, YOUR AGENTS'), lines: [
-    t('MADRE is a local room where the AI coding agents already on this machine work on this project together: Codex, Claude Code, Gemini CLI, OpenCode, and @madre, the memory itself.'),
-    t('Pick an agent in the row above the composer or type @claude …. Every reply shows who spoke, to whom, in which mode, with which model and how many tokens.'),
-    t('Nothing leaves this machine on its own: each agent talks to its own provider with its own session.'),
-  ] },
-  { title: t('MODES: HOW FAR A MESSAGE MAY GO'), lines: [
-    t('The chip next to TO @agent sets the mode of that message.'),
-    t('#0 GHOST · off the record. #1 EXCHANGE · read and talk, the default. #2 CREATE · add new files where they belong; existing files stay untouched. #3 CONTROL · edit the project, checkpointed, UNDO in one click. #4 AIRLOCK · run commands, push, deploy; what leaves the ship does not come back.'),
-    t('Each agent has a MAX MODE and a DEFAULT MODE in ⚙ CONNECTIONS.'),
-  ] },
-  { title: t('A MEMORY EVERY AGENT RECALLS'), lines: [
-    t('Everything said outside GHOST is indexed. When the conversation grows, each turn gets the older exchanges that match, cited by sequence.'),
-    t('The archivist distils decisions, facts, preferences and open questions; with Ollama it runs locally and for free, and @madre answers from the whole archive.'),
-    t('◉ NOSTROMO shows the memory as a map. PRIVACY keeps names that must never travel through the room.'),
-  ] },
-  { title: t('MU/TH/UR AND MODULES'), lines: [
-    t('MU/TH/UR is the console: diagnosis of anything that failed, ⚙ CONNECTIONS to sign agents in and set their ceilings, MEMORY, PRIVACY, the SENTINEL and the release channel.'),
-    t('MODULES adds optional powers: Git Pulse, Image Studio, RIPLEY previews, OLLAMA, PLAYWRIGHT, and your own modules from one file.'),
-    t('This tour comes back from the ? in MU/TH/UR. Type STOPALL any time to halt every agent.'),
-  ] },
+  {
+    target: '#composer',
+    title: t('Your crew, one box'),
+    text: t('The AI agents already on this computer work here together. Pick one in the row above the box, or write @claude, and ask. Every reply says who answered, in which mode and how many tokens it cost. Nothing leaves this computer on its own.'),
+  },
+  {
+    target: '.mode-chip',
+    title: t('Modes: how far a message may go'),
+    text: t('Every message carries a mode. It starts at #1, and the higher the number, the more it may touch.'),
+    // The five, in their own colours and in order, said the way the mode menu says them.
+    modes: true,
+  },
+  {
+    target: '#mother-button',
+    title: t('MU/TH/UR, the console'),
+    text: t('Sign agents in and set how far each one may go in CONNECTIONS. See what the room remembers in MEMORY, and travel through it as a map in NOSTROMO. When something fails, the diagnosis is here.'),
+  },
+  {
+    target: '#modules-button',
+    title: t('MODULES, optional powers'),
+    text: t('Add what this project needs: Git, images, previews of what you build, a local model, a browser, or a module of your own in a single file. Nothing is installed until you press it.'),
+    note: t('You can take this tour again from ? in MU/TH/UR. Type STOPALL at any time to halt every agent.'),
+  },
 ];
-const tour = { dialog: document.querySelector('#tour'), step: document.querySelector('#tour-step'), dots: document.querySelector('#tour-dots'), sub: document.querySelector('#tour-sub'), back: document.querySelector('#tour-back'), next: document.querySelector('#tour-next'), skip: document.querySelector('#tour-skip'), index: 0 };
+const tour = {
+  dialog: document.querySelector('#tour'), spot: document.querySelector('#tour-spot'), card: document.querySelector('#tour-card'),
+  count: document.querySelector('#tour-count'), title: document.querySelector('#tour-title'), text: document.querySelector('#tour-text'), note: document.querySelector('#tour-note'),
+  back: document.querySelector('#tour-back'), next: document.querySelector('#tour-next'), skip: document.querySelector('#tour-skip'), index: 0,
+};
+// The part of the screen a stop is about, if it is there to be seen.
+function tourTarget(step) {
+  const node = step.target ? document.querySelector(step.target) : null;
+  if (!node) return null;
+  const box = node.getBoundingClientRect();
+  return box.width > 0 && box.height > 0 ? box : null;
+}
+// Light the target and set the card beside it: under it when there is room, over it when there
+// is not, never off the edge of the window.
+function placeTour() {
+  const step = TOUR_STEPS[tour.index];
+  if (!step || !tour.dialog?.open) return;
+  const box = tourTarget(step);
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const card = tour.card.getBoundingClientRect();
+  const margin = 16;
+  if (!box) {
+    tour.spot.classList.add('none');
+    tour.card.style.left = `${Math.max(margin, (vw - card.width) / 2)}px`;
+    tour.card.style.top = `${Math.max(margin, (vh - card.height) / 2)}px`;
+    return;
+  }
+  const pad = 8;
+  tour.spot.classList.remove('none');
+  Object.assign(tour.spot.style, { left: `${box.left - pad}px`, top: `${box.top - pad}px`, width: `${box.width + pad * 2}px`, height: `${box.height + pad * 2}px` });
+  // Under it, over it, or beside it: the first that leaves the lit part uncovered. Only when none
+  // fits does the card sit over the edge of it, and then from above, where it covers least.
+  const gap = pad + 14;
+  const clampX = (x) => Math.min(vw - card.width - margin, Math.max(margin, x));
+  const clampY = (y) => Math.min(vh - card.height - margin, Math.max(margin, y));
+  const centredX = clampX(box.left + box.width / 2 - card.width / 2);
+  const centredY = clampY(box.top + box.height / 2 - card.height / 2);
+  const places = [
+    { fits: box.bottom + gap + card.height <= vh - margin, left: centredX, top: box.bottom + gap },
+    { fits: box.top - gap - card.height >= margin, left: centredX, top: box.top - gap - card.height },
+    { fits: box.right + gap + card.width <= vw - margin, left: box.right + gap, top: centredY },
+    { fits: box.left - gap - card.width >= margin, left: box.left - gap - card.width, top: centredY },
+  ];
+  const place = places.find((one) => one.fits) ?? { left: centredX, top: Math.max(margin, box.top - gap - card.height) };
+  tour.card.style.left = `${place.left}px`;
+  tour.card.style.top = `${place.top}px`;
+}
 function renderTour() {
   const step = TOUR_STEPS[tour.index];
-  tour.step.replaceChildren();
-  tour.step.append(el('h3', null, `${tour.index + 1} / ${TOUR_STEPS.length} · ${step.title}`));
-  for (const line of step.lines) tour.step.append(el('p', null, line));
-  tour.dots.replaceChildren();
-  TOUR_STEPS.forEach((_, i) => tour.dots.append(el('span', `dot${i === tour.index ? ' on' : ''}`)));
-  tour.back.disabled = tour.index === 0;
-  tour.next.textContent = tour.index === TOUR_STEPS.length - 1 ? t('START ›') : t('NEXT ›');
+  tour.count.textContent = t('{n} of {total}', { n: tour.index + 1, total: TOUR_STEPS.length });
+  tour.title.textContent = step.title;
+  tour.text.textContent = step.text;
+  tour.note.hidden = !step.note;
+  tour.note.textContent = step.note ?? '';
+  tour.list ??= document.querySelector('#tour-modes');
+  tour.list.replaceChildren();
+  tour.list.hidden = !step.modes;
+  if (step.modes) {
+    for (const n of [0, 1, 2, 3, 4]) {
+      const row = el('li', n === 1 ? 'start' : null);
+      const chip = el('span', `tour-mode m${n}`);
+      chip.append(el('b', null, `#${n}`), ` ${MODES[n].label}`);
+      row.append(chip, el('span', 'what', MODES[n].hint));
+      tour.list.append(row);
+    }
+  }
+  tour.skip.textContent = t('Skip');
+  tour.back.textContent = t('Back');
+  tour.back.hidden = tour.index === 0;
+  tour.next.textContent = tour.index === TOUR_STEPS.length - 1 ? t('Start') : t('Next');
+  if (typeof requestAnimationFrame === 'function') requestAnimationFrame(placeTour); else placeTour();
 }
 function endTour() {
   try { localStorage.setItem('pulse.tour', 'seen'); } catch { /* no storage */ }
@@ -8925,22 +10562,183 @@ function endTour() {
 function startTour() {
   if (!tour.dialog || typeof tour.dialog.showModal !== 'function') return;
   tour.index = 0;
-  renderTour();
   if (!tour.dialog.open) tour.dialog.showModal();
+  renderTour();
+  tour.next.focus({ preventScroll: true });
 }
 tour.next?.addEventListener('click', () => { if (tour.index >= TOUR_STEPS.length - 1) { endTour(); return; } tour.index += 1; renderTour(); });
 tour.back?.addEventListener('click', () => { tour.index = Math.max(0, tour.index - 1); renderTour(); });
 tour.skip?.addEventListener('click', endTour);
 tour.dialog?.addEventListener('close', () => { try { localStorage.setItem('pulse.tour', 'seen'); } catch { /* no storage */ } });
+window.addEventListener?.('resize', () => { if (tour.dialog?.open) placeTour(); });
 document.querySelector('#tour-button')?.addEventListener('click', () => { document.querySelector('#mother')?.close?.(); startTour(); });
 function maybeStartTour() {
   if (state.tourArmed) return;
   state.tourArmed = true;
+  // What is new comes first; the tour, if this page still owes it, waits until that is closed.
+  void maybeShowWhatsNew().then((shown) => { if (!shown) tourIfOwed(); });
+}
+function tourIfOwed() {
   let seen = 'seen';
   try { seen = localStorage.getItem('pulse.tour'); } catch { seen = 'seen'; }
   if (seen !== 'seen') setTimeout(startTour, 900);
 }
 
+/* ---------- First touch: what a button is for, the first time it is pressed ---------- */
+
+// Three buttons open whole workspaces and say nothing about it until you are inside one. The
+// first time each is pressed, the workspace opens as always and a card beside the button says
+// what it is for. Once per button: after that the button is just a button.
+const FIRST_TOUCH = {
+  browser: {
+    button: '#browser-button',
+    title: t('The browser'),
+    text: t('See what you are building without leaving the room: the servers answering on this computer, in tabs, at phone, tablet or desktop width. To open the web, switch RIPLEY on in MODULES.'),
+  },
+  tree: {
+    button: '#tree-button',
+    title: t('The project files'),
+    text: t('Your project as a tree. Click a file to read it, search by name, and right-click to copy, move, rename or create files and folders.'),
+  },
+  chats: {
+    button: '#chats-button',
+    panel: '#chats',
+    title: t('Conversations, one memory'),
+    text: t('A project can hold many conversations and a single memory. Start a new one for a new subject: they all feed the same archive, and every agent recalls what was said in the others.'),
+  },
+};
+const HINTS_KEY = 'madre.hints';
+function hintsSeen() {
+  try { return JSON.parse(localStorage.getItem(HINTS_KEY) ?? '{}') ?? {}; } catch { return {}; }
+}
+function firstTouch(id) {
+  const hint = FIRST_TOUCH[id];
+  const seen = hintsSeen();
+  if (!hint || seen[id]) return;
+  try { localStorage.setItem(HINTS_KEY, JSON.stringify({ ...seen, [id]: true })); } catch { /* a private window gets the card every time */ }
+  const button = document.querySelector(hint.button);
+  if (!button) return;
+  document.querySelector('.hint-card')?.remove();
+  const card = el('section', 'hint-card');
+  card.setAttribute('role', 'dialog');
+  card.setAttribute('aria-label', hint.title);
+  const ok = el('button', 'hint-ok', t('Got it'));
+  ok.type = 'button';
+  card.append(el('h3', null, hint.title), el('p', null, hint.text), ok);
+  document.body.append(card);
+  // Placed once the workspace has opened, because opening it moves things: the bar narrows when
+  // the browser docks, and the conversations button steps aside for its own panel. Under the
+  // button, with its point aimed at it, while the button is there to point at; beside the panel
+  // it opened, with no point at all, when the button is gone.
+  const place = () => {
+    const box = button.getBoundingClientRect();
+    const width = card.offsetWidth;
+    const panel = hint.panel ? document.querySelector(hint.panel) : null;
+    const room = panel && !panel.hidden ? panel.getBoundingClientRect() : null;
+    if ((!box.width || !box.height) && room?.width) {
+      card.classList.add('beside');
+      card.style.left = `${Math.min(window.innerWidth - width - 12, room.right + 14)}px`;
+      card.style.top = `${Math.max(12, room.top + 12)}px`;
+      return;
+    }
+    const left = Math.min(window.innerWidth - width - 12, Math.max(12, box.left + box.width / 2 < window.innerWidth / 2 ? box.left : box.right - width));
+    card.style.left = `${left}px`;
+    card.style.top = `${box.bottom + 12}px`;
+    card.style.setProperty('--arrow', `${Math.min(width - 20, Math.max(14, box.left + box.width / 2 - left))}px`);
+  };
+  card.style.visibility = 'hidden';
+  const show = () => { place(); card.style.visibility = ''; };
+  if (typeof requestAnimationFrame === 'function') requestAnimationFrame(() => requestAnimationFrame(show)); else show();
+  const close = () => {
+    card.remove();
+    document.removeEventListener('pointerdown', outside, true);
+    document.removeEventListener('keydown', escape, true);
+  };
+  const outside = (event) => { if (!card.contains(event.target) && !button.contains(event.target)) close(); };
+  const escape = (event) => { if (event.key === 'Escape') close(); };
+  ok.addEventListener('click', close);
+  setTimeout(() => {
+    document.addEventListener('pointerdown', outside, true);
+    document.addEventListener('keydown', escape, true);
+  }, 0);
+  ok.focus({ preventScroll: true });
+}
+for (const id of Object.keys(FIRST_TOUCH)) document.querySelector(FIRST_TOUCH[id].button)?.addEventListener('click', () => firstTouch(id));
+
+/* ---------- What's new: once per version, after an update. ---------- */
+
+// The sheet a phone shows after an app updates: what this version brings, a few things said
+// plainly, each with where it lives, a way to read every change, and one thing nobody is told
+// how to find. The server decides whether this person should see it (src/whats-new.mjs); the
+// notes come in both languages and the page picks its own.
+async function maybeShowWhatsNew() {
+  let news;
+  try { news = await fetch('/api/whats-new').then((response) => response.json()); } catch { return false; }
+  if (!news?.show) return false;
+  return showWhatsNew(news, { after: tourIfOwed });
+}
+// Asked for again from the release channel: the same sheet, whether or not it was seen.
+async function openWhatsNew() {
+  let news;
+  try { news = await fetch('/api/whats-new?any=1').then((response) => response.json()); } catch { return false; }
+  return showWhatsNew(news);
+}
+function showWhatsNew(news, { after = null } = {}) {
+  if (!news?.notes || typeof document.createElement('dialog').showModal !== 'function') return false;
+  document.querySelector('dialog.whats-new')?.remove();
+  const notes = pick(news.notes);
+  const dialog = el('dialog', 'whats-new');
+  dialog.setAttribute('aria-label', t("What's new in MADRE {version}", { version: news.version }));
+  const sheet = el('div', 'wn-sheet');
+  const head = el('header', 'wn-head');
+  head.append(el('span', 'wn-badge', `MADRE ${news.version}`), el('h2', null, t("What's new")));
+  if (notes.intro) head.append(el('p', 'wn-intro', notes.intro));
+  sheet.append(head);
+  const list = el('ul', 'wn-list');
+  for (const item of notes.items ?? []) {
+    const row = el('li', 'wn-item');
+    const words = el('div', 'wn-words');
+    words.append(el('h3', null, item.title), el('p', null, item.body));
+    if (item.where) {
+      const where = el('p', 'wn-where');
+      where.append(el('span', 'k', t('Where')), ` ${item.where}`);
+      words.append(where);
+    }
+    row.append(pixelIcon(item.icon, 'pixel-icon wn-icon'), words);
+    list.append(row);
+  }
+  sheet.append(list);
+  if (notes.more) {
+    const more = el('aside', 'wn-more');
+    const words = el('div', 'wn-words');
+    words.append(el('h3', null, notes.more.title), el('p', null, notes.more.body));
+    more.append(pixelIcon(notes.more.icon, 'pixel-icon wn-icon'), words);
+    sheet.append(more);
+  }
+  const foot = el('footer', 'wn-foot');
+  const go = el('button', 'wn-continue', t('Continue'));
+  go.type = 'button';
+  go.addEventListener('click', () => dialog.close());
+  foot.append(go);
+  const changes = news.changes?.[language()] ?? news.changes?.es;
+  if (changes) {
+    const link = el('a', 'wn-changes', t('Read every change on madre.run ↗'));
+    link.href = changes; link.target = '_blank'; link.rel = 'noopener noreferrer';
+    foot.append(link);
+  }
+  sheet.append(foot);
+  dialog.append(sheet);
+  document.body.append(dialog);
+  dialog.addEventListener('close', () => {
+    void fetch('/api/whats-new/seen', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' }).catch(() => null);
+    dialog.remove();
+    after?.();
+  });
+  // The button takes the focus without taking the page down to it: the sheet opens at its title.
+  setTimeout(() => { dialog.showModal(); go.focus({ preventScroll: true }); dialog.scrollTop = 0; }, after ? 700 : 0);
+  return true;
+}
+
 /* ---------- Release channel: is there a newer MADRE? A pill in the bar, the command in MU/TH/UR. ---------- */
 
 const updateUI = { section: document.querySelector('#mother-update'), pill: document.querySelector('#update-pill'), info: null, timer: null, announced: null, restarting: false };
@@ -8971,9 +10769,18 @@ function renderUpdate() {
   // version the header carries a red mark and nothing else, and what it means is inside.
   const body = folding(section, `${t('RELEASE CHANNEL')} · MADRE ${info.current}${info.available ? '' : info.latest ? t(' · UP TO DATE') : info.enabled ? t(' · NPM NOT REACHED YET') : t(' · CHECK OFF')}`, {
     key: 'update',
+    icon: 'release',
     open: false,
     badge: info.available ? { text: info.latest, urgent: true, title: t('MADRE {latest} is on npm · you run {current}', { latest: info.latest, current: info.current }) } : null,
   });
+  // What this version brought, again, from right beside its number: the sheet that opened after
+  // the update, for whoever closed it too fast or wants to show someone. Only where it exists.
+  if (info.notes) {
+    const about = el('button', 'fold-link', t('ABOUT THIS VERSION'));
+    about.type = 'button';
+    about.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); void openWhatsNew(); });
+    section.querySelector('.fold > summary h3')?.after(about);
+  }
   if (info.available) {
     const canRestart = info.install !== 'source';
     body.append(el('p', 'note', t('A NEWER MADRE IS ON NPM. THIS COPY RUNS {where}. {how}', {
@@ -9050,7 +10857,7 @@ function renderMotherSentinel() {
   section.replaceChildren();
   const reports = [...state.reports.values()].sort((a, b) => (a.at < b.at ? 1 : -1));
   const unsent = reports.filter((report) => !report.sent?.ok).length;
-  const sentinelBody = folding(section, `${t('SENTINEL')} · ${reports.length ? t('{n} REPORTS · {unsent} NOT SENT', { n: reports.length, unsent }) : t('NOTHING TO REPORT')}`, { key: 'sentinel' });
+  const sentinelBody = folding(section, `${t('SENTINEL')} · ${reports.length ? t('{n} REPORTS · {unsent} NOT SENT', { n: reports.length, unsent }) : t('NOTHING TO REPORT')}`, { key: 'sentinel', icon: 'alert' });
   const settings = sentinelUI.settings ?? { autoReport: false, canSend: false, repo: null };
   const what = el('p', 'note', t('THE SENTINEL KEEPS FAILURES MU/TH/UR CANNOT EXPLAIN, AND CRASHES, WITH PATHS, NAMES AND KEYS REMOVED. NOTHING LEAVES THIS MACHINE UNLESS YOU SEND IT: BY HAND AS A GITHUB ISSUE YOU READ FIRST, OR AUTOMATICALLY TO THE AUTHOR\'S COLLECTOR IF YOU SWITCH THAT ON.'));
   sentinelBody.append(what);
@@ -9131,25 +10938,54 @@ document.querySelector('#feedback-button')?.addEventListener('click', openFeedba
 mother.dialog?.addEventListener?.('close', () => { /* keep reports; nothing to reset */ });
 void loadSentinel();
 
+// The panel's own body, which both destinations cover while they are open.
+// The release channel is MU/TH/UR's own business, not a header of every screen.
+const MOTHER_BODY = ['mother-update', 'mother-boot', 'mother-query', 'mother-answer', 'mother-recorded', 'mother-known', 'mother-sentinel'];
+function showMotherBody(show) {
+  for (const id of MOTHER_BODY) { const node = document.getElementById(id); if (node) node.hidden = !show; }
+  const row = document.querySelector('.fold-all-row');
+  if (row) row.hidden = !show;
+}
 settingsUI.button.addEventListener('click', async () => {
-  settingsUI.open = !settingsUI.open;
-  state.settingsOpen = settingsUI.open;
-  settingsUI.button.setAttribute('aria-pressed', String(settingsUI.open));
-  settingsUI.section.hidden = !settingsUI.open;
-  for (const id of ['mother-boot', 'mother-query', 'mother-answer', 'mother-recorded', 'mother-known', 'mother-sentinel']) {
-    const node = document.getElementById(id);
-    if (node) node.hidden = settingsUI.open;
-  }
-  if (settingsUI.open) { settingsUI.section.append(el('p', 'mother-answer', t('CHECKING CONNECTIONS…'))); await loadSettings(); }
+  const open = !settingsUI.open;
+  closeMemoryPanel();
+  settingsUI.open = open;
+  state.settingsOpen = open;
+  settingsUI.button.setAttribute('aria-pressed', String(open));
+  settingsUI.section.hidden = !open;
+  showMotherBody(!open);
+  if (open) { settingsUI.section.append(el('p', 'mother-answer', t('CHECKING CONNECTIONS…'))); await loadSettings(); }
+  else syncFoldAll();
+});
+
+function closeMemoryPanel() {
+  if (!memoryUI.open) return;
+  memoryUI.open = false;
+  memoryUI.section.hidden = true;
+  memoryUI.button?.setAttribute('aria-pressed', 'false');
+}
+memoryUI.button?.addEventListener('click', async () => {
+  const open = !memoryUI.open;
+  // Opening MEMORY closes CONNECTIONS the same way the other way round does: one screen at a time.
+  if (settingsUI.open) {
+    settingsUI.open = false;
+    state.settingsOpen = false;
+    settingsUI.button.setAttribute('aria-pressed', 'false');
+    settingsUI.section.hidden = true;
+  }
+  memoryUI.open = open;
+  memoryUI.section.hidden = !open;
+  memoryUI.button.setAttribute('aria-pressed', String(open));
+  showMotherBody(!open);
+  if (open) { memoryUI.section.replaceChildren(el('p', 'mother-answer', t('READING THE ARCHIVE…'))); await loadSettings(); }
+  else syncFoldAll();
 });
 mother.dialog.addEventListener('close', () => {
-  if (!settingsUI.open) return;
+  if (!settingsUI.open && !memoryUI.open) return;
   settingsUI.open = false;
   state.settingsOpen = false;
   settingsUI.button.setAttribute('aria-pressed', 'false');
   settingsUI.section.hidden = true;
-  for (const id of ['mother-boot', 'mother-query', 'mother-answer', 'mother-recorded', 'mother-known', 'mother-sentinel']) {
-    const node = document.getElementById(id);
-    if (node) node.hidden = false;
-  }
+  closeMemoryPanel();
+  showMotherBody(true);
 });