@jossuealcala/madre 1.0.0 → 1.0.1

package/public/salas-mac.js

@@ -40,6 +40,7 @@ let data = null;
 let macro = null;              // the macroverse, while it is open
 let welcomed = false;          // the first-run wizard was offered this visit
 let agentsSeen = null;         // what /api/settings said of the agents, last time it was asked
+let localSeen = null;          // what /api/salas/local-ai said: the mode and which projects use the local AI
 let versionSeen = null;        // what /api/version said of MADRE, last time it was asked
 let work = null;               // MADRE's summary of the last work (/api/salas/work)
 let decisions = null;          // the recent decisions of the open rooms (/api/salas/decisions)
@@ -78,7 +79,7 @@ const TUNES = {
 const HOME_LOOKS = {
   cards: { key: 'pulse.home.cards', values: ['full', 'compact'], words: { full: () => t('With their last conversation'), compact: () => t('Name and state only') } },
   text: { key: 'pulse.home.text', values: ['comfortable', 'larger', 'smaller'], words: { comfortable: () => t('Comfortable'), larger: () => t('Larger'), smaller: () => t('Smaller') } },
-  order: { key: 'pulse.home.order', values: ['attention', 'name', 'recent'], words: { attention: () => t('Attention'), name: () => t('Name'), recent: () => t('Recent') } },
+  order: { key: 'pulse.home.order', values: ['attention', 'name', 'recent', 'mine'], words: { attention: () => t('Attention'), name: () => t('Name'), recent: () => t('Recent'), mine: () => t('Your order') } },
 };
 const LOOK_KEYS = ['pulse.theme', 'pulse.accent', 'pulse.wallpaper', 'pulse.wallpaper.style', 'pulse.wallpaper.veil', 'pulse.wallpaper.blur', 'pulse.bubbles', 'pulse.text', ...Object.values(HOME_LOOKS).map((one) => one.key)];
 function readLooks() {
@@ -137,7 +138,7 @@ function saveLooks({ theme, accent, wallpaper, style, bubbles, text }) {
   try {
     if (theme) localStorage.setItem('pulse.theme', theme);
     if (accent) keep('pulse.accent', accent, 'madre');
-    if (wallpaper) keep('pulse.wallpaper', wallpaper, 'default');
+    if (wallpaper) { keep('pulse.wallpaper', wallpaper, 'default'); saveOwnWallpaper(wallpaper); }
     if (style) keep('pulse.wallpaper.style', style, 'veil');
     if (bubbles) keep('pulse.bubbles', bubbles, BUBBLES[0]);
     if (text) keep('pulse.text', text, TEXTS[0]);
@@ -151,6 +152,7 @@ function saveHome(name, value) {
   try { if (value === spec.values[0]) localStorage.removeItem(spec.key); else localStorage.setItem(spec.key, value); } catch { /* the choice lasts as long as the page */ }
   applyLooks();
   if (name === 'order' && typeof draw === 'function') draw();
+  if (name === 'order' && typeof paintOrderKey === 'function') paintOrderKey();
   settingsSheet?.paintLooks();
 }
 // A dial is saved when it is let go and shown while it moves; the sheet is not painted again under
@@ -164,7 +166,14 @@ window.matchMedia?.('(prefers-color-scheme: light)').addEventListener?.('change'
 // origin, so what this browser kept here no project saw. ~/.pulse/looks.json is read when Home
 // opens and whenever it comes back into view, and written when a choice changes. The twin of
 // app.js's pullLooks; Home's own card choices (HOME_LOOKS) stay here.
-const SHARED_LOOKS = ['pulse.theme', 'pulse.accent', 'pulse.wallpaper', 'pulse.wallpaper.style', 'pulse.wallpaper.veil', 'pulse.wallpaper.blur', 'pulse.bubbles', 'pulse.text'];
+// The wallpaper is each page's own (2026-10-13): Home keeps the one chosen in Home, each project
+// the one chosen in it (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'];
+// Before a page had its own, every page wore the shared one: that is where a page starts.
+const wallpaperOf = (answer) => answer.own?.wallpaper ?? answer.looks?.['pulse.wallpaper'] ?? null;
+function saveOwnWallpaper(value) {
+  void fetch('/api/looks/room', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ wallpaper: value }) }).catch(() => null);
+}
 let looksPush = 0;
 function pushLooks() {
   clearTimeout(looksPush);
@@ -182,8 +191,8 @@ async function pullLooks() {
     // 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; }
     let changed = false;
-    for (const key of SHARED_LOOKS) {
-      const value = answer.looks[key] ?? null;
+    const wall = wallpaperOf(answer);
+    for (const [key, value] of [...SHARED_LOOKS.map((one) => [one, answer.looks[one] ?? null]), ['pulse.wallpaper', wall === 'default' ? null : wall]]) {
       if (localStorage.getItem(key) === value) continue;
       if (value === null) localStorage.removeItem(key); else localStorage.setItem(key, value);
       changed = true;
@@ -260,6 +269,7 @@ function stateOf(room) {
   if (!room.open) return { key: 'asleep', words: room.lastOpened ? t('Asleep · last open {when}', { when: ago(room.lastOpened) }) : t('Asleep') };
   if (glance.outdated) return { key: 'outdated', words: t('Update MADRE in this project to see it here.') };
   if (glance.unreachable) return { key: 'quiet', words: t('Not answering right now') };
+  if (glance.delayed) return { key: 'quiet', words: t('Responding slowly · last known state') };
   if (glance.waitingCount) return { key: 'waiting', words: t('Waiting for you · {n}', { n: glance.waitingCount }) };
   if (glance.working?.length) return { key: 'working', words: glance.working.length === 1 ? t('@{agent} is working', { agent: glance.working[0] }) : t('{n} agents working', { n: glance.working.length }) };
   return { key: 'calm', words: t('Calm') };
@@ -277,6 +287,15 @@ function card(room) {
   const state = stateOf(room);
   const node = el('article', `sm-tile sm-card is-${state.key}${room.here ? ' here' : ''}`);
   node.dataset.room = room.id;
+  // Its own piece of the wallpaper (salas-mac.css): a place on the image, steady for the project.
+  let seed = 0;
+  for (const char of room.id) seed = (seed * 31 + char.charCodeAt(0)) >>> 0;
+  node.style.setProperty('--wx', `${seed % 101}%`);
+  node.style.setProperty('--wy', `${(seed >>> 8) % 101}%`);
+  // A project with a wallpaper of its own («only in this project») shows that one, whole.
+  // The wallpaper its own room wears (each page keeps its own), seen whole; none when it has none.
+  if (room.wallpaper && room.wallpaper !== 'default') { node.dataset.wp = room.wallpaper; node.style.setProperty('--wx', '50%'); node.style.setProperty('--wy', '50%'); }
+  else node.dataset.wp = 'none';
   // To the bar: dragged there, or pinned from its right-click.
   node.draggable = true;
   node.addEventListener('dragstart', (event) => pinsDragOut(event, room));
@@ -355,6 +374,22 @@ function card(room) {
 const ORDER = { waiting: 0, working: 1, calm: 2, quiet: 3, outdated: 4 };
 // The projects in the order the lobby shows them: the open ones by what needs the person, then
 // the asleep ones, the last opened first. BISHOP's own room is not a project.
+const PROJECT_ORDER_KEY = 'pulse.home.projects';
+function projectOrder() {
+  try { const list = JSON.parse(localStorage.getItem(PROJECT_ORDER_KEY) ?? '[]'); return Array.isArray(list) ? list.filter((id) => typeof id === 'string') : []; } catch { return []; }
+}
+// A project moved by hand: the whole order as it is on screen now, with that one moved, becomes
+// «Yours» — so moving one never shuffles the others.
+function moveProject(id, where) {
+  const list = projectsInOrder().all.map((room) => room.id);
+  const at = list.indexOf(id);
+  if (at < 0) return;
+  list.splice(at, 1);
+  const to = where === 'first' ? 0 : where === 'last' ? list.length : Math.max(0, Math.min(list.length, at + where));
+  list.splice(to, 0, id);
+  try { localStorage.setItem(PROJECT_ORDER_KEY, JSON.stringify(list)); } catch { /* the order lasts as long as the page */ }
+  saveHome('order', 'mine');
+}
 function projectsInOrder() {
   const projects = data.rooms.filter((room) => room.id !== data.salas);
   const open = projects.filter((room) => room.open)
@@ -364,9 +399,14 @@ function projectsInOrder() {
   // last thing that happened in each, open or asleep.
   const order = readLooks().home.order;
   const touched = (room) => Math.max(Date.parse(room.glance?.chat?.at ?? 0) || 0, Date.parse(room.lastOpened ?? room.added ?? 0) || 0);
+  // «Yours» (2026-10-13): the order the person made with right-click › Move; a project they never
+  // placed comes after, in the order of what needs them.
+  const mine = order === 'mine' ? projectOrder() : [];
+  const placed = (room) => { const at = mine.indexOf(room.id); return at < 0 ? Number.MAX_SAFE_INTEGER : at; };
   const all = order === 'name' ? [...projects].sort((a, b) => a.name.localeCompare(b.name, language))
     : order === 'recent' ? [...projects].sort((a, b) => touched(b) - touched(a))
-      : [...open, ...asleep];
+      : order === 'mine' ? [...open, ...asleep].map((room, index) => [room, index]).sort(([a, i], [b, j]) => placed(a) - placed(b) || i - j).map(([room]) => room)
+        : [...open, ...asleep];
   return { all, open, asleep };
 }
 function draw() {
@@ -387,6 +427,7 @@ function draw() {
   ui.macro.hidden = !data.rooms.length || window.innerWidth < 900;
   macro?.update(data.rooms, data.enlaces ?? []);
   settingsSheet?.sync();
+  fitTiles();
 }
 
 // The projects, as the search box and the filter leave them. Nothing is hidden by the filter
@@ -405,9 +446,48 @@ function drawProjects(all = data ? projectsInOrder().all : []) {
   ui.projects.hidden = !shown.length;
   ui.none.hidden = Boolean(shown.length);
   ui.none.replaceChildren();
+  fitDrawer(all);
   if (!all.length) ui.none.append(el('span', null, t('No projects yet. Add the first one.')), button('sm-btn primary small', t('Add a project'), openAddSheet));
   else if (!shown.length) ui.none.append(el('span', null, query ? t('No project matches «{query}».', { query }) : filter === 'open' ? t('No project is open.') : t('No project is asleep.')));
 }
+// THE DRAWER (2026-10-13): the projects live in a tile of their own, moved like any other, three
+// rows at a time. What does not fit is counted on a key under them — «+5», how many are open and
+// how many asleep — and the key opens the drawer whole, or closes it back to three rows.
+const drawerMore = $('sm-drawer-more');
+let drawerOpen = false;
+const DRAWER_ROWS = 3;
+function fitDrawer(all = data ? projectsInOrder().all : []) {
+  const count = $('sm-drawer-count');
+  if (count) count.textContent = String(all.length);
+  const cards = [...ui.projects.querySelectorAll('.sm-card[data-room]')];
+  for (const one of cards) one.hidden = false;
+  if (!cards.length) { drawerMore.hidden = true; return; }
+  // How many fit in a row is the grid's to say, at this width: 4, 3 or 2.
+  const first = cards[0].getBoundingClientRect();
+  const perRow = Math.max(1, Math.round((ui.projects.getBoundingClientRect().width + 16) / ((first.width || 1) + 16)));
+  const room = perRow * DRAWER_ROWS;
+  const out = cards.slice(room);
+  if (!out.length) { drawerMore.hidden = true; return; }
+  if (!drawerOpen) for (const one of out) one.hidden = true;
+  const rooms = out.map((one) => data.rooms.find((room) => room.id === one.dataset.room)).filter(Boolean);
+  const open = rooms.filter((room) => room.open).length;
+  const asleep = rooms.length - open;
+  drawerMore.hidden = false;
+  drawerMore.replaceChildren();
+  if (drawerOpen) drawerMore.append(el('span', null, t('Show fewer')));
+  else {
+    drawerMore.append(el('b', null, `+${out.length}`));
+    const parts = [open ? t('{n} open', { n: open }) : null, asleep ? t('{n} asleep', { n: asleep }) : null].filter(Boolean);
+    drawerMore.append(el('span', null, parts.join(' · ')));
+  }
+  drawerMore.setAttribute('aria-expanded', String(drawerOpen));
+  drawerMore.title = drawerOpen ? t('Show three rows') : t('{n} more projects: {parts}', { n: out.length, parts: [open ? t('{n} open', { n: open }) : null, asleep ? t('{n} asleep', { n: asleep }) : null].filter(Boolean).join(', ') });
+}
+drawerMore?.addEventListener('click', () => { drawerOpen = !drawerOpen; fitDrawer(); fitTiles(); });
+if (typeof ResizeObserver === 'function') {
+  let wide = 0;
+  new ResizeObserver(() => { const now = Math.round(ui.projects.getBoundingClientRect().width); if (now && now !== wide) { wide = now; fitDrawer(); } }).observe(ui.projects);
+}
 ui.search.addEventListener('input', () => { query = ui.search.value.trim(); drawProjects(); });
 for (const choice of ui.filter.querySelectorAll('[data-filter]')) {
   choice.addEventListener('click', () => {
@@ -417,6 +497,31 @@ for (const choice of ui.filter.querySelectorAll('[data-filter]')) {
   });
 }
 
+// ORDER, where the projects are (2026-10-13): the same four orders as Home's Appearance, one press
+// away from the list they arrange. «Yours» is the order made by dragging a card or by its
+// right-click › Move; the menu says so, so the way to make it is never a secret.
+const SORT_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4.5v11M3.5 13 6 15.5 8.5 13"/><path d="M11 6h5.5M11 10h4M11 14h2.5"/></svg>';
+const orderKey = button('sm-btn sm-order', null, () => {
+  const box = orderKey.getBoundingClientRect();
+  const now = readLooks().home.order;
+  homeMenu({ x: box.left, y: box.bottom + 6 }, [
+    { heading: t('Order the projects') },
+    ...HOME_LOOKS.order.values.map((value) => ({ words: HOME_LOOKS.order.words[value](), icon: SORT_ICON, checked: now === value, act: () => saveHome('order', value) })),
+    'sep',
+    { heading: t('Drag a card, or right-click it › Move, to make your own.') },
+  ], t('Order the projects'));
+});
+ui.filter.after(orderKey);
+function paintOrderKey() {
+  const now = readLooks().home.order;
+  orderKey.innerHTML = SORT_ICON; // trusted: our own SVG string
+  orderKey.append(el('span', null, HOME_LOOKS.order.words[now]()));
+  orderKey.title = t('Order the projects');
+  orderKey.setAttribute('aria-label', `${t('Order the projects')}: ${HOME_LOOKS.order.words[now]()}`);
+  orderKey.setAttribute('aria-haspopup', 'menu');
+}
+paintOrderKey();
+
 // WAITING FOR YOU: every question an agent asks the person, from every open room, counted in one
 // number; the first ones said, each leading to its room.
 function drawWaiting() {
@@ -514,6 +619,31 @@ async function restartRoom(room) {
   await startRoom(room);
 }
 
+// Every project still on the older MADRE, one after the other (1.0.1). Only the quiet ones: a
+// project with an agent working or a question waiting for the person is left as it is, and said.
+const roomQuiet = (room) => !room.glance?.working?.length && !room.glance?.waitingCount;
+let restartingAll = false;
+async function restartAll() {
+  if (restartingAll) return;
+  const behind = behindRooms();
+  const quiet = behind.filter(roomQuiet);
+  const left = behind.filter((room) => !roomQuiet(room));
+  if (!quiet.length) { toast(t('Every project on the older MADRE is busy now: restart them when they finish.'), 'look'); return; }
+  restartingAll = true;
+  try {
+    for (const [index, room] of quiet.entries()) {
+      toast(t('Restarting {room} · {n} of {total}', { room: roomLabel(room), n: index + 1, total: quiet.length }));
+      await restartRoom(room);
+    }
+  } finally {
+    restartingAll = false;
+  }
+  toast(left.length
+    ? t('{n} restarted. Left as they are, because they are busy: {rooms}.', { n: quiet.length, rooms: left.map(roomLabel).join(', ') })
+    : t('{n} restarted with MADRE {version}.', { n: quiet.length, version: data?.version ?? '' }), left.length ? 'look' : 'done');
+  settingsSheet?.sync({ detail: true });
+}
+
 // NEEDS YOU: what the person would want to know before anything else, from what the rooms, the
 // agents and MADRE itself say: a room on an older MADRE or not answering, an agent without a
 // session, a link about to expire, a newer MADRE. Nothing listed is a guess.
@@ -537,7 +667,9 @@ function attentionItems() {
   }
   if (versionSeen?.available && versionSeen.latest) items.push({ tone: 'ok', words: t('MADRE {version} is out.', { version: versionSeen.latest }), hint: t('You run {version}. Home restarts with it from here.', { version: versionSeen.current }), act: () => openSettings('release'), go: t('Update') });
   // After Home updated, the projects that stayed open still run the version they started with.
-  for (const room of behindRooms()) items.push({ tone: 'wait', words: t('{room} runs MADRE {version}.', { room: roomLabel(room), version: room.open.version }), hint: t('Restart it to bring it to {latest}: what is running stops.', { latest: data.version }), act: () => void restartRoom(room), go: t('Restart') });
+  const behind = behindRooms();
+  if (behind.length > 1) items.push({ tone: 'wait', words: t('{n} projects run an older MADRE.', { n: behind.length }), hint: t('Restart them all to bring them to {latest}. A project that is working or waiting for you is left for later.', { latest: data.version }), act: () => void restartAll(), go: t('Restart all') });
+  else for (const room of behind) items.push({ tone: 'wait', words: t('{room} runs MADRE {version}.', { room: roomLabel(room), version: room.open.version }), hint: t('Restart it to bring it to {latest}: what is running stops.', { latest: data.version }), act: () => void restartRoom(room), go: t('Restart') });
   return items;
 }
 function drawAttention() {
@@ -590,6 +722,7 @@ function drawDecisions() {
     item.append(head, el('p', null, one.text));
     list.append(item);
   }
+  if (typeof fitTiles === 'function') fitTiles();
 }
 // A project's name as a small tag: a way into it when it is open.
 function roomTag(id, name) {
@@ -646,6 +779,7 @@ function drawWork() {
     : state === 'failed' ? t('MADRE could not summarise them this time: these are your latest conversations, as they are.')
     : work.stale ? t('There is newer work than this summary: it is written again in a few minutes, or now if you ask.')
     : t('Written by MADRE on this Mac from your latest conversations.');
+  if (typeof fitTiles === 'function') fitTiles();
 }
 ui.work.again.addEventListener('click', () => void loadWork({ again: true }));
 
@@ -664,7 +798,10 @@ function linkRow(enlace) {
   const { source, reader } = endsOf(enlace);
   const node = el('article', `sm-link${revoking.has(enlace.id) ? ' revoking' : ''}`);
   node.dataset.link = enlace.id;
-  node.append(el('p', 'who', enlace.direction === 'both' ? t('{a} and {b} read each other', { a: roomName(enlace.rooms.a), b: roomName(enlace.rooms.b) }) : t('{reader} reads from {source}', { reader: roomName(reader), source: roomName(source) })));
+  node.append(el('span', 'sm-link-kind', source === data.salas || reader === data.salas ? t('With the Coordinator') : t('Between projects')));
+  const who = el('p', 'who');
+  who.append(enlace.direction === 'both' ? sayTinted('{a} and {b} read each other', { a: enlace.rooms.a, b: enlace.rooms.b }) : sayTinted('{reader} reads from {source}', { reader, source }));
+  node.append(who);
   const what = [kindsWords(enlace.kinds), enlace.expires ? t('until {date}', { date: new Date(enlace.expires).toLocaleDateString(language, { day: 'numeric', month: 'short' }) }) : t('no expiry')];
   if (enlace.orders?.allowed) what.push(t('orders up to #{n}', { n: enlace.orders.maxMode }));
   // D-S13: a link BISHOP signed on its own says so, so it is never mistaken for one you signed.
@@ -694,7 +831,10 @@ function linkRow(enlace) {
   return node;
 }
 function drawLinks(projects) {
-  const enlaces = data.enlaces ?? [];
+  const enlaces = [...(data.enlaces ?? [])].sort((a, b) => {
+    const direct = (one) => Number(one.rooms.a !== data.salas && one.rooms.b !== data.salas);
+    return direct(b) - direct(a) || roomName(endsOf(a).reader).localeCompare(roomName(endsOf(b).reader)) || roomName(endsOf(a).source).localeCompare(roomName(endsOf(b).source));
+  });
   const enough = data.rooms.length >= 2;
   ui.link.hidden = !enough;
   ui.linkMore.hidden = !enough;
@@ -705,32 +845,27 @@ function drawLinks(projects) {
     : enough ? t('No connections yet.') : t('Add a project to connect it.');
   ui.linksNote.textContent = t('A connection lets one project read the distilled notes of another, read-only, by a contract you sign here. Nothing is written across, and only notes that travel into turns cross.');
   ui.links.replaceChildren(...enlaces.map(linkRow));
-  drawMapLegend(enlaces);
   if (!enlaces.length && ui.linksSheet.open) ui.linksSheet.close();
   drawMap(projects, enlaces);
 }
-// Under the map, each connection in words, who looks up whom (2026-10-11): the first two, and how
-// many more there are; the whole list is one press away.
-const mapLegend = el('ul', 'sm-map-legend');
-function drawMapLegend(enlaces) {
-  if (!mapLegend.isConnected) ui.map.after(mapLegend);
-  mapLegend.replaceChildren();
-  mapLegend.hidden = !enlaces.length;
-  const said = (enlace) => {
-    const { source, reader } = endsOf(enlace);
-    if (enlace.direction === 'both') return sayBold('{a} and {b} look each other up', { a: roomName(enlace.rooms.a), b: roomName(enlace.rooms.b) });
-    if (reader === data.salas) return sayBold('The Coordinator looks up {source}', { source: roomName(source) });
-    return sayBold('{reader} looks up {source}', { reader: roomName(reader), source: roomName(source) });
-  };
-  for (const enlace of enlaces.slice(0, 2)) {
-    const line = el('li');
-    const words = el('span', 'says');
-    words.append(said(enlace));
-    line.append(el('i'), words);
-    if (enlace.orders?.allowed) line.append(el('span', 'sm-map-orders', t('orders up to #{n}', { n: enlace.orders.maxMode })));
-    mapLegend.append(line);
+// A sentence whose project names wear their tone (the map's): `vars` names room ids.
+function sayTinted(key, vars) {
+  const out = document.createDocumentFragment();
+  const template = t(key);
+  let at = 0;
+  for (const match of template.matchAll(/\{(\w+)\}/g)) {
+    out.append(template.slice(at, match.index));
+    const id = vars[match[1]];
+    if (id === undefined) out.append(match[0]);
+    else {
+      const name = el('b', `sm-tinted${id === data.salas ? ' hub' : ''}`, roomName(id));
+      if (id !== data.salas) name.style.setProperty('--pc', toneOf(id));
+      out.append(name);
+    }
+    at = match.index + match[0].length;
   }
-  if (enlaces.length > 2) mapLegend.append(el('li', 'more', t('and {n} more', { n: enlaces.length - 2 })));
+  out.append(template.slice(at));
+  return out;
 }
 async function revokeLink(id) {
   revoking.delete(id);
@@ -738,14 +873,17 @@ async function revokeLink(id) {
   await refresh();
 }
 ui.linksAll.addEventListener('click', () => { if (!ui.linksSheet.open) ui.linksSheet.showModal(); });
+// The tile's map is the small one: a press opens the map of connections in its own window.
+ui.map.addEventListener('click', (event) => { if (event.target.closest('svg') && (data?.enlaces ?? []).length) openGraph(); });
+// Closed, the sheet has no size to draw at: the wide map is drawn each time it opens.
+
 ui.linksClose.addEventListener('click', () => ui.linksSheet.close());
 ui.linkMore.addEventListener('click', () => openLinkSheet());
 
-// The map of the links: BISHOP in the middle, the projects round it (the first ten, in the
-// lobby's order), and a wire for each contract in force, from the room that serves to the one
-// that reads, the notes running along it the way they travel. Drawn at the tile's own size
-// (2026-10-11), so the names read at their real size: the projects a connection touches are
-// drawn whole and named in full; the rest stay quiet round the edge, a dashed ring when asleep.
+// The map of the links (redrawn 2026-10-13): the Coordinator in the middle and, round it, the
+// projects a contract touches, each in its own tone of the accent the person chose, so a project
+// is the same colour on the map, on its wires and in the words under it. The tile draws only the
+// connected ones, large enough to read; the sheet («See the connections») draws them all, wide.
 // Nothing here is drawn that the contracts do not say.
 const SVG = 'http://www.w3.org/2000/svg';
 const svgNode = (tag, attributes = {}) => {
@@ -753,44 +891,234 @@ const svgNode = (tag, attributes = {}) => {
   for (const [name, value] of Object.entries(attributes)) node.setAttribute(name, String(value));
   return node;
 };
+// A project's tone: the accent turned round the colour wheel, keeping its own lightness and
+// strength. The turns are shared out evenly among the projects a connection touches (in a steady
+// order, by id), so no two of them look alike; the first wears the accent itself. Where the
+// browser cannot turn a colour (no relative colour syntax), every project wears the accent.
+const TURNS = typeof CSS !== 'undefined' && CSS.supports?.('color', 'oklch(from red l c h)');
+function toneOf(id) {
+  const linked = [...new Set((data?.enlaces ?? []).flatMap((enlace) => [enlace.rooms.a, enlace.rooms.b]))].filter((one) => one !== data?.salas).sort();
+  const index = linked.indexOf(id);
+  if (!TURNS || index <= 0) return 'var(--s-acc)';
+  const step = 360 / Math.max(5, linked.length);
+  return `oklch(from var(--s-acc) l c calc(h + ${(index * step).toFixed(1)}))`;
+}
+// One project at a time (2026-10-13): under the pointer, or chosen in the window, a project
+// lights its own connections and the projects at their other end; the rest steps back.
+function focusable(svg, { pick = null, picked = null } = {}) {
+  const light = (id) => {
+    svg.classList.toggle('focusing', Boolean(id));
+    const near = new Set(id ? [id] : []);
+    for (const wire of svg.querySelectorAll('.wire')) {
+      const on = Boolean(id) && (wire.dataset.a === id || wire.dataset.b === id);
+      wire.classList.toggle('lit', Boolean(on || (picked?.link && wire.dataset.link === picked.link)));
+      if (on) { near.add(wire.dataset.a); near.add(wire.dataset.b); }
+    }
+    for (const dot of svg.querySelectorAll('.note, .flow')) dot.classList.toggle('lit', Boolean(id) && (dot.dataset.a === id || dot.dataset.b === id));
+    for (const node of svg.querySelectorAll('.node, .bishop')) node.classList.toggle('lit', near.has(node.dataset.id));
+  };
+  const resting = () => {
+    if (picked?.room) return light(picked.room);
+    if (picked?.link) {
+      const wire = svg.querySelector(`.wire[data-link="${CSS.escape(picked.link)}"]`);
+      svg.classList.add('focusing');
+      wire?.classList.add('lit');
+      for (const node of svg.querySelectorAll('.node, .bishop')) node.classList.toggle('lit', Boolean(wire) && (node.dataset.id === wire.dataset.a || node.dataset.id === wire.dataset.b));
+      return;
+    }
+    light(null);
+  };
+  for (const node of svg.querySelectorAll('.node, .bishop')) {
+    node.addEventListener('pointerenter', () => light(node.dataset.id));
+    node.addEventListener('pointerleave', resting);
+    if (pick) {
+      node.classList.add('pickable');
+      node.addEventListener('click', (event) => { event.stopPropagation(); pick({ room: node.dataset.id }); });
+    }
+  }
+  if (pick) {
+    for (const wire of svg.querySelectorAll('.wire')) {
+      wire.classList.add('pickable');
+      // A line is thin; the hand gets a wider, invisible one along it.
+      const hit = svgNode('path', { class: 'hit', d: wire.getAttribute('d') });
+      hit.addEventListener('click', (event) => { event.stopPropagation(); pick({ link: wire.dataset.link }); });
+      hit.addEventListener('pointerenter', () => wire.classList.add('hover'));
+      hit.addEventListener('pointerleave', () => wire.classList.remove('hover'));
+      wire.after(hit);
+    }
+    svg.addEventListener('click', () => pick(null));
+  }
+  resting();
+}
+
+// THE MAP OF CONNECTIONS, in a window of its own: the same drawing, wide, every project round the
+// Coordinator, and beside it what was chosen — a project (whom it reads, who reads it) or a line
+// (what crosses, until when, how often it was read). Opened from the tile's map.
+let graphWindow = null;
+function openGraph() {
+  if (graphWindow?.open) return;
+  graphWindow?.remove();
+  graphWindow = el('dialog', 'sm-sheet sm-graph');
+  const body = el('div', 'sm-sheet-body');
+  const head = el('header', 'sm-sheet-head');
+  const words = el('div', 'sm-graph-title');
+  words.append(el('h3', null, t('Map of connections')), el('small', null, t('Who looks up whom. Touch a project or a line.')));
+  const keys = el('span', 'surface-modes');
+  const close = button('surface-mode close x-close x-only', null, () => graphWindow.close());
+  close.setAttribute('aria-label', t('Close'));
+  close.innerHTML = '<span class="x-icon"><svg viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M5.5 5.5l9 9M14.5 5.5l-9 9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>'; // trusted
+  keys.append(close);
+  head.append(words, keys);
+  const stage = el('div', 'sm-graph-stage');
+  const canvas = el('div', 'sm-map sm-map-wide sm-graph-canvas');
+  const side = el('aside', 'sm-graph-side');
+  stage.append(canvas, side);
+  body.append(head, stage);
+  graphWindow.append(body);
+  document.body.append(graphWindow);
+  let picked = null;
+  const paint = () => {
+    if (!graphWindow?.isConnected || !mapDrawn) return;
+    paintMap(canvas, mapDrawn.projects, mapDrawn.enlaces, { wide: true, pick: (next) => { picked = next; paint(); }, picked });
+    paintSide(side, picked, () => { graphWindow.close(); if (!ui.linksSheet.open) ui.linksSheet.showModal(); });
+  };
+  const watch = typeof ResizeObserver === 'function' ? new ResizeObserver(() => paint()) : null;
+  graphWindow.addEventListener('close', () => { watch?.disconnect(); graphWindow?.remove(); graphWindow = null; });
+  graphWindow.repaint = paint;
+  graphWindow.showModal();
+  watch?.observe(canvas);
+  requestAnimationFrame(paint);
+}
+// What the side of the window says about the chosen thing, only what the contracts and the lobby say.
+function paintSide(side, picked, toList) {
+  side.replaceChildren();
+  const enlaces = mapDrawn?.enlaces ?? [];
+  const reads = enlaces.reduce((sum, enlace) => sum + (enlace.traffic?.reads24h ?? 0), 0);
+  const listKey = button('sm-btn ghost small', t('See the connections'), toList);
+  if (!picked) {
+    side.append(el('b', 'sm-graph-big', String(enlaces.length)), el('span', 'sm-graph-sub', enlaces.length === 1 ? t('connection in force') : t('connections in force')));
+    side.append(el('b', 'sm-graph-big', String(reads)), el('span', 'sm-graph-sub', t('reads in the last 24 h')));
+    side.append(el('p', 'sm-hint', t('Each line goes from the project whose notes are read to the one that reads them, in the colour of where they come from.')));
+    const quiet = (() => { try { return JSON.parse(side.previousElementSibling?.dataset.quiet ?? '[]'); } catch { return []; } })();
+    if (quiet.length) {
+      const box = el('div', 'sm-graph-list');
+      box.append(el('span', 'sm-graph-label', t('Not connected')));
+      box.append(el('span', 'sm-graph-quiet', quiet.map((id) => roomName(id)).join(' · ')));
+      side.append(box);
+    }
+    side.append(listKey);
+    return;
+  }
+  if (picked.room) {
+    const id = picked.room;
+    const room = data.rooms.find((one) => one.id === id);
+    const name = el('b', `sm-tinted sm-graph-name${id === data.salas ? ' hub' : ''}`, roomName(id));
+    if (id !== data.salas) name.style.setProperty('--pc', toneOf(id));
+    side.append(name);
+    if (room && id !== data.salas) side.append(el('span', 'sm-graph-sub', stateOf(room).words));
+    const readsFrom = enlaces.filter((enlace) => endsOf(enlace).reader === id || (enlace.direction === 'both' && (enlace.rooms.a === id || enlace.rooms.b === id))).map((enlace) => { const { source, reader } = endsOf(enlace); return source === id ? reader : source; });
+    const readBy = enlaces.filter((enlace) => endsOf(enlace).source === id || (enlace.direction === 'both' && (enlace.rooms.a === id || enlace.rooms.b === id))).map((enlace) => { const { source, reader } = endsOf(enlace); return reader === id ? source : reader; });
+    const list = (title, ids) => {
+      const box = el('div', 'sm-graph-list');
+      box.append(el('span', 'sm-graph-label', title));
+      if (!ids.length) box.append(el('span', 'sm-graph-sub', t('nobody')));
+      for (const one of [...new Set(ids)]) { const who = el('b', `sm-tinted${one === data.salas ? ' hub' : ''}`, roomName(one)); if (one !== data.salas) who.style.setProperty('--pc', toneOf(one)); box.append(who); }
+      side.append(box);
+    };
+    list(t('Looks up'), readsFrom);
+    list(t('Looked up by'), readBy);
+    if (room?.open && id !== data.salas) side.append(button('sm-btn primary small', t('Open the project'), () => leaveTo(addressOf(room))));
+    side.append(listKey);
+    return;
+  }
+  const enlace = enlaces.find((one) => one.id === picked.link);
+  if (!enlace) { side.append(el('p', 'sm-hint', t('That connection is no longer in force.')), listKey); return; }
+  const { source, reader } = endsOf(enlace);
+  const who = el('p', 'sm-graph-who');
+  who.append(enlace.direction === 'both' ? sayTinted('{a} and {b} read each other', { a: enlace.rooms.a, b: enlace.rooms.b }) : sayTinted('{reader} reads from {source}', { reader, source }));
+  side.append(who);
+  const fact = (label, value) => { const row = el('div', 'sm-graph-fact'); row.append(el('span', 'sm-graph-label', label), el('span', null, value)); side.append(row); };
+  fact(t('What crosses'), kindsWords(enlace.kinds) || '—');
+  fact(t('Until'), enlace.expires ? new Date(enlace.expires).toLocaleDateString(language, { day: 'numeric', month: 'long' }) : t('no expiry'));
+  fact(t('Reads in 24 h'), String(enlace.traffic?.reads24h ?? 0));
+  if (enlace.orders?.allowed) fact(t('Orders'), t('up to #{n}', { n: enlace.orders.maxMode }));
+  if (enlace.signed?.by === 'bishop') fact(t('Signed by'), t('Coordinator'));
+  side.append(listKey);
+}
+
 let mapDrawn = null;
 function drawMap(projects, enlaces) {
   mapDrawn = { projects, enlaces };
-  ui.map.replaceChildren();
-  if (!projects.length) { ui.map.append(el('p', 'sm-hint', t('Your projects show here, round the Coordinator, with the connections between them.'))); return; }
-  const box = ui.map.getBoundingClientRect();
-  const W = Math.max(220, Math.round(box.width || 320)), H = Math.max(140, Math.round(box.height || 200));
-  const cx = W / 2, cy = H / 2 - 4;
-  const shown = projects.slice(0, 10);
+  paintMap(ui.map, projects, enlaces, { wide: false });
+  graphWindow?.repaint?.();
+}
+function paintMap(host, projects, enlaces, { wide, pick = null, picked = null }) {
+  host.replaceChildren();
+  if (!projects.length) { host.append(el('p', 'sm-hint', t('Your projects show here, round the Coordinator, with the connections between them.'))); return; }
+  const box = host.getBoundingClientRect();
+  const W = Math.max(240, Math.round(box.width || 320)), H = Math.max(170, Math.round(box.height || 220));
+  const cx = W / 2, cy = H / 2;
   const linked = new Set(enlaces.flatMap((enlace) => [enlace.rooms.a, enlace.rooms.b]));
-  const rx = Math.max(64, W / 2 - 50), ry = Math.max(36, H / 2 - 26);
-  // The Coordinator's halo (drawn while it is connected) is part of its body for the wires.
-  const at = new Map([[data.salas, { x: cx, y: cy, r: 17, pad: linked.has(data.salas) ? 7 : 0, up: false }]]);
-  shown.forEach((room, index) => {
-    const angle = -Math.PI / 2 + (index * 2 * Math.PI) / shown.length + (shown.length === 2 ? Math.PI / 2 : 0);
+  const connected = projects.filter((room) => linked.has(room.id));
+  // Only who is connected goes round the Coordinator, evenly; the rest are named apart (the tile's
+  // last line, the window's side), so the drawing is never weighed down on one side.
+  const ring = (connected.length ? connected : projects).slice(0, wide ? 18 : 10);
+  const quiet = projects.length - ring.length;
+  const name = (room) => (room.name.length > 16 ? `${room.name.slice(0, 15)}…` : room.name);
+  // The ring leaves room for the longest name on either side, so nothing is cut at the edge.
+  const longest = Math.max(40, ...ring.map((room) => name(room).length * (wide ? 7.4 : 7)));
+  let rx = Math.max(60, W / 2 - longest - 18), ry = Math.max(44, H / 2 - (wide ? 34 : 26));
+  // Wide, the ring is a circle: an abstract map, not a shape stretched to its frame.
+  if (wide) rx = ry = Math.max(60, Math.min(rx, ry));
+  const hubR = wide ? 21 : 17;
+  const at = new Map([[data.salas, { x: cx, y: cy, r: hubR, pad: linked.has(data.salas) ? 6 : 0 }]]);
+  ring.forEach((room, index) => {
+    const angle = -Math.PI / 2 + (index * 2 * Math.PI) / ring.length + (ring.length === 2 ? Math.PI / 2 : 0);
     const memories = room.glance?.census?.memories ?? 0;
-    const r = (room.open ? 6 + Math.min(4, Math.sqrt(memories) / 3) : 5.5) + (linked.has(room.id) ? 1 : 0);
-    // A name above its body in the upper half, below it in the lower, so none runs into the middle.
-    at.set(room.id, { x: cx + Math.cos(angle) * rx, y: cy + Math.sin(angle) * ry, r, up: Math.sin(angle) < -0.35 });
+    const r = linked.has(room.id) ? (wide ? 8 : 7) + Math.min(3, Math.sqrt(memories) / 4) : 4.5;
+    at.set(room.id, { x: cx + Math.cos(angle) * rx, y: cy + Math.sin(angle) * ry, r, cos: Math.cos(angle), sin: Math.sin(angle) });
   });
   const svg = svgNode('svg', { viewBox: `0 0 ${W} ${H}`, role: 'img' });
   svg.setAttribute('aria-label', ui.linksSum.textContent);
   const defs = svgNode('defs');
-  const arrow = svgNode('marker', { id: 'sm-arrow', viewBox: '0 0 10 10', refX: 7, refY: 5, markerWidth: 7, markerHeight: 7, markerUnits: 'userSpaceOnUse', orient: 'auto-start-reverse' });
-  arrow.append(svgNode('path', { d: 'M1 1.5L8 5L1 8.5', fill: 'none', stroke: 'currentColor', 'stroke-width': 1.8, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }));
-  defs.append(arrow);
   svg.append(defs);
-  // From the edge of one body to the edge of the other.
-  const edges = (from, to, gapFrom = 3, gapTo = 4) => {
+  // STARS (2026-10-13): each project is a point of light in its tone, its glow a radial gradient
+  // that fades to nothing; the notes on their way are sparks. The theme decides how bright
+  // (salas-mac.css): a lit sky in the dark, a quieter one in the light, where the text must read.
+  const glowId = `sm-glow-${wide ? 'w' : 't'}`;
+  const glow = svgNode('filter', { id: glowId, x: '-200%', y: '-200%', width: '500%', height: '500%' });
+  glow.append(svgNode('feGaussianBlur', { stdDeviation: wide ? 2.2 : 1.8, result: 'soft' }));
+  const merge = svgNode('feMerge');
+  merge.append(svgNode('feMergeNode', { in: 'soft' }), svgNode('feMergeNode', { in: 'SourceGraphic' }));
+  glow.append(merge);
+  defs.append(glow);
+  const halos = new Map();
+  const haloFor = (id, colour) => {
+    if (halos.has(id)) return halos.get(id);
+    const ref = `sm-halo-${wide ? 'w' : 't'}-${halos.size}`;
+    const gradient = svgNode('radialGradient', { id: ref });
+    for (const [offset, opacity] of [['0%', 0.95], ['38%', 0.42], ['100%', 0]]) {
+      const stop = svgNode('stop', { offset, 'stop-opacity': opacity });
+      stop.style.stopColor = colour;
+      gradient.append(stop);
+    }
+    defs.append(gradient);
+    halos.set(id, `url(#${ref})`);
+    return halos.get(id);
+  };
+  const edges = (from, to, gapFrom = 4, gapTo = 5) => {
     const dx = to.x - from.x, dy = to.y - from.y, length = Math.hypot(dx, dy) || 1;
     const ux = dx / length, uy = dy / length;
     const reach = (spot, gap) => spot.r + (spot.pad ?? 0) + gap;
     return { start: { x: from.x + ux * reach(from, gapFrom), y: from.y + uy * reach(from, gapFrom) }, end: { x: to.x - ux * reach(to, gapTo), y: to.y - uy * reach(to, gapTo) } };
   };
+  // A hairline from the middle to each project on the ring that no contract touches: it is there,
+  // and nothing crosses.
   const centre = at.get(data.salas);
-  for (const room of shown) {
-    const { start, end } = edges(centre, at.get(room.id), 2, 2);
-    svg.append(svgNode('line', { class: `spoke${linked.has(room.id) ? ' linked' : ''}`, x1: start.x.toFixed(1), y1: start.y.toFixed(1), x2: end.x.toFixed(1), y2: end.y.toFixed(1) }));
+  for (const room of ring) {
+    if (linked.has(room.id)) continue;
+    const { start, end } = edges(centre, at.get(room.id), 3, 3);
+    svg.append(svgNode('line', { class: 'spoke', x1: start.x.toFixed(1), y1: start.y.toFixed(1), x2: end.x.toFixed(1), y2: end.y.toFixed(1) }));
   }
   const still = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
   enlaces.forEach((enlace, index) => {
@@ -798,70 +1126,674 @@ function drawMap(projects, enlaces) {
     const from = at.get(source), to = at.get(reader);
     if (!from || !to) return;
     const { start, end } = edges(from, to);
-    // With the Coordinator at one end the wire runs straight along its spoke; between two
-    // projects it bows outwards, away from the middle, so it never crosses the Coordinator.
+    // To or from the Coordinator the wire is straight; between two projects it bows away from the
+    // middle, so it never runs through the Coordinator.
     let d = `M${start.x.toFixed(1)} ${start.y.toFixed(1)} L${end.x.toFixed(1)} ${end.y.toFixed(1)}`;
     if (source !== data.salas && reader !== data.salas) {
       const mx = (start.x + end.x) / 2, my = (start.y + end.y) / 2;
       const ox = mx - cx, oy = my - cy, out = Math.hypot(ox, oy) || 1;
-      d = `M${start.x.toFixed(1)} ${start.y.toFixed(1)} Q ${(mx + (ox / out) * 34).toFixed(1)} ${(my + (oy / out) * 34).toFixed(1)} ${end.x.toFixed(1)} ${end.y.toFixed(1)}`;
+      const bow = Math.min(46, Math.hypot(end.x - start.x, end.y - start.y) * 0.28);
+      d = `M${start.x.toFixed(1)} ${start.y.toFixed(1)} Q ${(mx + (ox / out) * bow).toFixed(1)} ${(my + (oy / out) * bow).toFixed(1)} ${end.x.toFixed(1)} ${end.y.toFixed(1)}`;
     }
-    const id = `sm-wire-${index}`;
-    const wire = svgNode('path', { id, class: 'wire', d, 'marker-end': 'url(#sm-arrow)' });
-    if (enlace.direction === 'both') wire.setAttribute('marker-start', 'url(#sm-arrow)');
+    // The wire wears the tone of the project the notes come from.
+    const tone = source === data.salas ? 'var(--text-3)' : toneOf(source);
+    const id = `sm-wire-${wide ? 'w' : 't'}-${index}`;
+    const wire = svgNode('path', { id, class: 'wire', d });
+    wire.style.stroke = tone;
+    wire.dataset.a = source;
+    wire.dataset.b = reader;
+    wire.dataset.link = enlace.id;
+    const title = svgNode('title');
+    title.textContent = enlace.direction === 'both' ? t('{a} and {b} look each other up', { a: roomName(enlace.rooms.a), b: roomName(enlace.rooms.b) }) : reader === data.salas ? t('The Coordinator looks up {source}', { source: roomName(source) }) : t('{reader} looks up {source}', { reader: roomName(reader), source: roomName(source) });
+    wire.append(title);
     svg.append(wire);
-    if (still) return;
-    // The notes on their way: two dots one after the other, back the other way too when both read.
-    const ways = enlace.direction === 'both' ? [['0;1', 0], ['1;0', 1.2]] : [['0;1', 0]];
-    for (const [points, offset] of ways) {
-      for (const lag of [0, 1.2]) {
-        const dot = svgNode('circle', { class: 'note', r: 2.6, opacity: 0 });
-        const begin = `${(lag + offset + index * 0.4).toFixed(1)}s`;
-        const move = svgNode('animateMotion', { dur: '2.4s', repeatCount: 'indefinite', begin, keyPoints: points, keyTimes: '0;1', calcMode: 'linear' });
-        const along = svgNode('mpath');
-        along.setAttribute('href', `#${id}`);
-        move.append(along);
-        dot.append(move, svgNode('animate', { attributeName: 'opacity', values: '0;1;1;0', keyTimes: '0;.15;.85;1', dur: '2.4s', repeatCount: 'indefinite', begin }));
-        svg.append(dot);
-      }
+    // ELECTRIC FLOW (2026-10-13): no arrowheads; the current runs along the line the way the notes
+    // travel, from the project read to the one reading, and both ways when they read each other.
+    // A still line under it says the connection is there even when nothing moves.
+    const ways = enlace.direction === 'both' ? [['out', tone], ['back', reader === data.salas ? 'var(--text-3)' : toneOf(reader)]] : [['out', tone]];
+    for (const [way, colour] of ways) {
+      const flow = svgNode('path', { class: `flow ${way}`, d, filter: `url(#${glowId})` });
+      flow.style.stroke = colour;
+      flow.style.setProperty('--flow-delay', `${(index * 0.37) % 1.4}s`);
+      flow.dataset.a = source;
+      flow.dataset.b = reader;
+      if (still) flow.classList.add('still');
+      svg.append(flow);
     }
   });
-  for (const room of shown) {
+  for (const room of ring) {
     const spot = at.get(room.id);
     const on = linked.has(room.id);
-    const body = svgNode('circle', { class: `node${room.open ? '' : ' asleep'}${on ? ' linked' : ''}${room.glance?.waitingCount ? ' waiting' : ''}`, cx: spot.x.toFixed(1), cy: spot.y.toFixed(1), r: spot.r.toFixed(1) });
+    const group = svgNode('g', { class: `node${on ? ' linked' : ''}${room.open ? '' : ' asleep'}${room.glance?.waitingCount ? ' waiting' : ''}` });
+    group.style.setProperty('--pc', toneOf(room.id));
+    group.dataset.id = room.id;
+    if (on && room.glance?.waitingCount) group.append(svgNode('circle', { class: 'wait', cx: spot.x.toFixed(1), cy: spot.y.toFixed(1), r: (spot.r + 5).toFixed(1) }));
+    // The star: a halo that breathes, a core of its tone and a white heart. Each one twinkles at its
+    // own pace, so the sky never pulses as one.
+    const star = svgNode('g', { class: 'star' });
+    star.style.setProperty('--tw', `${(2.6 + ((room.id.length * 37) % 19) / 10).toFixed(1)}s`);
+    star.style.setProperty('--tw-delay', `${(((room.id.charCodeAt(0) ?? 0) * 13) % 23) / 10}s`);
+    star.append(
+      svgNode('circle', { class: 'halo', cx: spot.x.toFixed(1), cy: spot.y.toFixed(1), r: (spot.r * (on ? 2.9 : 2.2)).toFixed(1), fill: haloFor(room.id, toneOf(room.id)) }),
+      svgNode('circle', { class: 'body', cx: spot.x.toFixed(1), cy: spot.y.toFixed(1), r: (spot.r * (on ? 0.82 : 0.9)).toFixed(1) }),
+      svgNode('circle', { class: 'heart', cx: spot.x.toFixed(1), cy: spot.y.toFixed(1), r: Math.max(0.9, spot.r * 0.22).toFixed(1) }),
+    );
+    group.append(star);
     const title = svgNode('title');
     title.textContent = `${room.name} · ${stateOf(room).words}`;
-    body.append(title);
-    const name = svgNode('text', { class: `label${on ? ' linked' : ''}`, x: spot.x.toFixed(1), y: (spot.up ? spot.y - spot.r - 6 : spot.y + spot.r + 13).toFixed(1), 'text-anchor': 'middle' });
-    name.textContent = room.name.length > 16 ? `${room.name.slice(0, 15)}…` : room.name;
-    svg.append(body, name);
+    group.append(title);
+    // The name sits outside the ring, on the side its project is on: to the right on the right,
+    // to the left on the left, above or below at the top and the bottom.
+    const side = Math.abs(spot.cos) < 0.32 ? 'middle' : spot.cos > 0 ? 'start' : 'end';
+    const gap = spot.r + 7;
+    const x = side === 'middle' ? spot.x : spot.x + Math.sign(spot.cos) * gap;
+    const y = side === 'middle' ? (spot.sin < 0 ? spot.y - gap - 2 : spot.y + gap + 10) : spot.y + 4;
+    const label = svgNode('text', { class: 'label', x: x.toFixed(1), y: y.toFixed(1), 'text-anchor': side });
+    label.textContent = name(room);
+    group.append(label);
+    svg.append(group);
   }
-  // BISHOP, in its own colours, with its own mark (brands.js), and a halo while it is connected.
+  // The Coordinator, in its own colours and mark (brands.js).
   const brand = brandOf('bishop');
   const hub = svgNode('g', { class: `bishop${linked.has(data.salas) ? ' linked' : ''}` });
-  if (linked.has(data.salas)) hub.append(svgNode('circle', { class: 'halo', cx, cy, r: 23 }));
-  hub.append(svgNode('circle', { cx, cy, r: 17, fill: brand.solid ?? brand.color }));
-  const face = svgNode('g', { transform: `translate(${cx - 10.5} ${cy - 10.5})`, color: brand.ink });
+  hub.dataset.id = data.salas;
+  // The Coordinator is the brightest star, in its own colour, its mark at the heart.
+  hub.append(svgNode('circle', { class: 'corona', cx, cy, r: hubR * 2.4, fill: haloFor(data.salas, brand.solid ?? brand.color) }));
+  if (linked.has(data.salas)) hub.append(svgNode('circle', { class: 'halo', cx, cy, r: hubR + 6 }));
+  hub.append(svgNode('circle', { class: 'core', cx, cy, r: hubR, fill: brand.solid ?? brand.color }));
+  const size = Math.round(hubR * 1.24);
+  const face = svgNode('g', { transform: `translate(${cx - size / 2} ${cy - size / 2})`, color: brand.ink });
   face.innerHTML = brand.mark(); // trusted: our own SVG string from brands.js
-  face.firstElementChild?.setAttribute('width', '21');
-  face.firstElementChild?.setAttribute('height', '21');
+  face.firstElementChild?.setAttribute('width', String(size));
+  face.firstElementChild?.setAttribute('height', String(size));
   hub.append(face);
+  const hubTitle = svgNode('title');
+  hubTitle.textContent = t('Coordinator');
+  hub.append(hubTitle);
   svg.append(hub);
-  ui.map.append(svg);
+  host.append(svg);
+  focusable(svg, { pick, picked });
+  host.dataset.quiet = JSON.stringify(projects.filter((room) => !ring.includes(room)).map((room) => room.id));
+  if (!wide && quiet > 0 && connected.length) host.append(el('span', 'sm-map-quiet', quiet === 1 ? t('1 more project, not connected') : t('{n} more projects, not connected', { n: quiet })));
 }
-// The tile changes size with the window: the map is drawn again at the new size.
+// The tile and the sheet change size with the window: the map is drawn again at the new size.
 if (typeof ResizeObserver === 'function') {
-  let drawnAt = '';
-  new ResizeObserver(() => {
-    const box = ui.map.getBoundingClientRect();
-    const size = `${Math.round(box.width)}x${Math.round(box.height)}`;
-    if (!box.width || size === drawnAt || !mapDrawn) return;
-    drawnAt = size;
-    drawMap(mapDrawn.projects, mapDrawn.enlaces);
-  }).observe(ui.map);
+  for (const [host, wide] of [[ui.map, false]]) {
+    let drawnAt = '';
+    new ResizeObserver(() => {
+      const box = host.getBoundingClientRect();
+      const size = `${Math.round(box.width)}x${Math.round(box.height)}`;
+      if (!box.width || size === drawnAt || !mapDrawn) return;
+      drawnAt = size;
+      paintMap(host, mapDrawn.projects, mapDrawn.enlaces, { wide });
+    }).observe(host);
+  }
+}
+
+// HOME, ARRANGED BY ITS PERSON (2026-10-13). Every tile of Home — the Coordinator, who waits,
+// the connections, the decisions, what needs you, the memory, and the widgets added to it — sits
+// where the person put it, at the size they chose. Right-click a tile: move it, resize it, take it
+// off Home, or add another. What is kept is this browser's (Home's own layout, like its cards).
+// A widget exists only where something real feeds it (src/server.mjs, homeWidget): the machine,
+// the projects' servers sentinels and datasets, the Coordinator's own dataset, and Ollama.
+const LAYOUT_KEY = 'pulse.home.layout';
+// One board (2026-10-13): every tile of Home in one order, the projects' drawer among them.
+const BOARD = 'sm-top';
+const SIZES = [[4, () => t('Small')], [6, () => t('Medium')], [8, () => t('Large')], [12, () => t('Full width')]];
+// THE GRID (2026-10-13): 12 columns across and rows of 96 px down, 16 px between them. Every tile
+// takes whole columns and whole rows, so every edge falls on the same lines and tiles fit side by
+// side exactly: a 5-row tile beside a 2-row and a 3-row one ends where they end. A tile's height is
+// its default, «Automatic» (the rows its content needs), or the rows the person chose; what does
+// not fit in a chosen height scrolls inside the tile.
+const HEIGHTS = [[0, () => t('Automatic')], [2, () => t('2 rows')], [3, () => t('3 rows')], [4, () => t('4 rows')], [5, () => t('5 rows')]];
+const HOME_TILES = {
+  bishop: { id: 'sm-bishop', name: () => t('Coordinator'), about: () => t('Your coordinator, its state and its recent summary.'), size: 8, rows: 5 },
+  waiting: { id: 'sm-waiting', name: () => t('Waiting for you'), about: () => t('The questions and permissions an agent is waiting on.'), size: 4, rows: 2 },
+  links: { id: 'sm-links-tile', name: () => t('Connections'), about: () => t('The map of who looks up whom.'), size: 4, rows: 3 },
+  projects: { id: 'sm-drawer', name: () => t('Projects'), about: () => t('Every project, open or asleep, three rows at a time.'), size: 12, sizes: [12], kept: true },
+  decisions: { id: 'sm-decisions', name: () => t('Recent decisions'), about: () => t('What your projects decided lately.'), size: 4, rows: 3 },
+  attention: { id: 'sm-attention', name: () => t('Needs you'), about: () => t('What Home noticed that needs a hand.'), size: 4, rows: 3 },
+  memory: { id: 'sm-memory', name: () => t('Memory'), about: () => t('What your projects remember, by kind.'), size: 4, rows: 3 },
+};
+const WIDGETS = {
+  'w-system': { kind: 'system', name: () => t('System resources'), about: () => t('How busy this Mac\'s processor is, and how much memory is free.'), size: 4, rows: 3 },
+  'w-servers': { kind: 'servers', name: () => t('Servers'), about: () => t('The servers running in your open projects, and whether they answer.'), size: 4, rows: 3, needs: () => t('Turn on Preview in a project\'s Modules to see its servers.') },
+  'w-memory': { kind: 'memory', name: () => t('Memory quality'), about: () => t('How grown each open project\'s memory is, and its weakest side.'), size: 4, rows: 3, needs: () => t('Open a project to read its memory.') },
+  'w-coordinator': { kind: 'coordinator', name: () => t('Coordinator training'), about: () => t('How far the Coordinator\'s own record is from a model of its own.'), size: 4, rows: 3 },
+  // Only for MADRE's author, in a copy run from source with the author's token (src/server.mjs, homeWidget):
+  // anywhere else the server has no such widget and Home never offers it.
+  'w-usage': { kind: 'usage', owner: true, name: () => t('MADRE usage'), about: () => t('How many copies of MADRE are on, which versions and whether people come back. Only you see this.'), size: 8, rows: 3 },
+  'w-models': { kind: 'models', name: () => t('Local models'), about: () => t('Ollama, its models, and how close each project is to its own.'), size: 4, rows: 3 },
+};
+const DEFAULT_LAYOUT = { order: ['bishop', 'waiting', 'links', 'projects', 'decisions', 'attention', 'memory'], size: {}, rows: {} };
+// What each tile is, drawn in the accent the person chose (the same line as the room's AJUSTES icons).
+const TILE_ICONS = {
+  'bishop': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="2.6"/><circle cx="10" cy="3.6" r="1.4"/><circle cx="4.4" cy="14" r="1.4"/><circle cx="15.6" cy="14" r="1.4"/><path d="M10 5v2.4M8 11.6 5.6 13.2M12 11.6l2.4 1.6"/></svg>',
+  'waiting': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h8M6 16.5h8M6.8 3.5c0 3.2 3.2 4 3.2 6.5S6.8 13.3 6.8 16.5M13.2 3.5c0 3.2-3.2 4-3.2 6.5s3.2 3.3 3.2 6.5"/></svg>',
+  'projects': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="14" height="12.5" rx="2.4"/><path d="M3 9.2h14M8 6.6h4"/></svg>',
+  'links': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="13.5" r="2.2"/><circle cx="15" cy="6.5" r="2.2"/><path d="M7 12.2 13 7.8"/></svg>',
+  'decisions': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="13" height="13" rx="3"/><path d="m7 10.2 2.1 2.1L13.2 8"/></svg>',
+  'attention': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="6.5"/><path d="M10 6.6v4.2"/><path d="M10 13.4h.01" stroke-width="2.2"/></svg>',
+  'memory': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="10" cy="5.6" rx="5.5" ry="2.1"/><path d="M4.5 5.6v4.4c0 1.2 2.5 2.1 5.5 2.1s5.5-.9 5.5-2.1V5.6M4.5 10v4.4c0 1.2 2.5 2.1 5.5 2.1s5.5-.9 5.5-2.1V10"/></svg>',
+  'w-system': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="5.5" y="5.5" width="9" height="9" rx="1.8"/><path d="M8 3v2.5M12 3v2.5M8 14.5V17M12 14.5V17M3 8h2.5M3 12h2.5M14.5 8H17M14.5 12H17"/></svg>',
+  'w-servers': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.8" width="13" height="5" rx="1.6"/><rect x="3.5" y="11.2" width="13" height="5" rx="1.6"/><path d="M6.4 6.3h.01M6.4 13.7h.01" stroke-width="2.2"/><path d="M10 6.3h3.4M10 13.7h3.4"/></svg>',
+  'w-memory': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3.8 13.5a6.2 6.2 0 1 1 12.4 0"/><path d="m10 13.5 3-4"/><path d="M10 13.5h.01" stroke-width="2.4"/></svg>',
+  'w-coordinator': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 16.5h13"/><path d="M5 13.5l3.2-3.2 2.6 2.4 4.2-5.2"/><path d="M12.4 7.5H15v2.6"/></svg>',
+  'w-models': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.2 16 6.6v6.8L10 16.8 4 13.4V6.6z"/><path d="M4 6.6 10 10l6-3.4M10 10v6.8"/></svg>',
+  'w-usage': '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 16.5h13"/><path d="M5.5 13.5v-3M9 13.5V7M12.5 13.5v-4.5M16 13.5V4.5"/></svg>',
+};
+const tileIcon = (id) => { const box = el('span', 'sm-tile-icon'); box.innerHTML = TILE_ICONS[id] ?? ''; return box; }; // trusted: our own SVG strings
+const known = (id) => Object.hasOwn(HOME_TILES, id) || Object.hasOwn(WIDGETS, id);
+function readLayout() {
+  let raw = null;
+  try { raw = JSON.parse(localStorage.getItem(LAYOUT_KEY) ?? 'null'); } catch { raw = null; }
+  if (!raw || typeof raw !== 'object') return structuredClone(DEFAULT_LAYOUT);
+  const seen = new Set();
+  const clean = (list) => (Array.isArray(list) ? list : []).filter((id) => typeof id === 'string' && known(id) && !seen.has(id) && seen.add(id));
+  // An arrangement kept before the board was one (top · projects · low) reads as one order.
+  const order = clean(Array.isArray(raw.order) ? raw.order : [...(raw.top ?? []), 'projects', ...(raw.low ?? [])]);
+  // The drawer is never taken off: a list that lost it gets it back where the projects were.
+  if (!order.includes('projects')) order.splice(Math.min(order.length, 3), 0, 'projects');
+  const size = Object.fromEntries(Object.entries(raw.size ?? {}).filter(([id, span]) => known(id) && SIZES.some(([one]) => one === span)));
+  const rows = Object.fromEntries(Object.entries(raw.rows ?? {}).filter(([id, count]) => known(id) && HEIGHTS.some(([one]) => one === count)));
+  return { order, size, rows };
+}
+let layout = readLayout();
+function saveLayout() {
+  try {
+    if (JSON.stringify(layout) === JSON.stringify(DEFAULT_LAYOUT)) localStorage.removeItem(LAYOUT_KEY);
+    else localStorage.setItem(LAYOUT_KEY, JSON.stringify(layout));
+  } catch { /* the arrangement lasts as long as the page */ }
+  applyLayout();
+}
+const placed = (id) => layout.order.includes(id);
+const spanOf = (id) => layout.size[id] ?? (HOME_TILES[id] ?? WIDGETS[id]).size;
+const widgetNodes = new Map();
+function tileNode(id) {
+  if (HOME_TILES[id]) return $(HOME_TILES[id].id);
+  if (!widgetNodes.has(id)) widgetNodes.set(id, makeWidget(id));
+  return widgetNodes.get(id);
+}
+function applyLayout() {
+  const board = $(BOARD);
+  for (const id of layout.order) {
+    const node = tileNode(id);
+    if (!node) continue;
+    node.classList.remove('sm-off', 'c-3', 'c-4', 'c-5', 'c-6', 'c-8', 'c-12', 'r-1', 'r-2', 'r-3');
+    node.classList.add(`c-${spanOf(id)}`);
+    node.dataset.tile = id;
+    board.append(node);
+    tileFits.observe(node);
+  }
+  for (const id of Object.keys(HOME_TILES)) if (!placed(id)) $(HOME_TILES[id].id)?.classList.add('sm-off');
+  for (const [id, node] of widgetNodes) if (!placed(id)) { tileFits.unobserve(node); node.remove(); node.stop?.(); widgetNodes.delete(id); }
+  for (const [id, node] of widgetNodes) if (placed(id)) node.start?.();
+  fitTiles();
+}
+// Each tile is as tall as what it holds (2026-10-13): the board's rows are 4 px and a tile spans as
+// many as its content needs, plus the gap under it. A tile made wider or narrower grows or shrinks
+// with its content instead of stretching to a height chosen for another size.
+const ROW_UNIT = 96;
+const ROW_GAP = 16;
+const rowsOf = (id) => layout.rows?.[id] ?? (HOME_TILES[id] ?? WIDGETS[id])?.rows ?? 0;
+// On a middle-width screen the tiles go in pairs, half and half: a pair ends level only if both
+// are as tall, so there a short tile takes at least the three rows the others take.
+const PAIRED = window.matchMedia?.('(max-width: 1180px) and (min-width: 761px)');
+PAIRED?.addEventListener?.('change', () => fitTiles());
+function fitTile(node) {
+  const own = rowsOf(node.dataset.tile);
+  const chosen = own && PAIRED?.matches && spanOf(node.dataset.tile) < 12 ? Math.max(3, own) : own;
+  node.classList.toggle('sm-fixed', chosen > 0);
+  // How many rows it has, for the tile's own CSS: a short tile shows what matters and leaves the rest.
+  node.dataset.rows = chosen ? String(chosen) : 'auto';
+  if (chosen) { node.style.gridRow = `auto / span ${chosen}`; return; }
+  // Automatic: the rows its content needs, read at its natural height and rounded up to a whole row.
+  node.style.alignSelf = 'start';
+  const height = node.getBoundingClientRect().height;
+  node.style.alignSelf = '';
+  if (height) node.style.gridRow = `auto / span ${Math.max(1, Math.ceil((height + ROW_GAP) / (ROW_UNIT + ROW_GAP)))}`;
+}
+function fitTiles() { for (const node of $(BOARD)?.querySelectorAll(':scope > [data-tile]') ?? []) fitTile(node); }
+const tileFits = typeof ResizeObserver === 'function' ? new ResizeObserver((entries) => { for (const entry of entries) fitTile(entry.target); }) : { observe() {}, unobserve() {} };
+function moveTile(id, where) {
+  const list = layout.order;
+  const at = list.indexOf(id);
+  if (at < 0) return;
+  list.splice(at, 1);
+  const to = where === 'first' ? 0 : where === 'last' ? list.length : Math.max(0, Math.min(list.length, at + where));
+  list.splice(to, 0, id);
+  saveLayout();
+}
+function removeTile(id) {
+  if ((HOME_TILES[id] ?? WIDGETS[id])?.kept) return;
+  layout.order = layout.order.filter((one) => one !== id);
+  delete layout.size[id];
+  saveLayout();
+}
+function addTile(id) {
+  if (placed(id)) return;
+  layout.order.push(id);
+  saveLayout();
+  requestAnimationFrame(() => tileNode(id)?.scrollIntoView({ block: 'center', behavior: motionStill() ? 'auto' : 'smooth' }));
+}
+
+// The menu a right-click opens, shared by the tiles and the space between them: the same card and
+// keys as a project's menu (pinsMenu), closed the same way.
+const MOVE_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3.5v13M5.5 8 10 3.5 14.5 8M5.5 12 10 16.5 14.5 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+const BEFORE_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M12.5 4.5 7 10l5.5 5.5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+const AFTER_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M7.5 4.5 13 10l-5.5 5.5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+// A height is drawn as the rows it takes, out of five; «Automatic» as rows that follow the content.
+const heightIcon = (count) => `<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="5.2" y="2.8" width="9.6" height="14.4" rx="2.4" fill="none" stroke="currentColor" stroke-width="1.4" opacity=".45"/>${count ? `<rect x="7" y="${(15.4 - 10.8 * count / 5).toFixed(2)}" width="6" height="${(10.8 * count / 5).toFixed(2)}" rx="1.2" fill="currentColor"/>` : '<path d="M7.2 8.6 10 6l2.8 2.6M7.2 11.4 10 14l2.8-2.6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>'}</svg>`;
+// A size is drawn as the share of the row it takes: a third, a half, two thirds, all of it.
+const sizeIcon = (span) => `<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.8" y="5.2" width="14.4" height="9.6" rx="2.4" fill="none" stroke="currentColor" stroke-width="1.4" opacity=".45"/><rect x="4.6" y="7" width="${(10.8 * span / 12).toFixed(2)}" height="6" rx="1.2" fill="currentColor"/></svg>`;
+const ADD_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4.5v11M4.5 10h11" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>';
+const RESET_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4.2 8.6A6 6 0 1 1 4.8 13"/><path d="M3.8 4.6v4.2H8"/></svg>';
+const HIDE_ICON = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5.5 10h9" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>';
+function homeMenu(point, entries, label) {
+  pinsCloseMenu();
+  const menu = el('div', 'bar-card sm-menu');
+  menu.setAttribute('role', 'menu');
+  if (label) menu.setAttribute('aria-label', label);
+  for (const entry of entries) {
+    if (entry === 'sep') { menu.append(el('i', 'sm-menu-sep')); continue; }
+    if (entry.heading) { const head = el('span', 'sm-menu-head'); if (entry.tile) head.append(tileIcon(entry.tile)); head.append(el('span', null, entry.heading)); menu.append(head); continue; }
+    const one = button(`sm-menu-item${entry.danger ? ' danger' : ''}${entry.checked ? ' checked' : ''}`, null, () => { pinsCloseMenu(); entry.act(); });
+    one.setAttribute('role', entry.checked !== undefined ? 'menuitemradio' : 'menuitem');
+    if (entry.checked !== undefined) one.setAttribute('aria-checked', String(Boolean(entry.checked)));
+    if (entry.disabled) one.disabled = true;
+    one.innerHTML = entry.icon ?? ''; // trusted: our own SVG strings
+    one.append(el('span', null, entry.words));
+    menu.append(one);
+  }
+  menu.addEventListener('keydown', (key) => {
+    const items = [...menu.querySelectorAll('.sm-menu-item:not(:disabled)')];
+    const at = items.indexOf(document.activeElement);
+    if (key.key === 'ArrowDown') { key.preventDefault(); items[(at + 1) % items.length].focus(); }
+    if (key.key === 'ArrowUp') { key.preventDefault(); items[(at - 1 + items.length) % items.length].focus(); }
+  });
+  document.body.append(menu);
+  pins.menu = menu;
+  const width = menu.offsetWidth;
+  const height = menu.offsetHeight;
+  menu.style.left = `${Math.round(Math.max(8, Math.min(window.innerWidth - width - 8, point.x)))}px`;
+  menu.style.top = `${Math.round(Math.max(8, Math.min(window.innerHeight - height - 8, point.y)))}px`;
+  menu.style.right = 'auto';
+  menu.querySelector('.sm-menu-item:not(:disabled)')?.focus({ preventScroll: true });
+}
+const customized = () => JSON.stringify(layout) !== JSON.stringify(DEFAULT_LAYOUT);
+const addEntries = () => [{ words: t('Add to Home…'), icon: ADD_ICON, act: () => openHomeAdd() }, ...(customized() ? [{ words: t('Back to the default layout'), icon: RESET_ICON, act: () => { layout = structuredClone(DEFAULT_LAYOUT); saveLayout(); } }] : [])];
+function tileMenu(event, id) {
+  event.preventDefault();
+  const list = layout.order;
+  const at = list.indexOf(id);
+  const spec = HOME_TILES[id] ?? WIDGETS[id];
+  const sizes = SIZES.filter(([span]) => !spec.sizes || spec.sizes.includes(span));
+  homeMenu({ x: event.clientX, y: event.clientY }, [
+    { heading: spec.name(), tile: id },
+    { words: t('Move before'), icon: BEFORE_ICON, disabled: at <= 0, act: () => moveTile(id, -1) },
+    { words: t('Move after'), icon: AFTER_ICON, disabled: at >= list.length - 1, act: () => moveTile(id, 1) },
+    { words: t('Move to the start'), icon: MOVE_ICON, disabled: at <= 0, act: () => moveTile(id, 'first') },
+    { words: t('Move to the end'), icon: MOVE_ICON, disabled: at >= list.length - 1, act: () => moveTile(id, 'last') },
+    ...(sizes.length > 1 ? ['sep', { heading: t('Width') }, ...sizes.map(([span, words]) => ({ words: words(), icon: sizeIcon(span), checked: spanOf(id) === span, act: () => { if (span === spec.size) delete layout.size[id]; else layout.size[id] = span; saveLayout(); } }))] : []),
+    ...(spec.kept ? [] : ['sep', { heading: t('Height') }, ...HEIGHTS.map(([count, words]) => ({ words: words(), icon: heightIcon(count), checked: rowsOf(id) === count, act: () => { layout.rows ??= {}; if (count === (spec.rows ?? 0)) delete layout.rows[id]; else layout.rows[id] = count; saveLayout(); } }))]),
+    'sep',
+    ...(spec.kept ? [] : [{ words: t('Take off Home'), icon: HIDE_ICON, act: () => removeTile(id) }]),
+    ...addEntries(),
+  ], spec.name());
+}
+$(BOARD)?.addEventListener('contextmenu', (event) => {
+  // A project's card keeps its own menu (pinsMenu); the drawer around it has the tile's.
+  if (event.target.closest('input, textarea, select, [contenteditable="true"], .sm-card')) return;
+  const tile = event.target.closest('[data-tile]');
+  if (tile) { tileMenu(event, tile.dataset.tile); return; }
+  event.preventDefault();
+  homeMenu({ x: event.clientX, y: event.clientY }, addEntries(), t('Home'));
+});
+// DRAG AND DROP (2026-10-13): a tile is taken by its head and set down where it should go — in the
+// same row of tiles or the other one, above or below the projects. While it is carried the tiles
+// make room for it; let go, that order is kept. Escape, or a drop outside, puts everything back.
+const TILE_TYPE = 'application/x-madre-tile';
+let carried = null;
+const grabbable = (event) => !event.target.closest('a, button, input, select, textarea, label, svg, .sm-map, .sm-card, .sm-tools, [contenteditable="true"]') && event.target.closest('.sm-tile-head, .sm-bishop-head, .sm-bishop-words');
+{
+  const host = $(BOARD);
+  host?.addEventListener('pointerdown', (event) => {
+    const tile = event.target.closest('[data-tile]');
+    if (tile && event.button === 0 && grabbable(event)) tile.draggable = true;
+  });
+  host?.addEventListener('dragstart', (event) => {
+    const tile = event.target.closest?.('[data-tile]');
+    if (!tile || !tile.draggable) return;
+    carried = tile;
+    event.dataTransfer.setData(TILE_TYPE, tile.dataset.tile);
+    event.dataTransfer.effectAllowed = 'move';
+    pinsCloseMenu();
+    requestAnimationFrame(() => tile.classList.add('sm-carried'));
+  });
+  host?.addEventListener('dragover', (event) => {
+    if (!carried || !event.dataTransfer.types.includes(TILE_TYPE)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    const over = event.target.closest('[data-tile]');
+    if (over && !host.contains(over)) return;
+    if (!over) { if (!host.contains(carried)) host.append(carried); return; }
+    if (over === carried) return;
+    const box = over.getBoundingClientRect();
+    const after = event.clientY > box.bottom - box.height / 3 || (event.clientY > box.top + box.height / 3 && event.clientX > box.left + box.width / 2);
+    const target = after ? over.nextSibling : over;
+    if (target !== carried && carried.nextSibling !== target) host.insertBefore(carried, target);
+  });
+  host?.addEventListener('drop', (event) => {
+    if (!carried || !event.dataTransfer.types.includes(TILE_TYPE)) return;
+    event.preventDefault();
+    layout.order = [...host.children].filter((node) => node.dataset.tile && known(node.dataset.tile) && !node.classList.contains('sm-off')).map((node) => node.dataset.tile);
+    carried.classList.remove('sm-carried');
+    carried.draggable = false;
+    carried = null;
+    saveLayout();
+  });
+}
+document.addEventListener('dragend', (event) => {
+  if (!carried || event.target !== carried) return;
+  carried.classList.remove('sm-carried');
+  carried.draggable = false;
+  carried = null;
+  applyLayout();
+});
+document.addEventListener('pointerup', () => { for (const tile of document.querySelectorAll('[data-tile][draggable="true"]')) if (tile !== carried) tile.draggable = false; });
+
+// A project's card, dragged among the others (it was already dragged to the bar to pin it): the
+// cards make room as it passes, and where it is let go becomes «Yours». A search or a filter shows
+// only some of them: the ones out of sight keep their places.
+let projectCarried = null;
+ui.projects.addEventListener('dragstart', (event) => { projectCarried = event.target.closest?.('.sm-card[data-room]') ?? null; });
+ui.projects.addEventListener('dragover', (event) => {
+  if (!projectCarried || !event.dataTransfer.types.includes(PIN_TYPE)) return;
+  const over = event.target.closest('.sm-card[data-room]');
+  event.preventDefault();
+  event.dataTransfer.dropEffect = 'move';
+  if (!over || over === projectCarried) return;
+  projectCarried.classList.add('sm-carried');
+  const box = over.getBoundingClientRect();
+  const after = event.clientY > box.bottom - box.height / 3 || (event.clientY > box.top + box.height / 3 && event.clientX > box.left + box.width / 2);
+  const target = after ? over.nextSibling : over;
+  if (target !== projectCarried && projectCarried.nextSibling !== target) ui.projects.insertBefore(projectCarried, target);
+});
+ui.projects.addEventListener('drop', (event) => {
+  if (!projectCarried || !event.dataTransfer.types.includes(PIN_TYPE)) return;
+  event.preventDefault();
+  const shown = [...ui.projects.querySelectorAll('.sm-card[data-room]')].map((node) => node.dataset.room);
+  const all = projectsInOrder().all.map((room) => room.id);
+  const slots = all.map((id) => shown.includes(id));
+  let next = 0;
+  const order = all.map((id, index) => (slots[index] ? shown[next++] : id));
+  try { localStorage.setItem(PROJECT_ORDER_KEY, JSON.stringify(order)); } catch { /* the order lasts as long as the page */ }
+  projectCarried.classList.remove('sm-carried');
+  projectCarried = null;
+  saveHome('order', 'mine');
+});
+document.addEventListener('dragend', () => {
+  if (!projectCarried) return;
+  projectCarried.classList.remove('sm-carried');
+  projectCarried = null;
+  draw();
+});
+
+// THE BAR'S KEYS MOVE UNDER THE POINTER (2026-10-13), as the room's do (styles.css, «Each drawing
+// moves in its own way»): the two halves of Connections close on each other (CSS), and the planets
+// of the Project map go round their orbit while the pointer stays.
+{
+  const key = $('sm-macro');
+  const orbits = [...(key?.querySelectorAll('animateMotion') ?? [])];
+  const still = () => window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+  key?.addEventListener('pointerenter', () => { if (!still()) for (const one of orbits) one.beginElement?.(); });
+  key?.addEventListener('pointerleave', () => { for (const one of orbits) one.endElement?.(); });
+}
+
+// CARRIED TO THE EDGE (2026-10-13): while a tile or a project is carried, the page scrolls when the
+// pointer nears its top or its bottom — faster the closer it gets — so a tile goes anywhere on the
+// board without being let go. The browser's own scrolling while dragging is too slow to rely on.
+{
+  const EDGE = 96;
+  const FASTEST = 22;
+  let pointerY = null;
+  let frame = 0;
+  const carrying = () => Boolean(carried || projectCarried);
+  const step = () => {
+    frame = 0;
+    if (!carrying() || pointerY === null) return;
+    const room = window.innerHeight;
+    const near = pointerY < EDGE ? -(EDGE - pointerY) / EDGE : pointerY > room - EDGE ? (pointerY - (room - EDGE)) / EDGE : 0;
+    if (near) window.scrollBy(0, Math.round(Math.sign(near) * Math.max(2, Math.abs(near) ** 1.6 * FASTEST)));
+    frame = requestAnimationFrame(step);
+  };
+  document.addEventListener('dragover', (event) => {
+    if (!carrying()) return;
+    pointerY = event.clientY;
+    if (!frame) frame = requestAnimationFrame(step);
+  });
+  const stop = () => { pointerY = null; cancelAnimationFrame(frame); frame = 0; };
+  document.addEventListener('drop', stop);
+  document.addEventListener('dragend', stop);
+}
+
+// The space around the projects, right-clicked, offers the same.
+document.querySelector('.sm-main')?.addEventListener('contextmenu', (event) => {
+  if (event.defaultPrevented || event.target.closest('.sm-tile, .sm-card, input, textarea, select, a, button, dialog')) return;
+  event.preventDefault();
+  homeMenu({ x: event.clientX, y: event.clientY }, addEntries(), t('Home'));
+});
+
+// «Add to Home»: the tiles taken off and the widgets not yet on it, each said in a line, with what
+// it would need when nothing feeds it yet.
+let homeAddSheet = null;
+async function openHomeAdd() {
+  homeAddSheet?.remove();
+  homeAddSheet = el('dialog', 'sm-sheet sm-add-sheet');
+  const body = el('div', 'sm-sheet-body');
+  const head = el('header', 'sm-sheet-head');
+  head.append(el('h3', null, t('Add to Home')));
+  // The same ✕ as every sheet of Home (the connections, the settings).
+  const keys = el('span', 'surface-modes');
+  const close = button('surface-mode close x-close x-only', null, () => homeAddSheet.close());
+  close.setAttribute('aria-label', t('Close'));
+  close.innerHTML = '<span class="x-icon"><svg viewBox="0 0 20 20" focusable="false" aria-hidden="true"><path d="M5.5 5.5l9 9M14.5 5.5l-9 9" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>'; // trusted
+  keys.append(close);
+  head.append(keys);
+  body.append(head, el('p', 'hint', t('Tiles you took off and widgets you can put on Home. Right-click any tile to move it, resize it or take it off.')));
+  const list = el('div', 'sm-add-list');
+  body.append(list);
+  homeAddSheet.append(body);
+  homeAddSheet.addEventListener('close', () => { homeAddSheet?.remove(); homeAddSheet = null; });
+  document.body.append(homeAddSheet);
+  homeAddSheet.showModal();
+  void homeTour.hint('home-add', list, { inside: true, title: t('Add to Home'), text: t('The tiles you took off, and the widgets. A widget is offered only when something on this Mac feeds it; right-click any tile to move it, resize it or take it off.') });
+  // The author's widget is asked about before the list is drawn: where it cannot be read, it is not listed at all.
+  const ownerOk = new Set();
+  for (const [id, spec] of Object.entries(WIDGETS).filter(([id, spec]) => spec.owner && !placed(id))) {
+    if (await fetch(`/api/salas/widget?kind=${spec.kind}`, { cache: 'no-store' }).then((response) => response.ok).catch(() => false)) ownerOk.add(id);
+  }
+  if (!homeAddSheet) return;
+  const entries = [
+    ...Object.entries(HOME_TILES).filter(([id]) => !placed(id)).map(([id, spec]) => ({ id, spec, ready: true })),
+    ...Object.entries(WIDGETS).filter(([id, spec]) => !placed(id) && (!spec.owner || ownerOk.has(id))).map(([id, spec]) => ({ id, spec, ready: null })),
+  ];
+  if (!entries.length) { list.append(el('p', 'sm-hint', t('Everything is already on Home.'))); return; }
+  for (const entry of entries) {
+    const row = el('div', 'sm-add-row');
+    row.append(tileIcon(entry.id));
+    const words = el('div', 'sm-add-words');
+    words.append(el('b', null, entry.spec.name()), el('small', null, entry.spec.about()));
+    const said = el('small', 'sm-add-need');
+    words.append(said);
+    const add = button('sm-btn primary small', t('Add'), () => { addTile(entry.id); homeAddSheet?.close(); });
+    row.append(words, add);
+    list.append(row);
+    // A widget is offered only when something feeds it: asked of the server, which says so.
+    if (entry.ready === null) {
+      add.disabled = true;
+      said.textContent = t('Checking…');
+      const reading = await fetch(`/api/salas/widget?kind=${entry.spec.kind}`, { cache: 'no-store' }).then((response) => (response.ok ? response.json() : { failed: response.status })).catch(() => ({ failed: true }));
+      if (!row.isConnected) return;
+      const ok = Boolean(reading?.available);
+      add.disabled = !ok;
+      // A page served by a project started before widgets existed cannot read them: said as that,
+      // not as a Mac with nothing to show.
+      said.textContent = ok ? '' : reading.failed === 404 ? t('This page is served by a project started before widgets existed: open Home from its own address, or restart that project.') : reading.failed ? t('It could not be read just now.') : (entry.spec.needs?.() ?? t('Nothing feeds it on this Mac yet.'));
+    }
+  }
 }
 
+// ---- The widgets. Each is a tile that reads its own route every 20 s while Home is in view.
+const pct = (value) => (value === null || value === undefined ? '—' : `${Math.round(value * 100)}%`);
+const gb = (bytes) => `${(bytes / 1024 ** 3).toFixed(1)} GB`;
+function meter(value, tone = null) {
+  const bar = el('span', `sm-meter${tone ? ` ${tone}` : ''}`);
+  const fill = el('i');
+  fill.style.width = `${Math.round(Math.max(0, Math.min(1, value ?? 0)) * 100)}%`;
+  bar.append(fill);
+  return bar;
+}
+const toneFor = (share) => (share >= 0.85 ? 'hot' : share >= 0.6 ? 'warm' : null);
+const OS_WORDS = { darwin: 'macOS', linux: 'Linux', win32: 'Windows', other: () => t('other') };
+const WIDGET_PAINT = {
+  usage(body, reading) {
+    if (!reading.available) { body.append(el('p', 'sm-hint', reading.status ? t('madre.run answered {status}.', { status: reading.status }) : t('madre.run could not be reached.'))); return; }
+    const grid = el('div', 'sm-w-grid sm-usage-figures');
+    for (const [label, n, line] of [[t('Today'), reading.active.day, t('copies on')], [t('7 days'), reading.active.week, t('active copies')], [t('30 days'), reading.active.month, t('active copies')], [t('Ever'), reading.active.ever, t('copies seen')]]) {
+      const cell = el('div', 'sm-w-metric');
+      cell.append(el('span', 'sm-w-label', label), el('b', 'sm-w-big', Number(n).toLocaleString()), el('small', null, line));
+      grid.append(cell);
+    }
+    body.append(grid);
+    // The last 30 days: copies on each day, and the part of them seen for the first time.
+    const top = Math.max(1, ...reading.days.map((one) => one.active));
+    const days = el('div', 'sm-usage-days');
+    days.setAttribute('role', 'img');
+    days.setAttribute('aria-label', t('Copies on each day, last 30 days'));
+    for (const one of reading.days) {
+      const bar = el('i');
+      bar.style.setProperty('--h', String(one.active / top));
+      bar.style.setProperty('--new', String(one.active ? one.new / one.active : 0));
+      bar.title = t('{day}: {n} on · {fresh} new', { day: one.day, n: one.active, fresh: one.new });
+      days.append(bar);
+    }
+    body.append(days);
+    const share = (list, word = (name) => name) => list.slice(0, 4).map((one) => `${typeof word(one.name) === 'function' ? word(one.name)() : word(one.name)} ${one.n}`).join(' · ') || '—';
+    const back = (part) => (part.cohort ? `${Math.round((part.back / part.cohort) * 100)}%` : '—');
+    const lines = el('div', 'sm-usage-lines');
+    for (const [label, said] of [
+      [t('Versions'), share(reading.versions)],
+      [t('Systems'), share(reading.os, (name) => OS_WORDS[name] ?? name)],
+      [t('Came back'), t('after 1 day {d1} · 7 days {d7} · 30 days {d30}', { d1: back(reading.retention.d1), d7: back(reading.retention.d7), d30: back(reading.retention.d30) })],
+    ]) {
+      const row = el('div', 'sm-w-line');
+      row.append(el('b', null, label), el('small', null, said));
+      lines.append(row);
+    }
+    body.append(lines);
+  },
+  system(body, reading) {
+    const cpu = el('div', 'sm-w-metric');
+    cpu.append(el('span', 'sm-w-label', t('Processor')), el('b', 'sm-w-big', pct(reading.cpu.busy)), meter(reading.cpu.busy, toneFor(reading.cpu.busy ?? 0)), el('small', null, t('{n} cores · load {load}', { n: reading.cpu.cores, load: reading.cpu.load[0] })));
+    const used = reading.memory.total ? 1 - reading.memory.free / reading.memory.total : null;
+    const mem = el('div', 'sm-w-metric');
+    mem.append(el('span', 'sm-w-label', t('Memory')), el('b', 'sm-w-big', t('{free} free', { free: gb(reading.memory.free) })), meter(used, toneFor(used ?? 0)), el('small', null, t('of {total}. The system lends what is free to its cache and takes it back when needed.', { total: gb(reading.memory.total) })));
+    const grid = el('div', 'sm-w-grid');
+    grid.append(cpu, mem);
+    body.append(grid);
+  },
+  servers(body, reading) {
+    const running = reading.projects.flatMap((one) => one.ports.map((port) => ({ ...port, project: one.name })));
+    if (!running.length) body.append(el('p', 'sm-hint', reading.projects.some((one) => one.preview) ? t('No server is running in your open projects.') : t('Turn on Preview in a project\'s Modules to see its servers.')));
+    const grid = el('div', 'sm-w-grid');
+    for (const one of running) {
+      const healthy = one.status !== null && one.status < 500;
+      const row = el('div', `sm-w-row${healthy ? ' ok' : ' bad'}`);
+      row.append(el('i', 'sm-w-dot'), el('b', null, `:${one.port}`), el('span', null, one.project), el('small', null, one.status ? t('answers {status}', { status: one.status }) : t('no answer')));
+      grid.append(row);
+    }
+    if (running.length) body.append(grid);
+    const off = reading.projects.filter((one) => !one.preview && !one.unreachable).length;
+    if (off && running.length) body.append(el('small', 'sm-w-foot', off === 1 ? t('1 project has Preview off.') : t('{n} projects have Preview off.', { n: off })));
+  },
+  memory(body, reading) {
+    const read = reading.projects.filter((one) => !one.unreachable);
+    if (!read.length) { body.append(el('p', 'sm-hint', t('Open a project to read its memory.'))); return; }
+    const grid = el('div', 'sm-w-grid');
+    body.append(grid);
+    for (const one of read) {
+      const row = el('div', 'sm-w-project');
+      const top = el('div', 'sm-w-line');
+      top.append(el('b', null, one.name), el('span', 'sm-w-stage', one.stage ?? '—'), el('small', null, pct(one.score)));
+      row.append(top, meter(one.score));
+      const notes = [one.weakest?.label ? t('weakest: {what}', { what: one.weakest.label.toLowerCase() }) : null, one.aberrations ? t('{n} odd memories', { n: one.aberrations }) : null].filter(Boolean);
+      if (notes.length) row.append(el('small', null, notes.join(' · ')));
+      grid.append(row);
+    }
+  },
+  coordinator(body, reading) {
+    const share = reading.target ? reading.pairs / reading.target : 0;
+    const top = el('div', 'sm-w-line');
+    top.append(el('b', 'sm-w-big', `${reading.pairs}`), el('span', null, t('of {n} exchanges to train on', { n: reading.target })));
+    body.append(top, meter(share));
+    body.append(el('p', 'sm-w-says', [reading.stage, reading.says].filter(Boolean).join(' · ')));
+    const facts = [t('{n} memories', { n: reading.notes ?? 0 }), reading.trained ? t('model {name}', { name: reading.trained }) : t('no model of its own yet')];
+    body.append(el('small', 'sm-w-foot', facts.join(' · ')));
+  },
+  models(body, reading) {
+    const head = el('div', `sm-w-row${reading.ollama.running ? ' ok' : ' bad'}`);
+    head.append(el('i', 'sm-w-dot'), el('b', null, 'Ollama'), el('span', null, reading.ollama.running ? t('{n} models on this Mac', { n: reading.ollama.models.length }) : t('not running')));
+    // Which projects use it is set in Home's Settings › Local AI.
+    const tune = button('sm-w-link', t('Choose projects'), (event) => { event.stopPropagation(); openSettings('local'); });
+    head.append(tune);
+    body.append(head);
+    if (reading.ollama.models.length) body.append(el('small', 'sm-w-foot mono', reading.ollama.models.slice(0, 4).join(' · ') + (reading.ollama.models.length > 4 ? ' …' : '')));
+    const grid = el('div', 'sm-w-grid');
+    body.append(grid);
+    for (const one of reading.projects.filter((project) => !project.unreachable)) {
+      const row = el('div', 'sm-w-project');
+      const top = el('div', 'sm-w-line');
+      const ready = one.pairs >= one.target;
+      const count = el('small', null, one.trained ? t('trained · {name}', { name: one.trained }) : ready ? t('ready to train') : `${one.pairs}/${one.target}`);
+      count.title = t('{n} of {target} examples this project needs to train a model of its own', { n: one.pairs, target: one.target });
+      top.append(el('b', null, one.name));
+      if (one.localAi === false) { row.classList.add('sm-w-off'); top.append(el('span', 'sm-w-tag', t('without local AI'))); }
+      top.append(count);
+      row.append(top, meter(one.trained ? 1 : one.target ? one.pairs / one.target : 0));
+      grid.append(row);
+    }
+  },
+};
+function makeWidget(id) {
+  const spec = WIDGETS[id];
+  if (!spec) return null;
+  const node = el('section', `sm-tile sm-widget w-${spec.kind}`);
+  const head = el('header', 'sm-tile-head');
+  head.append(el('h2', null, spec.name()));
+  const body = el('div', 'sm-w-body');
+  body.append(el('p', 'sm-hint', t('Reading…')));
+  node.append(head, body);
+  let timer = 0;
+  const read = async () => {
+    if (document.hidden || !node.isConnected) return;
+    const reading = await fetch(`/api/salas/widget?kind=${spec.kind}`, { cache: 'no-store' }).then((response) => (response.ok ? response.json() : null)).catch(() => null);
+    if (!node.isConnected) return;
+    body.replaceChildren();
+    // The author's widget is not there at all for a copy that cannot read it (no token, not from source).
+    if (spec.owner) node.hidden = !reading;
+    if (!reading) { body.append(el('p', 'sm-hint', t('It could not be read just now.'))); return; }
+    WIDGET_PAINT[spec.kind](body, reading);
+    fitTile(node);
+    // The first time it shows, what it is (homeTour is set up below this, so it is read late).
+    if (!node.dataset.guided) { node.dataset.guided = '1'; setTimeout(() => { try { guideWidget(node, spec.kind); } catch { /* the tour is not up yet */ } }, 1500); }
+  };
+  node.start = () => { if (timer) return; void read(); timer = setInterval(() => void read(), 20000); };
+  node.stop = () => { clearInterval(timer); timer = 0; };
+  return node;
+}
+applyLayout();
+
 // THE WELCOME OF 1.0 (public/tour.js): the bonjour the first time, the chapters after it, the pill
 // that waits in the bar, `?` for the gestures, and the hint on Connections. In Home, «Take me
 // there» opens what lives here; for what lives inside a project it opens the one open most
@@ -888,9 +1820,43 @@ const homeTour = startTour({
     links: () => openLinkSheet(),
     get maps() { return ui.macro.hidden ? undefined : () => ui.macro.click(); },
     settings: () => openSettings(),
+    local: () => openSettings('local'),
     gestures: () => homeTour.openGestures(),
   },
 });
+// What each key of Home's bar opens, said the first time it opens (public/tour.js, firstOpen).
+const topSheet = () => [...document.querySelectorAll('dialog[open]')].at(-1) ?? null;
+homeTour.firstOpen('home-links', ui.bar.links, {
+  opened: topSheet,
+  inside: (box) => box.querySelector('.sm-link-list, .sm-sheet-body'),
+  title: () => t('Connections'),
+  text: () => t('Which projects can look up what another learned, and the contract each one signed. Nothing is shared without your signature, and you can cancel any connection here.'),
+});
+homeTour.firstOpen('home-map', ui.macro, {
+  title: () => t('Project map'),
+  text: () => t('Your projects as a map. Drag one onto another to connect them, click one to go to it, and press Esc to come back.'),
+  after: 900,
+});
+homeTour.firstOpen('home-settings', ui.gear, {
+  opened: () => document.querySelector('dialog.sm-settings[open]'),
+  inside: (box) => box.querySelector('.sm-settings-window'),
+  title: () => t('Home settings'),
+  text: () => t('How Home looks and what its bar holds, your agents, the Coordinator, which projects use the local AI, your projects and the version. ⌘ , opens it from anywhere.'),
+});
+// What each widget shows, the first time it is on Home: its own line, and how to change it.
+const WIDGET_GUIDE = {
+  system: () => t('How busy this Mac\'s processor is and how much memory is free. It updates on its own.'),
+  servers: () => t('The servers running in your open projects and whether they answer. A project shows here when its Preview is on.'),
+  memory: () => t('How grown each open project\'s memory is, and its weakest side: the one thing that would improve it most.'),
+  coordinator: () => t('How far the Coordinator\'s own record is from training a model of its own.'),
+  models: () => t('Ollama and its models, and how many examples each project has toward a model of its own (8/300 is 8 of 300). «Choose projects» sets which ones use the local AI.'),
+  usage: () => t('How many copies of MADRE are on, which versions and whether people come back. Only you see this.'),
+};
+function guideWidget(node, kind) {
+  const said = WIDGET_GUIDE[kind];
+  if (!said) return;
+  void homeTour.hint(`w-${kind}`, node.querySelector('.sm-tile-head') ?? node, { title: WIDGETS[`w-${kind}`]?.name() ?? '', text: `${said()} ${t('Right-click it to change its size or take it off.')}` });
+}
 // Once Home has drawn: the bonjour if it is owed; if it was given, the hint on Connections — what
 // it is, and, for whoever came from 0.7.2, what the word meant before.
 let welcomeAsked = false;
@@ -1307,8 +2273,12 @@ function openLinkSheet({ reader = null, source = null } = {}) {
 }
 ui.link.addEventListener('click', () => openLinkSheet());
 
+let refreshPending = null;
 async function refresh() {
-  const answer = await fetch('/api/salas', { cache: 'no-store' }).then((response) => (response.ok ? response.json() : null)).catch(() => null);
+  if (refreshPending) return refreshPending;
+  refreshPending = fetch('/api/salas', { cache: 'no-store' }).then((response) => (response.ok ? response.json() : null)).catch(() => null);
+  const answer = await refreshPending;
+  refreshPending = null;
   if (!answer) { ui.foot.textContent = t('This project did not answer. It may have closed.'); ui.bar.live.classList.add('is-off'); ui.bar.live.lastChild.textContent = t('Not answering right now'); return; }
   if (answer.language && answer.language !== language) { language = setLanguage(answer.language); root.lang = language; translateStatic(); drawAttention(); drawDecisions(); drawWork(); homeTour.repaint(); }
   data = answer;
@@ -1937,6 +2907,14 @@ function pinsMenu(event, room, at = null) {
   item(on ? t('Remove from the bar') : t('Pin to the bar'), on ? UNPIN_ICON : PIN_ICON, () => (on ? pinRemove(room.id) : pinAdd(room.id)));
   item(t('Arrange the bar'), ARRANGE_ICON, () => pinsEdit(true));
   menu.append(el('i', 'sm-menu-sep'));
+  // Where it sits among the projects: moved by hand, the order becomes «Yours».
+  const order = projectsInOrder().all.map((one) => one.id);
+  const place = order.indexOf(room.id);
+  if (place > 0) item(t('Move before'), BEFORE_ICON, () => moveProject(room.id, -1));
+  if (place >= 0 && place < order.length - 1) item(t('Move after'), AFTER_ICON, () => moveProject(room.id, 1));
+  if (place > 0) item(t('Move to the start'), BEFORE_ICON, () => moveProject(room.id, 'first'));
+  item(t('Add to Home…'), ADD_ICON, () => openHomeAdd());
+  menu.append(el('i', 'sm-menu-sep'));
   item(t('Remove from MADRE…'), FORGET_ICON, () => { forgetting.add(room.id); asking.delete(room.id); failed.delete(room.id); draw(); }, { danger: true });
   menu.addEventListener('keydown', (key) => {
     const items = [...menu.querySelectorAll('.sm-menu-item')];
@@ -2127,7 +3105,9 @@ function drawBishop(room) {
   const b = ui.bishop;
   const glance = room?.glance ?? {};
   const state = room?.open ? stateOf(room) : { key: 'asleep', words: t('Asleep') };
-  b.box.className = `sm-tile sm-bishop c-8 r-3 is-${state.key}`;
+  // Only its state: its size is the person's (applyLayout), and a class written whole took it back.
+  for (const one of [...b.box.classList]) if (one.startsWith('is-')) b.box.classList.remove(one);
+  b.box.classList.add(`is-${state.key}`);
   b.state.querySelector('span').textContent = state.words;
   const waking = busy.get(data?.salas) === 'starting';
   for (const way of [b.go, b.tab]) way.setAttribute('aria-disabled', String(waking));
@@ -2437,44 +3417,281 @@ function openAddSheet() {
 }
 ui.add.addEventListener('click', openAddSheet);
 
-// The agents of this computer, each with its session and the one action it needs (install, or
-// sign in), kept current while it is on screen: polled, and told by the room's events what an
-// install or a sign-in says as it goes. The wizard's first step and the settings sheet show it.
-function agentsPanel({ onPaint = null } = {}) {
+// The agents of this computer, with everything a connection needs in one place: which account
+// each one signs in with, the doors it has, the box where a pasted key goes, the address a
+// sign-in opened and the code that page gives back. Home used to show a name, a lamp and one
+// button — the project's panel had the rest, so the same errand was two different screens.
+// Kept current while it is on screen: polled, and told by the room's events how it is going.
+// `compact` is the welcome's first step: there, a connected agent is done, and a button to change
+// the account it signs in with is a question nobody asked on their first minute.
+// Who makes each agent, said under its name as the project's AJUSTES says it.
+const VENDOR_WORDS = { codex: 'OpenAI', claude: 'Anthropic', gemini: 'Google', opencode: 'OpenCode' };
+
+// OpenCode's providers in Home, the same block as the project's AJUSTES › Agents › OpenCode: a line
+// per provider with a key or an account and its switch for the chat, one row to add another, and
+// the model it answers with by default. Asked of the server once a minute at most, because asking
+// runs `opencode models`; a change asks again at once.
+const openCodeProviders = (() => {
+  let reading = null;
+  let at = 0;
+  let host = null;
+  const fetchNow = async () => {
+    reading = await fetch('/api/agents/opencode/providers', { cache: 'no-store' }).then((response) => response.json().then((json) => ({ ok: response.ok, json }))).catch(() => ({ ok: false, json: {} }));
+    at = Date.now();
+    paintInto();
+  };
+  const sendKey = (path, payload) => fetch(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
+    .then(async (response) => ({ ok: response.ok, body: await response.json().catch(() => ({})) })).catch(() => ({ ok: false, body: {} }));
+  const switchFor = (on, change, label) => {
+    const wrap = el('label', 'settings-switch');
+    const box = el('input'); box.type = 'checkbox'; box.checked = on; box.setAttribute('aria-label', label);
+    box.addEventListener('change', () => void change(box.checked, box));
+    wrap.append(box, el('i'));
+    return wrap;
+  };
+  function paintInto() {
+    if (!host?.isConnected) return;
+    host.replaceChildren(el('b', 'sm-oc-title', t('Providers')));
+    if (!reading) { host.append(el('small', 'sm-agent-note', t('Reading OpenCode\'s providers…'))); return; }
+    if (!reading.ok) { host.append(el('small', 'sm-agent-note', reading.json.error ?? t('OpenCode\'s providers could not be read.'))); return; }
+    const providers = reading.json.providers ?? [];
+    const hidden = new Set(providers.filter((one) => one.hidden).map((one) => one.id));
+    for (const provider of providers.filter((one) => one.via)) {
+      const row = el('div', 'sm-oc-row');
+      const words = el('span', 'sm-agent-words');
+      const status = provider.via === 'own' ? t('Included with OpenCode · {n} models', { n: provider.models.length })
+        : provider.via === 'api' ? t('Connected with a key · {n} models', { n: provider.models.length })
+          : provider.via === 'oauth' ? t('Connected with its account · {n} models', { n: provider.models.length })
+            : t('Connected · {n} models', { n: provider.models.length });
+      words.append(el('b', null, provider.label), el('small', 'sm-agent-note', status));
+      const controls = el('span', 'sm-oc-controls');
+      if (provider.via === 'api') {
+        const remove = button('sm-btn ghost small', t('Remove the key'), async () => {
+          if (remove.dataset.sure !== '1') { remove.dataset.sure = '1'; remove.textContent = t('Remove it?'); return; }
+          remove.disabled = true;
+          const answer = await sendKey('/api/agents/opencode/providers/remove', { provider: provider.id });
+          if (!answer.ok) { remove.disabled = false; remove.textContent = answer.body.error ?? t('The key was not removed.'); return; }
+          void fetchNow();
+        });
+        controls.append(remove);
+      }
+      const label = el('span', 'sm-oc-shown', t('In the chat'));
+      controls.append(label, switchFor(!provider.hidden, async (on, box) => {
+        if (on) hidden.delete(provider.id); else hidden.add(provider.id);
+        const answer = await sendKey('/api/settings', { opencode: { hidden: [...hidden] } });
+        if (!answer.ok) { box.checked = !on; if (on) hidden.add(provider.id); else hidden.delete(provider.id); }
+      }, t('Show {provider} in the chat', { provider: provider.label })));
+      row.append(words, controls);
+      host.append(row);
+    }
+    const waiting = providers.filter((one) => !one.via && one.takesKey);
+    if (waiting.length) {
+      const form = el('form', 'sm-agent-key-form sm-oc-add');
+      const which = el('select');
+      which.setAttribute('aria-label', t('Provider'));
+      for (const provider of waiting) { const option = el('option', null, provider.label); option.value = provider.id; which.append(option); }
+      const input = el('input');
+      input.type = 'password'; input.autocomplete = 'off'; input.spellcheck = false;
+      const link = el('a', 'sm-agent-key-link', t('Where do I get one?'));
+      link.target = '_blank'; link.rel = 'noopener';
+      const said = el('small', 'sm-agent-line');
+      const sync = () => {
+        const provider = waiting.find((one) => one.id === which.value);
+        input.placeholder = t('{provider} API key', { provider: provider?.label ?? '' });
+        link.hidden = !provider?.keyUrl;
+        if (provider?.keyUrl) link.href = provider.keyUrl;
+      };
+      which.addEventListener('change', sync);
+      sync();
+      const save = el('button', 'sm-btn primary small', t('Add'));
+      save.type = 'submit';
+      form.append(which, input, save, link, said);
+      form.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        if (!input.value.trim()) { input.focus(); return; }
+        save.disabled = true;
+        said.textContent = t('Checking…');
+        const answer = await sendKey('/api/agents/opencode/key', { key: input.value.trim(), provider: which.value });
+        input.value = '';
+        save.disabled = false;
+        if (answer.ok) void fetchNow(); else said.textContent = answer.body.error ?? t('The key was not accepted.');
+      });
+      host.append(el('b', 'sm-oc-title', t('Add a provider')), form);
+    }
+  }
+  return {
+    node() {
+      // The same node across the panel's repaints, so a key being typed is never thrown away.
+      host ??= el('div', 'sm-oc');
+      if (!reading || Date.now() - at > 60000) void fetchNow(); else paintInto();
+      return host;
+    },
+  };
+})();
+
+function agentsPanel({ onPaint = null, compact = false } = {}) {
   const list = el('div', 'sm-agents');
   const lastLine = new Map();   // agent → what its install or sign-in said last
+  const openMore = new Set();   // agents whose connection detail is unfolded
+  const toggleMore = (id) => { if (openMore.has(id)) openMore.delete(id); else openMore.add(id); };
+  let live = null;              // the sign-in running right now, as the server tells it
   let poll = 0;
   let stream = null;
+
+  // The second half of a browser sign-in: the address stays put, and the code that page hands
+  // back is typed here. Without it the sign-in could only wait until its clock killed it.
+  const askBlock = (agent) => {
+    if (!live || live.agent !== agent.id) return null;
+    const box = el('div', 'sm-agent-ask');
+    if (live.url) {
+      const open = el('a', 'sm-btn primary small', t('Open the sign-in page'));
+      open.href = live.url;
+      open.target = '_blank';
+      open.rel = 'noopener';
+      box.append(open);
+    }
+    if (live.asksForCode || live.awaitingCode) {
+      const form = el('form', 'sm-agent-code');
+      const input = el('input');
+      input.type = 'text';
+      input.autocomplete = 'off';
+      input.spellcheck = false;
+      input.placeholder = t('Paste the code the page gave you');
+      const send = el('button', 'sm-btn primary small', t('Send the code'));
+      send.type = 'submit';
+      const said = el('small', 'sm-agent-line');
+      form.append(input, send, said);
+      form.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        send.disabled = true;
+        said.textContent = t('Checking…');
+        const answer = await post(`/api/agents/${agent.id}/login/code`, { code: input.value });
+        if (answer.ok) { input.value = ''; said.textContent = t('Sent. The sign-in finishes on its own.'); }
+        else said.textContent = answer.body.error ?? t('The code was not accepted.');
+        send.disabled = false;
+      });
+      box.append(form);
+    }
+    box.append(button('sm-btn ghost small', t('Cancel the sign-in'), async (event) => { event.currentTarget.disabled = true; await post(`/api/agents/${agent.id}/login/cancel`); void paint(); }));
+    return box;
+  };
+
+  // Handing a key to a CLI, with the same promise the project's panel makes: it is written where
+  // that CLI reads it, MADRE keeps no copy, and the CLI itself says whether it took.
+  const keyForm = (agent) => {
+    const plan = agent.key;
+    const form = el('form', 'sm-agent-key-form');
+    let select = null;
+    if (plan.providers) {
+      select = el('select');
+      select.setAttribute('aria-label', t('Provider'));
+      for (const provider of plan.providers) { const option = el('option', null, provider.label); option.value = provider.id; select.append(option); }
+      form.append(select);
+    }
+    const input = el('input');
+    input.type = 'password';
+    input.autocomplete = 'off';
+    input.spellcheck = false;
+    input.placeholder = t(plan.label);
+    const save = el('button', 'sm-btn primary small', t('Save the key'));
+    save.type = 'submit';
+    form.append(input, save);
+    const said = el('small', 'sm-agent-line');
+    const keyUrl = plan.providers ? (plan.providers[0]?.keyUrl ?? null) : plan.keyUrl;
+    if (keyUrl) {
+      const link = el('a', 'sm-agent-key-link', t('Where do I get one?'));
+      link.href = keyUrl;
+      link.target = '_blank';
+      link.rel = 'noopener';
+      form.append(link);
+      select?.addEventListener('change', () => { const next = plan.providers.find((one) => one.id === select.value)?.keyUrl; if (next) link.href = next; });
+    }
+    form.append(said, el('small', 'sm-agent-note', t(plan.note)));
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      save.disabled = true;
+      said.textContent = t('Checking…');
+      const answer = await post(`/api/agents/${agent.id}/key`, { key: input.value, provider: select?.value ?? null });
+      if (answer.ok) { input.value = ''; openMore.delete(agent.id); void paint(); }
+      else { said.textContent = answer.body.error ?? t('The key was not accepted.'); save.disabled = false; }
+    });
+    return form;
+  };
+
   const paint = async () => {
     const answer = await fetch('/api/settings', { cache: 'no-store' }).then((response) => response.json()).catch(() => null);
     if (!answer?.agents) return;
     agentsSeen = answer;
     drawAttention();
-    list.replaceChildren();
+    live = answer.login ?? null;
     let ready = 0;
+    for (const agent of answer.agents.filter((one) => one.id !== 'madre')) if (agentState(agent, answer).ok) ready += 1;
+    // A field being typed into is never yanked away by the poll: the panel redraws every few
+    // seconds, and a half-pasted key or code would go with it.
+    if (list.contains(document.activeElement) && ['INPUT', 'SELECT'].includes(document.activeElement.tagName)) { onPaint?.(ready, answer); return; }
+    list.replaceChildren();
     for (const agent of answer.agents.filter((one) => one.id !== 'madre')) {
       const state = agentState(agent, answer);
-      if (state.ok) ready += 1;
-      const item = el('div', `sm-agent${state.ok ? ' ok' : ''}`);
+      // The project's AJUSTES design (2026-10-13): one card per agent, folded to a line that says
+      // who it is and whether it has a session. One that needs the person opens by itself.
+      const unfolded = openMore.has(agent.id) || !state.ok || state.busyNow || (live && live.agent === agent.id);
+      const item = el('section', `sm-agent${state.ok ? ' ok' : ''}${unfolded ? ' open' : ''}`);
+      item.dataset.agent = agent.id;
+      const head = button('sm-agent-head', null, () => { toggleMore(agent.id); if (!openMore.has(agent.id) && !state.ok) openMore.add(agent.id); void paint(); });
+      head.setAttribute('aria-expanded', String(unfolded));
       const words = el('span', 'sm-agent-words');
-      words.append(el('b', null, agent.label ?? agent.id));
-      words.append(el('small', `session-lamp ${state.key}`, state.words));
+      words.append(el('b', null, agent.label ?? agent.id), el('small', null, VENDOR_WORDS[agent.id] ?? ''));
+      const chip = el('span', `sm-agent-chip session-lamp ${state.key}`);
+      chip.append(el('span', null, state.words));
+      head.append(mark(agent.id, 34), words, chip, el('span', 'sm-chevron'));
+      item.append(head);
+      const body = el('div', 'sm-agent-body');
+      // Which account it is signed in with, as its own CLI reports it, and which one it asks for.
+      const facts = el('div', 'sm-agent-facts');
+      if (agent.detected && agent.version) facts.append(el('code', 'sm-agent-line', `${agent.version}${agent.path ? ` · ${agent.path}` : ''}`));
+      if (agent.detected && answer.sessions?.[agent.id]?.detail) facts.append(el('small', 'sm-agent-line', answer.sessions[agent.id].detail));
+      if (agent.account) facts.append(el('small', 'sm-agent-note', agent.account));
       if (lastLine.has(agent.id) && !state.ok) {
         const said = lastLine.get(agent.id);
         const line = el('small', 'sm-agent-line', said.line);
         if (said.url) { const link = el('a', null, t('Open the sign-in page')); link.href = said.url; link.target = '_blank'; link.rel = 'noopener'; line.append(' ', link); }
-        words.append(line);
+        facts.append(line);
       }
-      item.append(mark(agent.id, 34), words);
-      if (!state.ok && !state.busyNow) {
-        if (!agent.detected && agent.install) item.append(button('sm-btn ghost small', t('Install'), async (event) => { event.currentTarget.disabled = true; await post(`/api/agents/${agent.id}/install`); void paint(); }));
-        else if (agent.detected && agent.login) item.append(button('sm-btn ghost small', t('Sign in'), async (event) => { event.currentTarget.disabled = true; await post(`/api/agents/${agent.id}/login`); void paint(); }));
+      if (facts.childNodes.length) body.append(facts);
+      // One button per account the CLI can sign in with: Claude has two, and only the human can
+      // say which one is paying.
+      const doorKeys = () => {
+        const doors = agent.login?.methods?.length ? agent.login.methods : [{ id: null, label: null, note: agent.login?.note }];
+        return doors.map((door) => {
+          const name = door.label ? t(door.label) : state.ok ? t('Sign in again') : t('Sign in');
+          const key = button(`sm-btn ${state.ok ? '' : 'primary'} small`, name, async (event) => {
+            event.currentTarget.disabled = true;
+            await post(`/api/agents/${agent.id}/login`, { method: door.id });
+            void paint();
+          });
+          if (door.note) key.title = t(door.note);
+          return key;
+        });
+      };
+      const acts = el('div', 'sm-agent-acts');
+      if (!state.busyNow) {
+        if (!agent.detected && agent.install) acts.append(button('sm-btn primary small', t('Install'), async (event) => { event.currentTarget.disabled = true; await post(`/api/agents/${agent.id}/install`); void paint(); }));
+        else if (agent.detected && agent.login?.headless) for (const key of doorKeys()) acts.append(key);
       }
+      if (acts.childNodes.length) body.append(acts);
+      const ask = askBlock(agent);
+      if (ask) body.append(ask);
+      // A key, pasted here; OpenCode's are its providers', in the block below.
+      if (agent.detected && agent.key && agent.id !== 'opencode') body.append(keyForm(agent));
+      // A CLI that signs in from its own prompt gets the command, until it has a session.
+      if (agent.detected && agent.login && !agent.login.headless && !state.ok) body.append(el('code', 'sm-agent-command', agent.login.display));
+      if (agent.id === 'opencode' && agent.detected) body.append(openCodeProviders.node());
+      item.append(body);
       list.append(item);
     }
     onPaint?.(ready, answer);
   };
-  const live = () => {
+  const liveOn = () => {
     if (!list.isConnected || poll) return;
     poll = setInterval(() => { if (!document.hidden) void paint(); }, 2500);
     try {
@@ -2489,7 +3706,7 @@ function agentsPanel({ onPaint = null } = {}) {
     } catch { /* no stream: the poll keeps it current */ }
   };
   const stop = () => { clearInterval(poll); poll = 0; stream?.close(); stream = null; };
-  return { node: list, paint, live, stop };
+  return { node: list, paint, live: liveOn, stop };
 }
 
 // ---- The first time: three steps. The agents (connected once, for every project: a CLI's session
@@ -2581,6 +3798,7 @@ function openWizard({ then = null } = {}) {
     const next = button('sm-btn primary', t('Continue'), () => { step = 1; projectsStep(); });
     actions.append(next);
     const fresh = agentsPanel({
+      compact: true,
       onPaint: (ready, answer) => {
         next.textContent = ready ? t('Continue') : t('Continue without agents');
         // The scene lights the agents that are connected, and their wire to MADRE.
@@ -2658,7 +3876,7 @@ function openWizard({ then = null } = {}) {
 // in that room. Nothing scrolls inside the window: the screen behind it does.
 const SET_SECTIONS = [
   ['You', 'How Home looks and what its bar holds', ['look', 'bar']],
-  ['The agents', 'Who works on this Mac', ['agents', 'bishop']],
+  ['The agents', 'Who works on this Mac', ['agents', 'bishop', 'local']],
   ['System', 'The projects of this Mac and the version', ['projects', 'release']],
 ];
 // The room's own icons where the room has the category (app.js, SETTINGS_CATS); the bar, BISHOP
@@ -2668,15 +3886,17 @@ const SET_CATS = {
   bar: { name: 'Top bar', icon: '<rect x="2.6" y="5.4" width="14.8" height="9.2" rx="3" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M6.2 10h2.2M11.6 10h2.2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>' },
   agents: { name: 'Agents', 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"/>' },
   bishop: { name: 'Coordinator', icon: '<path d="M2.6 10c1.7-3.1 4.3-4.8 7.4-4.8s5.7 1.7 7.4 4.8c-1.7 3.1-4.3 4.8-7.4 4.8S4.3 13.1 2.6 10z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><circle cx="10" cy="10" r="2.3" fill="currentColor"/>' },
+  local: { name: 'Local AI', 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"/>' },
   projects: { name: 'Projects', 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"/>' },
   release: { name: 'Version', 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 SET_ORDER = ['look', 'bar', 'agents', 'bishop', 'projects', 'release'];
+const SET_ORDER = ['look', 'bar', 'agents', 'bishop', 'local', 'projects', 'release'];
 // The words the search knows, each pointing to the category that holds it (app.js, SETTINGS_INDEX).
 const SET_INDEX = [
   ['look', 'Preview'], ['look', 'Theme'], ['look', 'Accent'], ['look', 'Wallpaper'], ['look', 'Intensity'], ['look', 'Blur'], ['look', 'Project cards'], ['look', 'Text'], ['look', 'Project order'], ['look', 'Language'],
   ['bar', 'Arrange the bar'], ['bar', 'Back to default'],
   ['bishop', 'Talk to the Coordinator'], ['bishop', 'Open the Coordinator in a new tab'],
+  ['local', 'Ollama'], ['local', 'Automatic'], ['local', 'One by one'], ['local', 'Manual'],
   ['projects', 'Add a project'], ['projects', 'See the welcome again'], ['projects', 'The tour of MADRE 1.0'],
   ['release', 'Check now'],
 ];
@@ -2744,6 +3964,11 @@ function setStatus(id) {
     return { line: t('{n} of {total} signed in', { n: here.length - off.length, total: here.length }), warn: off.length ? t('{agents} without a session', { agents: off.map((agent) => agent.label ?? agent.id).join(', ') }) : null };
   }
   if (id === 'bishop') { const room = bishopRoom(); return { line: room ? stateOf(room).words : t('Reading…') }; }
+  if (id === 'local') {
+    if (!localSeen) return { line: localFailed ? t('Home did not answer.') : t('Reading…') };
+    const on = localSeen.projects.filter((one) => one.on).length;
+    return { line: `${LOCAL_MODE_WORDS[localSeen.mode]()} · ${t('{n} of {total} projects', { n: on, total: localSeen.projects.length })}`, warn: !localSeen.master ? t('Local AI is switched off for every project.') : !localSeen.ollama.running ? t('Ollama is not running') : null };
+  }
   if (id === 'projects') {
     if (!data) return { line: t('Reading…') };
     const { all, open } = projectsInOrder();
@@ -2909,7 +4134,7 @@ function fillLook(host) {
   // Home's own: its cards, its text, the order of its projects. The conversation's bubbles and text
   // are each project's, in its own Settings.
   const home = sxBlock(side, t('Home'), t('Only for Home: each project keeps its conversation as you set it there.'));
-  const homeSeg = (name) => customSeg(HOME_LOOKS[name].values.map((value) => [value, HOME_LOOKS[name].words[value]()]), looks.home[name], (value) => saveHome(name, value), HOME_LOOKS[name].values.length === 2 ? 'two' : 'three');
+  const homeSeg = (name) => customSeg(HOME_LOOKS[name].values.map((value) => [value, HOME_LOOKS[name].words[value]()]), looks.home[name], (value) => saveHome(name, value), ['', '', 'two', 'three', 'four'][HOME_LOOKS[name].values.length] ?? 'three');
   sxRow(home, t('Project cards'), null, homeSeg('cards'), { stack: true });
   sxRow(home, t('Text'), null, homeSeg('text'), { stack: true });
   sxRow(home, t('Project order'), null, homeSeg('order'), { stack: true });
@@ -2947,9 +4172,11 @@ function fillBar(host) {
   host.append(acts);
 }
 function fillAgents(host, keep) {
-  const block = sxBlock(host, t('Agents'), t('MADRE works with the AI tools already on this computer. Each one is connected once, and every project uses it.'));
+  // The project's AJUSTES › Agents, here too: a sentence, then a card per agent.
+  host.append(el('p', 'sx-intro', t('MADRE works with the AI tools already on this computer. Each one is connected once, and every project uses it.')));
   const panel = agentsPanel({ onPaint: () => settingsSheet?.sync() });
-  block.rows.append(panel.node);
+  panel.node.classList.add('cards');
+  host.append(panel.node);
   keep(panel.stop);
   void panel.paint().then(() => panel.live());
 }
@@ -2959,6 +4186,105 @@ function fillBishop(host) {
   sxRow(block, t('Talk to the Coordinator'), room ? stateOf(room).words : null, sxButton(t('Open'), () => { settingsSheet?.close(); openBishop(); }, { tone: 'primary' }));
   sxRow(block, t('Open the Coordinator in a new tab'), null, sxButton(t('Open'), () => openBishop({ newTab: true })));
 }
+// LOCAL AI (src/local-ai.mjs): whether every project uses Ollama, the ones picked here, or each
+// one as it decides in its own Settings. The switch of each project is the same one its Settings
+// show; Ollama itself and what it does are set in a project's Modules › Local AI.
+const LOCAL_MODE_WORDS = { auto: () => t('Automatic'), pick: () => t('One by one'), manual: () => t('Manual') };
+const LOCAL_MODE_SAYS = {
+  auto: () => t('Every project uses the local AI, new ones too.'),
+  pick: () => t('Only the projects you switch on below. New projects start without it.'),
+  manual: () => t('Each project decides in its own Settings › Modules › Local AI. New projects start with it.'),
+};
+let localFailed = false;        // the last read got no answer: the sheet says so instead of «Reading…» forever
+async function loadLocal() {
+  const answer = await fetch('/api/salas/local-ai', { cache: 'no-store' }).then((response) => (response.ok ? response.json() : null)).catch(() => null);
+  if (answer) localSeen = answer;
+  localFailed = !answer;
+  settingsSheet?.sync({ detail: true });
+  return answer;
+}
+async function saveLocal(patch) {
+  const answer = await post('/api/salas/local-ai', patch);
+  if (!answer.ok) { toast(answer.body?.error ?? t('Home did not answer.')); return; }
+  localSeen = answer.body;
+  if (localSeen.later?.length) toast(t('{names} will use it when restarted: it was started before this setting existed.', { names: localSeen.later.join(', ') }));
+  settingsSheet?.sync({ detail: true });
+}
+// The rail every settings sheet uses (app.js, sxSeg; styles.css, .sx-seg): the mark moves when chosen.
+function sxSeg(options, current, pick, { label = null } = {}) {
+  const seg = el('div', 'sx-seg');
+  seg.setAttribute('role', 'radiogroup');
+  if (label) seg.setAttribute('aria-label', label);
+  for (const [value, words] of options) {
+    const option = button(null, words, () => {
+      if (value === current || seg.classList.contains('busy')) return;
+      for (const other of seg.children) other.setAttribute('aria-checked', String(other === option));
+      seg.classList.add('busy');
+      void Promise.resolve(pick(value)).finally(() => seg.classList.remove('busy'));
+    });
+    option.setAttribute('role', 'radio');
+    option.setAttribute('aria-checked', String(value === current));
+    seg.append(option);
+  }
+  return seg;
+}
+const localModeSeg = () => sxSeg(Object.keys(LOCAL_MODE_WORDS).map((mode) => [mode, LOCAL_MODE_WORDS[mode]()]), localSeen?.mode, (mode) => saveLocal({ mode }), { label: t('Mode') });
+// The projects in pages of eight, two to a row where they fit: the sheet never needs a scroll.
+const LOCAL_PER_PAGE = 8;
+let localPage = 0;
+function fillLocal(host) {
+  if (!localSeen && localFailed) {
+    // A Home started before this setting existed has no answer for it: reloading the page reaches the one running now.
+    const block = sxBlock(host, t('Home did not answer.'), t('The project serving this page was started before this setting existed. Restart it, or open Home from another project.'));
+    sxRow(block, t('Try again'), null, sxButton(t('Reload'), () => location.reload(), { tone: 'primary' }));
+    return;
+  }
+  if (!localSeen) { host.append(el('p', 'settings-reading', t('Reading…'))); return; }
+  host.append(el('p', 'sx-intro', t('The local AI is Ollama, on this computer: it searches the memory by meaning, sums it up and answers as @madre, without spending tokens or sending anything out. Here you choose which projects use it.')));
+  const mode = sxBlock(host, t('Which projects'), LOCAL_MODE_SAYS[localSeen.mode]());
+  sxRow(mode, t('Mode'), null, localModeSeg());
+  if (!localSeen.master) sxRow(mode, t('Local AI is switched off for every project.'), t('Turn it on in a project, in Modules › Local AI.'));
+  else if (!localSeen.ollama.running) sxRow(mode, t('Ollama is not running'), t('The projects keep working with their agents until it starts. Start it from a project, in Modules › Local AI.'));
+  const list = sxBlock(host, t('Projects'), localSeen.mode === 'auto' ? t('All of them use it. Choose «One by one» or «Manual» to turn some off.') : t('A switch here is the same one the project shows in its Settings.'));
+  if (!localSeen.projects.length) { sxRow(list, t('No projects yet'), null); return; }
+  const pages = Math.ceil(localSeen.projects.length / LOCAL_PER_PAGE);
+  localPage = Math.max(0, Math.min(localPage, pages - 1));
+  const grid = el('div', 'sm-local-grid');
+  for (const one of localSeen.projects.slice(localPage * LOCAL_PER_PAGE, (localPage + 1) * LOCAL_PER_PAGE)) {
+    const item = el('label', `sm-local-item${one.on ? '' : ' off'}`);
+    const words = el('span', 'sm-local-words');
+    words.append(el('b', null, one.name), el('small', null, one.open ? (one.on ? t('Open · using it') : t('Open · without it')) : t('Closed · applies when it opens')));
+    const wrap = el('span', 'settings-switch');
+    const box = el('input');
+    box.type = 'checkbox';
+    box.checked = Boolean(one.chosen);
+    box.disabled = !one.editable || !localSeen.master;
+    box.setAttribute('aria-label', one.name);
+    box.addEventListener('change', () => { box.disabled = true; void saveLocal({ rooms: { [one.id]: box.checked } }); });
+    wrap.append(box, el('i'));
+    item.append(words, wrap);
+    grid.append(item);
+  }
+  // The last page keeps the height of a full one, so ‹ › stay under the pointer.
+  if (pages > 1) for (let gap = grid.children.length; gap < LOCAL_PER_PAGE; gap += 1) grid.append(el('span', 'sm-local-item sm-local-gap'));
+  list.rows.append(grid);
+  if (pages > 1) {
+    const foot = el('div', 'sm-local-foot');
+    const pager = el('div', 'sm-pager');
+    const turn = (step) => { localPage += step; settingsSheet?.sync({ detail: true }); };
+    const back = button('sm-icon-key sm-page', null, () => turn(-1));
+    const on = button('sm-icon-key sm-page', null, () => turn(1));
+    back.innerHTML = PAGE_BACK; // trusted: our own SVG strings
+    on.innerHTML = PAGE_ON;
+    back.setAttribute('aria-label', t('Previous'));
+    on.setAttribute('aria-label', t('Next'));
+    back.disabled = localPage === 0;
+    on.disabled = localPage >= pages - 1;
+    pager.append(back, el('span', 'sm-page-where', t('{n} of {total}', { n: localPage + 1, total: pages })), on);
+    foot.append(pager, el('small', null, t('{n} projects', { n: localSeen.projects.length })));
+    list.rows.append(foot);
+  }
+}
 function fillProjects(host) {
   const block = sxBlock(host, t('Projects'), t('A project is a folder: MADRE gives it its own conversations and its own memory. Adding it does not open it; you open it from its card.'));
   sxRow(block, t('Add a project'), null, sxButton(t('Add'), () => { settingsSheet?.close(); openAddSheet(); }, { tone: 'primary' }));
@@ -2999,7 +4325,7 @@ function fillRelease(host) {
   // Home already runs the newer one: the projects still on the older one, each with its restart.
   const behind = behindRooms();
   if (behind.length) {
-    const late = sxBlock(host, t('Projects on an older MADRE'), t('They keep running the version they started with until you restart them. What is running in them stops.'));
+    const late = sxBlock(host, t('Projects on an older MADRE'), t('They keep running the version they started with until you restart them. What is running in them stops.'), { aside: behind.length > 1 ? sxButton(t('Restart all'), () => void restartAll(), { tone: 'primary' }) : null });
     for (const room of behind) sxRow(late, roomLabel(room), `MADRE ${room.open.version}`, sxButton(t('Restart'), () => { settingsSheet?.close(); void restartRoom(room); }));
   }
 }
@@ -3030,10 +4356,11 @@ async function updateHome(info, key, said) {
   }
   drop(t('Home did not come back on its own. Start MADRE again from your terminal.'));
 }
-const SET_FILL = { look: fillLook, bar: fillBar, agents: fillAgents, bishop: fillBishop, projects: fillProjects, release: fillRelease };
+const SET_FILL = { look: fillLook, bar: fillBar, agents: fillAgents, bishop: fillBishop, local: fillLocal, projects: fillProjects, release: fillRelease };
 
 let settingsSheet = null;
 function openSettings(section = null) {
+  void loadLocal();
   if (settingsSheet) { settingsSheet.show(section); return; }
   const state = { open: null, query: '', stops: [] };
   const dialog = el('dialog', 'sm-sheet sm-settings');
@@ -3209,8 +4536,10 @@ function translateStatic() {
   ui.search.placeholder = t('Search a project…');
   ui.search.setAttribute('aria-label', t('Search a project…'));
   ui.filter.setAttribute('aria-label', t('Show'));
+  $('sm-drawer-title').textContent = t('Projects');
   const FILTER_WORDS = { all: t('All projects'), open: t('Open projects'), asleep: t('Asleep projects') };
   for (const choice of ui.filter.querySelectorAll('[data-filter]')) choice.textContent = FILTER_WORDS[choice.dataset.filter];
+  paintOrderKey();
   $('sm-bishop-name').textContent = t('Coordinator');
   ui.bishop.go.textContent = t('Talk to the Coordinator');
   ui.bishop.tab.title = t('Open the Coordinator in a new tab');