clavarium 0.2.0-next.5 → 0.2.0-next.6

package/deploy/install.sh

@@ -38,6 +38,9 @@
 #                      server mode)
 #   --relay-installed  the relay was set up already (by `clavarium online`):
 #                      do not print the command to run on it
+#   --name NAME        the name of this Clavarium, under its icon and in its
+#                      tab (default: drawn from --domain); changed in Settings.
+#                      Letters, digits, spaces, dots, hyphens: 30 at most
 #   --dry-run          check the parameters, say what would be done, do nothing
 #
 # AFTER --local, going online is one command: `sudo clavarium online --relay
@@ -107,12 +110,12 @@ DEX_LAYER="680f1119fdbcdd7f0ad8985b2534ded871b08b5b77c40f337c38aebd062b59c2"
 DEX_SHA256="217aa675738d1cbaf25fe8d7bc04cb00dbc60f91d8465b76b8d8af963d571337"
 HERE="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
 
-bad() { echo "install: $*" >&2; echo "usage: install.sh --domain NAME --operator EMAIL [--operator EMAIL...] [--port N] [--relay HOST [--relay-port N]] [--core-only] [--version X.Y.Z | --from-dir DIR] [--updates auto|asap|ask|off] [--update-window HH:MM-HH:MM] [--channel latest|next] [--dry-run]" >&2; echo "   or: install.sh --local [--port N] [same options] [--dry-run]     to try it on this machine, with no domain" >&2; exit 64; }
+bad() { echo "install: $*" >&2; echo "usage: install.sh --domain NAME --operator EMAIL [--operator EMAIL...] [--port N] [--relay HOST [--relay-port N]] [--core-only] [--version X.Y.Z | --from-dir DIR] [--updates auto|asap|ask|off] [--update-window HH:MM-HH:MM] [--channel latest|next] [--name NAME] [--dry-run]" >&2; echo "   or: install.sh --local [--port N] [same options] [--dry-run]     to try it on this machine, with no domain" >&2; exit 64; }
 refuse() { echo "install: REFUSED: $*" >&2; exit 78; }
 step() { echo "== $*"; }
 
 DOMAIN=""; OPERATORS=""; PORT="7717"; CORE_ONLY="no"; DRY="no"; RELAY=""; RELAY_PORT="22"; LOCAL="no"; KEEP_RELEASE="no"; RELAY_INSTALLED="no"
-VERSION=""; FROM_DIR=""; UPDATES=""; WINDOW=""; CHANNEL=""
+VERSION=""; FROM_DIR=""; UPDATES=""; WINDOW=""; CHANNEL=""; APP_NAME=""
 while [ $# -gt 0 ]; do
     case "$1" in
         --domain) DOMAIN="${2:-}"; shift 2 || bad "--domain needs a value" ;;
@@ -129,6 +132,7 @@ while [ $# -gt 0 ]; do
         --channel) CHANNEL="${2:-}"; shift 2 || bad "--channel needs a value" ;;
         --keep-release) KEEP_RELEASE="yes"; shift ;;
         --relay-installed) RELAY_INSTALLED="yes"; shift ;;
+        --name) APP_NAME="${2:-}"; [ -n "$APP_NAME" ] || bad "--name needs a value"; shift 2 ;;
         --dry-run) DRY="yes"; shift ;;
         *) bad "unknown parameter: $1" ;;
     esac
@@ -170,6 +174,8 @@ fi
 [ -z "$UPDATES" ] || [[ "$UPDATES" =~ ^(auto|asap|ask|off)$ ]] || bad "--updates is auto, asap, ask or off"
 [ -z "$WINDOW" ] || { [[ "$WINDOW" =~ ^([01][0-9]|2[0-3]):[0-5][0-9]-([01][0-9]|2[0-3]):[0-5][0-9]$ ]] && [ "${WINDOW%-*}" != "${WINDOW#*-}" ]; } || bad "--update-window is two times, like 02:00-05:00"
 [ -z "$CHANNEL" ] || [[ "$CHANNEL" =~ ^(latest|next)$ ]] || bad "--channel is latest or next"
+# It goes in the unit file, between quotes: plain characters only (any other is chosen in Settings).
+[ -z "$APP_NAME" ] || [[ "$APP_NAME" =~ ^[A-Za-z0-9]([A-Za-z0-9\ ._-]{0,28}[A-Za-z0-9.])?$ ]] || bad "--name is letters, digits, spaces, dots and hyphens, 30 at most, like \"Home lab\""
 # What the updates will be, as the settings file has them or as asked now.
 had() { { sed -n "s/^$1=//p" "$UPDATE_CONF" 2>/dev/null || true; } | head -1; }
 SHOW_MODE="${UPDATES:-$(had MODE)}"; SHOW_MODE="${SHOW_MODE:-auto}"
@@ -188,6 +194,7 @@ if [ "$DRY" = "yes" ]; then
 would install Clavarium:
   address     $([ "$LOCAL" = "yes" ] && echo "http://127.0.0.1:$PORT, from this machine only (--local)" || echo "https://$DOMAIN")
   operators   $([ "$LOCAL" = "yes" ] && echo "whoever can open a page on this machine: no sign-in" || echo "$OPERATORS")
+  name        $([ -n "$APP_NAME" ] && echo "$APP_NAME" || echo "drawn from the address; changed in Settings")
   server      127.0.0.1:$PORT, as the account "$ACCOUNT", Node.js $NODE_VERSION
   release     $([ "$KEEP_RELEASE" = "yes" ] && echo "the one that runs, kept (--keep-release)" || [ -n "$VERSION" ] && echo "clavarium@$VERSION from npm, checked (integrity, provenance from github.com/clavarium/clavarium, npm audit signatures)" || echo "the working tree $FROM_DIR, as it is (development: not checked)")
   updates     $(case "$SHOW_MODE" in auto) echo "automatic, between ${SHOW_WINDOW%-*} and ${SHOW_WINDOW#*-}" ;; asap) echo "as soon as a version is out" ;; ask) echo "said in Settings, done when you say" ;; off) echo "off" ;; esac), channel $SHOW_CHANNEL
@@ -335,7 +342,7 @@ User=$ACCOUNT
 Group=$ACCOUNT
 WorkingDirectory=$CODE/current/app
 EnvironmentFile=$ETC/server.env
-ExecStart=$CODE/current/node/bin/node server/main.mjs --host "sudo -n $HOST_PROGRAM" --data $DATA --vault-key $VAULT/vault.key --port $PORT$([ "$LOCAL" = "yes" ] || echo " --operators $OPERATORS --public-origin https://$DOMAIN")
+ExecStart=$CODE/current/node/bin/node server/main.mjs --host "sudo -n $HOST_PROGRAM" --data $DATA --vault-key $VAULT/vault.key --port $PORT$([ "$LOCAL" = "yes" ] || echo " --operators $OPERATORS --public-origin https://$DOMAIN")$([ -z "$APP_NAME" ] || echo " --name \"$APP_NAME\"")
 Restart=on-failure
 RestartSec=3
 

package/npm-shrinkwrap.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clavarium",
-  "version": "0.2.0-next.5",
+  "version": "0.2.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

@@ -22,6 +22,13 @@
  *   GET  /api/conversations/<name>/guide         what its tool is told about where it is: the exact texts, the owner's lines
  *   POST /api/conversations/<name>/guide         {lines}: the owner's own lines for it (short, plain text)
  *   POST /api/conversations/<name>/guide/tell    its guide written again, and one line typed in its terminal to read it
+ *   POST /api/conversations/<name>/group    {group}: its folder in the list ('' none); first in it
+ *   POST /api/conversations/<name>/move     {to: up|down}: one place among those of its folder
+ *   POST /api/groups/rename                 {from, to}: for all its conversations
+ *   POST /api/groups/move                   {group, to: up|down}
+ *   POST /api/order                         {order?, groups?}: the whole order, as a drag and drop leaves it
+ *   GET  /api/instance                      {name, defaultName, given}: the name of this Clavarium
+ *   POST /api/instance                      {name}: '' for the one drawn from its address
  *   GET  /api/resources
  *   POST /api/resources                     {name} | {name, type: 'git', from?, via?: {method, key?, user?, secret?}}
  *   GET  /api/git-keys                      SSH keys made here: the public half only
@@ -104,7 +111,7 @@ function readBody(request, max = BODY_MAX) {
 }
 
 /* Returns true when the request was an API request (answered here). */
-export async function handleApi(request, response, conversations, headers, resources, originOk = sameOrigin, shortcuts, voice, sharing, secrets, network, signin, mailboxes, gitReview, platform, answerer, wakeups, alerts, talk, gitAccess, gitKeeper, shelf, health, setup, repair, guide, capacity, updates) {
+export async function handleApi(request, response, conversations, headers, resources, originOk = sameOrigin, shortcuts, voice, sharing, secrets, network, signin, mailboxes, gitReview, platform, answerer, wakeups, alerts, talk, gitAccess, gitKeeper, shelf, health, setup, repair, guide, capacity, updates, instance) {
     const { pathname } = new URL(request.url ?? '/', 'http://local');
     if (!pathname.startsWith('/api/')) return false;
     const send = (status, body) => {
@@ -194,6 +201,7 @@ export async function handleApi(request, response, conversations, headers, resou
             if (pathname === '/api/git-keys' && gitAccess) return send(200, gitAccess.keys()), true;
             if (pathname === '/api/git-hosts' && gitAccess) return send(200, gitAccess.hosts()), true;
             if (pathname === '/api/platform' && platform) return send(200, platform), true;
+            if (pathname === '/api/instance' && instance) return send(200, instance.about()), true;
             if (pathname === '/api/shelf' && shelf) return send(200, shelf.about()), true;
             /* Settings, Updates (updates.mjs): what runs, what is out, the mode, what happened. */
             if (pathname === '/api/updates' && updates) return send(200, updates.about()), true;
@@ -293,7 +301,7 @@ export async function handleApi(request, response, conversations, headers, resou
         if (dropped && secrets) { secrets.remove(dropped[1]); return send(200, { ok: true }), true; }
         if (pathname === '/api/alerts' && alerts) return send(201, alerts.add(body.subscription, body.label)), true;
         if (pathname === '/api/alerts/remove' && alerts) return send(200, alerts.remove(String(body.endpoint ?? ''))), true;
-        if (pathname === '/api/alerts/test' && alerts) return send(200, { reached: await alerts.tell({ title: 'Clavarium', body: 'This is what an alert looks like.', url: '/' }) }), true;
+        if (pathname === '/api/alerts/test' && alerts) return send(200, { reached: await alerts.tell({ title: instance?.name() ?? 'Clavarium', body: 'This is what an alert looks like.', url: '/' }) }), true;
         if (pathname === '/api/talk/settings' && talk) return send(200, talk.setWords({ lang: body.lang, own: body.own })), true;
         if (pathname === '/api/talk/thread' && talk) return send(200, talk.setThread({ levels: body.levels })), true;
         const guiding = /^\/api\/conversations\/([^/]+)\/guide(\/tell)?$/.exec(pathname);
@@ -428,6 +436,13 @@ export async function handleApi(request, response, conversations, headers, resou
         if (asking) return send(200, conversations.setAskFirst(decodeURIComponent(asking[1]), body.on)), true;
         const naming = /^\/api\/conversations\/([^/]+)\/chat-name$/.exec(pathname);
         if (naming) return send(200, conversations.setChatName(decodeURIComponent(naming[1]), body.name)), true;
+        /* The list: folders and order, the same on every device (conversations.mjs). */
+        if (pathname === '/api/instance' && instance) return send(200, instance.setName(body.name)), true;
+        if (pathname === '/api/order') return send(200, conversations.setOrder({ order: body.order, groups: body.groups })), true;
+        if (pathname === '/api/groups/rename') return send(200, conversations.renameGroup(body.from, body.to)), true;
+        if (pathname === '/api/groups/move') return send(200, conversations.moveGroup(body.group, body.to)), true;
+        const grouping = /^\/api\/conversations\/([^/]+)\/(group|move)$/.exec(pathname);
+        if (grouping) return send(200, grouping[2] === 'group' ? conversations.setGroup(decodeURIComponent(grouping[1]), body.group) : conversations.move(decodeURIComponent(grouping[1]), body.to)), true;
         const titling = /^\/api\/conversations\/([^/]+)\/title$/.exec(pathname);
         if (titling) return send(200, conversations.setTitle(decodeURIComponent(titling[1]), body.title)), true;
         const hiding = /^\/api\/conversations\/([^/]+)\/hidden$/.exec(pathname);

package/server/conversations.mjs

@@ -6,7 +6,8 @@
  *   - Sleep is a button, never a guess: telling a long job from an idle tool
  *     cannot be done without reading the tool, and this server does not read.
  */
-import { isConversationName, identifierFrom, titleProblem } from './names.mjs';
+import { isConversationName, identifierFrom, titleProblem, groupProblem } from './names.mjs';
+import { JsonFile } from './store.mjs';
 import { attachCommand, SOCKET } from './tmux.mjs';
 import { WORK, VM_USER, SHARING_STEP } from './vm.mjs';
 import { resumeOrFresh } from './tools.mjs';
@@ -60,7 +61,7 @@ const buildProgress = (since) => ({ kind: 'build', steps: ['starting', 'preparin
 const firstLine = (text) => String(text ?? '').trim().split('\n').filter(Boolean).pop()?.slice(0, 200) ?? '';
 
 export class Conversations {
-    #store; #vms; #tools; #stopDelayMs; #timers = new Map(); #watching = new Map(); #fresh = new Set(); #mountAgain = new Set(); #uid; #gid;
+    #layout; #store; #vms; #tools; #stopDelayMs; #timers = new Map(); #watching = new Map(); #fresh = new Set(); #mountAgain = new Set(); #uid; #gid;
     /* Set by the server: prepares the VM before the tool is attached, and
        names the program the tool is started through. See secrets.mjs. */
     prepare = async () => {};
@@ -90,8 +91,8 @@ export class Conversations {
     /* `uid`/`gid`: the account this server runs as; files the tool writes in
        its kept work folder belong to it on the host. */
     #startingMs; #answerMs; #pollMs;
-    constructor({ store, vms, tools, stopDelayMs = STOP_DELAY_MS, uid = process.getuid(), gid = process.getgid(), startingMs = STARTING_MS, answerMs = ANSWER_MS, pollMs = POLL_MS }) {
-        this.#store = store; this.#vms = vms; this.#tools = tools; this.#stopDelayMs = stopDelayMs; this.#uid = uid; this.#gid = gid;
+    constructor({ store, vms, tools, layout = new JsonFile(undefined, {}), stopDelayMs = STOP_DELAY_MS, uid = process.getuid(), gid = process.getgid(), startingMs = STARTING_MS, answerMs = ANSWER_MS, pollMs = POLL_MS }) {
+        this.#layout = layout; this.#store = store; this.#vms = vms; this.#tools = tools; this.#stopDelayMs = stopDelayMs; this.#uid = uid; this.#gid = gid;
         this.#startingMs = startingMs; this.#answerMs = answerMs; this.#pollMs = pollMs;
         /* A build interrupted by a restart of this server cannot be resumed
            blindly: it is marked failed, and says so. */
@@ -177,11 +178,30 @@ export class Conversations {
     /* The sign-in rules of a conversation's tool, or undefined. */
     signinRules(name) { return this.#tools.find((t) => t.id === this.#store.get(name)?.tool)?.signin; }
 
+    /* THE ORDER OF THE LIST, the same on every device: the conversations
+     * (one order; a folder shows its own in it) and the folders. Kept in a
+     * file of its own; what is not in it (made before, or by an older
+     * version) comes after, in the order it was made. A folder is only a
+     * word on its conversations: with none left, it is gone. */
+    #order() {
+        const all = this.#store.all();
+        const names = new Set(all.map((c) => c.name));
+        const kept = this.#layout.get();
+        const order = [...new Set((Array.isArray(kept.order) ? kept.order : []).filter((n) => names.has(n)))];
+        for (const c of all) if (!order.includes(c.name)) order.push(c.name);
+        const present = [...new Set(all.map((c) => c.group).filter(Boolean))];
+        const groups = [...new Set((Array.isArray(kept.groups) ? kept.groups : []).filter((g) => present.includes(g)))];
+        for (const g of present) if (!groups.includes(g)) groups.push(g);
+        return { order, groups };
+    }
+    #keepOrder({ order, groups }) { this.#layout.set({ order, groups }); }
+
     list() {
-        return this.#store.all().map((c) => {
+        const { order, groups } = this.#order();
+        return this.#store.all().sort((a, b) => order.indexOf(a.name) - order.indexOf(b.name)).map((c) => {
             const tool = this.#tools.find((t) => t.id === c.tool);
             /* An AI tool has an instruction file; a shell has none: what is dictated there is never marked. */
-            return { ...c, toolLabel: tool?.label ?? c.tool, memoryMinMb: tool?.memoryMb, resumes: Boolean(tool?.resume), rights: Boolean(tool?.rights), ai: Boolean(tool?.instructions), voiceMark: Boolean(tool?.instructions) && c.voiceMark !== false };
+            return { ...c, rank: order.indexOf(c.name), ...(c.group ? { groupRank: groups.indexOf(c.group) } : {}), toolLabel: tool?.label ?? c.tool, memoryMinMb: tool?.memoryMb, resumes: Boolean(tool?.resume), rights: Boolean(tool?.rights), ai: Boolean(tool?.instructions), voiceMark: Boolean(tool?.instructions) && c.voiceMark !== false };
         });
     }
 
@@ -211,8 +231,9 @@ export class Conversations {
         return { name: id, title: title !== undefined && title !== id ? title : undefined };
     }
 
-    create({ name: given, title: read, tool, memoryMb, workOnDisk }) {
+    create({ name: given, title: read, tool, memoryMb, workOnDisk, group }) {
         const { name, title } = this.#naming({ name: given, title: read });
+        if (group !== undefined) { const problem = groupProblem(group); if (problem) throw new Refusal(400, problem); }
         if (!isConversationName(name)) throw new Refusal(400, 'A name is 1 to 32 lower-case letters, digits or hyphens; it starts with a letter and does not end with a hyphen.');
         const chosen = this.#tools.find((t) => t.id === tool);
         if (!chosen) throw new Refusal(400, 'Unknown tool.');
@@ -222,8 +243,11 @@ export class Conversations {
         }
         if (this.#store.get(name)) throw new Refusal(409, 'A conversation already has this name.');
         const now = new Date().toISOString();
-        const conversation = { name, ...(title ? { title } : {}), tool, memoryMb: memory, diskGb: DISK_GB, fixed: FIXES, work: workOnDisk === true ? 'disk' : 'kept', phase: 'building', step: 'Starting the machine', createdAt: now, buildingSince: now, progress: buildProgress(now) };
+        const conversation = { name, ...(title ? { title } : {}), ...(group ? { group } : {}), tool, memoryMb: memory, diskGb: DISK_GB, fixed: FIXES, work: workOnDisk === true ? 'disk' : 'kept', phase: 'building', step: 'Starting the machine', createdAt: now, buildingSince: now, progress: buildProgress(now) };
+        /* A new one comes first in its folder (or first of those in none). */
+        const { order, groups } = this.#order();
         this.#store.put(conversation);
+        this.#keepOrder({ order: [name, ...order], groups: group && !groups.includes(group) ? [...groups, group] : groups });
         this.built = this.#build(name, chosen, memory);
         return conversation;
     }
@@ -483,6 +507,78 @@ export class Conversations {
         return this.#store.get(name);
     }
 
+    /* ITS FOLDER in the list ('' for none): first among those of that folder. */
+    setGroup(name, group) {
+        const c = this.#store.get(name);
+        if (!c) throw new Refusal(404, 'No such conversation.');
+        const problem = groupProblem(group);
+        if (problem) throw new Refusal(400, problem);
+        if ((c.group ?? '') === group) return c;
+        const { order, groups } = this.#order();
+        this.#store.patch(name, { group: group || undefined });
+        this.#keepOrder({ order: [name, ...order.filter((n) => n !== name)], groups: group && !groups.includes(group) ? [...groups, group] : groups });
+        return this.#store.get(name);
+    }
+
+    /* A folder renamed, for all its conversations; to the name of another, they join it. */
+    renameGroup(from, to) {
+        const problem = groupProblem(to);
+        if (problem) throw new Refusal(400, problem);
+        if (!to) throw new Refusal(400, 'Give the new name of the folder.');
+        const inside = this.#store.all().filter((c) => typeof from === 'string' && from && c.group === from);
+        if (inside.length === 0) throw new Refusal(404, 'No such folder.');
+        const { order, groups } = this.#order();
+        for (const c of inside) this.#store.patch(c.name, { group: to });
+        const renamed = groups.includes(to) ? groups.filter((g) => g !== from) : groups.map((g) => (g === from ? to : g));
+        this.#keepOrder({ order, groups: renamed });
+        return { renamed: inside.length, group: to };
+    }
+
+    /* One place up or down among the others of its folder (`to`: 'up' or 'down').
+       A hidden one is passed over by one that is shown: it is not in sight. */
+    move(name, to) {
+        const c = this.#store.get(name);
+        if (!c) throw new Refusal(404, 'No such conversation.');
+        if (to !== 'up' && to !== 'down') throw new Refusal(400, 'Say up or down.');
+        const { order, groups } = this.#order();
+        const byName = new Map(this.#store.all().map((x) => [x.name, x]));
+        const peers = order.filter((n) => (byName.get(n).group ?? '') === (c.group ?? '') && (c.hidden === true || byName.get(n).hidden !== true || n === name));
+        const at = peers.indexOf(name);
+        const other = peers[to === 'up' ? at - 1 : at + 1];
+        if (other === undefined) return { order: this.list().map((x) => x.name) };
+        const i = order.indexOf(name); const j = order.indexOf(other);
+        [order[i], order[j]] = [order[j], order[i]];
+        this.#keepOrder({ order, groups });
+        return { order };
+    }
+
+    /* A folder one place up or down among the folders. */
+    moveGroup(group, to) {
+        if (to !== 'up' && to !== 'down') throw new Refusal(400, 'Say up or down.');
+        const { order, groups } = this.#order();
+        const at = groups.indexOf(group);
+        if (typeof group !== 'string' || at < 0) throw new Refusal(404, 'No such folder.');
+        const j = to === 'up' ? at - 1 : at + 1;
+        if (j >= 0 && j < groups.length) [groups[at], groups[j]] = [groups[j], groups[at]];
+        this.#keepOrder({ order, groups });
+        return { groups };
+    }
+
+    /* A whole order, as a drag and drop leaves it: names it does not know are
+       left out, and those it forgets keep their places after the others. */
+    setOrder({ order: wanted, groups: wantedGroups } = {}) {
+        const { order, groups } = this.#order();
+        const pick = (list, known) => {
+            if (list === undefined) return known;
+            if (!Array.isArray(list) || list.length > 10_000 || list.some((x) => typeof x !== 'string')) throw new Refusal(400, 'Give a list of names.');
+            const chosen = [...new Set(list.filter((x) => known.includes(x)))];
+            return [...chosen, ...known.filter((x) => !chosen.includes(x))];
+        };
+        const next = { order: pick(wanted, order), groups: pick(wantedGroups, groups) };
+        this.#keepOrder(next);
+        return next;
+    }
+
     /* What is dictated into its terminal starts with a microphone sign, once
        per message (true, the default for a tool that is an AI), or not. */
     setVoiceMark(name, on) {

package/server/instance.mjs

@@ -0,0 +1,35 @@
+/* THE NAME OF THIS CLAVARIUM: in the title of its tab, above its list, in
+ * its alerts, and under its icon once installed. Drawn from its address
+ * (clav.example.com -> Clav; "Clavarium" with none), given at the install
+ * (--name), changed in Settings. The manifest is made here, from the one in
+ * web/, with that name -- or, for one device, the name chosen there when
+ * installing (a parameter of the manifest's address: nothing is kept). */
+import { readFileSync } from 'node:fs';
+import { JsonFile } from './store.mjs';
+import { appNameFrom, appNameProblem, shortAppName } from './names.mjs';
+import { Refusal } from './conversations.mjs';
+
+const TEMPLATE = JSON.parse(readFileSync(new URL('../web/manifest.webmanifest', import.meta.url), 'utf8'));
+
+export class Instance {
+    #file; #fallback;
+    constructor({ file = new JsonFile(undefined, {}), origin, given } = {}) {
+        this.#file = file;
+        this.#fallback = given && !appNameProblem(given) ? given : appNameFrom(origin);
+    }
+    name() { const kept = this.#file.get().name; return typeof kept === 'string' && !appNameProblem(kept) ? kept : this.#fallback; }
+    about() { return { name: this.name(), defaultName: this.#fallback, given: this.name() !== this.#fallback }; }
+    /* '' gives back the name drawn from the address. */
+    setName(name) {
+        if (typeof name !== 'string') throw new Refusal(400, 'Give a name, or nothing for the usual one.');
+        const said = name.trim();
+        if (said) { const problem = appNameProblem(said); if (problem) throw new Refusal(400, problem); }
+        this.#file.set(said && said !== this.#fallback ? { name: said } : {});
+        return this.about();
+    }
+    /* The manifest, as JSON; `asked`: the name one device chose, used only when it is a name. */
+    manifest(asked) {
+        const name = typeof asked === 'string' && asked && !appNameProblem(asked) ? asked : this.name();
+        return JSON.stringify({ ...TEMPLATE, name, short_name: shortAppName(name) }, null, 2);
+    }
+}

package/server/main.mjs

@@ -21,7 +21,8 @@ import { attachBridge } from './bridge.mjs';
 import { attachCommand } from './tmux.mjs';
 import { handleApi } from './api.mjs';
 import { Conversations, DRAWN_MS } from './conversations.mjs';
-import { Store } from './store.mjs';
+import { Store, JsonFile } from './store.mjs';
+import { Instance } from './instance.mjs';
 import { loadTools } from './tools.mjs';
 import { Vms, runner } from './vm.mjs';
 import { Resources } from './resources.mjs';
@@ -114,7 +115,9 @@ const withoutTmux = (env) => Object.fromEntries(Object.entries(env).filter(([key
 
 const REFUSED = 'This Clavarium belongs to someone else: your account is not one of its operators.\n';
 
-function serve(port, conversations, resources, { gate = () => 'local', originOk, shortcuts, voice, sharing, door, secrets, network, signin, mailboxes, gitReview, platform, answerer, wakeups, alerts, talk, gitAccess, gitKeeper, shelf, health, setup, guide, repair, capacity, updates } = {}) {
+function serve(port, conversations, resources, { gate = () => 'local', originOk, shortcuts, voice, sharing, door, secrets, network, signin, mailboxes, gitReview, platform, answerer, wakeups, alerts, talk, gitAccess, gitKeeper, shelf, health, setup, guide, repair, capacity, updates, instance = new Instance() } = {}) {
+    /* Its manifest carries the name of this Clavarium, or the one a device chose (instance.mjs). */
+    const sendManifest = (response, url) => response.writeHead(200, { ...HEADERS, 'content-type': 'application/manifest+json' }).end(instance.manifest(new URL(url ?? '/', 'http://local').searchParams.get('name') ?? undefined));
     const sendFile = async (response, file) => {
         /* Several files are one, in their order. */
         const body = Array.isArray(file[0]) ? Buffer.concat((await Promise.all(file[0].map((f) => readFile(f.startsWith('/') ? f : ROOT + f)))).flatMap((b) => [b, Buffer.from('\n;\n')])) : await readFile(file[0].startsWith('/') ? file[0] : ROOT + file[0]);
@@ -139,6 +142,7 @@ function serve(port, conversations, resources, { gate = () => 'local', originOk,
         }
         if (door && pathname.startsWith('/c/')) {
             if (await handleDoor(request, response, door)) return;
+            if (pathname === '/c/manifest.webmanifest' && request.method === 'GET') { sendManifest(response, request.url); return; }
             const file = DEVICE_FILES[pathname];
             if (!file || (request.method !== 'GET' && request.method !== 'HEAD')) { response.writeHead(404, HEADERS).end(); return; }
             await sendFile(response, file);
@@ -149,7 +153,8 @@ function serve(port, conversations, resources, { gate = () => 'local', originOk,
             response.writeHead(403, { ...HEADERS, 'content-type': 'text/plain; charset=utf-8' }).end(REFUSED);
             return;
         }
-        if (conversations && await handleApi(request, response, conversations, HEADERS, resources, originOk, shortcuts, voice, sharing, secrets, network, signin, mailboxes, gitReview, platform, answerer, wakeups, alerts, talk, gitAccess, gitKeeper, shelf, health, setup, repair, guide, capacity, updates)) return;
+        if (conversations && await handleApi(request, response, conversations, HEADERS, resources, originOk, shortcuts, voice, sharing, secrets, network, signin, mailboxes, gitReview, platform, answerer, wakeups, alerts, talk, gitAccess, gitKeeper, shelf, health, setup, repair, guide, capacity, updates, instance)) return;
+        if (pathname === '/manifest.webmanifest' && request.method === 'GET') { sendManifest(response, request.url); return; }
         const file = FILES[pathname];
         if (!file || (request.method !== 'GET' && request.method !== 'HEAD')) {
             response.writeHead(404, HEADERS).end();
@@ -179,16 +184,17 @@ const PARLEY_WAIT_MS = 20_000;
 /* The product: conversations are VMs. `host` is how the host program is
    reached on this installation, as an argument vector: it is the ONLY thing
    this server runs with more rights than its own. */
-export async function startHome({ port, host, dataDir, mntDir = dataDir, gitReserveBytes, env = process.env, conversations, resources, operators = [], publicOrigin, vaultKey, tools = loadTools(), stopDelayMs, mailReader, gitLocalRemotes = false, gitSsh, answerFetcher, answerEveryMs, wakeEveryMs, alertSend, talkEveryMs, gitEveryMs, shelfEveryMs, shelfFirstMs, healthEveryMs, healthSettleMs, setupPollMs, rereadAfterMs, serverRoomMs, updateState, updateConf }) {
+export async function startHome({ port, host, dataDir, mntDir = dataDir, gitReserveBytes, env = process.env, conversations, resources, operators = [], publicOrigin, vaultKey, tools = loadTools(), stopDelayMs, mailReader, gitLocalRemotes = false, gitSsh, answerFetcher, answerEveryMs, wakeEveryMs, alertSend, talkEveryMs, gitEveryMs, shelfEveryMs, shelfFirstMs, healthEveryMs, healthSettleMs, setupPollMs, rereadAfterMs, serverRoomMs, updateState, updateConf, appName }) {
     /* The data, in the format this code reads, before anything reads it (dataformat.mjs). */
     const migrated = migrateData(dataDir);
     if (migrated.ran.length) console.log(`data: format ${migrated.from} -> ${migrated.to}`);
     const gate = makeGate(operators);
     const originOk = makeOriginCheck(publicOrigin);
+    const instance = new Instance({ file: new JsonFile(`${dataDir}/instance.json`, {}), origin: publicOrigin, given: appName });
     let repairTerminal = async () => { throw new Error('not ready'); };
     const asHost = runner(host);
     const vms = new Vms(asHost, host);
-    const all = conversations ?? new Conversations({ store: new Store(`${dataDir}/conversations.json`), vms, tools, ...(stopDelayMs === undefined ? {} : { stopDelayMs }) });
+    const all = conversations ?? new Conversations({ store: new Store(`${dataDir}/conversations.json`), layout: new JsonFile(`${dataDir}/layout.json`, {}), vms, tools, ...(stopDelayMs === undefined ? {} : { stopDelayMs }) });
     /* Who may do what with what: ONE table, shared by everything below. */
     const grants = new Grants(new Store(`${dataDir}/grants.json`));
     const vault = new Vault(vaultKey ?? `${dataDir}/vault.key`);
@@ -287,7 +293,7 @@ export async function startHome({ port, host, dataDir, mntDir = dataDir, gitRese
     /* The owner's devices are told when something waits for them: see alerts.mjs. */
     const alerts = new Alerts({ store: new Store(`${dataDir}/alerts.json`), keyFile: `${dataDir}/alerts-keys.json`, subject: publicOrigin, ...(alertSend ? { send: alertSend } : {}) });
     const answerer = new Answerer({ store: new Store(`${dataDir}/answerer.json`), vms, config: answererConfig(env), conversations: all, dataDir, ...(answerFetcher ? { fetcher: answerFetcher } : {}),
-        onNeeds: (name, why) => { void alerts.tell({ title: `${name} waits for you`, body: why, url: `/?c=${name}` }); } });
+        onNeeds: (name, why) => { void alerts.tell({ title: `${instance.name()}: ${name} waits for you`, body: why, url: `/?c=${name}` }); } });
     const answerTimer = answerer.start(answerEveryMs);
     /* A tool is told to get to work when something arrives, or by the clock: see wakeups.mjs. */
     let bridge;
@@ -348,7 +354,7 @@ export async function startHome({ port, host, dataDir, mntDir = dataDir, gitRese
         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) });
+    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, instance, repair: (name) => repairTerminal(name) });
     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, {
@@ -418,7 +424,9 @@ if (process.argv[1] === fileURLToPath(import.meta.url)) {
         /* Where the shared folders live: $MNT, declared to the host program in
            its own settings, read here so that both agree (see clavarium-host). */
         const mntDir = hostSetting('MNT') || dataDir;
-        const server = await startHome({ port, host: host.split(' ').filter(Boolean), dataDir, mntDir, operators, publicOrigin, vaultKey });
+        /* --name: the name of this Clavarium until one is chosen in Settings (instance.mjs). */
+        const name = option(argv, 'name', '') || undefined;
+        const server = await startHome({ port, host: host.split(' ').filter(Boolean), dataDir, mntDir, operators, publicOrigin, vaultKey, appName: name });
         console.log(`http://127.0.0.1:${server.address().port}/`);
     } else {
         const command = option(argv, 'command', 'bash').split(' ').filter(Boolean);

package/server/names.mjs

@@ -39,3 +39,38 @@ export function identifierFrom(title, taken = () => false) {
         if (isConversationName(id) && !taken(id)) return id;
     }
 }
+
+/* A FOLDER of the list, and the name of this Clavarium, are names a person
+   reads too: the same rules, in their own words. '' is no folder. */
+export const GROUP_MAX = 40;
+export function groupProblem(value) {
+    if (typeof value !== 'string') return 'Give a folder name, or nothing for none.';
+    if (value === '') return '';
+    const problem = titleProblem(value);
+    if (problem) return problem.replace('A name', 'A folder name');
+    if ([...value].length > GROUP_MAX) return `A folder name is ${GROUP_MAX} characters at most.`;
+    return '';
+}
+export const APP_NAME_MAX = 30;
+export function appNameProblem(value) {
+    const problem = titleProblem(value);
+    if (problem) return problem;
+    if ([...value].length > APP_NAME_MAX) return `A name is ${APP_NAME_MAX} characters at most.`;
+    return '';
+}
+/* The name drawn from an address: clav.example.com -> Clav; none -> Clavarium. */
+export function appNameFrom(origin) {
+    let host = '';
+    try { host = origin ? new URL(origin).hostname : ''; } catch { host = ''; }
+    const first = host.split('.')[0] ?? '';
+    if (!/^[a-z][a-z0-9-]*$/i.test(first) || /^\d/.test(host) || host === 'localhost') return 'Clavarium';
+    return (first.charAt(0).toUpperCase() + first.slice(1)).slice(0, APP_NAME_MAX);
+}
+/* The short name under an icon: the name when it fits, else its first word, else its start. */
+export function shortAppName(name) {
+    const chars = [...name];
+    if (chars.length <= 12) return name;
+    const word = name.split(' ')[0];
+    if ([...word].length <= 12) return word;
+    return chars.slice(0, 12).join('').trim();
+}

package/server/store.mjs

@@ -46,3 +46,24 @@ export class Store {
         renameSync(tmp, this.#path);
     }
 }
+
+/* ONE SMALL JSON VALUE in a file (the order of the list, the name of this
+   Clavarium), written the same way. Without a path, kept in memory. */
+export class JsonFile {
+    #path; #value;
+    constructor(path, fallback) {
+        this.#path = path;
+        this.#value = fallback;
+        if (!path) return;
+        mkdirSync(dirname(path), { recursive: true });
+        try { const read = JSON.parse(readFileSync(path, 'utf8')); if (read && typeof read === 'object') this.#value = read; } catch { /* none yet */ }
+    }
+    get() { return structuredClone(this.#value); }
+    set(value) {
+        this.#value = structuredClone(value);
+        if (!this.#path) return;
+        const tmp = `${this.#path}.tmp`;
+        writeFileSync(tmp, JSON.stringify(this.#value, null, 2), { mode: 0o600 });
+        renameSync(tmp, this.#path);
+    }
+}

package/web/app.js

@@ -741,7 +741,7 @@
         if (welcoming) return;
         const c = conversations.find((x) => x.name === current);
         $('name').textContent = (c ? shownName(c) : current) || 'No conversation';
-        document.title = current ? `${c ? shownName(c) : current} - Clavarium` : 'Clavarium';
+        pageTitle = current ? (c ? shownName(c) : current) : ''; paintTitle();
         $('tool').hidden = !c; $('tool').textContent = c?.toolLabel ?? '';
         paintActions();
         $('copy-open').hidden = !current || (home && (!c || c.phase !== 'ready'));
@@ -823,6 +823,25 @@
         void chatFirst();
     }
 
+    /* ---------- THE NAME OF THIS CLAVARIUM (server/instance.mjs) ----------
+       Read from its manifest, the same for the owner's page and a device's:
+       in the title of the tab and above the list. The name chosen on this
+       device when installing goes in the address of the manifest (kept
+       here, put back at each start), so that the app is installed under it. */
+    let appName = 'Clavarium';
+    let pageTitle = '';
+    const INSTALL_NAME = 'clavarium-install-name';
+    const MANIFEST = DEVICE ? '/c/manifest.webmanifest' : '/manifest.webmanifest';
+    const manifestLink = document.querySelector('link[rel="manifest"]');
+    const installName = () => { try { return localStorage.getItem(INSTALL_NAME) ?? ''; } catch { return ''; } };
+    const pointManifest = (name) => { if (manifestLink) manifestLink.href = name ? `${MANIFEST}?name=${encodeURIComponent(name)}` : MANIFEST; };
+    function paintTitle() { document.title = pageTitle ? `${pageTitle} - ${appName}` : appName; $('list-title').textContent = appName; }
+    async function readAppName() {
+        try { const m = await (await fetch(MANIFEST)).json(); if (typeof m.name === 'string' && m.name) appName = m.name; } catch { /* the usual name */ }
+        paintTitle();
+    }
+    pointManifest(installName());
+
     /* ---------- the list ---------- */
     const post = async (path, body) => {
         const r = await fetch(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body ?? {}) });
@@ -837,43 +856,96 @@
         || (c.phase === 'ready' && !c.asleep && ['warn', 'bad'].includes(c.health?.level)));
     /* Hidden conversations are shown on a click on "N hidden", for this page only. */
     let showHidden = false;
+    /* ---------- FOLDERS, ORDER, SEARCH ----------
+       One level of folders: a word on each conversation, kept by the server
+       with the order, so that every device shows the same list. Those in no
+       folder first, then the folders, each folded or open on this device
+       only. A search filters as it is typed, hidden ones too (marked), and
+       opens the folders it finds something in. */
+    const FOLDED = 'clavarium-folded';
+    const folded = new Set((() => { try { const v = JSON.parse(localStorage.getItem(FOLDED) ?? '[]'); return Array.isArray(v) ? v.filter((x) => typeof x === 'string') : []; } catch { return []; } })());
+    const keepFolded = () => { try { localStorage.setItem(FOLDED, JSON.stringify([...folded])); } catch { /* a private window: this page only */ } };
+    let query = '';
+    let chosenHit = 0;
+    const plain = (text) => String(text ?? '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+    const matches = (c) => [shownName(c), c.name, c.group, c.toolLabel].some((x) => plain(x).includes(plain(query)));
+    const byRank = (a, b) => (a.rank ?? 0) - (b.rank ?? 0);
+    const groupsInOrder = () => [...new Set(conversations.filter((c) => c.group).sort((a, b) => (a.groupRank ?? 0) - (b.groupRank ?? 0)).map((c) => c.group))];
+    function itemButton(c) {
+        const b = document.createElement('button');
+        b.type = 'button'; b.className = 'item'; b.dataset.phase = c.phase; b.dataset.name = c.name;
+        if (c.group) b.dataset.group = c.group;
+        /* Ready, but its tool not there yet: it still reads as under way. */
+        if (holds(c)) b.dataset.busy = 'true';
+        if (c.name === current) b.setAttribute('aria-current', 'true');
+        const title = document.createElement('b');
+        const dot = document.createElement('span'); dot.className = 'dot';
+        title.append(dot, shownName(c));
+        if (c.title) b.title = c.name;
+        if (c.hidden === true) b.dataset.hidden = 'true';
+        const sub = document.createElement('small');
+        /* 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) : '';
+        sub.textContent = under ? (c.toolLabel && under.includes(c.toolLabel) ? under : `${c.toolLabel} - ${under}`) : holds(c) && c.phase !== 'building' ? `${c.toolLabel} - ${c.progress.kind === 'build' ? 'starting' : 'restarting'}` : c.phase === 'ready' ? `${c.toolLabel}${c.asleep ? ' - asleep' : ''}` : c.phase === 'building' ? `${c.toolLabel} - ${c.step ?? 'building'}` : c.phase === 'moving' ? `${c.toolLabel} - moving its work` : c.phase === 'restarting' ? `${c.toolLabel} - restarting` : `${c.toolLabel} - failed`;
+        if (c.asleep) b.dataset.asleep = 'true';
+        b.append(title, sub);
+        /* Found by a search while hidden: said. */
+        if (c.hidden === true && query) { const mark = document.createElement('small'); mark.className = 'shared-mark'; mark.textContent = 'hidden'; b.append(mark); }
+        /* Several models answer its simple questions; or they stopped, and it waits for its owner. */
+        const waking = (c.wakeups?.items ?? []).filter((w) => w.on).length;
+        if (waking > 0) { const mark = document.createElement('small'); mark.className = 'shared-mark'; mark.textContent = `${waking} wake-up${waking > 1 ? 's' : ''}`; b.append(mark); }
+        /* It talks through the app, and asks or waits for its owner there. */
+        if (c.talk && (c.talk.waiting > 0 || c.talk.state === 'waiting')) { const mark = document.createElement('small'); mark.className = 'needs-mark'; mark.textContent = c.talk.waiting > 0 ? 'asks you' : 'waits for you'; b.append(mark); }
+        if (c.answerer?.on) { const mark = document.createElement('small'); mark.className = c.answerer.needs ? 'needs-mark' : 'shared-mark'; mark.textContent = c.answerer.needs ? 'asks for you' : 'answered in your place'; b.append(mark); }
+        /* Seen at a glance: this conversation is in other hands too. */
+        const holders = sharedDevices.filter((d) => d.grants.some((g) => g.asset === `conversation:${c.name}`)).length;
+        if (holders > 0) { const mark = document.createElement('small'); mark.className = 'shared-mark'; mark.textContent = `shared with ${holders} device${holders > 1 ? 's' : ''}`; b.append(mark); }
+        b.addEventListener('click', () => select(c.name, { step: true }));
+        return b;
+    }
+    function groupBox(g, inside, all, open) {
+        const box = document.createElement('div'); box.className = 'group'; box.dataset.group = g;
+        const head = document.createElement('button'); head.type = 'button'; head.className = 'group-head'; head.dataset.group = g;
+        head.setAttribute('aria-expanded', String(open));
+        const caret = document.createElement('span'); caret.className = 'caret'; caret.setAttribute('aria-hidden', 'true'); caret.textContent = '›';
+        const label = document.createElement('span'); label.className = 'group-name'; label.textContent = g;
+        const count = document.createElement('small'); count.className = 'count'; count.textContent = String(all.length);
+        count.setAttribute('aria-label', `${all.length} conversation${all.length > 1 ? 's' : ''}`);
+        /* A small dot for each (up to six); the one that needs you is said even folded. */
+        const dots = document.createElement('span'); dots.className = 'group-dots'; dots.setAttribute('aria-hidden', 'true');
+        for (const c of all.slice(0, 6)) { const d = document.createElement('span'); d.className = 'mini'; d.dataset.phase = holds(c) ? 'building' : c.phase; if (c.asleep) d.dataset.asleep = 'true'; dots.append(d); }
+        head.append(caret, label, count, dots);
+        if (all.some(needsYou)) { const n = document.createElement('span'); n.className = 'needs-dot'; n.setAttribute('aria-label', 'one needs you'); head.append(n); head.dataset.needs = 'true'; }
+        head.addEventListener('click', () => {
+            if (query) return;
+            if (folded.has(g)) folded.delete(g); else folded.add(g);
+            keepFolded(); paint();
+        });
+        box.append(head);
+        if (open) { const body = document.createElement('div'); body.className = 'group-body'; body.append(...inside.map(itemButton)); box.append(body); }
+        return box;
+    }
     function paint() {
         const items = $('items');
         items.replaceChildren();
         const hidden = conversations.filter((c) => c.hidden === true);
-        for (const c of conversations) {
-            /* The one open stays in sight, hidden or not. */
-            if (c.hidden === true && !showHidden && c.name !== current) continue;
-            const b = document.createElement('button');
-            b.type = 'button'; b.className = 'item'; b.dataset.phase = c.phase;
-            /* Ready, but its tool not there yet: it still reads as under way. */
-            if (holds(c)) b.dataset.busy = 'true';
-            if (c.name === current) b.setAttribute('aria-current', 'true');
-            const title = document.createElement('b');
-            const dot = document.createElement('span'); dot.className = 'dot';
-            title.append(dot, shownName(c));
-            if (c.title) b.title = c.name;
-            if (c.hidden === true) b.dataset.hidden = 'true';
-            const sub = document.createElement('small');
-            /* 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) : '';
-            sub.textContent = under ? (c.toolLabel && under.includes(c.toolLabel) ? under : `${c.toolLabel} - ${under}`) : holds(c) && c.phase !== 'building' ? `${c.toolLabel} - ${c.progress.kind === 'build' ? 'starting' : 'restarting'}` : c.phase === 'ready' ? `${c.toolLabel}${c.asleep ? ' - asleep' : ''}` : c.phase === 'building' ? `${c.toolLabel} - ${c.step ?? 'building'}` : c.phase === 'moving' ? `${c.toolLabel} - moving its work` : c.phase === 'restarting' ? `${c.toolLabel} - restarting` : `${c.toolLabel} - failed`;
-            if (c.asleep) b.dataset.asleep = 'true';
-            b.append(title, sub);
-            /* Several models answer its simple questions; or they stopped, and it waits for its owner. */
-            const waking = (c.wakeups?.items ?? []).filter((w) => w.on).length;
-            if (waking > 0) { const mark = document.createElement('small'); mark.className = 'shared-mark'; mark.textContent = `${waking} wake-up${waking > 1 ? 's' : ''}`; b.append(mark); }
-            /* It talks through the app, and asks or waits for its owner there. */
-            if (c.talk && (c.talk.waiting > 0 || c.talk.state === 'waiting')) { const mark = document.createElement('small'); mark.className = 'needs-mark'; mark.textContent = c.talk.waiting > 0 ? 'asks you' : 'waits for you'; b.append(mark); }
-            if (c.answerer?.on) { const mark = document.createElement('small'); mark.className = c.answerer.needs ? 'needs-mark' : 'shared-mark'; mark.textContent = c.answerer.needs ? 'asks for you' : 'answered in your place'; b.append(mark); }
-            /* Seen at a glance: this conversation is in other hands too. */
-            const holders = sharedDevices.filter((d) => d.grants.some((g) => g.asset === `conversation:${c.name}`)).length;
-            if (holders > 0) { const mark = document.createElement('small'); mark.className = 'shared-mark'; mark.textContent = `shared with ${holders} device${holders > 1 ? 's' : ''}`; b.append(mark); }
-            b.addEventListener('click', () => select(c.name, { step: true }));
-            items.append(b);
+        /* The one open stays in sight, hidden or not; a search finds hidden ones too. */
+        const shown = conversations.filter((c) => (query ? matches(c) : c.hidden !== true || showHidden || c.name === current)).sort(byRank);
+        items.append(...shown.filter((c) => !c.group).map(itemButton));
+        for (const g of groupsInOrder()) {
+            const inside = shown.filter((c) => c.group === g);
+            /* Nothing of it in sight (all hidden, or nothing found): not shown. */
+            if (inside.length === 0) continue;
+            items.append(groupBox(g, inside, conversations.filter((c) => c.group === g).sort(byRank), Boolean(query) || !folded.has(g)));
         }
+        /* 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')];
+        chosenHit = Math.max(0, Math.min(chosenHit, hits.length - 1));
+        if (query) hits.forEach((h, i) => { h.toggleAttribute('data-chosen', i === chosenHit); if (i === chosenHit) h.scrollIntoView?.({ block: 'nearest' }); });
+        $('search-none').hidden = !query || hits.length > 0;
         const toggle = $('hidden-toggle');
-        toggle.hidden = DEVICE || hidden.length === 0;
+        toggle.hidden = DEVICE || hidden.length === 0 || Boolean(query);
         toggle.textContent = showHidden ? `Hide ${hidden.length} hidden` : `${hidden.length} hidden`;
         toggle.setAttribute('aria-expanded', String(showHidden));
         const calling = hidden.some(needsYou);
@@ -883,6 +955,151 @@
         $('empty').hidden = conversations.length > 0;
         paintDeviceCount();
     }
+
+    /* THE SEARCH: a step of its own (Back closes it); Escape empties it, then closes it. */
+    function openSearch() {
+        if (DEVICE) return;
+        /* Asked for: the keyboard comes with it, lock or not. */
+        if (!$('search').hidden) { $('search-field').focus(); return; }
+        $('search').hidden = false; $('search-open').setAttribute('aria-expanded', 'true');
+        nav.push('search', () => closeSearch());
+        $('search-field').focus();
+    }
+    function closeSearch() {
+        $('search').hidden = true; $('search-open').setAttribute('aria-expanded', 'false');
+        $('search-field').value = ''; query = ''; chosenHit = 0;
+        paint();
+    }
+    $('search-open').addEventListener('click', () => { if ($('search').hidden) openSearch(); else if (!nav.close('search')) closeSearch(); });
+    $('search-field').addEventListener('input', () => { query = $('search-field').value.trim(); chosenHit = 0; paint(); });
+    $('search-field').addEventListener('keydown', (event) => {
+        if (event.isComposing) return;
+        const hits = [...$('items').querySelectorAll('.item')];
+        if (event.key === 'Escape') {
+            event.preventDefault(); event.stopPropagation();
+            if ($('search-field').value) { $('search-field').value = ''; query = ''; chosenHit = 0; paint(); return; }
+            if (!nav.close('search')) closeSearch();
+            $('search-open').focus();
+        } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            chosenHit += event.key === 'ArrowDown' ? 1 : -1;
+            paint();
+        } else if (event.key === 'Enter') {
+            event.preventDefault();
+            const hit = hits[chosenHit] ?? hits[0];
+            if (hit) select(hit.dataset.name, { step: true });
+        }
+    });
+    /* "/" or Ctrl+K, from anywhere but a field and the terminal (its tool needs its keys). */
+    document.addEventListener('keydown', (event) => {
+        if (DEVICE || event.defaultPrevented || event.isComposing || event.altKey) return;
+        const slash = event.key === '/' && !event.ctrlKey && !event.metaKey;
+        const k = (event.ctrlKey || event.metaKey) && (event.key === 'k' || event.key === 'K');
+        if (!slash && !k) return;
+        const target = event.target instanceof Element ? event.target : null;
+        if (target?.closest('#terminal') || target?.matches('input, textarea, select, [contenteditable]:not([contenteditable=false])')) return;
+        if ($('list').hidden || (narrow() && app.dataset.view !== 'list')) return;
+        event.preventDefault();
+        openSearch();
+    });
+
+    /* MOVED BY HAND: dragged with a mouse; held, then dragged, with a finger;
+       Alt and an arrow key from the keyboard. The server keeps the order. */
+    let drag = null; let justDragged = false;
+    const dropTarget = (d, x, y) => {
+        const under = document.elementFromPoint(x, y);
+        let el = under?.closest('#items .item, #items .group-head');
+        if (!el || el === d.el) return null;
+        if (d.kind === 'group') {
+            if (el.classList.contains('item')) { if (!el.dataset.group) return null; el = el.closest('.group').querySelector('.group-head'); }
+            if (el === d.el) return null;
+        }
+        const box = el.getBoundingClientRect();
+        const where = d.kind === 'item' && el.classList.contains('group-head') ? 'into' : y < box.top + box.height / 2 ? 'before' : 'after';
+        return { el, where };
+    };
+    const unmark = () => { for (const x of $('items').querySelectorAll('[data-drop]')) x.removeAttribute('data-drop'); };
+    function endDrag() {
+        if (!drag) return;
+        clearTimeout(drag.timer);
+        drag.el.removeAttribute('data-dragging'); $('items').removeAttribute('data-dragging');
+        unmark(); drag = null;
+    }
+    function startDrag() {
+        if (!drag) return;
+        drag.on = true; drag.el.setAttribute('data-dragging', 'true'); $('items').setAttribute('data-dragging', 'true');
+        if (drag.touch) navigator.vibrate?.(15);
+    }
+    async function dropped(d, target) {
+        if (!target) return;
+        try {
+            if (d.kind === 'group') {
+                const groups = groupsInOrder().filter((g) => g !== d.el.dataset.group);
+                const at = groups.indexOf(target.el.dataset.group) + (target.where === 'after' ? 1 : 0);
+                groups.splice(at, 0, d.el.dataset.group);
+                await post(`${API}/order`, { groups });
+            } else {
+                const name = d.el.dataset.name;
+                const was = conversations.find((c) => c.name === name)?.group ?? '';
+                const group = target.where === 'into' ? target.el.dataset.group : target.el.dataset.group ?? '';
+                const order = [...conversations].sort(byRank).map((c) => c.name).filter((n) => n !== name);
+                const firstOf = order.findIndex((n) => (conversations.find((c) => c.name === n)?.group ?? '') === group);
+                const at = target.where === 'into' ? (firstOf < 0 ? 0 : firstOf) : order.indexOf(target.el.dataset.name) + (target.where === 'after' ? 1 : 0);
+                order.splice(at, 0, name);
+                if (group !== was) await post(`${API}/conversations/${encodeURIComponent(name)}/group`, { group });
+                await post(`${API}/order`, { order });
+                if (target.where === 'into' && folded.has(group)) { folded.delete(group); keepFolded(); }
+            }
+        } catch (error) { show(error.message, 'Back', () => { notice.hidden = true; }); }
+        await refresh();
+    }
+    $('items').addEventListener('pointerdown', (event) => {
+        if (DEVICE || query || event.button !== 0) return;
+        const el = event.target.closest('.item, .group-head');
+        if (!el) return;
+        endDrag();
+        drag = { el, kind: el.classList.contains('item') ? 'item' : 'group', x: event.clientX, y: event.clientY, id: event.pointerId, on: false, touch: event.pointerType !== 'mouse' };
+        if (drag.touch) drag.timer = setTimeout(startDrag, 450);
+    });
+    addEventListener('pointermove', (event) => {
+        if (!drag || event.pointerId !== drag.id) return;
+        const far = Math.hypot(event.clientX - drag.x, event.clientY - drag.y) > 8;
+        /* A finger that moves before it was held scrolls the list: no drag. */
+        if (!drag.on) { if (drag.touch) { if (far) endDrag(); return; } if (!far) return; startDrag(); }
+        event.preventDefault();
+        unmark();
+        const target = dropTarget(drag, event.clientX, event.clientY);
+        if (target) target.el.dataset.drop = target.where;
+    }, { passive: false });
+    addEventListener('pointerup', (event) => {
+        if (!drag || event.pointerId !== drag.id) return;
+        const d = drag; const target = d.on ? dropTarget(d, event.clientX, event.clientY) : null;
+        endDrag();
+        if (!d.on) return;
+        /* The click that ends a drag opens nothing. */
+        justDragged = true; setTimeout(() => { justDragged = false; }, 0);
+        void dropped(d, target);
+    });
+    addEventListener('pointercancel', () => endDrag());
+    /* Held: the page neither scrolls nor offers its own menu under the finger. */
+    document.addEventListener('touchmove', (event) => { if (drag?.on) event.preventDefault(); }, { passive: false });
+    $('items').addEventListener('contextmenu', (event) => { if (drag) event.preventDefault(); });
+    $('items').addEventListener('click', (event) => { if (justDragged) { event.stopPropagation(); event.preventDefault(); } }, true);
+    $('items').addEventListener('keydown', async (event) => {
+        if (!event.altKey || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')) return;
+        const el = event.target.closest('.item, .group-head');
+        if (!el) return;
+        event.preventDefault();
+        const to = event.key === 'ArrowUp' ? 'up' : 'down';
+        try {
+            if (el.classList.contains('item')) await post(`${API}/conversations/${encodeURIComponent(el.dataset.name)}/move`, { to });
+            else await post(`${API}/groups/move`, { group: el.dataset.group, to });
+        } catch { /* said by the list as it is */ }
+        await refresh();
+        const again = el.classList.contains('item') ? `.item[data-name="${CSS.escape(el.dataset.name)}"]` : `.group-head[data-group="${CSS.escape(el.dataset.group)}"]`;
+        $('items').querySelector(again)?.focus();
+    });
+
     async function refresh() {
         clearTimeout(pollTimer);
         try {
@@ -968,8 +1185,9 @@
         const title = $('create-name').value.trim();
         const id = $('create-id').value.trim();
         try {
-            const made = await post(`${API}/conversations`, { title, ...(id ? { name: id } : {}), tool: chosenTool, workOnDisk: $('create-disk').checked });
-            $('create').hidden = true; $('create-name').value = ''; $('create-id').value = ''; $('create-disk').checked = false;
+            const group = $('create-group').value.trim();
+            const made = await post(`${API}/conversations`, { title, ...(id ? { name: id } : {}), ...(group ? { group } : {}), tool: chosenTool, workOnDisk: $('create-disk').checked });
+            $('create').hidden = true; $('create-name').value = ''; $('create-id').value = ''; $('create-group').value = ''; $('create-disk').checked = false;
             await refresh();
             select(made.name);
         } catch (error) { $('create-error').textContent = error.message; $('create-error').hidden = false; }
@@ -1587,7 +1805,12 @@
             disk.value = String(now);
             memory.dataset.of = of;
         }
-        $('machine-size').hidden = DEVICE || !here || here.phase !== 'ready';
+        /* Not ready (built, restarted, moved): its sizes are shown, and chosen once it is. */
+        $('machine-size').hidden = DEVICE || !here || here.phase === 'failed';
+        const waiting = here && (here.phase !== 'ready' || holds(here)) ? (here.phase === 'moving' ? 'Available once it has moved.' : here.phase === 'restarting' || (here.phase === 'ready' && here.progress?.kind !== 'build') ? 'Available once it has restarted.' : 'Available once its machine is built.') : '';
+        for (const id of ['machine-memory', 'machine-disk', 'machine-size-apply']) $(id).disabled = Boolean(waiting);
+        $('machine-size').toggleAttribute('data-waiting', Boolean(waiting));
+        $('machine-size-wait').textContent = waiting; $('machine-size-wait').hidden = !waiting;
         /* When its tool starts: its last session, or a new one -- for a tool that can take one up. */
         $('resume-box').hidden = DEVICE || !here?.resumes;
         for (const b of $('resume-on').children) b.setAttribute('aria-pressed', String((b.dataset.on === 'true') === (here?.resume !== false)));
@@ -1947,7 +2170,11 @@
         const here = conversations.find((x) => x.name === current);
         if (document.activeElement !== $('chat-name')) $('chat-name').value = here?.chatName ?? '';
         if (document.activeElement !== $('title-name')) $('title-name').value = shownName(here);
-        $('title-box').hidden = $('hide-box').hidden = DEVICE || !here;
+        $('title-box').hidden = $('hide-box').hidden = $('group-box').hidden = DEVICE || !here;
+        if (document.activeElement !== $('group-name')) $('group-name').value = here?.group ?? '';
+        $('group-rename-form').hidden = !here?.group;
+        if (document.activeElement !== $('group-rename')) $('group-rename').value = here?.group ?? '';
+        $('group-up').hidden = $('group-down').hidden = !here?.group;
         for (const b of $('hide-on').children) b.setAttribute('aria-pressed', String((b.dataset.on === 'true') === (here?.hidden === true)));
         $('voice-mark-box').hidden = !here?.ai;
         for (const b of $('voice-mark').children) b.setAttribute('aria-pressed', String((b.dataset.on === 'true') === (here?.voiceMark === true)));
@@ -1967,6 +2194,26 @@
             catch (error) { $('panel-error').textContent = error.message; $('panel-error').hidden = false; }
         });
     }
+    const panelTry = async (job) => {
+        $('panel-error').hidden = true;
+        try { await job(); await refresh(); await paintTalkBox(); }
+        catch (error) { $('panel-error').textContent = error.message; $('panel-error').hidden = false; }
+    };
+    $('group-form').addEventListener('submit', (event) => {
+        event.preventDefault();
+        void panelTry(async () => { await post(`${API}/conversations/${encodeURIComponent(current)}/group`, { group: $('group-name').value.trim() }); $('group-name').blur(); });
+    });
+    $('group-rename-form').addEventListener('submit', (event) => {
+        event.preventDefault();
+        const from = conversations.find((x) => x.name === current)?.group;
+        void panelTry(async () => {
+            const to = $('group-rename').value.trim();
+            await post(`${API}/groups/rename`, { from, to }); $('group-rename').blur();
+            if (folded.delete(from)) { folded.add(to); keepFolded(); }
+        });
+    });
+    for (const [id, to] of [['move-up', 'up'], ['move-down', 'down']]) $(id).addEventListener('click', () => void panelTry(() => post(`${API}/conversations/${encodeURIComponent(current)}/move`, { to })));
+    for (const [id, to] of [['group-up', 'up'], ['group-down', 'down']]) $(id).addEventListener('click', () => void panelTry(() => post(`${API}/groups/move`, { group: conversations.find((x) => x.name === current)?.group, to })));
     $('title-form').addEventListener('submit', async (event) => {
         event.preventDefault();
         $('panel-error').hidden = true;
@@ -2886,9 +3133,27 @@
             ? `Who may sign in: ${platform.operators.join(', ')}. Address: ${platform.address ?? 'not declared'}. Both were set when this was installed.`
             : 'Development mode: anyone on this machine is the operator.';
         $('settings-about').textContent = `Clavarium ${platform.version ?? ''}`;
+        void paintInstance();
         await Promise.all([paintHosts(), paintShelf(), paintServer(), paintUpdates()]);
     }
 
+    /* ---------- the name of this Clavarium, in Settings ---------- */
+    async function paintInstance() {
+        const about = await fetch(`${API}/instance`).then((r) => r.json()).catch(() => null);
+        if (!about) return;
+        $('instance-name').placeholder = about.defaultName;
+        if (document.activeElement !== $('instance-name')) $('instance-name').value = about.given ? about.name : '';
+    }
+    $('instance-form').addEventListener('submit', async (event) => {
+        event.preventDefault();
+        $('instance-error').hidden = true;
+        try {
+            const about = await post(`${API}/instance`, { name: $('instance-name').value.trim() });
+            appName = about.name; paintTitle(); $('instance-name').blur(); await paintInstance();
+            if (!installName()) pointManifest('');
+        } catch (error) { $('instance-error').textContent = error.message; $('instance-error').hidden = false; }
+    });
+
     /* ---------- Updates: what runs, what is out, how it updates itself (server/updates.mjs) ---------- */
     let updatesTimer; let updatesBusy = false;
     const RESULT_WORDS = { done: 'Done', 'rolled-back': 'Did not work: went back', failed: 'Failed' };
@@ -5359,17 +5624,22 @@
     let installEvent = null;
     let installOffered = false;
     const offerInstall = () => { installOffered = true; $('install').hidden = false; };
-    addEventListener('beforeinstallprompt', (event) => { event.preventDefault(); installEvent = event; offerInstall(); });
-    addEventListener('appinstalled', () => { installEvent = null; installOffered = false; $('install').hidden = true; });
+    /* Chrome reads the manifest again when its address changes, and may then
+       offer the install anew: that offer, if it comes soon, is the one used. */
+    let freshOffer = null;
+    addEventListener('beforeinstallprompt', (event) => {
+        event.preventDefault(); installEvent = event; offerInstall();
+        if (freshOffer) { const take = freshOffer; freshOffer = null; take(event); }
+    });
+    addEventListener('appinstalled', () => { installEvent = null; installOffered = false; $('install').hidden = true; $('install-name-form').hidden = true; });
     if (apple && !asApp) offerInstall();
+    /* FIRST A NAME FOR THIS DEVICE, then the browser's own question. */
     $('install').addEventListener('click', async () => {
         const back = () => { notice.hidden = true; focusTerminal(); };
         if (installEvent) {
-            const asked = installEvent; installEvent = null;
-            asked.prompt();
-            const choice = await asked.userChoice.catch(() => ({ outcome: 'dismissed' }));
-            if (choice.outcome === 'accepted') { installOffered = false; $('install').hidden = true; }
-            else installEvent = asked;
+            $('install-name').value = installName() || appName;
+            $('install-name-form').hidden = false;
+            focusField($('install-name'));
             return;
         }
         show(DEVICE
@@ -5378,6 +5648,28 @@
         'Back', back);
     });
 
+    $('install-name-cancel').addEventListener('click', () => { $('install-name-form').hidden = true; });
+    $('install-name-form').addEventListener('submit', async (event) => {
+        event.preventDefault();
+        if (!installEvent) { $('install-name-form').hidden = true; return; }
+        /* Text only, as the server takes it; anything else falls back to the name of this Clavarium. */
+        const name = $('install-name').value.trim().replace(/[\u0000-\u001f\u007f-\u009f\u200b-\u200f\u2028-\u202e\u2060-\u206f\ufeff]/g, '').slice(0, 30).trim();
+        const chosen = name && name !== appName ? name : '';
+        $('install-name-form').hidden = true;
+        let asked = installEvent;
+        if (chosen !== installName()) {
+            try { if (chosen) localStorage.setItem(INSTALL_NAME, chosen); else localStorage.removeItem(INSTALL_NAME); } catch { /* the address carries it all the same */ }
+            pointManifest(chosen);
+            asked = await new Promise((resolve) => { const t = setTimeout(() => { freshOffer = null; resolve(installEvent); }, 1200); freshOffer = (e) => { clearTimeout(t); resolve(e); }; });
+        }
+        if (!asked) return;
+        installEvent = null;
+        asked.prompt();
+        const choice = await asked.userChoice.catch(() => ({ outcome: 'dismissed' }));
+        if (choice.outcome === 'accepted') { installOffered = false; $('install').hidden = true; }
+        else installEvent = asked;
+    });
+
     /* ---------- the other conversations of this device ---------- */
     /* A device may have been given several conversations, each by a code of
        its own. One is shown at a time; the others are a tap away. */
@@ -5417,6 +5709,7 @@
     });
 
     async function start() {
+        void readAppName();
         if (DEVICE) {
             view('room');
             const fresh = location.hash.length > 1;      /* arriving with a code: a first visit */
@@ -5431,7 +5724,7 @@
             if (door.conversation === null) {
                 /* Given folders and no conversation: this page is their files, and nothing else. */
                 for (const id of ['keys', 'shortcuts', 'copy-open', 'theme', 'files-close']) $(id).hidden = true;
-                $('name').textContent = 'Shared files'; document.title = 'Shared files - Clavarium';
+                $('name').textContent = 'Shared files'; pageTitle = 'Shared files'; paintTitle();
                 say('', 'ended'); $('state').hidden = true; notice.hidden = true;
                 await paintFiles(); $('files').hidden = false;
                 $('files-none').textContent = 'Nothing is shared with this device any more.';

package/web/device.html

@@ -28,6 +28,7 @@
       </div>
       <button type="button" id="menu" aria-expanded="false" aria-label="More">&#8943;</button>
     </header>
+    <form id="install-name-form" class="row install-bar" autocomplete="off" hidden><label for="install-name">Name on this device</label><input id="install-name" maxlength="30" spellcheck="false"><button type="submit" class="primary">Install</button><button type="button" id="install-name-cancel">Cancel</button></form>
     <main>
       <div id="terminal"></div>
       <!-- Where its conversation talks through the app: its chat, drawn by

package/web/index.html

@@ -13,7 +13,9 @@
 <link rel="stylesheet" href="/vendor/diff2html.css">
 <div id="app" data-place="conversations">
   <aside id="list" hidden>
-    <div class="top"><b>Conversations</b><button type="button" id="new" class="primary">+ New</button></div>
+    <div class="top"><b id="list-title" title="Conversations">Clavarium</b><span class="top-acts"><button type="button" id="search-open" class="icon-btn" aria-label="Search conversations" title="Search (/ or Ctrl+K)" aria-expanded="false" aria-controls="search"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button><button type="button" id="new" class="primary">+ New</button></span></div>
+    <!-- SEARCH, discreet: opened by the magnifier, "/" or Ctrl+K; filters as it is typed. -->
+    <div id="search" role="search" hidden><input id="search-field" type="search" placeholder="Search" aria-label="Search conversations: name, folder, identifier, tool" autocomplete="off" spellcheck="false" maxlength="60" aria-controls="items"></div>
     <form id="create" hidden autocomplete="off">
       <label for="create-name">Name</label>
       <input id="create-name" name="name" required maxlength="60" placeholder="Website redesign" spellcheck="false">
@@ -22,6 +24,9 @@
         <input id="create-id" maxlength="32" pattern="[a-z]([a-z0-9\-]{0,30}[a-z0-9])?" title="Lower-case letters, digits and hyphens; starts with a letter, does not end with a hyphen" placeholder="website-redesign" spellcheck="false" autocapitalize="none">
         <p class="hint">Used for its machine, its folders, its address and what is given to it. Drawn from the name when empty; it cannot be changed later. The name can.</p>
       </details>
+      <label for="create-group">Folder <span class="hint">(optional)</span></label>
+      <input id="create-group" maxlength="40" list="group-names" placeholder="None" spellcheck="false" autocomplete="off">
+      <datalist id="group-names"></datalist>
       <span class="legend">What runs in it</span>
       <div id="create-tools" class="choices" role="radiogroup" aria-label="What runs in it"></div>
       <label class="check"><input type="checkbox" id="create-disk"> Work on the machine's own disk</label>
@@ -31,6 +36,7 @@
         <span class="hint">a new machine takes a few minutes</span></div>
     </form>
     <div id="items"></div>
+    <p id="search-none" class="hint" hidden>Nothing found.</p>
     <!-- Hidden conversations still run; this shows them, and says when one needs you. -->
     <button type="button" id="hidden-toggle" class="inline" hidden aria-expanded="false"></button>
     <p id="empty" class="hint" hidden>No conversation yet. A conversation is a machine of its own with one tool running in it.</p>
@@ -122,6 +128,13 @@
             <div id="title-box" hidden>
             <form id="title-form" class="row" autocomplete="off"><label for="title-name">Name</label><input id="title-name" maxlength="60" spellcheck="false"><button type="submit">Save</button></form>
             </div>
+            <div id="group-box" hidden>
+            <form id="group-form" class="row" autocomplete="off"><label for="group-name">Folder</label><input id="group-name" maxlength="40" list="group-names" placeholder="None" spellcheck="false"><button type="submit">Save</button></form>
+            <p class="hint">A folder of the list, shared by every device: choose one, type a new one, or empty it for none.</p>
+            <form id="group-rename-form" class="row" autocomplete="off" hidden><label for="group-rename">Rename its folder</label><input id="group-rename" maxlength="40" spellcheck="false"><button type="submit">Rename for all</button></form>
+            <div class="row" id="order-row"><span>Its place</span><button type="button" id="move-up">Move up</button><button type="button" id="move-down">Move down</button><button type="button" id="group-up" hidden>Folder up</button><button type="button" id="group-down" hidden>Folder down</button></div>
+            <p class="hint" id="order-hint">The same order on every device. In the list: drag it (on a phone or tablet, hold it, then drag), or Alt and an arrow key.</p>
+            </div>
             <div id="hide-box" hidden>
             <div class="row"><span>In the list</span><div class="levels" id="hide-on" role="group" aria-label="Hidden from the list"><button type="button" data-on="false">Shown</button><button type="button" data-on="true">Hidden</button></div></div>
             <p class="hint">Hidden, it runs as before, keeps what it was given and stays in Access; "hidden" at the bottom of the list shows it.</p>
@@ -184,6 +197,7 @@
               <select id="machine-memory"></select>
               <label for="machine-disk">Disk</label>
               <select id="machine-disk"></select>
+              <p class="hint" id="machine-size-wait" role="status" hidden></p>
               <p class="hint" id="machine-size-hint">Changing them stops the machine cleanly, sets them and starts it again: its work folder, folders and branches stay. A disk can only grow.</p>
               <div class="row"><button type="submit" id="machine-size-apply">Apply...</button></div>
             </form>
@@ -532,6 +546,7 @@
           <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>
+        <form id="install-name-form" class="row" autocomplete="off" hidden><label for="install-name">Name on this device</label><input id="install-name" maxlength="30" spellcheck="false"><button type="submit" class="primary">Install</button><button type="button" id="install-name-cancel">Cancel</button></form>
         <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>
@@ -544,6 +559,14 @@
           </div>
         </details>
         <h3 class="chapter-group">This server</h3>
+        <details class="chapter" id="settings-ch-general" data-chapter="s-general">
+          <summary><span class="chapter-title">General</span><span class="chapter-about">The name of this Clavarium.</span></summary>
+          <div class="chapter-body">
+        <form id="instance-form" class="row" autocomplete="off"><label for="instance-name">Name of this Clavarium</label><input id="instance-name" maxlength="30" spellcheck="false"><button type="submit">Save</button></form>
+        <p class="hint" id="instance-hint">In the title of its tab, above its list, in its alerts, and under its icon once installed. Empty: the name drawn from its address.</p>
+        <p class="error" id="instance-error" role="alert" hidden></p>
+          </div>
+        </details>
         <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">

package/web/style.css

@@ -1215,3 +1215,44 @@ select.pill { appearance: auto; }
 .lk-col h3.lk-colh .lk-add { width: 26px; height: 26px; font-size: .95rem; letter-spacing: 0; }
 .lk-phead { margin: 4px 0 6px; }
 .as-kinds { display: flex; flex-wrap: wrap; gap: 8px; } .as-kinds button { display: inline-flex; align-items: center; gap: 8px; }
+
+/* ---------- the list: search, folders, moved by hand ---------- */
+#list .top-acts { display: flex; align-items: center; gap: 6px; }
+#list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border-color: transparent; color: var(--ink2); }
+.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: inherit; border-color: var(--line); }
+.icon-btn .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+#search[hidden] { display: none; }
+#search-field { width: 100%; box-sizing: border-box; padding: 6px 10px; font-size: .9rem; border-radius: 8px; }
+#search-none { margin: 0 .25rem; }
+.item[data-chosen] { border-color: var(--brass); }
+.group { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
+.group-head { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 6px 8px; background: transparent; border-color: transparent; font-weight: 600; color: var(--ink2); }
+.group-head:hover { border-color: var(--line); }
+.group-head .caret { display: inline-block; width: 1em; transition: transform .15s; }
+.group-head[aria-expanded="true"] .caret { transform: rotate(90deg); }
+.group-head .group-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink, inherit); }
+.group-head .count { font-weight: 400; color: var(--ink2); }
+.group-head .group-dots { display: inline-flex; gap: 3px; margin-left: auto; }
+.group-head .mini { width: 6px; height: 6px; border-radius: 50%; background: var(--ink2); }
+.group-head .mini[data-phase="ready"] { background: var(--ok); }
+.group-head .mini[data-phase="building"], .group-head .mini[data-phase="restarting"], .group-head .mini[data-phase="moving"] { background: var(--warn); }
+.group-head .mini[data-phase="failed"] { background: var(--danger); }
+.group-head .mini[data-asleep="true"] { background: var(--ink2); }
+.group-head .needs-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); flex-shrink: 0; }
+.group-body { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; border-left: 2px solid var(--line); margin-left: 8px; }
+#items .item, #items .group-head { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
+#items [data-dragging] { opacity: .5; }
+#items[data-dragging] { cursor: grabbing; }
+#items [data-drop="before"] { box-shadow: 0 -3px 0 0 var(--brass); }
+#items [data-drop="after"] { box-shadow: 0 3px 0 0 var(--brass); }
+#items [data-drop="into"] { outline: 2px dashed var(--brass); outline-offset: 1px; }
+#machine-size[data-waiting] select, #machine-size[data-waiting] button { opacity: .55; cursor: not-allowed; }
+.install-bar { padding: 6px 10px; flex-wrap: wrap; }
+.install-bar[hidden], #install-name-form[hidden] { display: none; }
+#search-field, #group-name, #group-rename, #instance-name, #install-name { font: .875rem var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; min-width: 0; min-height: 36px; box-sizing: border-box; }
+#group-name, #group-rename, #instance-name, #install-name { flex: 1 1 140px; }
+#search-field::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); }
+.group-head .caret { font-size: 1.1rem; line-height: 1; text-align: center; }
+#machine-size[data-waiting] select { color: var(--ink2); border-style: dashed; }
+#machine-size-wait { color: var(--brass); font-weight: 600; }