@jossuealcala/madre 1.0.2 → 1.0.3

package/public/app.js

@@ -7,11 +7,17 @@ import { allConditions, detectPlatform, diagnose, fixesFor, PLATFORMS, searchCon
 import { answerFor, INQUIRIES, STRIKES } from './inquiry.js';
 import { DEFAULT_LANGUAGE, LANGUAGES, browserLanguage, isLanguage, language, pick, setLanguage, t, fill } from './i18n.js';
 import { createEditor } from './editor.js';
+import { labelPowerKey, powerKey } from './power.js';
+import { drawHardware, hardwareLine } from './hardware.js';
+import { CUSTOM_WALL, addPicture, customTile, customTools, customWall, paintCustomWall, rememberedWall } from './wallpaper.js';
+import { createStrain, inviteNeural, neuralChosen, neuralKey, paintNeuralKey, rememberNeural } from './neural.js';
 import { resay } from './resay.js';
 import { startReviewAsk } from './review-ask.js';
 import { spotlight, startTour as startWelcome } from './tour.js';
 import { dropStickyHover } from './touch.js';
-import { drawAttribution, drawLegal } from './attribution.js';
+import { drawAttribution, drawColophonKeys, drawLegal } from './attribution.js';
+import { MODULE_FACES, appIcon, loadMarket, marketEntry, marketOffer, moduleFace } from './market.js';
+import { openMarket } from './market-view.js';
 // Where nothing can hover (a phone), a tapped key does not stay lit (public/touch.js).
 dropStickyHover();
 // Made the first time the room asks for it (roomTour, below), which can be while this file is
@@ -22,6 +28,7 @@ let welcomeKept;
 const welcomeDone = () => welcomeKept !== undefined && (welcomeKept === null || Boolean(welcomeKept.finished));
 import { LOADER_MARK, creep, finishLoader, makeLoader, setLoader, showCurtain } from './loader.js';
 import { familyOf, languageLabel, tokenize } from './syntax.js';
+import { hunkKey, lineDiff, placeHunks, revertHunk, symbolAt } from './code-tools.js';
 import { COLLAPSED, MEMORY_COLORS, PITCH_LIMIT, TURN_PER_PIXEL, activityOf, collapsedChip, createNostromo, dwarfChip, hexMix, rawActivity, travels } from './nostromo-engine.js';
 
 // The window split in two. The right half is this same page loaded with `?pane=split&chat=<id>`:
@@ -85,6 +92,13 @@ if (SPLIT_CHAT) {
 let motionScale = null;
 // The chooser's chevron: one drawing for every menu that opens downward, in the same round line.
 const ICON_CHEVRON = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4.2 6.2 8 10l3.8-3.8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+// The panels' drawings: a panel at the left, a panel at the right, and the code workspace's side
+// by side. Declared this early because the code workspace is built while the page loads.
+const SPLIT_LEFT_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.75" y="3.75" width="14.5" height="12.5" rx="3.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect class="ic-h" x="5" y="6" width="3.6" height="8" rx="1.3" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M10.6 6.4v7.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+const SPLIT_RIGHT_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.75" y="3.75" width="14.5" height="12.5" rx="3.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect class="ic-h" x="11.4" y="6" width="3.6" height="8" rx="1.3" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M9.4 6.4v7.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+// Side by side in the code workspace: the text on the left in lines, what it makes on the right.
+// Not the window's split (two empty halves), which stands two keys further along the same header.
+const BESIDE_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.75" y="3.75" width="14.5" height="12.5" rx="3.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M10 3.75v12.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M5.2 7.6h2.4M5.2 10h1.6M5.2 12.4h2.4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><rect x="11.9" y="8.1" width="3.4" height="3.8" rx="1" fill="currentColor"/></svg>';
 function chevron(className = 'chev') {
   const mark = el('span', `${className} chev-icon`);
   mark.innerHTML = ICON_CHEVRON;
@@ -205,7 +219,7 @@ const MODES = {
 // gives back: with nowhere to type it, the sign-in could only die of its own timeout, which is
 // exactly what it did. This holds what the room knows about the one running — which agent, the
 // address, whether it is waiting — and `.login-ask` is where it is answered.
-const loginNow = { agent: null, method: null, url: null, awaiting: false, asksForCode: false };
+const loginNow = { agent: null, method: null, url: null, deviceCode: null, awaiting: false, asksForCode: false };
 const looksLikeCodePrompt = (line) => /paste\s+(?:the\s+)?code|enter\s+(?:the\s+)?code|c[oó]digo\s*[:>]/i.test(String(line ?? ''));
 
 const state = {
@@ -221,6 +235,7 @@ const state = {
   ollamaAsked: false,
   ollamaRecommended: null,
   ratings: new Map(),        // messageId → good | bad, from the ledger
+  deliveries: new Map(),    // D-S17: id of a delivered note → its row
   ratingNodes: new Map(),    // messageId → the buttons of that bubble // messageId -> { text, target }
   lastSequence: 0,
   lastSender: null,        // for iMessage-style grouping of consecutive bubbles
@@ -339,13 +354,46 @@ function touchedUnder(dir) {
 
 /* ---------- helpers ---------- */
 
+// The signs a key's words may end in, drawn by tailMark (below).
+const TAIL_MARK = /\s*[↗▾]\s*$/;
+const OUT_ICON = '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M5.2 10.8 10.6 5.4M6.4 5.2h4.4v4.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 const el = (tag, className, text) => {
   const node = document.createElement(tag);
   if (className) node.className = className;
   if (text !== undefined) node.textContent = text;
+  if ((tag === 'a' || tag === 'button') && typeof text === 'string' && TAIL_MARK.test(text)) tailMark(node);
   return node;
 };
 
+// A key or a link whose words end in ↗ goes somewhere outside the room, and one that ends in ▾
+// opens a menu (1.0.3): the sign is drawn, at the size of a mark, and the words stay as they are
+// (the catalogue keeps the sign, so a translation never loses it). The page's own markup goes
+// through the same after it is translated, the way its × does.
+function tailMark(node) {
+  const last = [...(node?.childNodes ?? [])].reverse().find((one) => one.nodeType === 3 && one.nodeValue.trim());
+  const sign = last?.nodeValue.match(TAIL_MARK)?.[0]?.trim();
+  if (!sign) return node;
+  last.nodeValue = last.nodeValue.replace(TAIL_MARK, ' ');
+  const mark = document.createElement('span');
+  mark.className = sign === '↗' ? 'tail-mark out' : 'tail-mark menu';
+  mark.innerHTML = sign === '↗' ? OUT_ICON : ICON_CHEVRON; // trusted: our own SVG strings
+  node.append(mark);
+  return node;
+}
+
+// A label that opens with ◉ (still open here, decided here, memory saved): the ring and its dot are
+// drawn at the size of a mark, the words after them as written.
+const LEAD_ICON = '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><circle cx="8" cy="8" r="5.4" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="8" r="2.1" fill="currentColor"/></svg>';
+function leadWords(tag, className, said) {
+  const node = el(tag, className);
+  const words = String(said ?? '').replace(/^◉\s*/u, '');
+  if (words === said) { node.textContent = said; return node; }
+  const mark = el('span', 'lead-mark');
+  mark.innerHTML = LEAD_ICON; // trusted: our own SVG string
+  node.append(mark, words);
+  return node;
+}
+
 // Every way to close something closes the same way: one × drawn as a line, not a letter, that
 // turns a quarter and thickens under the pointer — the one the conversations panel already had.
 // A labelled button keeps its words («CLOSE ×» says what it closes); only its × becomes the mark.
@@ -470,20 +518,48 @@ function toastTone(message, tone) {
   if (TOAST_LOOK.test(message)) return 'look';
   return 'done';
 }
-function toast(message, { tone = null } = {}) {
+// `action` ({ label, run }) puts one key at its end: the Market's news says «See it» (2026-10-18).
+function toast(message, { tone = null, action = null } = {}) {
   placeToast();
   const text = String(message);
-  const kind = toastTone(text, tone);
+  const kind = action && !tone ? 'news' : toastTone(text, tone);
   // Who speaks stays in the words a screen reader hears; on screen the dot says enough.
   // The prefix the room's own notices carry, in the room's language (WEB-14): after MU/TH/UR became
   // Diagnóstico the old one was looked for, and «Diagnóstico ›» showed in every notice.
   const from = [t('Diagnostics › '), 'MU/TH/UR › '].find((prefix) => text.startsWith(prefix)) ?? '';
   els.toast.replaceChildren(el('i', 'toast-dot'), ...(from ? [el('span', 'toast-from', from)] : []), el('span', 'toast-text', text.slice(from.length)));
+  if (action) {
+    const key = el('button', 'toast-act', action.label);
+    key.type = 'button';
+    key.addEventListener('click', () => { clearTimeout(toastTimer); els.toast.hidden = true; roomForToast(false); action.run(); });
+    els.toast.append(key);
+  }
   els.toast.dataset.tone = kind;
   els.toast.classList?.toggle('note', kind === 'note');
+  els.toast.classList?.remove('leaving');
   els.toast.hidden = false;
+  roomForToast(true);
   clearTimeout(toastTimer);
-  toastTimer = setTimeout(() => { els.toast.hidden = true; }, 6000);
+  // It closes back into its dot before it goes (styles.css, toast-fold).
+  toastTimer = setTimeout(() => {
+    els.toast.classList?.add('leaving');
+    toastTimer = setTimeout(() => { els.toast.hidden = true; els.toast.classList?.remove('leaving'); roomForToast(false); }, 320);
+  }, action ? 10000 : 6000);
+}
+// While a notice floats over the end of the conversation, a reader at the end gets the room it
+// takes: the last line rises above it instead of going under it. The thread follows the column as
+// it grows and shrinks.
+function roomForToast(on) {
+  const root = document.documentElement;
+  if (!root?.classList || !root.style?.setProperty) return;
+  root.classList.toggle('toasting', on);
+  if (on) root.style.setProperty('--toast-h', `${Math.ceil(els.toast.offsetHeight || 38)}px`);
+  const room = on && pinnedToEnd && !pageScrolls();
+  if (root.classList.contains('toast-room') === room) return;
+  root.classList.toggle('toast-room', room);
+  const until = performance.now() + 340;
+  const follow = () => { keepPinned(); if (performance.now() < until) requestAnimationFrame(follow); };
+  requestAnimationFrame?.(follow);
 }
 
 // Nothing in the room speaks on hover: not a button, not a chip, not a cut-off title. Every
@@ -514,7 +590,7 @@ const scroller = {
   set top(value) { if (this.node) this.node.scrollTop = value; },
   get height() { return this.node?.scrollHeight ?? 0; },
   get view() { return pageScrolls() ? (window.innerHeight ?? 0) : (els.thread?.clientHeight ?? 0); },
-  to(options) { (pageScrolls() ? window : els.thread)?.scrollTo?.(options); },
+  to(options) { ourScroll(options?.behavior === 'smooth' ? 900 : 160); (pageScrolls() ? window : els.thread)?.scrollTo?.(options); },
 };
 
 // Back to the box after a choice that is not writing (an agent, a model, an effort). On a phone
@@ -523,8 +599,18 @@ function focusComposer() {
   if (!state.device) els.input?.focus();
 }
 
+// What a node says, changed in place: the text it already holds is rewritten rather than replaced.
+// A replaced child is a mutation the window watcher answers with a layout of every window
+// (paintDepth), and the working clock changes once a second.
+function setText(node, value) {
+  const first = node.firstChild;
+  if (first && first.nodeType === 3 && !first.nextSibling) { if (first.data !== value) first.data = value; return; }
+  node.textContent = value;
+}
+
 function scrollToEnd() {
-  scroller.top = scroller.height;
+  scroller.to({ top: scroller.height, behavior: 'instant' });
+  setPinned(true);
 }
 
 // The thread is pinned to its own end, and anything that changes how tall it is has to put it
@@ -533,13 +619,30 @@ function scrollToEnd() {
 // 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.
+// decides it. A programmatic scroll fires the same event, so the room marks its own scrolls for a
+// moment (ourScroll) and only a scroll outside that moment is measured: the wheel, a finger, the
+// scrollbar dragged, the keyboard, ⌘F. It used to be measured 90 ms after a wheel turn, and a
+// relayout inside those 90 ms pulled the thread back to its end before the measure could see the
+// human had gone up — while an agent worked, the thread would not let anyone scroll up.
 let pinnedToEnd = true;
-const measurePin = () => {
-  pinnedToEnd = scroller.height - scroller.top - scroller.view < 120;
-};
-for (const how of ['wheel', 'touchmove', 'keydown']) els.thread?.addEventListener(how, () => setTimeout(measurePin, 90), { passive: true });
+let ourScrollUntil = 0;
+function ourScroll(ms = 160) { ourScrollUntil = Math.max(ourScrollUntil, performance.now() + ms); }
+const distanceToEnd = () => scroller.height - scroller.top - scroller.view;
+function setPinned(value) {
+  if (pinnedToEnd === value) return;
+  pinnedToEnd = value;
+  if (value) clearFinishedBelow();
+}
+const measurePin = () => setPinned(distanceToEnd() < 64);
+// A turn of the wheel upward leaves the end at once: nothing may pull the thread back under it.
+els.thread?.addEventListener('wheel', (event) => {
+  ourScrollUntil = 0;
+  if (event.deltaY < 0 && scroller.top > 0) setPinned(false);
+}, { passive: true });
+for (const how of ['touchstart', 'pointerdown']) els.thread?.addEventListener(how, (event) => { if (how === 'touchstart' || event.target === els.thread) ourScrollUntil = 0; }, { passive: true });
+const onThreadScroll = () => { if (performance.now() >= ourScrollUntil) measurePin(); };
+els.thread?.addEventListener('scroll', onThreadScroll, { passive: true });
+window.addEventListener?.('scroll', () => { if (pageScrolls()) onThreadScroll(); }, { 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
@@ -550,6 +653,7 @@ for (const how of ['wheel', 'touchmove', 'keydown']) els.thread?.addEventListene
 // 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;
+  if (distanceToEnd() < 1) return;
   scroller.to({ top: scroller.height, behavior: 'instant' });
 }
 if (typeof ResizeObserver === 'function' && els.thread) {
@@ -559,6 +663,40 @@ if (typeof ResizeObserver === 'function' && els.thread) {
   if (els.composer) watch.observe(els.composer);
 }
 
+// Gone up to read while an agent works, the human is not pulled down when it answers: a light
+// round button over the box says something finished below — in the colour of who answered — and
+// takes them there. It goes away at the end, however they get there.
+const finishedBelow = { button: null, who: null };
+function toEndButton() {
+  if (finishedBelow.button || !document.querySelector?.('.shell')) return finishedBelow.button;
+  const button = el('button', 'to-end');
+  button.type = 'button';
+  button.hidden = true;
+  button.innerHTML = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4.5v10.5M5.2 10.4 10 15.2l4.8-4.8" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg><i class="to-end-dot"></i>'; // trusted: our own SVG string
+  button.addEventListener('click', () => {
+    setPinned(true);
+    scroller.to({ top: scroller.height, behavior: 'smooth' });
+  });
+  document.querySelector('.shell').append(button);
+  finishedBelow.button = button;
+  return button;
+}
+function markFinishedBelow(agent, plan = false) {
+  const button = toEndButton();
+  if (!button || pinnedToEnd) return;
+  if (agent) tint(button, agent);
+  finishedBelow.who = agent;
+  button.setAttribute('aria-label', plan ? t('The plan finished below · go to the end') : t('@{agent} answered below · go to the end', { agent: agent ?? 'madre' }));
+  placeToast();
+  if (button.hidden) { button.hidden = false; button.classList.remove('leaving'); }
+}
+function clearFinishedBelow() {
+  const button = finishedBelow.button;
+  if (!button || button.hidden || button.classList.contains('leaving')) return;
+  button.classList.add('leaving');
+  setTimeout(() => { if (button.classList.contains('leaving')) { button.hidden = true; button.classList.remove('leaving'); } }, 200);
+}
+
 /* ---------- safe Markdown (DOM only, no HTML injection) ---------- */
 
 const SAFE_URL = /^https?:\/\//i;
@@ -731,6 +869,7 @@ function paintSelection() {
   // Nobody guesses that a line number is clickable: while nothing is picked, the status line says how.
   if (viewerUI.hintSelect) viewerUI.hintSelect.hidden = has || !viewerUI.lineNodes.length;
   if (has) viewerUI.selection.textContent = runs.map(([lo, hi]) => (lo === hi ? `L${lo}` : `L${lo}–${hi}`)).join(', ');
+  if (has) paintCodeCrumbs(runs[0][0]);
 }
 function setSelection(from, to) {
   viewerUI.picked = new Set();
@@ -818,6 +957,14 @@ function showViewerMenu(x, y) {
 function hideViewerMenu() { try { viewerUI.menu.hidePopover?.(); } catch { /* not open */ } viewerUI.menu.hidden = true; }
 viewerUI.review?.addEventListener('click', (event) => {
   const rect = event.currentTarget.getBoundingClientRect();
+  // One run of lines picked in a file of the project: the same card the editor opens, with its
+  // verbs. Several runs, or a file from elsewhere, keep the list of agents.
+  const runs = pickedRuns();
+  if (runs.length === 1 && viewerUI.path && viewerMode.editable) {
+    const [from, to] = runs[0];
+    askAboutCode({ from, to, text: String(viewerMode.text).split('\n').slice(from - 1, to).join('\n'), anchor: rect, dirty: false });
+    return;
+  }
   if (viewerUI.menu.hidden) showViewerMenu(rect.left, rect.bottom + 6); else hideViewerMenu();
 });
 document.addEventListener('click', (event) => { if (viewerUI.menu && !viewerUI.menu.hidden && !viewerUI.menu.contains(event.target) && !viewerUI.review?.contains(event.target)) hideViewerMenu(); });
@@ -1024,7 +1171,7 @@ function closeAskCard() {
   done?.();
 }
 const ASK_OWN_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M12.7 4.5a1.95 1.95 0 0 1 2.8 2.8l-8.3 8.3-3.6.9.9-3.6z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.5 5.7l2.8 2.8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-function openAskCard({ anchor, head, suggestions, about = '', onAsk, onClose = null }) {
+function openAskCard({ anchor, head, suggestions, about = '', onAsk, onClose = null, actions = [] }) {
   closeAskCard();
   askCardClose = onClose;
   const ready = [...state.agents.values()].filter((agent) => agent.ready);
@@ -1048,6 +1195,18 @@ function openAskCard({ anchor, head, suggestions, about = '', onAsk, onClose = n
     crew.append(pick);
   }
   askCard.append(crew);
+  // What is done most with code, one press each: the verb on the chip, the whole request behind it.
+  if (actions.length) {
+    const row = el('div', 'ask-actions');
+    for (const [label, prompt] of actions) {
+      const chip = el('button', 'ask-action', t(label));
+      chip.type = 'button';
+      chip.title = t(prompt);
+      chip.addEventListener('click', () => ask(t(prompt)));
+      row.append(chip);
+    }
+    askCard.append(row);
+  }
   const group = (title, items) => {
     const box = el('div', 'ask-group');
     box.append(el('div', 'ask-group-title', title));
@@ -1059,7 +1218,9 @@ function openAskCard({ anchor, head, suggestions, about = '', onAsk, onClose = n
     }
     return box;
   };
-  askCard.append(group(t('SUGGESTED FOR THIS'), suggestions));
+  const taken = new Set(actions.map(([, prompt]) => t(prompt)));
+  const rest = suggestions.filter((words) => !taken.has(words));
+  if (rest.length) askCard.append(group(t('SUGGESTED FOR THIS'), rest));
   // What the archive holds about it, when the archive is open: asked once, added when it answers.
   const remembered = el('div', 'ask-remembered');
   askCard.append(remembered);
@@ -1158,9 +1319,13 @@ const askLeaveEdits = () => roomAsk({
   body: t('There are unsaved changes in this file. Discard them?'),
   choices: [{ value: 'stay', label: t('KEEP EDITING'), focus: true }, { value: 'leave', label: t('DISCARD THEM'), tone: 'danger' }],
 });
-async function leaveEditor({ ask = true } = {}) {
+// `stash`: in the code workspace a file left with unsaved changes keeps them in its tab, the way
+// every editor's tabs do, instead of asking; its tab wears the dot until it is saved or discarded.
+async function leaveEditor({ ask = true, stash = false } = {}) {
   if (!editing.editor) return true;
-  if (ask && editorDirty() && await askLeaveEdits() !== 'leave') return false;
+  const tab = stash && viewerUI.path ? codeTab(viewerUI.path) : null;
+  if (tab) { tab.draft = editorDirty() ? editing.editor.value() : null; tab.mtime = viewerMode.mtime; }
+  else if (ask && editorDirty() && await askLeaveEdits() !== 'leave') return false;
   editing.editor.destroy();
   editing.editor = null;
   viewer.dialog.classList.remove('editing');
@@ -1196,11 +1361,11 @@ function syncEditButton() {
   if (!viewer.dialog || !viewer.body) return;
   const bar = el('div', 'viewer-status');
   const mod = /Mac|iPhone|iPad/.test(navigator.platform ?? '') ? '⌘' : 'Ctrl';
-  if (viewerUI.hintSelect) viewerUI.hintSelect.textContent = t('Click a number to pick a line · drag to pick several · Shift for a range · {mod} to add one more', { mod });
+  if (viewerUI.hintSelect) viewerUI.hintSelect.textContent = viewerUI.hintSelect.title = t('Click a number to pick a line · drag to pick several · Shift for a range · {mod} to add one more', { mod });
   for (const part of [viewerUI.selection, viewerUI.review, viewerUI.hintSelect]) if (part) bar.append(part);
   viewer.body.after?.(bar);
 })();
-async function saveEdited(content) {
+async function saveEdited(content, { said = null } = {}) {
   const send = (extra = {}) => fetch('/api/files', {
     method: 'PUT',
     headers: { 'content-type': 'application/json' },
@@ -1238,7 +1403,13 @@ async function saveEdited(content) {
   if (!response.ok) { toast(`${t('Diagnostics › ')}${result.error ?? t('That could not be saved.')}`); return false; }
   viewerMode.mtime = String(result.mtimeMs ?? '');
   viewerMode.text = content;
-  toast(t('Saved · {path}', { path: viewerUI.path }), { tone: 'note' });
+  toast(said ?? t('Saved · {path}', { path: viewerUI.path }), { tone: 'note' });
+  // What is beside the text shows the saved file, and the agent's marks are placed again on it.
+  code.preview?.reload?.();
+  code.preview?.render?.();
+  const tab = codeTab(viewerUI.path);
+  if (tab) tab.draft = null;
+  if (viewerUI.path) void loadCodeChanges(viewerUI.path);
   return true;
 }
 function askAboutLines({ from, to, prompt, dirty, agentId = null }) {
@@ -1267,21 +1438,31 @@ function askAboutCode({ from, to, text, anchor, dirty }) {
     head: from === to ? t('Line {n}', { n: from }) : t('Lines {from}–{to}', { from, to }),
     suggestions: codeSuggestions(text, familyOf(viewerUI.path ?? '')?.id ?? null, viewerUI.path ?? ''),
     about: `${viewerUI.path ?? ''} ${text}`,
+    actions: CODE_ACTIONS,
     onAsk: (agentId, prompt) => askAboutLines({ from, to, prompt, dirty, agentId }),
   });
 }
 function openEditor(line = null) {
   if (editing.editor || !viewerMode.editable) return;
   const name = viewerUI.path ?? '';
+  const tab = codeTab(name);
   editing.editor = createEditor({
-    text: viewerMode.text, name, family: familyOf(name), tokenize, t, fill,
+    text: viewerMode.text, draft: tab?.draft ?? null, name, family: familyOf(name), tokenize, t, fill,
     onSave: saveEdited, onAsk: askAboutCode,
+    onDirty: () => drawCodeTabs(),
+    onCaret: (at) => paintCodeCrumbs(at),
   });
+  if (tab) tab.draft = null;
   viewer.body.replaceChildren(editing.editor.node);
   viewer.dialog.classList.add('editing');
   setSelection(null, null);
   if (viewerUI.hintSelect) viewerUI.hintSelect.hidden = true;
   syncEditButton();
+  decorateCode();
+  attachBeside();
+  // A document beside its text follows the typing; a page waits for the save.
+  let typing = 0;
+  editing.editor.node.addEventListener('input', () => { clearTimeout(typing); typing = setTimeout(() => code.preview?.render?.(), 220); });
   requestAnimationFrame(() => editing.editor?.focus(line ?? viewerUI.from ?? null));
 }
 editing.button?.addEventListener('click', async () => {
@@ -1291,11 +1472,15 @@ editing.button?.addEventListener('click', async () => {
 // Closing the viewer, or opening another file in it, never drops unsaved work without asking.
 viewer.dialog?.addEventListener('cancel', (event) => {
   if (!editorDirty()) return;
+  // Docked, the unsaved changes stay in their tab and the viewer closes as asked.
+  let docked = false;
+  try { docked = codeOn(); } catch { /* not yet */ }
+  if (docked && viewerUI.path && codeTab(viewerUI.path)) { void leaveEditor({ stash: true }); return; }
   event.preventDefault();
   void askLeaveEdits().then((answer) => { if (answer === 'leave') { void leaveEditor({ ask: false }); viewer.dialog.close(); } });
 });
 viewer.dialog?.addEventListener('close', () => leaveEditor({ ask: false }));
-window.addEventListener?.('beforeunload', (event) => { if (editorDirty()) { event.preventDefault(); event.returnValue = ''; } });
+window.addEventListener?.('beforeunload', (event) => { if (editorDirty() || code.tabs.some((tab) => tab.draft !== null)) { event.preventDefault(); event.returnValue = ''; } });
 
 function showViewerSource() {
   if (ripley.nav) ripley.nav.hidden = true;
@@ -1310,8 +1495,619 @@ function showViewerSource() {
   }
   if (viewerMode.lines) setSelection(viewerMode.lines.from, viewerMode.lines.to);
   else if (viewerMode.line) setSelection(viewerMode.line, viewerMode.line);
+  decorateCode();
+  attachBeside();
+  paintCodeCrumbs();
   pre.querySelector('.hl')?.scrollIntoView?.({ block: 'center' });
 }
+/* ---------- the code workspace (1.0.3) ---------- */
+//
+// The viewer docked beside the conversation is a place to work on code, not a sheet over it: the
+// project's files at its side, the files open as tabs, the path down to the function the caret is
+// in, what an agent changed marked in the agent's colour — with a way to keep it, take it back or
+// ask why — and, for a page or a document, the result beside the text. CODE in the bar opens it
+// docked; the viewer's own split and window buttons lead to the same place. Over the room (its base)
+// the viewer stays what it always was: one file, read or edited.
+const CODE_KEY = 'pulse.code';
+const CODE_TABS = 12;
+const code = (() => {
+  let saved = {};
+  try { saved = JSON.parse(localStorage.getItem(CODE_KEY) ?? '{}') ?? {}; } catch { /* no storage */ }
+  const tabs = (Array.isArray(saved.tabs) ? saved.tabs : []).filter((path) => typeof path === 'string' && path).slice(-CODE_TABS).map((path) => ({ path, draft: null, mtime: null }));
+  return {
+    tabs,
+    active: tabs.some((tab) => tab.path === saved.active) ? saved.active : tabs.at(-1)?.path ?? null,
+    files: saved.files !== false,
+    beside: saved.beside !== false,
+    changes: new Map(),   // path → { agent, checkpointId, at, messageId, hunks } — what an agent left here
+    button: document.querySelector('#code-button'),
+    besideButton: null,
+    bar: null, crumbs: null, shell: null, explorer: null, list: null, search: null,
+    dirs: new Set(),
+    preview: null,
+    line: null,
+  };
+})();
+function rememberCode() {
+  try { localStorage.setItem(CODE_KEY, JSON.stringify({ tabs: code.tabs.map((tab) => tab.path), active: code.active, files: code.files, beside: code.beside })); } catch { /* this page only */ }
+}
+const viewerSurface = () => surfaces.find((one) => one.key === 'viewer');
+const codeOn = () => Boolean(viewer.dialog?.open) && modeOf(viewerSurface()) !== 'base';
+const codeTab = (path) => code.tabs.find((tab) => tab.path === path) ?? null;
+const codeDrafts = () => code.tabs.filter((tab) => tab.draft !== null);
+const CODE_ACTIONS = [
+  ['Explain', 'Explain what this does'],
+  ['Improve', 'Improve this without changing what it does'],
+  ['Write tests', 'Write tests for this'],
+  ['Fix', 'Find and fix the bugs here'],
+];
+
+// Where it lives in the viewer: the tabs and the path under its header, the files beside its body.
+(() => {
+  if (!viewer.dialog || !viewer.body || typeof viewer.body.before !== 'function') return;
+  const head = viewer.dialog.querySelector('.viewer-head');
+  code.bar = el('div', 'code-tabs');
+  code.bar.setAttribute('role', 'tablist');
+  code.bar.setAttribute('aria-label', t('Open files'));
+  code.bar.hidden = true;
+  code.crumbs = el('div', 'code-crumbs');
+  code.crumbs.hidden = true;
+  head?.after?.(code.bar, code.crumbs);
+  code.shell = el('div', 'code-shell');
+  code.explorer = el('aside', 'code-files');
+  code.explorer.hidden = true;
+  const top = el('div', 'code-files-head');
+  top.append(el('span', null, t('Files')));
+  const fold = el('button', 'code-files-fold');
+  fold.type = 'button';
+  fold.setAttribute('aria-label', t('Hide the files'));
+  fold.title = t('Hide the files');
+  fold.innerHTML = SPLIT_LEFT_ICON; // trusted: our own SVG string
+  fold.addEventListener('click', () => { code.files = false; rememberCode(); syncCode(); });
+  top.append(fold);
+  code.search = el('input', 'code-files-search');
+  code.search.type = 'search';
+  code.search.placeholder = t('Find a file…');
+  code.search.setAttribute('aria-label', t('Find a file…'));
+  code.search.autocomplete = 'off';
+  code.search.spellcheck = false;
+  code.list = el('ul', 'code-files-list');
+  code.explorer.append(top, code.search, code.list);
+  let typing = 0;
+  code.search.addEventListener('input', () => { clearTimeout(typing); typing = setTimeout(() => void drawCodeFiles(), 140); });
+  code.search.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && code.search.value) { event.preventDefault(); event.stopPropagation(); code.search.value = ''; void drawCodeFiles(); }
+    if (event.key === 'Enter') { const first = code.list.querySelector('.code-file'); if (first) { event.preventDefault(); first.click(); } }
+  });
+  viewer.body.before(code.shell);
+  code.shell.append(code.explorer, viewer.body);
+  // Side by side: the text and what it makes, for a page or a document.
+  const modeButton = document.querySelector('#viewer-mode');
+  code.besideButton = el('button', 'viewer-review viewer-beside');
+  code.besideButton.type = 'button';
+  code.besideButton.hidden = true;
+  // Its words, and its drawing for when the header is too narrow for them.
+  code.besideButton.innerHTML = `${BESIDE_ICON}<span></span>`; // trusted: our own SVG string
+  code.besideButton.addEventListener('click', () => { code.beside = !code.beside; rememberCode(); attachBeside(); });
+  modeButton?.before?.(code.besideButton);
+  if (typeof MutationObserver === 'function') new MutationObserver(() => syncCode()).observe(viewer.dialog, { attributes: true, attributeFilter: ['class', 'open'] });
+  if (typeof ResizeObserver === 'function') new ResizeObserver(() => syncCode()).observe(viewer.dialog);
+  code.button?.addEventListener('click', () => void toggleCode());
+})();
+
+function syncCode() {
+  if (!code.bar) return;
+  let on = false;
+  try { on = codeOn(); } catch { return; }
+  viewer.dialog.classList.toggle('code', on);
+  code.bar.hidden = !on || !code.tabs.length;
+  code.crumbs.hidden = !on || !viewerUI.path;
+  // The code comes first: the files beside it only when there is room for them and for the code,
+  // and less room is left when what the code makes is beside it too.
+  const width = viewer.dialog.getBoundingClientRect?.().width ?? 0;
+  const wide = width >= (code.preview ? 1040 : 600);
+  // Too narrow for two columns, what the code makes goes under it instead of squeezing it.
+  viewer.body.classList.toggle('stacked', Boolean(code.preview) && width < 720);
+  const showFiles = on && code.files && wide;
+  if (code.explorer.hidden === showFiles) {
+    code.explorer.hidden = !showFiles;
+    if (showFiles) void drawCodeFiles();
+  }
+  code.button?.setAttribute('aria-pressed', String(on));
+  const kind = viewerMode.kind;
+  code.besideButton.hidden = !on || !kind || viewerMode.preview;
+  const besideWords = code.besideButton.querySelector?.('span');
+  if (besideWords) besideWords.textContent = t('Side by side');
+  else code.besideButton.textContent = t('Side by side');
+  code.besideButton.setAttribute('aria-label', t('Side by side'));
+  code.besideButton.setAttribute('aria-pressed', String(Boolean(code.preview)));
+  code.besideButton.title = kind === 'markdown' ? t('The document beside its text, as you write') : t('The page beside its code, reloaded when you save');
+  drawCodeTabs();
+  paintCodeCrumbs();
+}
+
+// CODE in the bar: the viewer docked, on the file last worked on, or on where to start.
+async function toggleCode() {
+  if (codeOn()) {
+    if (await leaveEditor({ stash: true })) viewer.dialog.close();
+    return;
+  }
+  const surface = viewerSurface();
+  if (surface && modeOf(surface) === 'base') setSurfaceMode(surface, 'split', { animate: false });
+  if (viewer.dialog.open && viewerUI.path) { syncCode(); return; }
+  if (code.active) await openViewer({ root: 'project', path: code.active });
+  else showCodeHome();
+}
+async function openCodeFile(path, { line = null } = {}) {
+  const surface = viewerSurface();
+  if (surface && modeOf(surface) === 'base') setSurfaceMode(surface, 'split', { animate: false });
+  await openViewer({ root: 'project', path, line });
+}
+// Nothing open yet: where to start, in a sentence and two ways.
+function showCodeHome() {
+  void leaveEditor({ stash: true });
+  paintViewerPath(t('Code'));
+  viewerUI.path = null;
+  Object.assign(viewerMode, { kind: null, text: '', src: '', preview: false, editable: false });
+  viewer.open.removeAttribute('href');
+  syncViewerMode();
+  syncEditButton();
+  // No file, nothing to open raw: the chip that holds OPEN RAW goes with READ and EDIT.
+  if (editingSeg) editingSeg.seg.hidden = true;
+  const home = el('div', 'code-home');
+  home.append(el('h3', null, t('Open a file')));
+  const mod = /Mac|iPhone|iPad/.test(navigator.platform ?? '') ? '⌘P' : 'Ctrl+P';
+  home.append(el('p', null, t('Choose one in the files, or press {keys} to find it by its name. What an agent changes is marked in its colour.', { keys: mod })));
+  const find = sxButton(t('Find a file'), () => openQuickOpen(), { tone: 'primary' });
+  home.append(find);
+  const recent = [...touched.entries()].sort((a, b) => b[1].at - a[1].at).slice(0, 6);
+  if (recent.length) {
+    home.append(el('h4', null, t('Changed by the agents')));
+    const list = el('ul', 'code-home-list');
+    for (const [path, touch] of recent) {
+      const item = el('li');
+      const go = el('button', 'code-file');
+      go.type = 'button';
+      tint(go, touch.agent);
+      go.append(el('i', 'code-file-agent'), el('span', 'code-file-name', path.split('/').pop()), el('span', 'code-file-dir', path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : ''), el('small', null, `@${touch.agent} · ${agoWords(new Date(touch.at).toISOString())}`));
+      go.addEventListener('click', () => void openCodeFile(path));
+      item.append(go);
+      list.append(item);
+    }
+    home.append(list);
+  }
+  viewer.body.replaceChildren(home);
+  if (!viewer.dialog.open) viewer.dialog.showModal();
+  syncCode();
+}
+
+/* the tabs */
+function noteCodeTab(path) {
+  let tab = codeTab(path);
+  if (!tab) {
+    tab = { path, draft: null, mtime: null };
+    code.tabs.push(tab);
+    // Past the limit the oldest tab that holds nothing unsaved gives way.
+    while (code.tabs.length > CODE_TABS) {
+      const old = code.tabs.findIndex((one) => one.draft === null && one.path !== path);
+      if (old < 0) break;
+      code.tabs.splice(old, 1);
+    }
+  }
+  code.active = path;
+  rememberCode();
+  return tab;
+}
+async function closeCodeTab(path) {
+  const tab = codeTab(path);
+  if (!tab) return;
+  const showing = viewerUI.path === path;
+  const dirty = tab.draft !== null || (showing && editorDirty());
+  if (dirty && await askLeaveEdits() !== 'leave') return;
+  if (showing) await leaveEditor({ ask: false });
+  tab.draft = null;
+  code.tabs = code.tabs.filter((one) => one !== tab);
+  code.changes.delete(path);
+  if (code.active === path) code.active = code.tabs.at(-1)?.path ?? null;
+  rememberCode();
+  if (!showing) { drawCodeTabs(); return; }
+  if (code.active) await openViewer({ root: 'project', path: code.active }); else showCodeHome();
+}
+function drawCodeTabs() {
+  if (!code.bar || code.bar.hidden) return;
+  code.bar.replaceChildren();
+  for (const tab of code.tabs) {
+    const on = tab.path === viewerUI.path;
+    const node = el('div', `code-tab${on ? ' on' : ''}`);
+    node.setAttribute('role', 'tab');
+    node.setAttribute('aria-selected', String(on));
+    node.title = tab.path;
+    const name = el('button', 'code-tab-name', tab.path.split('/').pop());
+    name.type = 'button';
+    name.addEventListener('click', () => { if (!on) void openViewer({ root: 'project', path: tab.path }); });
+    node.addEventListener('auxclick', (event) => { if (event.button === 1) { event.preventDefault(); void closeCodeTab(tab.path); } });
+    node.append(name);
+    const change = code.changes.get(tab.path);
+    if (change?.hunks?.length) {
+      const dot = el('i', 'code-tab-agent');
+      tint(dot, change.agent);
+      dot.title = t('@{agent} changed it: {n} to review', { agent: change.agent, n: change.hunks.length });
+      node.append(dot);
+    }
+    if (tab.draft !== null || (on && editorDirty())) {
+      const dot = el('i', 'code-tab-dirty');
+      dot.title = t('Unsaved');
+      node.append(dot);
+    }
+    const shut = closeMark('button', 'code-tab-close', t('Close {file}', { file: tab.path.split('/').pop() }));
+    shut.addEventListener('click', (event) => { event.stopPropagation(); void closeCodeTab(tab.path); });
+    node.append(shut);
+    code.bar.append(node);
+  }
+  code.bar.querySelector('.code-tab.on')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+}
+
+/* the path above the code: folders quiet, the file, and the function the line is in */
+function paintCodeCrumbs(line = code.line) {
+  if (!code.crumbs || code.crumbs.hidden || !viewerUI.path) return;
+  code.line = line;
+  code.crumbs.replaceChildren();
+  // The files, put away by hand, come back from here.
+  if (!code.files) {
+    const show = el('button', 'code-files-fold code-files-show');
+    show.type = 'button';
+    show.setAttribute('aria-label', t('Show the files'));
+    show.title = t('Show the files');
+    show.innerHTML = SPLIT_LEFT_ICON; // trusted: our own SVG string
+    show.addEventListener('click', () => { code.files = true; rememberCode(); syncCode(); });
+    code.crumbs.append(show);
+  }
+  const where = el('span', 'code-crumbs-path');
+  const parts = viewerUI.path.split('/');
+  parts.forEach((part, index) => {
+    if (index) where.append(el('i', null, '›'));
+    where.append(el(index === parts.length - 1 ? 'b' : 'span', null, part));
+  });
+  const text = editing.editor ? editing.editor.value() : viewerMode.text;
+  const symbol = line ? symbolAt(String(text ?? '').split('\n'), line - 1, familyOf(viewerUI.path)?.id ?? null) : null;
+  if (symbol) where.append(el('i', null, '›'), el('b', 'code-crumbs-symbol', symbol));
+  code.crumbs.append(where);
+  const change = code.changes.get(viewerUI.path);
+  if (change?.hunks?.length) {
+    const nav = el('span', 'code-crumbs-changes');
+    tint(nav, change.agent);
+    nav.append(el('i', 'code-file-agent'), el('span', null, change.hunks.length === 1 ? t('@{agent} · 1 change to review', { agent: change.agent }) : t('@{agent} · {n} changes to review', { agent: change.agent, n: change.hunks.length })));
+    const step = (direction) => {
+      const marks = change.hunks.map((hunk) => hunk.at + 1);
+      const here = code.line ?? 0;
+      const next = direction > 0 ? marks.find((n) => n > here) ?? marks[0] : [...marks].reverse().find((n) => n < here) ?? marks.at(-1);
+      goToCodeLine(next);
+    };
+    // The chooser's chevron, turned to point the way it goes.
+    const stepKey = (label, direction) => {
+      const key = el('button', `code-crumbs-step ${direction < 0 ? 'back' : 'on'}`);
+      key.type = 'button';
+      key.title = label;
+      key.setAttribute('aria-label', label);
+      key.innerHTML = ICON_CHEVRON; // trusted: our own SVG string
+      key.addEventListener('click', () => step(direction));
+      return key;
+    };
+    nav.append(stepKey(t('Previous change'), -1), stepKey(t('Next change'), 1));
+    code.crumbs.append(nav);
+  }
+}
+function goToCodeLine(n) {
+  if (!n) return;
+  code.line = n;
+  if (editing.editor) { editing.editor.focus(n); return; }
+  const card = viewer.body.querySelector(`.code-change[data-at="${n}"]`);
+  const row = viewerUI.lineNodes[n - 1]?.tx;
+  (card ?? row)?.scrollIntoView?.({ block: 'center', behavior: 'smooth' });
+  paintCodeCrumbs(n);
+}
+
+/* the files beside: the project's folders, or what matches what is typed */
+async function drawCodeFiles() {
+  if (!code.list || code.explorer.hidden) return;
+  const query = code.search.value.trim();
+  if (query) {
+    let matches = [];
+    try { matches = (await fetch(`/api/tree/search?q=${encodeURIComponent(query)}&limit=40`).then((response) => response.json()))?.matches ?? []; } catch { /* said below */ }
+    if (code.search.value.trim() !== query) return;
+    code.list.replaceChildren();
+    if (!matches.length) { code.list.append(el('li', 'code-files-empty', t('No file by that name.'))); return; }
+    for (const match of matches) code.list.append(codeFileRow(match.path, 0, true));
+    return;
+  }
+  code.list.replaceChildren();
+  await drawCodeLevel('.', code.list, 0);
+}
+async function drawCodeLevel(path, list, depth) {
+  let entries = [];
+  try {
+    const response = await fetch(`/api/tree?path=${encodeURIComponent(path)}`);
+    if (response.ok) entries = (await response.json()).entries ?? [];
+  } catch { /* an empty folder is said below */ }
+  if (!entries.length && depth === 0) { list.append(el('li', 'code-files-empty', t('This project has no files yet.'))); return; }
+  for (const entry of entries) {
+    const full = path === '.' ? entry.name : `${path}/${entry.name}`;
+    if (entry.type === 'dir' || entry.dir || entry.kind === 'dir') {
+      const item = el('li', 'code-dir');
+      const open = code.dirs.has(full);
+      const row = el('button', 'code-file code-folder');
+      row.type = 'button';
+      row.style.setProperty('--depth', String(depth));
+      row.setAttribute('aria-expanded', String(open));
+      // The chooser's chevron: pointing right while closed, down when open (styles.css turns it).
+      const caret = el('i', 'code-folder-caret');
+      caret.innerHTML = ICON_CHEVRON; // trusted: our own SVG string
+      row.append(caret, el('span', 'code-file-name', entry.name));
+      const touch = touchedUnder(full);
+      if (touch) { const dot = el('i', 'code-file-agent'); tint(dot, touch.agent); row.append(dot); }
+      const inner = el('ul', 'code-files-list');
+      row.addEventListener('click', async () => {
+        if (code.dirs.has(full)) { code.dirs.delete(full); inner.replaceChildren(); row.setAttribute('aria-expanded', 'false'); return; }
+        code.dirs.add(full);
+        row.setAttribute('aria-expanded', 'true');
+        await drawCodeLevel(full, inner, depth + 1);
+      });
+      item.append(row, inner);
+      list.append(item);
+      if (open) void drawCodeLevel(full, inner, depth + 1);
+    } else list.append(codeFileRow(full, depth, false));
+  }
+}
+function codeFileRow(path, depth, withDir) {
+  const item = el('li');
+  const row = el('button', `code-file${path === viewerUI.path ? ' on' : ''}`);
+  row.type = 'button';
+  row.style.setProperty('--depth', String(depth));
+  row.title = path;
+  row.append(el('span', 'code-file-name', path.split('/').pop()));
+  if (withDir && path.includes('/')) row.append(el('span', 'code-file-dir', path.slice(0, path.lastIndexOf('/'))));
+  const touch = touched.get(path);
+  if (touch) { const dot = el('i', 'code-file-agent'); tint(dot, touch.agent); dot.title = t('Changed by @{agent} {when}', { agent: touch.agent, when: agoWords(new Date(touch.at).toISOString()) }); row.append(dot); }
+  row.addEventListener('click', () => void openCodeFile(path));
+  item.append(row);
+  return item;
+}
+
+/* what an agent changed, marked in the code */
+async function loadCodeChanges(path) {
+  let answer = null;
+  try { answer = await fetch(`/api/files/changes?path=${encodeURIComponent(path)}`).then((response) => (response.ok ? response.json() : null)); } catch { return; }
+  if (viewerUI.path !== path) return;
+  const change = answer?.change;
+  if (!change) { if (code.changes.delete(path)) { decorateCode(); syncCode(); } return; }
+  const current = viewerMode.text;
+  const after = change.after ?? current;
+  const reviewed = new Set(answer.reviewed ?? []);
+  const hunks = placeHunks(current, change.after, lineDiff(change.before, after)).filter((hunk) => !reviewed.has(hunkKey(hunk)));
+  if (hunks.length) code.changes.set(path, { agent: change.agent, checkpointId: change.checkpointId, at: change.at, messageId: change.messageId, hunks });
+  else code.changes.delete(path);
+  decorateCode();
+  syncCode();
+}
+// Into what is on screen: the read view gets the marks and a card under each change; the editor
+// gets the marks in its margin, and the cards wait in the read view.
+function decorateCode() {
+  const found = code.changes.get(viewerUI.path);
+  if (editing.editor) {
+    editing.editor.setMarks?.((found?.hunks ?? []).filter((hunk) => hunk.after.length).map((hunk) => ({ from: hunk.at + 1, to: hunk.at + hunk.after.length, color: agentColor(found.agent), title: t('Changed by @{agent}', { agent: found.agent }) })));
+    return;
+  }
+  const pre = viewer.body.querySelector('pre.code');
+  if (!pre) return;
+  for (const node of pre.querySelectorAll('.code-change')) node.remove();
+  for (const row of viewerUI.lineNodes) { row.ln.classList.remove('ag'); row.tx.classList.remove('ag'); }
+  if (!found?.hunks?.length) return;
+  const color = agentColor(found.agent);
+  for (const hunk of found.hunks) {
+    const last = hunk.at + hunk.after.length;
+    for (let n = hunk.at + 1; n <= last; n += 1) {
+      const row = viewerUI.lineNodes[n - 1];
+      if (!row) continue;
+      row.ln.classList.add('ag');
+      row.tx.classList.add('ag');
+      row.ln.style.setProperty('--ag', color);
+      row.tx.style.setProperty('--ag', color);
+    }
+    const card = codeChangeCard(found, hunk);
+    const anchor = viewerUI.lineNodes[Math.max(hunk.at, last) - 1]?.tx;
+    if (anchor && hunk.after.length) anchor.after(card);
+    else if (viewerUI.lineNodes[hunk.at - 1]) viewerUI.lineNodes[hunk.at - 1].tx.after(card);
+    else pre.prepend(card);
+  }
+}
+function codeChangeCard(found, hunk) {
+  const card = el('div', 'code-change');
+  card.dataset.at = String(hunk.at + 1);
+  tint(card, found.agent);
+  const head = el('div', 'code-change-head');
+  const what = hunk.before.length && hunk.after.length ? t('changed these lines') : hunk.after.length ? t('added these lines') : hunk.before.length === 1 ? t('removed 1 line') : t('removed {n} lines', { n: hunk.before.length });
+  head.append(el('b', 'code-change-who', `@${found.agent}`), el('span', null, `${what} · ${agoWords(found.at)}`));
+  card.append(head);
+  // What was there before, line by line, each with its «−»: read, not crossed out.
+  if (hunk.before.length) {
+    const was = el('pre', 'code-change-was');
+    was.setAttribute('aria-label', t('What was there before'));
+    for (const line of hunk.before) was.append(el('span', null, line || ' '));
+    card.append(was);
+  }
+  const acts = el('div', 'code-change-acts');
+  // Tags of a flat tone, each with its drawing: the accent keeps, the ground undoes, the agent answers.
+  const act = (words, icon, tone, title, click) => {
+    const key = el('button', `code-change-act ${tone}`);
+    key.type = 'button';
+    key.title = title;
+    const mark = el('i', 'code-change-ico');
+    mark.innerHTML = icon; // trusted: our own SVG strings
+    key.append(mark, el('span', null, words));
+    key.addEventListener('click', click);
+    return key;
+  };
+  const keep = act(t('Keep'), ICON_DONE, 'keep', t('It stays as the agent left it, and stops being marked'), () => void keepCodeChange(found, hunk, card));
+  const undo = act(t('Undo'), ICON_REPLY, 'undo', t('Puts back what was there before, in these lines only'), () => void undoCodeChange(found, hunk, undo));
+  const why = act(t('Ask why'), ICON_ASK, 'why', t('Asks @{agent} in the conversation', { agent: found.agent }), () => askAboutLines({ from: hunk.at + 1, to: Math.max(hunk.at + 1, hunk.at + hunk.after.length), prompt: t('Why did you change these lines?'), dirty: false, agentId: found.agent }));
+  acts.append(keep, undo, why);
+  card.append(acts);
+  return card;
+}
+async function keepCodeChange(found, hunk, card) {
+  const path = viewerUI.path;
+  try {
+    await fetch('/api/files/changes/review', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ path, checkpointId: found.checkpointId, hunk: hunkKey(hunk) }) });
+  } catch { /* kept on this page at least */ }
+  found.hunks = found.hunks.filter((one) => one !== hunk);
+  if (!found.hunks.length) code.changes.delete(path);
+  card.remove();
+  decorateCode();
+  syncCode();
+}
+async function undoCodeChange(found, hunk, button) {
+  const path = viewerUI.path;
+  if (editing.editor || codeTab(path)?.draft !== null && codeTab(path)?.draft !== undefined) { toast(t('Save or discard your own changes in this file first.'), { tone: 'note' }); return; }
+  button.disabled = true;
+  const next = revertHunk(viewerMode.text, hunk);
+  const ok = await saveEdited(next, { said: t('Taken back · {path}', { path }) });
+  if (!ok) { button.disabled = false; return; }
+  try { await fetch('/api/files/changes/review', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ path, checkpointId: found.checkpointId, hunk: hunkKey(hunk) }) }); } catch { /* the change is gone from the file anyway */ }
+  showViewerSource();
+  void loadCodeChanges(path);
+}
+
+/* side by side: the text and what it makes */
+function attachBeside() {
+  code.preview?.remove();
+  code.preview = null;
+  viewer.body.classList.remove('with-beside');
+  let on = false;
+  try { on = codeOn(); } catch { /* not yet */ }
+  if (on && code.beside && viewerMode.kind && !viewerMode.preview && viewerUI.path) {
+    const pane = el('div', 'code-beside');
+    const head = el('div', 'code-beside-head');
+    head.append(el('b', null, t('Preview')));
+    const text = () => (editing.editor ? editing.editor.value() : viewerMode.text);
+    if (viewerMode.kind === 'markdown') {
+      head.append(el('span', 'code-beside-live', t('as you write')));
+      const doc = el('article', 'viewer-markdown');
+      doc.append(renderMarkdown(text()));
+      pane.append(head, doc);
+      pane.render = () => doc.replaceChildren(renderMarkdown(text()));
+    } else if (!state.ripley) {
+      const off = el('div', 'code-beside-off');
+      off.append(el('p', null, t('Preview shows the page your code makes, in a sealed frame. It is off in this project.')));
+      off.append(sxButton(t('Turn on Preview'), async (event) => {
+        event.currentTarget.disabled = true;
+        try { await switchModule(modules.items.find((one) => one.id === 'ripley') ?? { id: 'ripley', name: 'Preview' }); } catch (error) { toast(`${t('Diagnostics › ')}${error.message}`); }
+        attachBeside();
+      }, { tone: 'primary' }));
+      pane.append(head, off);
+    } else {
+      head.append(el('span', 'code-beside-live', t('reloads when you save')));
+      const frame = el('iframe', 'ripley');
+      frame.setAttribute('sandbox', 'allow-scripts');
+      frame.setAttribute('referrerpolicy', 'no-referrer');
+      frame.title = t('Preview of {path}', { path: viewerUI.path });
+      frame.src = previewUrl(viewerMode.src);
+      pane.append(head, frame);
+      pane.reload = () => { frame.src = `${previewUrl(viewerMode.src)}?v=${Date.now()}`; };
+    }
+    // The pane beside says what Preview is; the old line over the code would say it twice.
+    viewer.body.querySelector(':scope > .viewer-hint')?.remove();
+    viewer.body.append(pane);
+    viewer.body.classList.add('with-beside');
+    code.preview = pane;
+  }
+  code.besideButton?.setAttribute('aria-pressed', String(Boolean(code.preview)));
+  syncCode();
+}
+
+/* ⌘P: a file by its name, from anywhere in the room */
+const quickOpen = (() => {
+  const box = el('div', 'quick-open');
+  box.hidden = true;
+  box.setAttribute('role', 'dialog');
+  box.setAttribute('aria-label', t('Open a file'));
+  box.setAttribute('popover', 'manual');
+  const input = el('input', 'quick-open-input');
+  input.type = 'search';
+  input.autocomplete = 'off';
+  input.spellcheck = false;
+  const list = el('ul', 'quick-open-list');
+  list.setAttribute('role', 'listbox');
+  box.append(input, list);
+  document.body?.append(box);
+  return { box, input, list, at: 0, items: [], typing: 0 };
+})();
+function closeQuickOpen() {
+  if (quickOpen.box.hidden) return;
+  quickOpen.box.hidden = true;
+  try { quickOpen.box.hidePopover?.(); } catch { /* not shown */ }
+}
+async function fillQuickOpen() {
+  const query = quickOpen.input.value.trim();
+  let paths;
+  if (!query) {
+    const recent = [...code.tabs].reverse().map((tab) => tab.path);
+    const changed = [...touched.entries()].sort((a, b) => b[1].at - a[1].at).map(([path]) => path);
+    paths = [...new Set([...recent, ...changed])].slice(0, 12);
+  } else {
+    try { paths = ((await fetch(`/api/tree/search?q=${encodeURIComponent(query)}&limit=20`).then((response) => response.json()))?.matches ?? []).map((match) => match.path); } catch { paths = []; }
+    if (quickOpen.input.value.trim() !== query) return;
+  }
+  quickOpen.items = paths;
+  quickOpen.at = 0;
+  quickOpen.list.replaceChildren();
+  if (!paths.length) { quickOpen.list.append(el('li', 'quick-open-empty', query ? t('No file by that name.') : t('Type part of a file\'s name.'))); return; }
+  paths.forEach((path, index) => {
+    const item = el('li', `quick-open-item${index === 0 ? ' on' : ''}`);
+    item.setAttribute('role', 'option');
+    item.append(el('b', null, path.split('/').pop()), el('span', null, path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : ''));
+    const touch = touched.get(path);
+    if (touch) { const dot = el('i', 'code-file-agent'); tint(dot, touch.agent); item.append(dot); }
+    item.addEventListener('pointerdown', (event) => { event.preventDefault(); closeQuickOpen(); void openCodeFile(path); });
+    quickOpen.list.append(item);
+  });
+}
+function openQuickOpen() {
+  quickOpen.input.placeholder = t('Open a file by its name…');
+  quickOpen.input.value = '';
+  quickOpen.box.hidden = false;
+  try { quickOpen.box.showPopover?.(); } catch { /* fixed in the page */ }
+  quickOpen.input.focus();
+  void fillQuickOpen();
+}
+quickOpen.input.addEventListener('input', () => { clearTimeout(quickOpen.typing); quickOpen.typing = setTimeout(() => void fillQuickOpen(), 110); });
+quickOpen.input.addEventListener('keydown', (event) => {
+  const rows = [...quickOpen.list.querySelectorAll('.quick-open-item')];
+  if (event.key === 'Escape') { event.preventDefault(); closeQuickOpen(); return; }
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    event.preventDefault();
+    if (!rows.length) return;
+    rows[quickOpen.at]?.classList.remove('on');
+    quickOpen.at = (quickOpen.at + (event.key === 'ArrowDown' ? 1 : -1) + rows.length) % rows.length;
+    rows[quickOpen.at].classList.add('on');
+    rows[quickOpen.at].scrollIntoView?.({ block: 'nearest' });
+    return;
+  }
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    const path = quickOpen.items[quickOpen.at];
+    if (!path) return;
+    closeQuickOpen();
+    void openCodeFile(path);
+  }
+});
+document.addEventListener?.('pointerdown', (event) => { if (!quickOpen.box.hidden && !quickOpen.box.contains(event.target)) closeQuickOpen(); }, true);
+document.addEventListener?.('keydown', (event) => {
+  if ((event.metaKey || event.ctrlKey) && !event.shiftKey && !event.altKey && event.key?.toLowerCase() === 'p' && !state.device) {
+    event.preventDefault();
+    if (quickOpen.box.hidden) openQuickOpen(); else closeQuickOpen();
+  }
+});
+
 // RIPLEY's frame, its small bar (back, reload), its history inside the project,
 // what the page reports up (which page, which errors), and reloads when an
 // agent changes the file on screen.
@@ -1688,7 +2484,9 @@ function paintPorts(read) {
     menu.replaceChildren(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')));
+    const gear = el('b', 'ports-gear');
+    gear.innerHTML = GEAR_ICON; // trusted: our own SVG string
+    go.append(gear, el('span', null, t('OPEN MODULES')));
     go.addEventListener('click', () => { portsMenuShown(false); document.querySelector('#modules-button, [aria-controls="modules"]')?.click(); });
     menu.append(go);
     return;
@@ -2122,6 +2920,10 @@ function ripleyMaybeReload(paths) {
 }
 
 function showViewerPreview() {
+  // The whole frame for the result: nothing beside it.
+  code.preview = null;
+  viewer.body.classList.remove('with-beside');
+  code.besideButton?.setAttribute('aria-pressed', 'false');
   if (viewerMode.kind === 'markdown') {
     ripley.nav.hidden = true;
     const doc = el('article', 'viewer-markdown bubble');
@@ -2156,7 +2958,7 @@ function syncViewerMode() {
   if (!viewerMode.button) return;
   const can = Boolean(viewerMode.kind) && state.ripley;
   viewerMode.button.hidden = !can;
-  viewerMode.button.textContent = viewerMode.preview ? 'SOURCE' : 'PREVIEW';
+  viewerMode.button.textContent = viewerMode.preview ? t('SOURCE') : t('PREVIEW');
   viewerMode.button.title = viewerMode.preview ? t('Show the file as text') : t('Render with Preview in a sealed frame');
 }
 viewerMode.button?.addEventListener('click', async () => { if (!await leaveEditor()) return; viewerMode.preview = !viewerMode.preview; syncViewerMode(); syncEditButton(); if (viewerMode.preview) showViewerPreview(); else showViewerSource(); });
@@ -2173,7 +2975,13 @@ function paintViewerPath(text) {
   viewer.path.setAttribute?.('aria-label', said);
 }
 async function openViewer({ root = 'project', path = null, url = null, label = null, line = null, lines = null }) {
-  if (!await leaveEditor()) return;
+  let docked = false;
+  try { docked = codeOn(); } catch { /* the layout is not up yet */ }
+  if (!await leaveEditor({ stash: docked })) return;
+  code.preview?.remove();
+  code.preview = null;
+  viewer.body.classList.remove('with-beside');
+  code.line = line ?? lines?.from ?? null;
   const src = url ?? `/api/files?root=${root}&path=${encodeURIComponent(path)}`;
   paintViewerPath(label ?? path);
   viewer.open.href = src;
@@ -2201,15 +3009,27 @@ async function openViewer({ root = 'project', path = null, url = null, label = n
     // Text of this project, small enough to edit: the editor is offered. Attachments and frames
     // are read, never written.
     const editable = root === 'project' && Boolean(path) && !url && response.headers.has('x-mtime') && text.length < 2 * 1024 * 1024 && !text.includes('\u0000');
-    Object.assign(viewerMode, { kind, text, src, line, lines, preview: Boolean(kind) && state.ripley && !line && !lines, mtime: response.headers.get('x-mtime'), editable });
+    // In the code workspace a page or a document opens as its text, with what it makes beside it.
+    let docked = false;
+    try { docked = codeOn(); } catch { /* the layout is not up yet */ }
+    Object.assign(viewerMode, { kind, text, src, line, lines, preview: Boolean(kind) && state.ripley && !line && !lines && !(docked && code.beside), mtime: response.headers.get('x-mtime'), editable });
+    const tab = editable ? noteCodeTab(path) : null;
     syncViewerMode();
     syncEditButton();
     if (viewerMode.preview) showViewerPreview(); else showViewerSource();
+    // A tab left with unsaved changes opens where it was left: in the editor, with them.
+    if (tab && tab.draft !== null) { if (tab.mtime) viewerMode.mtime = tab.mtime; openEditor(line); }
+    if (editable) void loadCodeChanges(path);
+    syncCode();
   } catch (error) {
     viewer.body.replaceChildren(el('div', 'err', error.message));
   }
 }
-viewer.close.addEventListener('click', async () => { if (await leaveEditor()) viewer.dialog.close(); });
+viewer.close.addEventListener('click', async () => {
+  let docked = false;
+  try { docked = codeOn(); } catch { /* not yet */ }
+  if (await leaveEditor({ stash: docked })) viewer.dialog.close();
+});
 
 function codeBlock(lines, lang) {
   const wrapper = el('div', `codeblock${lang ? ' has-lang' : ''}`);
@@ -2392,6 +3212,11 @@ function ringPercent(agent) {
 // it, and a row is that agent's own card — the same one a sphere opens, with a way back.
 const agentsCompact = document.querySelector('#agents-compact');
 const agentsCount = document.querySelector('#agents-count');
+// Whether an agent can answer now: an adapter MADRE can use, and a session. One that cannot is
+// switched off everywhere: grey in the bar, out of the picker, and a message to it is not sent.
+function canAnswer(agent) {
+  return Boolean(agent?.ready) && state.sessions?.[agent.id]?.state !== 'signed-out';
+}
 function renderAgentsCompact() {
   if (!agentsCompact) return;
   const all = [...state.agents.values()];
@@ -2411,15 +3236,19 @@ function renderAgents() {
   for (const agent of state.agents.values()) {
     const percent = ringPercent(agent);
     const official = liveOfficial(agent);
+    // An agent that cannot answer looks switched off, whatever the reason: not installed, no adapter
+    // yet, or installed with no session (2026-10-17). Its colour comes back with its session.
+    const signedOut = agent.ready && !canAnswer(agent);
     const node = avatar(agent.id, {
       size: 26,
-      ring: agent.ready,
+      ring: agent.ready && !signedOut,
       pct: percent,
       status: agent.ready ? 'ready' : agent.detected ? 'detected' : 'offline',
     });
+    if (!agent.ready || signedOut) node.classList.add('off');
     node.title = [
       `${agent.label}${vendorWord(agent.id) ? ` · ${vendorWord(agent.id)}` : ''}`,
-      agent.ready ? t('Ready') : agent.detected ? t('Detected, but MADRE cannot use it yet') : t('Not installed'),
+      signedOut ? t('Not signed in') : agent.ready ? t('Ready') : agent.detected ? t('Detected, but MADRE cannot use it yet') : t('Not installed'),
       agent.version ? agent.version : null,
       official === null
         ? (agent.tokens ? t('Usage: local 5h window · {pct}% of {total} budget tokens', { pct: Math.round(percent), total: formatTokens(state.budget ?? 0) }) : t('Usage: local window · nothing used yet'))
@@ -2457,7 +3286,7 @@ if (safetyLine && !safetySeen) {
 function renderPicker() {
   els.picker.replaceChildren();
   els.pickOptions?.replaceChildren?.();
-  const ready = [...state.agents.values()].filter((agent) => agent.ready);
+  const ready = [...state.agents.values()].filter(canAnswer);
   if (!ready.length) { updateCrewLabel(); return; }
   if (!els.target.value || !ready.some((agent) => agent.id === els.target.value)) els.target.value = ready[0].id;
   const stack = el('div', 'crew-stack');
@@ -3513,7 +4342,7 @@ function bridgeCard(agent) {
   card.append(head);
   const detail = el('div', 'detail');
   if (agent.id === 'madre') detail.append(ollamaDetail(agent));
-  else if (stage === 'missing') detail.append(agent.install ? t('Not on this computer · {command}', { command: agent.install.display }) : t('Not on this computer.'));
+  else if (stage === 'missing') detail.append(t('Not on this computer.'));
   else detail.append(`${agent.version ?? t('version unknown')}${session?.detail ? ` · ${session.detail}` : ''}${agent.route?.destination ? ` · ${t('route: {destination}', { destination: agent.route.destination })}` : ''}`);
   card.append(detail);
   // What is behind this door: the account it needs, and whether there is a way in without paying.
@@ -3530,24 +4359,35 @@ function bridgeCard(agent) {
   if (stage === 'signed-out' || (stage === 'ready' && agent.login?.headless)) {
     // Every door the CLI has, not just the first one. Claude sells two accounts and MADRE used
     // to open only the subscription, which left whoever pays for the API with no way in.
-    if (agent.login?.headless) for (const door of loginDoors(agent, stage === 'ready')) actions.append(bridgeSignInButton(agent, door, stage === 'ready'));
-    else if (!agent.key && agent.login) actions.append(el('span', 'note', t('signs in from your terminal:')));
+    const keyFirst = Boolean(agent.key?.first);
     if (agent.key) {
-      reveal = el('button', agent.login?.headless ? null : 'primary', t('PASTE API KEY'));
+      reveal = el('button', agent.login?.headless && !keyFirst ? null : 'primary', t('PASTE API KEY'));
       reveal.type = 'button';
-      actions.append(reveal);
     }
+    if (keyFirst) actions.append(reveal);
+    if (agent.login?.headless) {
+      for (const door of loginDoors(agent, stage === 'ready')) {
+        const signIn = bridgeSignInButton(agent, door, stage === 'ready');
+        if (keyFirst) signIn.classList.remove('primary');
+        actions.append(signIn);
+      }
+    }
+    else if (!agent.key && agent.login) actions.append(el('span', 'note', t('signs in from your terminal:')));
+    if (reveal && !keyFirst) actions.append(reveal);
   }
   if (actions.childNodes.length) card.append(actions);
   if (reveal) {
     const slot = el('div', 'key-slot');
     slot.hidden = true;
     slot.append(keyForm(agent, { onDone: () => renderOnboarding() }));
-    slot.append(el('p', 'key-note', t('Or do it from a terminal: {command}', { command: agent.login.display })));
     reveal.addEventListener('click', () => { slot.hidden = !slot.hidden; if (!slot.hidden) slot.querySelector('input')?.focus(); });
     card.append(slot);
-  } else if (stage !== 'missing' && agent.login && !agent.login.headless) card.append(commandBlock([agent.login.display, `# ${t(agent.login.note)}`]));
+  }
   if (stage !== 'missing') card.append(loginAskSlot(agent.id));
+  if (agent.id !== 'madre') {
+    const way = stage === 'missing' ? installTerminalWay(agent) : stage === 'signed-out' || stage === 'ready' ? signInTerminalWay(agent) : null;
+    if (way) card.append(way);
+  }
   const log = el('pre', 'bridge-log');
   log.id = `bridge-log-${agent.id}`;
   for (const entry of state.loginLogs.get(agent.id) ?? []) log.append(loginLine(entry));
@@ -3682,17 +4522,42 @@ function bridgeInstallButton(agent) {
   return button;
 }
 function bridgeSignInButton(agent, door, again = false) {
-  const named = Boolean(agent.login?.methods?.length);
+  const named = Boolean(agent.login?.methods?.length) && !door.again;
   const button = el('button', again && !named ? null : 'primary', named ? door.label : again ? t('SIGN IN AGAIN') : t('SIGN IN'));
   button.type = 'button';
   button.title = t(door.note || agent.login.note);
   button.addEventListener('click', async () => {
+    if (door.choose) { choosingAccount.add(agent.id); renderOnboarding(); return; }
+    choosingAccount.delete(agent.id);
     button.disabled = true;
     try { await startLogin(agent.id, door.id); }
     catch (error) { toast(t('Diagnostics › sign-in did not start: {error}', { error: error.message })); renderOnboarding(); }
   });
   return button;
 }
+// The other way in: the same install or sign-in typed in a terminal, for whoever prefers it.
+// Folded, so a person who has never opened a terminal is never asked to.
+// Cards are drawn again on every sign-in event: which folds are open is kept here, so one never
+// closes on the person reading it.
+const openTerminalWays = new Set();
+function terminalWay(lines) {
+  const fold = el('details', 'terminal-way');
+  const key = lines[0];
+  fold.open = openTerminalWays.has(key);
+  fold.addEventListener('toggle', () => { if (fold.open) openTerminalWays.add(key); else openTerminalWays.delete(key); });
+  fold.append(el('summary', null, t('Prefer your terminal?')));
+  fold.append(commandBlock(lines));
+  return fold;
+}
+function installTerminalWay(agent) {
+  if (!agent.install) return null;
+  return terminalWay([agent.install.display, ...(agent.install.alternatives ?? []).map((line) => `# ${t(line)}`)]);
+}
+function signInTerminalWay(agent) {
+  const way = agent.login?.terminal;
+  if (!way) return null;
+  return terminalWay([way.command, ...(way.note ? [`# ${t(way.note)}`] : [])]);
+}
 
 /* ---------- thread rendering ---------- */
 
@@ -3869,6 +4734,8 @@ 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>';
 const ICON_PREFER = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M7.45 2.7c.22-.45.88-.45 1.1 0l1.3 2.65 2.92.43c.5.07.7.69.34 1.04l-2.12 2.06.5 2.9c.09.5-.44.88-.89.65L8 11.06l-2.6 1.37c-.45.23-.98-.15-.89-.65l.5-2.9-2.12-2.06c-.36-.35-.16-.97.34-1.04l2.92-.43z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+// The settings' gear: the drawing AJUSTES wears in the bar, for any way into Settings.
+const GEAR_ICON = '<svg class="gear-glyph" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M8.65 3.85L8.92 1.97L11.08 1.97L11.35 3.85L13.40 4.69L14.91 3.56L16.44 5.09L15.31 6.60L16.15 8.65L18.03 8.92L18.03 11.08L16.15 11.35L15.31 13.40L16.44 14.91L14.91 16.44L13.40 15.31L11.35 16.15L11.08 18.03L8.92 18.03L8.65 16.15L6.60 15.31L5.09 16.44L3.56 14.91L4.69 13.40L3.85 11.35L1.97 11.08L1.97 8.92L3.85 8.65L4.69 6.60L3.56 5.09L5.09 3.56L6.60 4.69ZM12.6 10a2.6 2.6 0 1 1-5.2 0a2.6 2.6 0 1 1 5.2 0Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>';
 // A small ×, in the same round line, for an aside that can be put away.
 const ICON_STOP = '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="5" y="5" width="6" height="6" rx="1.3" fill="currentColor"/></svg>';
 const ICON_CLOSE_SMALL = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>';
@@ -4056,6 +4923,12 @@ const WORKING_VOICE = {
     late: [t('Reasoning through it…'), t('Verifying the findings…'), t('Sorting the evidence…')],
     long: [t('Formulating the answer…'), t('Writing it up…'), t('Wrapping up…')],
   },
+  cursor: {
+    early: [t('Reading the repo…'), t('Searching the project…'), t('Grabbing context…')],
+    middle: [t('Thinking…'), t('Digging through the code…'), t('Following the references…'), t('Looking closer…')],
+    late: [t('Working through it…'), t('Double-checking…'), t('Piecing it together…')],
+    long: [t('Writing the response…'), t('Tidying the answer…'), t('Nearly done…')],
+  },
   opencode: {
     early: [t('Reading the repo…'), t('Listing files…'), t('Grabbing context…')],
     middle: [t('Thinking…'), t('Digging through the code…'), t('Following the call chain…'), t('Looking closer…')],
@@ -4082,10 +4955,11 @@ function showReading(event) {
   // The answer as it is written. A CLI that says nothing until it is done shows nothing here,
   // which is the truth rather than a number invented to keep something moving.
   const wrote = out ? ` · ${t('{n} out', { n: (outTokens ?? 0).toLocaleString() || t('{n} ch', { n: out.toLocaleString() }) })}` : '';
-  meter.textContent = `~${read}${wrote}`;
-  meter.title = tokens
+  // In place, and said without the grey box (see the clock in renderThinking).
+  setText(meter, `~${read}${wrote}`);
+  meter.setAttribute('aria-description', tokens
     ? t("{chars} characters of briefing and transcript, about {tokens} tokens at this project's measured rate{written}. The exact figure arrives when the agent answers.", { chars: chars.toLocaleString(), tokens: tokens.toLocaleString(), written: out ? t(', and {n} characters written back so far', { n: out.toLocaleString() }) : '' })
-    : t('{chars} characters. This project has not been billed yet, so there is no rate to convert them at.', { chars: chars.toLocaleString() });
+    : t('{chars} characters. This project has not been billed yet, so there is no rate to convert them at.', { chars: chars.toLocaleString() }));
 }
 
 // The bill arrived: the estimate is replaced by what was actually charged, and stays on the
@@ -4177,6 +5051,8 @@ function renderThinking(event) {
   const status = el('span', 'status');
   const tokens = el('span', 'tokens');
   const elapsed = el('span', 'elapsed');
+  // The clock is not read aloud every second: the region around it is live.
+  elapsed.setAttribute('aria-hidden', 'true');
   // 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.
@@ -4214,7 +5090,9 @@ function renderThinking(event) {
     phraseChangedAt = seconds;
     phraseIndex = (phraseIndex + 1) % pool.length;
     const next = pool[phraseIndex];
-    if (status.textContent !== next) { status.textContent = next; status.style.animation = 'none'; void status.offsetWidth; status.style.animation = ''; }
+    // The phrase changes in place and comes in with its own small animation, without asking the
+    // browser to lay the page out again first (the old restart read offsetWidth to replay it).
+    if (status.textContent !== next) { setText(status, next); status.animate?.([{ opacity: 0, transform: 'translateY(3px)' }, { opacity: 1, transform: 'none' }], { duration: 350, easing: 'ease' }); }
   };
   // The limit the room holds this turn to, said with its start; older records fall back to the setting.
   const limitMs = event.payload.timeoutMs ?? state.timeouts[agent] ?? 180000;
@@ -4230,9 +5108,11 @@ function renderThinking(event) {
     else if ((wasConnected || Date.now() - born > 5000) && timer) { clearInterval(timer); thinkingClocks.delete(timer); return; }
     const seconds = Math.max(0, Math.round((Date.now() - startedAt) / 1000));
     speak(seconds);
-    elapsed.textContent = `${seconds}s / ${limit}s`;
-    elapsed.classList.toggle('late', seconds >= limit * 0.6);
-    bubble.title = t('{label} is reading the project… {seconds}s so far; MADRE gives up at {limit}s.', { label: label(agent), seconds, limit });
+    setText(elapsed, `${seconds}s / ${limit}s`);
+    if (elapsed.classList.contains('late') !== seconds >= limit * 0.6) elapsed.classList.toggle('late', seconds >= limit * 0.6);
+    // Said to a screen reader, never as the browser's grey box: a title written every second came
+    // back under a still pointer however many times it was taken off (adoptTitle).
+    bubble.setAttribute('aria-description', t('{label} is reading the project… {seconds}s so far; MADRE gives up at {limit}s.', { label: label(agent), seconds, limit }));
   };
   tick();
   timer = setInterval(tick, 1000);
@@ -4621,7 +5501,7 @@ function attachMemoryHint(event) {
   for (const child of [...(col.children ?? [])]) if (child.classList?.contains('memory-hint')) child.remove();
   const hint = el('div', 'memory-hint');
   tint(hint, agent);
-  hint.append(el('span', 'lead', t('◉ memory saved')));
+  hint.append(leadWords('span', 'lead', t('◉ memory saved')));
   for (const note of notes.slice(0, 3)) {
     const pill = el('button', `pill ${note.kind}`);
     pill.type = 'button';
@@ -4787,13 +5667,35 @@ function renderLeaseRefused(event) {
 // 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.
+// A reply that says it created files the disk does not have (manual tests on 1.0.2, 2026-10-17:
+// «Creé gastos.html» and no gastos.html). It used to be a small line that folded into a dot ten
+// seconds later, under a bubble that said the opposite. Now it says it plainly and offers the way
+// on: the same request back in the box, with a line telling the agent what happened. Sending it is
+// the human's; the live button keeps the notice open until then.
 function renderCreateMissing(event) {
-  const { agent, files = [] } = event.payload;
-  const node = el('div', 'system memory warn');
+  const { agent, files = [], requestId = null } = event.payload;
+  const list = files.slice(0, 4).join(', ') + (files.length > 4 ? '…' : '');
+  const node = el('div', 'system memory warn create-missing');
   tint(node, 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'));
+  node.append(t(' · said it created {files}, but it is not in your project', { files: list }));
+  node.append(t(' · nothing was written in this reply'));
+  const asked = requestId ? state.userMessages.get(requestId) : null;
+  if (asked && state.agents.has(agent)) {
+    const again = el('button', 'retry-longer', t('ASK AGAIN'));
+    again.type = 'button';
+    again.addEventListener('click', () => {
+      again.disabled = true;
+      if (els.target.value !== agent) { els.target.value = agent; renderPicker(); }
+      const note = t('Last time you said you created {files}, but nothing was written to disk. Create them now and check that they exist before you answer.', { files: list });
+      els.input.value = [asked.text ?? '', note].filter(Boolean).join('\n\n');
+      if ((asked.mode ?? 1) === 2) setMode(2);
+      else if ((asked.mode ?? 1) >= 3) toast(t('Diagnostics › #{n} needs you to confirm again: choose it in the mode selector before sending.', { n: asked.mode }));
+      autosize();
+      focusComposer();
+    });
+    node.append(again);
+  }
   return node;
 }
 
@@ -4829,12 +5731,102 @@ function renderEnlace(event) {
       : t(" · with {room} · both read each other's {kinds}, read-only", { room: other, kinds: what })));
     if (expires) node.append(t(' · until {date}', { date: new Date(expires).toLocaleDateString(language(), { day: 'numeric', month: 'short' }) }));
     if (event.payload.contract?.signed?.by === 'bishop') node.append(t(' · signed by the Coordinator'));
+    if (event.payload.contract?.train) node.append(t(' · the Coordinator learns from it'));
+    if (event.payload.contract?.state) node.append(role === 'serves' ? t(' · it also reads the state of this project') : role === 'reads' ? t(' · this project also reads its state') : t(" · both read each other's state"));
+    if (event.payload.contract?.deliver) node.append(role === 'serves' ? t(' · it can deliver notes here, which you accept') : role === 'reads' ? t(' · this project can deliver notes to it') : t(' · both can deliver notes to each other'));
   }
   node.title = contract?.id ?? (typeof contract === 'string' ? contract : '');
   if (contract?.id) node.dataset.contract = contract.id;
   return node;
 }
 
+// D-S15: what the Coordinator took to learn from, said in the project that handed it over, and in
+// Salas, where it was taken. One line each time; the notes themselves are never shown here.
+function renderLearned(event) {
+  const { count = 0 } = event.payload ?? {};
+  const node = el('div', 'system memory enlace');
+  node.append(el('b', null, t('CONNECTION')));
+  node.append(event.type === 'enlace.corpus'
+    ? t('The Coordinator learned what this project knows: {n} notes, cleaned of private data.', { n: count })
+    : t('Learned from {room}: {n} notes for the training.', { room: event.payload.from ?? '', n: count }));
+  return node;
+}
+
+// D-S17: notes another project delivered here. A card with one row per note, each accepted or
+// declined by you (or by an agent of this project in #3/#4, which the row then shows). Nothing of
+// them is in the memory until accepted.
+function renderDelivered(event) {
+  const { name, agent, coordinator, notes = [] } = event.payload ?? {};
+  if (!notes.length) return null;
+  const from = coordinator ? t('the Coordinator') : name;
+  const node = el('div', 'choice run-request bishop-plan delivered');
+  const head = el('div', 'choice-head');
+  head.append(el('span', 'choice-kicker', t('Delivered by {room}{agent}', { room: from, agent: agent ? ` · @${agent}` : '' })));
+  node.append(head, el('p', 'choice-q', notes.length === 1 ? t('One note for this project. It enters the memory only if it is accepted.') : t('{n} notes for this project. Each enters the memory only if it is accepted.', { n: notes.length })));
+  const list = el('div', 'choice-list');
+  for (const note of notes) {
+    const row = el('div', 'choice-option bishop-order');
+    row.dataset.delivery = note.id;
+    row.append(el('span', 'choice-key', kindWord(note.kind).slice(0, 1).toUpperCase()));
+    const what = el('div', 'choice-text');
+    const where = el('div', 'bishop-where');
+    where.append(el('b', null, kindWord(note.kind)));
+    what.append(where, el('div', 'bishop-task', note.text));
+    if (note.why) what.append(el('p', 'run-why', t('Why: {why}', { why: note.why })));
+    row.append(what, el('div', 'choice-tags'));
+    list.append(row);
+    state.deliveries.set(note.id, row);
+    markDelivery({ id: note.id }, row.dataset.status ?? 'pending', row);
+  }
+  node.append(list);
+  state.lastSender = null;
+  return node;
+}
+function markDelivery({ id, by = null }, status, row = null) {
+  const target = row ?? state.deliveries.get(id);
+  if (!target) return;
+  target.dataset.status = status;
+  const side = target.querySelector('.choice-tags');
+  side.replaceChildren();
+  if (status !== 'pending') {
+    const who = by && by !== 'you' ? ` · @${by}` : '';
+    side.append(el('span', 'choice-tag', `${status === 'accepted' ? t('ACCEPTED') : t('DECLINED')}${who}`));
+    return;
+  }
+  if (state.device) { side.append(el('span', 'choice-tag', t('FROM THE MAC'))); return; }
+  const accept = bishopButton(t('Accept'));
+  const decline = bishopButton(t('Decline'), true);
+  accept.addEventListener('click', () => bishopPress('/api/enlace/inbox/decide', { id, accept: true }, [accept, decline]));
+  decline.addEventListener('click', () => bishopPress('/api/enlace/inbox/decide', { id, accept: false }, [accept, decline]));
+  side.append(accept, decline);
+}
+// D-S16 and D-S17, the lines that say what crossed: the state read, notes delivered elsewhere.
+function renderCrossing(event) {
+  const payload = event.payload ?? {};
+  const node = el('div', 'system memory enlace');
+  node.append(el('b', null, t('CONNECTION')));
+  const room = payload.name ?? payload.to ?? payload.from ?? '';
+  if (event.type === 'enlace.state') node.append(payload.source ? t('{room} read the state of this project.', { room: payload.to ?? '' }) : t('{room} asked for the state of this project; it keeps none (Continuity is not installed).', { room: payload.to ?? '' }));
+  else if (event.type === 'enlace.state.received') node.append(t('@{agent} read the state of {room}.', { agent: payload.agent ?? '', room }));
+  else node.append(t('@{agent} delivered {n} notes to {room}. They wait there until it accepts them.', { agent: payload.agent ?? '', n: (payload.notes ?? []).length, room }));
+  return node;
+}
+// D-S18: the exam of the Coordinator's local model, said in Home as it starts and as it ends.
+function renderExam(event) {
+  const payload = event.payload ?? {};
+  const node = el('div', `system memory enlace${event.type === 'bishop.exam.failed' || (event.type === 'bishop.exam.finished' && !payload.passed) ? ' warn' : ''}`);
+  node.append(el('b', null, t('EXAM')));
+  if (event.type === 'bishop.exam.started') node.append(t('The Coordinator\'s local model {model} is being examined: {n} questions and orders.', { model: payload.model ?? '', n: (payload.known ?? 0) + (payload.unknown ?? 0) + (payload.orders ?? 0) }));
+  else if (event.type === 'bishop.exam.failed') node.append(t('The exam of {model} could not finish: {why}', { model: payload.model ?? '', why: payload.error ?? '' }));
+  else {
+    const part = (key) => `${payload.scores?.[key]?.passed ?? 0}/${payload.scores?.[key]?.total ?? 0}`;
+    node.append(payload.passed
+      ? t('{model} passed: {known} about the projects, {unknown} said it never discussed, {orders} orders. The Coordinator gives orders with it up to #1.', { model: payload.model ?? '', known: part('known'), unknown: part('unknown'), orders: part('orders') })
+      : t('{model} did not pass: {known} about the projects, {unknown} said it never discussed, {orders} orders. The Coordinator keeps only answering with it.', { model: payload.model ?? '', known: part('known'), unknown: part('unknown'), orders: part('orders') }));
+  }
+  return node;
+}
+
 function renderControlStarted(event) {
   const { agent, commit, message } = event.payload;
   const node = el('div', 'system control');
@@ -5122,7 +6114,7 @@ async function renderOpenQuestions() {
     try { localStorage.setItem('pulse.openqDismissed', signature); } catch { /* closed for this page only */ }
     box.hidden = true;
   });
-  head.append(el('span', 'openq-lead', t('◉ still open here')), close);
+  head.append(leadWords('span', 'openq-lead', t('◉ still open here')), close);
   box.append(head);
   // 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.
@@ -5180,7 +6172,7 @@ async function renderSettled() {
   catch { return; }
   if (!decisions.length) { box.hidden = true; return; }
   box.replaceChildren();
-  box.append(el('span', 'settled-lead', t('◉ decided here · {n}', { n: decisions.length })));
+  box.append(leadWords('span', 'settled-lead', t('◉ decided here · {n}', { n: decisions.length })));
   for (const note of decisions) {
     const pill = el('button', 'settled-note');
     pill.type = 'button';
@@ -6190,6 +7182,17 @@ function renderEventNode(event) {
     case 'mode.requested': node = renderModeRequest(event); break;
     case 'control.started': node = renderControlStarted(event); break;
     case 'create.reverted': node = renderCreateReverted(event); break;
+    case 'enlace.corpus':
+    case 'enlace.learned': node = renderLearned(event); break;
+    case 'enlace.delivered': if (!replaying) void refreshDeliveries(); node = renderDelivered(event); break;
+    case 'enlace.accepted': markDelivery(event.payload, 'accepted'); if (!replaying) void refreshDeliveries(); return;
+    case 'enlace.declined': markDelivery(event.payload, 'declined'); if (!replaying) void refreshDeliveries(); return;
+    case 'enlace.state':
+    case 'enlace.state.received':
+    case 'enlace.sent': node = renderCrossing(event); break;
+    case 'bishop.exam.started':
+    case 'bishop.exam.finished':
+    case 'bishop.exam.failed': node = renderExam(event); break;
     case 'enlace.signed':
     case 'enlace.revoked': if (event.type === 'enlace.revoked' && markRevokedLinks(event.payload.contract?.id)) return; node = renderEnlace(event); break;
     case 'bishop.plan.proposed': node = renderBishopPlan(event); break;
@@ -6233,7 +7236,7 @@ function renderEventNode(event) {
   // says something about itself: in a new project @madre's arrival used to take it away before
   // anyone had written a word.
   if (event.type.startsWith('message.') || event.type === 'command.output' || event.type === 'run.requested') removeEmpty();
-  const stickToBottom = !drawingRecord && scroller.height - scroller.top - scroller.view < 120;
+  const stickToBottom = !drawingRecord && pinnedToEnd;
   els.column.append(tidySystemLine(node));
   scheduleFold(node);
   if (!drawingRecord) followTurn(event, node, stickToBottom);
@@ -6338,12 +7341,12 @@ function openStrip(strip, open = !strip.classList.contains('open')) {
   // Opening a row is reading it: the thread stops following the end, or the taller row would be
   // scrolled away from under the click.
   const last = !strip.nextElementSibling;
-  if (open && !last) pinnedToEnd = false;
+  if (open && !last) setPinned(false);
   strip.classList.toggle('open', open);
   for (const node of strip.querySelectorAll(':scope > .system.folded')) node.classList.remove('quiet');
   groupRepeats(strip);
   countStrip(strip);
-  if (open) requestAnimationFrame(() => strip.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' }));
+  if (open) requestAnimationFrame(() => { ourScroll(900); strip.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' }); });
 }
 els.column.addEventListener('click', (event) => {
   const strip = event.target.closest?.('.sys-dots');
@@ -6372,18 +7375,51 @@ function drawRecord(events) {
   drawingRecord = true;
   try { for (const event of events) renderEvent(event); } finally { drawingRecord = false; }
 }
+// What is off screen is not drawn (content-visibility), and until a row has been drawn once its
+// height is a guess (contain-intrinsic-size: 140px). A notice folded to dots is 13 px, an answer
+// can be 2,000: a jump into history that had never been on screen — the scrollbar dragged up, Home,
+// a search — landed hundreds of pixels off and the conversation jumped under the reader as the rows
+// near it found their real heights. Once the record is drawn, every row is laid out one time, a
+// batch while the page is idle, so the browser remembers its real height (contain-intrinsic-size:
+// auto) and goes back to skipping it. One pass per conversation opened; nothing stays drawn.
+let measuring = 0;
+function measureRows() {
+  const run = ++measuring;
+  const rows = [...(els.column?.children ?? [])];
+  const idle = globalThis.requestIdleCallback ? (fn) => requestIdleCallback(fn, { timeout: 400 }) : (fn) => setTimeout(fn, 16);
+  const frame = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (fn) => setTimeout(fn, 16);
+  let next = rows.length;
+  // From the end up: the rows nearest to where the reader is are measured first.
+  const step = () => {
+    if (run !== measuring || next <= 0) return;
+    const batch = rows.slice(Math.max(0, next - 30), next).filter((row) => row.isConnected !== false);
+    next -= 30;
+    for (const row of batch) row.classList?.add('cv-measure');
+    frame(() => frame(() => {
+      for (const row of batch) row.classList?.remove('cv-measure');
+      idle(step);
+    }));
+  };
+  idle(step);
+}
 function followTurn(event, node, stickToBottom) {
   if (replaying) { if (stickToBottom) scrollToEnd(); return; }
-  const isTurn = event.type === 'agent.started' || (event.type === 'message.created' && event.payload.role === 'user');
+  const mine = event.type === 'message.created' && event.payload.role === 'user';
   const isAnswer = event.type === 'message.created' && event.payload.role !== 'user';
+  // What the human just sent takes them to the end, wherever they were reading.
+  if (mine) { setPinned(true); scroller.to({ top: scroller.height, behavior: 'smooth' }); return; }
+  // Gone up to read: nothing below moves them. An answer or a finished plan says so on a button.
+  if (!pinnedToEnd) {
+    if (isAnswer) markFinishedBelow(event.payload.sender);
+    else if (event.type === 'plan.completed') markFinishedBelow(event.payload.orchestrator ?? null, true);
+    return;
+  }
   if (isAnswer) {
+    // A long answer is read from its top: the thread stops following and opens at its start.
     const tall = node.getBoundingClientRect?.().height > scroller.view * 0.7;
-    if (tall) node.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
-    else scroller.to({ top: scroller.height, behavior: 'smooth' });
-    return;
+    if (tall) { setPinned(false); ourScroll(900); node.scrollIntoView?.({ behavior: 'smooth', block: 'start' }); return; }
   }
-  if (isTurn) { scroller.to({ top: scroller.height, behavior: 'smooth' }); return; }
-  if (stickToBottom) scrollToEnd();
+  scrollToEnd();
 }
 
 /* ---------- theme: auto (system) → light → dark ---------- */
@@ -6442,7 +7478,8 @@ const LOOKS = {
   accent: { key: 'pulse.accent', values: ['madre', 'mountain', 'caribbean', 'phantom', 'malbec', 'dijon', 'pacific', 'love', 'sierra', 'pitahaya', 'papaya', 'agave', 'dinamo', 'marina', 'pulso', 'leal', 'dulce'] },
   bubbles: { key: 'pulse.bubbles', values: ['comfortable', 'large', 'compact', 'fitted'] },
   text: { key: 'pulse.text', values: ['comfortable', 'larger', 'smaller', 'visual'] },
-  wallpaper: { key: 'pulse.wallpaper', values: ['default', 'jarrito', 'canela', 'paradise', 'ventura', 'magna', 'biznaga', 'oceano', 'quila', 'xico', 'tropical', 'tradicion', 'urbania'] },
+  // Last, the person's own picture (public/wallpaper.js): a choice only once there is one.
+  wallpaper: { key: 'pulse.wallpaper', values: ['default', 'jarrito', 'canela', 'paradise', 'ventura', 'magna', 'biznaga', 'oceano', 'quila', 'xico', 'tropical', 'tradicion', 'urbania', CUSTOM_WALL] },
   // How a photograph wears the room's ground: a flat layer, or a mesh of its own colours.
   wpStyle: { key: 'pulse.wallpaper.style', values: ['veil', 'mesh'] },
 };
@@ -6452,7 +7489,7 @@ const TUNES = {
   veil: { key: 'pulse.wallpaper.veil', min: 0, max: 140, step: 5, value: 100, apply: (node, v) => node.style.setProperty('--veil-k', String(v / 100)) },
   blur: { key: 'pulse.wallpaper.blur', min: 0, max: 24, step: 1, value: 0, apply: (node, v) => node.style.setProperty('--wp-blur', `${v}px`) },
 };
-const PHOTO_WALLPAPERS = new Set(['jarrito', 'canela', 'paradise', 'ventura', 'magna', 'biznaga', 'oceano', 'quila', 'xico', 'tropical', 'tradicion', 'urbania']);
+const PHOTO_WALLPAPERS = new Set(['jarrito', 'canela', 'paradise', 'ventura', 'magna', 'biznaga', 'oceano', 'quila', 'xico', 'tropical', 'tradicion', 'urbania', CUSTOM_WALL]);
 function readTune(name) {
   const tune = TUNES[name];
   let raw = null;
@@ -6475,7 +7512,7 @@ const LOOK_WORDS = {
   accent: { madre: () => t('Madre green'), mountain: () => t('Mountain green'), caribbean: () => t('Caribbean blue'), phantom: () => t('Phantom purple'), malbec: () => t('Malbec red'), dijon: () => t('Dijon yellow'), pacific: () => t('Pacific blue'), love: () => t('Love pink'), sierra: () => t('Sierra blue'), pitahaya: () => 'Pitahaya', papaya: () => 'Papaya', agave: () => 'Agave', dinamo: () => t('Dynamo black'), marina: () => t('Marina blue'), pulso: () => t('Pulse green'), leal: () => t('Loyal orange'), dulce: () => t('Sweet yellow') },
   bubbles: { comfortable: () => t('Comfortable'), large: () => t('Large'), compact: () => t('Compact'), fitted: () => t('Fitted') },
   text: { comfortable: () => t('Comfortable'), larger: () => t('Larger'), smaller: () => t('Smaller'), visual: () => t('Visual') },
-  wallpaper: { default: () => t('Default'), jarrito: () => 'Jarrito', canela: () => 'Canela', paradise: () => t('Paradise'), ventura: () => 'Ventura', magna: () => 'Magna', biznaga: () => 'Biznaga', oceano: () => 'Oceano', quila: () => 'Quila', xico: () => 'Xico', tropical: () => 'Tropical', tradicion: () => 'Tradicion', urbania: () => 'Urbania' },
+  wallpaper: { default: () => t('Default'), jarrito: () => 'Jarrito', canela: () => 'Canela', paradise: () => t('Paradise'), ventura: () => 'Ventura', magna: () => 'Magna', biznaga: () => 'Biznaga', oceano: () => 'Oceano', quila: () => 'Quila', xico: () => 'Xico', tropical: () => 'Tropical', tradicion: () => 'Tradicion', urbania: () => 'Urbania', custom: () => t('Your picture') },
   wpStyle: { veil: () => t('Layer'), mesh: () => t('Mesh') },
 };
 // Jarrito took MADRE's place among the wallpapers and Canela took Autumn's: a choice saved under
@@ -6485,6 +7522,8 @@ function readLook(name) {
   let value = null;
   try { value = localStorage.getItem(LOOKS[name].key); } catch { /* no storage */ }
   if (name === 'wallpaper' && RENAMED_LOOKS[value]) value = RENAMED_LOOKS[value];
+  // Chosen, and then taken away (here or on another page): the room as it always was.
+  if (name === 'wallpaper' && value === CUSTOM_WALL && !customWall()) value = null;
   return LOOKS[name].values.includes(value) ? value : LOOKS[name].values[0];
 }
 function applyLook(name, value) {
@@ -6492,6 +7531,8 @@ function applyLook(name, value) {
   if (!rootElement) return;
   if (value === LOOKS[name].values[0]) delete rootElement.dataset[name]; else rootElement.dataset[name] = value;
 }
+// The person's picture as this browser last knew it, before the first look is painted.
+paintCustomWall(rememberedWall());
 for (const name of Object.keys(LOOKS)) applyLook(name, readLook(name));
 for (const name of Object.keys(TUNES)) applyTune(name, readTune(name));
 // The half on the right and the conversations in windows read the same choices, the moment they
@@ -6509,7 +7550,7 @@ window.addEventListener?.('storage', (event) => {
 // phone's bridge.
 // The wallpaper is each page's own (2026-10-13): this project keeps the one chosen here, Home the
 // one chosen in Home (src/looks.mjs, `rooms`). The rest of the looks are shared.
-const SHARED_LOOKS = ['pulse.theme', 'pulse.accent', 'pulse.wallpaper.style', 'pulse.wallpaper.veil', 'pulse.wallpaper.blur', 'pulse.bubbles', 'pulse.text'];
+const SHARED_LOOKS = ['pulse.theme', 'pulse.accent', 'pulse.wallpaper.style', 'pulse.wallpaper.veil', 'pulse.wallpaper.blur', 'pulse.bubbles', 'pulse.text', 'pulse.neural'];
 let booted = false;
 let looksPush = 0;
 // Saved for this project alone, on the server, so it outlives the port the page is served on.
@@ -6529,8 +7570,12 @@ async function pullLooks() {
   let answer = null;
   try { answer = await fetch('/api/looks', { cache: 'no-store' }).then((response) => (response.ok ? response.json() : null)); } catch { return; }
   if (!answer?.looks) return;
+  // The person's own picture, kept once for every page (public/wallpaper.js): painted as it is now.
+  const before = customWall()?.v ?? null;
+  paintCustomWall(answer.custom ?? null);
   // Before a project had its own, it wore the shared one: that is where it starts.
-  const wall = answer.own?.wallpaper ?? answer.looks['pulse.wallpaper'] ?? null;
+  let wall = answer.own?.wallpaper ?? answer.looks['pulse.wallpaper'] ?? null;
+  if (wall === CUSTOM_WALL && !answer.custom) wall = null;
   try {
     // Nothing kept yet: the first page that has a choice of its own hands it to the others.
     if (!answer.saved) { if (SHARED_LOOKS.some((key) => localStorage.getItem(key) !== null)) pushLooks(); return; }
@@ -6541,7 +7586,7 @@ async function pullLooks() {
       if (value === null) localStorage.removeItem(key); else localStorage.setItem(key, value);
       changed = true;
     }
-    if (changed) reapplyLooks();
+    if (changed || before !== (answer.custom?.v ?? null)) reapplyLooks();
   } catch { /* no storage: this page keeps the look it has */ }
 }
 function reapplyLooks() {
@@ -6551,6 +7596,8 @@ function reapplyLooks() {
   applyTheme(themeMode);
   for (const name of Object.keys(LOOKS)) applyLook(name, readLook(name));
   for (const name of Object.keys(TUNES)) applyTune(name, readTune(name));
+  // The maps' neural mode, chosen on another page (public/neural.js).
+  if (booted) syncNostromoNeural();
   if (booted) { renderAgents(); renderPicker(); syncSettingsCards(); }
 }
 void pullLooks();
@@ -6687,6 +7734,16 @@ function drawCustom() {
   const papers = el('div', 'custom-papers');
   papers.setAttribute('role', 'radiogroup');
   for (const value of LOOKS.wallpaper.values) {
+    // The person's own picture: chosen like any other once it is here; until then, the way to add it.
+    if (value === CUSTOM_WALL) {
+      const mine = customWall();
+      const paper = mine ? radio(el('button', 'paper'), draft.wallpaper === CUSTOM_WALL, () => setDraft('wallpaper', CUSTOM_WALL)) : el('button', 'paper');
+      paper.type = 'button';
+      customTile(paper, mine);
+      if (!mine) paper.addEventListener('click', () => void addPicture({ busy: paper, chosen: () => setDraft('wallpaper', CUSTOM_WALL), failed: (message) => toast(message, { tone: 'note' }) }));
+      papers.append(paper);
+      continue;
+    }
     const paper = radio(el('button', 'paper'), value === draft.wallpaper, () => setDraft('wallpaper', value));
     paper.dataset.wp = value;
     paper.append(el('span', 'paper-swatch'), el('span', 'paper-name', LOOK_WORDS.wallpaper[value]()));
@@ -6721,6 +7778,15 @@ function drawCustom() {
       return row;
     };
     paperTune.append(dial('veil', t('Intensity'), (v) => `${v}%`), dial('blur', t('Blur'), (v) => `${v}px`));
+    // Your picture: where the screen falls on it, and changing it or taking it away.
+    if (draft.wallpaper === CUSTOM_WALL && customWall()) {
+      paperTune.append(customTools(customWall(), {
+        button: (words, click) => sxButton(words, click),
+        changed: (kept, { reframed }) => { if (!reframed) drawCustom(); },
+        removed: () => setDraft('wallpaper', LOOKS.wallpaper.values[0]),
+        failed: (message) => toast(message, { tone: 'note' }),
+      }));
+    }
   }
   const themes = el('div', 'custom-seg three');
   themes.setAttribute('role', 'radiogroup');
@@ -6879,7 +7945,7 @@ customWindow.node?.addEventListener('close', () => { customButton?.setAttribute(
 // from the same code and the same answers (state.settingsTargets), wearing the room's ink.
 const SETTINGS_SECTIONS = [
   ['You', 'How it looks, how it works and your files', ['look', 'room', 'files']],
-  ['The agents', 'Who works, what they remember and which outside tools they use', ['agents', 'memory', 'mcp']],
+  ['The agents', 'Who works, what they remember and which outside tools they use', ['agents', 'memory', 'local', 'mcp']],
   ['System', 'What agents may do, privacy and updates', ['permissions', 'privacy', 'release']],
 ];
 const SETTINGS_CATS = {
@@ -6887,13 +7953,16 @@ const SETTINGS_CATS = {
   room: { name: 'Work and limits', color: '#d97757', icon: '<rect x="3.5" y="3.5" width="5.5" height="5.5" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.6"/><rect x="11" y="3.5" width="5.5" height="5.5" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.6"/><rect x="3.5" y="11" width="5.5" height="5.5" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.6"/><rect x="11" y="11" width="5.5" height="5.5" rx="1.4" fill="none" stroke="currentColor" stroke-width="1.6"/>' },
   agents: { name: 'Agents', color: '#10a37f', icon: '<circle cx="7" cy="8" r="2.6" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="13.6" cy="8" r="2.6" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M2.8 16c.6-2.3 2.2-3.6 4.2-3.6s3.6 1.3 4.2 3.6M9.6 13c.9-.4 2.4-.6 4-.6 2 0 3.6 1.3 4.2 3.6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>' },
   memory: { name: 'What it remembers', color: '#3fb6d9', icon: '<rect x="5" y="5" width="10" height="10" rx="1.8" fill="none" stroke="currentColor" stroke-width="1.6"/><rect x="8.1" y="8.1" width="3.8" height="3.8" rx=".6" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M8 2.5V5M12 2.5V5M8 15v2.5M12 15v2.5M2.5 8H5M2.5 12H5M15 8h2.5M15 12h2.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>' },
+  // Local AI, also here and not only in Modules (2026-10-16): the same card, and what this
+  // computer can run and train with it.
+  local: { name: 'Local AI', color: '#7f77dd', icon: '<rect x="5" y="5" width="10" height="10" rx="2.4" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M8 2.6v2.4M12 2.6v2.4M8 15v2.4M12 15v2.4M2.6 8h2.4M2.6 12h2.4M15 8h2.4M15 12h2.4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="10" cy="10" r="1.8" fill="currentColor"/>' },
   mcp: { name: 'Outside tools (MCP)', color: '#5b8def', icon: '<path d="M7.2 3.2v3.3M12.8 3.2v3.3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M5.2 6.5h9.6v2.4a4.8 4.8 0 0 1-9.6 0z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M10 13.7v3.1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>' },
   files: { name: 'Files and local sites', color: '#c8955a', icon: '<path d="M3.5 6.2c0-.9.7-1.6 1.6-1.6h3l1.6 1.8h5.2c.9 0 1.6.7 1.6 1.6v6.4c0 .9-.7 1.6-1.6 1.6H5.1c-.9 0-1.6-.7-1.6-1.6z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>' },
   permissions: { name: 'Permissions', color: '#e5484d', icon: '<path d="M10 2.8 4.2 5v4.6c0 3.6 2.4 6.4 5.8 7.6 3.4-1.2 5.8-4 5.8-7.6V5z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><circle cx="10" cy="9" r="1.7" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M10 10.7v2.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>' },
   privacy: { name: 'Privacy', color: '#d4a72c', icon: '<rect x="4.5" y="8.5" width="11" height="8" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M7 8.5V6.6a3 3 0 0 1 6 0v1.9" fill="none" stroke="currentColor" stroke-width="1.6"/>' },
   release: { name: 'Updates and errors', color: '#4caf3a', icon: '<path d="M15.6 10a5.6 5.6 0 1 1-1.64-3.96" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M15.7 3.6v3.2h-3.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' },
 };
-const SETTINGS_ORDER = ['look', 'room', 'files', 'agents', 'memory', 'mcp', 'permissions', 'privacy', 'release'];
+const SETTINGS_ORDER = ['look', 'room', 'files', 'agents', 'memory', 'local', 'mcp', 'permissions', 'privacy', 'release'];
 // The words the search knows, each pointing to the category that holds it and to the words on the
 // screen that carry it there, so a result opens the category and lands on the setting.
 const SETTINGS_INDEX = [
@@ -6933,6 +8002,12 @@ function settingsStatus(id) {
     return { line: `${finder} · ${ripley ? (ripley.status?.installed ? t('preview on') : t('preview off')) : t('Reading…')}` };
   }
   if (id === 'mcp') return mcpStatus();
+  if (id === 'local') {
+    const item = modules.items.find((one) => one.id === 'ollama');
+    if (!item) return { line: t('Reading…') };
+    const daily = item.recommended?.hardware?.recommended?.run;
+    return { line: [item.status?.detail, daily ? t('your computer runs {model}', { model: daily.label }) : null].filter(Boolean).join(' · ') };
+  }
   if (!data) return { line: t('Reading…') };
   if (id === 'agents') {
     const here = data.agents.filter((agent) => agent.detected);
@@ -7290,6 +8365,7 @@ function settingsDetail(id) {
   if (id === 'release') { part('release'); part('sentinel'); }
   if (id === 'files') part('files');
   if (id === 'mcp') part('mcp');
+  if (id === 'local') part('local');
   return detail;
 }
 
@@ -7297,6 +8373,7 @@ function settingsDetail(id) {
 function fillSettingsCategory(id) {
   if (id === 'files') { drawFilesTarget(); void refreshModules(); }
   if (id === 'mcp') { drawMcpTarget(); void loadMcp(); }
+  if (id === 'local') { drawLocalTarget(); void refreshModules(); }
   if (['agents', 'room', 'memory', 'privacy', 'permissions'].includes(id)) { if (settingsUI.data) renderSettings(); void loadSettings(); }
   if (id === 'room' || id === 'release') { if (turnsUI.turns || sentinelUI.settings) renderMotherSentinel(); void loadTurns(); void loadSentinel(); }
   if (id === 'release') renderUpdate();
@@ -7638,6 +8715,8 @@ for (const button of document.querySelectorAll?.('button') ?? []) {
   if (!words.trim()) button.classList.add('x-only');
   button.append(xIcon());
 }
+// And its ↗ and ▾, drawn (tailMark).
+for (const node of document.querySelectorAll?.('a, button') ?? []) tailMark(node);
 
 /* ---------- project files panel ---------- */
 
@@ -7902,7 +8981,8 @@ function treeNode(path, entry) {
   button.title = path;
   button.addEventListener('contextmenu', (event) => finderMenu(event, path, entry));
   if (entry.kind === 'dir') {
-    const caret = el('span', 'caret', '▸');
+    const caret = el('span', 'caret');
+    caret.innerHTML = ICON_CHEVRON; // trusted: our own SVG string · turned by styles.css
     button.append(caret, el('span', 'name', entry.name));
     // Something under this folder changed: the dot of whoever touched it last, the way down.
     const under = touchedUnder(path);
@@ -7916,7 +8996,6 @@ function treeNode(path, entry) {
     let opened = false;
     const show = (open) => {
       opened = open;
-      caret.textContent = opened ? '▾' : '▸';
       children.hidden = !opened;
       item.setAttribute('aria-expanded', String(opened));
       if (opened) tree.openDirs.add(path); else tree.openDirs.delete(path);
@@ -7952,8 +9031,6 @@ function treeNode(path, entry) {
 // The two buttons every surface carries in its header, beside its ×: split, and window. Declared
 // before the surfaces are built, which happens while this file is still being read.
 const FLOAT_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3.25 12.25v-6.5a2.5 2.5 0 0 1 2.5-2.5h6.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><rect class="ic-f" x="6.25" y="6.25" width="10.5" height="10.5" rx="2.3" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>';
-const SPLIT_LEFT_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.75" y="3.75" width="14.5" height="12.5" rx="3.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect class="ic-h" x="5" y="6" width="3.6" height="8" rx="1.3" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M10.6 6.4v7.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-const SPLIT_RIGHT_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.75" y="3.75" width="14.5" height="12.5" rx="3.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><rect class="ic-h" x="11.4" y="6" width="3.6" height="8" rx="1.3" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M9.4 6.4v7.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 
 /* ---------- surfaces: everything that can stand beside the conversation ---------- */
 
@@ -8032,7 +9109,8 @@ function sideWidthFor(surface) {
   const vw = window.innerWidth;
   if (surface.key === 'chats') return Math.max(SIDE_MIN, Math.min(420, vw * .24));
   if (surface.key === 'tree') return Math.max(SIDE_MIN, Math.min(460, vw * .26));
-  return Math.max(420, Math.min(880, vw * .42));
+  // The viewer docked is the code workspace: the files, the code and what it makes need room.
+  return Math.max(420, Math.min(980, vw * .5));
 }
 const splitOn = (side) => surfaces.find((one) => one.side === side && isSplit(one) && (one.kind === 'dialog' ? one.node()?.open : !one.node()?.hidden) && !one.node()?.classList.contains('leaving'));
 
@@ -8801,7 +9879,12 @@ function windowBoxFor(surface) {
   const vw = window.innerWidth;
   const width = Number.isFinite(set) ? set : surface.key === 'chats' ? Math.max(320, Math.min(460, vw / 2 - 468)) : Math.max(300, Math.min(460, vw / 2 - 476));
   const left = surface.side === 'left' ? room.left + RAIL : room.right - RAIL - width;
-  return { x: left + (surface.side === 'left' ? 36 : -36), y: room.top + 42, w: width, h: Math.min(room.height - 28, 620) };
+  // A room not laid out yet (a page still loading its conversation) is measured short and low; the
+  // window then opens under the bar, as tall as the screen allows, instead of at the room's foot.
+  const settled = room.height >= 360 && room.top < window.innerHeight / 3;
+  const y = settled ? room.top + 42 : 96;
+  const h = settled ? Math.min(room.height - 28, 620) : Math.max(WINDOW_MIN_H, Math.min(620, window.innerHeight - y - 120));
+  return { x: left + (surface.side === 'left' ? 36 : -36), y, w: width, h };
 }
 
 // First, last, invert, play: the surface is moved to where it now belongs at once, then drawn from
@@ -8908,7 +9991,9 @@ function setSurfaceMode(surface, next, { animate = true } = {}) {
     if (next !== 'window') dropWindow(node);
     for (const property of ['left', 'top', 'width', 'height']) node.style.removeProperty(property);
     if (surface.kind === 'dialog') reseatDialog(node, next === 'base');
-    if (next === 'window') { placeWindow(surface, windowBoxFor(surface)); bringWindowForward(node); }
+    // Its box is kept the moment it becomes a window, not only when it is first carried: the mode
+    // was remembered and the place was not, so a reload brought it back with nowhere to be.
+    if (next === 'window') { placeWindow(surface, windowBoxFor(surface)); bringWindowForward(node); rememberSurfaces(); }
     layoutPanels();
   };
   if (animate && panelShown(surface)) flipPanel(node, change); else change();
@@ -9000,7 +10085,14 @@ if (shellBox && !SPLIT_CHAT) {
       node.classList.toggle('window', isWindow(surface));
       node.classList.toggle('split', isSplit(surface));
     }
-    if (isWindow(surface) && windowBoxes[surface.key]?.w) placeWindow(surface, windowBoxes[surface.key]);
+    // A window remembered without its box (the mode was kept, the place was not) comes back where a
+    // new window opens. It used to come back at the corner, with nothing to carry it by: «New
+    // conversation» reloads the page, and the conversations window was stuck there (2026-10-18).
+    if (isWindow(surface)) {
+      if (windowBoxes[surface.key]?.w) placeWindow(surface, windowBoxes[surface.key]);
+      // Measured once the room has its shape: on the first frames the thread is not laid out yet.
+      else requestAnimationFrame(() => requestAnimationFrame(() => { placeWindow(surface, windowBoxFor(surface)); rememberSurfaces(); }));
+    }
     carrySurface(surface);
     surfaceButtons(surface);
     sideGrip(surface);
@@ -9759,7 +10851,11 @@ function carryWindowBy(head, node, { active = () => true, box, place, done }) {
     event.preventDefault();
     const startX = event.clientX;
     const startY = event.clientY;
-    const from = { ...box() };
+    // Where it is on screen, whenever what was kept of it is not a whole box: a window is always
+    // carried from where the person sees it.
+    const kept = box() ?? {};
+    const seen = node.getBoundingClientRect();
+    const from = [kept.x, kept.y, kept.w, kept.h].every(Number.isFinite) ? { ...kept } : { ...kept, x: seen.left, y: seen.top, w: seen.width, h: seen.height };
     let carrying = false;
     let frame = 0;
     let to = null;
@@ -9955,10 +11051,10 @@ function measureDock() {
   const field = els.composer.querySelector?.('.field')?.getBoundingClientRect?.();
   if (field && !pageScrolls()) shell.style.setProperty('--type-gap', `${Math.max(0, Math.ceil(shell.getBoundingClientRect().bottom - field.top))}px`);
   if (height === measureDock.last) return;
-  const stay = atBottom();
   measureDock.last = height;
   shell.style.setProperty('--dock-h', `${height}px`);
-  if (stay) scrollToEnd();
+  placeToast();
+  keepPinned();
 }
 if (document.querySelector('.shell') && els.composer?.getBoundingClientRect) {
   measureDock();
@@ -10201,7 +11297,7 @@ if (SPLIT_CHAT && !Array.isArray(initial.events)) {
 }
 // The corner of the room: which MADRE this is, and whose it is, readable on any wallpaper, and a
 // link to its author (public/attribution.js: NOTICE's attribution, the same on Home).
-if (initial.version) drawAttribution(document.querySelector('#colophon'), initial.version);
+if (initial.version) { drawAttribution(document.querySelector('#colophon'), initial.version); void drawColophonKeys(document.querySelector('#colophon')); }
 void adoptLanguage(initial.language, initial.languageChosen);
 // Whether the copilot is on for this project, so the robot and the mode say so from the start.
 void loadCopilot().then(() => showNewHints());
@@ -10323,6 +11419,7 @@ function boot() {
   syncAshUI(Boolean(initial.ash?.enabled));
   void renderSettled();
   void renderOpenQuestions();
+  void refreshDeliveries();
   updateStopAll();
   if (typeof setInterval === 'function') { const ticker = setInterval(refreshBudgetWindow, 60000); ticker.unref?.(); }
   renderAgents();
@@ -10340,6 +11437,7 @@ function boot() {
   try { performance.measure?.('madre:history', 'madre:history-start', 'madre:history-end'); } catch { /* no timeline */ }
   setLoader(arrival, 0.9);
   scrollToEnd();
+  measureRows();
   matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => { applyTheme(themeMode); renderAgents(); renderPicker(); });
 
   // The live light sits on the conversation it is live for, at the end of the path in the bar.
@@ -10449,7 +11547,7 @@ function forgetConversation() {
   state.userMessages.clear();
   state.runsReturned.clear();
   state.ratings.clear();
-  state.ratingNodes.clear();
+  state.ratingNodes.clear(); state.deliveries.clear();
   state.running.clear();
   state.plansRunning.clear();
   state.agentStats.clear();
@@ -10490,6 +11588,7 @@ async function paintConversation(payload) {
   renderOnboarding();
   void renderOpenQuestions();
   scrollToEnd();
+  measureRows();
   connectStream();
 }
 
@@ -10508,7 +11607,12 @@ function autosize() {
   els.highlight.style.height = els.input.style.height;
   renderHighlight();
 }
-function syncHighlightScroll() { els.highlight.scrollTop = els.input.scrollTop; }
+function syncHighlightScroll() {
+  els.highlight.scrollTop = els.input.scrollTop;
+  // Scrolled inside, the first line it shows fades in under the box's edge instead of being cut
+  // in half against it (styles.css, .editor.scrolled).
+  els.input.parentElement?.classList?.toggle('scrolled', els.input.scrollTop > 1);
+}
 els.input.addEventListener('input', autosize);
 els.input.addEventListener('scroll', syncHighlightScroll);
 autosize();
@@ -11243,12 +12347,15 @@ function updateCrewLabel() {
   // The copilot reads as a link of the chain: HUMAN › COPILOT › TOKEN SAVER › @CODEX ›.
   const piloting = copilotSends(els.target?.value);
   const armed = state.mode >= 3 && !piloting;
-  els.crewLabel.textContent = piloting ? `${t('HUMAN ›')} ${t('COPILOT ›')}${order ? ` ${t('TOKEN SAVER ›')}` : ''}` : state.intruder && state.mode < 3 ? t('INTRUDER ›') : armed ? `${t('DIAGNOSTICS')} · ${MODES[state.mode].label} @${(state.modeArmedFor ?? els.target.value ?? '').toUpperCase()} ›`
+  const path = piloting ? `${t('HUMAN ›')} ${t('COPILOT ›')}${order ? ` ${t('TOKEN SAVER ›')}` : ''}` : state.intruder && state.mode < 3 ? t('INTRUDER ›') : armed ? `${t('DIAGNOSTICS')} · ${MODES[state.mode].label} @${(state.modeArmedFor ?? els.target.value ?? '').toUpperCase()} ›`
     : state.mode === 0 ? t('HUMAN · INCOGNITO ›')
       : state.moduleCommand ? (state.create ? t('DIAGNOSTICS · MODULE · CREATE ›') : t('DIAGNOSTICS · MODULE · NEEDS #2 ›'))
       : order ? `${t('HUMAN ›')} ${state.create ? t('TOKEN SAVER · CREATE ›') : t('TOKEN SAVER ›')}`
         : state.create ? t('HUMAN · CREATE ›')
           : state.expendable ? t('EXPENDABLE ›') : t('HUMAN ›');
+  // The address is two pieces so a narrow box cuts the path with «…» and never who it goes to.
+  if (typeof els.crewLabel.replaceChildren === 'function') els.crewLabel.replaceChildren(el('span', 'crew-path', path));
+  else els.crewLabel.textContent = path;
   // Who the message goes to closes the line, in that agent's colour: HUMAN › TOKEN SAVER › @CODEX ›.
   const to = els.target?.value;
   if (to && !armed && (piloting || !state.intruder) && typeof els.crewLabel.append === 'function') {
@@ -11448,6 +12555,14 @@ els.composer.addEventListener('submit', async (event) => {
   // and the effort are the ones chosen for THAT agent; the chip's would be another agent's.
   const mention = outgoing.match(/^@([a-z0-9_-]+)\b/i)?.[1]?.toLowerCase();
   const addressed = mention && state.agents.has(mention) ? mention : target;
+  // An agent that is switched off (no session, or nothing MADRE can run) is not written to: the
+  // message stays in the box and Settings opens on that agent, where it is connected.
+  if (addressed && state.agents.has(addressed) && !canAnswer(state.agents.get(addressed))) {
+    const off = state.agents.get(addressed);
+    toast(off.ready ? t('@{agent} is not signed in. Connect it in Settings › Agents and send again.', { agent: addressed }) : t('@{agent} is not available on this computer. Set it up in Settings › Agents.', { agent: addressed }), { tone: 'note' });
+    openSettingsOn('agents', { agent: addressed });
+    return;
+  }
   // CONTROL and AIRLOCK are armed for one agent. A message that ends up addressed to another one
   // is asked for again, for that one; the keys typed for @gemini never open the project to @claude.
   const piloted = copilotSends(addressed);
@@ -11487,6 +12602,7 @@ els.composer.addEventListener('submit', async (event) => {
       els.input.value = '';
       state.replyTo = null;
       renderReplyQuote();
+      offerModule(outgoing);
       state.pending = [];
       renderPendingAttachments();
       // The try went with the message; the next one goes at the rung chosen before it.
@@ -11649,7 +12765,7 @@ function roomRecords() {
 // word, the ones sharing the most of them come first: «codex no responde timeout» still finds the
 // timeout. An agent's name keeps to that agent and the general ones; little words do not count.
 const LOOSE_SKIP = new Set(['the', 'and', 'not', 'for', 'with', 'que', 'los', 'las', 'del', 'por', 'una', 'uno', 'con', 'sin', 'esta', 'este', 'muy', 'mas', 'pero']);
-const LOOSE_AGENTS = new Set(['codex', 'claude', 'gemini', 'opencode', 'madre', 'ollama']);
+const LOOSE_AGENTS = new Set(['codex', 'claude', 'gemini', 'opencode', 'cursor', 'madre', 'ollama']);
 function looseConditions(text) {
   const words = settingsFold(text).split(/[^a-z0-9#.@_-]+/).map((word) => word.replace(/^@/, '')).filter((word) => word.length >= 3 && !LOOSE_SKIP.has(word));
   const agent = words.find((word) => LOOSE_AGENTS.has(word)) ?? null;
@@ -12077,6 +13193,7 @@ function renderTerminalCard(event) {
           undo.textContent = t('RESTORED');
         } catch (error) { toast(`${t('Diagnostics › ')}${error.message}`); undo.disabled = false; }
       });
+      node.classList.add('has-undo');
       node.append(undo);
     }
   }
@@ -12092,7 +13209,7 @@ function renderEyecat(event) {
   const node = el('div', 'command-card eyecat');
   node.dataset.eyecat = finding.key;
   const head = el('div', 'head');
-  head.append(el('b', null, t('◉ MEMORY REVIEWER')), el('span', null, finding.kind === 'unsupported' ? t('a note its own sources do not support') : t('two memories that cannot both be true')));
+  head.append(leadWords('b', null, t('◉ MEMORY REVIEWER')), el('span', null, finding.kind === 'unsupported' ? t('a note its own sources do not support') : t('two memories that cannot both be true')));
   if (finding.confidence !== null && finding.confidence !== undefined) head.append(el('span', 'args', t('{pct}% · judged by @{judge}', { pct: Math.round(finding.confidence * 100), judge: finding.judge })));
   else head.append(el('span', 'args', t('judged by @{judge}', { judge: finding.judge })));
   node.append(head);
@@ -12162,6 +13279,9 @@ function appendModuleOutput(event) {
 // One way to turn a module on or off, whoever asks: its card, its tile on the board, AJUSTES. The
 // server's switch flips what is there; what each module changes in the page follows it here.
 async function switchModule(item) {
+  // Turning the test browser on may download its browser first (src/modules/playwright.mjs): said
+  // before the wait, so a switch that takes a minute is not mistaken for one that hung.
+  if (item.id === 'playwright' && !item.status?.installed) toast(t('Getting the test browser ready: MADRE downloads what it is missing. It can take a few minutes.'), { tone: 'note' });
   const response = await fetch(`/api/extensions/${item.id}/install`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ confirm: true }) });
   const result = await response.json().catch(() => ({}));
   if (!response.ok) throw new Error(result.error ?? t('{name} could not be turned on or off.', { name: item.name }));
@@ -12471,8 +13591,19 @@ async function refreshModules() {
   else renderModuleWindows();
   barModulesChanged();
   drawFilesTarget();
+  drawLocalTarget();
   syncSettingsCards();
 }
+// AJUSTES › Local AI: the module's own blocks (Modules › Local AI), drawn here too.
+function drawLocalTarget() {
+  const target = state.settingsTargets.local;
+  if (!target?.isConnected) return;
+  const item = modules.items.find((one) => one.id === 'ollama');
+  if (!item) return;
+  target.replaceChildren();
+  ollamaBlock(target, item);
+  hardwareBlock(target, item.recommended?.hardware);
+}
 
 // What the version on a card means. A module that ships with MADRE has its own version, written
 // in its file and starting at 1.0.0; it cannot update by itself, because it arrives in a release.
@@ -12521,7 +13652,11 @@ function cardFold(card, label, { key, count = null, open = false } = {}) {
   head.append(el('b', null, label));
   if (count !== null) head.append(el('span', 'count', String(count)));
   const caret = el('span', 'caret');
-  const mark = () => { caret.textContent = box.open ? t('▾ COLLAPSE') : t('▸ EXPAND'); };
+  const turn = el('span', 'caret-mark');
+  turn.innerHTML = ICON_CHEVRON; // trusted: our own SVG string · turned by styles.css
+  const said = el('span', 'caret-words');
+  caret.append(said, turn);
+  const mark = () => { said.textContent = (box.open ? t('▾ COLLAPSE') : t('▸ EXPAND')).replace(/^[▸▾]\s*/u, ''); };
   mark();
   head.append(caret);
   const body = el('div', 'card-fold-body');
@@ -12603,7 +13738,7 @@ function cardShell(item, { on, state: stateText }) {
   head.append(top);
   // What it does comes right under its name, in the reading face: it is what decides whether you
   // want it, and it used to sit three floors down under the version and the vendor.
-  if (item.summary) head.append(el('p', 'summary', item.summary));
+  if (item.summary) head.append(el('p', 'summary', t(item.summary)));
   // Who makes it, which version and whether it is current: one quiet line, not three.
   const line = el('div', 'version');
   if (item.vendor) line.append(el('span', 'vendor', item.vendor));
@@ -12650,7 +13785,7 @@ function cardShell(item, { on, state: stateText }) {
     line.append(get);
   }
   head.append(line);
-  if (item.status?.detail) head.append(el('div', 'detail', item.status.detail));
+  if (item.status?.detail) head.append(el('div', 'detail', t(item.status.detail)));
   if (item.external) head.append(el('div', 'detail', `${item.origin === 'project' ? t('THIS PROJECT') : t('EVERY PROJECT')} · ${item.file}`));
   card.append(head);
 
@@ -12658,8 +13793,8 @@ function cardShell(item, { on, state: stateText }) {
 
   // FLOOR 3 · what it touches, folded, with the count and nothing else.
   const bullets = [
-    ...(item.creates ?? []).map((text) => [t('WRITES'), text]),
-    ...(item.requires ?? []).map((text) => [t('NEEDS'), text]),
+    ...(item.creates ?? []).map((text) => [t('WRITES'), t(text)]),
+    ...(item.requires ?? []).map((text) => [t('NEEDS'), t(text)]),
   ];
   if (bullets.length) {
     const body = cardFold(card, t('WHAT IT TOUCHES'), { key: `mod.${item.id}.touches`, count: bullets.length });
@@ -13710,13 +14845,29 @@ function moduleCard(item) {
     const warn = el('div', 'confirm');
     warn.append(el('span', 'warn', t('CANNOT INSTALL HERE YET')));
     for (const problem of item.preflight.problems) warn.append(el('p', null, problem));
+    // What MADRE can put right itself (Continuity on a Mac with no git): one key, never a terminal.
+    if (item.preflight.fix) {
+      const fix = el('button', 'primary', item.preflight.fix.label ?? t('Set it up'));
+      fix.type = 'button';
+      fix.addEventListener('click', async () => {
+        fix.disabled = true;
+        const response = await reach(`/api/extensions/${item.id}/fix`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' });
+        const result = await response.json().catch(() => ({}));
+        toast(response.ok ? t('Apple\'s installer opened. When it finishes, come back here and install.') : (result.error ?? t('It could not be started.')));
+        fix.disabled = false;
+      });
+      warn.append(fix);
+    }
     panel.append(warn);
   }
   if (modules.confirming === item.id && !blocked) {
     const confirm = el('div', 'confirm');
-    confirm.append(el('span', 'warn', t('THIS WRITES INTO THE PROJECT. MADRE WILL RUN, IN THE PROJECT FOLDER:')));
-    confirm.append(commandBlock([item.install.display]));
-    confirm.append(el('span', 'note', item.install.platforms?.length
+    // Written as it is said, names and all: the card's lowercase used to read «madre» and «(ide)».
+    confirm.append(el('span', 'warn as-written', t('This writes into the project. MADRE will run, in the project folder:')));
+    const first = item.install.prepare ?? [];
+    confirm.append(commandBlock([...first.map((step) => step.display), item.install.display]));
+    for (const step of first) if (step.note) confirm.append(el('span', 'note as-written', step.note));
+    confirm.append(el('span', 'note as-written', item.install.platforms?.length
       ? t('IDE adapters for the agents detected here: {agents}.', { agents: item.install.platforms.join(', ') })
       : t('No detected agent has an adapter for this module; it installs without IDE adapters.')));
     const row = el('div', 'actions');
@@ -13766,22 +14917,6 @@ function moduleCard(item) {
 // opens the module's card in a sheet, the way a category of AJUSTES opens; the ones with a reading
 // can also float as windows of their own. MADRE decides which, for its own modules: nothing in the
 // SDK asks for it.
-const MODULE_FACES = {
-  ash: { line: 'Compact replies from every agent', wide: true, window: true, icon: '<path class="ic-f" d="M4 5.5h12M4 9.5h9M4 13.5h5.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M13.2 13.5l2.3 2.3 2.3-2.3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.5 9.8v6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>' },
-  intents: { line: 'How hard each agent should think', wide: true, window: true, icon: '<path d="M3.5 14.5a6.5 6.5 0 0 1 13 0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path class="ic-f" d="M3.5 14.5a6.5 6.5 0 0 1 4.2-6.1l2.3 6.1z" fill="currentColor" fill-opacity=".22" stroke="none"/><path d="M10 14.5l3.2-4.6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="10" cy="14.5" r="1.3" fill="currentColor"/>' },
-  ollama: { line: 'Memory by meaning, on this machine', wide: true, window: true, icon: '<rect x="3.5" y="4" width="13" height="9.5" rx="2.4" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M7.5 16.5h5M10 13.5v3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path class="ic-f" d="M10 6.4c-1.6 0-2.6 1-2.6 2.3 0 .9.5 1.5 1.1 1.8v.8h3v-.8c.6-.3 1.1-.9 1.1-1.8 0-1.3-1-2.3-2.6-2.3z" fill="currentColor" fill-opacity=".22" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>' },
-  'image-studio': { line: 'Images for the agents, with your key', icon: '<rect x="3.25" y="4.25" width="13.5" height="11.5" rx="2.6" fill="none" stroke="currentColor" stroke-width="1.6"/><path class="ic-f" d="M3.8 14.2l3.7-3.6 2.6 2.4 1.9-1.6 4 3.3H5.9z" fill="currentColor" fill-opacity=".22" stroke="none"/><path d="M3.8 14.2l3.7-3.6 2.6 2.4 1.9-1.6 4 3.3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/><path d="M13.6 6.1v2.4M12.4 7.3h2.4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>' },
-  playwright: { line: 'A browser the agents can look through', icon: '<rect x="3" y="4" width="14" height="12" rx="2.6" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M3 7.6h14" fill="none" stroke="currentColor" stroke-width="1.6"/><path class="ic-f" d="M9 9.6v5.2l1.4-1.4 1 2.1 1-.5-1-2.1h2z" fill="currentColor" fill-opacity=".22" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>' },
-  ripley: { line: 'Preview of HTML, SVG and Markdown', icon: '<path d="M6 3.5h5.5l3.5 3.5v9.5H6z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M11.5 3.5V7H15" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path class="ic-f" d="M7.6 12s1.1-2.1 2.9-2.1 2.9 2.1 2.9 2.1-1.1 2.1-2.9 2.1-2.9-2.1-2.9-2.1z" fill="currentColor" fill-opacity=".22" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>' },
-  'git-pulse': { line: 'The repository, posted to the project', icon: '<circle cx="5.5" cy="5" r="1.7" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="5.5" cy="15" r="1.7" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M5.5 6.7v6.6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path class="ic-f" d="M8.8 11h2l1.2-3.4 1.6 6 1.2-2.6h1.7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' },
-  runs: { line: 'Commands an agent asks you to run', icon: '<rect x="3" y="4" width="14" height="12" rx="2.6" fill="none" stroke="currentColor" stroke-width="1.6"/><path class="ic-f" d="M7.6 8.1v4.6l3.8-2.3z" fill="currentColor" fill-opacity=".22" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>' },
-  choices: { line: 'Decisions as buttons, not paragraphs', icon: '<rect x="3.5" y="3.8" width="13" height="3.6" rx="1.8" fill="none" stroke="currentColor" stroke-width="1.5"/><rect class="ic-f" x="3.5" y="8.2" width="13" height="3.6" rx="1.8" fill="currentColor" fill-opacity=".22" stroke="currentColor" stroke-width="1.5"/><rect x="3.5" y="12.6" width="13" height="3.6" rx="1.8" fill="none" stroke="currentColor" stroke-width="1.5"/>' },
-  ahp: { line: 'Project state and handoffs in .ahp/', icon: '<path d="M4 8.5h9.5M10.5 5.5l3 3-3 3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path class="ic-f" d="M16 11.5H6.5M9.5 8.5l-3 3 3 3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' },
-  correo: { line: 'Send one email from your account', icon: '<rect x="3" y="5" width="14" height="10" rx="2.4" fill="none" stroke="currentColor" stroke-width="1.6"/><path class="ic-f" d="M3.6 6.2l6.4 4.6 6.4-4.6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>' },
-  github: { line: 'Pull requests, issues and CI, in the project', icon: '<circle cx="5.5" cy="4.8" r="1.8" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="5.5" cy="15.2" r="1.8" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M5.5 6.6v6.8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M14.5 13.4V8.2a2.6 2.6 0 0 0-2.6-2.6H9.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 3.6l-2 2 2 2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle class="ic-f" cx="14.5" cy="15.2" r="1.8" fill="currentColor" fill-opacity=".22" stroke="currentColor" stroke-width="1.6"/>' },
-};
-const MODULE_ANY = '<path d="M7.5 4.5h2.2a1.6 1.6 0 1 1 3.1 0H15v3.2a1.6 1.6 0 1 1 0 3.1V15h-3.2a1.6 1.6 0 1 0-3.1 0H5.5v-3.6a1.6 1.6 0 1 0 0-3.1V4.5z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>';
-const moduleFace = (item) => MODULE_FACES[item.id] ?? { line: null, icon: MODULE_ANY };
 function moduleIcon(item) {
   const face = moduleFace(item);
   const span = el('span', 'settings-icon');
@@ -13817,9 +14952,9 @@ function moduleTile(item) {
     top.append(sxChip(item.fixed ? t('Always') : item.kind === 'builtin' ? (on ? t('Turned on') : t('Turned off')) : on ? t('Installed') : t('Not installed'), on ? 'on' : ''));
   }
   tile.append(top);
-  const name = el('b', 'mods-name', t(item.name));
+  const name = el('b', 'mods-name', face.name ?? t(item.name));
   if (item.external) name.append(el('span', 'mods-dev', t('Your module')));
-  tile.append(name, el('span', 'mods-line', face.line ? t(face.line) : item.summary));
+  tile.append(name, el('span', 'mods-line', face.line ? t(face.line) : t(item.summary ?? '')));
   // The ones with a reading of their own say so: their card can float as a small app.
   if (face.window) tile.append(el('span', 'mods-app', t('Opens as a window')));
   const open = () => openModuleSheet(item.id);
@@ -13876,7 +15011,7 @@ function moduleGlance(item) {
 }
 // What it touches and what it adds to the composer, as blocks of the room instead of the card's folds.
 function moduleFacts(host, item) {
-  const touches = [...(item.creates ?? []).map((text) => [t('Writes'), text]), ...(item.requires ?? []).map((text) => [t('Needs'), text])];
+  const touches = [...(item.creates ?? []).map((text) => [t('Writes'), t(text)]), ...(item.requires ?? []).map((text) => [t('Needs'), t(text)])];
   if (touches.length) {
     const block = sxBlock(host, t('What it touches'), t('Everything this module writes or needs, said before it runs.'));
     for (const [tag, text] of touches) {
@@ -13901,17 +15036,19 @@ const sentenceCase = (text) => { const words = String(text ?? ''); return words
 function moduleSheet(host, item) {
   host.append(moduleGlance(item));
   if (item.kind !== 'builtin') {
-    const install = sxBlock(host, t('What it does'), item.summary, { className: 'mods-legacy' });
+    const install = sxBlock(host, t('What it does'), t(item.summary ?? ''), { className: 'mods-legacy' });
     install.rows.append(moduleCard(item));
     moduleFacts(host, item);
     return;
   }
   const on = moduleOn(item);
-  const about = sxBlock(host, t('What it does'), item.summary);
-  if (item.fixed) sxRow(about, t('Always on'), item.status?.detail ? sentenceCase(item.status.detail) : null);
+  const about = sxBlock(host, t('What it does'), moduleFace(item).summary ?? t(item.summary ?? ''));
+  if (item.fixed) sxRow(about, t('Always on'), item.status?.detail ? sentenceCase(t(item.status.detail)) : null);
   else {
     const blocked = !on && item.preflight && !item.preflight.ok;
-    sxRow(about, t('Active'), blocked ? item.preflight.problems.join(' ') : item.status?.detail ? sentenceCase(item.status.detail) : null, sxSwitch(on, async (next, box) => {
+    // A project's switch is that project's (src/module-scope.mjs); every project's is moved from Home.
+    const ownSwitch = item.scope && item.id !== 'ollama' && item.id !== 'bishop';
+    sxRow(about, ownSwitch ? t('On in this project') : t('Active'), blocked ? item.preflight.problems.join(' ') : item.status?.detail ? sentenceCase(t(item.status.detail)) : null, sxSwitch(on, async (next, box) => {
       box.disabled = true;
       try { await switchModule(item); } catch (error) { box.checked = !next; box.disabled = false; toast(error.message); }
     }, { disabled: blocked, label: item.name }), { off: blocked });
@@ -13985,7 +15122,7 @@ function moduleSheet(host, item) {
     const block = sxBlock(host, t('What your use taught'), `${t('Per agent and per kind of request: the lowest effort that was enough in your own turns, learned for no tokens. Below, a test that learns faster, for a price.')} ${t('When a lower level might be enough, MADRE offers to try it on a single message and watches how it goes; if it falls short, the next one goes back up.')}`, { className: 'mods-reading mods-intents' });
     intentsReading(block.rows);
   }
-  if (item.id === 'ollama') ollamaBlock(host, item);
+  if (item.id === 'ollama') { ollamaBlock(host, item); hardwareBlock(host, item.recommended?.hardware); }
 
   moduleFacts(host, item);
   if (item.external) {
@@ -13996,6 +15133,9 @@ function moduleSheet(host, item) {
   }
 }
 
+// What this computer can do with a local AI (public/hardware.js), drawn with this page's rows.
+const hardwareBlock = (host, fit) => drawHardware(host, fit, { el, sxBlock, sxRow, sxChip });
+
 // Ollama's local brain as rows: the server, its models, the roles it takes in this room.
 function ollamaBlock(host, item) {
   const info = item.ollama ?? { running: false, models: [], settings: {} };
@@ -14066,7 +15206,7 @@ function moduleDetail(item) {
   back.append(chevron('settings-back-icon'));
   back.addEventListener('click', () => openModuleSheet(null));
   title.append(back);
-  title.append(moduleIcon(item), el('b', null, t(item.name)));
+  title.append(moduleIcon(item), el('b', null, moduleFace(item).name ?? t(item.name)));
   if (item.external) title.append(el('span', 'mods-dev', t('Your module')));
   if (moduleFace(item).window) {
     const float = sxButton(t('Open as a window'), () => floatModule(item.id));
@@ -14159,7 +15299,7 @@ function openModuleWindow(id) {
     node.setAttribute('aria-label', t(item.name));
     const head = el('header', 'module-window-head custom-head');
     const title = el('div', 'module-window-title');
-    title.append(moduleIcon(item), el('b', null, t(item.name)));
+    title.append(moduleIcon(item), el('b', null, moduleFace(item).name ?? t(item.name)));
     const group = el('span', 'surface-modes');
     // The same keys as every window: arrange, then close.
     const arrange = el('button', 'surface-mode window');
@@ -14331,6 +15471,52 @@ function readyModules() {
     modulesWindow.observer.observe(node);
   }
 }
+// THE MARKET'S OFFER (2026-10-18, market.js). A message that asks for what a module does, while it
+// is off, gets one card under it: what would help, the key that turns it on here, the module's page
+// in the Market, and «No, thanks», which is kept. Read from the person's own words; once a page.
+const MARKET_DECLINED = 'pulse.market.declined';
+const marketShown = [];
+const marketDeclined = () => { try { return JSON.parse(localStorage.getItem(MARKET_DECLINED) ?? '[]') ?? []; } catch { return []; } };
+function offerModule(text) {
+  if (state.device) return;
+  const offer = marketOffer(text, modules.items ?? [], { declined: marketDeclined(), shown: marketShown });
+  if (!offer) return;
+  marketShown.push(offer.item.id);
+  setTimeout(() => {
+    const { item, says } = offer;
+    const card = el('div', 'system market-offer');
+    const mark = appIcon(item, 40);
+    const words = el('div', 'market-offer-words');
+    words.append(el('b', null, t(item.name)), el('span', null, t(says)));
+    const acts = el('div', 'market-offer-acts');
+    const switchable = moduleSwitches(item) && marketEntry(item.id).scope !== 'project';
+    const on = el('button', 'primary', switchable ? t('Turn on') : t('Install'));
+    on.type = 'button';
+    on.addEventListener('click', async () => {
+      if (!switchable) { openModules(); await refreshModules(); renderModules(); openModuleSheet(item.id); return; }
+      on.disabled = true;
+      try {
+        await switchModule(item);
+        card.replaceChildren(mark, el('div', 'market-offer-words', null));
+        card.lastChild.append(el('b', null, t(item.name)), el('span', null, t('Turned on. Ask again and the agents can use it.')));
+      } catch (error) { on.disabled = false; toast(error.message); }
+    });
+    const more = el('button', null, t('See it in the Market'));
+    more.type = 'button';
+    more.addEventListener('click', () => openRoomMarket(item.id));
+    const no = el('button', 'quiet', t('No, thanks'));
+    no.type = 'button';
+    no.addEventListener('click', () => {
+      try { localStorage.setItem(MARKET_DECLINED, JSON.stringify([...new Set([...marketDeclined(), item.id])])); } catch { /* asked again next page */ }
+      card.remove();
+    });
+    acts.append(on, more, no);
+    card.append(mark, words, acts);
+    document.querySelector('#thread-inner')?.append(card);
+    card.scrollIntoView?.({ block: 'nearest', behavior: reducedMotion() ? 'auto' : 'smooth' });
+  }, motion(700));
+}
+
 function openModules() {
   const node = modules.dialog;
   readyModules();
@@ -14358,6 +15544,47 @@ modules.button.addEventListener('click', async () => {
   renderModules();
 });
 modules.close.addEventListener('click', () => closeModules());
+// THE MARKET in a project (2026-10-18): the same store as Home's, full screen, where what you get
+// is for this project. A module that writes into the folder comes back here, to its card, so its
+// commands are read before they run.
+function openRoomMarket(focus = null) {
+  return openMarket({
+    where: 'room',
+    focus,
+    project: { name: projectDesignation() || t('this project') },
+    host: {
+      localAi: () => openSettingsOn('local'),
+      toast: (words) => toast(words),
+      installHere: async (item) => { openModules(); await refreshModules(); renderModules(); openModuleSheet(item.id); },
+      changed: async () => { await refreshModules(); if (modules.dialog.open) renderModules(); barModulesChanged(); },
+    },
+  });
+}
+{
+  const head = modules.dialog?.querySelector('.mods-head');
+  const add = head?.querySelector('#modules-add');
+  if (head && add) {
+    const market = el('button', 'sx-btn mods-market', t('Market'));
+    market.type = 'button';
+    market.title = t('Every module MADRE can add to this project');
+    market.addEventListener('click', () => openRoomMarket());
+    add.before(market);
+  }
+}
+// The Market's catalog from madre.run: the faces of the modules that came after this MADRE, and what
+// it updated on its own since, said once. Not on a phone: it has no Market.
+if (!state.device) void loadMarket({ toast: (words, action) => toast(words, { action }), open: (id) => openRoomMarket(id) }).then(() => { if (modules.dialog.open) renderModules(); });
+// The Market's address in a project: #mercado, or #mercado=<module> on its page.
+if (/^#mercado(=|$)/.test(globalThis.location?.hash ?? '')) {
+  const id = decodeURIComponent(location.hash.split('=')[1] ?? '') || null;
+  setTimeout(() => openRoomMarket(id), motion(400));
+}
+// Sent here from the Market with a module to install in this project: its card, open.
+if (/^#modulo=/.test(globalThis.location?.hash ?? '')) {
+  const id = decodeURIComponent(location.hash.split('=')[1] ?? '');
+  history.replaceState(null, '', location.pathname + location.search);
+  setTimeout(async () => { openModules(); await refreshModules(); renderModules(); openModuleSheet(id); }, motion(600));
+}
 // Escape closes the open module before the board, and the search before either.
 modules.dialog.addEventListener('cancel', (event) => {
   event.preventDefault();
@@ -14443,8 +15670,11 @@ function openCrewPop(anchor) {
     list.append(row);
   }
   pop.append(list);
-  const go = el('button', 'crew-go', t('⚙ AGENTS IN SETTINGS'));
+  const go = el('button', 'crew-go');
   go.type = 'button';
+  const gear = el('span', 'crew-go-icon');
+  gear.innerHTML = GEAR_ICON; // trusted: our own SVG string
+  go.append(gear, el('span', null, t('Agents in Settings')));
   go.addEventListener('click', () => {
     closeAgentPop();
     openSettings(true, { category: 'agents' });
@@ -14593,6 +15823,19 @@ function fillLoginAsk(box) {
     open.rel = 'noopener noreferrer';
     box.append(open);
   }
+  // A device sign-in (GitHub Copilot through OpenCode): the code is MADRE's to show, the page's
+  // to be typed into. Nothing comes back here; the sign-in ends on its own once it is typed.
+  if (loginNow.deviceCode) {
+    const said = el('div', 'login-device');
+    said.append(el('span', null, t('Type this code on that page:')), el('code', null, loginNow.deviceCode));
+    const copy = el('button', 'sx-btn', t('Copy'));
+    copy.type = 'button';
+    copy.addEventListener('click', async () => {
+      try { await navigator.clipboard.writeText(loginNow.deviceCode ?? ''); copy.textContent = t('Copied'); } catch { copy.textContent = t('Select it'); }
+    });
+    said.append(copy);
+    box.append(said);
+  }
   if (loginNow.asksForCode || loginNow.awaiting) {
     const form = el('form', 'login-code');
     const input = el('input');
@@ -14630,9 +15873,15 @@ function fillLoginAsk(box) {
 }
 // One door or two: Claude's CLI knows the subscription and the Console, and only the human can
 // say which account is paying. `null` is the single flow every other CLI has.
+// With a session, every agent offers the same «sign in again» as Codex. A single door (Gemini's
+// Google account) is that door; two doors (Claude's subscription and Console) are chosen after the
+// click, and which agent is choosing is kept here so a repaint does not fold the choice away.
+const choosingAccount = new Set();
 function loginDoors(agent, signedIn) {
   const methods = agent.login?.methods;
   if (!methods?.length) return [{ id: null, label: signedIn ? t('Sign in again') : t('Sign in'), note: agent.login?.note ?? '' }];
+  if (signedIn && methods.length === 1) return [{ id: methods[0].id, label: t('Sign in again'), note: methods[0].note ?? '', again: true }];
+  if (signedIn && !choosingAccount.has(agent.id)) return [{ id: null, label: t('Sign in again'), note: agent.login?.note ?? '', again: true, choose: true }];
   return methods.map((method) => ({ id: method.id, label: t(method.label), note: method.note ?? '' }));
 }
 async function startLogin(agentId, method = null) {
@@ -14643,6 +15892,7 @@ async function startLogin(agentId, method = null) {
   loginNow.agent = agentId;
   loginNow.method = method;
   loginNow.url = null;
+  loginNow.deviceCode = null;
   loginNow.awaiting = false;
   loginNow.asksForCode = Boolean(result.asksForCode);
   repaintLoginAsk();
@@ -14660,10 +15910,10 @@ function renderLoginEvent(event) {
   node.append(finished
     ? (ok ? t('@{agent} signed in', { agent }) + (session?.detail ? ` · ${session.detail}` : '') : t('@{agent} sign-in did not complete', { agent }) + (error ? ` · ${error}` : code ? t(' · exit {code}', { code }) : ''))
     : t('signing in @{agent} · {command}', { agent, command }));
-  if (finished) { state.sessions[agent] = session ?? state.sessions[agent]; renderOnboarding(); if (state.settingsOpen) void loadSettings(); }
+  if (finished) { state.sessions[agent] = session ?? state.sessions[agent]; renderAgents(); renderPicker(); renderOnboarding(); if (state.settingsOpen) void loadSettings(); }
   if (!replaying) {
-    if (finished) { if (loginNow.agent === agent) { loginNow.agent = null; loginNow.url = null; loginNow.awaiting = false; } }
-    else { loginNow.agent = agent; loginNow.method = event.payload.method ?? null; loginNow.url = null; loginNow.awaiting = false; loginNow.asksForCode = Boolean(state.agents.get(agent)?.login?.asksForCode); }
+    if (finished) { if (loginNow.agent === agent) { loginNow.agent = null; loginNow.url = null; loginNow.deviceCode = null; loginNow.awaiting = false; } }
+    else { loginNow.agent = agent; loginNow.method = event.payload.method ?? null; loginNow.url = null; loginNow.deviceCode = null; loginNow.awaiting = false; loginNow.asksForCode = Boolean(state.agents.get(agent)?.login?.asksForCode); }
     repaintLoginAsk();
   }
   state.lastSender = null;
@@ -14685,13 +15935,15 @@ function renderAgentInstall(event) {
 }
 
 function appendLoginOutput(event) {
-  const { agent, line, url } = event.payload;
+  const { agent, line, url, deviceCode } = event.payload;
   if (!replaying && loginNow.agent === agent) {
     // The address stays on screen instead of scrolling past: the heartbeat used to be the only
     // line left, so the one thing the human had to open was the first thing MADRE lost.
     if (url) loginNow.url = url;
-    if (looksLikeCodePrompt(line)) loginNow.awaiting = true;
-    if (url || looksLikeCodePrompt(line)) repaintLoginAsk();
+    // "Enter code: 3475-C193" is a code to show, not a question: no box to paste into.
+    if (deviceCode) loginNow.deviceCode = deviceCode;
+    else if (looksLikeCodePrompt(line)) loginNow.awaiting = true;
+    if (url || deviceCode || looksLikeCodePrompt(line)) repaintLoginAsk();
   }
   // The heartbeat («… still running · 42s · …») says one thing, how long: it takes the place of
   // the one before instead of piling up thirty lines over the address the person needs.
@@ -14726,6 +15978,8 @@ async function loadSettings() {
   settingsUI.data = await fetch('/api/settings').then((response) => response.json());
   if (settingsUI.data?.settings?.override) state.override = settingsUI.data.settings.override;
   state.sessions = settingsUI.data.sessions ?? state.sessions;
+  renderAgents();
+  renderPicker();
   // The server is the one that knows whether a sign-in is still waiting: a page reloaded in the
   // middle of one has to find the same address and the same box, not an empty card.
   readLoginState(settingsUI.data.login ?? null);
@@ -14736,6 +15990,7 @@ function readLoginState(live) {
   loginNow.agent = live?.agent ?? null;
   loginNow.method = live?.method ?? null;
   loginNow.url = live?.url ?? null;
+  loginNow.deviceCode = live?.deviceCode ?? null;
   loginNow.awaiting = Boolean(live?.awaitingCode);
   loginNow.asksForCode = Boolean(live?.asksForCode);
   repaintLoginAsk();
@@ -16032,25 +17287,28 @@ function connectionCard(agent) {
     // One button per account the CLI can sign in with. Which one is paying is the human's to say.
     for (const door of loginDoors(agent, signedIn)) {
       const login = sxButton(door.label, async () => {
+        if (door.choose) { choosingAccount.add(agent.id); renderSettings(); return; }
+        choosingAccount.delete(agent.id);
         login.disabled = true;
         try { await startLogin(agent.id, door.id); settingsUI.data.loggingIn = agent.id; renderSettings(); }
         catch (error) { toast(error.message || t('The sign-in could not start.')); login.disabled = false; }
-      }, { tone: signedIn ? null : 'primary', title: t(door.note || agent.login.note) });
+      }, { tone: (signedIn && !choosingAccount.has(agent.id)) || agent.key?.first ? null : 'primary', title: t(door.note || agent.login.note) });
       login.disabled = Boolean(settingsUI.data.loggingIn);
       acts.append(login);
     }
   }
   acts.append(recheck);
-  body.append(acts);
   const slot = el('div', 'sx-slot');
   // OpenCode's keys are its providers', added in the block under its settings, one row for all.
   if (agent.detected && agent.key && agent.id !== 'opencode') slot.append(keyForm(agent, { onDone: () => { void loadSettings(); renderOnboarding(); } }));
-  // Signed in, OpenCode's providers are added in its block below; the terminal is for a first sign-in.
-  if (agent.detected && agent.login && !agent.login.headless && !(agent.id === 'opencode' && session?.state === 'signed-in')) {
-    slot.append(el('p', 'sx-hint', t('To sign in, copy this into your Terminal app:')));
-    slot.append(commandBlock([agent.login.display, `# ${t(agent.login.note)}`]));
-  }
+  // Gemini's key is its way in (agent.key.first): the field before the Google door.
+  if (agent.key?.first && slot.firstChild) { const first = el('div', 'sx-slot'); first.append(slot.firstChild); body.append(first); }
+  body.append(acts);
   if (agent.detected && agent.login?.headless) slot.append(loginAskSlot(agent.id));
+  // The same, typed in a terminal, folded for whoever prefers it. Signed in, OpenCode's providers
+  // are added in its block below; its terminal is for a first sign-in.
+  const way = !agent.detected ? installTerminalWay(agent) : agent.id === 'opencode' && session?.state === 'signed-in' ? null : signInTerminalWay(agent);
+  if (way) slot.append(way);
   const log = state.loginLogs.get(agent.id) ?? [];
   if (log.length || busy) {
     const box = el('div', 'login-log');
@@ -16073,7 +17331,66 @@ function renderMemoryPanel(data) {
   const target = state.settingsTargets.memory;
   if (target?.isConnected) { target.replaceChildren(); drawMemory(target, data); }
 }
+// D-S17, also in AJUSTES › What it remembers: the notes other projects delivered here, waiting
+// for you, and what became of the last ones. The same rows as the card in the conversation.
+const deliveries = { pending: 0 };
+async function readDeliveries() {
+  try { return (await fetch('/api/enlace/inbox').then((response) => response.json())).notes ?? []; } catch { return null; }
+}
+function drawDelivered(host) {
+  const block = sxBlock(host, t('Delivered notes'), t('Notes other projects handed to this one. Each enters the memory only if it is accepted.'));
+  block.id = 'sx-delivered';
+  const fill = async () => {
+    const notes = await readDeliveries();
+    if (!block.isConnected) return;
+    block.rows.replaceChildren();
+    if (!notes) { sxRow(block, t('Could not read them.'), null); return; }
+    const waiting = notes.filter((note) => note.status === 'pending');
+    if (!waiting.length) sxRow(block, t('Nothing waiting'), notes.length ? t('{n} decided before.', { n: notes.length }) : t('No project has delivered notes here yet.'));
+    for (const note of waiting) {
+      const decide = (accept) => async () => {
+        try {
+          const response = await fetch('/api/enlace/inbox/decide', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: note.id, accept }) });
+          const result = await response.json().catch(() => ({}));
+          if (!response.ok) throw new Error(result.error ?? `HTTP ${response.status}`);
+        } catch (error) { toast(`${t('Diagnostics › ')}${error.message}`); }
+        void fill();
+        void refreshDeliveries();
+      };
+      const actions = el('div', 'sx-chips');
+      actions.append(sxButton(t('Accept'), decide(true), { tone: 'primary' }), sxButton(t('Decline'), decide(false)));
+      sxRow(block, `${kindWord(note.kind)} · ${note.text}`, [t('Delivered by {room}{agent}', { room: note.name, agent: note.agent ? ` · @${note.agent}` : '' }), note.why ? t('Why: {why}', { why: note.why }) : null].filter(Boolean).join(' · '), actions, { stack: true });
+    }
+  };
+  void fill();
+}
+// The bar says how many wait, and goes to them.
+async function refreshDeliveries() {
+  const notes = await readDeliveries();
+  if (!notes) return;
+  deliveries.pending = notes.filter((note) => note.status === 'pending').length;
+  let pill = document.querySelector('#inbox-pill');
+  if (!pill) {
+    const anchor = document.querySelector('#stop-all');
+    if (!anchor) return;
+    // Shaped like the handoff pill beside it: an icon and its words, never squeezed to a dot.
+    pill = el('button', 'stop-all handoff-pill inbox-pill');
+    pill.id = 'inbox-pill';
+    pill.type = 'button';
+    pill.innerHTML = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3.2 11.2 5.4 4.6c.2-.6.8-1 1.4-1h6.4c.6 0 1.2.4 1.4 1l2.2 6.6v3.6c0 .9-.7 1.6-1.6 1.6H4.8c-.9 0-1.6-.7-1.6-1.6z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M3.4 11.2h3.8l1 2h3.6l1-2h3.8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg><span class="handoff-words"></span><span class="inbox-count"></span>'; // trusted: our own SVG string
+    pill.addEventListener('click', () => openSettingsOn('memory', { anchor: 'sx-delivered' }));
+    anchor.before(pill);
+  }
+  pill.hidden = state.device || !deliveries.pending;
+  const said = deliveries.pending === 1 ? t('1 note to accept') : t('{n} notes to accept', { n: deliveries.pending });
+  pill.querySelector('.handoff-words').textContent = said;
+  // Its short form, for a bar too narrow for the words (barFit, bar-tight): the tray and the number.
+  pill.querySelector('.inbox-count').textContent = String(deliveries.pending);
+  pill.setAttribute('aria-label', said);
+  pill.title = t('Notes other projects delivered here, waiting for you');
+}
 function drawMemory(host, data) {
+  drawDelivered(host);
   const mem = data?.settings?.memory;
   if (!mem) { sxBlock(host, t('What it remembers'), t('This project has no memory yet.')); return; }
   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 })); } };
@@ -16150,28 +17467,60 @@ function drawMemory(host, data) {
   const recipe = el('details', 'sx-more');
   recipe.append(el('summary', null, t('Step by step')));
   let platform = /Mac/i.test(navigator.platform ?? '') || !/Linux/i.test(navigator.userAgent ?? '') ? 'mac' : 'linux';
+  // The size to train: the largest this computer trains and then runs, unless the human picks
+  // another (to train it on a larger machine, say). Every size is offered; the note says what fits.
+  let size = null;
+  let measured = false;
   const steps = el('ol', 'sx-steps');
   const pickRow = el('div', 'sx-train-platform');
   const platformNote = el('p', 'sx-hint');
-  recipe.append(pickRow, platformNote, steps);
+  const sizeRow = el('div', 'sx-train-platform');
+  const sizeNote = el('p', 'sx-hint');
+  recipe.append(pickRow, platformNote, sizeRow, sizeNote, steps);
   train.append(recipe);
   let lastPayload = null;
   const drawPlatform = () => {
     pickRow.replaceChildren(sxSeg([{ value: 'mac', text: t('Mac with Apple chip') }, { value: 'linux', text: t('Linux with NVIDIA') }], platform, (value) => { platform = value; showDataset(lastPayload); }, { label: t('Your computer') }));
     platformNote.textContent = platform === 'mac'
-      ? t('Any Mac with an M chip. 16 GB of memory is enough for the small model.')
+      ? t('Any Mac with an M chip. Its memory decides the size you can train, below.')
       : t('Experimental: MLX runs on Linux with an NVIDIA card (CUDA 12, compute capability 7.5 or newer, glibc 2.35, Python 3.10), but mlx-lm only promises Apple chips. Step 2 checks the card first.');
   };
+  const drawSize = (fit) => {
+    const models = fit?.models ?? [];
+    if (!models.length) { sizeRow.replaceChildren(); sizeNote.textContent = ''; return null; }
+    const chosen = models.find((model) => model.id === size) ?? models.find((model) => model.id === fit.recommended?.train?.id) ?? models[1] ?? models[0];
+    sizeRow.replaceChildren(sxSeg(models.map((model) => ({ value: model.id, text: model.label.replace(/^Qwen2\.5\s*/, ''), title: model.train === 'yes' ? t('Trains on this computer') : t('Needs {gb} GB to train', { gb: model.trainGb }) })), chosen.id, (value) => { size = value; showDataset(lastPayload); }, { label: t('Model size') }));
+    const here = hardwareLine(fit.hardware);
+    sizeNote.textContent = chosen.train === 'yes'
+      ? t('{model} trains on this computer ({here}). Needs about {disk} GB free on disk.', { model: chosen.label, here, disk: Math.ceil(chosen.params * 5.5) + 2 })
+      : fit.accelerated
+        ? t('{model} needs {gb} GB to train and this computer has {have} GB: train it on a larger one, or pick a smaller size.', { model: chosen.label, gb: chosen.trainGb, have: fit.usableGb })
+        : t('This computer has no Apple chip or NVIDIA card to train with ({here}). The recipe is the one for a computer that has one.', { here });
+    return chosen;
+  };
   const showDataset = (payload) => {
     lastPayload = payload;
     const d = payload?.dataset;
     const exported = d ? t('Last export {when} · {train} to train · {valid} to check', { 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 }) : t('No trained model yet.');
-    datasetHint.textContent = `${exported} ${trained}`;
-    drawPlatform();
+    // D-S15: in Home, which projects the Coordinator learned from this time, and how.
+    const sources = (d?.linked ?? []).map((one) => (one.source === 'missing'
+      ? t('{room}: did not answer and nothing was kept', { room: one.name })
+      : one.source === 'kept'
+        ? t('{room}: {n} notes from the last time it answered', { room: one.name, n: one.notes })
+        : t('{room}: {n} notes', { room: one.name, n: one.notes })));
+    datasetHint.textContent = `${exported} ${trained}${sources.length ? ` ${t('Learned from your projects: {list}.', { list: sources.join(' · ') })}` : ''}`;
     const info = payload?.training;
+    // The first reading sets the recipe for this computer: an NVIDIA card goes the Linux way.
+    if (!measured && info?.fit?.hardware) { measured = true; if (info.fit.hardware.accelerator === 'nvidia') platform = 'linux'; else if (info.fit.hardware.accelerator === 'apple') platform = 'mac'; }
+    drawPlatform();
+    const chosen = drawSize(info?.fit);
     steps.replaceChildren();
     if (!info) { steps.append(el('li', 'sx-hint', t('The training recipe is unavailable.'))); return; }
+    // A base trained in 4 bits (3B and up) is joined back at full precision, so llama.cpp can read
+    // it, and Ollama shrinks it to 4 bits again; the small ones stay at 8.
+    const base = chosen?.base ?? info.baseModel;
+    const quantized = Boolean(chosen?.quantized);
     const quote = (path) => `"${path.replace(/\/$/, '')}"`;
     const venv = 'source ~/.madre-train/bin/activate';
     const setup = platform === 'mac'
@@ -16186,11 +17535,40 @@ function drawMemory(host, data) {
     };
     step(t('Export the training data'), t('Use «Export» above. Do it again whenever the project has grown.'));
     step(t('Prepare Python, once'), platform === 'mac' ? t('A separate environment with mlx-lm, so nothing else on your computer changes.') : t('A separate environment with MLX for CUDA and mlx-lm. It must print «CUDA: True»; if not, stop here.'), setup);
-    step(t('Train · base {model} for {gb} GB', { model: info.baseModel, gb: info.memoryGb }), t('From 10 to 40 minutes. It learns from the exported pairs and leaves an adjustment («adapters»).'), `${venv} && bash ${quote(`${info.recipeDir}train.sh`)} ${quote(info.roomDir)} ${info.baseModel}`);
-    step(t('Join the adjustment with the base model'), null, `${venv} && cd ${quote(info.roomDir)} && mlx_lm.fuse --model ${info.baseModel} --adapter-path adapters --save-path fused`);
-    step(t('Turn it into a file Ollama reads (GGUF)'), t('The first time, it downloads llama.cpp\'s converter.'), `${venv} && cd ${quote(info.roomDir)} && git clone --depth 1 https://github.com/ggml-org/llama.cpp && pip install -r llama.cpp/requirements.txt && python3 llama.cpp/convert_hf_to_gguf.py fused --outfile madre.gguf --outtype q8_0`);
-    step(t('Register it in Ollama as {model}', { model: info.modelName }), t('@madre switches to it at the next recheck of Local AI.'), `cd ${quote(info.roomDir)} && cp ${quote(`${info.recipeDir}Modelfile`)} . && ollama create ${info.modelName} -f Modelfile`);
+    step(t('Train · base {model}', { model: chosen?.label ?? base }), (chosen?.params ?? 0) > 3 ? t('An hour or more, depending on the size and on how many pairs there are. It learns from the exported pairs and leaves an adjustment («adapters»).') : t('From 10 to 40 minutes. It learns from the exported pairs and leaves an adjustment («adapters»).'), `${venv} && bash ${quote(`${info.recipeDir}train.sh`)} ${quote(info.roomDir)} ${base}`);
+    step(t('Join the adjustment with the base model'), null, `${venv} && cd ${quote(info.roomDir)} && mlx_lm.fuse --model ${base} --adapter-path adapters --save-path fused${quantized ? ' --de-quantize' : ''}`);
+    step(t('Turn it into a file Ollama reads (GGUF)'), t('The first time, it downloads llama.cpp\'s converter.'), `${venv} && cd ${quote(info.roomDir)} && git clone --depth 1 https://github.com/ggml-org/llama.cpp && pip install -r llama.cpp/requirements.txt && python3 llama.cpp/convert_hf_to_gguf.py fused --outfile madre.gguf --outtype ${quantized ? 'f16' : 'q8_0'}`);
+    step(t('Register it in Ollama as {model}', { model: info.modelName }), quantized ? t('Ollama keeps it in 4 bits, the size the table counts on. @madre switches to it at the next recheck of Local AI.') : t('@madre switches to it at the next recheck of Local AI.'), `cd ${quote(info.roomDir)} && cp ${quote(`${info.recipeDir}Modelfile`)} . && ollama create ${info.modelName} -f Modelfile${quantized ? ' --quantize q4_K_M' : ''}`);
     step(t('Try it before trusting it'), t('Ask @madre ten things the project decided and five it never discussed. It should get the first right and say it never discussed the others; if it makes things up, remove it with «ollama rm {model}» and train with more pairs.', { model: info.modelName }));
+    if (state.salas) drawExam();
+  };
+  // D-S18 · in Home, the exam the Coordinator's local model passes before it gives orders: the
+  // same test as the step above, run by MADRE, with a fixed bar and kept for that exact model.
+  const exam = el('div', 'sx-exam');
+  if (state.salas) train.append(exam);
+  let examTimer = null;
+  const drawExam = async () => {
+    const reading = await fetch('/api/x/bishop/exam').then((response) => (response.ok ? response.json() : null)).catch(() => null);
+    exam.replaceChildren();
+    if (!reading) return;
+    const last = reading.exam;
+    const part = (key) => `${last?.scores?.[key]?.passed ?? 0}/${last?.scores?.[key]?.total ?? 0}`;
+    const said = reading.running ? t('Examining {model}… a local model answers one question at a time; it takes a few minutes.', { model: reading.model?.name ?? '' })
+      : !last ? t('Not examined yet. Until it passes, the Coordinator only answers with @madre.')
+        : reading.holds ? t('{model} passed on {date}: {known} about the projects, {unknown} said it never discussed, {orders} orders. The Coordinator gives orders with it up to #1.', { model: last.model, date: new Date(last.at).toLocaleDateString(language()), known: part('known'), unknown: part('unknown'), orders: part('orders') })
+          : last.passed ? t('{model} passed, but the model in use is another one now ({now}). Examine it again.', { model: last.model, now: reading.model?.name ?? '—' })
+            : t('{model} did not pass on {date}: {known} about the projects, {unknown} said it never discussed, {orders} orders.{why}', { model: last.model, date: new Date(last.at).toLocaleDateString(language()), known: part('known'), unknown: part('unknown'), orders: part('orders'), why: last.why?.length ? ` ${last.why.map((one) => t(one)).join(' · ')}` : '' });
+    const run = sxButton(t('Examine'), async () => {
+      run.disabled = true;
+      const response = await fetch('/api/x/bishop/exam', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' }).catch(() => null);
+      const result = await response?.json().catch(() => ({}));
+      if (!response?.ok) { toast(`${t('Diagnostics › ')}${result?.error ?? t('could not start')}`); run.disabled = false; return; }
+      void drawExam();
+    }, { title: t('Questions about the projects, questions about things nobody discussed, and orders: the bar is fixed and the result is kept for this model') });
+    run.disabled = Boolean(reading.running) || !reading.model;
+    sxRow(exam, t('Exam before giving orders'), said, run);
+    clearTimeout(examTimer);
+    if (reading.running) examTimer = setTimeout(() => { if (exam.isConnected) void drawExam(); }, 8000);
   };
   fetch('/api/dataset').then((response) => response.json()).then(showDataset).catch(() => showDataset(null));
 }
@@ -16699,7 +18077,33 @@ nostromo.covered = () => {
 };
 nostromo.onClang = () => { const frame = document.querySelector('#nostromo .nostromo-frame'); frame?.classList.remove('shake'); void frame?.offsetWidth; frame?.classList.add('shake'); };
 // The physics and the painters, closed over this scene (nostromo-engine.js).
-const { buildNodes, sizeNostromo, stepNostromo, focusNostromo, projectNostromo, fitNostromo, drawNostromo, toScreen, toWorld, nostromoLive, nostromoAt, beginImplosion } = createNostromo(nostromo);
+const { buildNodes, sizeNostromo, stepNostromo, focusNostromo, projectNostromo, fitNostromo, drawNostromo, toScreen, toWorld, nostromoLive, nostromoAt, beginImplosion, setNeural } = createNostromo(nostromo);
+// Neural mode (public/neural.js): the same map drawn as the neurons of a brain, chosen from its head.
+// The choice is the person's, shared with Home's Projects map (looks.json, `pulse.neural`); when this
+// machine does not give the map its frames, the key invites to try it, once a session.
+nostromo.neuralKey = document.querySelector('#nostromo-neural');
+nostromo.neural = neuralChosen();
+if (nostromo.neuralKey) {
+  neuralKey(nostromo.neuralKey);
+  paintNeuralKey(nostromo.neuralKey, nostromo.neural);
+  nostromo.neuralKey.addEventListener('click', () => setNostromoNeural(!nostromo.neural));
+}
+function setNostromoNeural(on) {
+  setNeural(on, performance.now() / 1000);
+  rememberNeural(on);
+  paintNeuralKey(nostromo.neuralKey, on);
+  nostromo.dialog?.querySelector('.neural-invite')?.remove();
+  pushLooks();
+}
+function syncNostromoNeural() {
+  const want = neuralChosen();
+  if (Boolean(nostromo.neural) === want) return;
+  setNeural(want, performance.now() / 1000);
+  paintNeuralKey(nostromo.neuralKey, want);
+}
+nostromo.strain = createStrain({
+  onStrain: () => { if (!nostromo.neural && !state.device) inviteNeural({ key: nostromo.neuralKey, host: nostromo.dialog, map: 'memory', onTry: () => setNostromoNeural(true) }); },
+});
 // One frame of the map on demand, what startNostromo's loop does sixty times a second: for whoever
 // measures it (`__pulse.nostromoTick`), without waiting for the screen.
 function nostromoTick(now) {
@@ -17299,15 +18703,18 @@ function startNostromo() {
   if (!nostromo.cage?.closed) nostromo.cage = null;
   window.addEventListener('resize', sizeNostromo);
   nostromo.last = performance.now();
+  nostromo.strain?.reset();
   const frame = (now) => {
     const dt = Math.min(48, now - nostromo.last) / 16;
     nostromo.last = now;
     const clock = now / 1000;
+    const started = performance.now();
     stepNostromo(dt, clock);
     focusNostromo(dt, clock);
     projectNostromo();
     fitNostromo();
     drawNostromo(clock);
+    nostromo.strain?.frame(performance.now() - started, now);
     nostromo.raf = requestAnimationFrame(frame);
   };
   nostromo.raf = requestAnimationFrame(frame);
@@ -18453,11 +19860,12 @@ settingsUI.button?.addEventListener('click', () => openSettingsOn('release', { p
    bar, and in which order, is this browser's own: a convenience, kept in localStorage. */
 const BAR_KEY = 'pulse.barItems';
 const BAR_FIXED = 'settings';
-const BAR_DEFAULT = ['salas', 'macroverso', 'crew', 'modules', 'mother', 'nostromo', 'reload', 'servers', 'finder', 'phone'];
+const BAR_DEFAULT = ['salas', 'macroverso', 'crew', 'code', 'modules', 'mother', 'nostromo', 'reload', 'servers', 'finder', 'phone'];
 // The keys that are in the markup. The crew is two elements — five spheres when there is room, one
 // button when there is not — and one key: taking it off takes both.
 const BAR_BUILT = {
   crew: { nodes: ['#agents', '#agents-compact'], name: () => t('Agents') },
+  code: { nodes: ['#code-button'], name: () => t('Code') },
   modules: { nodes: ['#modules-button'], name: () => t('Modules') },
   mother: { nodes: ['#mother-button'], name: () => t('Diagnostics') },
   nostromo: { nodes: ['#nostromo-bar'], name: () => t('Memory map') },
@@ -18472,6 +19880,8 @@ const BAR_CONTEXTUAL = ['#steps-pill', '#tour-pill-slot', '#handoff-pill', '#upd
 // A module's name before the board has answered; once it has, the module says its own.
 const BAR_MODULE_NAMES = { ash: 'Token saver', ollama: 'Local AI', intents: 'Suggested effort' };
 const BAR_MINUS = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4.5 8h7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
+// Its mirror on a key that can still go on the bar, in the card under it.
+const BAR_PLUS = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 4.5v7M4.5 8h7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
 const barKit = {
   node: document.querySelector('#bar'),
   order: [],
@@ -18491,7 +19901,7 @@ const barKit = {
 
 // Keys that joined the bar after a person arranged theirs. Each is put at the end once, so it can
 // be found; taken off after that, it stays off.
-const BAR_JOINED = ['phone', 'salas', 'macroverso'];
+const BAR_JOINED = ['phone', 'salas', 'macroverso', 'code'];
 // The MACROVERSO: an orbit, a sun and two worlds. Only the room of SALAS carries the key.
 const MACROVERSO_ICON = '<ellipse cx="10" cy="10" rx="8.2" ry="3.6" fill="none" stroke="currentColor" stroke-width="1.4" opacity=".6"/><circle cx="10" cy="10" r="2.2" fill="currentColor"/><circle cx="16.4" cy="8.6" r="1.5" fill="currentColor"/><circle cx="4.2" cy="11.6" r="1.1" fill="currentColor" opacity=".7"/>';
 // SALAS: three rooms of one Mac, and what joins them.
@@ -18505,7 +19915,8 @@ function barStored() {
       const met = JSON.parse(localStorage.getItem('pulse.barMet') ?? '[]');
       const fresh = BAR_JOINED.filter((id) => !met.includes(id));
       if (fresh.length) {
-        for (const id of fresh) if (!list.includes(id)) list.push(id);
+        // CODE stands beside the agents, where it is seen first; the others join at the end.
+        for (const id of fresh) if (!list.includes(id)) { if (id === 'code' && list.includes('crew')) list.splice(list.indexOf('crew') + 1, 0, id); else list.push(id); }
         localStorage.setItem(BAR_KEY, JSON.stringify(list));
         localStorage.setItem('pulse.barMet', JSON.stringify([...met, ...fresh]));
       }
@@ -18522,6 +19933,8 @@ function barCatalogue() {
   for (const [id, spec] of Object.entries(BAR_BUILT)) {
     // Reload lives in the second bar on the Mac; it is not a key of this one there.
     if (id === 'reload' && homeOn()) continue;
+    // The code workspace docks beside the conversation: a phone has no room beside it.
+    if (id === 'code' && state.device) continue;
     const nodes = spec.nodes.map((query) => document.querySelector(query)).filter(Boolean);
     if (nodes.length) out.set(id, { id, name: spec.name(), nodes });
   }
@@ -18634,6 +20047,7 @@ function barPlace() {
 // «‹ Salas» at its start. The three are not keys you place, so the bar's card never offers them.
 const HOME_ICON = '<path d="M3.4 9.2 10 3.6l6.6 5.6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path class="ic-f" d="M5.2 7.9v7.5a1.2 1.2 0 0 0 1.2 1.2h2.3v-4a1.3 1.3 0 0 1 2.6 0v4h2.3a1.2 1.2 0 0 0 1.2-1.2V7.9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>';
 const homeOn = () => !state.device && Boolean(document.querySelector('#bar-home'));
+let homePower = null;
 function homeBar() {
   const home = document.querySelector('#bar-home');
   const bar = document.querySelector('#bar');
@@ -18670,6 +20084,10 @@ function homeBar() {
     key.classList.remove('bar-off', 'bar-overflow');
     if (key.parentNode !== home) home.append(key);
   }
+  // Last, after the settings: turning MADRE off (public/power.js). On the Mac only.
+  if (!homePower) { homePower = powerKey('tree-button'); homePower.id = 'power-button'; }
+  labelPowerKey(homePower);
+  if (homePower.parentNode !== home || (home.lastElementChild && home.lastElementChild !== homePower)) home.append(homePower);
   home.hidden = false;
   bar.classList.add('with-home');
   // The bar beside it leaves exactly its width free, measured whenever it changes (fonts, language).
@@ -18905,6 +20323,8 @@ function barLayout() {
     else if (on) { const key = barKit.extras.get(id); key.title = entry.name; key.setAttribute('aria-label', entry.name); }
   }
   for (const [id, node] of barKit.extras) if (!barKit.order.includes(id)) { node.remove(); barKit.extras.delete(id); }
+  // A key the catalogue leaves out on this device (CODE on a phone) is not drawn at all.
+  for (const [id, spec] of Object.entries(BAR_BUILT)) if (!catalogue.has(id) && id !== 'reload') for (const query of spec.nodes) document.querySelector(query)?.classList.add('bar-off');
   barPlace();
   if (barKit.editing) { barBadges(); barDrawCard(); }
   barFit();
@@ -18941,6 +20361,7 @@ function barSpills(bar) {
 function barFit() {
   const bar = barKit.node;
   if (!bar || !barKit.more || typeof bar.getBoundingClientRect !== 'function') return;
+  bar.classList?.remove('bar-tight');
   for (const node of bar.querySelectorAll?.('.bar-overflow') ?? []) node.classList.remove('bar-overflow');
   barKit.hidden = [];
   barKit.more.hidden = true;
@@ -18956,6 +20377,9 @@ function barFit() {
   }
   if (!barKit.hidden.length) { barKit.more.hidden = true; barCloseMore(); }
   else if (barKit.moreCard && !barKit.moreCard.hidden) barDrawMore();
+  // Everything that can go is behind «More» and the project's name is still cut: the pills that
+  // stay (notes to accept) take their short form, so the name reads whole.
+  if (barSpills(bar)) bar.classList?.add('bar-tight');
 }
 function barDrawMore() {
   const catalogue = barCatalogue();
@@ -18990,6 +20414,20 @@ function barDrawMore() {
   card.style.left = `${Math.round(Math.max(16, Math.min(window.innerWidth - width - 16, key.right - width)))}px`;
   barKit.more.setAttribute('aria-expanded', 'true');
 }
+// The bar folds its keys into 34 px squares at 980 px of its own width (styles.css, @container
+// bar); the house's keys sit in a bar of their own and fold with it, so one row never holds two
+// sizes. The conversation's width goes to the root for what the window's width cannot tell.
+function roomWidth() {
+  const bar = barKit.node;
+  if (!bar || typeof getComputedStyle !== 'function') return;
+  const style = getComputedStyle(bar);
+  const inner = bar.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+  document.querySelector('#bar-home')?.classList.toggle('keys-square', inner > 0 && inner <= 980);
+  const room = threadBox?.getBoundingClientRect?.().width ?? 0;
+  const root = document.documentElement;
+  root?.classList?.toggle('room-720', room > 0 && room <= 720);
+  root?.classList?.toggle('room-680', room > 0 && room <= 680);
+}
 function barCloseMore() {
   if (barKit.moreCard) barKit.moreCard.hidden = true;
   barKit.more?.setAttribute('aria-expanded', 'false');
@@ -19008,6 +20446,8 @@ function barSave(order) {
 }
 // The board answered: modules of yours can take their places, and their names are their own.
 function barModulesChanged() {
+  // A module's key beside the version comes and goes with the module (attribution.js).
+  void drawColophonKeys(document.querySelector('#colophon'));
   if (modules.items?.length) barKit.modulesSeen = true;
   barLayout();
 }
@@ -19115,10 +20555,14 @@ function barDrawCard() {
     document.body.append(card);
   }
   const card = barKit.card;
+  card.classList.add('bar-add');
+  // The title and, under it, how the bar is arranged; Done at their right. The keys below.
   const head = el('header', 'bar-card-head');
   const done = sxButton(t('Done'), () => barEdit(false), { tone: 'primary' });
   done.classList.add('bar-done');
-  head.append(el('h3', null, t('Add to the bar')), done);
+  const titles = el('div', 'bar-card-titles');
+  titles.append(el('h3', null, t('Add to the bar')), el('p', 'bar-card-sub', t('Drag a key to move it. Right-click the bar to come back here.')));
+  head.append(titles, done);
   const grid = el('div', 'bar-grid');
   for (const [id, entry] of barCatalogue()) {
     if (id === BAR_FIXED || barKit.order.includes(id)) continue;
@@ -19131,12 +20575,16 @@ function barDrawCard() {
     // The crew's own drawing is on its one-button form, not on the spheres.
     const drawn = [...(entry.nodes ?? [])].reverse().map((node) => node.querySelector('svg')).find(Boolean)?.cloneNode?.(true);
     if (drawn) { drawn.removeAttribute?.('class'); glyph.append(drawn); } else if (entry.icon) glyph.innerHTML = `<svg viewBox="0 0 20 20" aria-hidden="true">${entry.icon}</svg>`; // trusted: our own SVG strings
+    // The «+» on its corner, the mirror of the «−» on the keys of the bar.
+    const plus = el('i', 'bar-tile-plus');
+    plus.innerHTML = BAR_PLUS; // trusted: our own SVG string
+    glyph.append(plus);
     tile.append(glyph, el('span', 'bar-tile-name', entry.name));
     tile.addEventListener('click', () => barAdd(id));
     grid.append(tile);
   }
   const focused = card.contains?.(document.activeElement) ? document.activeElement?.dataset?.barItem ?? 'done' : null;
-  card.replaceChildren(head, grid.children.length ? grid : el('p', 'bar-card-empty', t('Everything is already on the bar.')), el('p', 'bar-card-hint', t('Drag a key to move it. Right-click the bar to come back here.')));
+  card.replaceChildren(head, grid.children.length ? grid : el('p', 'bar-card-empty', t('Everything is already on the bar.')));
   card.hidden = false;
   barPlaceCard();
   // Focus stays in the card: on the tile that took the place of the one just used, or on Done.
@@ -19199,7 +20647,7 @@ function barDragStart(event, id) {
   if (event.button !== 0 || barKit.drag) return;
   const node = barShown(id);
   if (!node || event.target?.closest?.('.bar-badge')) return;
-  const drag = { id, node, x0: event.clientX, base: 0, moved: false };
+  const drag = { id, node, x0: event.clientX, scroll0: barKit.node.scrollLeft || 0, base: 0, moved: false };
   barKit.drag = drag;
   drag.move = (moved) => barDragMove(moved);
   drag.up = () => barDragEnd({ save: true });
@@ -19210,13 +20658,27 @@ function barDragStart(event, id) {
 function barDragMove(event) {
   const drag = barKit.drag;
   if (!drag) return;
-  const dx = event.clientX - drag.x0;
+  const bar = barKit.node;
   if (!drag.moved) {
-    if (Math.abs(dx) < 5) return;
+    if (Math.abs(event.clientX - drag.x0) < 5) return;
     drag.moved = true;
     drag.base = drag.node.offsetLeft;
     drag.node.classList.add('bar-lifted');
   }
+  // Near an edge of a bar wider than its box, the bar runs under the key (styles.css: while it is
+  // being arranged it scrolls sideways instead of spilling out of its box).
+  const box = bar.getBoundingClientRect?.();
+  if (box && bar.scrollWidth > bar.clientWidth + 1) {
+    const edge = 36;
+    if (event.clientX < box.left + edge) bar.scrollLeft -= 10;
+    else if (event.clientX > box.right - edge) bar.scrollLeft += 10;
+  }
+  // The key is held between the first and the last key of the bar: it never leaves it.
+  const placed = barKit.order.map((one) => barShown(one)).filter(Boolean);
+  const lo = Math.min(...placed.map((node) => node === drag.node ? drag.base : node.offsetLeft));
+  const hi = Math.max(...placed.map((node) => (node === drag.node ? drag.base : node.offsetLeft) + node.offsetWidth)) - drag.node.offsetWidth;
+  const wanted = drag.base + (event.clientX - drag.x0) + ((bar.scrollLeft || 0) - drag.scroll0);
+  const dx = Math.min(Math.max(wanted, lo), Math.max(lo, hi)) - drag.base;
   const centre = drag.base + dx + drag.node.offsetWidth / 2;
   const others = barKit.order.filter((one) => one !== drag.id).map((one) => [one, barShown(one)]).filter(([, node]) => node);
   const past = others.find(([, node]) => centre < node.offsetLeft + node.offsetWidth / 2)?.[0] ?? null;
@@ -19264,6 +20726,11 @@ if (barKit.node) {
   let fitting = 0;
   const refit = () => { cancelAnimationFrame?.(fitting); fitting = requestAnimationFrame?.(() => barFit()) ?? 0; };
   window.addEventListener?.('resize', refit);
+  // The bar is as wide as the room, not the window (2026-10-17): the code workspace docked beside
+  // the conversation narrows it with the window unmoved, and MODULES ended up under the house's
+  // keys. Measured whenever the bar's own width changes: what fits, the house's keys at the size of
+  // the bar's, and the room's width for the rules that read it (styles.css, room-720 · room-680).
+  if (typeof ResizeObserver === 'function') new ResizeObserver(() => { roomWidth(); refit(); }).observe(barKit.node);
   // A key that comes or goes on its own (STOP ALL while agents work, a pill) changes what fits, and
   // so does the bar's own font arriving. «More» is left out: it is the fitting's own doing.
   if (typeof MutationObserver === 'function') {
@@ -19276,6 +20743,14 @@ if (barKit.node) {
   // Right-click on the bar between keys, while it is open, closes it, as a second right-click on a
   // key does. While it is open a key does not do what it does: it is being placed, not pressed.
   barKit.node.addEventListener('contextmenu', (event) => { if (barKit.editing && !event.barHandled) { event.preventDefault(); barEdit(false); } });
+  // Being arranged, a bar wider than its box scrolls sideways; a mouse's wheel only turns up and
+  // down, so it is turned into sideways there.
+  barKit.node.addEventListener('wheel', (event) => {
+    const bar = barKit.node;
+    if (!barKit.editing || bar.scrollWidth <= bar.clientWidth + 1 || Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+    bar.scrollLeft += event.deltaY;
+    event.preventDefault();
+  }, { passive: false });
   barKit.node.addEventListener('click', (event) => {
     if (!barKit.editing && !barKit.swallow) return;
     if (barKit.swallow) { barKit.swallow = false; event.preventDefault(); event.stopPropagation(); return; }