@jossuealcala/madre 1.0.0 → 1.0.1

package/public/app.js

@@ -190,6 +190,13 @@ const MODES = {
   4: { key: 'airlock', label: t('FULL ACCESS'), hint: t('Run commands, push, deploy. What leaves the ship does not come back. Unlock, twice.') },
 };
 
+// A sign-in in flight. Claude's CLI opens a page and then waits to be told the code that page
+// gives back: with nowhere to type it, the sign-in could only die of its own timeout, which is
+// exactly what it did. This holds what the room knows about the one running — which agent, the
+// address, whether it is waiting — and `.login-ask` is where it is answered.
+const loginNow = { agent: null, method: null, url: null, awaiting: false, asksForCode: false };
+const looksLikeCodePrompt = (line) => /paste\s+(?:the\s+)?code|enter\s+(?:the\s+)?code|c[oó]digo\s*[:>]/i.test(String(line ?? ''));
+
 const state = {
   agents: new Map(),
   budget: null,
@@ -1598,6 +1605,18 @@ async function browserServers() {
   catch { menu.replaceChildren(el('div', 'ports-note', t('COULD NOT READ THE PORTS'))); browser.servers?.setAttribute('data-live', 'no'); return; }
   paintPorts(read);
 }
+async function refreshBrowserServers(button) {
+  button.disabled = true;
+  button.classList.add('checking');
+  try {
+    const response = await fetch('/api/ports', { cache: 'no-store' });
+    paintPorts(await response.json());
+  } catch {
+    button.classList.remove('checking');
+    button.disabled = false;
+    toast(t('Could not read the ports'));
+  }
+}
 
 // This project's servers, and only them. The servers sentinel says when the list changes, so an
 // open menu redraws itself and the lamp on the button follows without anyone asking again.
@@ -1643,7 +1662,16 @@ function paintPorts(read) {
   // The lamp on the button keeps what the reading found, so the state survives the menu closing.
   browser.servers?.setAttribute('data-live', ports.length ? 'yes' : 'no');
   if (menu.hidden) return;
-  menu.replaceChildren(el('div', 'ports-head', t('THIS PROJECT\'S SERVERS')));
+  const head = el('div', 'ports-head');
+  head.append(el('span', null, t('THIS PROJECT\'S SERVERS')));
+  const refresh = el('button', 'ports-refresh');
+  refresh.type = 'button';
+  refresh.setAttribute('aria-label', t('Refresh servers'));
+  refresh.title = t('Refresh servers');
+  refresh.innerHTML = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M16 10a6 6 0 1 1-1.76-4.24M16 3.6v3.6h-3.6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  refresh.addEventListener('click', () => void refreshBrowserServers(refresh));
+  head.append(refresh);
+  menu.replaceChildren(head);
   if (!ports.length && !wider.length) menu.append(el('div', 'ports-empty', t('Nothing started from this project is answering. Start your dev server inside the project folder and it shows up here by itself.')));
   for (const found of ports) {
     const row = el('button', `ports-row${found.framable === false ? ' refuses' : ''}`);
@@ -2528,12 +2556,24 @@ async function toggleModelMenu(id, anchor) {
   title.append(el('b', null, `@${id}`), t(' · model for this request'));
   modelMenu.append(title);
   const list = el('div', 'model-list');
-  const options = [{ name: null, label: `${t('default')}${info.default ? ` · ${info.default}` : ''}` }, ...info.models.map((name) => ({ name, label: name }))];
-  for (const option of options) {
-    const button = el('button', `model-option${(state.chosenModel[id] ?? null) === option.name ? ' current' : ''}`, option.label);
+  const option = (name, label) => {
+    const button = el('button', `model-option${(state.chosenModel[id] ?? null) === name ? ' current' : ''}`, label);
     button.type = 'button';
-    button.addEventListener('click', () => { rememberModel(id, option.name); closeModelMenu(); renderPicker(); focusComposer(); });
-    list.append(button);
+    button.addEventListener('click', () => { rememberModel(id, name); closeModelMenu(); renderPicker(); focusComposer(); });
+    return button;
+  };
+  list.append(option(null, `${t('default')}${info.default ? ` · ${info.default}` : ''}`));
+  // OpenCode answers through many providers: its models come under the provider they belong to,
+  // only the ones with a key or an account and OpenCode's own, the name shown without the prefix.
+  if (Array.isArray(info.groups) && info.groups.length) {
+    for (const group of info.groups) {
+      const head = el('div', `model-group${group.own ? ' own' : ''}`);
+      head.append(el('b', null, group.label), el('span', null, group.own ? t('OpenCode\'s own') : t('{n} models', { n: group.models.length })));
+      list.append(head);
+      for (const name of group.models) list.append(option(name, name.slice(name.indexOf('/') + 1)));
+    }
+  } else {
+    for (const name of info.models) list.append(option(name, name));
   }
   modelMenu.append(list);
   const custom = el('form', 'model-custom');
@@ -2541,7 +2581,12 @@ async function toggleModelMenu(id, anchor) {
   custom.append(input);
   custom.addEventListener('submit', (event) => { event.preventDefault(); const name = input.value.trim(); if (name) { rememberModel(id, name); closeModelMenu(); renderPicker(); } });
   modelMenu.append(custom);
-  if (info.note) modelMenu.append(el('div', 'model-note', info.note));
+  if (id === 'opencode') {
+    const manage = el('button', 'model-manage', t('Providers and keys…'));
+    manage.type = 'button';
+    manage.addEventListener('click', () => { closeModelMenu(); openSettingsOn('agents', { anchor: 'sx-opencode' }); });
+    modelMenu.append(manage);
+  } else if (info.note) modelMenu.append(el('div', 'model-note', info.note));
   placeModelMenu(anchor);
 }
 function placeModelMenu(anchor) {
@@ -2982,6 +3027,7 @@ const override = {
   cancelled: null, // called when the human walks away from it, to put back what they wrote
   raise: false,   // the agent is capped below the mode: arming also raises its max mode in Settings › Permissions
   mode: 3,        // #3 CONTROL or #4 AIRLOCK
+  preserveComposer: false,
   stage: 'designation',   // designation · phrase · confirm; #4 asks for the same key a second time
   again: false,           // the second time, for #4
   key: 'designation',     // the key chosen in AJUSTES › Permissions for this mode
@@ -3058,12 +3104,12 @@ function askOverrideKey(stage, { again = false } = {}) {
   override.form.querySelector('.k').textContent = stage === 'phrase' ? (again ? t('Type your phrase again') : t('Type your phrase')) : again ? t('Type the project name again') : t('Type the project name');
   override.input.placeholder = '';
 }
-function openOverride(id, { raise = false, mode = 3, then = null, cancelled = null } = {}) {
+function openOverride(id, { raise = false, mode = 3, then = null, cancelled = null, preserveComposer = false, forceKey = false } = {}) {
   if (!override.dialog) return;
   // Inside the grace of an accepted key, the same mode for the same agent is not asked again —
   // unless arming would also raise the agent's ceiling, which is always asked.
-  const left = raise ? 0 : overrideGraceLeft(mode, id);
-  if (left) { void grantOverride({ agent: id, raise: false, mode, then, delay: 0, left }); return; }
+  const left = raise || forceKey ? 0 : overrideGraceLeft(mode, id);
+  if (left) { void grantOverride({ agent: id, raise: false, mode, then, delay: 0, left, preserveComposer }); return; }
   override.agent = id;
   // What to do once it is armed. The chip's road arms and waits for the human to send; a #3 or #4
   // typed in a message that was sent, and the way up on an agent's card, send right away.
@@ -3072,6 +3118,7 @@ function openOverride(id, { raise = false, mode = 3, then = null, cancelled = nu
   override.cancelled = cancelled;
   override.raise = raise;
   override.mode = mode;
+  override.preserveComposer = preserveComposer;
   override.key = overrideKeyFor(mode);
   askOverrideKey(override.key.startsWith('phrase') ? 'phrase' : override.key === 'confirm' ? 'confirm' : 'designation');
   override.title.textContent = mode === 4 ? t('Open #4 FULL ACCESS for @{agent}', { agent: id }) : t('Unlock #3 EDIT for @{agent}', { agent: id });
@@ -3137,13 +3184,13 @@ override.form?.addEventListener('submit', async (event) => {
   }
   override.reply.textContent = override.mode === 4 ? t('Open for @{agent}.', { agent: override.agent }) : t('Unlocked for @{agent}.', { agent: override.agent });
   override.reply.className = 'key-reply granted';
-  const granted = { agent: override.agent, raise: override.raise, mode: override.mode, then: override.then, delay: 900, pass: answer.token };
+  const granted = { agent: override.agent, raise: override.raise, mode: override.mode, then: override.then, delay: 900, pass: answer.token, preserveComposer: override.preserveComposer };
   override.then = null;
   override.cancelled = null;
   void grantOverride(granted);
 });
 // Arms the mode for that agent: after the key, or straight away inside the grace of an earlier one.
-async function grantOverride({ agent, raise, mode, then, delay = 0, left = 0, pass = null }) {
+async function grantOverride({ agent, raise, mode, then, delay = 0, left = 0, pass = null, preserveComposer = false }) {
   if (pass) overridePasses.set(`${mode}:${agent}`, pass);
   if (delay) await new Promise((resolve) => setTimeout(resolve, delay));
   if (override.dialog?.open) override.dialog.close();
@@ -3158,9 +3205,11 @@ async function grantOverride({ agent, raise, mode, then, delay = 0, left = 0, pa
   }
   const minutes = overrideConfig().grace?.[mode] ?? 0;
   if (!left && minutes > 0) { overrideGrace.set(`${mode}:${agent}`, Date.now() + minutes * 60000); tickGrace(); }
-  state.modeArmedFor = agent;
-  els.target.value = agent;
-  setMode(mode, { wink: true });
+  if (!preserveComposer) {
+    state.modeArmedFor = agent;
+    els.target.value = agent;
+    setMode(mode, { wink: true });
+  }
   if (then) { await then(); return; }
   if (left) { toast(t('Diagnostics › {label} is still open for @{agent} · {left} left.', { label: MODES[mode].label, agent, left: graceWords(left) }), { tone: 'look' }); return; }
   toast(mode === 4
@@ -3317,12 +3366,15 @@ function bridgeCard(agent) {
   else if (stage === 'missing' && agent.install) actions.append(bridgeInstallButton(agent));
   let reveal = null;
   if (stage === 'signed-out' || (stage === 'ready' && agent.login?.headless)) {
-    if (agent.login?.headless) actions.append(bridgeSignInButton(agent, stage === 'ready'));
-    else if (agent.key) {
-      reveal = el('button', 'primary', t('PASTE KEY'));
+    // Every door the CLI has, not just the first one. Claude sells two accounts and MADRE used
+    // to open only the subscription, which left whoever pays for the API with no way in.
+    if (agent.login?.headless) for (const door of loginDoors(agent, stage === 'ready')) actions.append(bridgeSignInButton(agent, door, stage === 'ready'));
+    else if (!agent.key && agent.login) actions.append(el('span', 'note', t('signs in from its own prompt:')));
+    if (agent.key) {
+      reveal = el('button', agent.login?.headless ? null : 'primary', t('PASTE KEY'));
       reveal.type = 'button';
       actions.append(reveal);
-    } else if (agent.login) actions.append(el('span', 'note', t('signs in from its own prompt:')));
+    }
   }
   if (actions.childNodes.length) card.append(actions);
   if (reveal) {
@@ -3333,6 +3385,7 @@ function bridgeCard(agent) {
     reveal.addEventListener('click', () => { slot.hidden = !slot.hidden; if (!slot.hidden) slot.querySelector('input')?.focus(); });
     card.append(slot);
   } else if (stage !== 'missing' && agent.login && !agent.login.headless) card.append(commandBlock([agent.login.display, `# ${t(agent.login.note)}`]));
+  if (stage !== 'missing') card.append(loginAskSlot(agent.id));
   const log = el('pre', 'bridge-log');
   log.id = `bridge-log-${agent.id}`;
   for (const entry of state.loginLogs.get(agent.id) ?? []) log.append(loginLine(entry));
@@ -3466,18 +3519,15 @@ function bridgeInstallButton(agent) {
   });
   return button;
 }
-function bridgeSignInButton(agent, again = false) {
-  const button = el('button', again ? null : 'primary', again ? t('SIGN IN AGAIN') : t('SIGN IN'));
+function bridgeSignInButton(agent, door, again = false) {
+  const named = Boolean(agent.login?.methods?.length);
+  const button = el('button', again && !named ? null : 'primary', named ? door.label : again ? t('SIGN IN AGAIN') : t('SIGN IN'));
   button.type = 'button';
-  button.title = t(agent.login.note);
+  button.title = t(door.note || agent.login.note);
   button.addEventListener('click', async () => {
     button.disabled = true;
-    state.loginLogs.set(agent.id, []);
-    try {
-      const response = await fetch(`/api/agents/${agent.id}/login`, { method: 'POST' });
-      const result = await response.json().catch(() => ({}));
-      if (!response.ok) throw new Error(result.error ?? `HTTP ${response.status}`);
-    } catch (error) { toast(t('Diagnostics › sign-in did not start: {error}', { error: error.message })); renderOnboarding(); }
+    try { await startLogin(agent.id, door.id); }
+    catch (error) { toast(t('Diagnostics › sign-in did not start: {error}', { error: error.message })); renderOnboarding(); }
   });
   return button;
 }
@@ -4686,21 +4736,28 @@ function renderModeRequest(event) {
   quote.title = text;
   node.append(quote);
   const actions = el('div', 'actions');
-  const decide = async (decision, button) => {
+  const decide = async (decision, button, key = null) => {
+    if (mode >= 3 && decision !== 'deny' && !key) {
+      const ready = overridePass(mode, agent);
+      if (ready) { void decide(decision, button, ready); return; }
+      openOverride(agent, { mode, raise: mode > ceilingFor(agent) && Boolean(state.capabilities[agent]?.scopes?.write?.capable), preserveComposer: true, forceKey: true, then: () => decide(decision, button, overridePass(mode, agent)) });
+      return;
+    }
     for (const other of actions.querySelectorAll('button')) other.disabled = true;
     try {
-      const response = await fetch(`/api/modes/${requestId}/decide`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ decision }) });
+      const response = await fetch(`/api/modes/${requestId}/decide`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ decision, ...(key ? { key } : {}) }) });
       const result = await response.json().catch(() => ({}));
-      if (!response.ok) throw new Error(result.error ?? `HTTP ${response.status}`);
+      if (!response.ok) { if (result.needsKey) overridePasses.delete(`${mode}:${agent}`); throw new Error(result.error ?? `HTTP ${response.status}`); }
+      if (key && !overrideGraceLeft(mode, agent)) overridePasses.delete(`${mode}:${agent}`);
       button.textContent = decision === 'deny' ? t('DENIED') : t('GRANTED');
     } catch (error) {
       toast(`${t('Diagnostics › ')}${error.message}`);
       for (const other of actions.querySelectorAll('button')) other.disabled = false;
     }
   };
-  const once = el('button', 'grant', t('GRANT ONCE')); once.type = 'button'; once.title = `@${agent} may add files to the project for this step only.`;
-  const plan = el('button', 'grant plan', t('GRANT FOR PLAN')); plan.type = 'button'; plan.title = t('Every remaining writable step of this plan shares one lease directory.');
-  const deny = el('button', 'deny', t('DENY')); deny.type = 'button'; deny.title = `@${agent} answers read-only and says what it would have created.`;
+  const once = el('button', 'grant', t('GRANT ONCE')); once.type = 'button'; once.title = mode >= 3 ? t('Unlock #{mode} for this step only.', { mode }) : t('Allow creation for this step only.');
+  const plan = el('button', 'grant plan', t('GRANT FOR PLAN')); plan.type = 'button'; plan.title = mode >= 3 ? t('Unlock #{mode} for the remaining steps of this plan.', { mode }) : t('Every remaining writable step of this plan shares one lease directory.');
+  const deny = el('button', 'deny', t('DENY')); deny.type = 'button'; deny.title = t('The step continues in read-only mode.');
   once.addEventListener('click', () => decide('once', once));
   plan.addEventListener('click', () => decide('plan', plan));
   deny.addEventListener('click', () => decide('deny', deny));
@@ -5014,6 +5071,7 @@ function renderRunRequest(event) {
     button.title = t('Runs {command} from the project root, with no shell. A restore point is taken first.', { command: command.line });
     button.addEventListener('click', async () => {
       button.disabled = true;
+      markRun({ responseMessageId, index }, 'running', null, event.timestamp);
       try {
         const response = await fetch('/api/runs', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ responseMessageId, index }) });
         const result = await response.json().catch(() => ({}));
@@ -5025,27 +5083,39 @@ function renderRunRequest(event) {
     });
     list.append(button);
   });
-  node.append(list, el('p', 'choice-foot', t('Each line runs only when you press it · from the project root, no shell · the output comes back to the project')));
+  node.append(list, el('p', 'run-summary', t('{done} of {total} commands finished', { done: 0, total: commands.filter((one) => one.argv).length })), el('p', 'choice-foot', t('Each line runs only when you press it · from the project root, no shell · the output comes back to the project')));
   state.lastSender = null;
   return node;
 }
 
 // The state of one line of a run request, from the events that follow it: running, ran, failed.
 // A line that ran can be pressed again; tests are run more than once.
-function markRun({ responseMessageId, index }, status, where = null) {
+function markRun({ responseMessageId, index }, status, where = null, startedAt = null) {
   const button = document.querySelector(`.run-request[data-run="${CSS.escape(String(responseMessageId))}"] .run-line[data-index="${Number(index)}"]`);
   if (!button || button.classList.contains('refused')) return;
   button.classList.remove('running', 'serving', 'ran', 'failed');
   if (status) button.classList.add(status);
+  if (status === 'running') button.dataset.startedAt = startedAt ?? new Date().toISOString();
+  else delete button.dataset.startedAt;
   button.disabled = status === 'running' || status === 'serving';
   const tag = button.querySelector('.choice-tag');
   if (tag) tag.textContent = { running: t('RUNNING'), serving: t('SERVING'), ran: t('RUN AGAIN'), failed: t('RUN AGAIN') }[status] ?? t('RUN');
+  const group = button.closest('.run-request');
+  const summary = group?.querySelector('.run-summary');
+  if (summary) summary.textContent = t('{done} of {total} commands finished', { done: group.querySelectorAll('.run-line.ran, .run-line.failed').length, total: group.querySelectorAll('.run-line:not(.refused)').length });
   // While it is alive, a line of its own under it: where it serves, and the two things a person
   // does with a running command: look at it, or stop it. It goes when the command ends.
   let live = button.nextElementSibling?.classList.contains('run-live') ? button.nextElementSibling : null;
   if (status !== 'running' && status !== 'serving') { live?.remove(); return; }
   if (!live) { live = el('div', 'run-live'); button.after(live); }
   live.replaceChildren();
+  if (status === 'running') {
+    const progress = el('span', 'run-progress-track');
+    progress.setAttribute('role', 'progressbar');
+    progress.setAttribute('aria-label', t('Command running'));
+    live.append(progress, el('span', 'run-elapsed'));
+    updateRunClock(button);
+  }
   if (status === 'serving' && where?.port) {
     live.append(el('span', 'where', where.network
       ? t('serving on :{port} · listens on the whole network, so the project will not open it', { port: where.port })
@@ -5069,6 +5139,16 @@ function markRun({ responseMessageId, index }, status, where = null) {
   });
   live.append(stop);
 }
+function updateRunClock(button) {
+  const shown = button.nextElementSibling?.querySelector('.run-elapsed');
+  if (!shown || !button.dataset.startedAt) return;
+  const seconds = Math.max(0, Math.floor((Date.now() - Date.parse(button.dataset.startedAt)) / 1000));
+  shown.textContent = t('Running · {time} elapsed', { time: `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}` });
+}
+const runClock = setInterval(() => {
+  if (!document.hidden) for (const button of document.querySelectorAll('.run-line.running')) updateRunClock(button);
+}, 1000);
+runClock.unref?.();
 
 // BISHOP proposed a plan in the room of Salas (docs/MACROVERSO.md, fases 4b y 4c). One row per
 // order with the room, the agent and the mode in sight, and one per link it proposes. What a press
@@ -5668,11 +5748,13 @@ function renderEventNode(event) {
   switch (event.type) {
     case 'connection.login.started':
     case 'connection.login.finished':
+      // A new attempt starts a clean log: the lines of an earlier one are history in the room.
+      if (event.type === 'connection.login.started') state.loginLogs.set(event.payload.agent, []);
       node = renderLoginEvent(event);
       break;
     case 'connection.login.output': appendLoginOutput(event); return;
     case 'connection.install.started':
-    case 'connection.install.finished': if (!replaying) jobProgress(event); node = renderAgentInstall(event); break;
+    case 'connection.install.finished': if (event.type === 'connection.install.started') state.loginLogs.set(event.payload.agent, []); if (!replaying) jobProgress(event); node = renderAgentInstall(event); break;
     case 'connection.install.output': if (!replaying) jobProgress(event); appendLoginOutput(event); return;
     case 'connection.key.set': {
       const { agent, label, provider, detail } = event.payload;
@@ -5681,6 +5763,13 @@ function renderEventNode(event) {
       state.lastSender = null;
       break;
     }
+    case 'connection.key.removed': {
+      const { agent, label, provider } = event.payload;
+      node = paint(el('div', 'system connections'), agent);
+      node.append(el('b', null, t('connections › ')), t('{agent} no longer has the {provider} key', { agent: label ?? agent, provider: provider ?? '' }));
+      state.lastSender = null;
+      break;
+    }
     case 'room.settings': return;
     case 'extension.toggled':
       // A module switched on or off changes what the composer accepts.
@@ -5792,7 +5881,7 @@ function renderEventNode(event) {
     case 'choice.offered': node = renderChoice(event); break;
     case 'chat.activity': onChatActivity(event.payload); return;
     case 'run.requested': node = renderRunRequest(event); break;
-    case 'run.started': markRun(event.payload, 'running'); return;
+    case 'run.started': markRun(event.payload, 'running', null, event.timestamp); return;
     case 'run.serving': markRun(event.payload, 'serving', event.payload); return;
     case 'write.waiting': {
       // Two turns writing the project at once could not be told apart afterwards; the second waits.
@@ -5993,9 +6082,15 @@ window.addEventListener?.('storage', (event) => {
 // and whenever it comes back into view, and written when a choice changes. Home does the same
 // (salas-mac.js, pullLooks): the two are twins, because a new shared file would not reach the
 // phone's bridge.
-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): this project keeps the one chosen here, Home the
+// one chosen in Home (src/looks.mjs, `rooms`). The rest of the looks are shared.
+const SHARED_LOOKS = ['pulse.theme', 'pulse.accent', 'pulse.wallpaper.style', 'pulse.wallpaper.veil', 'pulse.wallpaper.blur', 'pulse.bubbles', 'pulse.text'];
 let booted = false;
 let looksPush = 0;
+// Saved for this project alone, on the server, so it outlives the port the page is served on.
+function saveOwnWallpaper(value) {
+  void fetch('/api/looks/room', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ wallpaper: value }) }).catch(() => null);
+}
 function pushLooks() {
   if (SPLIT_CHAT) return;
   clearTimeout(looksPush);
@@ -6009,12 +6104,14 @@ async function pullLooks() {
   let answer = null;
   try { answer = await fetch('/api/looks', { cache: 'no-store' }).then((response) => (response.ok ? response.json() : null)); } catch { return; }
   if (!answer?.looks) return;
+  // Before a project had its own, it wore the shared one: that is where it starts.
+  const wall = answer.own?.wallpaper ?? answer.looks['pulse.wallpaper'] ?? null;
   try {
     // Nothing kept yet: the first page that has a choice of its own hands it to the others.
     if (!answer.saved) { if (SHARED_LOOKS.some((key) => localStorage.getItem(key) !== null)) pushLooks(); return; }
     let changed = false;
-    for (const key of SHARED_LOOKS) {
-      const value = answer.looks[key] ?? null;
+    for (const key of [...SHARED_LOOKS, 'pulse.wallpaper']) {
+      const value = key === 'pulse.wallpaper' ? (wall === 'default' ? null : wall) : answer.looks[key] ?? null;
       if (localStorage.getItem(key) === value) continue;
       if (value === null) localStorage.removeItem(key); else localStorage.setItem(key, value);
       changed = true;
@@ -6042,7 +6139,9 @@ function saveLook(name, value) {
     if (value === LOOKS[name].values[0]) localStorage.removeItem(LOOKS[name].key);
     else localStorage.setItem(LOOKS[name].key, value);
   } catch { /* the choice lasts as long as the page */ }
-  applyLook(name, value);  pushLooks();
+  applyLook(name, value);
+  if (name === 'wallpaper') saveOwnWallpaper(value);
+  pushLooks();
 }
 // What is picked on the sheet is a draft: the preview wears it, the room does not, until ACCEPT.
 // Closing the window drops it. The language is part of the draft too, and accepting a new one
@@ -6234,9 +6333,10 @@ function drawCustom() {
     const paperBox = el('div', 'paper-box');
     paperBox.append(papers);
     if (paperTune.children.length) paperBox.append(paperTune);
-    sxBlock(page, t('Wallpaper'), PHOTO_WALLPAPERS.has(draft.wallpaper)
+    const paperBlock = sxBlock(page, t('Wallpaper'), PHOTO_WALLPAPERS.has(draft.wallpaper)
       ? t('A photograph wears the project\'s ground as a layer or as a mesh of its own colours: choose how strong it is and how much the photograph blurs.')
-      : t('Behind the conversation, in this window and in every conversation beside it. Light and dark each have their own.')).rows.append(paperBox);
+      : t('Behind the conversation, in this window and in every conversation beside it. Light and dark each have their own.'));
+    paperBlock.rows.append(paperBox);
     const talk = sxBlock(page, t('Conversation'));
     sxRow(talk, t('Bubbles'), null, segmented('bubbles'), { stack: true });
     sxRow(talk, t('Text'), null, segmented('text'), { stack: true });
@@ -7029,12 +7129,15 @@ for (const id of ['#tree-settings', '#browser-settings']) document.querySelector
 
 // From MU/TH/UR, a card or a pop-over: AJUSTES comes in front of whatever is open, and an agent
 // named on the way in is where the sheet lands.
-function openSettingsOn(category, { agent = null, part = null } = {}) {
+function openSettingsOn(category, { agent = null, part = null, anchor = null } = {}) {
+  // An agent named on the way in is opened, not only scrolled to.
+  if (agent) settingsUI.agentsOpen.add(agent);
+  if (anchor === 'sx-opencode') settingsUI.agentsOpen.add('opencode');
   openSettings(true, { category });
-  if (!agent && !part) return;
+  if (!agent && !part && !anchor) return;
   let tries = 0;
   const land = () => {
-    const card = agent ? document.getElementById(`conn-${agent}`) : state.settingsTargets[part]?.isConnected && state.settingsTargets[part].firstElementChild ? state.settingsTargets[part] : null;
+    const card = anchor ? document.getElementById(anchor) : agent ? document.getElementById(`conn-${agent}`) : state.settingsTargets[part]?.isConnected && state.settingsTargets[part].firstElementChild ? state.settingsTargets[part] : null;
     if (card) { card.scrollIntoView({ block: 'start', behavior: 'smooth' }); card.classList.add('settings-found'); setTimeout(() => card.classList.remove('settings-found'), 1600); return; }
     if ((tries += 1) < 20) setTimeout(land, 150);
   };
@@ -9819,6 +9922,7 @@ document.addEventListener?.('click', (event) => { if (!els.picker?.contains?.(ev
 state.budget = Number.isFinite(initial.softTokenBudget) && initial.softTokenBudget > 0 ? initial.softTokenBudget : null;
 state.timeouts = initial.timeouts ?? {};
 state.sessions = initial.sessions ?? {};
+readLoginState(initial.login ?? null);
 state.capabilities = initial.capabilities ?? {};
 state.override = initial.override ?? null;
 state.ripleyWeb = Boolean(initial.ripleyWeb);
@@ -13156,6 +13260,16 @@ function ollamaBlock(host, item) {
   const block = sxBlock(host, t('Local brain'), t('Ollama on this computer: no provider tokens, nothing leaves.'));
   const recheck = sxButton(t('Check again'), async () => { recheck.disabled = true; await fetch('/api/ollama/probe', { method: 'POST' }).catch(() => null); await refreshModules(); });
   sxRow(block, t('Server'), info.running ? t('Running · {host}', { host: info.host }) : t('Not running'), recheck);
+  // Whether this project uses it, beside Home's choice for all of them (src/local-ai.mjs).
+  const project = info.project;
+  if (project && !project.home) {
+    const why = !project.master ? t('Local AI is switched off for every project.')
+      : project.mode === 'auto' ? t('Home turns it on in every project, and «Active» switches it for all of them. To choose project by project, go to Home › Settings › Local AI.')
+        : project.mode === 'pick' ? t('Home chooses the projects one by one; «Active» switches this one here too.')
+          : t('Each project decides on its own: «Active» is this project’s switch.');
+    // The switch is the card's own «Active» (src/modules/ollama.mjs, toggle): this row says whose it is.
+    sxRow(block, t('In this project'), why);
+  }
   if (info.models?.length) sxRow(block, t('Models'), info.models.map((model) => model.name).join(' · '));
   if (!info.running) {
     const step = info.binary
@@ -13689,8 +13803,86 @@ const settingsUI = {
   data: null,
   open: false,
   loginLogs: new Map(),
+  // The agents whose card is open in AJUSTES › Agents, kept while the page lives.
+  agentsOpen: new Set(),
 };
 
+function loginAskSlot(agentId) {
+  const box = el('div', 'login-ask');
+  box.dataset.agent = agentId;
+  fillLoginAsk(box);
+  return box;
+}
+function repaintLoginAsk() { for (const box of document.querySelectorAll('.login-ask')) fillLoginAsk(box); }
+function fillLoginAsk(box) {
+  const agentId = box.dataset.agent;
+  box.replaceChildren();
+  const live = loginNow.agent === agentId;
+  box.hidden = !live;
+  if (!live) return;
+  if (loginNow.url) {
+    const open = el('a', 'sx-btn primary', t('Open the sign-in page'));
+    open.href = loginNow.url;
+    open.target = '_blank';
+    open.rel = 'noopener noreferrer';
+    box.append(open);
+  }
+  if (loginNow.asksForCode || loginNow.awaiting) {
+    const form = el('form', 'login-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', 'primary', t('Send the code'));
+    send.type = 'submit';
+    const said = el('p', 'key-said');
+    form.append(input, send, said);
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      send.disabled = true;
+      said.className = 'key-said';
+      said.textContent = t('CHECKING…');
+      try {
+        const response = await fetch(`/api/agents/${agentId}/login/code`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ code: input.value }) });
+        const result = await response.json().catch(() => ({}));
+        if (!response.ok) throw new Error(result.error ?? `HTTP ${response.status}`);
+        input.value = '';
+        loginNow.awaiting = false;
+        said.textContent = t('Sent. The sign-in finishes on its own.');
+      } catch (error) {
+        said.textContent = error.message;
+        said.className = 'key-said bad';
+      } finally { send.disabled = false; }
+    });
+    box.append(form);
+  }
+  const stop = el('button', 'sx-btn', t('Cancel the sign-in'));
+  stop.type = 'button';
+  stop.addEventListener('click', async () => { stop.disabled = true; await fetch(`/api/agents/${agentId}/login/cancel`, { method: 'POST' }).catch(() => {}); });
+  box.append(stop);
+}
+// One door or two: Claude's CLI knows the subscription and the Console, and only the human can
+// say which account is paying. `null` is the single flow every other CLI has.
+function loginDoors(agent, signedIn) {
+  const methods = agent.login?.methods;
+  if (!methods?.length) return [{ id: null, label: signedIn ? t('Sign in again') : t('Sign in'), note: agent.login?.note ?? '' }];
+  return methods.map((method) => ({ id: method.id, label: t(method.label), note: method.note ?? '' }));
+}
+async function startLogin(agentId, method = null) {
+  state.loginLogs.set(agentId, []);
+  const response = await fetch(`/api/agents/${agentId}/login`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ method }) });
+  const result = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(result.error ?? `HTTP ${response.status}`);
+  loginNow.agent = agentId;
+  loginNow.method = method;
+  loginNow.url = null;
+  loginNow.awaiting = false;
+  loginNow.asksForCode = Boolean(result.asksForCode);
+  repaintLoginAsk();
+  return result;
+}
+
 
 function renderLoginEvent(event) {
   const { agent, command, session, code, error } = event.payload;
@@ -13703,6 +13895,11 @@ function renderLoginEvent(event) {
     ? (ok ? t('@{agent} signed in', { agent }) + (session?.detail ? ` · ${session.detail}` : '') : t('@{agent} sign-in did not complete', { agent }) + (error ? ` · ${error}` : code ? t(' · exit {code}', { code }) : ''))
     : t('signing in @{agent} · {command}', { agent, command }));
   if (finished) { state.sessions[agent] = session ?? state.sessions[agent]; renderOnboarding(); if (state.settingsOpen) void loadSettings(); }
+  if (!replaying) {
+    if (finished) { if (loginNow.agent === agent) { loginNow.agent = null; loginNow.url = null; loginNow.awaiting = false; } }
+    else { loginNow.agent = agent; loginNow.method = event.payload.method ?? null; loginNow.url = null; loginNow.awaiting = false; loginNow.asksForCode = Boolean(state.agents.get(agent)?.login?.asksForCode); }
+    repaintLoginAsk();
+  }
   state.lastSender = null;
   return node;
 }
@@ -13723,13 +13920,25 @@ function renderAgentInstall(event) {
 
 function appendLoginOutput(event) {
   const { agent, line, url } = event.payload;
+  if (!replaying && loginNow.agent === agent) {
+    // The address stays on screen instead of scrolling past: the heartbeat used to be the only
+    // line left, so the one thing the human had to open was the first thing MADRE lost.
+    if (url) loginNow.url = url;
+    if (looksLikeCodePrompt(line)) loginNow.awaiting = true;
+    if (url || looksLikeCodePrompt(line)) repaintLoginAsk();
+  }
+  // The heartbeat («… still running · 42s · …») says one thing, how long: it takes the place of
+  // the one before instead of piling up thirty lines over the address the person needs.
+  const beat = HEARTBEAT.test(line ?? '');
   const log = state.loginLogs.get(agent) ?? [];
+  if (beat && HEARTBEAT.test(log.at(-1)?.line ?? '')) log.pop();
   log.push({ line, url });
   state.loginLogs.set(agent, log.slice(-60));
   for (const id of [`login-log-${agent}`, `bridge-log-${agent}`]) {
     const box = document.getElementById(id);
     if (!box) continue;
     box.hidden = false;
+    if (beat && box.lastElementChild?.classList.contains('beat')) box.lastElementChild.remove();
     box.append(loginLine({ line, url }));
     box.scrollTop = box.scrollHeight;
   }
@@ -13737,8 +13946,9 @@ function appendLoginOutput(event) {
   // used to come back as a toast carrying a link that expired hours ago.
   if (url && !replaying) toast(t('@{agent}: open {url} to finish signing in', { agent, url }));
 }
+const HEARTBEAT = /^… still running · \d+s · /;
 function loginLine({ line, url }) {
-  const div = el('div');
+  const div = el('div', HEARTBEAT.test(line ?? '') ? 'beat' : null);
   if (url) {
     const a = el('a', null, line); a.href = url; a.target = '_blank'; a.rel = 'noopener noreferrer';
     div.append(a);
@@ -13750,8 +13960,20 @@ async function loadSettings() {
   settingsUI.data = await fetch('/api/settings').then((response) => response.json());
   if (settingsUI.data?.settings?.override) state.override = settingsUI.data.settings.override;
   state.sessions = settingsUI.data.sessions ?? state.sessions;
+  // The server is the one that knows whether a sign-in is still waiting: a page reloaded in the
+  // middle of one has to find the same address and the same box, not an empty card.
+  readLoginState(settingsUI.data.login ?? null);
   renderSettings();
 }
+// What the server says about the sign-in running right now, adopted as this page's own.
+function readLoginState(live) {
+  loginNow.agent = live?.agent ?? null;
+  loginNow.method = live?.method ?? null;
+  loginNow.url = live?.url ?? null;
+  loginNow.awaiting = Boolean(live?.awaitingCode);
+  loginNow.asksForCode = Boolean(live?.asksForCode);
+  repaintLoginAsk();
+}
 
 /* ---------- the core ---------- */
 
@@ -14927,13 +15149,28 @@ function connectionCard(agent) {
   // amber while it signs in, grey when the CLI is not here.
   const lamp = busy ? 'busy' : !agent.detected ? 'absent' : session?.state === 'signed-in' ? 'on' : session?.state === 'signed-out' ? 'off' : 'unknown';
   const said = busy ? t('Signing in…') : !agent.detected ? t('Not installed') : session ? ({ 'signed-in': t('Signed in'), 'signed-out': t('Signed out') }[session.state] ?? t('Unknown')) : t('Unknown');
+  // Folded by default (2026-10-13): four agents with six settings each made a page to scroll
+  // through. The line says who it is and whether it has a session; a click opens the rest. One
+  // that is signing in, or has no session, opens by itself: that is where the person is needed.
+  const open = settingsUI.agentsOpen.has(agent.id) || busy || (agent.detected && session?.state === 'signed-out');
+  card.classList.toggle('open', open);
   const head = el('header', 'sx-head');
-  head.append(avatar(agent.id, { size: 32, status: agent.ready ? 'ready' : agent.detected ? 'detected' : 'offline' }));
+  const toggle = el('button', 'sx-agent-toggle');
+  toggle.type = 'button';
+  toggle.setAttribute('aria-expanded', String(open));
+  toggle.append(avatar(agent.id, { size: 32, status: agent.ready ? 'ready' : agent.detected ? 'detected' : 'offline' }));
   const words = el('div', 'sx-words');
   words.append(el('h3', null, agent.label), el('p', null, vendorWord(agent.id)));
   const chip = sxChip(said, lamp);
   if (lamp !== 'absent') chip.classList.add('session-lamp', lamp === 'on' ? 'ok' : lamp === 'off' ? 'bad' : 'wait');
-  head.append(words, chip);
+  toggle.append(words, chip, el('span', 'sx-chevron'));
+  toggle.addEventListener('click', () => {
+    const now = !card.classList.contains('open');
+    card.classList.toggle('open', now);
+    toggle.setAttribute('aria-expanded', String(now));
+    if (now) settingsUI.agentsOpen.add(agent.id); else settingsUI.agentsOpen.delete(agent.id);
+  });
+  head.append(toggle);
   card.append(head);
   // Where it lives, quietly: what is literal is in mono, what is said is not.
   const meta = el('div', 'sx-meta');
@@ -14943,8 +15180,14 @@ function connectionCard(agent) {
   const facts = [session?.detail ? t('Session {detail}', { detail: session.detail }) : null, agent.account ? `${agent.paid === false ? `${t('Free way in')} · ` : ''}${agent.account}` : null].filter(Boolean);
   if (facts.length) meta.append(el('span', null, facts.join(' · ')));
   card.append(meta);
+  const body = el('div', 'sx-agent-body');
+  card.append(body);
   card.rows = el('div', 'sx-rows');
-  card.append(card.rows);
+  body.append(card.rows);
+  // Settings in pairs: what it can do, then where its messages start and stop.
+  const abilities = el('div', 'sx-duo');
+  const modes = el('div', 'sx-duo');
+  card.rows.append(abilities, modes);
 
   const agentScopes = settingsUI.data.settings.capabilities?.[agent.id]?.scopes ?? {};
   // Two abilities per agent: images and web. Writing is not an ability, it is the ceiling below.
@@ -14966,7 +15209,7 @@ function connectionCard(agent) {
         toast(t('That permission was not saved: {error}', { error: error.message }));
       } finally { box.disabled = false; }
     }, { disabled: !usable, label: labelText });
-    const row = sxRow(card, labelText, why(scope.enabled), toggle, { off: !usable });
+    const row = sxRow(abilities, labelText, why(scope.enabled), toggle, { off: !usable });
     const hint = row.querySelector('.sx-hint');
     if (!scope.capable) {
       const assist = el('button', 'sx-link', t('Ask Diagnostics how'));
@@ -14978,10 +15221,11 @@ function connectionCard(agent) {
   }
   // The ceiling lives with every other agent's in PERMISSIONS: here it is said, and one key goes there.
   const currentCap = agentScopes.maxMode ?? 1;
-  sxRow(card, t('Max mode'), `#${currentCap} ${MODES[currentCap].label} · ${MODES[currentCap].hint}`, sxButton(t('Change in Permissions'), () => openSettingsOn('permissions', { part: 'permissions' })));
+  const capRow = sxRow(modes, t('Max mode'), `#${currentCap} ${MODES[currentCap].label}`, sxButton(t('Change it'), () => openSettingsOn('permissions', { part: 'permissions' })));
+  capRow.querySelector('.sx-hint').title = MODES[currentCap].hint;
   // The start: where a message to this agent begins. #2 means every turn may create files without arming CREATE.
   const currentStart = agentScopes.defaultMode ?? 1;
-  sxRow(card, t('Starting mode'), currentStart === 2 ? t('Every turn may create files, plan steps too.') : t('Read-only until you unlock CREATE.'), sxSeg([1, 2].map((n) => ({
+  sxRow(modes, t('Starting mode'), currentStart === 2 ? t('Every turn may create files, plan steps too.') : t('Read-only until you unlock CREATE.'), sxSeg([1, 2].map((n) => ({
     value: n, text: `#${n}`, className: `o${n}`, disabled: n > currentCap,
     title: n === 2 ? t('Every message to this agent starts in CREATE: new files where they belong, existing files untouched. Plan steps to it too.') : t('Messages start read-only; unlock CREATE when you want files.'),
   })), currentStart, async (n, seg) => {
@@ -15019,33 +15263,39 @@ function connectionCard(agent) {
   }
   if (agent.detected && agent.login?.headless) {
     const signedIn = session?.state === 'signed-in';
-    const login = sxButton(signedIn ? t('Sign in again') : t('Sign in'), async () => {
-      login.disabled = true;
-      state.loginLogs.set(agent.id, []);
-      const response = await fetch(`/api/agents/${agent.id}/login`, { method: 'POST' });
-      const result = await response.json().catch(() => ({}));
-      if (!response.ok) toast(result.error ?? t('The sign-in could not start.'));
-      else { settingsUI.data.loggingIn = agent.id; renderSettings(); }
-    }, { tone: signedIn ? null : 'primary', title: t(agent.login.note) });
-    login.disabled = Boolean(settingsUI.data.loggingIn);
-    acts.append(login);
+    // One button per account the CLI can sign in with. Which one is paying is the human's to say.
+    for (const door of loginDoors(agent, signedIn)) {
+      const login = sxButton(door.label, async () => {
+        login.disabled = true;
+        try { await startLogin(agent.id, door.id); settingsUI.data.loggingIn = agent.id; renderSettings(); }
+        catch (error) { toast(error.message || t('The sign-in could not start.')); login.disabled = false; }
+      }, { tone: signedIn ? null : 'primary', title: t(door.note || agent.login.note) });
+      login.disabled = Boolean(settingsUI.data.loggingIn);
+      acts.append(login);
+    }
   }
   acts.append(recheck);
-  card.append(acts);
+  body.append(acts);
   const slot = el('div', 'sx-slot');
-  if (agent.detected && agent.key) slot.append(keyForm(agent, { onDone: () => { void loadSettings(); renderOnboarding(); } }));
-  if (agent.detected && agent.login && !agent.login.headless) {
+  // OpenCode's keys are its providers', added in the block under its settings, one row for all.
+  if (agent.detected && agent.key && agent.id !== 'opencode') slot.append(keyForm(agent, { onDone: () => { void loadSettings(); renderOnboarding(); } }));
+  // Signed in, OpenCode's providers are added in its block below; the terminal is for a first sign-in.
+  if (agent.detected && agent.login && !agent.login.headless && !(agent.id === 'opencode' && session?.state === 'signed-in')) {
     slot.append(el('p', 'sx-hint', t('It signs in from its own prompt:')));
     slot.append(commandBlock([agent.login.display, `# ${t(agent.login.note)}`]));
   }
+  if (agent.detected && agent.login?.headless) slot.append(loginAskSlot(agent.id));
   const log = state.loginLogs.get(agent.id) ?? [];
   if (log.length || busy) {
     const box = el('div', 'login-log');
     box.id = `login-log-${agent.id}`;
     for (const entry of log) box.append(loginLine(entry));
     slot.append(box);
+    requestAnimationFrame(() => { box.scrollTop = box.scrollHeight; });
   }
-  if (slot.children.length) card.append(slot);
+  if (slot.children.length) body.append(slot);
+  // OpenCode answers through other providers: their keys and the chooser live in its own card.
+  if (agent.id === 'opencode' && agent.detected) drawOpenCodeSettings(body, settingsUI.data.settings ?? {});
   return card;
 }
 
@@ -15206,26 +15456,157 @@ function drawRoomSettings(host, data) {
     min: 0, label: t('Retries'), wire: { toPatch: (value) => ({ gemini: { retries: value } }), describe: (value) => t('Gemini retries saved: {n}.', { n: value }) },
   }));
 
-  const opencode = sxBlock(host, 'OpenCode', t('The provider and model OpenCode answers with in this project.'));
-  const field = el('div', 'sx-field');
-  const model = el('input', 'sx-input mono');
-  model.value = s.opencodeModel ?? ''; model.placeholder = t('provider/model'); model.spellcheck = false;
-  model.setAttribute('aria-label', t('Model'));
-  const datalist = el('datalist'); datalist.id = 'opencode-models-settings'; model.setAttribute('list', datalist.id);
-  model.addEventListener('change', async () => {
-    try { await saveSettingNow({ opencode: { model: model.value.trim() } }, t('OpenCode model saved.')); } catch (error) { toast(t('The setting was not saved: {error}', { error: error.message })); }
-  });
-  const list = sxButton(t('List models'), async () => {
-    list.disabled = true;
-    const result = await fetch('/api/agents/opencode/models').then((response) => response.json()).catch(() => ({ models: [] }));
-    datalist.replaceChildren();
-    for (const name of result.models ?? []) { const option = el('option'); option.value = name; datalist.append(option); }
-    list.textContent = t('{n} models listed', { n: (result.models ?? []).length });
-    list.disabled = false;
+}
+
+// OPENCODE (2026-10-13): the providers it can answer through, inside its own card. The ones with
+// a key or an account are a line each, with their switch for the chat; the ones without wait in
+// one row to be added; under them, the model it answers with when none is chosen. What
+// `opencode models` lists is the truth: a provider's models appear once OpenCode has its key.
+function drawOpenCodeSettings(host, s) {
+  const block = el('section', 'oc-block');
+  block.id = 'sx-opencode';
+  const head = el('div', 'oc-title');
+  head.append(el('b', null, t('Providers')), el('span', 'sx-hint', t('OpenCode answers through the providers you give it a key for. Choose which ones show in the chat, and the model it uses by default.')));
+  const rows = el('div', 'oc-providers');
+  rows.append(el('p', 'sx-hint', t('Reading OpenCode\'s providers…')));
+  const add = el('form', 'oc-add');
+  add.hidden = true;
+  const field = el('div', 'oc-default-row');
+  const select = el('select', 'sx-input oc-default');
+  select.setAttribute('aria-label', t('Default model'));
+  const other = el('input', 'sx-input mono');
+  other.placeholder = t('or type provider/model'); other.spellcheck = false;
+  other.setAttribute('aria-label', t('Another model'));
+  other.hidden = true;
+  const saveDefault = async (value) => {
+    try { await saveSettingNow({ opencode: { model: value } }, t('OpenCode model saved.')); delete state.models.opencode; }
+    catch (error) { toast(t('The setting was not saved: {error}', { error: error.message })); }
+  };
+  select.addEventListener('change', () => {
+    other.hidden = select.value !== '__other';
+    if (select.value !== '__other') { other.value = ''; void saveDefault(select.value); } else other.focus();
   });
-  field.append(model, datalist, list);
-  sxRow(opencode, t('Model'), t('Type provider/model, or list what OpenCode offers and pick one.'), field, { stack: true });
-  sxFoot(opencode, t('Every change is saved to ~/.pulse/config.json as you make it. Environment variables set before start still win on the next launch.'));
+  other.addEventListener('change', () => { const value = other.value.trim(); if (value) void saveDefault(value); });
+  const defaultWords = el('div', 'sx-words');
+  defaultWords.append(el('b', null, t('Default model')), el('span', 'sx-hint', t('What OpenCode answers with when a message does not choose one.')));
+  const picks = el('div', 'oc-picks');
+  picks.append(select, other);
+  field.append(defaultWords, picks);
+  block.append(head, rows, add, field, el('p', 'sx-foot', t('Keys are written where OpenCode reads them (~/.local/share/opencode/auth.json), readable only by you; MADRE keeps no copy. The rest is saved to ~/.pulse/config.json.')));
+  host.append(block);
+
+  const paintDefault = (providers, current) => {
+    select.replaceChildren();
+    const none = el('option', null, t('OpenCode\'s own default')); none.value = '';
+    select.append(none);
+    let found = !current;
+    for (const provider of providers.filter((one) => one.via && one.models.length)) {
+      const group = el('optgroup'); group.label = provider.label;
+      for (const name of provider.models) {
+        const option = el('option', null, name.slice(name.indexOf('/') + 1)); option.value = name;
+        if (name === current) { option.selected = true; found = true; }
+        group.append(option);
+      }
+      select.append(group);
+    }
+    const typed = el('option', null, t('Another…')); typed.value = '__other';
+    select.append(typed);
+    if (!found) { typed.selected = true; other.value = current; other.hidden = false; }
+  };
+  // One row to add a provider: which one, its key, and where to get it.
+  const paintAdd = (waiting, reload) => {
+    add.replaceChildren();
+    add.hidden = !waiting.length;
+    if (!waiting.length) return;
+    const which = el('select', 'sx-input');
+    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', 'sx-input mono');
+    input.type = 'password'; input.autocomplete = 'off'; input.spellcheck = false;
+    const where = el('a', 'oc-where', t('Where do I get one?'));
+    where.target = '_blank'; where.rel = 'noopener';
+    const sync = () => {
+      const provider = waiting.find((one) => one.id === which.value);
+      input.placeholder = t('{provider} API key', { provider: provider?.label ?? '' });
+      input.setAttribute('aria-label', input.placeholder);
+      where.hidden = !provider?.keyUrl;
+      if (provider?.keyUrl) where.href = provider.keyUrl;
+    };
+    which.addEventListener('change', sync);
+    sync();
+    const save = el('button', 'sx-btn primary', t('Add'));
+    save.type = 'submit';
+    const label = el('b', 'oc-add-label', t('Add a provider'));
+    add.append(label, which, input, save, where);
+    add.onsubmit = async (event) => {
+      event.preventDefault();
+      if (!input.value.trim()) { input.focus(); return; }
+      const provider = waiting.find((one) => one.id === which.value);
+      save.disabled = true;
+      const response = await fetch('/api/agents/opencode/key', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ key: input.value.trim(), provider: which.value }) }).catch(() => null);
+      input.value = '';
+      const result = await response?.json().catch(() => ({})) ?? {};
+      save.disabled = false;
+      if (!response?.ok) { toast(result.error ?? t('The key was not saved.')); return; }
+      toast(t('{provider} is connected to OpenCode.', { provider: provider?.label ?? which.value }), { tone: 'done' });
+      delete state.models.opencode;
+      void reload();
+    };
+  };
+  const load = async () => {
+    const answer = await fetch('/api/agents/opencode/providers').then((response) => response.json().then((json) => ({ ok: response.ok, json }))).catch(() => ({ ok: false, json: {} }));
+    if (!block.isConnected) return;
+    rows.replaceChildren();
+    if (!answer.ok) { rows.append(el('p', 'sx-hint', answer.json.error ?? t('OpenCode\'s providers could not be read.'))); return; }
+    const { providers, default: current } = answer.json;
+    const hidden = new Set(providers.filter((one) => one.hidden).map((one) => one.id));
+    for (const provider of providers.filter((one) => one.via)) rows.append(openCodeProviderRow(provider, load, hidden));
+    paintAdd(providers.filter((one) => !one.via && one.takesKey), load);
+    paintDefault(providers, current ?? s.opencodeModel ?? '');
+  };
+  void load();
+}
+// One line per provider OpenCode can answer through: its name and how it is connected, its
+// switch for the chat, and the way its key comes out (an account is signed out in OpenCode).
+function openCodeProviderRow(provider, reload, hidden) {
+  const row = el('div', 'oc-provider');
+  const words = el('div', 'sx-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('span', 'sx-hint', status));
+  if (provider.via === 'oauth') words.lastChild.title = t('Signed in with its account from OpenCode. To sign it out, run `opencode auth logout` in a terminal.');
+  row.append(words);
+  const controls = el('div', 'oc-controls');
+  if (provider.via === 'api') {
+    const remove = sxButton(t('Remove the key'), async () => {
+      if (remove.dataset.sure !== '1') { remove.dataset.sure = '1'; remove.textContent = t('Remove it?'); setTimeout(() => { if (remove.isConnected) { remove.dataset.sure = ''; remove.textContent = t('Remove the key'); } }, 4000); return; }
+      remove.disabled = true;
+      const response = await fetch('/api/agents/opencode/providers/remove', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ provider: provider.id }) }).catch(() => null);
+      const result = await response?.json().catch(() => ({})) ?? {};
+      if (!response?.ok) { remove.disabled = false; toast(result.error ?? t('The key was not removed.')); return; }
+      toast(t('{provider} no longer has a key in OpenCode.', { provider: provider.label }), { tone: 'done' });
+      delete state.models.opencode;
+      void reload();
+    }, { tone: 'ghost' });
+    controls.append(remove);
+  }
+  const shown = sxSwitch(!provider.hidden, async (on, box) => {
+    if (on) hidden.delete(provider.id); else hidden.add(provider.id);
+    try {
+      await saveSettingNow({ opencode: { hidden: [...hidden] } }, on ? t('{provider} shows in the chat.', { provider: provider.label }) : t('{provider} no longer shows in the chat.', { provider: provider.label }));
+      delete state.models.opencode;
+    } catch (error) {
+      if (on) hidden.add(provider.id); else hidden.delete(provider.id);
+      box.checked = !on; toast(t('The setting was not saved: {error}', { error: error.message }));
+    }
+  }, { label: t('Show {provider} in the chat', { provider: provider.label }) });
+  const label = el('label', 'oc-shown');
+  label.append(el('span', null, t('In the chat')), shown);
+  controls.append(label);
+  row.append(controls);
+  return row;
 }
 
 // PERMISSIONS: what unlocks #3 and #4, a phrase of one's own, how long an accepted key holds, and
@@ -16107,8 +16488,19 @@ function stopNostromo() {
 // Drag turns the archive in the hand, Shift+drag pans, wheel zooms about the pointer, a still
 // click selects. Let go and it stays where it was left; RECENTER brings back the side view.
 const drag = { active: false, moved: false, pan: false, x: 0, y: 0 };
-nostromo.canvas?.addEventListener('mousedown', (event) => { drag.active = true; drag.moved = false; drag.pan = event.shiftKey; drag.x = event.clientX; drag.y = event.clientY; });
+// Floating memory cards and other open windows keep their entire visible rectangle. A click on a
+// command or a window's glass must never be interpreted as a click on the map behind it.
+function nostromoCovered(event) {
+  const panels = [...nostromo.cards, ...floatingWindows(), ...document.querySelectorAll('dialog[open]')];
+  return panels.some((panel) => {
+    if (panel.hidden || panel === nostromo.dialog || panel.contains(nostromo.canvas)) return false;
+    const rect = panel.getBoundingClientRect();
+    return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+  });
+}
+nostromo.canvas?.addEventListener('mousedown', (event) => { if (event.button !== 0 || nostromoCovered(event)) return; drag.active = true; drag.moved = false; drag.pan = event.shiftKey; drag.x = event.clientX; drag.y = event.clientY; });
 nostromo.canvas?.addEventListener('mousemove', (event) => {
+  if (nostromoCovered(event)) return;
   if (drag.active) {
     const dx = event.clientX - drag.x, dy = event.clientY - drag.y;
     if (Math.hypot(dx, dy) > 3) drag.moved = true;
@@ -16135,6 +16527,7 @@ nostromo.canvas?.addEventListener('mousemove', (event) => {
 window.addEventListener?.('mouseup', () => { drag.active = false; nostromo.canvas?.classList.remove('dragging'); });
 nostromo.canvas?.addEventListener('mouseleave', () => { nostromo.hover = null; });
 nostromo.canvas?.addEventListener('wheel', (event) => {
+  if (nostromoCovered(event)) return;
   event.preventDefault();
   if (!nostromoLive()) return;
   const rect = nostromo.canvas.getBoundingClientRect();
@@ -16153,8 +16546,9 @@ nostromo.canvas?.addEventListener('wheel', (event) => {
 for (const [type, phase] of [['pointerdown', 'down'], ['pointermove', 'move'], ['pointerup', 'up'], ['pointercancel', 'up']]) {
   nostromo.canvas?.addEventListener(type, (event) => flatTouch(event, phase));
 }
-nostromo.canvas?.addEventListener('click', () => flatPaint());
+nostromo.canvas?.addEventListener('click', (event) => { if (!nostromoCovered(event)) flatPaint(); });
 nostromo.canvas?.addEventListener('click', (event) => {
+  if (nostromoCovered(event)) return;
   if (drag.moved) { drag.moved = false; return; }
   const at = nostromo.flat ? flatAt(event) : nostromoAt(event);
   // The core is the door. Touching it used to be treated as an attempt on the archive; what is
@@ -16573,6 +16967,9 @@ function maybeStartTour() {
   // and What's new 1.0. Once it was given, only a later version's news come, never the old tour;
   // and the first time the room is here after it, Switch project says what it is.
   void roomTour().loaded.then(async (answer) => {
+    // A new person is welcomed in Home, where the bonjour leads to connecting the agents and adding
+    // the projects before any chapter; a project does not greet them first (2026-10-14).
+    if (answer?.owed && !answer.returning && !answer.state?.path) return;
     if (answer?.owed) { await roomTour().maybeBonjour(); return; }
     if (answer?.state?.bonjourAt) {
       const shown = await maybeShowWhatsNew();
@@ -16616,8 +17013,42 @@ function roomTour() {
 
 // Three buttons open whole workspaces and say nothing about it until you are inside one. The
 // first time each is pressed, the workspace opens as always and a card beside the button says
-// what it is for. Once per button: after that the button is just a button.
+// what it is for. Once per button: after that the button is just a button. From 1.1 every key of
+// the bar that opens something says so too (2026-10-14).
 const FIRST_TOUCH = {
+  settings: {
+    button: '#custom-button',
+    panel: '#settings',
+    title: t('Settings'),
+    text: t('Everything this project uses, in one window: appearance, agents, memory, permissions, privacy and version. Press / to search any setting.'),
+  },
+  modules: {
+    button: '#modules-button',
+    panel: '#modules',
+    title: t('Modules'),
+    text: t('Extra features for this project, like apps. Each tile says what it does and what it needs; nothing is installed until you ask.'),
+  },
+  mother: {
+    button: '#mother-button',
+    panel: '#mother',
+    title: t('Diagnostics'),
+    text: t('When something fails, describe it in your own words: Diagnostics says what is going on and gives you the key that fixes it.'),
+  },
+  memory: {
+    button: '#nostromo-bar',
+    title: t('Memory map'),
+    text: t('Everything MADRE remembers about this project, as stars. Drag to turn it, use the wheel to zoom in, and click a star to read that memory.'),
+  },
+  crew: {
+    button: '#agents-compact',
+    title: t('Agents'),
+    text: t('The agents this project can call, and whether each one is ready. Their sessions are set in Settings › Agents.'),
+  },
+  steps: {
+    button: '#steps-pill',
+    title: t('First steps'),
+    text: t('A short list to get the most out of MADRE. Each step is checked off on its own when you do it, and the pill goes away when you are done.'),
+  },
   browser: {
     button: '#browser-button',
     title: t('The browser'),
@@ -16648,6 +17079,11 @@ function firstTouch(id) {
   try { localStorage.setItem(HINTS_KEY, JSON.stringify({ ...seen, [id]: true })); } catch { /* a private window gets the card every time */ }
   const button = document.querySelector(hint.button);
   if (!button) return;
+  // Said once what was pressed has opened: some open after a moment, and a modal window (the
+  // Memory map) makes everything outside it unreachable, so the card goes inside that window.
+  setTimeout(() => showFirstTouch(hint, button), 320);
+}
+function showFirstTouch(hint, button) {
   document.querySelector('.hint-card')?.remove();
   const card = el('section', 'hint-card');
   card.setAttribute('role', 'dialog');
@@ -16655,7 +17091,9 @@ function firstTouch(id) {
   const ok = el('button', 'hint-ok', t('Got it'));
   ok.type = 'button';
   card.append(el('h3', null, hint.title), el('p', null, hint.text), ok);
-  document.body.append(card);
+  const modal = [...document.querySelectorAll('dialog[open]')].reverse().find((one) => one.matches(':modal'));
+  (modal ?? document.body).append(card);
+  if (modal) card.classList.add('in-modal');
   // Placed once the workspace has opened, because opening it moves things: the bar narrows when
   // the browser docks, and the conversations button steps aside for its own panel. Under the
   // button, with its point aimed at it, while the button is there to point at; beside the panel