@jossuealcala/madre 0.5.1 → 0.6.0

package/public/app.js

@@ -1,3 +1,5 @@
+import { archiveQuestion, modeAsked } from './routing.js';
+import { calledByName, abduct } from './abduction.js';
 import { brandOf } from './brands.js';
 import { CONDITIONS, allConditions, detectPlatform, diagnose, fixesFor, PLATFORMS, searchConditions } from './troubleshooting.js';
 import { answerFor, INQUIRIES, STRIKES } from './inquiry.js';
@@ -37,6 +39,9 @@ const els = {
   replyQuote: document.querySelector('#reply-quote'),
   field: document.querySelector('.field'),
   slashMenu: document.querySelector('#slash-menu'),
+  freeOffer: document.querySelector('#free-offer'),
+  settled: document.querySelector('#settled'),
+  openq: document.querySelector('#openq'),
   attach: document.querySelector('#attach'),
   createToggle: document.querySelector('#create-toggle'),
   ashToggle: document.querySelector('#ash-toggle'),
@@ -146,6 +151,35 @@ const openFailures = () => state.failures.filter((failure) => !failure.recovered
 const VENDOR_WORDS = { 'the room · local': t('the room · local'), local: t('local') };
 const vendorWord = (id) => { const said = brandOf(id).vendor ?? ''; return VENDOR_WORDS[said] ?? said; };
 
+// What an agent can do, said two ways. On its card each one is a tag — a word standing alone —
+// and inside a sentence it has to conjugate: «puede crea» was the button's imperative dropped
+// into a phrase that needed an infinitive. Declared up here because the transcript is replayed at
+// the top of this file, long before half of it has run: `renderLease` reached for these while
+// they were still in their dead zone, the try around it swallowed the error, and every CREATE
+// strip in the history simply never appeared.
+const CAP_LABELS = { read: t('read'), imageIn: t('image in'), write: t('create'), imageGen: t('image gen'), web: t('web') };
+const CAP_VERBS = { read: t('read the project'), imageIn: t('take images'), write: t('create files'), imageGen: t('generate images'), web: t('reach the web') };
+const capVerb = (scope) => CAP_VERBS[scope] ?? CAP_LABELS[scope] ?? scope;
+
+// MODULES' own handles. Up here with the rest of the module's state because the transcript is
+// replayed near the top of this file and an installation line in the history writes to it: four
+// renderers reached for this while it was still in its dead zone, and every install and removal
+// ever recorded vanished from the history without a word.
+const modules = {
+  dialog: document.querySelector('#modules'),
+  button: document.querySelector('#modules-button'),
+  count: document.querySelector('#modules-count'),
+  close: document.querySelector('#modules-close'),
+  list: document.querySelector('#modules-list'),
+  add: document.querySelector('#modules-add'),
+  file: document.querySelector('#modules-file'),
+  note: document.querySelector('#modules-note'),
+  items: [],
+  installing: null,
+  logs: new Map(),   // id -> array of lines
+  confirming: null,
+};
+
 // Which agent last wrote to a path, taken from what the room already recorded: the artifacts a
 // creation lease produced, and the files a CONTROL turn changed. Nothing new is stored and nothing
 // is inferred from the filesystem — if MADRE did not see it happen, the file carries no mark.
@@ -175,6 +209,31 @@ const formatTokens = (value) => {
   return String(value);
 };
 
+// Characters to tokens, next to the other formatters. The same estimate the room uses for text
+// nobody was charged for, kept here because the page cannot import from the server:
+// src/room/economy.mjs holds the other copy and a test keeps the two equal.
+//
+// It is an estimate and it is labelled as one. What this room MEASURES — what MADRE wrote
+// against what the CLI was charged for reading — is a different quantity: the CLIs bill their
+// own system prompt, their own tools and every file they open, so in this room that ratio was
+// 0.62 and called a 14,356-character briefing 23,155 tokens.
+const CH_PER_TOKEN = 3.5;
+const tokensFor = (chars) => Math.round((Number(chars) || 0) / CH_PER_TOKEN);
+
+// Memories burn as stars burn, and a star's colour is its class. A decision is a yellow dwarf,
+// the steady kind a system is built around. A fact is a white dwarf: cold, dense, settled. A
+// preference is a red dwarf, dim and personal and very long lived. A question is a blue dwarf,
+// the hottest thing in the sky and the least settled. Declared here and not down in NOSTROMO:
+// the first replay paints memory chips before that section of the file has been evaluated.
+const MEMORY_COLORS = { decision: '#ffdc3c', fact: '#dfeeff', preference: '#5cf07a', question: '#3dc6ff', aberration: '#b14cff' };
+
+// A memory's kind is an id in the ledger and a word on a screen. Only the word is said in the
+// room's language: what was written down never moves. Declared one by one, so the catalogue's
+// guard sees all five and an id nobody translated cannot slip past as itself. Up here with the
+// colours and for the same reason: the first replay prints the word before NOSTROMO is evaluated.
+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();
+
 const formatTime = (iso) => {
   const date = iso ? new Date(iso) : new Date();
   return Number.isNaN(date.getTime()) ? '' : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
@@ -222,6 +281,38 @@ function scrollToEnd() {
   els.thread.scrollTop = els.thread.scrollHeight;
 }
 
+// The thread is pinned to its own end, and anything that changes how tall it is has to put it
+// back there. Opening the browser beside it, dragging the divider, closing it again: each one
+// re-lays out the column and leaves the last message hanging below the fold, which reads as the
+// conversation having been lost. The observer is the honest fix — it does not matter what moved,
+// only that the height is no longer the one the scroll position was computed against.
+// Whether the human is reading the end or has gone back for something. Only THEIR scrolling
+// decides it: a programmatic scroll fires the same event, so reading the position back during a
+// relayout turned every adjustment into "they scrolled away" and the thread stopped following.
+let pinnedToEnd = true;
+const measurePin = () => {
+  pinnedToEnd = els.thread.scrollHeight - els.thread.scrollTop - els.thread.clientHeight < 120;
+};
+for (const how of ['wheel', 'touchmove', 'keydown']) els.thread?.addEventListener(how, () => setTimeout(measurePin, 90), { passive: true });
+
+// The thread is pinned to its own end, and anything that changes how tall it is has to put it
+// back there. Opening the browser beside it, dragging the divider, closing it again: each one
+// re-lays out the column and leaves the last message hanging below the fold, which reads as the
+// conversation having been lost.
+//
+// Instant, not smooth: the column is mid-relayout and an animated scroll is interrupted by the
+// next frame of it, which is how the thread ended up parked hundreds of pixels short of its end.
+function keepPinned() {
+  if (!pinnedToEnd || !els.thread) return;
+  els.thread.scrollTo({ top: els.thread.scrollHeight, behavior: 'instant' });
+}
+if (typeof ResizeObserver === 'function' && els.thread) {
+  const watch = new ResizeObserver(() => { keepPinned(); requestAnimationFrame(keepPinned); });
+  watch.observe(els.thread);
+  if (els.column) watch.observe(els.column);
+  if (els.composer) watch.observe(els.composer);
+}
+
 /* ---------- safe Markdown (DOM only, no HTML injection) ---------- */
 
 const SAFE_URL = /^https?:\/\//i;
@@ -466,6 +557,361 @@ const ripley = {
   current: null,    // project-relative path of the page on screen
   root: 'project',
 };
+// The servers answering on this computer, and the frame that shows one.
+//
+// A project file and a running server are different things to put behind glass, and RIPLEY
+// treats them differently on purpose:
+//
+//   · a file is served from MADRE's own origin, so a script inside it would be same-origin with
+//     the room. That frame keeps `allow-scripts` alone and no origin of its own, as it always has.
+//   · a server answers on another port, which is another origin. The same-origin policy already
+//     separates it from the room — and MADRE sets no cookies, so there is nothing of the room's
+//     for it to reach. Denying it its own origin would only break it: no storage, no session,
+//     a blank page where the human expected their app. So it keeps its origin and its forms,
+//     and still cannot navigate the room away or open the ship.
+//
+// What is lost cross-origin is the bridge: MADRE cannot inject its error reporter into somebody
+// else's page, so the error strip stays quiet here. The viewer says so rather than looking broken.
+function ripleyGripOn(grip, side, owner) {
+  grip.addEventListener('pointerdown', (event) => {
+    event.preventDefault();
+    const stage = owner.stage;
+    const frame = owner.frame;
+    if (!stage || !frame) return;
+    const startX = event.clientX;
+    const startWidth = frame.getBoundingClientRect().width;
+    grip.setPointerCapture(event.pointerId);
+    stage.classList.add('dragging');
+    const move = (moving) => {
+      const delta = (moving.clientX - startX) * (side === 'right' ? 2 : -2);
+      const width = Math.max(280, Math.min(stage.clientWidth, Math.round(startWidth + delta)));
+      stage.style.setProperty('--stage', `${width}px`);
+      stage.dataset.sized = 'true';
+      for (const button of owner.sizes?.children ?? []) button.setAttribute('aria-pressed', 'false');
+    };
+    grip.addEventListener('pointermove', move);
+    grip.addEventListener('pointerup', () => {
+      grip.removeEventListener('pointermove', move);
+      stage.classList.remove('dragging');
+    }, { once: true });
+  });
+}
+
+/* ---------- the browser: RIPLEY's other surface ---------- */
+//
+// A file and a running server are different enough to deserve different windows. The viewer reads
+// what is written down; this looks at what is answering. Both belong to RIPLEY, and each has its
+// own way in — a button on the rail beside the conversations, the way the files panel does.
+//
+// ONE FRAME, MANY TABS. This is the whole memory design and it is deliberate: a browser engine
+// gives every live iframe its own renderer process, so ten tabs would be ten of them sitting in
+// the human's RAM while they look at one. Here a tab is an address and a title, nothing more, and
+// exactly one of them is ever alive. Switching re-navigates the single frame. The cost is that a
+// background tab does not keep its page state; the gain is that twenty tabs weigh what one does,
+// which on a machine already running four coding agents is not a small thing.
+const browser = {
+  dialog: document.querySelector('#browser'),
+  button: document.querySelector('#browser-button'),
+  close: document.querySelector('#browser-close'),
+  body: document.querySelector('#browser-body'),
+  tabsBar: document.querySelector('#browser-tabs'),
+  back: document.querySelector('#browser-back'),
+  reload: document.querySelector('#browser-reload'),
+  servers: document.querySelector('#browser-servers'),
+  portsMenu: document.querySelector('#browser-ports-menu'),
+  where: document.querySelector('#browser-where'),
+  sizes: document.querySelector('#browser-sizes'),
+  tabs: [],
+  active: null,
+  frame: null,
+  stage: null,
+};
+
+const BROWSER_WIDTHS = [['AUTO', null], ['390', 390], ['768', 768], ['1280', 1280]];
+const browserTab = () => browser.tabs.find((tab) => tab.id === browser.active) ?? null;
+
+// Loopback is always allowed. Anywhere else is the web, and the web is only reachable when the
+// human turned it on for RIPLEY — the room says what a module may reach before it reaches it.
+// Asked again for every address that would leave this computer, never remembered. The switch
+// lives in MODULES and the human can move it with this panel open; a permission cached when the
+// panel opened would keep refusing after they turned it on, and a switch that is not believed is
+// worse than no switch. Loopback needs no question and gets none.
+async function browserAllows(url) {
+  let parsed = null;
+  try { parsed = new URL(url); } catch { return { ok: false, why: t('That is not an address.') }; }
+  if (!/^https?:$/.test(parsed.protocol)) return { ok: false, why: t('Only http and https.') };
+  if (['127.0.0.1', 'localhost', '[::1]', '::1'].includes(parsed.hostname)) return { ok: true, local: true };
+  try {
+    const live = await fetch('/api/state').then((response) => response.json());
+    state.ripleyWeb = Boolean(live?.ripleyWeb);
+  } catch { /* keep whatever the page already knew */ }
+  if (!state.ripleyWeb) return { ok: false, why: t('RIPLEY reaches this computer only · turn the web on in MODULES to open an address outside it') };
+  return { ok: true, local: false };
+}
+
+function browserTitleFor(url) {
+  try {
+    const parsed = new URL(url);
+    if (!/^https?:$/.test(parsed.protocol)) return t('new tab');
+    return ['127.0.0.1', 'localhost', '[::1]'].includes(parsed.hostname) ? `:${parsed.port || 80}` : parsed.hostname.replace(/^www\./, '');
+  } catch { return t('new tab'); }
+}
+
+function browserRenderTabs() {
+  if (!browser.tabsBar) return;
+  browser.tabsBar.replaceChildren();
+  for (const tab of browser.tabs) {
+    const node = el('button', `browser-tab${tab.id === browser.active ? ' on' : ''}`);
+    node.type = 'button';
+    node.setAttribute('role', 'tab');
+    node.setAttribute('aria-selected', String(tab.id === browser.active));
+    node.title = tab.url === 'about:blank' ? t('new tab') : tab.url;
+    node.append(el('span', 'tab-title', tab.title));
+    const shut = el('span', 'tab-close', '×');
+    shut.addEventListener('click', (event) => { event.stopPropagation(); browserCloseTab(tab.id); });
+    node.append(shut);
+    node.addEventListener('click', () => browserSelect(tab.id));
+    browser.tabsBar.append(node);
+  }
+  const add = el('button', 'browser-newtab', '+');
+  add.type = 'button';
+  add.title = t('New tab');
+  add.addEventListener('click', () => { browserNewTab(); void browserServers(); });
+  browser.tabsBar.append(add);
+  browser.tabsBar.hidden = false;
+}
+
+async function browserOpen(url, { tab = null } = {}) {
+  const allowed = await browserAllows(url);
+  if (!allowed.ok) { toast(allowed.why); return; }
+  const target = tab ?? browserTab();
+  if (!target) { browserNewTab(url); return; }
+  // A page is entitled to refuse the glass, and most serious ones do. Asking first turns the
+  // browser's bare "refused to connect" into MADRE's own sentence and a real tab — the same
+  // answer the servers menu already gives for a local port that refuses.
+  if (!allowed.local) {
+    const verdict = await fetch(`/api/can-frame?url=${encodeURIComponent(url)}`).then((r) => r.json()).catch(() => null);
+    if (verdict && verdict.framable === false) {
+      target.url = url;
+      target.title = browserTitleFor(url);
+      if (browser.where) browser.where.textContent = url.replace(/^https?:\/\//, '');
+      browserRenderTabs();
+      browserRefused(url);
+      return;
+    }
+  }
+  target.url = url;
+  target.title = browserTitleFor(url);
+  if (target.history.at(-1) !== url) target.history.push(url);
+  if (browser.where) browser.where.textContent = url.replace(/^https?:\/\//, '');
+  if (browser.back) browser.back.disabled = target.history.length < 2;
+  if (browser.frame) browser.frame.src = url;
+  browserRenderTabs();
+}
+
+function browserNewTab(url = 'about:blank') {
+  const tab = { id: `t${Date.now()}${browser.tabs.length}`, title: browserTitleFor(url), url, history: [] };
+  browser.tabs.push(tab);
+  browser.active = tab.id;
+  browserMountFrame();
+  if (url !== 'about:blank') { void browserOpen(url, { tab }); return; }
+  if (browser.frame) browser.frame.src = 'about:blank';
+  if (browser.where) browser.where.textContent = '';
+  browserRenderTabs();
+}
+
+function browserSelect(id) {
+  if (browser.active === id) return;
+  browser.active = id;
+  const tab = browserTab();
+  browserMountFrame();
+  if (browser.where) browser.where.textContent = tab?.url && tab.url !== 'about:blank' ? tab.url.replace(/^https?:\/\//, '') : '';
+  if (browser.back) browser.back.disabled = (tab?.history.length ?? 0) < 2;
+  // The one frame is re-navigated rather than a second one being born: a tab that is not on
+  // screen costs an address and a title, and nothing else.
+  if (browser.frame) browser.frame.src = tab?.url ?? 'about:blank';
+  browserRenderTabs();
+}
+
+function browserCloseTab(id) {
+  const index = browser.tabs.findIndex((tab) => tab.id === id);
+  if (index < 0) return;
+  browser.tabs.splice(index, 1);
+  if (!browser.tabs.length) { browserHide(); return; }
+  if (browser.active === id) { browser.active = null; browserSelect(browser.tabs[Math.max(0, index - 1)].id); }
+  else browserRenderTabs();
+}
+
+// A page that refuses the glass, said inside the panel instead of by throwing a window at the
+// human. The room's habit everywhere else is to offer and let them choose; opening a window on
+// its own is the room choosing, and it drops them out of what they were doing.
+function browserRefused(url, { why } = {}) {
+  if (!browser.body) return;
+  const box = el('div', 'browser-refused');
+  box.append(el('h4', null, t('{host} will not be framed', { host: browserTitleFor(url) })));
+  box.append(el('p', null, why ?? t('The site answers with a rule that forbids any page from putting it inside a frame. It is the standard defence against clickjacking, and RIPLEY neither can nor should override it.')));
+  const open = el('button', 'browser-go', t('OPEN IN A TAB'));
+  open.type = 'button';
+  open.addEventListener('click', () => window.open(url, '_blank', 'noopener'));
+  const copy = el('button', 'browser-copy', t('COPY THE ADDRESS'));
+  copy.type = 'button';
+  copy.addEventListener('click', () => { void navigator.clipboard?.writeText(url); toast(t('Address copied.')); });
+  const row = el('div', 'browser-refused-row');
+  row.append(open, copy);
+  box.append(row);
+  browser.body.replaceChildren(box);
+  browser.frame = null;
+  browser.stage = null;
+}
+
+function browserSetStage(width) {
+  if (!browser.stage) return;
+  browser.stage.style.setProperty('--stage', width ? `${width}px` : '100%');
+  browser.stage.dataset.sized = String(Boolean(width));
+  for (const button of browser.sizes?.children ?? []) button.setAttribute('aria-pressed', String(Number(button.dataset.width || 0) === Number(width || 0)));
+}
+
+// The single frame, built when the window opens. A page keeps its own origin, which is what makes
+// an app work, and still cannot steer the room or reach anything of the room's — MADRE sets no
+// cookies, and every address here is a different origin from the room's own.
+function browserMountFrame() {
+  if (!browser.body || browser.frame) return;
+  const stage = el('div', 'viewer-stage');
+  const frame = el('iframe', 'ripley');
+  frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups');
+  frame.setAttribute('referrerpolicy', 'no-referrer');
+  frame.title = t('RIPLEY browser');
+  const left = el('div', 'stage-grip');
+  const right = el('div', 'stage-grip');
+  left.style.left = '0'; right.style.right = '0';
+  stage.append(left, frame, right);
+  browser.frame = frame;
+  browser.stage = stage;
+  ripleyGripOn(left, 'left', browser);
+  ripleyGripOn(right, 'right', browser);
+  browser.body.replaceChildren(stage);
+  if (browser.sizes && !browser.sizes.children.length) {
+    for (const [label, width] of BROWSER_WIDTHS) {
+      const button = el('button', null, label);
+      button.type = 'button';
+      button.dataset.width = String(width ?? 0);
+      button.addEventListener('click', () => browserSetStage(width));
+      browser.sizes.append(button);
+    }
+  }
+  browserSetStage(null);
+}
+
+function browserShow() {
+  if (!browser.dialog) return;
+  browser.dialog.hidden = false;
+  document.querySelector('.shell')?.classList.add('with-browser');
+  browser.button?.setAttribute('aria-pressed', 'true');
+  if (!browser.tabs.length) browserNewTab();
+  else { browserMountFrame(); const tab = browserTab(); if (browser.frame && tab) browser.frame.src = tab.url; browserRenderTabs(); }
+}
+
+// Closing drops the frame, and with it the renderer the page was using. The tabs survive as
+// addresses — reopening puts the active one back without having kept a process alive meanwhile.
+function browserHide() {
+  if (browser.dialog) browser.dialog.hidden = true;
+  document.querySelector('.shell')?.classList.remove('with-browser');
+  browser.button?.setAttribute('aria-pressed', 'false');
+  browser.body?.replaceChildren();
+  browser.frame = null;
+  browser.stage = null;
+  portsMenuShown(false);
+}
+
+// Opening and closing the list in one place: the button carries the state, so it has to be told
+// every time, and it is told nowhere else.
+function portsMenuShown(open) {
+  if (browser.portsMenu) browser.portsMenu.hidden = !open;
+  browser.servers?.setAttribute('aria-expanded', String(open));
+}
+
+async function browserServers() {
+  const menu = browser.portsMenu;
+  if (!menu) return;
+  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; }
+  menu.replaceChildren();
+  // 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; }
+  for (const found of ports) {
+    const row = el('button', 'ports-row');
+    row.type = 'button';
+    const what = `${found.command} · ${found.status}${found.html ? '' : ` · ${found.contentType ?? ''}`}`;
+    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', () => {
+      portsMenuShown(false);
+      // A server that sets frame-ancestors is right to, and RIPLEY cannot and should not override
+      // it. The honest move is a real tab, not a grey rectangle with a broken-document icon.
+      if (found.framable === false) {
+        const url = `http://127.0.0.1:${found.port}/`;
+        const current = browserTab();
+        if (!current || current.url !== 'about:blank') browserNewTab('about:blank');
+        const tab = browserTab();
+        if (tab) { tab.url = url; tab.title = `:${found.port}`; }
+        if (browser.where) browser.where.textContent = url.replace(/^https?:\/\//, '');
+        browserRenderTabs();
+        browserRefused(url, { why: t('This server answers with a rule that forbids any page from putting it inside a frame — your own dev server may be setting it without you noticing. RIPLEY neither can nor should override it.') });
+        return;
+      }
+      const url = `http://127.0.0.1:${found.port}/`;
+      const current = browserTab();
+      if (current && current.url !== 'about:blank') browserNewTab(url); else void browserOpen(url);
+    });
+    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')));
+}
+
+// The edge between the conversation and the browser. The dock is a grid column, so a drag just
+// writes a width; the frame stops taking pointer events while it lasts, or the iframe swallows
+// the drag the moment the cursor crosses into it.
+const browserGrip = document.querySelector('#browser-grip');
+browserGrip?.addEventListener('pointerdown', (event) => {
+  event.preventDefault();
+  const shell = document.querySelector('.shell');
+  if (!shell) return;
+  browserGrip.setPointerCapture(event.pointerId);
+  shell.classList.add('dragging-dock');
+  const move = (moving) => {
+    const width = Math.max(320, Math.min(window.innerWidth - 360, window.innerWidth - moving.clientX));
+    shell.style.setProperty('--dock', `${Math.round(width)}px`);
+  };
+  browserGrip.addEventListener('pointermove', move);
+  browserGrip.addEventListener('pointerup', () => {
+    browserGrip.removeEventListener('pointermove', move);
+    shell.classList.remove('dragging-dock');
+  }, { once: true });
+});
+
+browser.button?.addEventListener('click', () => { if (browser.dialog && !browser.dialog.hidden) browserHide(); else browserShow(); });
+browser.close?.addEventListener('click', () => browserHide());
+browser.servers?.addEventListener('click', () => { void browserServers(); });
+// A list left hanging over the page is the kind of thing a human closes by clicking away from it.
+document.addEventListener('click', (event) => {
+  if (!browser.portsMenu || browser.portsMenu.hidden) return;
+  if (browser.portsMenu.contains(event.target) || browser.servers?.contains(event.target)) return;
+  portsMenuShown(false);
+});
+browser.reload?.addEventListener('click', () => { const tab = browserTab(); if (browser.frame && tab) browser.frame.src = tab.url; });
+browser.back?.addEventListener('click', () => {
+  const tab = browserTab();
+  if (!tab || tab.history.length < 2) return;
+  tab.history.pop();
+  const previous = tab.history.pop();
+  if (previous) void browserOpen(previous, { tab });
+});
+
 function ripleyPathFromPreview(pathname) {
   const match = String(pathname ?? '').match(/^\/preview\/(project|attachments)\/(.*)$/);
   return match ? { root: match[1], path: decodeURIComponent(match[2]) } : null;
@@ -476,6 +922,7 @@ function ripleyNavigate(url, { push = true } = {}) {
   ripley.frame.src = url;
   ripley.back.disabled = ripley.history.length < 2;
 }
+
 function ripleyClearErrors() { if (ripley.errors) { ripley.errors.hidden = true; ripley.errors.replaceChildren(); } }
 function ripleyShowError({ message, source, line }) {
   if (!ripley.errors || !viewerMode.preview) return;
@@ -582,6 +1029,7 @@ async function openViewer({ root = 'project', path = null, url = null, label = n
   viewerMode.kind = null;
   syncViewerMode();
   if (!viewer.dialog.open) viewer.dialog.showModal();
+  
   try {
     const response = await fetch(src);
     if (!response.ok) { const err = await response.json().catch(() => ({})); viewer.body.replaceChildren(el('div', 'err', err.error ?? `HTTP ${response.status}`)); return; }
@@ -767,7 +1215,27 @@ function ringPercent(agent) {
   return official === null ? localPercent(agent) : official;
 }
 
+// The crew in one button, for when the bar has no room for five spheres. It says how many are
+// ready, names them all in its title, and opens CONNECTIONS — the place that already holds the
+// detail each sphere stands for.
+const agentsCompact = document.querySelector('#agents-compact');
+const agentsCount = document.querySelector('#agents-count');
+function renderAgentsCompact() {
+  if (!agentsCompact) return;
+  const all = [...state.agents.values()];
+  const ready = all.filter((agent) => agent.ready).length;
+  if (agentsCount) agentsCount.textContent = String(ready);
+  agentsCompact.title = all.length
+    ? t('Crew · {ready} of {total} ready · {who}', { ready, total: all.length, who: all.map((agent) => `@${agent.id}`).join(' ') })
+    : t('Crew');
+}
+agentsCompact?.addEventListener('click', () => {
+  document.querySelector('#mother-button')?.click();
+  setTimeout(() => document.querySelector('#mother-settings-button')?.click(), 60);
+});
+
 function renderAgents() {
+  renderAgentsCompact();
   els.agents.replaceChildren();
   for (const agent of state.agents.values()) {
     const percent = ringPercent(agent);
@@ -1356,7 +1824,7 @@ function row(kind, agentId, { compact = false } = {}) {
 
 function renderUserMessage(event) {
   const { messageId, target, text, ash, model, attachments = [], create, mode } = event.payload;
-  state.userMessages.set(messageId, { text, target, model });
+  state.userMessages.set(messageId, { text, target, model, mode: event.payload.mode ?? 1 });
   const reviewed = state.expendable;
   const node = row('user');
   if (event.ghost || mode === 0) node.classList.add('ghost');
@@ -1423,6 +1891,8 @@ function renderAssistantMessage(event) {
   col.append(bubble);
   const used = attachMemoryUsed(event.payload);
   if (used) col.append(used);
+  const needs = attachModeAsk(event.payload);
+  if (needs) col.append(needs);
   const stamp = el('div', 'stamp');
   stamp.id = `usage-${messageId}`;
   stamp.append(el('span', null, formatTime(event.timestamp)));
@@ -1638,6 +2108,31 @@ function showReading(event) {
 
 // The bill arrived: the estimate is replaced by what was actually charged, and stays on the
 // exchange so the guess can be checked against the truth.
+// What this room has seen Ash do, kept as the turns arrive so a reply can be read the moment it
+// settles without asking the server again. Same rule as /api/economy, and it has to stay the
+// same: median output per agent, Ash on against Ash off, nothing said until both sides have
+// enough turns to mean something. Turns weighed before the room recorded the switch carry no
+// boolean and are left out — guessing a side for them would poison both.
+const ASH_MIN_TURNS = 5;
+const ashSeen = new Map();   // agent -> { on: [], off: [] }
+const ashMedian = (values) => {
+  if (!values.length) return null;
+  const sorted = [...values].sort((a, b) => a - b);
+  const middle = Math.floor(sorted.length / 2);
+  return sorted.length % 2 ? sorted[middle] : Math.round((sorted[middle - 1] + sorted[middle]) / 2);
+};
+function rememberAsh(cost) {
+  if (cost.failed || typeof cost.ash !== 'boolean') return null;
+  const output = Number(cost.output ?? 0) || 0;
+  if (output <= 0) return null;
+  const who = cost.agent ?? 'unknown';
+  const mine = ashSeen.get(who) ?? { on: [], off: [] };
+  mine[cost.ash ? 'on' : 'off'].push(output);
+  ashSeen.set(who, mine);
+  if (mine.on.length < ASH_MIN_TURNS || mine.off.length < ASH_MIN_TURNS) return null;
+  return { on: ashMedian(mine.on), off: ashMedian(mine.off), onTurns: mine.on.length, offTurns: mine.off.length };
+}
+
 function settleReading(event) {
   const cost = event.payload ?? {};
   if (!cost.responseMessageId) return;
@@ -1649,10 +2144,46 @@ function settleReading(event) {
   // Short enough to sit on the same line as everything else above the bubble. What was read back
   // from the cache is money not spent, so it is the part worth naming.
   const brief = (n) => (n >= 1000 ? `${(n / 1000).toFixed(n >= 10000 ? 0 : 1)}k` : String(n));
-  const saved = cost.cached ? t(' · {n} saved', { n: brief(cost.cached) }) : '';
-  badge.textContent = `${brief(cost.input)}↓ ${brief(cost.output)}↑${saved}`;
+  badge.textContent = `${brief(cost.input)}↓ ${brief(cost.output)}↑`;
   badge.title = t("Charged by this agent's own CLI: {input} input tokens, {output} output{cached}.", { input: cost.input.toLocaleString(), output: cost.output.toLocaleString(), cached: cost.cached ? t('. Another {n} were read back from its own cache instead of being charged again', { n: cost.cached.toLocaleString() }) : '' });
+  // Ash is a property of the turn, not of the room right now: the mark belongs on the reply it
+  // applied to, and stays true when the switch changes later.
+  badge.classList.toggle('ash', cost.ash === true);
+  const seen = rememberAsh(cost);
+  if (seen) {
+    badge.title += ` ${t('In this room: {on} output tokens is the middle turn with ASH ({onTurns} turns), {off} without it ({offTurns}). You choose when to ask for compact prose, so these are different tasks, not the same task twice.', { on: seen.on.toLocaleString(), onTurns: seen.onTurns, off: seen.off.toLocaleString(), offTurns: seen.offTurns })}`;
+  }
   if (!badge.isConnected) who.append(badge);
+  paintUncharged(cost);
+}
+
+// The one number on a message that is money not spent, where the human already reads the bill.
+//
+// Two halves, and only one of them is a measurement: the CLI SAID it read those tokens back from
+// its own cache instead of charging them again, while what the room never sent is counted in the
+// characters the room controls and turned into tokens at an estimate. The title says which is
+// which, because a reading nobody can take apart is a reading nobody can check.
+//
+// None of this is Ash. Ash shortens the answer, and the answer is the badge above the bubble.
+function paintUncharged(cost) {
+  if (!cost.responseMessageId) return;
+  const stamp = document.getElementById(`usage-${cost.responseMessageId}`);
+  if (!stamp) return;
+  const cached = Number(cost.cached ?? 0) || 0;
+  const unsent = tokensFor(cost.spared ?? 0);
+  const total = cached + unsent;
+  if (total <= 0) return;
+  const span = stamp.querySelector('.uncharged') ?? el('span', 'uncharged');
+  span.textContent = t('{n} uncharged', { n: formatTokens(total) });
+  span.title = t('{cached} tokens this CLI read back from its own cache instead of charging them again (measured). {unsent} tokens of briefing the room never sent (estimated at {rate} characters per token). Neither is Ash: Ash shortens the answer, and that is the figure above the bubble.', {
+    cached: cached.toLocaleString(), unsent: unsent.toLocaleString(), rate: CH_PER_TOKEN,
+  });
+  // Before the running total, after the turn's own bill: read left to right it is what this turn
+  // cost, what it did not, and where the room stands.
+  if (!span.isConnected) {
+    const sum = [...stamp.children].find((child) => child.textContent.startsWith('Σ'));
+    if (sum) stamp.insertBefore(span, sum); else stamp.append(span);
+  }
 }
 
 function renderThinking(event) {
@@ -1735,8 +2266,8 @@ function renderModuleInstalledOrRemoved(event) {
   const { name, origin, by } = event.payload;
   const node = el('div', 'system module-proposed');
   node.append(t('module · '), el('b', 'who', name), event.type === 'extension.installed'
-    ? t(' installed for {where} by {who} · switch it on in MODULES', { where: origin === 'project' ? t('this project') : t('every room'), who: by ?? t('you') })
-    : t(' removed by {who}', { who: by ?? t('you') }));
+    ? t(' installed for {where} by {who} · switch it on in MODULES', { where: origin === 'project' ? t('this project') : t('every room'), who: !by || by === 'you' ? t('you') : `@${by}` })
+    : t(' removed by {who}', { who: !by || by === 'you' ? t('you') : `@${by}` }));
   return node;
 }
 
@@ -1835,6 +2366,37 @@ function renderDistilled(event) {
 // briefing and nobody ever saw it. Same shape as a memory saved, because the human should have to
 // learn one thing, not two — and a note that came along by association says so, since something
 // that changes an answer must never be invisible.
+// An agent that could not do the thing at the mode it was given, with the way up beside it.
+//
+// Until now this only ever existed as a sentence in an answer. The human had to read it, leave
+// the message, open the mode menu and pick the right rung — and in a real session they picked
+// the wrong one twice while the turn went nowhere. The ladder belongs next to the agent asking
+// to climb it.
+//
+// It offers; it never grants. #2 arms the composer, and #3 and #4 open the same ceremony as
+// always, where the project designation is typed by hand. Nothing here shortens that.
+function attachModeAsk(payload) {
+  if (!payload || payload.role !== 'assistant' || payload.sender === 'you') return null;
+  const ran = state.userMessages.get(payload.messageId)?.mode ?? payload.mode ?? 1;
+  const wanted = modeAsked(payload.text, { ran });
+  if (!wanted || wanted <= state.mode) return null;
+  const agent = payload.sender;
+  if (!state.agents.get(agent)?.ready) return null;
+  const row = el('div', 'mode-ask');
+  row.append(el('span', 'mode-what', t('@{agent} says this needs #{n} {label}', { agent, n: wanted, label: MODES[wanted]?.label ?? '' })));
+  const go = el('button', 'mode-go', wanted >= 3 ? t('ARM #{n}', { n: wanted }) : t('SET #{n}', { n: wanted }));
+  go.type = 'button';
+  go.title = wanted >= 3
+    ? t('Opens the override: you type the project designation, as always.')
+    : t('Arms the composer for your next message. Nothing is sent.');
+  go.addEventListener('click', () => {
+    if (wanted >= 3) openOverride(agent, { mode: wanted });
+    else { setMode(wanted, { wink: true }); els.input.focus(); }
+  });
+  row.append(go);
+  return row;
+}
+
 function attachMemoryUsed(payload) {
   const used = payload.recalled ?? [];
   if (!used.length) return null;
@@ -1842,18 +2404,28 @@ function attachMemoryUsed(payload) {
   hint.style.setProperty('--agent', agentColor(payload.sender));
   const carried = used.filter((note) => note.via === 'cascade').length;
   hint.append(el('span', 'lead', t('◉ memory used · {n}', { n: used.length }) + (carried ? t(' · {n} by association', { n: carried }) : '')));
-  for (const note of used.slice(0, 3)) {
+  const visible = used.slice(0, 3);
+  for (const [index, note] of visible.entries()) {
+    // The kind travels as a dot, not as a word. Those five colours were chosen for NOSTROMO's
+    // dark star map — `fact` is #dfeeff, a near-white blue — so printing the word in them left
+    // "FACT" invisible on a light background. A dot with a hairline ring reads on either, the
+    // word moves into the tooltip, and the chip gets its width back for the memory itself.
     const pill = el('button', `pill ${note.kind}${note.via === 'cascade' ? ' carried' : ''}`);
     pill.type = 'button';
     pill.style.setProperty('--kind', MEMORY_COLORS[note.kind] ?? MEMORY_COLORS.fact);
-    pill.append(el('b', null, kindWord(note.kind).toLowerCase()), ` ${note.text.length > 64 ? `${note.text.slice(0, 63)}…` : note.text}`);
-    pill.title = `${note.text}\n${note.via === 'cascade'
+    pill.append(el('i', 'dot'), el('span', 'what', note.text.length > 52 ? `${note.text.slice(0, 51)}…` : note.text));
+    pill.title = `${kindWord(note.kind)} · ${note.text}\n${note.via === 'cascade'
       ? t('Came along because this room keeps carrying it with one of the others.')
       : t('The archive matched this to what you asked.')} ${t('Click to see it in NOSTROMO.')}`;
     pill.addEventListener('click', () => { nostromo.focusId = note.id; nostromo.button?.click(); });
-    hint.append(pill);
+    if (used.length > 3 && index === visible.length - 1) {
+      const last = el('span', 'last');
+      last.append(pill, el('span', 'more', `+${used.length - visible.length}`));
+      hint.append(last);
+    } else {
+      hint.append(pill);
+    }
   }
-  if (used.length > 3) hint.append(el('span', 'more', `+${used.length - 3}`));
   return hint;
 }
 
@@ -1995,7 +2567,7 @@ function renderControlStarted(event) {
   const { agent, commit, message } = event.payload;
   const node = el('div', 'system control');
   node.style.setProperty('--agent', agentColor(agent));
-  node.append(el('b', null, t('CONTROL · ')), el('b', 'who', `@${agent}`), t(' holds the project · checkpoint '), el('code', null, (commit ?? '').slice(0, 7)));
+  node.append(el('b', null, t('CONTROL')), el('b', 'who', `@${agent}`), t(' holds the project · checkpoint '), el('code', null, (commit ?? '').slice(0, 7)));
   node.title = message;
   if (!replaying) toast(t('MU/TH/UR › @{agent} holds CONTROL. Checkpoint taken; UNDO will be one click.', { agent }));
   state.lastSender = null;
@@ -2007,7 +2579,7 @@ function renderControlChanged(event) {
   node.id = `control-${checkpointId}`;
   node.style.setProperty('--agent', agentColor(agent));
   const head = el('div', 'head');
-  head.append(el('b', null, t('CONTROL · ')), el('b', 'who', `@${agent}`), files.length ? t(' changed {n} files', { n: files.length }) : t(' changed nothing'));
+  head.append(el('b', null, t('CONTROL')), el('b', 'who', `@${agent}`), files.length ? t(' changed {n} files', { n: files.length }) : t(' changed nothing'));
   node.append(head);
   if (files.length) {
     const list = el('ul', 'files');
@@ -2049,7 +2621,7 @@ function renderControlReverted(event) {
   const { agent, checkpointId, restored = [], removed = [], message } = event.payload;
   const node = el('div', 'system control reverted');
   node.style.setProperty('--agent', agentColor(agent));
-  node.append(el('b', null, t('CONTROL · ')), t("project restored to the checkpoint before @{agent}'s turn · {restored} restored · {removed} removed", { agent, restored: restored.length, removed: removed.length }));
+  node.append(el('b', null, t('CONTROL')), t("project restored to the checkpoint before @{agent}'s turn · {restored} restored · {removed} removed", { agent, restored: restored.length, removed: removed.length }));
   node.title = message;
   const card = document.getElementById(`control-${checkpointId}`);
   card?.querySelector('.undo')?.replaceWith(el('span', 'outcome', t('RESTORED')));
@@ -2163,8 +2735,8 @@ function renderLease(event) {
   node.append(el('b', null, standing ? t('default #2 · ') : escalated ? `${t('#2 granted on request')}${escalated === 'plan' ? t(' · whole plan') : ''} · ` : delegated ? t('#2 by @{who} · ', { who: grantedBy }) : t('create · ')));
   // The verbs were translated and the sentence holding them was not: «@CODEX MAY CREA, GENERA
   // IMÁGENES». A sentence is translated whole or it is not translated.
-  const can = scopes.map((scope) => CAP_LABELS[scope] ?? scope).join(', ');
-  node.append(`${t('@{agent} may {what}', { agent, what: can || t('create files') })}${unavailable.length ? t(' (cannot {what})', { what: unavailable.map((scope) => CAP_LABELS[scope] ?? scope).join(', ') }) : ''} `);
+  const can = scopes.map(capVerb).join(', ');
+  node.append(`${t('@{agent} may {what}', { agent, what: can || t('create files') })}${unavailable.length ? t(' (cannot {what})', { what: unavailable.map(capVerb).join(', ') }) : ''} `);
   if (outDir === '.' || !outDir) {
     node.append(t('anywhere in the project · existing files stay untouched'));
     if (scratchDir) { node.append(t(' · scratch ')); const link = el('a', 'file-link', scratchDir); link.href = '#'; link.addEventListener('click', (ev) => { ev.preventDefault(); }); node.append(link); }
@@ -2211,6 +2783,103 @@ function artifactTiles(files) {
   return wrap;
 }
 
+// An agent handing a decision back. The options are buttons because a decision between three
+// things is a decision, not a paragraph to answer in prose — and because the room can then show
+// exactly what was offered, in the ledger, instead of a sentence somebody has to re-read.
+//
+// Pressing one writes it into the composer and stops. It does not send: the human may want to
+// add a reason, pick none of them, or ask something else entirely, and a button that sends is a
+// button that decides.
+// What this project already settled, at the head of the conversation.
+//
+// A room outlives the window it is read in: a conversation opened a week later, or by an agent
+// who was not there, starts by relitigating what was decided. This is the archive saying it
+// first — three decisions, newest first, read-only, costing nothing in any prompt. A refuted
+// decision never appears: the archive keeps it, but a strip titled "what we decided" cannot
+// carry something the room has since established is false.
+// What the room still has no answer to, offered while nobody is typing.
+//
+// These are not MADRE's ideas: `questionsFor` writes them from the archive itself, word for
+// word, and never invents a subject the room has not raised. Pressing one writes it into the
+// composer — the same contract as a choice bubble, and for the same reason: a suggestion that
+// sends itself is a suggestion that decided.
+//
+// They cost nothing in any prompt, and they leave the moment the human starts typing. A room at
+// rest can afford to wonder out loud; a room being written to cannot.
+async function renderOpenQuestions() {
+  const box = els.openq;
+  if (!box) return;
+  if (els.input.value.trim() || state.mode >= 2) { box.hidden = true; return; }
+  let questions = [];
+  try { questions = (await fetch('/api/questions?limit=3').then((response) => response.json()))?.questions ?? []; }
+  catch { return; }
+  if (!questions.length) { box.hidden = true; return; }
+  box.replaceChildren();
+  box.append(el('span', 'openq-lead', t('◉ still open here')));
+  // The pills live in a track of their own so the row can scroll sideways instead of stacking:
+  // these are an aside under the thread, and an aside that grows downwards pushes the composer.
+  const rail = el('div', 'openq-rail');
+  for (const question of questions) {
+    const pill = el('button', 'openq-ask');
+    pill.type = 'button';
+    pill.append(el('span', 'what', question.text.length > 64 ? `${question.text.slice(0, 63)}…` : question.text));
+    pill.title = question.carried
+      ? `${question.text}\n${t('The room has carried this into {n} turn(s) and still has no answer.', { n: question.carried })}`
+      : `${question.text}\n${t('The archivist recorded this as open and nothing has answered it.')}`;
+    pill.addEventListener('click', () => {
+      els.input.value = question.text;
+      els.input.dispatchEvent(new Event('input', { bubbles: true }));
+      els.input.focus();
+    });
+    rail.append(pill);
+  }
+  box.append(rail);
+  box.hidden = false;
+}
+
+async function renderSettled() {
+  const box = els.settled;
+  if (!box) return;
+  let decisions = [];
+  try { decisions = (await fetch('/api/decisions?limit=3').then((response) => response.json()))?.decisions ?? []; }
+  catch { return; }
+  if (!decisions.length) { box.hidden = true; return; }
+  box.replaceChildren();
+  box.append(el('span', 'settled-lead', t('◉ decided here · {n}', { n: decisions.length })));
+  for (const note of decisions) {
+    const pill = el('button', 'settled-note');
+    pill.type = 'button';
+    pill.append(el('i', 'dot'), el('span', 'what', note.text.length > 72 ? `${note.text.slice(0, 71)}…` : note.text));
+    pill.title = `${note.text}\n${t('Click to see it in NOSTROMO.')}`;
+    pill.addEventListener('click', () => { nostromo.focusId = note.id; nostromo.button?.click(); });
+    box.append(pill);
+  }
+  box.hidden = false;
+}
+
+function renderChoice(event) {
+  const { question, options = [], agent } = event.payload;
+  if (!options.length) return null;
+  const node = el('div', 'choice');
+  node.style.setProperty('--agent', agentColor(agent));
+  node.append(el('p', 'choice-q', question));
+  const row = el('div', 'choice-row');
+  for (const option of options) {
+    const button = el('button', 'choice-option', option);
+    button.type = 'button';
+    button.title = t('Writes it into the composer · nothing is sent until you press send');
+    button.addEventListener('click', () => {
+      els.input.value = option;
+      els.input.dispatchEvent(new Event('input', { bubbles: true }));
+      els.input.focus();
+    });
+    row.append(button);
+  }
+  node.append(row);
+  state.lastSender = null;
+  return node;
+}
+
 function renderAlert(event) {
   const { message } = event.payload;
   if (!replaying) { state.brakeArmed = true; updateStopAll(); }
@@ -2224,6 +2893,27 @@ function renderAlert(event) {
   return node;
 }
 
+function renderAshValidation(event) {
+  if (event.payload.ok) return null;
+  const issueText = (issue) => {
+    if (issue === 'empty response') return t('empty response');
+    if (issue === 'unclosed code fence') return t('unclosed code fence');
+    if (issue === 'text after ```pulse block') return t('text after ```pulse block');
+    if (issue === 'missing negation') return t('missing negation');
+    const limit = issue.match(/^(\d+) (words|lines), maximum (\d+)$/);
+    if (limit) return t('{count} {unit}, maximum {maximum}', { count: limit[1], unit: t(limit[2]), maximum: limit[3] });
+    const missing = issue.match(/^missing (.+)$/);
+    if (missing) return t('missing {value}', { value: missing[1] });
+    return issue;
+  };
+  const details = (event.payload.issues ?? []).map(issueText).join(' · ');
+  const node = el('div', 'system alert');
+  node.append(el('b', null, 'ASH › '), t('REVIEW · the local check found: {details}', { details }));
+  if (!replaying) toast(`ASH › ${t('REVIEW · the local check found: {details}', { details })}`);
+  state.lastSender = null;
+  return node;
+}
+
 function renderHalted(event) {
   const { reason, plans, turns, agents = [] } = event.payload;
   const node = el('div', 'system halted');
@@ -2392,7 +3082,12 @@ function renderEventNode(event) {
     }
     case 'room.settings': return;
     case 'extension.toggled':
-      if (event.payload.id === 'ash') syncAshUI(Boolean(event.payload.enabled));
+      // A module switched on or off changes what the composer accepts.
+      if (!replaying) void refreshCommands();
+      // The replay is history, not configuration. /api/state already supplied the live switch;
+      // letting an older toggle overwrite it made Ash appear to turn itself off or on at boot
+      // and whenever the human changed conversation.
+      if (!replaying && event.payload.id === 'ash') syncAshUI(Boolean(event.payload.enabled));
       if (event.payload.id === 'ripley') { state.ripley = Boolean(event.payload.enabled); syncViewerMode(); }
       if (!replaying) void refreshModules();
       return;
@@ -2402,7 +3097,14 @@ function renderEventNode(event) {
       break;
     case 'agent.started': state.running.set(event.payload.messageId, event.payload.agent); updateStopAll(); node = renderThinking(event); break;
     case 'turn.reading': showReading(event); return;
-    case 'turn.cost': settleReading(event); return;
+    case 'turn.cost': {
+      settleReading(event);
+      // The card, if the human happens to be looking at it, follows the room instead of the
+      // moment MODULES was opened.
+      const open = document.getElementById('ash-economy');
+      if (open && !replaying) void paintAshEconomy(open);
+      return;
+    }
     case 'agent.completed': state.running.delete(event.payload.messageId); updateStopAll(); removeThinking(event.payload.messageId); return;
     case 'message.failed': state.running.delete(event.payload.messageId); updateStopAll(); node = renderFailure(event); break;
     case 'handoff.created': node = renderHandoff(event); break;
@@ -2410,11 +3112,13 @@ function renderEventNode(event) {
     case 'message.rated': { const { messageId: rated, rating } = event.payload; if (rating === 'none') state.ratings.delete(rated); else state.ratings.set(rated, rating); state.ratingNodes.get(rated)?.apply(rating === 'none' ? null : rating); return; }
     case 'privacy.redacted': node = renderPrivacy(event); break;
     case 'module.proposed': node = renderModuleProposed(event); break;
-    case 'extension.installed': case 'extension.removed': node = renderModuleInstalledOrRemoved(event); break;
+    case 'extension.installed': case 'extension.removed': if (!replaying) void refreshCommands(); node = renderModuleInstalledOrRemoved(event); break;
     case 'privacy.purged': node = renderPrivacy(event); break;
     case 'privacy.warning': if (!replaying) toast(t('MU/TH/UR › your message carries {n} private {term}. Agents will read it as you wrote it; their replies are guarded.', { n: event.payload.hits, term: event.payload.hits === 1 ? t('term') : t('terms') })); return;
     case 'memory.forgotten': node = renderForgotten(event); break;
-    case 'memory.noted': attachMemoryHint(event); return;
+    // A new decision changes what the head of the conversation should say.
+    case 'memory.noted': attachMemoryHint(event); if (!replaying && (event.payload.notes ?? []).some((note) => note.kind === 'decision')) void renderSettled();
+void renderOpenQuestions(); return;
     case 'dataset.exported': return;
     case 'agents.updated': {
       for (const agent of event.payload.agents ?? []) {
@@ -2459,7 +3163,9 @@ function renderEventNode(event) {
     case 'plan.stopped':
       node = renderPlanEvent(event);
       break;
+    case 'choice.offered': node = renderChoice(event); break;
     case 'room.alert': node = renderAlert(event); break;
+    case 'ash.validated': if (event.payload.ok) return; node = renderAshValidation(event); break;
     case 'room.stopped': node = renderHalted(event); break;
     case 'lease.granted': node = renderLease(event); break;
     case 'lease.refused': node = renderLeaseRefused(event); break;
@@ -2478,6 +3184,10 @@ function renderEventNode(event) {
     case 'eyecat.settled': settleEyecat(event); return;
     default: return;
   }
+  // A renderer may decline: a choice with no options, a reading with nothing to report. Declining
+  // is not an error, but appending the nothing it returned puts a hole in the column that every
+  // later pass over the children trips on.
+  if (!node) return;
   removeEmpty();
   const stickToBottom = els.thread.scrollHeight - els.thread.scrollTop - els.thread.clientHeight < 120;
   els.column.append(node);
@@ -2614,12 +3324,173 @@ async function loadTreeLevel(path, list) {
   }
 }
 
+/* ---------- the finder: search, and moving things by hand ---------- */
+//
+// Copy and move are the human's own hands in their own project, so there is no permission mode
+// here — but the zones the room guards from agents are guarded from slips too. Anything touching
+// .git, .pulse, .madre, a .env or the local settings asks for the project's designation first,
+// the same word CONTROL asks for. Typing a folder name is a small ceremony; getting a key back
+// after it was moved somewhere is not.
+const finder = {
+  search: document.querySelector('#tree-search'),
+  q: document.querySelector('#tree-q'),
+  clip: document.querySelector('#tree-clip'),
+  menu: document.querySelector('#tree-menu'),
+  held: null,      // { path, name, operation }
+};
+
+const GUARDED = /^\.git(\/|$)|^\.pulse(\/|$)|(^|\/)\.env(\.|$)|(^|\/)\.madre(\/|$)|(^|\/)\.claude\/settings\.local\.json$/;
+const finderGuarded = (...paths) => paths.filter(Boolean).some((path) => GUARDED.test(String(path).replace(/^\.\//, '')));
+
+function finderShowClip() {
+  if (!finder.clip) return;
+  if (!finder.held) { finder.clip.hidden = true; finder.clip.replaceChildren(); return; }
+  finder.clip.replaceChildren();
+  // No t() around a template that is only two slots and a dot: there is nothing in it to say in
+  // another language, and the catalogue's own guard rejects an entry whose Spanish is the English.
+  finder.clip.append(el('span', 'what', `${finder.held.operation === 'copy' ? t('COPY') : t('MOVE')} · ${finder.held.name}`));
+  const cancel = el('button', null, t('CANCEL'));
+  cancel.type = 'button';
+  cancel.addEventListener('click', () => { finder.held = null; finderShowClip(); });
+  finder.clip.append(cancel);
+  finder.clip.hidden = false;
+}
+
+// Asking for a word without leaving the panel. A name, or the designation: both are typed in the
+// same strip under the search box, where the hand already is. A browser prompt would take the
+// whole window for one word and throw away where the human was looking.
+function finderAsk({ label, value = '', hint = '' }) {
+  return new Promise((resolve) => {
+    if (!finder.clip) { resolve(null); return; }
+    const form = el('form', 'tree-ask');
+    const input = el('input');
+    input.type = 'text';
+    input.value = value;
+    input.spellcheck = false;
+    input.autocomplete = 'off';
+    input.placeholder = label;
+    input.setAttribute('aria-label', label);
+    const ok = el('button', 'go', t('OK'));
+    ok.type = 'submit';
+    const no = el('button', null, t('CANCEL'));
+    no.type = 'button';
+    form.append(input, ok, no);
+    const done = (answer) => { finderShowClip(); resolve(answer); };
+    form.addEventListener('submit', (event) => { event.preventDefault(); done(input.value.trim() || null); });
+    no.addEventListener('click', () => done(null));
+    input.addEventListener('keydown', (event) => { if (event.key === 'Escape') { event.stopPropagation(); done(null); } });
+    finder.clip.replaceChildren();
+    if (hint) finder.clip.append(el('span', 'what', hint));
+    finder.clip.append(form);
+    finder.clip.hidden = false;
+    input.focus();
+    // The extension stays out of the selection: renaming is almost always about the name.
+    const dot = value.lastIndexOf('.');
+    input.setSelectionRange(0, dot > 0 ? dot : value.length);
+  });
+}
+
+// One door for everything that writes: it asks for the designation only when it already knows one
+// will be wanted, so the human is not surprised mid-operation.
+async function finderRun(body, { say }) {
+  const guarded = [body.from, body.to].filter(Boolean).find((path) => finderGuarded(path));
+  if (guarded) {
+    const typed = await finderAsk({ label: t('PROJECT DESIGNATION'), hint: t('{path} is a place MADRE guards.', { path: guarded }) });
+    if (!typed) return false;
+    body.designation = typed;
+  }
+  const response = await fetch('/api/tree/op', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
+  const result = await response.json().catch(() => ({}));
+  if (!response.ok) { toast(`MU/TH/UR › ${result.error ?? t('That could not be done.')}`); return false; }
+  toast(say);
+  els.treeBody.replaceChildren();
+  void setTree(true);
+  return true;
+}
+
+const finderDirOf = (path) => (path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '.');
+const finderJoin = (dir, name) => (dir === '.' ? name : `${dir}/${name}`);
+
+async function finderPaste(intoDir) {
+  if (!finder.held) return;
+  const held = finder.held;
+  const to = finderJoin(intoDir, held.name);
+  const did = await finderRun({ operation: held.operation, from: held.path, to }, { say: `${held.path} → ${to}` });
+  if (!did) return;
+  finder.held = null;
+  finderShowClip();
+}
+
+async function finderRename(path, entry) {
+  const name = await finderAsk({ label: t('NEW NAME'), value: entry.name });
+  if (!name || name === entry.name) return;
+  const to = finderJoin(finderDirOf(path), name);
+  await finderRun({ operation: 'move', from: path, to }, { say: `${path} → ${to}` });
+}
+
+async function finderCreate(dir, kind) {
+  const name = await finderAsk({ label: kind === 'new-folder' ? t('NEW FOLDER') : t('NEW FILE') });
+  if (!name) return;
+  const to = finderJoin(dir, name);
+  await finderRun({ operation: kind, to }, { say: to });
+}
+
+function finderMenu(event, path, entry) {
+  event.preventDefault();
+  const menu = finder.menu;
+  if (!menu) return;
+  menu.replaceChildren();
+  const add = (label, run, cls) => {
+    const button = el('button', cls || null, label);
+    button.type = 'button';
+    button.addEventListener('click', () => { menu.hidden = true; run(); });
+    menu.append(button);
+  };
+  // Where the new thing lands: inside the folder that was clicked, or beside the file.
+  const here = entry.kind === 'dir' ? path : finderDirOf(path);
+  add(t('Copy'), () => { finder.held = { path, name: entry.name, operation: 'copy' }; finderShowClip(); });
+  add(t('Move'), () => { finder.held = { path, name: entry.name, operation: 'move' }; finderShowClip(); });
+  add(t('Rename'), () => void finderRename(path, entry));
+  if (finder.held && entry.kind === 'dir') add(t('Paste here'), () => void finderPaste(path));
+  if (finder.held && entry.kind === 'file') add(t('Paste beside it'), () => void finderPaste(here));
+  add(t('New file'), () => void finderCreate(here, 'new-file'));
+  add(t('New folder'), () => void finderCreate(here, 'new-folder'));
+  if (finderGuarded(path)) menu.append(el('div', 'note', t('MADRE GUARDS THIS PATH · IT WILL ASK FOR THE DESIGNATION')));
+  menu.hidden = false;
+  // Opened where the hand is, and kept inside the panel: a menu that spills across the room is a
+  // menu the human has to go looking for.
+  const panel = els.tree.getBoundingClientRect();
+  const box = menu.getBoundingClientRect();
+  menu.style.left = `${Math.max(6, Math.min(event.clientX - panel.left, panel.width - box.width - 6))}px`;
+  menu.style.top = `${Math.max(6, Math.min(event.clientY - panel.top, panel.height - box.height - 6))}px`;
+}
+document.addEventListener('click', (event) => { if (finder.menu && !finder.menu.hidden && !finder.menu.contains(event.target)) finder.menu.hidden = true; });
+
+// Searching the project by name, with the same scoring the composer's "!" menu uses.
+let finderTimer = null;
+finder.q?.addEventListener('input', () => {
+  clearTimeout(finderTimer);
+  finderTimer = setTimeout(async () => {
+    const query = finder.q.value.trim();
+    if (!query) { els.treeBody.replaceChildren(); void setTree(true); return; }
+    let matches = [];
+    try { matches = (await fetch(`/api/tree/search?q=${encodeURIComponent(query)}&limit=40`).then((r) => r.json()))?.matches ?? []; }
+    catch { return; }
+    const list = el('ul');
+    for (const match of matches) list.append(treeNode(match.path, { kind: 'file', name: match.path, contentType: match.contentType }));
+    els.treeBody.replaceChildren(list);
+    if (!matches.length) els.treeBody.append(el('div', 'tree-empty', t('NOTHING MATCHES {q}', { q: query })));
+  }, 160);
+});
+finder.search?.addEventListener('submit', (event) => event.preventDefault());
+
 function treeNode(path, entry) {
   const item = el('li');
   item.setAttribute('role', 'treeitem');
   const button = el('button', `node ${entry.kind}${entry.shallow ? ' shallow' : ''}${entry.kind === 'file' && /^image\//.test(entry.contentType ?? '') ? ' image' : ''}${entry.kind === 'file' && CODE_EXT.test(entry.name) ? ' code' : ''}`);
   button.type = 'button';
   button.title = path;
+  button.addEventListener('contextmenu', (event) => finderMenu(event, path, entry));
   if (entry.kind === 'dir') {
     const caret = el('span', 'caret', '▸');
     button.append(caret, el('span', 'name', entry.name));
@@ -2849,6 +3720,13 @@ els.thread.addEventListener('keydown', (event) => trackHold(event.key === 'Arrow
 /* ---------- bootstrap ---------- */
 
 const initial = await fetch('/api/state').then((response) => response.json());
+// The corner of the room: which MADRE this is, and whose it is. Quiet enough to forget about,
+// there the moment a bug report needs it. The notice is NOTICE's, word for word — a copyright
+// 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á`;
+}
 adoptLanguage(initial.language);
 els.project.textContent = initial.projectRoot.split('/').filter(Boolean).at(-1) || initial.projectRoot;
 els.project.title = initial.projectRoot;
@@ -2869,7 +3747,9 @@ state.budget = Number.isFinite(initial.softTokenBudget) && initial.softTokenBudg
 state.timeouts = initial.timeouts ?? {};
 state.sessions = initial.sessions ?? {};
 state.capabilities = initial.capabilities ?? {};
+state.ripleyWeb = Boolean(initial.ripleyWeb);
 syncAshUI(Boolean(initial.ash?.enabled));
+void renderSettled();
 state.ripley = Boolean(initial.ripley?.enabled);
 state.projectRoot = initial.projectRoot ?? '';
 state.platform = initial.platform ?? null;
@@ -2896,6 +3776,10 @@ if (!els.target.options.length) els.target.add(new Option(t('No agent ready'), '
 renderAgents();
 renderPicker();
 renderOnboarding();
+// What the composer will accept. A module's commands live on the server, so the page has to ask:
+// this call had slipped inside the branch that ends a live installation, and until one happened
+// `/git` and every module command answered «unknown» in a room that had them enabled all along.
+void refreshCommands();
 for (const event of initial.events) renderEvent(event);
 scrollToEnd();
 matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => { applyTheme(themeMode); renderAgents(); renderPicker(); });
@@ -3016,6 +3900,49 @@ function syncModuleComposer() {
   updatePlaceholder();
   if (active && !state.create) askForModuleMode();
 }
+// A question about what this room already said is a question the room can answer itself, on this
+// computer, for nothing. @madre reads the same archive every paid agent reads and bills no
+// tokens at all — so the saving here is not a shorter answer or a better cache, it is the
+// absence of a charge.
+//
+// It offers and never decides. The human addressed somebody, or addressed nobody and MADRE
+// picked the first ready agent; changing that silently would be MADRE spending — or not
+// spending — in their name. One line, one button, and it says what it matched on.
+const OFFER_WHY = {
+  decision: 'what was decided',
+  discussed: 'whether this came up before',
+  where: 'where the room left off',
+  why: 'why something was chosen',
+  said: 'what somebody said',
+  open: 'what is still open',
+};
+function syncFreeOffer() {
+  const box = els.freeOffer;
+  if (!box) return;
+  const madre = state.agents.get('madre');
+  const chosen = els.target.value;
+  const why = archiveQuestion(els.input.value);
+  // Only worth offering when it is free, ready, and not already where it would go.
+  if (!why || !madre?.ready || chosen === 'madre' || state.mode >= 2) { box.hidden = true; box.replaceChildren(); return; }
+  if (box.dataset.why === why && !box.hidden) return;
+  box.dataset.why = why;
+  box.replaceChildren();
+  box.append(el('span', 'free-what', t('@madre can answer this from the room archive, on this computer, for no tokens · it read {why}', { why: t(OFFER_WHY[why]) })));
+  const go = el('button', 'free-go', t('ASK @madre'));
+  go.type = 'button';
+  go.addEventListener('click', () => {
+    els.target.value = 'madre';
+    renderPicker();
+    box.hidden = true;
+    els.input.focus();
+  });
+  box.append(go);
+  box.hidden = false;
+}
+els.input.addEventListener('input', syncFreeOffer);
+els.input.addEventListener('input', () => { if (els.openq) els.openq.hidden = Boolean(els.input.value.trim()); });
+els.composer?.addEventListener('submit', () => { if (els.freeOffer) { els.freeOffer.hidden = true; els.freeOffer.dataset.why = ''; } });
+
 els.input.addEventListener('input', syncModuleComposer);
 syncModuleComposer();
 
@@ -3122,7 +4049,15 @@ function showMenu(items, found) {
     button.setAttribute('role', 'option');
     button.setAttribute('aria-selected', String(index === menu.index));
     if (item.color) button.style.setProperty('--agent', item.color);
-    button.append(el('span', 'key', item.key), el('span', 'what', item.what));
+    // The name and what it does share the first line; the argument syntax gets its own, because
+    // 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}`;
     button.addEventListener('mousedown', (event) => { event.preventDefault(); pickMenu(index); });
     els.slashMenu.append(button);
   });
@@ -3187,7 +4122,9 @@ async function runSlashCommand(text) {
       return {
         handled: false,
         target,
-        text: t('Create a MADRE module for this request: {request} Write exactly one <id>.module.mjs file for review. Do not install it; MADRE will show the human an install card.', { request: rest }),
+        // The card shows `vendor` under the name, so the instruction has to say what it is for.
+        // Left unsaid, Codex wrote `vendor: 'you'` and the room printed it as the author.
+        text: t('Create a MADRE module for this request: {request} Write exactly one <id>.module.mjs file for review. Set vendor to whoever wrote it — the human\'s name or team if you know it, otherwise leave it out; never the word "you". Do not install it; MADRE will show the human an install card.', { request: rest }),
       };
     }
     return { handled: false, text: rest, target };
@@ -3396,6 +4333,16 @@ els.composer.addEventListener('submit', async (event) => {
   const ready = state.pending.filter((item) => item.id && !item.uploading);
   if (!text && !ready.length) return;
   if (state.pending.some((item) => item.uploading)) { toast(t('An attachment is still uploading.')); return; }
+  // Called by name. Not routed, not recorded, not billed — and whatever agent the chip is on, it
+  // never hears about it. See abduction.js.
+  if (calledByName(text, { attachments: state.pending.length })) {
+    els.input.value = '';
+    autosize();
+    syncModuleComposer();
+    await abduct({ composer: els.composer, reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches });
+    els.input.focus();
+    return;
+  }
   if (STOPALL.test(text)) {
     // Master command: never reaches an agent.
     els.input.value = '';
@@ -3823,20 +4770,6 @@ mother.dialog.addEventListener('close', () => clearTimeout(mother.bootTimer));
 
 /* ---------- MODULES: optional integrations installed by their own tools ---------- */
 
-const modules = {
-  dialog: document.querySelector('#modules'),
-  button: document.querySelector('#modules-button'),
-  count: document.querySelector('#modules-count'),
-  close: document.querySelector('#modules-close'),
-  list: document.querySelector('#modules-list'),
-  add: document.querySelector('#modules-add'),
-  file: document.querySelector('#modules-file'),
-  note: document.querySelector('#modules-note'),
-  items: [],
-  installing: null,
-  logs: new Map(),   // id -> array of lines
-  confirming: null,
-};
 
 function renderModuleEvent(event) {
   const { id, name, command, platforms = [], ok, code, error, status, problems = [] } = event.payload;
@@ -3856,7 +4789,7 @@ function renderModuleEvent(event) {
       : `${t('{name} install failed', { name })}${error ? ` · ${error}` : code !== undefined ? t(' · exit {code}', { code }) : ''}`);
     modules.installing = null;
     void refreshModules();
-void refreshCommands();
+    void refreshCommands();
   }
   state.lastSender = null;
   return node;
@@ -4311,15 +5244,211 @@ async function updateModule(item, button) {
   (panel ?? card)?.prepend(box);
 }
 
+// The economy, at the size it deserves. The card in MODULES is the glance; this is the reading.
+//
+// Order is the argument: what the room never paid for comes first, because it is the only figure
+// here that is money, then what Ash has been seen to do to the answers, then where the tokens
+// that WERE paid for went. Nothing in this panel is a number the room did not measure or cannot
+// name as an estimate.
+const economyPanel = {
+  dialog: document.querySelector('#economy'),
+  close: document.querySelector('#economy-close'),
+  body: document.querySelector('#economy-body'),
+};
+
+function openEconomy() {
+  if (!economyPanel.dialog || economyPanel.dialog.open) return;
+  economyPanel.dialog.showModal();
+  void renderEconomy();
+}
+
+economyPanel.close?.addEventListener('click', () => economyPanel.dialog.close());
+
+async function renderEconomy() {
+  const box = economyPanel.body;
+  if (!box) return;
+  const count = (value) => (Number.isFinite(value) ? value.toLocaleString() : '—');
+  const pct = (value) => (Number.isFinite(value) ? `${Math.round(value * 100)}%` : '—');
+  let read;
+  try { read = await fetch('/api/economy').then((response) => response.json()); }
+  catch { box.replaceChildren(el('p', 'note', t('ECONOMY UNAVAILABLE'))); return; }
+  box.replaceChildren();
+  if (!read?.turns) {
+    box.append(el('p', 'note', t('NO TURNS WEIGHED YET · SEND A MESSAGE AND THIS FILLS')));
+    return;
+  }
+  const saved = read.saved ?? {};
+  const totals = read.totals;
+
+  // The room in six figures, across the full width. A stat row, not a chart: six numbers of six
+  // different kinds have no shape to draw, and drawing one anyway is how a panel starts lying.
+  const strip = el('div', 'economy-strip');
+  for (const [value, label, hint] of [
+    [count(read.turns), t('TURNS WEIGHED'), t('every turn this room has been billed for')],
+    [count(totals.input), t('INPUT CHARGED'), t('tokens the CLIs charged as fresh reading')],
+    [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')],
+  ]) {
+    const cell = el('div', 'economy-stat');
+    cell.title = hint;
+    cell.append(el('b', null, String(value)), el('span', null, label));
+    strip.append(cell);
+  }
+  box.append(strip);
+
+  // 1 · The only money on this screen.
+  const first = el('div', 'card-block');
+  first.append(el('h5', null, t('NEVER CHARGED FOR')));
+  first.append(el('div', 'economy-headline', count(saved.tokens)));
+  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')],
+    [t('OF THE INPUT'), pct(saved.cachedShare), t('the share of everything read that came back from a cache')],
+  ]);
+  first.append(el('p', 'note', t('One half is measured and the other is estimated, and they are never added without saying so. Neither of them is Ash: Ash shortens the answer, which is the next reading.')));
+  box.append(first);
+
+  // 1b · The turns with no bill at all. Nothing here is compared to anything: a count, and the
+  // 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')));
+    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')],
+      [t('A PAID TURN'), read.free.paidOutputMedian ? `${count(read.free.paidOutputMedian)}↑` : '—', t('the middle paid turn here · what the others cost, not what these would have')],
+    ]);
+    free.append(el('p', 'note', t('These turns have no bill because nothing left this computer to answer them. MADRE does not say what they would have cost somewhere else: nobody measured that.')));
+    box.append(free);
+  }
+
+  // 2 · Ash, observed rather than claimed.
+  const second = el('div', 'card-block');
+  second.append(el('h5', null, 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,
+  // would be an argument for Ash rather than a reading of it.
+  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('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) })],
+    ]);
+    second.append(el('p', 'note', t('What Ash costs is certain and measured here. What it saves is not: the shorter answer below is observed, never promised. Output is the dearer half of every bill, so the trade is usually favourable — MADRE does not turn it into money because it does not know your prices.')));
+  }
+  if (read.ash?.agents?.length) ashComparison(second, read.ash);
+  else second.append(el('p', 'note', t('No turns with the switch recorded yet. Leave Ash on for a few turns and off for a few more, and this fills.')));
+  box.append(second);
+
+  // 3 · Where what WAS paid for went.
+  const third = el('div', 'card-block');
+  third.append(el('h5', null, 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);
+
+  // 4 · One row per agent, because they do not behave alike.
+  // Per agent: turns, two token counts and two shares — five attributes of four different kinds,
+  // 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')));
+  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);
+  const body = el('tbody');
+  for (const agent of read.agents) {
+    const row = el('tr');
+    row.append(el('th', null, String(agent.agent).toUpperCase()));
+    for (const cell of [count(agent.turns), count(agent.input), count(agent.output), count(agent.cached), pct(agent.cacheShare), agent.charsPerInputToken ? agent.charsPerInputToken.toFixed(2) : '—']) {
+      row.append(el('td', null, String(cell)));
+    }
+    body.append(row);
+  }
+  table.append(body);
+  fourth.append(table);
+  box.append(fourth);
+}
+
+// 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 widest = read.blocks[0]?.chars || 1;
+  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' : ''}`));
+    bars.append(row);
+  }
+  box.append(bars);
+}
+
+// What Ash has actually done here, in output tokens, per agent.
+//
+// Never a saving: the room does not run a turn twice, so the number that would say "you saved
+// this" was never measured by anybody. This is the middle turn with Ash against the middle turn
+// without it, in this room, with the count of turns behind each side in plain sight.
+//
+// Two bars on one scale, not one bar of a ratio. A single bar had to encode "what fraction of
+// the usual length is left", which reads backwards — a longer bar meant Ash did less. Two bars
+// say it the way anybody reads a bar: the shorter one is the shorter answer.
+function ashComparison(box, ash) {
+  if (!ash?.agents?.length) return;
+  const widest = Math.max(...ash.agents.flatMap((agent) => [agent.on.medianOutput ?? 0, agent.off.medianOutput ?? 0]), 1);
+  const list = el('div', 'ash-compare');
+  for (const agent of ash.agents) {
+    const group = el('div', 'ash-agent');
+    group.append(el('b', null, String(agent.agent).toUpperCase()));
+    if (agent.comparable) {
+      for (const [side, label, turns] of [['on', t('with ASH'), agent.on.turns], ['off', t('without ASH'), agent.off.turns]]) {
+        const row = el('div', `ash-bar ${side}`);
+        const bar = el('i');
+        bar.style.setProperty('--fill', `${Math.max(2, Math.round((agent[side].medianOutput / widest) * 100))}%`);
+        row.append(el('span', 'ash-side', label), bar, el('span', 'ash-figure', t('{n}↑ · {turns} turns', { n: agent[side].medianOutput.toLocaleString(), turns })));
+        group.append(row);
+      }
+    } else {
+      group.append(el('p', 'ash-waiting', t('{n} turns with ASH, {m} without · {min} of each before this can be read', {
+        n: agent.on.turns, m: agent.off.turns, min: ash.minTurns,
+      })));
+    }
+    // Two medians are not a finding. When the gap is smaller than how much this agent's answers
+    // vary anyway, the honest thing on the screen is that there is nothing to read here yet.
+    if (agent.comparable) {
+      group.append(el('p', agent.readable ? 'ash-verdict' : 'ash-verdict noise', agent.readable
+        ? t('{pct} shorter with ASH, wider than this agent varies here (±{on} and ±{off})', { pct: `${Math.round(Math.abs(agent.share) * 100)}%`, on: agent.on.spread.toLocaleString(), off: agent.off.spread.toLocaleString() })
+        : t('the difference fits inside how much this agent varies anyway (±{on} and ±{off}) · nothing to read yet', { on: agent.on.spread.toLocaleString(), off: agent.off.spread.toLocaleString() })));
+    }
+    list.append(group);
+  }
+  box.append(list);
+  box.append(el('p', 'note', t('The middle turn of each side, not an average. You choose when to ask for compact prose, so the two sides are different tasks, not the same task twice — MADRE does not claim a percentage saved.')));
+}
+
 // The economy, on the card of the thing it is about. It fills as the room is used, because it
 // weighs turns, not history.
 function ashReading(panel) {
   const box = cardBlock(panel, t('ECONOMY · THIS ROOM'));
-  const waiting = el('p', 'note', t('READING…'));
-  box.append(waiting);
+  box.id = 'ash-economy';
+  box.append(el('p', 'note', t('READING…')));
+  paintAshEconomy(box);
+}
+
+// The card is the glance, and a glance is four figures and a door. Everything that needs width —
+// the bars, where each prompt goes, the sentences that say which half is measured — is in the
+// panel behind SEE THE ECONOMY. A card that tries to be the panel ends up being neither: the
+// lines wrap out of their box and nothing on it can be read at a glance.
+function paintAshEconomy(box) {
   const pct = (value) => (Number.isFinite(value) ? `${Math.round(value * 100)}%` : '—');
   const count = (value) => (Number.isFinite(value) ? value.toLocaleString() : '—');
-  fetch('/api/economy').then((response) => response.json()).then((read) => {
+  return fetch('/api/economy').then((response) => response.json()).then((read) => {
     box.replaceChildren(el('h5', null, t('ECONOMY · THIS ROOM')));
     if (!read?.turns) {
       box.append(el('p', 'note', t('NO TURNS WEIGHED YET · SEND A MESSAGE AND THIS FILLS')));
@@ -4335,20 +5464,6 @@ function ashReading(panel) {
       [t('SPENT OUT'), count(totals.output), t('output tokens, the dearer half')],
       [t('TURNS'), count(read.turns), t('weighed so far')],
     ]);
-    // Not a tokenizer: what MADRE wrote against what the CLIs were charged for reading. The
-    // gap between the two is the agents' own system prompts, their tools and the files they
-    // opened during a turn, which is the useful thing this number has to say.
-    box.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(totals.prefixShare), chars: count(totals.chars), input: count(totals.input) })));
-    const widest = read.blocks[0]?.chars || 1;
-    const bars = el('div', 'ash-blocks');
-    for (const block of read.blocks.slice(0, 8)) {
-      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' : ''}`));
-      bars.append(row);
-    }
-    box.append(bars);
   }).catch(() => { box.replaceChildren(el('h5', null, t('ECONOMY · THIS ROOM')), el('p', 'note', t('ECONOMY UNAVAILABLE'))); });
 }
 
@@ -4379,7 +5494,7 @@ function builtinCard(item) {
       for (const [role, model, present, label] of [
         ['embeddings', item.recommended?.embed ?? 'nomic-embed-text', Boolean(info.embedModel), t('EMBEDDINGS')],
         ['archivist', item.recommended?.chat ?? 'qwen2.5:3b', Boolean(info.chatModel), t('ARCHIVIST')],
-        ['agent', item.recommended?.chat ?? 'qwen2.5:3b', Boolean(info.chatModel), '@MADRE IN THE ROOM'],
+        ['agent', item.recommended?.chat ?? 'qwen2.5:3b', Boolean(info.chatModel), t('@madre in the room')],
       ]) {
         if (present) {
           const box = el('label', 'toggle');
@@ -4492,7 +5607,10 @@ function builtinCard(item) {
         toggle.disabled = false;
       }
     });
-    actions.append(toggle);
+    const open = el('button', null, t('SEE THE ECONOMY'));
+    open.type = 'button';
+    open.addEventListener('click', () => openEconomy());
+    actions.append(open, toggle);
     return card;
   }
 
@@ -4680,7 +5798,6 @@ function trackStats(event) {
 
 function fmtMs(ms) { return ms === null ? '—' : ms < 1000 ? `${ms}ms` : `${Math.round(ms / 1000)}s`; }
 
-const CAP_LABELS = { read: t('read'), imageIn: t('image in'), write: t('create'), imageGen: t('image gen'), web: t('web') };
 function capabilityBadges(id) {
   const caps = state.capabilities[id] ?? {};
   const wrap = el('div', 'caps');
@@ -4870,17 +5987,6 @@ const core = {
   tabs: null,
 };
 
-// Characters to tokens, in the core. The same estimate the room uses for text nobody was
-// charged for, kept here because the page cannot import from the server: src/room/economy.mjs
-// holds the other copy and a test keeps the two equal.
-//
-// It is an estimate and it is labelled as one. What this room MEASURES — what MADRE wrote
-// against what the CLI was charged for reading — is a different quantity: the CLIs bill their
-// own system prompt, their own tools and every file they open, so in this room that ratio was
-// 0.62 and called a 14,356-character briefing 23,155 tokens.
-const CH_PER_TOKEN = 3.5;
-const tokensFor = (chars) => Math.round((Number(chars) || 0) / CH_PER_TOKEN);
-
 const CORE_BOOT = [
   t('INTERFACE 2037 · CORE ACCESS'),
   t('MU/TH/UR 6000 READY FOR INQUIRY.'),
@@ -4948,7 +6054,7 @@ async function loadCore() {
   core.panes?.classList.add('reading');
   let briefing;
   try {
-    const query = new URLSearchParams({ mode: String(core.mode), ...(core.agent ? { agent: core.agent } : {}), ...(core.text ? { text: core.text } : {}) });
+    const query = new URLSearchParams({ mode: String(core.mode), ash: String(state.ashInstalled && state.ash), ...(core.agent ? { agent: core.agent } : {}), ...(core.text ? { text: core.text } : {}) });
     briefing = await fetch(`/api/briefing?${query}`).then((response) => response.json());
     if (briefing.error) throw new Error(briefing.error);
   } catch (error) {
@@ -6065,16 +7171,6 @@ function askMotherAbout(conditionId) {
 
 /* ---------- NOSTROMO: memory research. The archive as a solar system: the room is a red sun, every distilled memory a smoking planet, plasma between them. ---------- */
 
-// Memories burn as stars burn, and a star's colour is its class. A decision is a yellow dwarf,
-// the steady kind a system is built around. A fact is a white dwarf: cold, dense, settled. A
-// preference is a red dwarf, dim and personal and very long lived. A question is a blue dwarf,
-// the hottest thing in the sky and the least settled.
-const MEMORY_COLORS = { decision: '#ffdc3c', fact: '#dfeeff', preference: '#5cf07a', question: '#3dc6ff', aberration: '#b14cff' };
-// A memory's kind is an id in the ledger and a word on a screen. Only the word is said in the
-// room's language: what was written down never moves. Declared one by one, so the catalogue's
-// guard sees all five and an id nobody translated cannot slip past as itself.
-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();
 // One kind is not a star. An aberration is a claim the room established is false, and it burns
 // nothing: it is a collapsed body with a ring of what fell into it, and it gives off no light
 // of its own. It is drawn dark on purpose, because it is the one thing in here nobody should