clavarium 0.2.366-next.1 → 0.2.367-next.1

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "clavarium",
-  "version": "0.2.366-next.1",
+  "version": "0.2.367-next.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "clavarium",
-      "version": "0.2.366-next.1",
+      "version": "0.2.367-next.1",
       "license": "MIT",
       "dependencies": {
         "@xterm/addon-fit": "^0.11.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clavarium",
-  "version": "0.2.366-next.1",
+  "version": "0.2.367-next.1",
   "license": "MIT",
   "type": "module",
   "description": "A conversation is a VM with a terminal in it. Everything else is a folder.",

package/server/api.mjs

@@ -94,6 +94,7 @@
  *   GET  /api/rooms                         the rooms (#268): [{id, name, host, members: [{id, kind, name, ref, host?}], unread, last, thinking: [names]}]
  *   POST /api/rooms                         {name, conversations: [names], boxes: [ids], host?}: a new room
  *   POST /api/rooms/<id>                    {name?, host?, add?: {conversations, boxes}, remove?: [member ids]}
+ *                                           quiet?: true/false (muted in the list: no dot, at the bottom)
  *   POST /api/rooms/<id>/remove             the room and its thread
  *   POST /api/rooms/<id>/give               {asset, rights, shared?}: the same right given to each AI of it, its own
  *                                           conversation's -> {asset, rights, given: [{conversation, ok, kept?, error?}]}

package/server/rooms.mjs

@@ -100,7 +100,7 @@ export class Rooms {
        in its row of the list and on its bar, « Hugo réfléchit… » in its thread. */
     #thinkingOf(id, members) { return [...(this.#thinking.get(id) ?? new Map()).entries()].filter(([, v]) => Date.now() - v.at < THINKING_MS).map(([mid]) => members.find((m) => m.id === mid)?.name).filter(Boolean); }
     #doingOf(id, members) { return [...(this.#thinking.get(id) ?? new Map()).entries()].filter(([, v]) => v.text && Date.now() - v.at < THINKING_MS).map(([mid, v]) => ({ name: members.find((m) => m.id === mid)?.name, text: v.text })).filter((x) => x.name); }
-    list() { return this.#all().map((r) => { const members = this.#shown(r); return { id: r.id, name: r.name, host: r.host, members, at: r.at, unread: this.#unread(r), last: this.#last(r), thinking: this.#thinkingOf(r.id, members) }; }); }
+    list() { return this.#all().map((r) => { const members = this.#shown(r); return { id: r.id, name: r.name, host: r.host, members, at: r.at, unread: this.#unread(r), last: this.#last(r), thinking: this.#thinkingOf(r.id, members), ...(r.quiet ? { quiet: true } : {}) }; }); }
     /* ITS AIs, as conversations (06-11): the names of the conversations of its AI members that are there now --
        never a box, never the person, never one taken out of the room. What « give to all its AIs » gives to. */
     ais(id) { return this.#shown(this.#find(id)).filter((m) => m.kind === 'ai').map((m) => m.ref); }
@@ -139,10 +139,11 @@ export class Rooms {
         if (new Set(names).size !== names.length) throw new Refusal(409, 'Two members of a room cannot have the same name: rename one first.');
         if (room.members.length > MEMBERS_MAX) throw new Refusal(409, `${MEMBERS_MAX} members at most.`);
     }
-    /* Its name, its host, members added or taken away. */
-    change(id, { name, host, add = {}, remove = [] } = {}) {
+    /* Its name, its host, members added or taken away; `quiet` (07-11, the tidy-up): muted in the list, or not. */
+    change(id, { name, host, add = {}, remove = [], quiet } = {}) {
         const list = this.#all(); const room = list.find((r) => r.id === id);
         if (!room) throw new Refusal(404, 'No such room.');
+        if (quiet !== undefined) { if (quiet === true) room.quiet = true; else delete room.quiet; }
         if (name !== undefined) {
             const n = nameOf(name); if (!n) throw new Refusal(400, 'Give the room a name.');
             if (list.some((r) => r.id !== id && r.name.toLowerCase() === n.toLowerCase())) throw new Refusal(409, 'A room has that name already.');

package/server/settingswords.mjs

@@ -33,7 +33,7 @@ export const SETTINGS_WORDS_FR = {
     'set-dict-backup': 'Secours en service', 'set-dict-expired': 'Clé expirée', 'set-dict-with-backup': 'avec secours', 'set-dict-server': 'réglée sur le serveur',
     'set-attached': '{n} joints', 'set-secret': '1 secret', 'set-secrets': '{n} secrets', 'set-offline': 'hors ligne',
     'set-device': '1 appareil', 'set-devices': '{n} appareils', 'set-no-device': 'Aucun appareil', 'set-chat': 'Chat',
-    'set-wakeups-on': '{on} sur {n} actifs', 'set-asleep': 'Endormie', 'set-not-looked': 'Pas encore regardée',
+    'set-wakeups-on': '{on} sur {n} actifs', 'set-asleep': 'En veille', 'set-not-looked': 'Pas encore regardée',
     'set-running-well': 'En marche · rien d\'anormal', 'set-conv-advanced': 'Archiver · remettre à neuf · supprimer',
     /* New asset, one box (05-11, step 3): one verb per gesture -- Créer, Attacher, Terminé. */
     'set-na-new': 'Nouvel asset', 'set-na-attach': 'Attacher', 'set-na-there': 'Déjà là', 'set-na-or-new': 'ou un nouveau',
@@ -109,11 +109,15 @@ export const SETTINGS_WORDS_FR = {
     'set-list-not-filed': 'Sans groupe', 'set-list-asks': 'vous demande', 'set-list-waits': 'vous attend',
     'set-list-asks-for': 'le répondeur vous demande', 'set-list-answered': 'a répondu à votre place',
     'set-list-wakeup': '1 réveil', 'set-list-wakeups': '{n} réveils', 'set-list-hidden': 'cachée',
-    'set-list-asleep': 'endormie, se réveille à l\'ouverture', 'set-list-starting': 'démarre', 'set-list-restarting': 'redémarre',
+    'set-list-asleep': 'en veille', 'set-list-starting': 'démarre', 'set-list-restarting': 'redémarre',
     'set-list-moving': 'déplace son travail', 'set-list-failed': 'en échec', 'set-list-you': 'Vous : {text}',
     'set-list-fewer': 'En montrer moins', 'set-list-more': 'En montrer {n} de plus',
     'set-list-hide-hidden': 'Masquer les {n} cachées', 'set-list-n-hidden': '{n} cachées',
     'set-list-tip': 'Rangez-les en groupes : Réglages, Groupe.',
+    'set-idle-h': 'rien depuis {n} h', 'set-idle-d': 'rien depuis {n} j', 'set-idle-w': 'rien depuis {n} sem.', 'set-idle-mo': 'rien depuis {n} mois',
+    'set-tidy-open': 'Faire le ménage ({n})', 'set-tidy-title': 'Mettre en veille ?', 'set-tidy-hint': 'Rien depuis 12 h ou plus.',
+    'set-tidy-go': 'Mettre en veille ({n})', 'set-close': 'Fermer',
+    'set-asleep-page': 'En veille. Elle reprend quand vous la réveillez.', 'set-wake-it': 'Réveiller',
     'set-as-k-git': 'Dépôts git', 'set-as-k-folder': 'Dossiers', 'set-as-k-mailbox': 'Boîtes mail', 'set-as-k-agenda': 'Agendas',
     'set-as-k-contacts': 'Contacts', 'set-as-k-secret': 'Secrets', 'set-as-k-list': 'Classeurs', 'set-as-k-acces': 'Accès',
     'set-as-kind-folder': 'dossier', 'set-as-kind-git': 'dépôt', 'set-as-kind-mailbox': 'boîte mail',
@@ -134,12 +138,14 @@ export const SETTINGS_WORDS_FR = {
     'set-files-read-only': 'Lecture seule : rien ne peut y être changé.',
     'set-this-conv': 'Cette conversation · {name}', 'set-ask-first': 'Demander avant d\'agir',
     'set-online': 'En ligne', 'set-offline-btn': 'Hors ligne', 'set-sleep': 'Endormir',
-    'set-room-name': 'Nom', 'set-room-host': 'Accueille le salon', 'set-room-host-what': 'répond, ou passe le message',
-    'set-room-host-pick': 'Choisissez ci-dessous : « Accueille »', 'set-room-welcomes': 'Accueille', 'set-room-ais': 'Ses IA',
-    'set-room-in': '{n} dans le salon', 'set-room-find': 'Chercher une conversation', 'set-room-boxes': 'Boîtiers vocaux',
+    'set-room-name': 'Nom', 'set-room-welcomes': 'Accueille', 'set-room-ais': 'Ses IA',
+    'set-room-find': 'Chercher une conversation', 'set-room-boxes': 'Boîtiers vocaux',
     'set-room-remove': 'Supprimer le salon', 'set-room-remove-what': 'Le fil part · les IA et boîtiers restent',
     'set-room-remove-dots': 'Supprimer…', 'set-room-remove-yes': 'Supprimer {name}', 'set-room-keep': 'Garder',
-    'set-room-cancel': 'Annuler', 'set-room-save': 'Enregistrer', 'set-room-create': 'Créer', 'set-room-new': 'Nouveau salon',
+    'set-room-create': 'Créer', 'set-room-new': 'Nouveau salon',
+    /* A room's settings as every settings page (07-11): each change saved at once, said a moment in the bar. */
+    'set-room-saved': 'Enregistré', 'set-room-settings-of': '{name} · Réglages', 'set-room-of': '{n} sur {t}',
+    'set-room-host-how': 'Touchez une autre IA du salon pour la déplacer',
     'set-room-people': 'Personnes', 'set-room-ais-of': 'IA', 'set-room-boxes-of': 'Boîtiers', 'set-room-host-mark': 'accueille',
     'set-room-n-person': '1 personne', 'set-room-n-people': '{n} personnes', 'set-room-n-ai': '1 IA', 'set-room-n-ais': '{n} IA',
     'set-room-n-box': '1 boîtier', 'set-room-n-boxes': '{n} boîtiers',

package/web/app.js

@@ -433,15 +433,16 @@
             ? KIT.TopBar({ variant: 'main', title: $('name'), actions: [...old.children].filter((n) => n.id !== 'name') })
             : KIT.TopBar({ variant: 'main', fold: $('fold'), back: { element: $('back'), label: 'Conversations' }, state: $('state'), title: $('name'), actions: [$('views')] }));
     }
-    /* A room (the device page has none): its dot, its name, under it who speaks now and who is in it; its settings
-       in the same group of views a conversation's settings sit in; its way back, "‹", as a conversation's (kit: 'main'). */
+    /* A room (the device page has none): its dot, its name, under it who speaks now (only then); on its right who is
+       in it (07-11: small stacked avatars, a click opens the list) then its settings, in the same group of views a
+       conversation's settings sit in; one line, as every bar; its way back, "‹", as a conversation's (kit: 'main'). */
     if (document.getElementById('salon')) {
         const top = $('salon').querySelector(':scope > .panel-top');
         const t = $('salon-title'); const name = document.createElement('span'); name.id = 'salon-name'; name.textContent = t.textContent; t.replaceChildren(name);
         const live = document.createElement('small'); live.id = 'salon-live'; live.className = 'salon-live'; live.hidden = true;
         const views = document.createElement('div'); views.className = 'views'; views.setAttribute('role', 'group'); views.setAttribute('aria-label', 'Room'); views.append($('salon-settings'));
         const strip = $('salon').querySelector('.salon-bar');
-        topBar(top, { variant: 'main', state: { id: 'salon-state' }, sub: [live, $('salon-who')], actions: [views] });
+        topBar(top, { variant: 'main', state: { id: 'salon-state' }, sub: [live], actions: [$('salon-who'), views] });
         strip?.remove();
     }
     for (const top of [...document.querySelectorAll('#places .sheet > .panel-top')]) topBar(top, top.parentElement.id === 'salon-new' ? { state: { id: 'salon-new-state' } } : {});
@@ -1068,7 +1069,7 @@
         /* Given its chat and not its terminal: the chat is the whole page, and no terminal is ever opened. */
         if (noTerminal()) { chatAlone(); return; }
         /* Asleep because somebody asked: it stays asleep until somebody asks. */
-        if (c && c.asleep === true && !socket) { say('asleep', 'waiting'); show(`Asleep. The tool is frozen as it was.${c.sizeAtWake ? ` When it wakes, its machine is restarted with its new size (${laterWords(c.sizeAtWake)}), and the tool takes up its session.` : ''}`, 'Wake it', connect); mascot('asleep'); return; }
+        if (c && c.asleep === true && !socket) { say('asleep', 'waiting'); show(`${uiSaid('set-asleep-page', 'Asleep. It wakes only when you wake it.')}${c.sizeAtWake ? ` When it wakes, its machine is restarted with its new size (${laterWords(c.sizeAtWake)}), and the tool takes up its session.` : ''}`, uiSaid('set-wake-it', 'Wake it'), connect); mascot('asleep'); return; }
         if (!socket) { terminal.reset(); connect(); }
         void watchSignIn();
     }
@@ -1271,7 +1272,7 @@
         /* Under way: the step the panel shows, in its words (the tool named once). */
         const under = c.progress && ['building', 'restarting', 'ready'].includes(c.phase) ? stepNow(c.progress, c.toolLabel) : '';
         /* What it is doing, when it says something: its tool is not named on every row. */
-        const now = under || (holds(c) && c.phase !== 'building' ? (c.progress.kind === 'build' ? uiSaid('set-list-starting', 'starting') : uiSaid('set-list-restarting', 'restarting')) : c.phase === 'ready' ? (c.asleep ? uiSaid('set-list-asleep', 'asleep, wakes when opened') : '') : c.phase === 'building' ? (c.step ?? 'building') : c.phase === 'moving' ? uiSaid('set-list-moving', 'moving its work') : c.phase === 'restarting' ? uiSaid('set-list-restarting', 'restarting') : uiSaid('set-list-failed', 'failed'));
+        const now = under || (holds(c) && c.phase !== 'building' ? (c.progress.kind === 'build' ? uiSaid('set-list-starting', 'starting') : uiSaid('set-list-restarting', 'restarting')) : c.phase === 'ready' ? (c.asleep ? uiSaid('set-list-asleep', 'asleep') : '') : c.phase === 'building' ? (c.step ?? 'building') : c.phase === 'moving' ? uiSaid('set-list-moving', 'moving its work') : c.phase === 'restarting' ? uiSaid('set-list-restarting', 'restarting') : uiSaid('set-list-failed', 'failed'));
         /* The line of its tool only when it says something: under way, asleep, failed -- not "Claude Code" again and again. */
         const plain = c.phase === 'ready' && !c.asleep && !under && !holds(c);
         const chips = [];
@@ -1288,9 +1289,15 @@
         for (const b of boxesNow()) if (b.conversation === c.name) chips.push({ text: b.name, icon: 'box', wide: true });
         /* Its last message. The agent is the usual speaker, so its name is left off (just the words); only
            the person's own last word is marked "You:", which tells you it is your move. */
-        const last = told && c.talk?.lastText ? (c.talk.lastFrom === 'person' ? uiSaid('set-list-you', 'You: {text}', { text: c.talk.lastText }) : c.talk.lastText) : '';
+        let last = told && c.talk?.lastText ? (c.talk.lastFrom === 'person' ? uiSaid('set-list-you', 'You: {text}', { text: c.talk.lastText }) : c.talk.lastText) : '';
         const state = rollup(c);
-        return { title: shownName(c), state, stateLabel: STATE_WORDS[state], avatar: { name: shownName(c) }, when: told ? whenWords(activityOf(c)) : '', last, now: plain ? '' : now, who: agentWho(c), chips };
+        /* IDLE 12 H OR MORE (07-11): « rien depuis 14 h », in grey, in place of its last words; never on one that
+           waits for you. Asleep: after « asleep ». */
+        const idle = c.phase === 'ready' && !under && !holds(c) ? KIT.idleFor(activityOf(c), { waits: needsYou(c) }) : 0;
+        let said = plain ? '' : now;
+        if (idle && c.asleep) said = `${said} \u00b7 ${KIT.idleWords(idle)}`;
+        else if (idle && !said) { said = KIT.idleWords(idle); last = ''; }
+        return { title: shownName(c), state, stateLabel: STATE_WORDS[state], avatar: { name: shownName(c) }, when: told ? whenWords(activityOf(c)) : '', last, now: said, idle: Boolean(idle && !c.asleep && said), who: agentWho(c), chips };
     }
     /* `copy`: a row of Needs you or Recent, beside its place in its group: it is not moved by hand.
        `told`: it says what was said last, and when (a copy always; the one list when there is no group). */
@@ -1336,9 +1343,18 @@
     try { roomsOnly = localStorage.getItem('clavarium-list-show') === 'rooms'; } catch { /* a private window */ }
     /* A ROOM, drawn as a conversation (kit.js ConvCard): its sign for an initial, its last words or who speaks,
        when; its point: new words waiting (the colour of what waits for you), else at work while one speaks, else fine. */
+    /* A ROOM MUTED by a tidy-up (07-11): no point, at the bottom of the rooms -- until new words come, or it is opened. */
+    const roomMuted = (r) => r.quiet === true && !(r.unread > 0) && thinkingOf(r).length === 0;
+    const roomAt = (r) => Date.parse(r.last?.at ?? r.at ?? '') || 0;
     function roomModel(r) {
         const who = thinkingOf(r);
         const sign = document.createElement('span'); sign.className = 'room-sign';
+        const muted = roomMuted(r);
+        const idle = KIT.idleFor(roomAt(r), { waits: r.unread > 0 || who.length > 0 });
+        if (muted || idle) {
+            const words = [muted ? uiSaid('set-list-asleep', 'asleep') : '', idle ? KIT.idleWords(idle) : ''].filter(Boolean).join(' \u00b7 ');
+            return { title: r.name, state: muted ? 'sleep' : 'ok', stateLabel: muted ? STATE_WORDS.sleep : 'Room', avatar: { name: r.name, glyph: sign }, last: '', when: r.last ? whenWords(Date.parse(r.last.at)) : '', now: words, idle: !muted, chips: [] };
+        }
         const state = r.unread > 0 ? 'wait' : who.length ? 'work' : 'ok';
         const chips = [];
         if (r.unread > 0) chips.push({ text: r.unread > 99 ? '99+' : String(r.unread), tone: 'count', title: `${r.unread} new` });
@@ -1356,9 +1372,14 @@
         const b = KIT.ConvCard(roomModel(r), { size: 'row', cls: 'item room-item' }); b.dataset.room = r.id;
         /* One of its AIs speaking now: said instead of its last message (a conversation at work: its dot, gold). */
         if (thinkingOf(r).length) b.dataset.live = 'true';
+        if (roomMuted(r)) b.dataset.asleep = 'true';
         if (r.last) b.dataset.when = 'true';
         if (r.id === roomOpenNow()) b.setAttribute('aria-current', 'true');
-        b.addEventListener('click', () => { void openSalon(r.id, true, { step: true }); });
+        b.addEventListener('click', () => {
+            /* Opened: a muted room is a room again (it has no machine to wake). */
+            if (r.quiet) { r.quiet = false; void post(`${API}/rooms/${r.id}`, { quiet: false }).catch(() => {}); }
+            void openSalon(r.id, true, { step: true });
+        });
         return b;
     }
     /* What was just unfolded comes in gently, once (the next paints show it as it is). */
@@ -1413,6 +1434,66 @@
             paint();
         });
     }
+    /* WHAT A TIDY-UP OFFERS: the conversations and rooms idle 12 h or more, neither waiting for you nor asleep
+       already, nor hidden, nor under way; the longest idle first (kit.js tidyList). */
+    const tidyNow = () => KIT.tidyList([
+        ...conversations.filter((c) => c.phase === 'ready' && !holds(c)).map((c) => ({ kind: 'conversation', id: c.name, name: shownName(c), at: activityOf(c), waits: needsYou(c), asleep: c.asleep === true, hidden: c.hidden === true })),
+        ...roomsNow().map((r) => ({ kind: 'room', id: r.id, name: r.name, at: roomAt(r), waits: r.unread > 0 || thinkingOf(r).length > 0, asleep: r.quiet === true })),
+    ]);
+    /* « Mettre en veille ? » (07-11): one question, the list all ticked (untick to keep one), one button. A
+       conversation is put to sleep (its machine too: it wakes only when you open it and touch « Wake it »);
+       a room is muted in the list. No undo: a machine asleep takes a while to come back. */
+    function openTidy() {
+        document.getElementById('tidy')?.remove();
+        const list = tidyNow(); if (!list.length) return;
+        const wrap = document.createElement('div'); wrap.className = 'lk-sheet-wrap tidy-wrap'; wrap.id = 'tidy';
+        const box = document.createElement('div'); box.className = 'lk-sheet tidy'; box.setAttribute('role', 'dialog'); box.setAttribute('aria-modal', 'true'); box.setAttribute('aria-labelledby', 'tidy-title');
+        const top = document.createElement('div'); top.className = 'lk-sheet-top';
+        const title = document.createElement('b'); title.id = 'tidy-title'; title.className = 'lk-tx'; title.textContent = uiSaid('set-tidy-title', 'Put to sleep?');
+        const x = document.createElement('button'); x.type = 'button'; x.className = 'icon-btn'; x.textContent = '\u00d7'; x.setAttribute('aria-label', uiSaid('set-close', 'Close'));
+        top.append(title, x);
+        const hint = document.createElement('p'); hint.className = 'hint'; hint.textContent = uiSaid('set-tidy-hint', 'Nothing for 12 h or more.');
+        const rows = document.createElement('div'); rows.className = 'tidy-list';
+        const go = document.createElement('button'); go.type = 'button'; go.className = 'primary tidy-go';
+        const said = document.createElement('p'); said.className = 'hint tidy-said'; said.hidden = true;
+        const boxes = list.map((t) => {
+            const row = document.createElement('label'); row.className = 'tidy-row'; row.dataset.kind = t.kind; row.dataset.id = t.id;
+            const tick = document.createElement('input'); tick.type = 'checkbox'; tick.checked = true;
+            const name = document.createElement('span'); name.className = 'tidy-name';
+            name.append(Object.assign(document.createElement('b'), { textContent: t.name }), document.createTextNode(` \u2014 ${KIT.idleWords(t.idle)}`));
+            row.append(tick, name); rows.append(row);
+            tick.addEventListener('change', count);
+            return { t, tick };
+        });
+        function count() { const n = boxes.filter((b) => b.tick.checked).length; go.disabled = n === 0; go.textContent = uiSaid('set-tidy-go', 'Put to sleep ({n})', { n }); }
+        count();
+        const close = () => { wrap.remove(); document.removeEventListener('keydown', esc, true); };
+        const esc = (event) => { if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); shut(); } };
+        const shut = () => { if (!nav.close('tidy')) close(); };
+        x.addEventListener('click', shut);
+        wrap.addEventListener('click', (event) => { if (event.target === wrap) shut(); });
+        document.addEventListener('keydown', esc, true);
+        go.addEventListener('click', async () => {
+            const chosen = boxes.filter((b) => b.tick.checked).map((b) => b.t);
+            go.disabled = true; for (const b of boxes) b.tick.disabled = true;
+            if (chosen.some((t) => t.kind === 'conversation' && t.id === current)) disconnect();
+            const done = await Promise.allSettled(chosen.map((t) => (t.kind === 'room'
+                ? post(`${API}/rooms/${t.id}`, { quiet: true })
+                : post(`${API}/conversations/${encodeURIComponent(t.id)}/sleep`))));
+            const failed = done.map((r, i) => (r.status === 'rejected' ? `${chosen[i].name}: ${r.reason?.message ?? ''}` : '')).filter(Boolean);
+            await refresh().catch(() => {});
+            try { await loadRooms(); } catch { /* read again later */ }
+            if (chosen.some((t) => t.kind === 'conversation' && t.id === current)) enter();
+            paint();
+            if (failed.length) { said.hidden = false; said.textContent = failed.join(' \u00b7 '); count(); for (const b of boxes) b.tick.disabled = false; return; }
+            shut();
+        });
+        box.append(top, hint, rows, go, said);
+        wrap.append(box);
+        document.body.append(wrap);
+        nav.push('tidy', () => close());
+        go.focus();
+    }
     function paint() {
         if (listHeld) { paintLater = true; return; }
         /* The groups, folded as a whole or not (a search shows them all). */
@@ -1464,7 +1545,7 @@
             if (openOne && !inSight.includes(openOne)) inSight.push(openOne);
             const few = inSight.length;
             /* The rooms used in the last day, among them by when (03-11: « dans le récent, indifféremment »). */
-            const recentRooms = roomsNow().filter((r) => r.last && Date.parse(r.last.at) >= dayAgo);
+            const recentRooms = roomsNow().filter((r) => r.last && Date.parse(r.last.at) >= dayAgo && !roomMuted(r));
             const rowsOfRecent = (list) => [...list.map((c) => ({ at: activityOf(c), el: () => itemButton(c, true) })), ...recentRooms.map((r) => ({ at: Date.parse(r.last.at), el: () => roomItem(r) }))].sort((a, b) => b.at - a.at).map((x) => x.el());
             if ((recent.length || recentRooms.length) && groups.length && section(RECENT, uiSaid('set-list-recent', 'Recent'), recent)) {
                 top.append(...unfolding(RECENT, rowsOfRecent(showAllRecent ? recent : recent.filter((c) => inSight.includes(c)))));
@@ -1503,7 +1584,7 @@
         }
         if (groupsOpen && !onlyRooms) unfolding(GROUPS, [...items.children]);
         /* ROOMS (03-11): their own list, after the groups of conversations; a search finds them by name. */
-        const roomsShown = roomsNow().filter((r) => !query || r.name.toLowerCase().includes(String(query).toLowerCase()));
+        const roomsShown = roomsNow().filter((r) => !query || r.name.toLowerCase().includes(String(query).toLowerCase())).sort((a, b) => Number(roomMuted(a)) - Number(roomMuted(b)));
         if (!DEVICE && roomsShown.length) {
             const b = document.createElement('button'); b.type = 'button'; b.className = 'list-head list-fold'; b.dataset.section = 'rooms';
             const open = onlyRooms || !folded.has(ROOMS); b.setAttribute('aria-expanded', String(open));
@@ -1513,6 +1594,16 @@
             items.append(b);
             if (open) items.append(...roomsShown.map((r) => roomItem(r)));
         }
+        /* THE OPEN ONE, MARKED ONCE (07-11): at its first place in the list (À vous, Récent, then its group). */
+        for (const extra of [...top.querySelectorAll('[aria-current="true"]'), ...items.querySelectorAll('[aria-current="true"]')].slice(1)) extra.removeAttribute('aria-current');
+        /* FAIRE LE MÉNAGE (07-11): at the bottom, only when something has been idle 12 h or more. */
+        const tidy = !DEVICE && !query ? tidyNow() : [];
+        if (tidy.length) {
+            const b = document.createElement('button'); b.type = 'button'; b.id = 'tidy-open'; b.className = 'tidy-open';
+            b.textContent = uiSaid('set-tidy-open', 'Tidy up ({n})', { n: tidy.length });
+            b.addEventListener('click', () => openTidy());
+            items.append(b);
+        }
         /* The folders there are, offered where one is chosen. */
         $('group-names').replaceChildren(...groupsInOrder().map((g) => { const o = document.createElement('option'); o.value = g; return o; }));
         const hits = [...items.querySelectorAll('.item')];
@@ -2390,7 +2481,7 @@
     /* All folded when the app is opened: what the person opens stays open while this tab lives (a reload
        included), never from one day to the next -- a page that opens half-unfolded says nothing. What asks
        for them is said on the folded chapter instead (markAttention). */
-    const OPEN_AT_FIRST = { 's-features': true };
+    const OPEN_AT_FIRST = { 's-features': true, 'room-ais': true };
     let chapters = {};
     try { chapters = JSON.parse(sessionStorage.getItem('clavarium-chapters') ?? '{}') ?? {}; } catch { /* a private window */ }
     try { localStorage.removeItem('clavarium-chapters'); } catch { /* as above */ }
@@ -5412,11 +5503,11 @@
         if (line) { line.hidden = who.length === 0; line.textContent = who.length ? speaking(who) : ''; }
     }
     let salonAsked = 0;
-    /* A room's bar: its name, its state, its members (folded). */
+    /* A room's bar: its name, its state, its members (up to 3 avatars; a click shows the list under the bar). */
     function salonHead(r) {
         $('salon-name').textContent = r.name;
         salonLive(thinkingOf(r));
-        $('salon-who').replaceChildren(memberChips(r.members), el('span', 'hint', `${countOf(r.members)} \u25BE`));
+        KIT.MemberStack(r.members, { max: 3, button: $('salon-who'), label: countOf(r.members) });
         $('salon-who').setAttribute('aria-expanded', 'false'); $('salon-members').hidden = true;
         const rows = ['person', 'ai', 'box'].map((k) => { const of = r.members.filter((m) => m.kind === k); if (!of.length) return null; const row = el('div', 'salon-members-row'); row.append(el('span', 'hint', k === 'person' ? uiSaid('set-room-people', 'People') : k === 'ai' ? uiSaid('set-room-ais-of', 'AIs') : uiSaid('set-room-boxes-of', 'Boxes')), ...of.map((m) => { const x = el('span', 'salon-member'); x.append(memberChips([m], 1), document.createTextNode(m.name)); if (m.host) x.append(el('span', 'salon-host', uiSaid('set-room-host-mark', 'host'))); return x; })); return row; }).filter(Boolean);
         $('salon-members').replaceChildren(...rows);
@@ -5503,37 +5594,92 @@
     }
     $('salon-close').addEventListener('click', () => leavePlace());
     $('salon-who').addEventListener('click', () => { const open = $('salon-members').hidden; $('salon-members').hidden = !open; $('salon-who').setAttribute('aria-expanded', String(open)); });
-    /* A NEW ROOM, or a room set up again (03-11): the one that welcomes in a box of its own at the top; below, every
-       conversation on one row -- its name, the name its assistant has in its chat, its tool -- with a switch (in the
-       room or not) and « Welcomes »; a search; a row dragged into the box above welcomes too. Boxes: the same rows,
-       with a switch only. `editing`: the room, or null for a new one. */
+    /* A NEW ROOM, or a room's settings (07-11, charte-reglages: as every settings page): folding chapters -- General
+       (its name), Its AIs (every conversation on a row, a switch: in the room or not; the one that welcomes wears
+       « Welcomes », a tap on another of the room moves it), Their assets, Chat & voice (its boxes), Advanced (remove).
+       A room's settings save each change at once (roomPatch), « ✓ Saved » in the bar; a new room keeps its choices
+       here until « Create ». `salonEditing`: the room, or null for a new one. */
     let salonIn = new Set(); let salonHost = ''; let salonBoxes = new Set(); let salonEditing = null; let salonBoxList = [];
-    /* Every conversation as a member: the kit's card, its size `member`, its gestures (Welcomes, in the room) at its end. */
+    /* What a room has, read again from it (after each change saved: what the server kept). */
+    const salonTake = (r) => {
+        salonIn = new Set(r ? r.members.filter((m) => m.kind === 'ai').map((m) => m.ref) : []);
+        salonHost = r?.members.find((m) => m.kind === 'ai' && m.host)?.ref ?? '';
+        salonBoxes = new Set(r ? r.members.filter((m) => m.kind === 'box').map((m) => m.ref) : []);
+    };
+    let salonSavedTimer;
+    /* ONE CHANGE, SAVED AT ONCE (a room's settings): its POST, then the room as the server keeps it; « ✓ Saved » a
+       moment, as Settings say it; refused, said under the bar and drawn back as it was. */
+    async function salonSave(change) {
+        const r = salonEditing; if (!r) return;
+        const patch = KIT.roomPatch(r, change);
+        if (!patch) { salonTake(r); paintSalonMembers(); return; }
+        $('salon-new-error').hidden = true;
+        try {
+            const now = await post(`${API}/rooms/${r.id}`, patch);
+            if (salonEditing !== r) return;
+            salonEditing = now && Array.isArray(now.members) ? now : r;
+            const said = $('salon-new-status'); said.textContent = `✓ ${uiSaid('set-room-saved', 'Saved')}`;
+            clearTimeout(salonSavedTimer); salonSavedTimer = setTimeout(() => { said.textContent = ''; }, 2500);
+            if ('name' in patch) { $('salon-new-title').textContent = uiSaid('set-room-settings-of', '{name} · Settings', { name: salonEditing.name }); }
+            void loadRooms().then(() => paint());
+            if ('add' in patch || 'remove' in patch) void paintSalonAssets();
+        } catch (error) { if (salonEditing !== r) return; $('salon-new-error').textContent = error.message; $('salon-new-error').hidden = false; }
+        salonTake(salonEditing); paintSalonMembers();
+        if ('name' in change) $('salon-new-name').value = salonEditing.name;
+    }
+    /* Every conversation as a member: the kit's card, its size `member`, its switch at its end; the one that welcomes,
+       its pill « Welcomes » (the only place it is said). */
     function paintSalonMembers() {
-        const hostC = conversations.find((c) => c.name === salonHost);
-        const box = $('salon-new-host'); box.replaceChildren();
-        if (hostC) box.append(KIT.ConvCard({ ...convModel(hostC), now: uiSaid('set-room-host-what', 'answers, or hands the message on') }, { size: 'member', cls: 'salon-host-what' }));
-        else box.append(el('small', 'hint', uiSaid('set-room-host-pick', 'Pick one below: « Welcomes »')));
+        const editing = salonEditing;
         const q = $('salon-new-search').value.trim().toLowerCase();
         const rows = conversations.filter((c) => !q || `${shownName(c)} ${c.chatName ?? ''}`.toLowerCase().includes(q)).sort((a, b) => Number(salonIn.has(b.name)) - Number(salonIn.has(a.name)));
+        const makeHost = (c) => { if (c.name === salonHost || !salonIn.has(c.name)) return; if (editing) { void salonSave({ host: c.name }); return; } salonHost = c.name; paintSalonMembers(); };
         $('salon-new-ais').replaceChildren(...rows.map((c) => {
-            const welcome = el('button', 'salon-welcome-btn', uiSaid('set-room-welcomes', 'Welcomes')); welcome.type = 'button'; welcome.setAttribute('aria-pressed', String(c.name === salonHost)); welcome.setAttribute('aria-label', `${shownName(c)} welcomes the room`);
-            welcome.addEventListener('click', () => { salonIn.add(c.name); salonHost = c.name; paintSalonMembers(); });
-            const sw = KIT.Switch({ on: salonIn.has(c.name), label: `${shownName(c)} in the room`, onChange: (on) => { if (!on) { salonIn.delete(c.name); if (salonHost === c.name) salonHost = [...salonIn][0] ?? ''; } else { salonIn.add(c.name); if (!salonHost) salonHost = c.name; } paintSalonMembers(); } });
-            const row = KIT.ConvCard(convModel(c), { size: 'member', cls: 'salon-member-row', actions: [welcome, sw] });
-            row.setAttribute('role', 'listitem'); row.draggable = true; row.dataset.name = c.name;
+            const isIn = salonIn.has(c.name); const isHost = c.name === salonHost;
+            const actions = [];
+            if (isHost) { const pill = el('span', 'salon-welcome-pill', uiSaid('set-room-welcomes', 'Welcomes')); pill.setAttribute('aria-label', `${shownName(c)} welcomes the room`); actions.push(pill); }
+            actions.push(KIT.Switch({ on: isIn, label: `${shownName(c)} in the room`, onChange: (on) => {
+                if (editing) { void salonSave({ ai: c.name, on }); return; }
+                if (!on) { salonIn.delete(c.name); if (salonHost === c.name) salonHost = [...salonIn][0] ?? ''; } else { salonIn.add(c.name); if (!salonHost) salonHost = c.name; }
+                paintSalonMembers();
+            } }));
+            const row = KIT.ConvCard(convModel(c), { size: 'member', cls: 'salon-member-row', actions });
+            row.setAttribute('role', 'listitem'); row.dataset.name = c.name;
+            if (isHost) row.dataset.host = 'true';
+            /* Another AI of the room: a tap (Enter) on its row, and it welcomes. */
+            if (isIn && !isHost) {
+                row.tabIndex = 0; row.dataset.pick = 'true'; row.title = uiSaid('set-room-host-how', 'Tap another AI of the room to move it');
+                row.addEventListener('click', (e) => { if (!e.target.closest?.('button')) makeHost(c); });
+                row.addEventListener('keydown', (e) => { if (e.key === 'Enter' && e.target === row) { e.preventDefault(); makeHost(c); } });
+            }
             return row;
         }));
-        $('salon-new-count').textContent = `\u00b7 ${uiSaid('set-room-in', '{n} in the room', { n: salonIn.size })}`;
+        const hostC = conversations.find((c) => c.name === salonHost);
+        $('salon-new-count').textContent = [uiSaid('set-room-of', '{n} of {t}', { n: salonIn.size, t: conversations.length }), hostC ? shownName(hostC) : ''].filter(Boolean).join(' · ');
+        $('salon-sum-general').textContent = editing?.name ?? '';
+        const nb = salonBoxes.size;
+        $('salon-sum-voice').textContent = nb ? uiSaid(nb > 1 ? 'set-room-n-boxes' : 'set-room-n-box', nb > 1 ? '{n} boxes' : '1 box', { n: nb }) : uiSaid('set-none', 'None');
         $('salon-new-boxes').replaceChildren(...salonBoxList.map((b) => {
             const row = el('div', 'salon-member-row'); row.setAttribute('role', 'listitem');
             const what = el('span', 'salon-member-what'); what.append(el('b', '', b.name), el('small', '', b.place || uiSaid('set-na-k-box', 'Voice box')));
-            const sw = KIT.Switch({ on: salonBoxes.has(b.id), label: `${b.name} in the room`, onChange: (on) => { if (on) salonBoxes.add(b.id); else salonBoxes.delete(b.id); paintSalonMembers(); } });
+            const sw = KIT.Switch({ on: salonBoxes.has(b.id), label: `${b.name} in the room`, onChange: (on) => {
+                if (editing) { void salonSave({ box: b.id, on }); return; }
+                if (on) salonBoxes.add(b.id); else salonBoxes.delete(b.id); paintSalonMembers();
+            } });
             row.append(what, sw);
             return row;
         }));
     }
     $('salon-new-search').addEventListener('input', paintSalonMembers);
+    /* Its name: saved at Enter, or on leaving the field (a room's settings); Escape gives it back. */
+    $('salon-new-name').addEventListener('keydown', (e) => {
+        if (!salonEditing) return;
+        if (e.key === 'Enter') { e.preventDefault(); $('salon-new-name').blur(); }
+        if (e.key === 'Escape') { e.preventDefault(); $('salon-new-name').value = salonEditing.name; $('salon-new-name').blur(); }
+    });
+    $('salon-new-name').addEventListener('change', () => { if (salonEditing) void salonSave({ name: $('salon-new-name').value }); });
+    /* « + … » on a chapter's title: its gesture, never the chapter folded by it -- opened instead. */
+    for (const id of ['salon-assets-all', 'salon-new-box-add']) $(id).addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); const ch = $(id).closest('details'); if (ch) ch.open = true; }, true);
     /* EACH AI'S ASSETS (06-11), in a room's settings: what each of its AIs has, as its own conversation has it --
        there is no room asset. « + Give… » opens that conversation's own give; « Give to all its AIs… » gives one
        asset at one right to each (POST /rooms/<id>/give): ordinary rights of each conversation, taken back one by one. */
@@ -5551,6 +5697,8 @@
         /* What its own Assets tab lists, row for row (06-11 showed a part: no calendar, contacts, binder or access). */
         const assetsOf = (name) => givenItems(name, { all, secrets: keys, boxes, tether, lists }).map((a) => ({ key: a.key, kind: a.kind, name: a.name, live: a.live, right: a.right }))
             .sort((a, b) => ASSET_KINDS.findIndex((k) => k[0] === a.kind) - ASSET_KINDS.findIndex((k) => k[0] === b.kind));
+        /* Folded, its chapter says how many each has (« Kitchen helper 9 · Homework 1 »). */
+        $('salon-sum-assets').textContent = ais.map((m) => `${shownName(conversations.find((x) => x.name === m.ref)) || m.name} ${assetsOf(m.ref).length}`).join(' \u00b7 ');
         $('salon-assets').replaceChildren(...ais.map((m) => {
             const c = conversations.find((x) => x.name === m.ref);
             const give = el('button', 'salon-give-btn', uiSaid('set-room-give', '+ Give\u2026')); give.type = 'button';
@@ -5597,7 +5745,7 @@
     }
     $('salon-assets-all').addEventListener('click', () => { salonGive = salonGive ? null : { asset: '', level: '', said: [] }; void paintSalonAssets(); });
     /* A ROOM'S "+ Voice box": the New asset box, its kind a voice box, speaking in this room; once it answers, it is
-       among the room's boxes, switched on (kept with Save). */
+       among the room's boxes, switched on (saved at once). */
     function paintSalonBoxNew() {
         const holder = $('salon-box-newasset');
         if (holder.contains($('box-add'))) $('assets-forms').append($('box-add'));
@@ -5614,71 +5762,56 @@
             void getJson('/boxes', null).then((list) => {
                 if (!Array.isArray(list)) return;
                 salonBoxList = list; boxesKnown = list;
-                if (list.some((b) => b.id === boxFlow?.made?.id)) salonBoxes.add(boxFlow.made.id);
-                paintSalonMembers();
+                if (list.some((b) => b.id === boxFlow?.made?.id)) void salonSave({ box: boxFlow.made.id, on: true });
+                else paintSalonMembers();
             });
         } });
         paintSalonBoxNew();
         focusFirst($('salon-box-newasset'));
     });
-    let salonDragged = '';
-    $('salon-new-ais').addEventListener('dragstart', (e) => { salonDragged = e.target.closest?.('.salon-member-row')?.dataset.name ?? ''; });
-    $('salon-new-host').addEventListener('dragover', (e) => { e.preventDefault(); $('salon-new-host').classList.add('over'); });
-    $('salon-new-host').addEventListener('dragleave', () => $('salon-new-host').classList.remove('over'));
-    $('salon-new-host').addEventListener('drop', (e) => { e.preventDefault(); $('salon-new-host').classList.remove('over'); if (salonDragged) { salonIn.add(salonDragged); salonHost = salonDragged; paintSalonMembers(); } });
     async function openSalonNew(push = true, editing = null) {
         if (DEVICE) return;
         salonEditing = editing;
         enterPlace('salon-new', push);
-        $('salon-new-title').textContent = editing ? editing.name : uiSaid('set-room-new', 'New room');
+        /* « <name> · Settings », as a conversation's; a room to be made: « New room ». */
+        $('salon-new-title').textContent = editing ? uiSaid('set-room-settings-of', '{name} · Settings', { name: editing.name }) : uiSaid('set-room-new', 'New room');
         /* Its settings say its state as the room's bar does; a room to be made has none yet. */
         const dot = $('salon-new-state'); if (dot) { dot.hidden = !editing; dot.dataset.state = thinkingOf(editing).length ? 'work' : 'ok'; }
-        $('salon-new-create').textContent = editing ? uiSaid('set-room-save', 'Save') : uiSaid('set-room-create', 'Create');
-        $('salon-new-remove-card').hidden = $('salon-new-advanced-head').hidden = !editing;
-        $('salon-new-remove').hidden = false; $('salon-new-remove-card').querySelector('.confirm')?.remove();
+        /* Saved at once: no button at its end; a new room, « Create » (nothing to save before it is there). */
+        $('salon-new-actions').hidden = Boolean(editing);
+        $('salon-new-status').textContent = ''; clearTimeout(salonSavedTimer);
+        $('salon-new-remove-card').hidden = !editing; salonRemoveAsk?.close(); salonRemoveAsk = null;
         $('salon-new-error').hidden = true; $('salon-new-name').value = editing?.name ?? ''; $('salon-new-search').value = '';
-        salonIn = new Set(editing ? editing.members.filter((m) => m.kind === 'ai').map((m) => m.ref) : []);
-        salonHost = editing?.members.find((m) => m.host)?.ref ?? '';
-        salonBoxes = new Set(editing ? editing.members.filter((m) => m.kind === 'box').map((m) => m.ref) : []);
+        salonTake(editing);
+        /* A new room: its name and its AIs open, the rest as the person left it. */
+        if (!editing) for (const id of ['salon-ch-general', 'salon-ch-ais']) $(id).open = true;
         try { const x = await fetch(`${API}/boxes`); salonBoxList = x.ok ? await x.json() : []; } catch { salonBoxList = []; }
         if (Array.isArray(salonBoxList)) boxesKnown = salonBoxList; else salonBoxList = [];
         /* A room that is there already adds a voice box of its own: "+ Voice box". */
-        $('salon-new-boxes-card').hidden = $('salon-new-voice-head').hidden = salonBoxList.length === 0 && !editing;
+        $('salon-new-boxes-card').hidden = salonBoxList.length === 0 && !editing;
         $('salon-new-box-add').hidden = !editing; closeSalonBoxNew();
         paintSalonMembers();
         salonGive = null; void paintSalonAssets();
-        $('salon-new-name').focus();
+        if (!editing) $('salon-new-name').focus();
     }
     $('salon-settings').addEventListener('click', async () => { await loadRooms(); const r = rooms.find((x) => x.id === salonId); if (r) await openSalonNew(true, r); });
-    $('salon-new-remove').addEventListener('click', () => {
+    /* Remove the room: confirmed in place (what goes, what stays), as every settings page does. */
+    let salonRemoveAsk = null;
+    const salonRemove = $('salon-new-remove');
+    salonRemove.addEventListener('click', () => {
         const r = salonEditing; if (!r) return;
-        const keep = el('button', '', uiSaid('set-room-keep', 'Keep')); keep.type = 'button';
-        const sure = el('button', 'danger', uiSaid('set-room-remove-yes', 'Remove {name}', { name: r.name })); sure.type = 'button';
-        const ask = el('span', 'callout bad confirm'); ask.setAttribute('role', 'alertdialog'); ask.append(keep, sure);
-        keep.addEventListener('click', () => { ask.remove(); $('salon-new-remove').hidden = false; });
-        sure.addEventListener('click', async () => { try { await post(`${API}/rooms/${r.id}/remove`, {}); salonEditing = null; await loadRooms(); paint(); openDeck(false); } catch (error) { $('salon-new-error').textContent = error.message; $('salon-new-error').hidden = false; } });
-        $('salon-new-remove').hidden = true; $('salon-new-remove').after(ask); sure.focus();
+        salonRemoveAsk = KIT.InlineConfirm(salonRemove, { question: uiSaid('set-room-remove-what', 'The thread goes · AIs and boxes stay'), yes: uiSaid('set-room-remove-yes', 'Remove {name}', { name: r.name }), keep: uiSaid('set-room-keep', 'Keep'),
+            onYes: async () => { try { await post(`${API}/rooms/${r.id}/remove`, {}); salonEditing = null; await loadRooms(); paint(); openDeck(false); } catch (error) { $('salon-new-error').textContent = error.message; $('salon-new-error').hidden = false; } } });
     });
     /* Back from a room's settings: to the room; from a new one: where it was opened from. */
     const salonNewBack = () => { const r = salonEditing; salonEditing = null; if (r) void openSalon(r.id, false); else leavePlace(); };
     $('salon-new-close').addEventListener('click', salonNewBack);
-    $('salon-new-cancel').addEventListener('click', salonNewBack);
+    /* A NEW ROOM: made at « Create », with what was chosen above (its settings, once made, save at once). */
     $('salon-new-create').addEventListener('click', async () => {
+        if (salonEditing) return;
         const picked = [salonHost, ...[...salonIn].filter((c) => c !== salonHost)].filter(Boolean);
-        const boxes = [...salonBoxes];
         try {
-            /* Set up again: what is switched on now -- members added, those switched off taken out, the one that welcomes. */
-            if (salonEditing) {
-                const r = salonEditing;
-                const ais = r.members.filter((m) => m.kind === 'ai'); const had = r.members.filter((m) => m.kind === 'box');
-                const add = { conversations: picked.filter((c) => !ais.some((m) => m.ref === c)), boxes: boxes.filter((b) => !had.some((m) => m.ref === b)) };
-                const remove = [...ais.filter((m) => !salonIn.has(m.ref)), ...had.filter((m) => !salonBoxes.has(m.ref))].map((m) => m.id);
-                let now = await post(`${API}/rooms/${r.id}`, { name: $('salon-new-name').value, add, remove });
-                const host = now.members.find((m) => m.kind === 'ai' && m.ref === salonHost);
-                if (host && !host.host) now = await post(`${API}/rooms/${r.id}`, { host: host.id });
-                salonEditing = null; await openSalon(r.id, false); return;
-            }
-            const made = await post(`${API}/rooms`, { name: $('salon-new-name').value, conversations: picked, boxes, host: salonHost });
+            const made = await post(`${API}/rooms`, { name: $('salon-new-name').value, conversations: picked, boxes: [...salonBoxes], host: salonHost });
             await openSalon(made.id, false);
         } catch (error) { $('salon-new-error').textContent = error.message; $('salon-new-error').hidden = false; }
     });

package/web/index.html

@@ -715,44 +715,49 @@
         <div id="salon-thread" class="salon-thread"></div>
         <p id="salon-thinking" class="salon-thinking" hidden></p>
       </div>
+      <!-- A ROOM'S SETTINGS (07-11, charte-reglages): the chapters of every settings page, folding; a row = its name and
+           a short line on the left, one control on the right; each change saved at once (a new room: « Create » at the end). -->
       <div id="salon-new" class="sheet as-place" hidden>
-        <div class="panel-top"><b id="salon-new-title">New room</b><button type="button" id="salon-new-close" class="as-link place-back">&lsaquo; Back</button></div>
+        <div class="panel-top"><b id="salon-new-title">New room</b><span class="hint salon-saved" id="salon-new-status" role="status"></span><button type="button" id="salon-new-close" class="as-link place-back">&lsaquo; Back</button></div>
         <div class="nc-body">
-          <!-- The same names as every settings page (General, Access, Chat & voice, Advanced): a room has no machine. -->
-          <h3 class="room-group" data-said="set-tab-general">General</h3>
-          <div class="nc-card">
-            <div class="set-row"><div class="set-what"><label for="salon-new-name" data-said="set-room-name">Name</label></div><div class="set-control"><input id="salon-new-name" maxlength="60" placeholder="Home" spellcheck="false" autocomplete="off"></div></div>
-          </div>
-          <h3 class="room-group" data-said="set-tab-access">Access</h3>
-          <div class="nc-card">
-            <span class="sub-head" data-said="set-room-host">Welcomes the room</span>
-            <div id="salon-new-host" class="salon-host-box" aria-live="polite"></div>
-          </div>
-          <div class="nc-card">
-            <span class="sub-head"><span data-said="set-room-ais">Its AIs</span> <span id="salon-new-count" class="hint"></span></span>
-            <small class="tip" hidden>The switch puts it in the room or takes it out; « Welcomes » makes it the one that answers first. On a computer, a row can also be dragged into the box above.</small>
-            <div class="salon-members-tools"><input id="salon-new-search" type="search" placeholder="Find a conversation" data-said-placeholder="set-room-find" aria-label="Find a conversation" autocomplete="off"></div>
-            <div id="salon-new-ais" class="salon-member-list" role="list" aria-label="AIs"></div>
-          </div>
-          <!-- Each AI's assets (06-11): its own, as its conversation has them; no room asset. -->
-          <div class="nc-card" id="salon-assets-card" hidden>
-            <div class="row"><span class="sub-head" data-said="set-room-assets">Their assets</span><span class="sp"></span><button type="button" id="salon-assets-all" data-said="set-room-give-all">Give to all its AIs…</button></div>
-            <div id="salon-assets-give" class="salon-give" hidden></div>
-            <div id="salon-assets" class="salon-member-list salon-assets-list" role="list" aria-label="Their assets"></div>
-          </div>
-          <h3 class="room-group" id="salon-new-voice-head" data-said="set-tab-chat">Chat &amp; voice</h3>
-          <div class="nc-card" id="salon-new-boxes-card">
-            <div class="row"><span class="sub-head" data-said="set-room-boxes">Voice boxes</span><span class="sp"></span><button type="button" id="salon-new-box-add" data-said="set-na-plus-box">+ Voice box</button></div>
-            <div id="salon-box-newasset" hidden></div>
-            <div id="salon-new-boxes" class="salon-member-list" role="list" aria-label="Voice boxes"></div>
-          </div>
-          <h3 class="room-group" id="salon-new-advanced-head" data-said="set-tab-advanced" hidden>Advanced</h3>
-          <div class="nc-card" id="salon-new-remove-card" hidden>
-            <div class="set-row"><div class="set-what"><label data-said="set-room-remove">Remove the room</label><small data-said="set-room-remove-what">The thread goes · AIs and boxes stay</small></div><div class="set-control"><button type="button" id="salon-new-remove" class="danger" data-said="set-room-remove-dots">Remove…</button></div></div>
-          </div>
           <span id="salon-new-error" class="err" role="alert" hidden></span>
+          <details class="chapter" id="salon-ch-general" data-chapter="room-general">
+            <summary><span class="chapter-title" data-said="set-tab-general">General</span><span class="chapter-about" id="salon-sum-general"></span></summary>
+            <div class="chapter-body">
+              <div class="set-row"><div class="set-what"><label for="salon-new-name" data-said="set-room-name">Name</label></div><div class="set-control"><input id="salon-new-name" maxlength="60" placeholder="Home" spellcheck="false" autocomplete="off" enterkeyhint="done"></div></div>
+            </div>
+          </details>
+          <details class="chapter" id="salon-ch-ais" data-chapter="room-ais">
+            <summary><span class="chapter-title" data-said="set-room-ais">Its AIs</span><span class="chapter-about" id="salon-new-count"></span></summary>
+            <div class="chapter-body">
+              <div class="set-row salon-members-tools"><div class="set-what"><small data-said="set-room-host-how">Tap another AI of the room to move it</small></div><div class="set-control"><input id="salon-new-search" type="search" placeholder="Find a conversation" data-said-placeholder="set-room-find" aria-label="Find a conversation" autocomplete="off"></div></div>
+              <div id="salon-new-ais" class="salon-member-list" role="list" aria-label="AIs"></div>
+            </div>
+          </details>
+          <!-- Each AI's assets (06-11): its own, as its conversation has them; no room asset. -->
+          <details class="chapter" id="salon-assets-card" data-chapter="room-assets" hidden>
+            <summary><span class="chapter-title" data-said="set-room-assets">Their assets</span><span class="chapter-about" id="salon-sum-assets"></span><button type="button" id="salon-assets-all" class="chapter-add" data-said="set-room-give-all">Give to all its AIs…</button></summary>
+            <div class="chapter-body">
+              <div id="salon-assets-give" class="salon-give" hidden></div>
+              <div id="salon-assets" class="salon-member-list salon-assets-list" role="list" aria-label="Their assets"></div>
+            </div>
+          </details>
+          <details class="chapter" id="salon-new-boxes-card" data-chapter="room-voice">
+            <summary><span class="chapter-title" data-said="set-tab-chat">Chat &amp; voice</span><span class="chapter-about" id="salon-sum-voice"></span><button type="button" id="salon-new-box-add" class="chapter-add" data-said="set-na-plus-box">+ Voice box</button></summary>
+            <div class="chapter-body">
+              <div id="salon-box-newasset" hidden></div>
+              <div id="salon-new-boxes" class="salon-member-list" role="list" aria-label="Voice boxes"></div>
+            </div>
+          </details>
+          <details class="chapter" id="salon-new-remove-card" data-chapter="room-advanced" hidden>
+            <summary><span class="chapter-title" data-said="set-tab-advanced">Advanced</span><span class="chapter-about"></span></summary>
+            <div class="chapter-body">
+              <div class="set-row"><div class="set-what"><span data-said="set-room-remove">Remove the room</span><small data-said="set-room-remove-what">The thread goes · AIs and boxes stay</small></div><div class="set-control"><button type="button" id="salon-new-remove" class="danger" data-said="set-room-remove-dots">Remove…</button></div></div>
+            </div>
+          </details>
         </div>
-        <div class="action-row"><span class="hint" id="salon-new-status"></span><button type="button" id="salon-new-cancel" data-said="set-room-cancel">Cancel</button><button type="button" id="salon-new-create" class="primary">Create</button></div>
+        <!-- A new room only: nothing is saved before it exists. -->
+        <div class="action-row" id="salon-new-actions"><button type="button" id="salon-new-create" class="primary" data-said="set-room-create">Create</button></div>
       </div>
       <div id="assets" class="sheet as-place" hidden>
         <div class="panel-top"><b>Assets</b></div>

package/web/kit.js

@@ -7,6 +7,8 @@
  *   Switch         yes / no (role=switch, aria-checked)
  *   Segmented      one of a few (pressed buttons, aria-pressed)
  *   InlineConfirm  confirm in place of the button: Keep, then the action
+ *   MemberStack    who is in a room: up to 3 small stacked avatars, "+n" (its bar's right); roomPatch, one
+ *                  change of a room's settings as it is saved at once
  *   ConvCard       ONE CONVERSATION, three sizes: `row` (the list, Recent), `card` (the home deck),
  *                  `member` (a room's members, and the one that welcomes it). Same dot, name, line
  *                  of what it does now, chips; each place adds its own gestures (`actions`).
@@ -106,6 +108,25 @@
         return g;
     }
 
+    /* IDLE (07-11, the tidy-up): nothing for 12 h or more. Never one that waits for you, never one asleep.
+       `idleFor` is how long (0: not idle); `idleWords` says it: « rien depuis 14 h », « … 2 j », « … 3 sem. ». */
+    const IDLE_MS = 12 * 3600_000;
+    const idleFor = (at, { now = Date.now(), waits = false, asleep = false } = {}) => {
+        const t = typeof at === 'number' ? at : Date.parse(at ?? '');
+        if (waits || asleep || !Number.isFinite(t) || t <= 0) return 0;
+        return now - t >= IDLE_MS ? now - t : 0;
+    };
+    const idleWords = (ms) => {
+        const h = Math.floor(ms / 3600_000); const d = Math.floor(h / 24);
+        const [key, en, n] = h < 48 ? ['set-idle-h', 'idle for {n} h', h] : d < 14 ? ['set-idle-d', 'idle for {n} d', d] : d < 60 ? ['set-idle-w', 'idle for {n} wk', Math.floor(d / 7)] : ['set-idle-mo', 'idle for {n} mo', Math.floor(d / 30)];
+        return say(key, en).replace('{n}', String(n));
+    };
+    /* WHAT A TIDY-UP OFFERS: of `items` ({ at, waits, asleep, hidden, ... }), those idle 12 h or more, the
+       longest idle first, each with its `idle` (ms). Hidden ones are left alone. */
+    const tidyList = (items, now = Date.now()) => items.filter((x) => x && !x.hidden)
+        .map((x) => ({ ...x, idle: idleFor(x.at, { now, waits: x.waits, asleep: x.asleep }) }))
+        .filter((x) => x.idle > 0).sort((a, b) => b.idle - a.idle);
+
     /* Confirm in place of `button`: the question, Keep (focused), then the action. Escape keeps.
        Returns { close }. `onYes()` may be async; the action stays pressed till it is done. */
     function InlineConfirm(button, { question = '', yes = 'Remove', keep, danger = true, onYes = () => {} } = {}) {
@@ -152,7 +173,7 @@
         const lines = [];
         if (size === 'row') {
             const marks = Chips((m.chips ?? []).filter((c) => c && !c.wide && c.tone !== 'count'));
-            const sub = [m.last ? node('small', 'last', m.last) : null, m.now ? node('small', 'kit-conv-now', m.now) : null].filter(Boolean);
+            const sub = [m.last ? node('small', 'last', m.last) : null, m.now ? node('small', `kit-conv-now${m.idle ? ' kit-conv-idle' : ''}`, m.now) : null].filter(Boolean);
             if (marks && sub.length) { const line = node('span', 'kit-conv-sub'); line.append(sub[0], marks); lines.push(line, ...sub.slice(1)); }
             else if (marks) lines.push(marks);
             else lines.push(...sub);
@@ -534,6 +555,57 @@
         return box;
     }
 
+    /* WHO IS IN A ROOM, AT A GLANCE (07-11): its members as up to `max` small stacked avatars, on its bar's right --
+       the one that welcomes first, then its other AIs, its people, its boxes. More than `max`: `max - 1` of them and
+       "+n" (never more than `max` circles). `members` as the server lists them [{ name, kind, host? }]. */
+    const STACK_ORDER = { ai: 1, person: 2, box: 3 };
+    function memberStackModel(members = [], { max = 3 } = {}) {
+        const all = (members ?? []).filter((m) => m && m.name).map((m, i) => ({ m, i }))
+            .sort((a, b) => (Number(Boolean(b.m.host)) - Number(Boolean(a.m.host))) || ((STACK_ORDER[a.m.kind] ?? 4) - (STACK_ORDER[b.m.kind] ?? 4)) || a.i - b.i)
+            .map((x) => x.m);
+        const most = Math.max(1, Math.floor(max) || 1);
+        const shown = all.length > most ? all.slice(0, most - 1) : all;
+        return { shown: shown.map((m) => ({ name: m.name, kind: m.kind ?? 'ai', ...(m.host ? { host: true } : {}) })), more: all.length - shown.length, names: all.map((m) => m.name) };
+    }
+    /* The stack, drawn in `button` (the page's own, its id and listeners kept) or a new one; `onOpen` on a click.
+       `label`: what a click opens (« Members »), said with the names. */
+    function MemberStack(members = [], { max = 3, label = '', button = null, onOpen = null } = {}) {
+        const model = memberStackModel(members, { max });
+        const b = button ?? node('button'); b.type = 'button';
+        addClass(b, 'kit-stack');
+        b.replaceChildren(...model.shown.map((m) => {
+            const a = Avatar({ name: m.name, glyph: m.kind === 'box' ? node('span', 'kit-stack-box') : null });
+            a.dataset.kind = m.kind;
+            return a;
+        }));
+        if (model.more) { const more = node('span', 'kit-av kit-stack-more', `+${model.more}`); more.setAttribute('aria-hidden', 'true'); b.append(more); }
+        const names = model.names.join(', ');
+        b.title = names; b.setAttribute('aria-label', label ? `${label}: ${names}` : names);
+        if (onOpen) b.addEventListener('click', () => onOpen());
+        return b;
+    }
+
+    /* ONE CHANGE OF A ROOM, SAVED AT ONCE (07-11: its settings as every settings page, no Save): what POST
+       /rooms/<id> is given for it, or null when it changes nothing. `room` as the server lists it; `change` one of
+         { name }            its new name (trimmed; empty: nothing -- the field shows the name again)
+         { ai, on }          a conversation (its name) put in the room or taken out
+         { box, on }         a voice box (its id) put in or taken out
+         { host }            a conversation of the room (its name) that welcomes it from now on */
+    function roomPatch(room, change = {}) {
+        const members = room?.members ?? [];
+        const of = (kind, ref) => members.find((m) => m.kind === kind && m.ref === ref);
+        if ('name' in change) { const name = String(change.name ?? '').trim(); return name && name !== room?.name ? { name } : null; }
+        for (const kind of ['ai', 'box']) {
+            if (!(kind in change)) continue;
+            const ref = String(change[kind] ?? ''); if (!ref) return null;
+            const m = of(kind, ref);
+            if (change.on) return m ? null : { add: kind === 'ai' ? { conversations: [ref] } : { boxes: [ref] } };
+            return m ? { remove: [m.id] } : null;
+        }
+        if ('host' in change) { const m = of('ai', String(change.host ?? '')); return m && !m.host ? { host: m.id } : null; }
+        return null;
+    }
+
     /* ONE ASSET. `a`, what the page knows of it, said once:
          key, kind   'folder:reports', its kind (ASSET_ICONS)   name    its name
          live        a live link (a connexion): its rights are a connexion's
@@ -803,10 +875,10 @@
 
     window.clavariumKit = {
         collectModel,
-        AssetIcon, AssetCard, Holders, RightsBadge, RightsPicker, AssetList, assetListModel, AccessList, accessModel, AssetPanel, AssetDelete, RIGHT_SAME,
+        AssetIcon, AssetCard, Holders, MemberStack, memberStackModel, roomPatch, RightsBadge, RightsPicker, AssetList, assetListModel, AccessList, accessModel, AssetPanel, AssetDelete, RIGHT_SAME,
         ASSET_ICONS, ASSET_KINDS, RIGHTS, RIGHT_LEVELS, rightsKey, rightsFor, rightOf, storedOf, lightest, rightWord,
         shareSlices, ShareDonut, ShareKey,
-        STATES, STATE_WORDS, stateOf, hueOf, initialOf,
+        STATES, STATE_WORDS, stateOf, hueOf, initialOf, IDLE_MS, idleFor, idleWords, tidyList,
         setWords(fn) { if (typeof fn === 'function') words = fn; },
         StatusDot, Avatar, Chips, Switch, Segmented, InlineConfirm, ConvCard, StepFlow, SecretPicker, NewAsset, TopBar,
     };

package/web/style.css

@@ -2009,12 +2009,13 @@ span.callout.confirm { display: inline-flex; justify-content: flex-end; padding:
 :is(#newconv, #salon-new) .set-row > .set-control > :is(input, select) { width: 18rem; }
 #newconv .set-what > .err { font-size: .75rem; color: var(--danger); }
 /* A card of rows, as an open chapter without its fold. */
-.nc-card, #newconv details.chapter { flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bar); }
-.nc-card > *, #newconv details.chapter > .chapter-body > * { margin: 0; padding: 12px 16px; }
-.nc-card > * + *, #newconv details.chapter > .chapter-body > * + * { border-top: 1px solid var(--line); }
+/* A room's settings (07-11): the chapters of a new conversation's, of Settings. */
+.nc-card, :is(#newconv, #salon-new) details.chapter { flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bar); }
+.nc-card > *, :is(#newconv, #salon-new) details.chapter > .chapter-body > * { margin: 0; padding: 12px 16px; }
+.nc-card > * + *, :is(#newconv, #salon-new) details.chapter > .chapter-body > :where(:not([hidden])) ~ :where(:not([hidden])) { border-top: 1px solid var(--line); }
 .nc-card > .sub-head { display: block; padding-bottom: 0; }
 .nc-card > .sub-head + * { border-top: 0; }
-#newconv details.chapter > .chapter-body { gap: 0; padding: 0; background: var(--bar); border-radius: 0 0 10px 10px; }
+:is(#newconv, #salon-new) details.chapter > .chapter-body { gap: 0; padding: 0; background: var(--bar); border-radius: 0 0 10px 10px; }
 /* A choice of a few, each a card: its name and one short line. */
 .pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
 .pick.two { grid-template-columns: 1fr 1fr; }
@@ -2342,7 +2343,6 @@ body.as-dragging #assets-rows .as-row { touch-action: none; }
 .salon-chip-box::before { content: ""; width: 9px; height: 9px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E") center / contain no-repeat; }
 #salon { display: flex; flex-direction: column; min-height: 0; }
 #salon[hidden] { display: none; }
-.salon-who { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 14px; min-height: 44px; }
 .salon-members { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 10px; border-bottom: 1px solid var(--line); }
 .salon-members-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
 .salon-members-row > .hint { width: 4.5rem; }
@@ -2353,8 +2353,6 @@ body.as-dragging #assets-rows .as-row { touch-action: none; }
 .salon-thinking { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 14px 8px; font-size: .75rem; color: var(--ink2); order: 2; }
 #salon-new { display: flex; flex-direction: column; }
 #salon-new[hidden] { display: none; }
-#salon-new .nc-card > .hint { display: block; padding-top: 0; border-top: 0; }
-#salon-new .pick .salon-welcome { color: var(--brass-ink); }
 
 /* THE PLACES OF THE WHOLE (03-11): settings, access, assets, the deck, rooms, a new conversation are not a
    conversation's -- in a part of the page of their own, over the conversation (which stays as it was, its
@@ -2363,34 +2361,39 @@ body.as-dragging #assets-rows .as-row { touch-action: none; }
 #places[hidden] { display: none; }
 @media (max-width: 700px) { #places { grid-column: 1; grid-row: 1; } }
 #app:has(> #list[hidden]) #places { grid-column: 1 / -1; }
-.salon-bar { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 0; }
-.salon-bar .salon-who { flex: 1; }
-#salon-new-remove-card .confirm { display: inline-flex; gap: 6px; flex-wrap: wrap; }
 
 /* A ROOM'S MEMBERS (03-11): the one that welcomes in a box of its own; every conversation on a row, its switch. */
-.salon-host-box { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--brass); border-radius: 10px; background: color-mix(in srgb, var(--brass) 10%, var(--panel)); transition: background .15s; }
-.salon-host-box.over { background: color-mix(in srgb, var(--brass) 22%, var(--panel)); }
 .salon-member-what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .salon-member-what b { font-weight: 600; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .salon-member-what small { color: var(--ink2); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.salon-members-tools input { width: 100%; }
+/* In a chapter, its rows are the chapter's (07-11): no box in a box. */
+#salon-new .chapter-body > .salon-member-list { border: 0; border-radius: 0; background: transparent; max-height: none; }
+#salon-new .chapter-body .salon-member-row { padding: 8px 16px; }
+#salon-new .chapter-body > .salon-members-tools { padding-top: 10px; padding-bottom: 10px; }
+details.chapter > summary > .chapter-add { flex: none; align-self: center; min-height: 32px; padding: 4px 12px; font-size: .8125rem; }
+details.chapter > summary > .chapter-add[hidden] { display: none; }
+@media (max-width: 560px) {
+  details.chapter > summary > .chapter-add { padding: 4px 8px; font-size: .75rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
+  details.chapter > summary:has(> .chapter-add:not([hidden])) > .chapter-about { display: none; }
+}
+.salon-saved { flex: none; font-size: .8125rem; color: var(--ok, var(--ink2)); white-space: nowrap; }
+.salon-saved:empty { display: none; }
+#salon-new-actions[hidden] { display: none; }
 .salon-member-list { display: flex; flex-direction: column; max-height: 22rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 0 !important; }
 .salon-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 48px; border-top: 1px solid var(--line); }
 .salon-member-row:first-child { border-top: 0; }
 .salon-member-row[draggable="true"] { cursor: grab; }
-button.salon-welcome-btn { border-radius: 999px; padding: 4px 10px; font-size: .75rem; min-height: 32px; background: transparent; color: var(--ink2); }
-button.salon-welcome-btn[aria-pressed="true"] { color: var(--brass-ink); border-color: var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); }
-.nc-card > .salon-host-box, .nc-card > .salon-member-list { margin: 4px 16px 12px; }
-.nc-card > .salon-host-box { padding: 8px 12px; }
-.nc-card > .salon-members-tools { padding-bottom: 4px; }
-.nc-card > .salon-host-box + *, .nc-card > .salon-member-list + * { border-top: 0; }
+.salon-welcome-pill { flex: none; border: 1px solid var(--brass); border-radius: 999px; padding: 3px 10px; font-size: .75rem; font-weight: 600; color: var(--brass-ink); background: color-mix(in srgb, var(--brass) 14%, transparent); white-space: nowrap; }
+.salon-member-row[data-pick="true"] { cursor: pointer; }
+.salon-member-row[data-pick="true"]:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
+.salon-member-row[data-pick="true"]:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
 /* Each AI's assets in a room's settings (06-11): its member card, its assets as chips below; give to all its AIs. */
 .salon-assets-list { max-height: none; }
 .salon-asset-ai { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-top: 1px solid var(--line); }
 .salon-asset-ai:first-child { border-top: 0; }
 .salon-asset-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
 button.salon-give-btn { border-radius: 999px; padding: 4px 10px; font-size: .75rem; min-height: 32px; background: transparent; color: var(--ink2); white-space: nowrap; }
-.nc-card > .salon-give { margin: 4px 16px 12px; padding: 10px 12px; border: 1px solid var(--brass); border-radius: 10px; background: color-mix(in srgb, var(--brass) 6%, var(--panel)); display: flex; flex-direction: column; gap: 8px; }
+#salon-new .chapter-body > .salon-give { margin: 4px 16px 12px; padding: 10px 12px; border: 1px solid var(--brass); border-radius: 10px; background: color-mix(in srgb, var(--brass) 6%, var(--panel)); display: flex; flex-direction: column; gap: 8px; }
 .salon-give-assets { display: flex; flex-wrap: wrap; gap: 6px; max-height: 12rem; overflow-y: auto; }
 .salon-give-said { display: flex; flex-direction: column; gap: 2px; }
 .salon-give .action-row { padding: 0; border: 0; }
@@ -2431,14 +2434,19 @@ html[data-door="device"] header.topbar { height: auto; }
 .sheet.as-place > header.topbar { margin: 0; }
 :is(#newconv, #salon-new) > header.topbar { margin: 0 -20px 4px; }
 @media (max-width: 700px) { #newconv > header.topbar { margin: 0 -16px 4px; } }
-/* A room: its name, who speaks now and who is in it on the line under it (a button that opens the list). */
+/* A room: its name, who speaks now on the line under it (only then); who is in it on the right, before its gear
+   (07-11): up to 3 small stacked avatars, a button that opens the list under the bar. */
+header.topbar .kit-stack { display: inline-flex; align-items: center; flex: none; min-height: 34px; padding: 0 4px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
+header.topbar .kit-stack:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
+header.topbar .kit-stack:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
+.kit-stack > .kit-av { --kc-av: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bar); }
+.kit-stack > .kit-av + .kit-av { margin-left: -7px; }
+.kit-stack > .kit-av[data-kind="box"] { background: var(--panel); color: var(--ink2); box-shadow: 0 0 0 2px var(--bar), inset 0 0 0 1px var(--line); }
+.kit-stack-box { width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3C/svg%3E") center / contain no-repeat; }
+.kit-stack > .kit-stack-more { background: var(--panel); color: var(--ink2); box-shadow: 0 0 0 2px var(--bar), inset 0 0 0 1px var(--line); font-size: .6875rem; }
 #salon-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .salon-live { font-size: .75rem; font-weight: 400; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .salon-live[hidden] { display: none; }
-header.topbar .topbar-sub .salon-who { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--ink2); font: inherit; cursor: pointer; }
-header.topbar .topbar-sub .salon-who:hover { color: var(--ink); }
-header.topbar .topbar-sub .salon-chip { width: 15px; height: 15px; margin-left: -4px; border-width: 1px; font-size: .5625rem; }
-header.topbar .topbar-sub .salon-chip:first-child { margin-left: 0; }
 /* A room's row in the list (03-11): a conversation's row, with a small sign of a room before its name (Lucide « users »). */
 .room-sign { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: var(--ink2);
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat;
@@ -2698,9 +2706,6 @@ header.topbar .topbar-sub .salon-chip:first-child { margin-left: 0; }
 /* The search atop a settings page (05-11). */
 :is(header.topbar, .panel-top) .settings-search { margin-left: auto; width: min(240px, 42vw); min-height: 32px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: .875rem; }
 .set-row.search-out { display: none; }
-/* A room's settings: the same group names as every settings page (05-11). */
-#salon-new .room-group { margin: 6px 4px -6px; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
-#salon-new .room-group[hidden] { display: none; }
 
 /* ======================================================================================================
    KIT (05-11, web/kit.js): the pieces every screen shares, one style each. A screen places them; it
@@ -2784,7 +2789,6 @@ button.kit-switch[aria-checked="true"]::after { left: 18px; background: var(--ok
 .kit-conv-member { --kc-ring: var(--panel); align-items: center; padding: 8px 12px; }
 .kit-conv-member .kit-conv-head > b { font-size: .8125rem; }
 .kit-conv-member .kit-conv-main > small { font-size: .75rem; }
-.salon-host-box > .kit-conv-member { flex: 1; padding: 0; --kc-ring: color-mix(in srgb, var(--brass) 10%, var(--panel)); }
 @media (max-width: 520px) { .kit-conv-card { --kc-av: 30px; column-gap: 8px; padding: 10px; } }
 
 /* THE ROW, compact (05-11, designers' review): a smaller initial, a bigger ringed point, the marks as small
@@ -2897,3 +2901,22 @@ button.kit-switch[aria-checked="true"]::after { left: 18px; background: var(--ok
 .kit-rights-pick > button > .kit-rights-same { display: block; font-size: .6875rem; font-weight: 500; opacity: .8; }
 .kit-asdelete { display: inline; }
 .as-files-menu #files.embedded > .panel-top { display: none; }
+/* IDLE 12 H OR MORE (07-11): « rien depuis 14 h », in grey, never bold. */
+.item small.kit-conv-idle { color: var(--ink2); opacity: .8; }
+/* FAIRE LE MÉNAGE (07-11): a clear button at the bottom of the list, only when something is idle. */
+.tidy-open { display: block; width: calc(100% - 1.5rem); margin: .75rem .75rem .25rem; padding: .55rem .75rem; background: transparent; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink2); font-size: .8125rem; font-weight: 600; text-align: center; }
+.tidy-open:hover { color: var(--ink); border-color: var(--ink2); }
+/* « Mettre en veille ? »: the app's pop-up (a sheet from the bottom on a phone, centred on a wider screen). */
+.tidy-list { display: flex; flex-direction: column; gap: 2px; max-height: 50dvh; overflow-y: auto; }
+.tidy-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
+.tidy-row:hover { background: var(--bar); }
+.tidy-row input { width: 18px; height: 18px; accent-color: var(--brass); flex: none; }
+.tidy-name { color: var(--ink2); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tidy-name b { color: var(--ink); font-weight: 600; }
+.tidy-go { min-height: 44px; }
+.tidy-said { color: var(--danger); }
+@media (min-width: 700px) {
+  .tidy-wrap { align-items: center; justify-content: center; }
+  .tidy-wrap .lk-sheet { width: min(440px, 92vw); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
+  .tidy-wrap .lk-sheet::before { display: none; }
+}