clavarium 0.1.0-next.4 → 0.1.0-next.6

package/deploy/install.sh

@@ -661,6 +661,12 @@ if [ -n "$RELAY" ]; then
     echo
     echo "ON THE RELAY ($RELAY), run this one command; the tunnel then comes up by itself:"
     echo "    sudo deploy/relay.sh --key \"$TUNNEL_KEY\""
+    # A server with a screen and a keyboard only: the key, carried by a phone.
+    # It is a PUBLIC key: showing it is safe; it lets the relay know this machine.
+    if command -v qrencode >/dev/null 2>&1 || apt-get install -y -qq qrencode >/dev/null 2>&1; then
+        echo "The same key, to read with a phone or a tablet:"
+        qrencode -t ANSIUTF8 -m 2 -- "$TUNNEL_KEY" || true
+    fi
     echo "It will print this, and it must be the same:    $RELAY_PRINT"
     echo "The name $DOMAIN must lead to the relay."
 else

package/deploy/updater.mjs

@@ -366,7 +366,9 @@ export class Updater {
     async apply(version) {
         if (!VERSION.test(version ?? '')) throw new Refused(`not a version: ${version}`);
         const from = this.current();
-        if (from && compareVersions(version, from.version) <= 0) throw new Refused(`${version} is not newer than ${from.version}`);
+        /* Asked for the version that runs (a request that waited while it came by itself): done already. */
+        if (from && compareVersions(version, from.version) === 0) return;
+        if (from && compareVersions(version, from.version) < 0) throw new Refused(`${version} is not newer than ${from.version}`);
         const why = this.busy(); if (why) throw new Refused(why);
         const unlock = this.#lock();
         try {
@@ -480,7 +482,9 @@ export class Updater {
         if ((state.history ?? []).some((h) => h.to === available && h.action === 'update' && h.result !== 'done')) return `${available} failed here before: not tried again by itself`;
         if (this.busy()) return this.busy();
         await this.apply(available);
-        return `updated to ${available}`;
+        /* What the history says, not what was hoped: a version that did not start was undone. */
+        const last = (this.#state().history ?? []).at(-1);
+        return last?.to === available && last.result !== 'done' ? `${available} did not work: back to ${last.from ?? 'nothing'} (${last.why ?? last.result})` : `updated to ${available}`;
     }
 
     /* What the host program asked (a request file), or the timer's turn. */
@@ -513,7 +517,7 @@ export class Updater {
                 let cwd = ''; try { cwd = realpathSync(`/proc/${pid}/cwd`); } catch { /* gone */ }
                 if (cwd.startsWith(target)) break;
                 said = 'the server that answers is not this release';
-            } else if (active.code !== 0) said = 'the service is not running';
+            } else if (active.code !== 0) said = 'its service stopped';
             if (Date.now() > end) return said;
             await new Promise((r) => setTimeout(r, 1000));
         }

package/npm-shrinkwrap.json

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

package/package.json

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

package/server/api.mjs

@@ -268,7 +268,7 @@ export async function handleApi(request, response, conversations, headers, resou
         if (pathname === '/api/updates/settings' && updates) return send(200, await updates.settings({ mode: body.mode, channel: body.channel, window: body.window })), true;
         if (pathname === '/api/updates/apply' && updates) return send(202, await updates.apply(body.version)), true;
         if (pathname === '/api/updates/back' && updates) return send(202, await updates.back(body.version)), true;
-        if (pathname === '/api/server/reserve' && capacity) { capacity.setReserve({ diskMb: body.diskMb, memoryMb: body.memoryMb }); return send(200, await capacity.about()), true; }
+        if (pathname === '/api/server/reserve' && capacity) { capacity.setReserve({ diskMb: body.diskMb, diskPercent: body.diskPercent, memoryMb: body.memoryMb, memoryPercent: body.memoryPercent }); return send(200, await capacity.about()), true; }
         if (pathname === '/api/git-hosts/forget' && gitAccess) return send(200, gitAccess.forgetHost(body.host)), true;
         const unkeyed = /^\/api\/git-keys\/([a-z0-9-]{1,32})\/remove$/.exec(pathname);
         if (unkeyed && gitAccess) { gitAccess.removeKey(unkeyed[1]); return send(200, { ok: true }), true; }

package/server/capacity.mjs

@@ -14,22 +14,35 @@
  *           disks, the machines' disks, the images). Slow (it measures
  *           folders): asked again after USAGE_MS at most, in the background.
  *
- * THE RESERVE (Settings, This server): creating, starting, waking or growing
- * a machine is refused, with a sentence that says why and what to do, when
- * it would leave less than the reserve. Memory: the machine's size (or what
- * it grows by) against the memory free -- less what the running machines
- * were given and have not taken yet, since they will. Disk: what a new
- * machine takes, or what a disk grows by, against the disk free where the
- * machines' disks are. Starting or waking is never refused for disk: a full
- * disk is cleaned from inside the conversations.
+ * THE RESERVE (Settings, This server, Resources): for each of disk and
+ * memory, the larger of a fixed amount and a share of the whole (by default
+ * disk 5 GB or 5 %, memory 1 GB or 5 %). It is judged on what the system
+ * says is free (df on the machines' disk, MemAvailable), never on sums of
+ * what machines were given:
+ *   - creating, starting, waking or growing a machine is refused, with a
+ *     sentence that says why and what to do, when what is free less what the
+ *     machine needs at first would be under the reserve. Memory: its size
+ *     (or what it grows by). Disk: what a new machine takes, or what a disk
+ *     grows by. Starting or waking is never refused for disk: a full disk is
+ *     cleaned from inside the conversations.
+ *   - all the time (watch): once what is free falls under the reserve, the
+ *     owner is alerted and the running machine that takes the most is put to
+ *     sleep, said in its conversation. Once: again only after what is free
+ *     came back above the reserve.
+ * What was PROMISED (the disks' largest sizes, the memory given to running
+ * machines) is only said, with a warning when it is more than there is.
  *
  * When the figures cannot be read (a host program from before these verbs),
  * nothing is refused: the reserve is a guard, not a gate that jams.
  */
-import { Refusal } from './conversations.mjs';
+import { Refusal, DISK_GB } from './conversations.mjs';
 
-export const RESERVE_DISK_MB = 3 * 1024;
+export const RESERVE_DISK_MB = 5 * 1024;
 export const RESERVE_MEMORY_MB = 1024;
+export const RESERVE_DISK_PERCENT = 5;
+export const RESERVE_MEMORY_PERCENT = 5;
+/* How often what is free is looked at, against the reserve. */
+export const WATCH_MS = 60_000;
 /* What may be set, in megabytes. */
 export const RESERVE_DISK_MAX_MB = 1024 * 1024;
 export const RESERVE_MEMORY_MAX_MB = 256 * 1024;
@@ -74,32 +87,39 @@ export const gb = (mb) => `${(mb / 1024).toFixed(1)} GB`;
 const percent = (part, all) => (all > 0 ? Math.round((part / all) * 100) : 0);
 
 export class Capacity {
-    #run; #store; #conversations; #shelf; #now; #roomMs; #room = null; #roomAt = -Infinity; #usage = null; #usageAt = -Infinity; #going = null; #measuring = null;
+    #run; #store; #conversations; #shelf; #now; #roomMs; #sleep; #alert; #say; #short = { disk: false, memory: false }; #room = null; #roomAt = -Infinity; #usage = null; #usageAt = -Infinity; #going = null; #measuring = null;
 
     /* `run(argv)`: the host program. `store`: where the reserve is kept.
        `conversations`: what each machine was given. `shelf`: how large a
        ready-made machine is (a new one is a copy of it). */
     /* `roomMs`: how long what is free is taken as known (ROOM_MS). */
-    constructor({ run, store, conversations, shelf = null, now = () => Date.now(), roomMs = ROOM_MS }) {
-        this.#roomMs = roomMs;
+    /* `sleep(name)`, `alert(payload)`, `say(name, text)`: what watch() does
+       when what is free falls under the reserve. */
+    constructor({ run, store, conversations, shelf = null, now = () => Date.now(), roomMs = ROOM_MS, sleep = null, alert = null, say = null }) {
+        this.#roomMs = roomMs; this.#sleep = sleep; this.#alert = alert; this.#say = say;
         this.#run = run; this.#store = store; this.#conversations = conversations; this.#shelf = shelf; this.#now = now;
     }
 
+    /* The two settings of each: a fixed amount and a share of the whole. */
     reserve() {
         const r = this.#store.get('reserve') ?? {};
-        return { diskMb: r.diskMb ?? RESERVE_DISK_MB, memoryMb: r.memoryMb ?? RESERVE_MEMORY_MB };
+        return { diskMb: r.diskMb ?? RESERVE_DISK_MB, diskPercent: r.diskPercent ?? RESERVE_DISK_PERCENT, memoryMb: r.memoryMb ?? RESERVE_MEMORY_MB, memoryPercent: r.memoryPercent ?? RESERVE_MEMORY_PERCENT };
     }
-    setReserve({ diskMb, memoryMb } = {}) {
+    setReserve({ diskMb, diskPercent, memoryMb, memoryPercent } = {}) {
         const now = this.reserve();
         const take = (value, max, what) => {
             if (value === undefined || value === null || value === '') return undefined;
             const n = Number(value);
-            if (!Number.isInteger(n) || n < 0 || n > max) throw new Refusal(400, `The ${what} reserve is a whole number of megabytes, from 0 to ${max}.`);
+            if (!Number.isInteger(n) || n < 0 || n > max) throw new Refusal(400, max === 100 ? `The ${what} reserve share is a whole number of percent, from 0 to 100.` : `The ${what} reserve is a whole number of megabytes, from 0 to ${max}.`);
             return n;
         };
-        const disk = take(diskMb, RESERVE_DISK_MAX_MB, 'disk') ?? now.diskMb;
-        const memory = take(memoryMb, RESERVE_MEMORY_MAX_MB, 'memory') ?? now.memoryMb;
-        this.#store.put({ name: 'reserve', diskMb: disk, memoryMb: memory });
+        const kept = {
+            diskMb: take(diskMb, RESERVE_DISK_MAX_MB, 'disk') ?? now.diskMb,
+            diskPercent: take(diskPercent, 100, 'disk') ?? now.diskPercent,
+            memoryMb: take(memoryMb, RESERVE_MEMORY_MAX_MB, 'memory') ?? now.memoryMb,
+            memoryPercent: take(memoryPercent, 100, 'memory') ?? now.memoryPercent,
+        };
+        this.#store.put({ name: 'reserve', ...kept });
         return this.reserve();
     }
 
@@ -131,21 +151,29 @@ export class Capacity {
        disk but the first one, and that one not long. */
     #figures(room) {
         if (!room) return null;
-        const reserve = this.reserve();
-        const records = new Map(this.#conversations.list().map((c) => [`clv-${c.name}`, c]));
+        const set = this.reserve();
+        const all = this.#conversations.list();
+        const records = new Map(all.map((c) => [`clv-${c.name}`, c]));
         const machines = room.machines.map((m) => {
             const c = records.get(m.vm);
             return { name: c ? c.name : null, shelf: m.vm.startsWith('clvshelf-'), rssMb: m.rssMb, sizeMb: c?.memoryMb ?? null };
         });
-        /* Given to running machines and not taken yet: it will be. */
-        const promisedMb = machines.reduce((sum, m) => sum + (m.sizeMb ? Math.max(0, m.sizeMb - m.rssMb) : 0), 0);
-        const memory = room.memory ? {
-            totalMb: room.memory.totalMb, freeMb: room.memory.availableMb, promisedMb,
-            spareMb: Math.max(0, room.memory.availableMb - promisedMb),
-            /* Counted as taken: what running machines were given and will take. */
-            usedPercent: percent(room.memory.totalMb - Math.max(0, room.memory.availableMb - promisedMb), room.memory.totalMb),
-        } : null;
+        /* What the system says is available: the machines' own use is in it already. */
+        const memory = room.memory ? { totalMb: room.memory.totalMb, freeMb: room.memory.availableMb, usedPercent: percent(room.memory.totalMb - room.memory.availableMb, room.memory.totalMb) } : null;
         const where = room.places.find((p) => p.what === 'machines') ?? room.places[0];
+        /* The reserve kept, in megabytes: the larger of the fixed amount and the share of the whole. */
+        const share = (totalMb, pct) => Math.round((totalMb * pct) / 100);
+        const reserve = {
+            diskMb: Math.max(set.diskMb, where ? share(where.sizeMb, set.diskPercent) : 0),
+            memoryMb: Math.max(set.memoryMb, memory ? share(memory.totalMb, set.memoryPercent) : 0),
+        };
+        /* Promised, only said: every disk at its largest, the memory given to running machines. */
+        const diskPromisedMb = all.reduce((sum, c) => sum + (c.diskGb ?? DISK_GB) * 1024, 0);
+        const memoryPromisedMb = machines.reduce((sum, m) => sum + (m.sizeMb ?? 0), 0);
+        const promised = {
+            disk: where ? { mb: diskPromisedMb, totalMb: where.sizeMb, over: diskPromisedMb > where.sizeMb } : null,
+            memory: memory ? { mb: memoryPromisedMb, totalMb: memory.totalMb, over: memoryPromisedMb > memory.totalMb } : null,
+        };
         /* The same disk named once, with all it holds. */
         const disks = [];
         for (const p of room.places) {
@@ -155,9 +183,9 @@ export class Capacity {
         const disk = where ? { sizeMb: where.sizeMb, freeMb: where.freeMb, usedPercent: percent(where.sizeMb - where.freeMb, where.sizeMb), disks: disks.map(({ device, ...d }) => d) } : null;
         const high = {
             disk: Boolean(disk) && disks.some((d) => d.usedPercent > HIGH_PERCENT || d.freeMb < HIGH_FACTOR * reserve.diskMb),
-            memory: Boolean(memory) && (memory.usedPercent > HIGH_PERCENT || memory.spareMb < HIGH_FACTOR * reserve.memoryMb),
+            memory: Boolean(memory) && (memory.usedPercent > HIGH_PERCENT || memory.freeMb < HIGH_FACTOR * reserve.memoryMb),
         };
-        return { reserve, disk, memory, machines, high };
+        return { reserve, settings: set, disk, memory, machines, promised, high };
     }
 
     /* For Settings, This server: everything known. */
@@ -175,7 +203,7 @@ export class Capacity {
             machines: { disksMb: Object.values(u.machines).reduce((a, b) => a + b, 0), each: Object.entries(u.machines).map(([name, mb]) => ({ name, mb })).sort((a, b) => b.mb - a.mb), shelfMb: u.shelf ?? null, imagesMb: u.images ?? null, othersMb: u.others ?? null },
             at: new Date(this.#usageAt).toISOString(),
         } : null;
-        return { known: Boolean(figures), reserve: this.reserve(), ...(figures ?? {}), usage, measuring: Boolean(this.#measuring) };
+        return { known: Boolean(figures), reserve: { diskMb: this.reserve().diskMb, memoryMb: this.reserve().memoryMb }, settings: this.reserve(), ...(figures ?? {}), usage, measuring: Boolean(this.#measuring) };
     }
 
     /* For the list: only whether it is high, and how much. Cheap: what is
@@ -191,7 +219,7 @@ export class Capacity {
         return {
             known: true, high: f.high.disk || f.high.memory,
             disk: disk ? { usedPercent: disk.usedPercent, freeMb: disk.freeMb, aboveMb: disk.freeMb - r.diskMb, high: f.high.disk, level: level(f.high.disk, disk.usedPercent, disk.freeMb - r.diskMb, r.diskMb) } : null,
-            memory: f.memory ? { usedPercent: f.memory.usedPercent, freeMb: f.memory.spareMb, aboveMb: f.memory.spareMb - r.memoryMb, high: f.high.memory, level: level(f.high.memory, f.memory.usedPercent, f.memory.spareMb - r.memoryMb, r.memoryMb) } : null,
+            memory: f.memory ? { usedPercent: f.memory.usedPercent, freeMb: f.memory.freeMb, aboveMb: f.memory.freeMb - r.memoryMb, high: f.high.memory, level: level(f.high.memory, f.memory.usedPercent, f.memory.freeMb - r.memoryMb, r.memoryMb) } : null,
         };
     }
 
@@ -206,10 +234,10 @@ export class Capacity {
         const r = f.reserve;
         const verb = kind === 'create' ? 'Not created' : kind === 'start' ? 'Not started' : 'Not changed';
         const who = name ? `${name}` : 'a new machine';
-        if (f.memory && memoryMb > 0 && f.memory.spareMb - memoryMb < r.memoryMb) {
+        if (f.memory && memoryMb > 0 && f.memory.freeMb - memoryMb < r.memoryMb) {
             const asks = kind === 'grow' ? `${gb(memoryMb)} more memory for ${who}` : `${gb(memoryMb)} of memory for ${who}`;
             const what = kind === 'create' ? 'Put a conversation you are not using to sleep, or choose less memory' : kind === 'grow' ? 'Put a conversation you are not using to sleep, or give it less' : 'Put a conversation you are not using to sleep';
-            throw new Refusal(409, `${verb}: this server cannot spare ${asks}. It has ${gb(f.memory.spareMb)} free for machines and keeps ${gb(r.memoryMb)} in reserve. ${what}, or lower the reserve in Settings, This server.`);
+            throw new Refusal(409, `${verb}: this server cannot spare ${asks}. It has ${gb(f.memory.freeMb)} of memory free and keeps ${gb(r.memoryMb)} in reserve. ${what}, or lower the reserve in Settings, This server.`);
         }
         const takes = kind === 'create' ? (this.#shelf?.about?.().current?.sizeMb ?? NEW_MACHINE_MB) : diskMb;
         if (f.disk && kind !== 'start' && takes > 0 && f.disk.freeMb - takes < r.diskMb) {
@@ -217,4 +245,40 @@ export class Capacity {
             throw new Refusal(409, `${verb}: this server cannot spare ${asks}. It has ${gb(f.disk.freeMb)} of disk free and keeps ${gb(r.diskMb)} in reserve. Archive conversations you no longer need, or lower the reserve in Settings, This server.`);
         }
     }
+
+    /* WATCHED: what is free against the reserve, all the time. Under it, once
+       (again only after it came back above): the owner alerted, and the
+       running machine that takes the most put to sleep and told so in its
+       conversation. Disk: the one whose disk is largest (by the last
+       measure; memory held when none is known). Resolves with what was done. */
+    async watch() {
+        const f = this.#figures(await this.room({ fresh: true }).catch(() => null));
+        if (!f) return [];
+        const done = [];
+        const awake = new Set(this.#conversations.awake?.() ?? []);
+        for (const what of ['disk', 'memory']) {
+            const free = f[what]?.freeMb;
+            const short = free !== undefined && free < f.reserve[`${what}Mb`];
+            const was = this.#short[what];
+            this.#short[what] = short;
+            if (!short || was) continue;
+            const running = f.machines.filter((m) => m.name && awake.has(m.name));
+            const takes = (m) => (what === 'disk' ? this.#usage?.machines?.[m.name] ?? -1 : m.rssMb);
+            const most = running.sort((a, b) => takes(b) - takes(a) || b.rssMb - a.rssMb)[0] ?? null;
+            let slept = null;
+            if (most && this.#sleep) slept = await Promise.resolve(this.#sleep(most.name)).then(() => most.name, () => null);
+            const figures = `${gb(free)} free, ${gb(f.reserve[`${what}Mb`])} kept in reserve`;
+            this.#alert?.({ title: `This server is short of ${what}`, body: `${figures}.${slept ? ` ${slept} was put to sleep.` : ''}`, url: '/?open=settings&at=resources' });
+            if (slept) this.#say?.(slept, `This server ran short of ${what} (${figures}). This machine took the most, so it was put to sleep. Wake it once there is room again.`);
+            done.push({ what, slept });
+        }
+        return done;
+    }
+
+    /* Watches every `everyMs`; returns what stops it. */
+    start(everyMs = WATCH_MS) {
+        const timer = setInterval(() => { void this.watch().catch(() => {}); }, everyMs);
+        timer.unref?.();
+        return () => clearInterval(timer);
+    }
 }

package/server/main.mjs

@@ -338,10 +338,14 @@ export async function startHome({ port, host, dataDir, mntDir = dataDir, gitRese
     const stopUpdates = updates.watch();
     const setup = new Setup({ store: new Store(`${dataDir}/flows.json`), version: platform.version, conversations: all, resources: folders, secrets, devices, shortcuts, wakeups, answerer, talk, gitKeeper, gitAccess, mailboxes, signin, network, guide, ...(setupPollMs ? { pollMs: setupPollMs } : {}) });
     /* This server's disk and memory, and the reserve no machine may eat into: see capacity.mjs. */
-    const capacity = new Capacity({ run: asHost, store: new Store(`${dataDir}/server.json`), conversations: all, shelf, ...(serverRoomMs === undefined ? {} : { roomMs: serverRoomMs }) });
+    const capacity = new Capacity({ run: asHost, store: new Store(`${dataDir}/server.json`), conversations: all, shelf, ...(serverRoomMs === undefined ? {} : { roomMs: serverRoomMs }),
+        /* Under the reserve: the machine that takes the most put to sleep, the owner told, and its chat. */
+        sleep: (name) => all.sleep(name), alert: (payload) => { void alerts.tell(payload); },
+        say: (name, text) => { try { talk.event(name, { kind: 'machine-problem', text, tone: 'warn', topic: 'Machine' }); } catch { /* its chat may be off */ } } });
     all.room = (ask) => capacity.check(ask);
+    const stopWatch = capacity.start();
     const { server, listening } = serve(port, all, folders, { gate, originOk, shortcuts, voice, sharing, door, secrets, network, signin, mailboxes, gitReview, platform, answerer, wakeups, alerts, talk, gitAccess, gitKeeper, shelf, health, setup, guide, capacity, updates, repair: (name) => repairTerminal(name) });
-    server.on('close', () => { closing = true; stopShelf(); stopHealth(); stopUpdates(); clearInterval(mailTimer); clearInterval(answerTimer); clearInterval(wakeTimer); clearInterval(gitTimer); talk.stop(); });
+    server.on('close', () => { closing = true; stopShelf(); stopHealth(); stopUpdates(); stopWatch(); clearInterval(mailTimer); clearInterval(answerTimer); clearInterval(wakeTimer); clearInterval(gitTimer); talk.stop(); });
     let closing = false;
     bridge = attachBridge(server, {
         onRejoin: (name) => all.rejoin(name),
@@ -397,8 +401,6 @@ function hostSetting(key) {
 }
 
 if (process.argv[1] === fileURLToPath(import.meta.url)) {
-    /* DELIBERATELY BROKEN, this version only: it proves an update that does not start is undone by itself. */
-    console.error('0.1.0-next.4 refuses to start, on purpose: the updater must go back by itself.'); process.exit(70);
     const argv = process.argv.slice(2);
     const port = Number(option(argv, 'port', '7717'));
     const host = option(argv, 'host', '');

package/server/updates.mjs

@@ -107,7 +107,7 @@ export class Updates {
             if (this.#store.get('told')?.key === key) return;
             this.#store.put({ name: 'told', key });
             const title = last.result === 'rolled-back' ? `The update to ${last.to} did not work: back on ${last.from}` : `${last.action === 'back' ? 'Going back to' : 'The update to'} ${last.to} failed`;
-            void this.#alerts?.tell({ title, body: String(last.why ?? '').slice(0, 180), url: '/?open=settings' })?.catch?.(() => {});
+            void this.#alerts?.tell({ title, body: String(last.why ?? '').slice(0, 180), url: '/?open=settings&at=updates' })?.catch?.(() => {});
         };
         look();
         this.#timer = setInterval(look, everyMs); this.#timer.unref?.();

package/web/app.js

@@ -1193,9 +1193,9 @@
         for (const b of $('network').children) b.setAttribute('aria-pressed', String((b.dataset.online === 'true') !== offline));
         await paintSignIn();
     }
-    /* ---------- the chapters of "This conversation": folded or not, kept on this device ---------- */
-    /* What is used every day is open at first; the rest is one tap away. */
-    const OPEN_AT_FIRST = { general: true, machine: true, access: true };
+    /* ---------- chapters (a conversation's settings, and Settings): folded or not, kept on this device ---------- */
+    /* All folded at first, as a project's settings: what the person opens is kept. */
+    const OPEN_AT_FIRST = {};
     let chapters = {};
     try { chapters = JSON.parse(localStorage.getItem('clavarium-chapters') ?? '{}') ?? {}; } catch { /* a private window */ }
     for (const chapter of document.querySelectorAll('details.chapter')) {
@@ -1206,7 +1206,19 @@
             try { localStorage.setItem('clavarium-chapters', JSON.stringify(chapters)); } catch { /* as above */ }
         });
     }
-    const openChapter = (key) => { const chapter = document.querySelector(`details.chapter[data-chapter="${key}"]`); if (chapter) chapter.open = true; return chapter; };
+    /* Reached by a link (or a button that leads to it): opened, and said for a moment. */
+    let reachedTimer;
+    const openChapter = (key, { show = true } = {}) => {
+        const chapter = document.querySelector(`details.chapter[data-chapter="${key}"]`);
+        if (!chapter) return chapter;
+        chapter.open = true;
+        if (show) {
+            for (const other of document.querySelectorAll('details.chapter.reached')) other.classList.remove('reached');
+            chapter.classList.add('reached');
+            clearTimeout(reachedTimer); reachedTimer = setTimeout(() => chapter.classList.remove('reached'), 2000);
+        }
+        return chapter;
+    };
 
     /* ---------- the machine: its health, its size, a restart ---------- */
     const sizeWords = (mb) => (mb >= 1024 ? `${Number.isInteger(mb / 1024) ? mb / 1024 : (mb / 1024).toFixed(1)} GB` : `${mb} MB`);
@@ -2371,7 +2383,13 @@
         const wanted = q.get('c') ?? '';
         if (home && wanted !== current && conversations.some((c) => c.name === wanted)) select(wanted);
         const open = q.get('open') ?? '';
-        if (open === 'settings') { await openSettings({ push: false }); return; }
+        if (open === 'settings') {
+            await openSettings({ push: false });
+            /* A link to one chapter of Settings (?open=settings&at=resources): that one opened, and shown. */
+            const at = q.get('at') ?? '';
+            if (/^[a-z]{1,20}$/.test(at)) openChapter(`s-${at}`)?.scrollIntoView({ block: 'start' });
+            return;
+        }
         const former = FORMER[open === 'access' ? (q.get('tab') ?? 'map') : open];
         if (former) { await openAccessPage(former[0], { mode: former[1], of: q.get('for') ?? '', push: false }); return; }
         leavePlace({ fromHistory: true });
@@ -2436,11 +2454,13 @@
     };
     const when = (iso) => new Date(iso).toLocaleString([], { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
     function updatesError(text) { $('updates-error').textContent = text ?? ''; $('updates-error').hidden = !text; }
+    let lastUpdates = null;
     async function paintUpdates() {
         clearTimeout(updatesTimer);
         const u = await fetch(`${API}/updates`).then((r) => (r.ok ? r.json() : null)).catch(() => null);
         /* The server restarts during an update: asked again until it answers. */
         if (!u) { if (updatesBusy && !$('settings').hidden) updatesTimer = setTimeout(() => { void paintUpdates(); }, 3000); return; }
+        lastUpdates = u;
         $('updates-version').textContent = `Clavarium ${u.version ?? ''}`;
         for (const id of ['updates-check', 'updates-settings', 'updates-back']) $(id).hidden = !u.installed;
         if (!u.installed) {
@@ -2456,12 +2476,22 @@
             : u.checkedAt ? `Up to date · checked ${sinceWords(u.checkedAt)}` : 'Up to date';
         $('updates-check').disabled = Boolean(running);
         $('updates-offer').hidden = !u.available || Boolean(running);
-        $('updates-apply').textContent = `Update to ${u.available ?? ''}`;
-        /* The last thing that went wrong, said once at the top, in words. */
+        /* A version that already failed here is not offered as usual: tried again only on purpose, warned. */
+        const failedHere = Boolean(u.available) && u.history.some((h) => h.action === 'update' && h.to === u.available && h.result !== 'done');
+        const apply = $('updates-apply');
+        apply.dataset.version = u.available ?? '';
+        apply.dataset.retry = String(failedHere);
+        apply.className = failedHere ? '' : 'primary';
+        apply.textContent = failedHere ? `Try ${u.available} again\u2026` : `Update to ${u.available ?? ''}`;
+        $('updates-retry-note').textContent = failedHere ? `It did not start here before. If it fails again, ${u.version} is put back.` : '';
+        $('updates-retry-note').hidden = !failedHere;
+        $('updates-retry-yes').hidden = true; $('updates-retry-no').hidden = true; apply.hidden = false;
+        /* The last thing that went wrong, said once at the top, in words: a version put
+           back runs normally -- only the new one did not start, here. */
         const last = u.history[0];
-        const why = (last?.why ?? '').replace(/^./, (c) => c.toUpperCase());
-        const news = !running && last && last.result !== 'done' ? (last.result === 'rolled-back' ? `The update to ${last.to} did not work, so ${last.from} was put back. ${why}` : `${last.action === 'back' ? 'Going back to' : 'The update to'} ${last.to} failed: ${last.why ?? ''}`)
-            : !running && u.refused && (!last || u.refused.at > last.at) ? `Not done: ${u.refused.why}` : '';
+        const backFailed = /did not come back either/.test(last?.why ?? '');
+        const news = !running && last && last.result !== 'done' ? (last.result === 'rolled-back' ? (backFailed ? `${last.to} did not start on this server, and putting ${last.from} back did not work either: ${last.why}` : `${last.to} did not start on this server, so ${last.from} was put back. ${last.from} runs normally.`) : `${last.action === 'back' ? 'Going back to' : 'The update to'} ${last.to} failed: ${last.why ?? ''}`)
+            : !running && u.refused && (!last || u.refused.at > last.at) && !/is not newer than/.test(u.refused.why ?? '') ? `Not done: ${u.refused.why}` : '';
         $('updates-news').textContent = news.trim(); $('updates-news').hidden = !news;
         if (![$('updates-mode'), $('updates-from'), $('updates-to'), $('updates-channel')].includes(document.activeElement)) {
             $('updates-mode').value = u.mode; $('updates-channel').value = u.channel;
@@ -2500,17 +2530,30 @@
         if (running && !$('settings').hidden) updatesTimer = setTimeout(() => { void paintUpdates(); }, 3000);
     }
     $('updates-check').addEventListener('click', async () => {
-        updatesError(); $('updates-check').disabled = true; $('updates-state').textContent = 'Checking...';
-        try { await post(`${API}/updates/check`); } catch (error) { updatesError(error.message); }
-        $('updates-check').disabled = false;
+        updatesError(); $('updates-check').disabled = true; $('updates-check').textContent = 'Checking...'; $('updates-state').textContent = 'Checking...';
+        let failed = false;
+        try { await post(`${API}/updates/check`); } catch (error) { failed = true; updatesError(`Could not ask npm: ${error.message}. Try again later.`); }
+        $('updates-check').disabled = false; $('updates-check').textContent = 'Check now';
         await paintUpdates();
+        /* The answer to the click, said next to it. */
+        const u = lastUpdates;
+        if (!failed && u && !u.checkError) { $('updates-news').textContent = u.available ? `${u.available} is out.` : `No new version: ${u.version} is the latest.`; $('updates-news').hidden = false; }
     });
-    $('updates-apply').addEventListener('click', async () => {
+    async function applyUpdate() {
         updatesError();
-        const version = $('updates-apply').textContent.replace(/^Update to /, '');
+        const version = $('updates-apply').dataset.version;
         try { await post(`${API}/updates/apply`, { version }); updatesBusy = true; } catch (error) { updatesError(error.message); }
         await paintUpdates();
+    }
+    $('updates-apply').addEventListener('click', () => {
+        if ($('updates-apply').dataset.retry !== 'true') { void applyUpdate(); return; }
+        /* Tried again: asked once more, in place. */
+        $('updates-apply').hidden = true;
+        $('updates-retry-note').textContent = `The server restarts to try ${$('updates-apply').dataset.version} again.`;
+        $('updates-retry-yes').hidden = false; $('updates-retry-no').hidden = false; $('updates-retry-yes').focus();
     });
+    $('updates-retry-yes').addEventListener('click', () => { void applyUpdate(); });
+    $('updates-retry-no').addEventListener('click', () => { void paintUpdates(); });
     async function saveUpdates(change) {
         updatesError(); $('updates-saved').textContent = '';
         try { await post(`${API}/updates/settings`, change); $('updates-saved').textContent = 'Saved.'; } catch (error) { updatesError(error.message); }
@@ -2600,22 +2643,35 @@
         const r = await fetch(`${API}/server`).then((x) => (x.ok ? x.json() : null)).catch(() => null);
         $('settings-server-top').hidden = !r; $('settings-server').hidden = !r;
         if (!r) return;
-        const editing = [$('reserve-disk'), $('reserve-memory')].includes(document.activeElement);
-        if (!editing) { $('reserve-disk').value = String(Math.round((r.reserve.diskMb / 1024) * 100) / 100); $('reserve-memory').value = String(Math.round((r.reserve.memoryMb / 1024) * 100) / 100); }
+        /* The two settings of each: a fixed amount and a share; the larger is kept free. */
+        const set = r.settings ?? { ...r.reserve, diskPercent: 0, memoryPercent: 0 };
+        const editing = ['reserve-disk', 'reserve-disk-percent', 'reserve-memory', 'reserve-memory-percent'].some((id) => $(id) === document.activeElement);
+        if (!editing) {
+            $('reserve-disk').value = String(Math.round((set.diskMb / 1024) * 100) / 100); $('reserve-memory').value = String(Math.round((set.memoryMb / 1024) * 100) / 100);
+            $('reserve-disk-percent').value = String(set.diskPercent); $('reserve-memory-percent').value = String(set.memoryPercent);
+        }
+        $('reserve-now').textContent = r.known ? `Kept free now: ${GB(r.reserve.diskMb)} of disk, ${GB(r.reserve.memoryMb)} of memory.` : '';
+        /* What was promised, only said: never refused for it. */
+        const promised = (line, p, words) => {
+            line.hidden = !p; if (!p) return;
+            line.dataset.over = String(p.over);
+            line.textContent = `${words(GB(p.mb), GB(p.totalMb))}${p.over ? ' That is more than there is: fine while they do not all fill up.' : ''}`;
+        };
+        promised($('promised-disk'), r.promised?.disk, (mb, total) => `Disks promised to machines, at their largest: ${mb} of ${total}.`);
+        promised($('promised-memory'), r.promised?.memory, (mb, total) => `Memory given to running machines: ${mb} of ${total}.`);
         $('server-unknown').hidden = r.known;
         $('server-disks').hidden = !r.disk; $('server-memory').hidden = !r.memory;
         if (r.disk) paintDisks(r);
         if (r.memory) {
             const mem = r.memory;
-            $('server-memory-figures').textContent = `${GB(mem.spareMb)} free of ${GB(mem.totalMb)}`;
-            meter($('server-memory-meter'), mem.usedPercent, r.reserve.memoryMb, mem.totalMb, levelOf(r.high.memory, mem.usedPercent, mem.spareMb - r.reserve.memoryMb, r.reserve.memoryMb));
+            $('server-memory-figures').textContent = `${GB(mem.freeMb)} free of ${GB(mem.totalMb)}`;
+            meter($('server-memory-meter'), mem.usedPercent, r.reserve.memoryMb, mem.totalMb, levelOf(r.high.memory, mem.usedPercent, mem.freeMb - r.reserve.memoryMb, r.reserve.memoryMb));
             $('server-memory-state').textContent = 'Short'; $('server-memory-state').hidden = !r.high.memory;
-            $('server-memory-note').textContent = aboveWords(mem.spareMb - r.reserve.memoryMb, r.reserve.memoryMb);
+            $('server-memory-note').textContent = aboveWords(mem.freeMb - r.reserve.memoryMb, r.reserve.memoryMb);
             const held = r.machines.reduce((a, x) => a + x.rssMb, 0);
             parts($('server-memory-parts'), [
                 [`Running machines (${r.machines.length})`, held],
                 ...r.machines.map((x) => [x.shelf ? 'ready-made machine (being made)' : (x.name ?? 'another machine'), x.sizeMb ? `uses ${GB(x.rssMb)} · given ${GB(x.sizeMb)}` : `uses ${GB(x.rssMb)}`, true]),
-                ...(mem.promisedMb > 0 ? [['given to them, not used yet', mem.promisedMb, true]] : []),
                 ['The system and other programs', Math.max(0, mem.totalMb - mem.freeMb - held)],
             ]);
         }
@@ -2625,9 +2681,12 @@
     $('reserve-save').addEventListener('click', async () => {
         $('reserve-error').hidden = true; $('reserve-saved').textContent = '';
         const mb = (id) => { const v = Number.parseFloat($(id).value.replace(',', '.')); return Number.isFinite(v) ? Math.round(v * 1024) : NaN; };
+        const share = (id) => { const v = Number($(id).value.trim()); return Number.isInteger(v) && v >= 0 && v <= 100 ? v : NaN; };
         const diskMb = mb('reserve-disk'); const memoryMb = mb('reserve-memory');
+        const diskPercent = share('reserve-disk-percent'); const memoryPercent = share('reserve-memory-percent');
         if (!(diskMb >= 0) || !(memoryMb >= 0)) { $('reserve-error').textContent = 'Write a number of gigabytes, 0 or more.'; $('reserve-error').hidden = false; return; }
-        try { await post(`${API}/server/reserve`, { diskMb, memoryMb }); $('reserve-saved').textContent = 'Saved.'; } catch (error) { $('reserve-error').textContent = error.message; $('reserve-error').hidden = false; return; }
+        if (Number.isNaN(diskPercent) || Number.isNaN(memoryPercent)) { $('reserve-error').textContent = 'Write a whole percent, from 0 to 100.'; $('reserve-error').hidden = false; return; }
+        try { await post(`${API}/server/reserve`, { diskMb, diskPercent, memoryMb, memoryPercent }); $('reserve-saved').textContent = 'Saved.'; } catch (error) { $('reserve-error').textContent = error.message; $('reserve-error').hidden = false; return; }
         await paintServer(); void paintGauge();
     });
     /* THE SMALL GAUGE at the bottom of the list: only when disk or memory is
@@ -2657,7 +2716,7 @@
     }
     $('server-gauge').addEventListener('click', async () => {
         if (place !== 'settings') await openSettings(); else await paintServer();
-        const top = $('settings-server-top');
+        const top = openChapter('s-resources');
         top.scrollIntoView({ block: 'start' });
         $('settings-server').focus({ preventScroll: true });
     });

package/web/index.html

@@ -505,17 +505,33 @@
       <!-- SETTINGS: the platform, and this device. -->
       <div id="settings" class="sheet" hidden>
         <div class="panel-top"><b>Settings</b><button type="button" id="settings-close">Close</button></div>
-        <div class="panel-top"><b>This device</b></div>
+        <h3 class="chapter-group">This device</h3>
+        <details class="chapter" id="settings-ch-screen" data-chapter="s-screen">
+          <summary><span class="chapter-title">Screen</span><span class="chapter-about">Light or dark, text size, the app.</span></summary>
+          <div class="chapter-body">
         <div class="row"><span>Screen</span><button type="button" id="theme" aria-label="Light or dark screen">Light</button><button type="button" id="install" class="primary" hidden>Install the app</button></div>
         <div class="row"><span>Text size</span><span class="text-size" id="settings-text" role="group" aria-label="Text size"><button type="button" data-text="smaller" aria-label="Smaller text">A&minus;</button><button type="button" data-text="normal" aria-label="Normal text size" class="text-now">100%</button><button type="button" data-text="larger" aria-label="Larger text">A+</button></span></div>
         <p class="hint">All text, the terminal's too, on this device only. Also: two fingers pinched, Ctrl and the wheel, Ctrl + and Ctrl -.</p>
-        <div class="panel-top"><b>Alerts</b></div>
+          </div>
+        </details>
+        <details class="chapter" id="settings-ch-alerts" data-chapter="s-alerts">
+          <summary><span class="chapter-title">Alerts</span><span class="chapter-about">Be told here when a tool waits for you.</span></summary>
+          <div class="chapter-body">
         <p class="hint" id="alerts-state">When a tool stops and waits for you, this device can be told.</p>
         <div class="row"><button type="button" id="alerts-on" class="primary">Alert me on this device</button><button type="button" id="alerts-off" hidden>Stop alerting this device</button><button type="button" id="alerts-test" hidden>Send a test</button></div>
-        <div class="panel-top"><b>Shortcuts</b></div>
+          </div>
+        </details>
+        <h3 class="chapter-group">This server</h3>
+        <details class="chapter" id="settings-ch-shortcuts" data-chapter="s-shortcuts">
+          <summary><span class="chapter-title">Shortcuts</span><span class="chapter-about">The ready-made answers under the terminal.</span></summary>
+          <div class="chapter-body">
         <p class="hint">The ready-made answers under the terminal. They are added there ("+ Shortcut"); they are removed here.</p>
         <div id="settings-shortcuts"></div>
-        <div class="panel-top"><b>Chat screen</b></div>
+          </div>
+        </details>
+        <details class="chapter" id="settings-ch-words" data-chapter="s-words">
+          <summary><span class="chapter-title">Chat screen</span><span class="chapter-about">Its language, and your own words.</span></summary>
+          <div class="chapter-body">
         <div class="row"><label for="words-lang">Language</label><select id="words-lang"><option value="device">The language of each device</option></select></div>
         <details id="words-box">
           <summary>Your own words</summary>
@@ -527,18 +543,34 @@
         </details>
         <!-- WHAT THE THREAD SHOWS of what this server says there: each kind of
              event at a level (server/talk.mjs EVENT_LEVELS); the owner may move one. -->
-        <div class="panel-top"><b>Chat: what the thread shows</b></div>
+          </div>
+        </details>
+        <details class="chapter" id="settings-ch-thread" data-chapter="s-thread">
+          <summary><span class="chapter-title">Chat thread</span><span class="chapter-about">What the chat says of machines and repositories.</span></summary>
+          <div class="chapter-body">
         <p class="hint">Besides the messages, the chat says what happened to its machine and its repositories. <b>Needs you</b>: in both views. <b>News</b>: in the simple view as one short line, several in a row grouped. <b>Trace</b>: in the detailed view only. Never counted as unread.</p>
         <div id="thread-levels" class="thread-levels"></div>
         <p class="hint" id="thread-saved" role="status"></p>
         <p id="thread-error" class="error" role="alert" hidden></p>
-        <div class="panel-top"><b>Dictation</b></div>
+          </div>
+        </details>
+        <details class="chapter" id="settings-ch-dictation" data-chapter="s-dictation">
+          <summary><span class="chapter-title">Dictation</span><span class="chapter-about">Speech to text, on this server.</span></summary>
+          <div class="chapter-body">
         <p id="settings-dictation" class="hint"></p>
-        <div class="panel-top"><b>People &amp; address</b></div>
+          </div>
+        </details>
+        <details class="chapter" id="settings-ch-people" data-chapter="s-people">
+          <summary><span class="chapter-title">People &amp; address</span><span class="chapter-about">Who may sign in, and where.</span></summary>
+          <div class="chapter-body">
         <p id="settings-people" class="hint"></p>
         <!-- THIS SERVER: its disk and memory, what takes them, and the reserve
              no machine may eat into (server/capacity.mjs). Nothing here wakes a machine. -->
-        <div class="panel-top" id="settings-server-top"><b>This server</b></div>
+          </div>
+        </details>
+        <details class="chapter" id="settings-server-top" data-chapter="s-resources">
+          <summary><span class="chapter-title">Resources</span><span class="chapter-about">Disk and memory, what takes them, the reserve.</span></summary>
+          <div class="chapter-body">
         <div id="settings-server" tabindex="-1">
           <p id="server-unknown" class="hint" hidden>This server's disk and memory cannot be read just now. Nothing is refused for lack of room while they cannot.</p>
           <div id="server-disks"></div>
@@ -549,24 +581,41 @@
             <dl id="server-memory-parts" class="server-parts"></dl>
           </div>
           <div class="server-block">
-            <div class="server-head"><b>Reserve</b><span class="server-figures">always left free</span></div>
+            <div class="server-head"><b>Reserve</b><span class="server-figures">always left free, the larger of the two</span></div>
+            <div class="reserve-row">
+              <span class="reserve-what">Disk</span>
+              <label><input type="number" id="reserve-disk" min="0" max="1024" step="0.5" inputmode="decimal" aria-label="Disk reserve, in GB"> GB</label>
+              <span aria-hidden="true">or</span>
+              <label><input type="number" id="reserve-disk-percent" min="0" max="100" step="1" inputmode="numeric" aria-label="Disk reserve, in percent of the disk"> %</label>
+            </div>
+            <div class="reserve-row">
+              <span class="reserve-what">Memory</span>
+              <label><input type="number" id="reserve-memory" min="0" max="256" step="0.25" inputmode="decimal" aria-label="Memory reserve, in GB"> GB</label>
+              <span aria-hidden="true">or</span>
+              <label><input type="number" id="reserve-memory-percent" min="0" max="100" step="1" inputmode="numeric" aria-label="Memory reserve, in percent of the memory"> %</label>
+            </div>
             <div class="reserve-row">
-              <label>Disk <input type="number" id="reserve-disk" min="0" max="1024" step="0.5" inputmode="decimal"> GB</label>
-              <label>Memory <input type="number" id="reserve-memory" min="0" max="256" step="0.25" inputmode="decimal"> GB</label>
               <button type="button" id="reserve-save" class="primary">Save</button>
               <span class="hint" id="reserve-saved" role="status"></span>
             </div>
-            <p class="hint">Creating, starting or waking a machine, or giving a machine more memory or disk, is refused if it would leave less than this free; you are told what to free instead. Waking is never refused for lack of disk, so you can always get in to clean up. The striped end of each bar is the reserve.</p>
+            <p class="server-note" id="reserve-now"></p>
+            <p class="hint">Judged on what is really free. A machine is not created, started or given more if that would leave less. Below it, you are alerted and the running machine that takes the most is put to sleep. Waking is never refused for lack of disk, so you can get in to clean up.</p>
+            <p class="server-note promised" id="promised-disk" hidden></p>
+            <p class="server-note promised" id="promised-memory" hidden></p>
             <p id="reserve-error" class="error" role="alert" hidden></p>
           </div>
         </div>
         <!-- UPDATES: what runs, what is out, how this server updates itself
              (server/updates.mjs; the updater, as root: deploy/updater.mjs). -->
-        <div class="panel-top" id="settings-updates-top"><b>Updates</b></div>
+          </div>
+        </details>
+        <details class="chapter" id="settings-updates-top" data-chapter="s-updates">
+          <summary><span class="chapter-title">Updates</span><span class="chapter-about">The version that runs, and how it updates.</span></summary>
+          <div class="chapter-body">
         <div id="updates" tabindex="-1">
           <div class="updates-head"><b id="updates-version"></b><span id="updates-state" role="status"></span><button type="button" id="updates-check">Check now</button></div>
           <p id="updates-news" class="updates-news" hidden></p>
-          <div class="row" id="updates-offer" hidden><button type="button" id="updates-apply" class="primary"></button></div>
+          <div class="row" id="updates-offer" hidden><button type="button" id="updates-apply" class="primary"></button><button type="button" id="updates-retry-yes" class="primary" hidden>Try again</button><button type="button" id="updates-retry-no" hidden>Cancel</button><span class="hint" id="updates-retry-note" hidden></span></div>
           <div id="updates-settings" class="updates-grid">
             <label for="updates-mode">Mode</label>
             <select id="updates-mode"><option value="auto">Automatic, in a window</option><option value="asap">As soon as out</option><option value="ask">Ask me</option><option value="off">Off</option></select>
@@ -580,10 +629,17 @@
           <details id="updates-history-box" hidden><summary>History</summary><ul id="updates-history" class="updates-history"></ul></details>
           <p id="updates-error" class="error" role="alert" hidden></p>
         </div>
-        <div class="panel-top"><b>Storage &amp; backup</b></div>
+          </div>
+        </details>
+        <details class="chapter" id="settings-ch-backup" data-chapter="s-backup">
+          <summary><span class="chapter-title">Storage &amp; backup</span><span class="chapter-about">Disk sizes, and how to back up.</span></summary>
+          <div class="chapter-body">
         <p class="hint">Each conversation works in a disk of a fixed size (10 GB unless the installation says otherwise). A backup is made on the machine itself, as two files -- the archive, and the key of the vault apart: <code>sudo deploy/backup.sh --to /a/folder</code>.</p>
-        <details id="settings-advanced">
-          <summary>Advanced</summary>
+          </div>
+        </details>
+        <details class="chapter" id="settings-ch-advanced" data-chapter="s-advanced">
+          <summary><span class="chapter-title">Advanced</span><span class="chapter-about">Ready-made machine, git server keys.</span></summary>
+          <div class="chapter-body" id="settings-advanced">
           <div id="shelf">
             <b>Ready-made machine</b>
             <p class="hint">New conversations start from a copy of a machine prepared in advance, with the tools already installed: a minute or two instead of several. It is rebuilt each month in the background; running conversations are not touched.</p>
@@ -598,9 +654,14 @@
             <div id="git-hosts"></div>
             <p id="git-hosts-error" class="error" role="alert" hidden></p>
           </div>
+          </div>
         </details>
-        <div class="panel-top"><b>About</b></div>
+        <details class="chapter" id="settings-ch-about" data-chapter="s-about">
+          <summary><span class="chapter-title">About</span><span class="chapter-about">The version that runs here.</span></summary>
+          <div class="chapter-body">
         <p id="settings-about" class="hint"></p>
+          </div>
+        </details>
       </div>
       <div id="copy" class="sheet" hidden>
         <div class="panel-top"><b>Copy from the screen</b><button type="button" id="copy-close">Close</button></div>

package/web/style.css

@@ -228,9 +228,9 @@ footer button.careful { border-style: dashed; color: var(--ink2); }
 #sharing-what { display: flex; flex-direction: column; }
 
 /* What can be unfolded looks like it can. */
-#panel details > summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--button, #222c38); font-weight: 600; }
-#panel details > summary::before { content: '+ '; }
-#panel details[open] > summary::before { content: '- '; }
+#panel details:not(.chapter) > summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--button, #222c38); font-weight: 600; }
+#panel details:not(.chapter) > summary::before { content: '+ '; }
+#panel details[open]:not(.chapter) > summary::before { content: '- '; }
 #sharing-label { min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }
 #sharing label { font-size: .8125rem; }
 
@@ -308,10 +308,10 @@ footer button.careful { border-style: dashed; color: var(--ink2); }
 @media (prefers-reduced-motion: reduce) { .asset-head b::before { transition: none; } }
 .asset-inside { flex-basis: 100%; padding: 0 0 8px 12px; display: flex; flex-direction: column; gap: 4px; }
 @media (max-width: 700px) { .asset-head { grid-template-columns: 1fr; gap: 2px; } }
-#assets details > summary, #access-advanced > summary, #settings-advanced > summary { cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--button, #222c38); font-weight: 600; list-style: none; align-self: flex-start; }
-#assets details > summary::before, #access-advanced > summary::before, #settings-advanced > summary::before { content: '+ '; }
-#assets details[open] > summary::before, #access-advanced[open] > summary::before, #settings-advanced[open] > summary::before { content: '- '; }
-#assets details form, #access-advanced > div, #settings-advanced > div { margin-top: 8px; }
+#assets details > summary, #access-advanced > summary { cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--button, #222c38); font-weight: 600; list-style: none; align-self: flex-start; }
+#assets details > summary::before, #access-advanced > summary::before { content: '+ '; }
+#assets details[open] > summary::before, #access-advanced[open] > summary::before { content: '- '; }
+#assets details form, #access-advanced > div { margin-top: 8px; }
 #attach-picker { border: 1px solid var(--brass); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
 #chips { cursor: pointer; }
 #settings .row { align-items: center; gap: 10px; }
@@ -398,17 +398,21 @@ textarea.public-key { flex: 1 1 260px; min-width: 0; font: .75rem ui-monospace,
 #gitview #gitview-guards ul { margin: 4px 0 8px; padding-left: 20px; }
 #gitview #gitview-guards li { overflow-wrap: anywhere; }
 
-/* ---------- this conversation: chapters that fold, as a project's settings ---------- */
-#panel { gap: 12px; }
-#panel details.chapter { border: 1px solid var(--line); border-radius: 10px; background: var(--bar); }
-#panel details.chapter > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 14px; border: 0; background: none; border-radius: 10px; min-height: 48px; }
-#panel details.chapter > summary::-webkit-details-marker { display: none; }
-#panel details.chapter > summary::before { content: none; }
-#panel details.chapter > summary::after { content: "Expand"; margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--ink2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; }
-#panel details.chapter[open] > summary::after { content: "Collapse"; }
-#panel details.chapter[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
+/* ---------- chapters that fold, as a project's settings (a conversation's, and Settings) ---------- */
+#panel, #settings { gap: 12px; }
+details.chapter { flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bar); }
+details.chapter > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 14px; border: 0; background: none; border-radius: 10px; min-height: 48px; }
+details.chapter > summary::-webkit-details-marker { display: none; }
+details.chapter > summary::before { content: none; }
+details.chapter > summary::after { content: "Expand"; margin-left: auto; font-size: .75rem; font-weight: 600; color: var(--ink2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; }
+details.chapter[open] > summary::after { content: "Collapse"; }
+details.chapter[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
 .chapter-title { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
 .chapter-about { font-size: .8125rem; font-weight: 400; color: var(--ink2); flex: 1 1 14rem; }
+.chapter-group { margin: 10px 0 -4px; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); }
+/* Reached by a link: said for a moment. */
+details.chapter.reached { outline: 2px solid var(--brass); outline-offset: 2px; }
+@media (prefers-reduced-motion: no-preference) { details.chapter { transition: outline-color .6s; } }
 .chapter-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; background: var(--panel); border-radius: 0 0 10px 10px; }
 .facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
 .facts dt { color: var(--ink2); }
@@ -973,6 +977,8 @@ button.inline:hover { color: var(--brass); }
 .server-parts .sub { font-weight: normal; color: var(--ink2); }
 .server-parts dt.sub { padding-left: 14px; }
 .reserve-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
+.reserve-what { min-width: 4.5em; font-weight: 600; }
+.server-note.promised[data-over="true"] { color: var(--warn, #b7791f); font-weight: 600; }
 .reserve-row label { display: inline-flex; align-items: center; gap: 6px; }
 .reserve-row input { width: 5.5em; min-height: 40px; font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; }